/* =========================================================
   letsgodrop · maquetas realistas
   Cada maqueta (.mk) es un contenedor: todo lo de dentro se mide en --u (1/900 de su ancho; el móvil, 1/390),
   así escalan como una captura a cualquier ancho. Colores y medidas tomados de cada producto real.
   ========================================================= */

.mk {
  position: relative; container-type: inline-size; width: 100%; border-radius: 18px; overflow: hidden;
  border: 1px solid var(--mk-line); box-shadow: var(--shadow-lg); background: #fff; color: #1a1a1a;
  font-family: var(--font-sans); line-height: 1.35; text-align: left; -webkit-font-smoothing: antialiased;
}
.mk * { box-sizing: border-box; }
.mk > *, .mk .cl, .mk .sa, .mk .sg, .mk .pv, .mk .as, .mk .mr, .mk .bw__bar { --u: calc(100cqw / 900); }
.mk p { margin: 0; }
.mk svg { display: block; }

/* La barra del navegador, a escala */
.mk .bw__bar { height: calc(var(--u) * 34); gap: calc(var(--u) * 14); padding: 0 calc(var(--u) * 14); }
.mk .bw__dots { gap: calc(var(--u) * 7); }
.mk .bw__dots i { width: calc(var(--u) * 11); height: calc(var(--u) * 11); }
.mk .bw__url { height: calc(var(--u) * 22); max-width: calc(var(--u) * 360); font-size: calc(var(--u) * 12); gap: calc(var(--u) * 6); border-radius: calc(var(--u) * 7); }
.mk .bw__url .ic { width: calc(var(--u) * 11); height: calc(var(--u) * 11); }

/* Dónde hay que pulsar, en las maquetas quietas: un anillo que late y el ratón */
.cur-hint { position: absolute; left: 62%; top: 58%; width: calc(var(--u) * 22); height: calc(var(--u) * 22); pointer-events: none; z-index: 4; }
.cur-hint::before {
  content: ''; position: absolute; left: calc(var(--u) * -12); top: calc(var(--u) * -12); width: calc(var(--u) * 24); height: calc(var(--u) * 24); border-radius: 50%;
  background: rgba(47, 107, 255, 0.45); animation: hintRing 1.8s var(--ease-out-quint) infinite;
}
.cur-hint::after {
  content: ''; position: absolute; left: calc(var(--u) * -3); top: calc(var(--u) * -2); width: calc(var(--u) * 22); height: calc(var(--u) * 22);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5.5 2.2l13.2 11.4-6.2.7 3.5 7-3 1.4-3.4-7.1-4.1 4.3z' fill='%23fff' stroke='%23111' stroke-width='1.4' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.35));
}
@keyframes hintRing { 0% { transform: scale(0.5); opacity: 0.9; } 70%, 100% { transform: scale(1.9); opacity: 0; } }

/* ===================== Shopify: crear la cuenta ===================== */
.sg { display: grid; grid-template-columns: 1.08fr 0.92fr; height: calc(var(--u) * 520); font-size: calc(var(--u) * 14); }
.sg__card { display: flex; flex-direction: column; gap: calc(var(--u) * 11); padding: calc(var(--u) * 40) calc(var(--u) * 62); }
.sg__logo { display: flex; align-items: center; gap: calc(var(--u) * 8); font-weight: 750; font-size: calc(var(--u) * 21); letter-spacing: -0.02em; color: #1a1a1a; }
.sg__logo svg { width: calc(var(--u) * 30); height: calc(var(--u) * 30); }
.sg__h { margin-top: calc(var(--u) * 14) !important; font-size: calc(var(--u) * 25); font-weight: 650; letter-spacing: -0.02em; }
.sg__s { color: #616161; }
.sg__lab { margin-top: calc(var(--u) * 10); font-size: calc(var(--u) * 13); font-weight: 550; }
.sg__in { position: relative; display: flex; align-items: center; height: calc(var(--u) * 42); padding: 0 calc(var(--u) * 12); border: 1px solid #8a8a8a; border-radius: calc(var(--u) * 10); color: #303030; box-shadow: 0 0 0 calc(var(--u) * 2) rgba(0, 91, 211, 0.25); }
.sg__caret { display: inline-block; width: 1px; height: calc(var(--u) * 18); margin-left: 2px; background: #303030; animation: caret 1s steps(1) infinite; }
@keyframes caret { 50% { opacity: 0; } }
.sg__btn { position: relative; display: grid; place-items: center; height: calc(var(--u) * 44); border-radius: calc(var(--u) * 10); background: #1a1a1a; color: #fff; font-weight: 600; box-shadow: inset 0 -2px 0 rgba(255, 255, 255, 0.12); }
.sg__or { display: flex; align-items: center; gap: calc(var(--u) * 10); color: #8a8a8a; font-size: calc(var(--u) * 12); }
.sg__or i { flex: 1; height: 1px; background: #e3e3e3; }
.sg__alts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: calc(var(--u) * 8); }
.sg__alts span { display: grid; place-items: center; height: calc(var(--u) * 40); border: 1px solid #d4d4d4; border-radius: calc(var(--u) * 10); font-weight: 550; font-size: calc(var(--u) * 13); }
.sg__fine { margin-top: auto !important; font-size: calc(var(--u) * 12.5); color: #616161; }
.sg__fine u { color: #005bd3; }
.sg__art { position: relative; overflow: hidden; background: linear-gradient(155deg, #c9e58f, #95bf47 38%, #5e8e3e 72%, #2f5f2a); }
.sg__shape { position: absolute; border-radius: calc(var(--u) * 28); background: rgba(255, 255, 255, 0.18); }
.sg__shape--1 { width: 60%; height: 34%; left: 18%; top: 14%; transform: rotate(-8deg); background: rgba(255, 255, 255, 0.92); box-shadow: 0 calc(var(--u) * 20) calc(var(--u) * 40) rgba(0, 0, 0, 0.18); }
.sg__shape--1::before { content: ''; position: absolute; left: 10%; top: 18%; width: 34%; height: 64%; border-radius: calc(var(--u) * 14); background: linear-gradient(140deg, #f4e7c5, #e0c48d); }
.sg__shape--1::after { content: ''; position: absolute; left: 52%; top: 24%; width: 38%; height: calc(var(--u) * 10); border-radius: 99px; background: #e3e3e3; box-shadow: 0 calc(var(--u) * 22) 0 #e3e3e3, 0 calc(var(--u) * 44) 0 #1a1a1a; }
.sg__shape--2 { width: 34%; height: 22%; right: 8%; top: 52%; transform: rotate(6deg); }
.sg__shape--3 { width: 46%; height: 18%; left: 8%; top: 64%; transform: rotate(-3deg); background: rgba(26, 26, 26, 0.25); }
.sg__badge { position: absolute; left: calc(var(--u) * 30); bottom: calc(var(--u) * 34); padding: calc(var(--u) * 10) calc(var(--u) * 18); border-radius: 999px; background: #fff; color: #1a1a1a; font-weight: 750; font-size: calc(var(--u) * 17); box-shadow: 0 calc(var(--u) * 10) calc(var(--u) * 30) rgba(0, 0, 0, 0.25); }

/* ===================== Shopify: el panel ===================== */
.sa { background: #f1f1f1; font-size: calc(var(--u) * 13); color: #303030; }
.sa__top { display: flex; align-items: center; gap: calc(var(--u) * 16); height: calc(var(--u) * 48); padding: 0 calc(var(--u) * 14); background: #1a1a1a; color: #e3e3e3; }
.sa__logo { display: flex; align-items: center; gap: calc(var(--u) * 6); font-weight: 750; color: #fff; font-size: calc(var(--u) * 16); letter-spacing: -0.02em; }
.sa__logo svg { width: calc(var(--u) * 24); height: calc(var(--u) * 24); }
.sa__search { flex: 1; max-width: calc(var(--u) * 400); margin: 0 auto; height: calc(var(--u) * 32); display: flex; align-items: center; gap: calc(var(--u) * 8); padding: 0 calc(var(--u) * 11); border-radius: calc(var(--u) * 9); background: #303030; color: #a8a8a8; border: 1px solid #4a4a4a; }
.sa__search .ic { width: calc(var(--u) * 15); height: calc(var(--u) * 15); }
.sa__store { display: flex; align-items: center; gap: calc(var(--u) * 8); font-weight: 550; }
.sa__store i { display: grid; place-items: center; width: calc(var(--u) * 28); height: calc(var(--u) * 28); border-radius: calc(var(--u) * 8); background: #95bf47; color: #1a1a1a; font-style: normal; font-weight: 700; font-size: calc(var(--u) * 11); }
.sa__wrap { display: grid; grid-template-columns: calc(var(--u) * 200) minmax(0, 1fr); height: calc(var(--u) * 470); }
.sa__nav { display: flex; flex-direction: column; gap: calc(var(--u) * 1); padding: calc(var(--u) * 12) calc(var(--u) * 8); background: #ebebeb; border-right: 1px solid #e0e0e0; }
.sa__ni { font-style: normal; padding: calc(var(--u) * 6) calc(var(--u) * 10); border-radius: calc(var(--u) * 8); font-weight: 550; color: #303030; }
.sa__ni--sub { padding-left: calc(var(--u) * 30); font-weight: 450; color: #4a4a4a; }
.sa__ni.is-on { background: #fafafa; font-weight: 650; color: #1a1a1a; box-shadow: 0 1px 0 rgba(0, 0, 0, 0.05); }
.sa__ng { font-style: normal; padding: calc(var(--u) * 14) calc(var(--u) * 10) calc(var(--u) * 4); font-size: calc(var(--u) * 12); font-weight: 550; color: #616161; }
.sa__page { display: flex; flex-direction: column; gap: calc(var(--u) * 14); padding: calc(var(--u) * 22) calc(var(--u) * 28); min-width: 0; }
.sa__page--full { padding: calc(var(--u) * 26) calc(var(--u) * 40) calc(var(--u) * 34); }
.sa__h1 { font-size: calc(var(--u) * 20); font-weight: 700; color: #1a1a1a; letter-spacing: -0.01em; }
.sa__titlebar { display: flex; align-items: center; justify-content: space-between; }
.sa__pbtn { display: inline-grid; place-items: center; height: calc(var(--u) * 30); padding: 0 calc(var(--u) * 12); border-radius: calc(var(--u) * 8); background: #1a1a1a; color: #fff; font-weight: 600; font-size: calc(var(--u) * 12.5); box-shadow: inset 0 -2px 0 rgba(255, 255, 255, 0.15); }
.sa__card { position: relative; padding: calc(var(--u) * 16); border-radius: calc(var(--u) * 12); background: #fff; box-shadow: 0 1px 0 rgba(0, 0, 0, 0.07), 0 0 0 1px rgba(0, 0, 0, 0.05); }
.sa__ch { margin-bottom: calc(var(--u) * 6) !important; font-weight: 650; font-size: calc(var(--u) * 14); color: #1a1a1a; }
.sa__row { position: relative; display: grid; grid-template-columns: calc(var(--u) * 32) minmax(0, 1fr) auto; gap: calc(var(--u) * 12); align-items: center; padding: calc(var(--u) * 12) 0; border-top: 1px solid #ebebeb; }
.sa__row b { display: block; font-weight: 600; color: #1a1a1a; }
.sa__row small { display: block; margin-top: calc(var(--u) * 2); font-size: calc(var(--u) * 12); color: #616161; }
.sa__ri { display: grid; place-items: center; width: calc(var(--u) * 32); height: calc(var(--u) * 32); border-radius: calc(var(--u) * 8); background: #f1f1f1; color: #4a4a4a; }
.sa__ri .ic { width: calc(var(--u) * 16); height: calc(var(--u) * 16); }
.sa__tg { position: relative; width: calc(var(--u) * 36); height: calc(var(--u) * 20); border-radius: 999px; background: #303030; }
.sa__tg::after { content: ''; position: absolute; top: calc(var(--u) * 2); left: calc(var(--u) * 18); width: calc(var(--u) * 16); height: calc(var(--u) * 16); border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); }
.sa__tg--off { background: #d4d4d4; }
.sa__tg--off::after { left: calc(var(--u) * 2); }
.sa__tg[data-anim-tg] { animation: tgBg 6s var(--ease-soft) infinite; }
.sa__tg[data-anim-tg]::after { animation: tgKnob 6s var(--ease-soft) infinite; }
@keyframes tgBg { 0%, 42% { background: #303030; } 48%, 92% { background: #d4d4d4; } 100% { background: #303030; } }
@keyframes tgKnob { 0%, 42% { left: calc(var(--u) * 18); } 48%, 92% { left: calc(var(--u) * 2); } 100% { left: calc(var(--u) * 18); } }
/* 1.4: el clic, en el centro del interruptor de Modo privado (más específica que la de las filas de Configuración, más abajo) */
.sa__row.sa__row--key .cur-hint { left: calc(100% - var(--u) * 18); right: auto; top: 50%; }
.sa__card--ghost { opacity: 0.75; }
.sa__sk { display: block; height: calc(var(--u) * 10); width: 70%; margin-top: calc(var(--u) * 10); border-radius: 99px; background: #ebebeb; }
.sa__sk--s { width: 45%; }
.sa__promo { padding: calc(var(--u) * 10) calc(var(--u) * 14); border-radius: calc(var(--u) * 10); background: #e3f1d1; color: #2f5f2a; font-size: calc(var(--u) * 13); }
.sa__pill { display: inline-flex; align-items: center; height: calc(var(--u) * 22); padding: 0 calc(var(--u) * 9); border-radius: 99px; background: #cdfee1; color: #0c5132; font-style: normal; font-weight: 550; font-size: calc(var(--u) * 12); }
.sa__pill--off { background: #f1f1f1; color: #8a8a8a; text-decoration: line-through; }
.sa__card--tbl { padding: 0; overflow: hidden; }
.mkt { position: relative; display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 0.8fr) minmax(0, 0.8fr); gap: calc(var(--u) * 12); align-items: center; padding: calc(var(--u) * 12) calc(var(--u) * 16); border-top: 1px solid #ebebeb; }
.mkt b { display: block; font-weight: 600; color: #1a1a1a; }
.mkt small { display: block; margin-top: calc(var(--u) * 2); font-size: calc(var(--u) * 12); color: #616161; }
.mkt--h { border-top: 0; background: #f7f7f7; font-size: calc(var(--u) * 12); font-weight: 550; color: #616161; }
.mkt--new { background: #fbfffa; }
.mkt--new .cur-hint { left: 28%; top: 62%; }
.mkt--old { opacity: 0.55; }

/* Planes (1.2) */
.pl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: calc(var(--u) * 14); margin-top: calc(var(--u) * 6); }
.pl__c { position: relative; display: flex; flex-direction: column; gap: calc(var(--u) * 6); padding: calc(var(--u) * 18); border-radius: calc(var(--u) * 12); background: #fff; box-shadow: 0 1px 0 rgba(0, 0, 0, 0.07), 0 0 0 1px rgba(0, 0, 0, 0.06); }
.pl__c--on { box-shadow: 0 0 0 calc(var(--u) * 2) #1a1a1a, 0 calc(var(--u) * 12) calc(var(--u) * 30) rgba(0, 0, 0, 0.1); }
.pl__n { font-weight: 700; font-size: calc(var(--u) * 17); color: #1a1a1a; }
.pl__d { min-height: calc(var(--u) * 34); font-size: calc(var(--u) * 12.5); color: #616161; }
.pl__p { font-size: calc(var(--u) * 13); color: #4a4a4a; }
.pl__p b { font-size: calc(var(--u) * 28); font-weight: 750; color: #1a1a1a; letter-spacing: -0.02em; }
.pl__p--na { font-size: calc(var(--u) * 16); font-weight: 650; color: #8a8a8a; padding-top: calc(var(--u) * 10); }
.pl__s { font-size: calc(var(--u) * 12); color: #616161; }
.pl__btn { position: relative; display: grid; place-items: center; height: calc(var(--u) * 36); margin-top: calc(var(--u) * 10); border-radius: calc(var(--u) * 9); background: #1a1a1a; color: #fff; font-weight: 600; }
.pl__btn--2 { background: #fff; color: #1a1a1a; box-shadow: inset 0 0 0 1px #d4d4d4; }
.pl__c--on .pl__btn::after { content: ''; position: absolute; inset: calc(var(--u) * -5); border-radius: calc(var(--u) * 12); border: 2px solid var(--accent); animation: hintRing2 1.8s var(--ease-out-quint) infinite; }
@keyframes hintRing2 { 0% { opacity: 1; } 70%, 100% { opacity: 0; transform: scale(1.06); } }
.pl__badge { position: absolute; top: calc(var(--u) * -11); right: calc(var(--u) * 14); height: calc(var(--u) * 22); padding: 0 calc(var(--u) * 10); display: grid; place-items: center; border-radius: 99px; background: #1a1a1a; color: #fff; font-size: calc(var(--u) * 11); font-weight: 600; }

/* ===================== El proveedor: conecta tu Shopify (1.3) ===================== */
.pv { display: flex; flex-direction: column; align-items: center; gap: calc(var(--u) * 8); min-height: calc(var(--u) * 560); padding: calc(var(--u) * 24) calc(var(--u) * 30) calc(var(--u) * 26); background: #f5f7fb; color: #14213d; font-size: calc(var(--u) * 13); }
.pv__logo { align-self: flex-start; display: flex; align-items: center; gap: calc(var(--u) * 8); font-weight: 800; font-size: calc(var(--u) * 18); letter-spacing: -0.02em; }
.pv__logo svg { width: calc(var(--u) * 28); height: calc(var(--u) * 28); }
.pv__h { margin-top: calc(var(--u) * 10) !important; font-size: calc(var(--u) * 25); font-weight: 750; letter-spacing: -0.02em; }
.pv__s { color: #5b6476; font-size: calc(var(--u) * 14); }
.pv__row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: calc(var(--u) * 14); width: 100%; margin-top: calc(var(--u) * 18); }
.pv__c { position: relative; display: flex; flex-direction: column; gap: calc(var(--u) * 6); min-height: calc(var(--u) * 270); padding: calc(var(--u) * 18) calc(var(--u) * 16) calc(var(--u) * 14); border: 1.5px solid #e1e6ef; border-radius: calc(var(--u) * 14); background: #fff; }
.pv__c b { font-size: calc(var(--u) * 15); color: #14213d; }
.pv__c small { color: #5b6476; font-size: calc(var(--u) * 12); line-height: 1.4; }
.pv__c--on { border-color: #2463eb; box-shadow: 0 0 0 calc(var(--u) * 3) rgba(36, 99, 235, 0.14); }
.pv__radio { width: calc(var(--u) * 17); height: calc(var(--u) * 17); border-radius: 50%; border: 1.5px solid #b8c1d1; }
.pv__c--on .pv__radio { border: calc(var(--u) * 5) solid #2463eb; }
.pv__art { display: flex; align-items: center; justify-content: center; gap: calc(var(--u) * 10); height: calc(var(--u) * 96); margin-top: auto; border-radius: calc(var(--u) * 10); background: #eef3ff; }
.pv__tile { display: grid; place-items: center; width: calc(var(--u) * 48); height: calc(var(--u) * 48); border-radius: calc(var(--u) * 12); background: #fff; box-shadow: 0 calc(var(--u) * 4) calc(var(--u) * 12) rgba(20, 33, 61, 0.12); }
.pv__tile svg { width: calc(var(--u) * 32); height: calc(var(--u) * 32); }
.pv__link { font-style: normal; font-weight: 800; color: #2463eb; font-size: calc(var(--u) * 16); }
.pv__art--shots { gap: calc(var(--u) * 8); padding: calc(var(--u) * 10); }
.pv__art--shots i { flex: 1; height: 100%; border-radius: calc(var(--u) * 6); background: linear-gradient(180deg, #fff 0 22%, #dfe6f5 22% 60%, #fff 60%); box-shadow: 0 1px 4px rgba(20, 33, 61, 0.12); }
.pv__tags { display: flex; gap: calc(var(--u) * 4); }
.pv__tags em { font-style: normal; font-size: calc(var(--u) * 10); font-weight: 600; padding: calc(var(--u) * 2) calc(var(--u) * 7); border-radius: 99px; background: #e8f0ff; color: #2463eb; }
.pv__hot { position: absolute; top: calc(var(--u) * -11); left: 50%; transform: translateX(-50%); padding: calc(var(--u) * 3) calc(var(--u) * 11); border-radius: 99px; background: #ff7a00; color: #fff; font-size: calc(var(--u) * 10.5); font-weight: 700; white-space: nowrap; }
.pv__price { margin-top: auto; }
.pv__price b { font-size: calc(var(--u) * 24); font-weight: 800; }
.pv__price s { color: #8a94a6; font-size: calc(var(--u) * 14); }
.pv__go { display: grid; place-items: center; height: calc(var(--u) * 42); margin-top: calc(var(--u) * 20); padding: 0 calc(var(--u) * 52); border-radius: calc(var(--u) * 10); background: #2463eb; color: #fff; font-weight: 700; font-size: calc(var(--u) * 14); }
.pv__c--on .cur-hint { left: 58%; top: 40%; }

/* ===================== La tienda de apps de Shopify (1.3) ===================== */
.as { min-height: calc(var(--u) * 560); background: #fff; color: #303030; font-size: calc(var(--u) * 13); }
.as__top { display: flex; align-items: center; gap: calc(var(--u) * 16); height: calc(var(--u) * 54); padding: 0 calc(var(--u) * 20); border-bottom: 1px solid #ebebeb; }
.as__brand { display: flex; align-items: center; gap: calc(var(--u) * 7); font-weight: 700; color: #1a1a1a; font-size: calc(var(--u) * 14.5); white-space: nowrap; }
.as__brand svg { width: calc(var(--u) * 26); height: calc(var(--u) * 26); }
.as__search { flex: 1; max-width: calc(var(--u) * 360); height: calc(var(--u) * 34); display: flex; align-items: center; gap: calc(var(--u) * 8); padding: 0 calc(var(--u) * 12); border-radius: calc(var(--u) * 10); background: #f1f1f1; color: #8a8a8a; white-space: nowrap; overflow: hidden; }
.as__search .ic { width: calc(var(--u) * 15); height: calc(var(--u) * 15); flex: none; }
.as__nav { font-weight: 550; white-space: nowrap; }
.as__av { display: grid; place-items: center; width: calc(var(--u) * 30); height: calc(var(--u) * 30); margin-left: auto; border-radius: 50%; background: #95bf47; color: #1a1a1a; font-weight: 700; font-size: calc(var(--u) * 11); }
.as__body { display: grid; grid-template-columns: calc(var(--u) * 290) minmax(0, 1fr); gap: calc(var(--u) * 28); padding: calc(var(--u) * 26) calc(var(--u) * 26); }
.as__app { display: flex; align-items: center; gap: calc(var(--u) * 12); }
.as__app b { font-size: calc(var(--u) * 16); font-weight: 700; color: #1a1a1a; line-height: 1.25; }
.as__ico { width: calc(var(--u) * 54); height: calc(var(--u) * 54); flex: none; border-radius: calc(var(--u) * 13); overflow: hidden; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15); }
.as__ico svg { width: 100%; height: 100%; }
.as__dl { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: calc(var(--u) * 7) calc(var(--u) * 14); margin: calc(var(--u) * 18) 0; font-size: calc(var(--u) * 12.5); }
.as__dl dt { color: #616161; }
.as__dl dd { margin: 0; color: #1a1a1a; }
.as__dl u { color: #005bd3; }
.as__star { color: #1a1a1a; }
.as__btn { position: relative; display: grid; place-items: center; height: calc(var(--u) * 44); border-radius: calc(var(--u) * 10); background: #1a1a1a; color: #fff; font-weight: 650; font-size: calc(var(--u) * 14); box-shadow: inset 0 -2px 0 rgba(255, 255, 255, 0.15); }
.as__btn .cur-hint { left: 70%; top: 60%; }
.as__demo { display: grid; place-items: center; height: calc(var(--u) * 40); margin-top: calc(var(--u) * 9); border-radius: calc(var(--u) * 10); border: 1px solid #d4d4d4; font-weight: 550; color: #1a1a1a; }
.as__hero { position: relative; display: flex; align-items: flex-end; height: calc(var(--u) * 250); padding: calc(var(--u) * 20); border-radius: calc(var(--u) * 14); overflow: hidden; background: radial-gradient(circle at 80% 20%, #8b5cf6, transparent 55%), linear-gradient(135deg, #2463eb, #1e3a8a); color: #fff; }
.as__vt { max-width: 62%; font-size: calc(var(--u) * 23); font-weight: 800; line-height: 1.1; letter-spacing: -0.02em; }
.as__play { position: absolute; left: 50%; top: 46%; display: grid; place-items: center; width: calc(var(--u) * 56); height: calc(var(--u) * 56); margin: calc(var(--u) * -28) 0 0 calc(var(--u) * -28); border-radius: 50%; background: rgba(255, 255, 255, 0.95); color: #1e3a8a; }
.as__play .ic { width: calc(var(--u) * 22); height: calc(var(--u) * 22); margin-left: calc(var(--u) * 3); }
.as__thumbs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: calc(var(--u) * 10); margin-top: calc(var(--u) * 10); }
.as__thumbs i { height: calc(var(--u) * 72); border-radius: calc(var(--u) * 10); background: linear-gradient(180deg, #eef2fb, #e2e8f6); }
.as__desc { margin-top: calc(var(--u) * 14) !important; font-size: calc(var(--u) * 13.5); line-height: 1.5; color: #303030; }

/* ===================== Meta: la regla automatizada (6.1) ===================== */
.mr { background: #fff; color: #1c2b33; font-size: calc(var(--u) * 14); font-family: var(--font-sans); }
.mr__head { display: flex; align-items: center; gap: calc(var(--u) * 12); padding: calc(var(--u) * 16) calc(var(--u) * 22); border-bottom: 1px solid #dddfe2; font-size: calc(var(--u) * 17); }
.mr__logo { width: calc(var(--u) * 30); height: calc(var(--u) * 30); }
.mr__x { margin-left: auto; color: #606770; font-size: calc(var(--u) * 22); }
.mr__body { display: grid; padding: calc(var(--u) * 8) calc(var(--u) * 22); }
.mr__f { display: grid; grid-template-columns: calc(var(--u) * 190) minmax(0, 1fr); gap: calc(var(--u) * 14); align-items: center; padding: calc(var(--u) * 11) 0; border-bottom: 1px solid #f0f2f5; }
.mr__f > span { font-weight: 600; color: #1c2b33; }
.mr__f em { display: flex; align-items: center; gap: calc(var(--u) * 6); min-height: calc(var(--u) * 38); padding: 0 calc(var(--u) * 12); border: 1px solid #ccd0d5; border-radius: calc(var(--u) * 7); font-style: normal; color: #1c2b33; }
.mr__cond { flex-wrap: wrap; background: #f5f6f7; }
.mr__cond b { font-weight: 600; }
.mr__val { padding: calc(var(--u) * 3) calc(var(--u) * 8); border-radius: calc(var(--u) * 5); background: #e7f0ff; color: #0866ff; box-shadow: 0 0 0 calc(var(--u) * 2) rgba(8, 102, 255, 0.25); animation: valPulse 2.2s var(--ease-soft) infinite; }
@keyframes valPulse { 50% { box-shadow: 0 0 0 calc(var(--u) * 5) rgba(8, 102, 255, 0.1); } }
.mr__foot { display: flex; justify-content: flex-end; gap: calc(var(--u) * 10); padding: calc(var(--u) * 14) calc(var(--u) * 22); border-top: 1px solid #dddfe2; }
.mr__btn, .mr__btn2 { display: grid; place-items: center; height: calc(var(--u) * 36); padding: 0 calc(var(--u) * 18); border-radius: calc(var(--u) * 7); font-weight: 600; }
.mr__btn { background: #0866ff; color: #fff; }
.mr__btn2 { border: 1px solid #ccd0d5; color: #1c2b33; }

/* ===================== El móvil con tu tienda (3.3) ===================== */
.mk--phone { --p: calc(100cqw / 390); width: min(100%, 350px, max(260px, calc((100vh - 290px) * 0.4875))); aspect-ratio: 390 / 800; background: none; border: 0; box-shadow: none; overflow: visible; justify-self: center; }
.mk--phone > * { --p: calc(100cqw / 390); }
.ph-frame { position: absolute; inset: 0; padding: calc(var(--p) * 12); border-radius: calc(var(--p) * 58); background: linear-gradient(145deg, #2a2a2e, #0e0e10 40%, #1d1d20); box-shadow: 0 0 0 calc(var(--p) * 2) #3a3a3f inset, 0 calc(var(--p) * 40) calc(var(--p) * 80) calc(var(--p) * -30) rgba(0, 0, 0, 0.85); }
.ph-scr { width: 100%; height: 100%; border-radius: calc(var(--p) * 46); overflow-y: auto; overflow-x: hidden; background: #fff; scrollbar-width: none; overscroll-behavior: contain; }
.ph-scr::-webkit-scrollbar { display: none; }
.ps { color: #111; font-size: calc(var(--p) * 14); line-height: 1.4; }
.ps__bar { position: sticky; top: 0; z-index: 3; display: flex; align-items: center; justify-content: space-between; height: calc(var(--p) * 48); padding: 0 calc(var(--p) * 28); background: #fff; font-weight: 650; font-size: calc(var(--p) * 13.5); }
.ps__isl { width: calc(var(--p) * 108); height: calc(var(--p) * 30); border-radius: 99px; background: #000; }
.ps__bar span:last-child { font-size: calc(var(--p) * 9); letter-spacing: 0.1em; }
.ps__nav { display: flex; align-items: center; justify-content: space-between; padding: calc(var(--p) * 6) calc(var(--p) * 16) calc(var(--p) * 10); }
.ps__menu { font-size: calc(var(--p) * 18); }
.ps__brand { font-weight: 800; font-size: calc(var(--p) * 17); letter-spacing: -0.03em; }
.ps__nav .ic { width: calc(var(--p) * 21); height: calc(var(--p) * 21); }
.ps__ann { padding: calc(var(--p) * 7) calc(var(--p) * 10); background: #111; color: #fff; font-size: calc(var(--p) * 11); text-align: center; }
.ps__media { position: relative; aspect-ratio: 1; overflow: hidden; }
.ps__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ps__dots { position: absolute; bottom: calc(var(--p) * 12); left: 50%; transform: translateX(-50%); display: flex; gap: calc(var(--p) * 6); }
.ps__dots i { width: calc(var(--p) * 7); height: calc(var(--p) * 7); border-radius: 50%; background: rgba(255, 255, 255, 0.55); }
.ps__dots i:first-child { background: #fff; }
.ps__in { display: flex; flex-direction: column; gap: calc(var(--p) * 11); padding: calc(var(--p) * 16) calc(var(--p) * 16) calc(var(--p) * 28); }
.ps__stars { font-size: calc(var(--p) * 12); color: #555; }
.ps__stars span { color: #f5a623; letter-spacing: 0.05em; }
.ps__t { font-size: calc(var(--p) * 21); font-weight: 780; letter-spacing: -0.02em; line-height: 1.15; }
.ps__benef { display: grid; gap: calc(var(--p) * 5); padding: calc(var(--p) * 4) calc(var(--p) * 6); font-size: calc(var(--p) * 13.5); color: #222; }
.ps__price { display: flex; align-items: baseline; gap: calc(var(--p) * 9); padding: calc(var(--p) * 2) calc(var(--p) * 6); }
.ps__price b { font-size: calc(var(--p) * 25); font-weight: 800; letter-spacing: -0.02em; }
.ps__price s { color: #8a8a8a; font-size: calc(var(--p) * 14); }
.ps__price em { padding: calc(var(--p) * 2) calc(var(--p) * 8); border-radius: 99px; background: #e8f5e9; color: #1f8a3b; font-style: normal; font-weight: 700; font-size: calc(var(--p) * 12); }
.ps__ship { display: flex; align-items: center; gap: calc(var(--p) * 8); padding: calc(var(--p) * 4) calc(var(--p) * 6); color: #1f8a3b; font-weight: 600; font-size: calc(var(--p) * 13); }
.ps__ship .ic { width: calc(var(--p) * 19); height: calc(var(--p) * 19); }
.ps__cta, .ps__buy { display: grid; place-items: center; height: calc(var(--p) * 50); border-radius: calc(var(--p) * 13); font-weight: 700; }
.ps__cta { background: #111; color: #fff; }
.ps__buy { border: 1.5px solid #111; }
.ps__guar { display: flex; gap: calc(var(--p) * 10); padding: calc(var(--p) * 12); border-radius: calc(var(--p) * 12); background: #f5f5f5; font-size: calc(var(--p) * 12.5); color: #444; }
.ps__guar .ic { width: calc(var(--p) * 22); height: calc(var(--p) * 22); flex: none; color: #1f8a3b; }
.ps__guar b { display: block; color: #111; }
.ps__faq { display: grid; padding: calc(var(--p) * 4) calc(var(--p) * 6); }
.ps__fh { margin-bottom: calc(var(--p) * 6) !important; font-weight: 780; font-size: calc(var(--p) * 16); }
.ps__faq span { display: flex; justify-content: space-between; padding: calc(var(--p) * 11) 0; border-top: 1px solid #eee; font-size: calc(var(--p) * 13); }
.ps__faq i { font-style: normal; color: #888; }
.ps__foot { margin-top: calc(var(--p) * 10) !important; text-align: center; color: #9a9a9a; font-size: calc(var(--p) * 11); }
.ps__z { position: relative; border-radius: calc(var(--p) * 12); transition: box-shadow .45s var(--ease-out-quint), background .45s var(--ease-soft); }
.ps__media.ps__z { border-radius: 0; }
.ps__z.is-focus { box-shadow: 0 0 0 calc(var(--p) * 3) #2f6bff, 0 0 0 calc(var(--p) * 8) rgba(47, 107, 255, 0.25); background: rgba(47, 107, 255, 0.06); z-index: 2; }
.ps__media.ps__z.is-focus { box-shadow: inset 0 0 0 calc(var(--p) * 4) #2f6bff; }
.ps__z.is-ok::after {
  content: ''; position: absolute; top: calc(var(--p) * 6); right: calc(var(--p) * 6); width: calc(var(--p) * 24); height: calc(var(--p) * 24); border-radius: 50%;
  background: #6fbf73 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='%2308100a' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 62% no-repeat;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25); z-index: 3;
}

/* ===================== Claude (app de escritorio, modo oscuro) ===================== */
.mk--claude { aspect-ratio: 900 / 580; background: #262624; border-color: rgba(255, 255, 255, 0.1); color: #c2c0b6; }
.cl {
  position: absolute; inset: 0; display: flex; flex-direction: column; overflow: hidden;
  background: #262624; color: #c2c0b6; font-size: calc(var(--u) * 13); line-height: 1.45;
}
.cl svg { flex: none; }
.cl__sp { flex: 1; }
.cl__bar { display: flex; align-items: center; gap: calc(var(--u) * 4); height: calc(var(--u) * 38); padding: 0 calc(var(--u) * 10); background: #1f1e1d; border-bottom: 1px solid #34332f; }
.cl__tb { display: grid; place-items: center; width: calc(var(--u) * 26); height: calc(var(--u) * 26); border-radius: calc(var(--u) * 6); color: #9a988f; }
.cl__tb svg { width: calc(var(--u) * 15); height: calc(var(--u) * 15); }
.cl__tb--dim { opacity: 0.45; }
.cl__seg { display: flex; gap: calc(var(--u) * 2); margin-left: calc(var(--u) * 8); padding: calc(var(--u) * 2); border-radius: calc(var(--u) * 9); background: #141413; border: 1px solid #34332f; }
.cl__segb { position: relative; display: flex; align-items: center; gap: calc(var(--u) * 5); padding: calc(var(--u) * 3) calc(var(--u) * 11); border-radius: calc(var(--u) * 7); font-size: calc(var(--u) * 12); color: #9a988f; }
.cl__segb svg { width: calc(var(--u) * 13); height: calc(var(--u) * 13); }
.cl__segb--chat, .cl.is-code .cl__segb--code { background: #3a3935; color: #faf9f5; }
.cl.is-code .cl__segb--chat { background: none; color: #9a988f; }
.cl__win { display: flex; gap: calc(var(--u) * 14); padding-right: calc(var(--u) * 4); }
.cl__win i { width: calc(var(--u) * 10); height: calc(var(--u) * 10); border: 1px solid #6f6d66; }
.cl__win i:first-child { height: 0; border-width: 1px 0 0; margin-top: calc(var(--u) * 5); }
.cl__win i:last-child { border: 0; background: linear-gradient(45deg, transparent 45%, #6f6d66 45% 55%, transparent 55%), linear-gradient(-45deg, transparent 45%, #6f6d66 45% 55%, transparent 55%); }
.cl__body { flex: 1; display: grid; grid-template-columns: calc(var(--u) * 186) minmax(0, 1fr); min-height: 0; }
.cl__side { display: flex; flex-direction: column; gap: calc(var(--u) * 1); padding: calc(var(--u) * 10) calc(var(--u) * 8); background: #1f1e1d; font-size: calc(var(--u) * 12.5); min-width: 0; }
.cl__new { display: flex; align-items: center; gap: calc(var(--u) * 9); padding: calc(var(--u) * 6) calc(var(--u) * 8); margin-bottom: calc(var(--u) * 4); color: #faf9f5; font-weight: 550; }
.cl__new i { display: grid; place-items: center; width: calc(var(--u) * 20); height: calc(var(--u) * 20); border-radius: 50%; background: #c6613f; color: #fff; font-style: normal; font-size: calc(var(--u) * 14); line-height: 1; }
.cl__nav { position: relative; display: flex; align-items: center; gap: calc(var(--u) * 9); padding: calc(var(--u) * 6) calc(var(--u) * 8); border-radius: calc(var(--u) * 8); color: #c2c0b6; }
.cl__nav svg { width: calc(var(--u) * 15); height: calc(var(--u) * 15); color: #9a988f; }
.cl.is-modal .cl__nav[data-t="personalizar"] { background: #2d2c29; color: #faf9f5; }
.cl__lab { margin: calc(var(--u) * 14) calc(var(--u) * 8) calc(var(--u) * 4); font-size: calc(var(--u) * 11); color: #7a786f; }
.cl__rec { padding: calc(var(--u) * 5) calc(var(--u) * 8); border-radius: calc(var(--u) * 7); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: calc(var(--u) * 12); color: #b4b2a8; }
.cl__rec--code { display: none; background: #2d2c29; color: #faf9f5; }
.cl.is-code .cl__rec--code { display: block; }
.cl__me { display: flex; align-items: center; gap: calc(var(--u) * 9); margin-top: auto; padding: calc(var(--u) * 9) calc(var(--u) * 6) calc(var(--u) * 2); border-top: 1px solid #34332f; color: #faf9f5; font-size: calc(var(--u) * 12); }
.cl__me i { display: grid; place-items: center; width: calc(var(--u) * 26); height: calc(var(--u) * 26); border-radius: 50%; background: #d4d2c8; color: #1f1e1d; font-style: normal; font-weight: 700; font-size: calc(var(--u) * 9); }
.cl__me small { display: block; color: #8a887f; font-size: calc(var(--u) * 11); }
.cl__main { position: relative; min-width: 0; overflow: hidden; }
.cl__home { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(var(--u) * 18); padding: calc(var(--u) * 30) calc(var(--u) * 46); transition: opacity .4s; }
.cl__home--code, .cl.is-code .cl__home--chat, .cl.is-sess .cl__home { opacity: 0; pointer-events: none; }
.cl.is-code .cl__home--code { opacity: 1; }
.cl.is-sess .cl__home--code { opacity: 0; }
.cl__hi { display: flex; align-items: center; gap: calc(var(--u) * 12); font-family: Georgia, 'Times New Roman', serif; font-size: calc(var(--u) * 30); color: #faf9f5; letter-spacing: -0.01em; }
.cl__ast { width: calc(var(--u) * 30); height: calc(var(--u) * 30); color: #d97757; fill: currentColor; }
.cl__box { position: relative; display: flex; flex-direction: column; width: 100%; max-width: calc(var(--u) * 560); min-height: calc(var(--u) * 98); padding: calc(var(--u) * 14) calc(var(--u) * 14) calc(var(--u) * 10); border-radius: calc(var(--u) * 18); background: #30302e; border: 1px solid #3f3e3a; box-shadow: 0 calc(var(--u) * 6) calc(var(--u) * 20) rgba(0, 0, 0, 0.25); }
.cl__ph { color: #8a887f; }
.cl__typed { display: none; color: #faf9f5; white-space: pre-wrap; word-break: break-word; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; font-size: calc(var(--u) * 12.5); }
.cl__typed:empty { display: none; }
.cl__box.has-text .cl__ph { display: none; }
.cl__row { display: flex; align-items: center; gap: calc(var(--u) * 8); margin-top: auto; padding-top: calc(var(--u) * 8); }
.cl__plus { display: grid; place-items: center; width: calc(var(--u) * 28); height: calc(var(--u) * 28); border-radius: calc(var(--u) * 8); border: 1px solid #45443f; color: #c2c0b6; font-size: calc(var(--u) * 16); }
.cl__mdl { position: relative; display: flex; align-items: center; gap: calc(var(--u) * 5); padding: calc(var(--u) * 4) calc(var(--u) * 8); border-radius: calc(var(--u) * 8); font-size: calc(var(--u) * 12); color: #c2c0b6; }
.cl__mdl svg { width: calc(var(--u) * 13); height: calc(var(--u) * 13); }
.cl__mdl em { font-style: normal; color: #8a887f; }
.m-opus, .e-medio { display: none; }
.cl.is-opus .m-opus, .cl.is-medio .e-medio { display: inline; }
.cl.is-opus .m-sonnet, .cl.is-medio .e-alto { display: none; }
.cl.is-dd .cl__mdl { background: #3a3935; }
.cl__send { display: grid; place-items: center; width: calc(var(--u) * 30); height: calc(var(--u) * 30); border-radius: calc(var(--u) * 9); background: #c6613f; color: #fff; font-size: calc(var(--u) * 15); font-weight: 700; opacity: 0.45; transition: opacity .3s; }
.cl__box.has-text .cl__send { opacity: 1; }
.cl__chips { display: flex; gap: calc(var(--u) * 8); }
.cl__chips span { padding: calc(var(--u) * 6) calc(var(--u) * 12); border-radius: calc(var(--u) * 10); border: 1px solid #3f3e3a; font-size: calc(var(--u) * 12); }
.cl__dock { width: 100%; max-width: calc(var(--u) * 600); }
.cl__env { display: flex; gap: calc(var(--u) * 6); margin-bottom: calc(var(--u) * 8); }
.cl__env span { display: flex; align-items: center; gap: calc(var(--u) * 5); padding: calc(var(--u) * 4) calc(var(--u) * 9); border-radius: calc(var(--u) * 8); background: #30302e; font-size: calc(var(--u) * 11.5); color: #c2c0b6; }
.cl__env svg { width: calc(var(--u) * 13); height: calc(var(--u) * 13); color: #9a988f; }
.cl__mode { font-size: calc(var(--u) * 12); color: #9a988f; }
.cl__mode b { color: #faf9f5; font-weight: 550; }

/* La sesión: la conversación y, a la derecha, el informe o tu tienda */
.cl__sess { position: absolute; inset: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); grid-template-rows: minmax(0, 1fr); opacity: 0; pointer-events: none; transition: opacity .45s; }
.cl.is-sess .cl__sess { opacity: 1; }
.cl__conv { display: flex; flex-direction: column; min-width: 0; min-height: 0; overflow: hidden; padding: calc(var(--u) * 14) calc(var(--u) * 16) calc(var(--u) * 12); border-right: 1px solid #34332f; }
.cl__msgs { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; gap: calc(var(--u) * 10); min-height: 0; overflow: hidden; }
.m { display: none; margin: 0; font-size: calc(var(--u) * 12); line-height: 1.5; color: #faf9f5; animation: mIn .45s var(--ease-out-quint) both; }
@keyframes mIn { from { opacity: 0; transform: translate3d(0, calc(var(--u) * 8), 0); } to { opacity: 1; transform: none; } }
.m--u { align-self: flex-end; max-width: 90%; padding: calc(var(--u) * 8) calc(var(--u) * 12); border-radius: calc(var(--u) * 14); background: #141413; color: #faf9f5; }
.m--u span { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; white-space: pre-wrap; word-break: break-word; }
.m--a { gap: calc(var(--u) * 8); }
.m__ast { width: calc(var(--u) * 15); height: calc(var(--u) * 15); margin-top: calc(var(--u) * 2); color: #d97757; fill: currentColor; }
.m--tool { align-items: center; gap: calc(var(--u) * 8); color: #9a988f; font-size: calc(var(--u) * 11.5); }
.m__spin { width: calc(var(--u) * 12); height: calc(var(--u) * 12); border-radius: 50%; border: calc(var(--u) * 2) solid #d97757; border-right-color: transparent; animation: spin .9s linear infinite; flex: none; }
.m__done { display: none; }
.cl.show-u1 [data-m="u1"], .cl.show-u2 [data-m="u2"], .cl.show-u3 [data-m="u3"] { display: block; }
.cl.show-t1 [data-m="t1"], .cl.show-t2 [data-m="t2"], .cl.show-t3 [data-m="t3"], .cl.show-t4 [data-m="t4"],
.cl.show-a1 [data-m="a1"], .cl.show-a2 [data-m="a2"], .cl.show-a3a [data-m="a3a"], .cl.show-a3 [data-m="a3"] { display: flex; }
.cl.done-t1 [data-m="t1"] .m__spin, .cl.done-t1 [data-m="t1"] .m__run, .cl.done-t2 [data-m="t2"] .m__spin, .cl.done-t2 [data-m="t2"] .m__run,
.cl.done-t3 [data-m="t3"] .m__spin, .cl.done-t3 [data-m="t3"] .m__run, .cl.done-t4 [data-m="t4"] .m__spin, .cl.done-t4 [data-m="t4"] .m__run { display: none; }
.cl.done-t1 [data-m="t1"] .m__done, .cl.done-t2 [data-m="t2"] .m__done, .cl.done-t3 [data-m="t3"] .m__done, .cl.done-t4 [data-m="t4"] .m__done { display: inline; }
.cl__allow { display: none; gap: calc(var(--u) * 8); padding: calc(var(--u) * 12); border-radius: calc(var(--u) * 12); background: #30302e; border: 1px solid rgba(217, 119, 87, 0.55); animation: mIn .45s var(--ease-out-quint) both; }
.cl.show-allow .cl__allow { display: grid; }
.cl__allow-t { color: #faf9f5; font-weight: 600; font-size: calc(var(--u) * 12.5); }
.cl__allow code { padding: calc(var(--u) * 6) calc(var(--u) * 8); border-radius: calc(var(--u) * 6); background: #1f1e1d; color: #c2c0b6; font-family: var(--font-mono); font-size: calc(var(--u) * 11.5); }
.cl__allow-b { display: flex; justify-content: flex-end; gap: calc(var(--u) * 6); }
.cl__box--mini { flex-direction: row; align-items: center; gap: calc(var(--u) * 8); max-width: none; min-height: calc(var(--u) * 50); margin-top: calc(var(--u) * 10); padding: calc(var(--u) * 9) calc(var(--u) * 10) calc(var(--u) * 9) calc(var(--u) * 14); border-radius: calc(var(--u) * 14); }
.cl__box--mini .cl__typed { -webkit-line-clamp: 2; flex: 1; }
.cl__box--mini .cl__ph { flex: 1; }
.cl__box--mini .cl__send { margin-left: auto; }
.cl__pane { position: relative; display: flex; flex-direction: column; min-width: 0; min-height: 0; overflow: hidden; background: #1f1e1d; }
.cl__ptab { display: flex; align-items: center; gap: calc(var(--u) * 4); height: calc(var(--u) * 34); padding: 0 calc(var(--u) * 10); border-bottom: 1px solid #34332f; }
.cl__ptab span { padding: calc(var(--u) * 4) calc(var(--u) * 10); border-radius: calc(var(--u) * 6); font-size: calc(var(--u) * 11.5); color: #9a988f; white-space: nowrap; }
.cl__ptab-r { background: #30302e; color: #faf9f5 !important; }
.cl__ptab-s { display: none; }
.cl.is-store .cl__ptab-r { display: none; }
.cl.is-store .cl__ptab-s { display: block; background: #30302e; color: #faf9f5; }
.cl__doc { position: relative; flex: 1; min-height: 0; overflow: hidden; opacity: 0; transition: opacity .5s; }
.cl.show-pane .cl__doc { opacity: 1; }
.cl__shop { position: absolute; top: calc(var(--u) * 34); left: 0; right: 0; bottom: 0; overflow: hidden; background: #fff; opacity: 0; transition: opacity .5s; }
.cl.is-store .cl__shop { opacity: 1; }

/* Personalización */
.cl__modal { position: absolute; left: 0; right: 0; top: calc(var(--u) * 38); bottom: 0; z-index: 3; display: grid; place-items: center; background: rgba(10, 10, 9, 0.55); opacity: 0; pointer-events: none; transition: opacity .35s; }
.cl.is-modal .cl__modal { opacity: 1; }
.cl__mwin { display: grid; grid-template-columns: calc(var(--u) * 170) minmax(0, 1fr); width: calc(var(--u) * 730); height: calc(var(--u) * 440); border-radius: calc(var(--u) * 14); overflow: hidden; background: #262624; border: 1px solid #3f3e3a; box-shadow: 0 calc(var(--u) * 30) calc(var(--u) * 70) rgba(0, 0, 0, 0.55); transform: translate3d(0, calc(var(--u) * 10), 0) scale(0.98); transition: transform .45s var(--ease-out-quint); }
.cl.is-modal .cl__mwin { transform: none; }
.cl__mside { display: flex; flex-direction: column; gap: calc(var(--u) * 2); padding: calc(var(--u) * 14) calc(var(--u) * 10); background: #1f1e1d; }
.cl__mlab { padding: calc(var(--u) * 4) calc(var(--u) * 8) calc(var(--u) * 8); font-size: calc(var(--u) * 11); color: #8a887f; }
.cl__mi { position: relative; padding: calc(var(--u) * 7) calc(var(--u) * 10); border-radius: calc(var(--u) * 8); font-size: calc(var(--u) * 12.5); color: #c2c0b6; }
.cl__mi--skills, .cl.tab-con .cl__mi--con { background: #30302e; color: #faf9f5; }
.cl.tab-con .cl__mi--skills { background: none; color: #c2c0b6; }
.cl__mmain { position: relative; padding: calc(var(--u) * 18) calc(var(--u) * 20); min-width: 0; overflow: hidden; }
.cl__pan--con, .cl.tab-con .cl__pan--skills { display: none; }
.cl.tab-con .cl__pan--con { display: block; }
.cl__mhead { display: flex; align-items: center; gap: calc(var(--u) * 8); }
.cl__mtitle { font-size: calc(var(--u) * 17); font-weight: 600; color: #faf9f5; }
.cl__btn, .cl__btn2 { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: calc(var(--u) * 4); height: calc(var(--u) * 30); padding: 0 calc(var(--u) * 12); border-radius: calc(var(--u) * 8); font-size: calc(var(--u) * 12); font-weight: 600; white-space: nowrap; }
.cl__btn { background: #faf9f5; color: #141413; }
.cl__btn svg { width: calc(var(--u) * 12); height: calc(var(--u) * 12); }
.cl__btn2 { border: 1px solid #45443f; color: #faf9f5; }
.cl__msub { margin: calc(var(--u) * 6) 0 calc(var(--u) * 12) !important; font-size: calc(var(--u) * 12); color: #8a887f; }
.cl__list { display: flex; flex-direction: column; }
.cl__li { display: grid; grid-template-columns: calc(var(--u) * 30) minmax(0, 1fr) auto; gap: calc(var(--u) * 10); align-items: center; margin: 0; padding: calc(var(--u) * 10) calc(var(--u) * 4); border-top: 1px solid #34332f; }
.cl__rico { display: grid; place-items: center; width: calc(var(--u) * 30); height: calc(var(--u) * 30); border-radius: calc(var(--u) * 8); background: #30302e; color: #faf9f5; font-weight: 700; font-size: calc(var(--u) * 12); }
.cl__rname { color: #faf9f5; font-size: calc(var(--u) * 12.5); font-weight: 550; }
.cl__rname small { display: block; color: #8a887f; font-size: calc(var(--u) * 11); font-weight: 400; }
.cl__tgl { position: relative; width: calc(var(--u) * 30); height: calc(var(--u) * 17); border-radius: 99px; background: #4a4944; }
.cl__tgl::after { content: ''; position: absolute; top: calc(var(--u) * 2); left: calc(var(--u) * 2); width: calc(var(--u) * 13); height: calc(var(--u) * 13); border-radius: 50%; background: #c2c0b6; }
.cl__rok { color: #7fc882; font-size: calc(var(--u) * 11.5); font-weight: 600; }
.cl__li--new { display: none; background: rgba(217, 119, 87, 0.08); border-radius: calc(var(--u) * 8); }
.cl.is-installed .cl__li--new { display: grid; animation: mIn .5s var(--ease-out-quint) both; }
.cl.is-installed .cl__li--new .cl__rico { background: #c6613f; }
.cl__menu { position: absolute; top: calc(var(--u) * 50); right: calc(var(--u) * 20); z-index: 2; display: none; width: calc(var(--u) * 214); padding: calc(var(--u) * 6); border-radius: calc(var(--u) * 10); background: #30302e; border: 1px solid #45443f; box-shadow: 0 calc(var(--u) * 16) calc(var(--u) * 40) rgba(0, 0, 0, 0.5); }
.cl.is-menu .cl__menu { display: block; animation: mIn .3s var(--ease-out-quint) both; }
.cl__mo { position: relative; display: block; padding: calc(var(--u) * 8) calc(var(--u) * 10); border-radius: calc(var(--u) * 6); font-size: calc(var(--u) * 12.5); color: #faf9f5; }
.cl__search { position: relative; display: flex; align-items: center; gap: calc(var(--u) * 8); height: calc(var(--u) * 34); margin: calc(var(--u) * 12) 0; padding: 0 calc(var(--u) * 10); border-radius: calc(var(--u) * 9); border: 1px solid #45443f; }
.cl__search svg { width: calc(var(--u) * 14); height: calc(var(--u) * 14); color: #8a887f; }
.cl__search .cl__typed { display: inline; -webkit-line-clamp: none; color: #faf9f5; }
.cl__search .cl__typed:not(:empty) + .cl__ph { display: none; }
.cl.is-typing .cl__search { border-color: #6f6d66; }
.cl__glab { display: flex; margin: 0 0 calc(var(--u) * 8) !important; font-size: calc(var(--u) * 11.5); color: #8a887f; }
.cl__gfound, .cl.is-found .cl__gpop { display: none; }
.cl.is-found .cl__gfound { display: inline; }
.cl__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: calc(var(--u) * 8); }
.cl__card { position: relative; display: grid; grid-template-columns: calc(var(--u) * 30) minmax(0, 1fr) calc(var(--u) * 26); grid-template-rows: auto auto; gap: calc(var(--u) * 1) calc(var(--u) * 10); align-items: center; padding: calc(var(--u) * 10); border-radius: calc(var(--u) * 10); border: 1px solid #3a3935; background: #2b2a27; }
.cl.is-found .cl__card--x { display: none; }
.cl__logo { grid-row: 1 / span 2; width: calc(var(--u) * 30); height: calc(var(--u) * 30); border-radius: calc(var(--u) * 8); }
.cl__logo--l { display: grid; place-items: center; background: var(--c); color: #fff; font-weight: 700; font-size: calc(var(--u) * 11); }
.cl__cname { color: #faf9f5; font-weight: 600; font-size: calc(var(--u) * 12.5); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cl__cdesc { grid-column: 2; color: #8a887f; font-size: calc(var(--u) * 11); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cl__cplus { position: relative; grid-row: 1 / span 2; grid-column: 3; display: grid; place-items: center; width: calc(var(--u) * 26); height: calc(var(--u) * 26); border-radius: 50%; border: 1px solid #45443f; color: #faf9f5; font-size: calc(var(--u) * 15); }
.cl__cok { display: none; grid-row: 1 / span 2; grid-column: 3; color: #7fc882; font-size: calc(var(--u) * 10); font-weight: 600; text-align: right; }
.cl.is-connected .cl__card--hit .cl__cplus { display: none; }
.cl.is-connected .cl__card--hit .cl__cok { display: block; }
.cl.is-connected .cl__card--hit { border-color: rgba(127, 200, 130, 0.45); }
.cl.is-connected .cl__card--hit { grid-template-columns: calc(var(--u) * 30) minmax(0, 1fr) calc(var(--u) * 64); }

/* Ventanas emergentes */
.cl__pop { position: absolute; left: 50%; top: 52%; z-index: 6; display: none; width: calc(var(--u) * 320); padding: calc(var(--u) * 16); border-radius: calc(var(--u) * 12); background: #30302e; border: 1px solid #45443f; box-shadow: 0 calc(var(--u) * 24) calc(var(--u) * 60) rgba(0, 0, 0, 0.6); transform: translate(-50%, -50%); }
.cl.is-auth .cl__pop--auth, .cl.is-perm .cl__pop--perm, .cl.is-drop .cl__pop--drop { display: grid; gap: calc(var(--u) * 8); animation: popUp .4s var(--ease-out-quint) both; }
@keyframes popUp { from { opacity: 0; transform: translate(-50%, -46%) scale(0.97); } to { opacity: 1; transform: translate(-50%, -50%); } }
.cl__pt { color: #faf9f5; font-weight: 650; font-size: calc(var(--u) * 14); text-align: center; }
.cl__pt--dk { color: #1a1a1a; }
.cl__pnote { color: #8a887f; font-size: calc(var(--u) * 11.5); text-align: center; }
.cl__pop--auth { padding: 0 0 calc(var(--u) * 18); background: #fff; border: 0; overflow: hidden; }
.cl__pbar { display: flex; align-items: center; gap: calc(var(--u) * 5); height: calc(var(--u) * 28); padding: 0 calc(var(--u) * 10); background: #ececee; border-bottom: 1px solid #dcdce0; }
.cl__pbar i { width: calc(var(--u) * 8); height: calc(var(--u) * 8); border-radius: 50%; background: #c9c9ce; }
.cl__pbar span { margin-left: calc(var(--u) * 8); font-size: calc(var(--u) * 10.5); color: #555; }
.cl__plogo { width: calc(var(--u) * 36); height: calc(var(--u) * 36); margin: calc(var(--u) * 12) auto calc(var(--u) * 2); }
.cl__pop--auth .cl__pt { color: #14213d; }
.cl__fld { display: flex; align-items: center; height: calc(var(--u) * 32); margin: 0 calc(var(--u) * 18); padding: 0 calc(var(--u) * 10); border: 1px solid #d4d4d8; border-radius: calc(var(--u) * 7); font-size: calc(var(--u) * 12); color: #555; }
.cl__btn--blue { margin: calc(var(--u) * 6) calc(var(--u) * 18) 0; height: calc(var(--u) * 34); background: #2463eb; color: #fff; }
.cl__perm { display: flex; align-items: center; justify-content: space-between; gap: calc(var(--u) * 10); padding: calc(var(--u) * 9) 0; border-top: 1px solid #45443f; font-size: calc(var(--u) * 12.5); color: #faf9f5; }
.cl__perm b { position: relative; padding: calc(var(--u) * 4) calc(var(--u) * 10); border-radius: calc(var(--u) * 7); border: 1px solid #45443f; font-size: calc(var(--u) * 11.5); font-weight: 500; color: #c2c0b6; }
.cl.is-perm-ok .cl__perm b { background: #3f3e3a; color: #faf9f5; border-color: #6f6d66; }
.cl__drop { position: relative; display: grid; place-items: center; align-content: center; gap: calc(var(--u) * 6); height: calc(var(--u) * 120); border-radius: calc(var(--u) * 12); border: 1.5px dashed #6f6d66; color: #c2c0b6; font-size: calc(var(--u) * 12.5); transition: all .3s; }
.cl__drop svg { width: calc(var(--u) * 26); height: calc(var(--u) * 26); }
.cl.is-over .cl__drop { border-color: #d97757; background: rgba(217, 119, 87, 0.1); }
.cl__zip { position: absolute; left: 0; top: 0; z-index: 9; display: none; align-items: center; gap: calc(var(--u) * 6); padding: calc(var(--u) * 6) calc(var(--u) * 10); border-radius: calc(var(--u) * 8); background: #faf9f5; color: #141413; font-size: calc(var(--u) * 11.5); font-weight: 600; box-shadow: 0 calc(var(--u) * 10) calc(var(--u) * 24) rgba(0, 0, 0, 0.45); transition: transform .9s var(--ease-soft); }
.cl.is-zip .cl__zip { display: flex; }
.cl__zip i { padding: calc(var(--u) * 2) calc(var(--u) * 5); border-radius: calc(var(--u) * 4); background: #d97757; color: #fff; font-style: normal; font-size: calc(var(--u) * 9); }

/* Modelo y esfuerzo */
.cl__dd { position: absolute; z-index: 5; right: calc(var(--u) * 40); bottom: calc(100% + var(--u) * 8); display: none; width: calc(var(--u) * 250); padding: calc(var(--u) * 8); border-radius: calc(var(--u) * 12); background: #30302e; border: 1px solid #45443f; box-shadow: 0 calc(var(--u) * 20) calc(var(--u) * 50) rgba(0, 0, 0, 0.55); }
.cl.is-dd .cl__dd { display: grid; animation: mIn .3s var(--ease-out-quint) both; }
.cl__ddk { padding: calc(var(--u) * 6) calc(var(--u) * 8) calc(var(--u) * 4); font-size: calc(var(--u) * 10.5); color: #8a887f; }
.cl__ddo { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; padding: calc(var(--u) * 7) calc(var(--u) * 8); border-radius: calc(var(--u) * 8); color: #faf9f5; font-size: calc(var(--u) * 12.5); }
.cl__ddo small { grid-column: 1; color: #8a887f; font-size: calc(var(--u) * 11); }
.cl__ddo i { grid-row: 1 / span 2; grid-column: 2; align-self: center; display: none; font-style: normal; color: #d97757; }
.cl__ddo--sonnet i { display: block; }
.cl.is-opus .cl__ddo--sonnet i { display: none; }
.cl.is-opus .cl__ddo[data-t="opus"] i { display: block; }
.cl.is-opus .cl__ddo[data-t="opus"] { background: #3a3935; }
.cl__effs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: calc(var(--u) * 4); padding: calc(var(--u) * 4); }
.cl__effs span { position: relative; padding: calc(var(--u) * 6) 0; border-radius: calc(var(--u) * 7); border: 1px solid #45443f; text-align: center; font-size: calc(var(--u) * 11.5); color: #c2c0b6; }
.cl__eff-a, .cl.is-medio .cl__eff-m { background: #3f3e3a; color: #faf9f5 !important; border-color: #6f6d66 !important; }
.cl.is-medio .cl__eff-a { background: none; color: #c2c0b6 !important; border-color: #45443f !important; }

/* El navegador (Shopify) */
.cl__bw { position: absolute; left: 50%; top: 52%; z-index: 7; display: none; width: calc(var(--u) * 420); border-radius: calc(var(--u) * 12); overflow: hidden; background: #fff; box-shadow: 0 calc(var(--u) * 30) calc(var(--u) * 70) rgba(0, 0, 0, 0.6); transform: translate(-50%, -50%); }
.cl.is-login .cl__bw--login, .cl.is-grant .cl__bw--grant { display: block; animation: popUp .4s var(--ease-out-quint) both; }
.cl__bwb { display: grid; justify-items: center; gap: calc(var(--u) * 9); padding: calc(var(--u) * 14) calc(var(--u) * 28) calc(var(--u) * 22); }
.cl__bwb .cl__plogo { margin-top: calc(var(--u) * 4); }
.cl__fld--lt { width: 100%; margin: 0; }
.cl__btn--dk { width: 100%; height: calc(var(--u) * 36); background: #1a1a1a; color: #fff; }
.cl__perm--lt { width: 100%; color: #303030; border-top-color: #ebebeb; }

/* Lo que se pulsa, un instante */
.mk .is-press { animation: press .5s var(--ease-soft); }
@keyframes press { 0% { filter: none; } 35% { filter: brightness(1.35); transform: scale(0.96); } 100% { filter: none; transform: none; } }

/* El ratón de las demos */
.cur { position: absolute; left: 0; top: 0; z-index: 30; width: calc(100cqw / 900 * 22); height: calc(100cqw / 900 * 22); pointer-events: none; transform: translate3d(70cqw, 80cqw, 0); transition: transform .85s cubic-bezier(0.5, 0, 0.2, 1); filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.45)); }
.cur svg { width: 100%; height: 100%; }
.cur::after { content: ''; position: absolute; left: calc(100cqw / 900 * -9); top: calc(100cqw / 900 * -9); width: calc(100cqw / 900 * 18); height: calc(100cqw / 900 * 18); border-radius: 50%; background: rgba(47, 107, 255, 0.55); opacity: 0; }
.cur.is-click::after { animation: curClick .55s var(--ease-out-quint); }
@keyframes curClick { 0% { opacity: 0.9; transform: scale(0.4); } 100% { opacity: 0; transform: scale(2.4); } }

@media (prefers-reduced-motion: reduce) {
  /* .cur (el ratón de las demos) se sigue moviendo a propósito */
  .sa__tg[data-anim-tg], .sa__tg[data-anim-tg]::after { animation: none; }
  .sa__tg[data-anim-tg] { background: #d4d4d4; }
  .sa__tg[data-anim-tg]::after { left: calc(var(--u) * 2); }
}

/* Configuración de Shopify (4.1 Pagos y 4.3 Políticas): la barra lateral de ajustes y sus filas */
.sa__wrap--set { height: auto; min-height: calc(var(--u) * 300); grid-template-columns: calc(var(--u) * 190) minmax(0, 1fr); }
.sa__nav--set { background: #fafafa; }
.sa__nav--set .sa__ni { font-weight: 450; }
.sa__nav--set .sa__ni.is-on { background: #ebebeb; font-weight: 650; box-shadow: none; }
.sa__nav-h { padding: calc(var(--u) * 4) calc(var(--u) * 10) calc(var(--u) * 8); font-weight: 650; color: #1a1a1a; }
.sa__pbtn--2 { background: #fff; color: #1a1a1a; box-shadow: inset 0 0 0 1px #d4d4d4; }
.sa__ri--pp { background: #fff; box-shadow: inset 0 0 0 1px #e3e3e3; }
.sa__ri--pp svg { width: calc(var(--u) * 20); height: calc(var(--u) * 20); }
.sa__ri--sp { background: #f1f8e9; }
.sa__ri--sp svg { width: calc(var(--u) * 20); height: calc(var(--u) * 20); }
.sa__warn { display: inline-flex; align-items: center; gap: calc(var(--u) * 5); color: #8a6100; }
.sa__warn::before { content: ''; width: calc(var(--u) * 7); height: calc(var(--u) * 7); border-radius: 50%; background: #e8b100; }
.sa__row .cur-hint { left: auto; right: calc(var(--u) * 60); top: 60%; }
.pol-r { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: calc(var(--u) * 14); align-items: center; padding: calc(var(--u) * 10) 0; border-top: 1px solid #ebebeb; }
.pol-r b { font-weight: 550; color: #1a1a1a; }
.pol-r em { font-style: normal; font-size: calc(var(--u) * 12); color: #616161; }
.pol-r i { font-style: normal; color: #8a8a8a; }
.pol-r--new em { color: #8a6100; }

/* ====== La tienda VoltHorn, montada aquí y no capturada: su portada (portátil) y su ficha (móvil) ======
   Todo se mide en --u: 1/900 del ancho en la portada (su captura real medía 900 de ancho) y 1/390 en el móvil.
   La foto de la portada es la mitad derecha de esa captura (tienda-fondo.jpg); la del móvil, la de la bocina con IA */
.vh, .vhp {
  position: relative; container-type: inline-size; display: flex; flex-direction: column; overflow: hidden; isolation: isolate;
  background: #0b0b0c; color: #fff; font-family: 'Barlow Condensed', 'Arial Narrow', sans-serif; line-height: 1.1; text-align: left; -webkit-font-smoothing: antialiased;
}
.vh { aspect-ratio: 16 / 10; }
.vhp { aspect-ratio: 9 / 19.5; }
.vh > * { --u: calc(100cqw / 900); }
.vhp > * { --u: calc(100cqw / 390); }
.vh p, .vhp p { margin: 0; }
.vh svg, .vhp svg { display: block; flex: none; }
.vh__bar { flex: none; display: flex; align-items: center; height: calc(var(--u) * 34); padding: 0 calc(var(--u) * 14); background: #1d1d20; border-bottom: 1px solid rgba(255, 255, 255, 0.06); }
.vh__bar .bw__dots { gap: calc(var(--u) * 7); }
.vh__bar .bw__dots i { width: calc(var(--u) * 11); height: calc(var(--u) * 11); }
.vh__url { display: inline-flex; align-items: center; justify-content: center; gap: calc(var(--u) * 6); width: calc(var(--u) * 300); height: calc(var(--u) * 22); margin: 0 auto; transform: translateX(calc(var(--u) * -24)); border-radius: calc(var(--u) * 7); background: #2b2b2f; color: rgba(255, 255, 255, 0.66); font: 500 calc(var(--u) * 12)/1 var(--font-sans); }
.vh__url .ic { width: calc(var(--u) * 11); height: calc(var(--u) * 11); }
.vh__ann { flex: none; padding: calc(var(--u) * 6) 0; background: #000; text-align: center; font-size: calc(var(--u) * 12.5); font-weight: 700; letter-spacing: 0.03em; }
.vh__nav { flex: none; display: flex; align-items: center; gap: calc(var(--u) * 34); height: calc(var(--u) * 50); padding: 0 calc(var(--u) * 58); background: #0f0f11; border-bottom: 1px solid rgba(255, 255, 255, 0.07); }
.vh__logo { display: inline-flex; align-items: center; gap: 0.16em; font-size: calc(var(--u) * 22); font-weight: 800; font-style: italic; letter-spacing: -0.01em; color: #ffcc1a; }
.vh__logo svg { width: 0.78em; height: 0.78em; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }
.vh__menu { display: flex; gap: calc(var(--u) * 20); font: 500 calc(var(--u) * 12.5)/1 var(--font-sans); color: rgba(255, 255, 255, 0.72); }
.vh__menu b { font-weight: 600; color: #fff; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.45em; }
.vh__icons { display: flex; gap: calc(var(--u) * 16); margin-left: auto; color: #fff; }
.vh__icons .ic { width: calc(var(--u) * 16); height: calc(var(--u) * 16); }
.vh__hero { position: relative; flex: 1; min-height: 0; display: flex; align-items: center; padding: 0 calc(var(--u) * 58); overflow: hidden; }
.vh__hero::before { content: ''; position: absolute; z-index: -2; top: 0; bottom: 0; right: 0; width: 56%; background: url(../assets/tienda-fondo.jpg) 50% 66% / cover no-repeat; animation: vhKen 18s var(--ease-out-quint) .3s both; }
.vh__hero::after { content: ''; position: absolute; z-index: -1; inset: 0; background: linear-gradient(90deg, #0b0b0c 42%, rgba(11, 11, 12, 0.55) 56%, rgba(11, 11, 12, 0) 74%); }
@keyframes vhKen { from { transform: scale(1.1); } to { transform: none; } }
.vh__copy { display: grid; justify-items: start; gap: calc(var(--u) * 9); }
.vh__k { font-size: calc(var(--u) * 12.5); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: #ffcc1a; }
.vh__k::before { content: '\25C6'; margin-right: 0.7em; }
.vh__t { font-size: calc(var(--u) * 84); font-weight: 800; line-height: 0.86; letter-spacing: -0.005em; text-transform: uppercase; }
.vh__t2 { font-size: calc(var(--u) * 34); font-weight: 800; text-transform: uppercase; }
.vh__t2 em { font-style: normal; color: #ffcc1a; }
.vh__btn { display: inline-flex; align-items: center; justify-content: center; margin-top: calc(var(--u) * 8); height: calc(var(--u) * 42); padding: 0 calc(var(--u) * 24); border-radius: 999px; background: #ffcc1a; color: #111; font-size: calc(var(--u) * 14); font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap; }
.vh__tick { flex: none; position: relative; display: flex; align-items: center; height: calc(var(--u) * 46); overflow: hidden; background: #ffcc1a; color: #111; }
.vh__tick::before, .vh__tick::after { content: ''; position: absolute; left: 0; right: 0; height: calc(var(--u) * 6); background: repeating-linear-gradient(-45deg, #111 0 calc(var(--u) * 7), #ffcc1a calc(var(--u) * 7) calc(var(--u) * 14)); }
.vh__tick::before { top: 0; }
.vh__tick::after { bottom: 0; }
.vh__tick-in { display: flex; flex: none; white-space: nowrap; font-size: calc(var(--u) * 19); font-weight: 800; letter-spacing: 0.02em; text-transform: uppercase; animation: vhTick 28s linear infinite; }
.vh__tick-in span { padding-right: calc(var(--u) * 26); }
.vh__tick-in span::after { content: '\25C6'; margin-left: calc(var(--u) * 26); font-size: 0.6em; vertical-align: 0.2em; }
@keyframes vhTick { to { transform: translateX(-50%); } }
/* La ficha en el móvil: entra la foto, el precio y, al rato, alguien pulsa «Añadir al carrito» y el carrito marca 1 */
.vhp__nav { flex: none; display: flex; align-items: center; justify-content: space-between; padding: calc(var(--u) * 58) calc(var(--u) * 22) calc(var(--u) * 14); background: #0f0f11; }
.vhp__nav > svg { width: calc(var(--u) * 24); height: calc(var(--u) * 24); fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; }
.vhp .vh__logo { font-size: calc(var(--u) * 32); }
.vhp__cart { position: relative; color: #fff; }
.vhp__cart .ic { width: calc(var(--u) * 24); height: calc(var(--u) * 24); }
.vhp__cart i { position: absolute; right: calc(var(--u) * -10); top: calc(var(--u) * -9); display: grid; place-items: center; width: calc(var(--u) * 19); height: calc(var(--u) * 19); border-radius: 50%; background: #ffcc1a; color: #111; font: 800 calc(var(--u) * 11.5)/1 var(--font-sans); font-style: normal; animation: vhBadge .7s var(--ease-spring) 2.9s both; }
@keyframes vhBadge { from { transform: scale(0); } }
.vhp__img { flex: none; aspect-ratio: 1 / 1.16; overflow: hidden; }
/* La barra de inicio del iPhone, abajo */
.vhp::after { content: ''; position: absolute; z-index: 2; left: 50%; bottom: 1.4%; width: 34%; height: 0.7%; margin-left: -17%; border-radius: 99px; background: rgba(255, 255, 255, 0.6); }
.vhp__img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.vhp__body { flex: 1; display: grid; align-content: start; gap: calc(var(--u) * 10); padding: calc(var(--u) * 22) calc(var(--u) * 22) 0; }
.vhp__k { font-size: calc(var(--u) * 15); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: #ffcc1a; }
.vhp__t { font-size: calc(var(--u) * 42); font-weight: 800; line-height: 0.92; text-transform: uppercase; }
.vhp__p { font-size: calc(var(--u) * 30); font-weight: 700; }
.vhp .vhp__btn { position: relative; overflow: hidden; width: 100%; height: calc(var(--u) * 56); margin-top: calc(var(--u) * 6); padding: 0; font-size: calc(var(--u) * 17); animation: vhPress .5s var(--ease-spring) 2.45s both; }
.vhp__btn::after { content: ''; position: absolute; left: 50%; top: 50%; width: calc(var(--u) * 40); height: calc(var(--u) * 40); margin: calc(var(--u) * -20) 0 0 calc(var(--u) * -20); border-radius: 50%; background: rgba(255, 255, 255, 0.6); opacity: 0; animation: vhTap .9s ease-out 2.45s both; }
@keyframes vhPress { 0%, 100% { transform: none; } 40% { transform: scale(0.95); } }
@keyframes vhTap { from { opacity: 0.85; transform: scale(0); } to { opacity: 0; transform: scale(9); } }
.vhp__f { display: flex; align-items: center; justify-content: center; gap: calc(var(--u) * 7); font: 500 calc(var(--u) * 14)/1 var(--font-sans); color: rgba(255, 255, 255, 0.7); }
.vhp__f .ic { width: calc(var(--u) * 16); height: calc(var(--u) * 16); }

/* ====== 2.4 · El informe de productos, montado aquí y no capturado: la ficha abierta, legible, y su botón COPIAR FICHA ====== */
.mk--report { background: #fff; }
.rpm { display: grid; grid-template-columns: 41% minmax(0, 1fr); gap: calc(var(--u) * 30); padding: calc(var(--u) * 28) calc(var(--u) * 32) calc(var(--u) * 30) calc(var(--u) * 28); background: #fff; color: #111113; font-family: var(--font-sans); letter-spacing: -0.011em; }
.rpm p { margin: 0; }
/* height: auto, o el alto del atributo de la etiqueta (560) gana al aspect-ratio y la foto sale estirada */
.rpm__media img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: calc(var(--u) * 18); background: #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.06); }
.rpm__thumbs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: calc(var(--u) * 8); margin-top: calc(var(--u) * 12); }
.rpm__thumbs img { border-radius: calc(var(--u) * 12); opacity: 0.55; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.06); }
.rpm__thumbs img:first-child { opacity: 1; box-shadow: 0 0 0 calc(var(--u) * 2) #2f6bff; }
.rpm__body { display: flex; flex-direction: column; gap: calc(var(--u) * 15); min-width: 0; }
.rpm__tags { display: flex; flex-wrap: wrap; align-items: center; gap: calc(var(--u) * 9); }
.rpm__n { display: inline-flex; align-items: center; height: calc(var(--u) * 28); padding: 0 calc(var(--u) * 10); border-radius: 999px; background: #f7f7f8; font: 700 calc(var(--u) * 13)/1 var(--font-sans); letter-spacing: -0.01em; color: #111113; font-variant-numeric: tabular-nums; }
.rpm__score { display: inline-flex; align-items: center; gap: calc(var(--u) * 5); height: calc(var(--u) * 30); padding: 0 calc(var(--u) * 11); border-radius: 999px; background: #2f6bff; color: #fff; font: 720 calc(var(--u) * 15)/1 var(--font-sans); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 calc(var(--u) * 6) calc(var(--u) * 16) calc(var(--u) * -8) rgba(47, 107, 255, 0.8); }
.rpm__score small { font-size: calc(var(--u) * 10); font-weight: 650; letter-spacing: 0.06em; color: rgba(255, 255, 255, 0.8); }
.rpm__cat { font: 650 calc(var(--u) * 11)/1.25 var(--font-sans); letter-spacing: 0.06em; text-transform: uppercase; color: #d9600c; }
.rpm__t { font: 600 calc(var(--u) * 30)/1.12 var(--font-sans); letter-spacing: -0.035em; color: #111113; text-wrap: balance; }
.rpm__nums { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid rgba(0, 0, 0, 0.07); border-bottom: 1px solid rgba(0, 0, 0, 0.07); }
.rpm__nums > p { display: grid; justify-items: center; gap: calc(var(--u) * 6); padding: calc(var(--u) * 13) calc(var(--u) * 6); }
.rpm__nums > p + p { border-left: 1px solid rgba(0, 0, 0, 0.07); }
.rpm__nums small { font: 650 calc(var(--u) * 10.5)/1.2 var(--font-sans); letter-spacing: 0.05em; text-transform: uppercase; color: #8a8b93; }
.rpm__nums b { font: 700 calc(var(--u) * 21)/1.1 var(--font-sans); letter-spacing: -0.03em; color: #111113; font-variant-numeric: tabular-nums; }
.rpm__nums .is-venta { color: #1f5ef5; }
.rpm__nums .is-ok { color: #12a15a; }
/* Las barras de la nota: 80 o más en verde, de 60 a 79 en azul y por debajo de 60 en naranja (como en el informe) */
.rpm__bars { display: grid; gap: calc(var(--u) * 12); }
.rpm__bars > p { display: grid; grid-template-columns: calc(var(--u) * 118) minmax(0, 1fr) calc(var(--u) * 30); align-items: center; gap: calc(var(--u) * 12); }
.rpm__bars small { font: 650 calc(var(--u) * 11)/1 var(--font-sans); letter-spacing: 0.05em; text-transform: uppercase; color: #55565d; white-space: nowrap; }
.rpm__bars i { position: relative; height: calc(var(--u) * 6); border-radius: 99px; background: rgba(17, 17, 19, 0.07); overflow: hidden; }
.rpm__bars i::before { content: ''; position: absolute; inset: 0 auto 0 0; width: var(--v); border-radius: inherit; background: #12a15a; transform-origin: left; }
.rpm__bars i.is-mid::before { background: #2f6bff; }
.rpm__bars i.is-lo::before { background: #f2721a; }
.paso.is-on .rpm__bars i::before { animation: rpmBar 1.3s var(--ease-out-quint) .35s both; }
.paso.is-on .rpm__bars p:nth-child(2) i::before { animation-delay: .45s; }
.paso.is-on .rpm__bars p:nth-child(3) i::before { animation-delay: .55s; }
@keyframes rpmBar { from { transform: scaleX(0); } }
.rpm__bars b { font: 700 calc(var(--u) * 13)/1 var(--font-sans); text-align: right; color: #111113; font-variant-numeric: tabular-nums; }
.rpm__btns { display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--u) * 10); padding-top: calc(var(--u) * 15); border-top: 1px solid rgba(0, 0, 0, 0.07); }
.rpm__btns > span { display: inline-flex; align-items: center; justify-content: center; gap: calc(var(--u) * 8); height: calc(var(--u) * 50); border-radius: 999px; font: 650 calc(var(--u) * 13.5)/1 var(--font-sans); letter-spacing: 0.04em; text-transform: uppercase; white-space: nowrap; }
.rpm__copy { position: relative; background: #2f6bff; color: #fff; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 calc(var(--u) * 8) calc(var(--u) * 22) calc(var(--u) * -10) rgba(47, 107, 255, 0.75); }
.rpm__copy .ic { width: calc(var(--u) * 16); height: calc(var(--u) * 16); }
.rpm__copy::after { content: ''; position: absolute; inset: calc(var(--u) * -7); border-radius: inherit; border: 2px solid #2f6bff; opacity: 0; animation: rpmCall 2.6s var(--ease-soft) 1.2s infinite; }
@keyframes rpmCall { 0% { opacity: 0; transform: scale(0.94); } 30% { opacity: 1; } 70%, 100% { opacity: 0; transform: scale(1.05); } }
.rpm__out { border: 1px solid rgba(0, 0, 0, 0.12); background: #fff; color: #111113; }
@media (prefers-reduced-motion: reduce) {
  .vh__tick-in:not(.demo *), .vh__hero::before, .vhp__btn, .vhp__btn::after, .rpm__copy::after { animation: none !important; }
  .vhp__cart i { animation: none !important; transform: none; }
}

/* ====== El panel de la derecha en las demos de Claude, montado aquí y no capturado ======
   Son webs dentro del panel (su color no cambia con el tema de Claude). Se miden en --u de la réplica (1/900 de su ancho):
   el panel mide unas 366 de ancho y 508 de alto. */

/* Tu informe: el mismo informe de productos (claro, con el logo y el azul de letsgodrop), a la escala del panel */
.irp { height: 100%; display: flex; flex-direction: column; gap: calc(var(--u) * 9); padding: calc(var(--u) * 12) calc(var(--u) * 14) calc(var(--u) * 14); background: #fff; color: #111113; font-family: var(--font-sans); letter-spacing: -0.011em; overflow: hidden; }
.irp p { margin: 0; }
.irp__top { display: flex; align-items: center; justify-content: space-between; }
.irp__logo { display: inline-flex; align-items: center; gap: calc(var(--u) * 5); font: 700 calc(var(--u) * 11.5)/1 var(--font-sans); letter-spacing: -0.045em; color: #111113; }
.irp__mark { width: calc(var(--u) * 17); height: calc(var(--u) * 17); flex: none; filter: drop-shadow(0 calc(var(--u) * 2) calc(var(--u) * 4) rgba(47, 107, 255, 0.35)); }
.irp__logo em, .irp__t em { font-style: normal; background: linear-gradient(135deg, #4cc2ff, #2f6bff 55%, #7c5cff); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.irp__date { padding: calc(var(--u) * 4) calc(var(--u) * 8); border-radius: 99px; background: #f7f7f8; font: 550 calc(var(--u) * 7.5)/1 var(--font-sans); color: #55565d; }
.irp__t { text-align: center; font: 740 calc(var(--u) * 24)/1.02 var(--font-sans); letter-spacing: -0.045em; color: #111113; }
.irp__t em { padding-right: 0.04em; }
.irp__cats { display: flex; justify-content: center; flex-wrap: wrap; gap: calc(var(--u) * 4); }
.irp__cats span { padding: calc(var(--u) * 4) calc(var(--u) * 8); border-radius: 99px; background: #f7f7f8; font: 550 calc(var(--u) * 8)/1.1 var(--font-sans); color: #111113; }
/* Las cifras, en baldosas blancas: su icono plano de color, la etiqueta y la cifra (el beneficio, en verde) */
.irp__stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: calc(var(--u) * 6); }
.irp__stats p, .irp__card { background: #fff; border: 1px solid rgba(0, 0, 0, 0.06); box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 calc(var(--u) * 6) calc(var(--u) * 14) calc(var(--u) * -9) rgba(16, 24, 40, 0.18); }
.irp__stats p { display: grid; align-content: start; gap: calc(var(--u) * 2.5); min-width: 0; padding: calc(var(--u) * 7) calc(var(--u) * 7) calc(var(--u) * 8); border-radius: calc(var(--u) * 10); }
.irp__gi { display: grid; place-items: center; width: calc(var(--u) * 15); height: calc(var(--u) * 15); margin-bottom: calc(var(--u) * 3); border-radius: calc(var(--u) * 4.5); background: var(--h); color: #fff; box-shadow: 0 1px 1.5px rgba(16, 24, 40, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.3); }
.irp__gi .ic { width: 52%; height: 52%; }
.irp__stats small { overflow: hidden; font: 650 calc(var(--u) * 6)/1.2 var(--font-sans); letter-spacing: 0.05em; color: #55565d; white-space: nowrap; text-overflow: ellipsis; }
.irp__stats b { font: 750 calc(var(--u) * 13.5)/1.05 var(--font-sans); letter-spacing: -0.045em; color: #111113; white-space: nowrap; font-variant-numeric: tabular-nums; }
.irp__stats .is-ok b { color: #12a15a; }
/* Las fichas: blancas, la foto con sus esquinas, el puesto en cristal y la nota en una pastilla azul */
.irp__grid { flex: 1; min-height: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); gap: calc(var(--u) * 8); }
.irp__card { position: relative; display: flex; flex-direction: column; min-width: 0; min-height: 0; padding: calc(var(--u) * 4); border-radius: calc(var(--u) * 12); }
.irp__img { position: relative; flex: 1; min-height: 0; overflow: hidden; border-radius: calc(var(--u) * 8); background: #fff; }
.irp__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* La foto del proveedor lleva su rótulo arriba: se encuadra la bocina */
.irp__img .irp__low { object-position: 50% 100%; }
.irp__n, .irp__s { position: absolute; top: calc(var(--u) * 5); display: inline-flex; align-items: center; gap: calc(var(--u) * 2.5); height: calc(var(--u) * 13); padding: 0 calc(var(--u) * 5.5); border-radius: 99px; font: 700 calc(var(--u) * 7)/1 var(--font-sans); letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.irp__n { left: calc(var(--u) * 5); background: rgba(255, 255, 255, 0.88); color: #111113; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.06); }
.irp__s { right: calc(var(--u) * 5); background: #2f6bff; color: #fff; font-size: calc(var(--u) * 8); font-weight: 720; }
.irp__s small { font-size: calc(var(--u) * 4.8); font-weight: 650; letter-spacing: 0.06em; color: rgba(255, 255, 255, 0.8); }
.irp__cat { padding: calc(var(--u) * 6) calc(var(--u) * 3) 0; font: 650 calc(var(--u) * 5.8)/1.25 var(--font-sans); letter-spacing: 0.06em; text-transform: uppercase; color: #d9600c; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.irp__name { padding: calc(var(--u) * 2.5) calc(var(--u) * 3) calc(var(--u) * 5); font: 600 calc(var(--u) * 9.5)/1.2 var(--font-sans); letter-spacing: -0.02em; color: #111113; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.irp__nums { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0 calc(var(--u) * 3) calc(var(--u) * 2); padding: calc(var(--u) * 5) 0; border-top: 1px solid rgba(0, 0, 0, 0.07); }
.irp__nums p { display: grid; justify-items: center; gap: calc(var(--u) * 2); min-width: 0; }
.irp__nums p + p { border-left: 1px solid rgba(0, 0, 0, 0.07); }
.irp__nums small { font: 650 calc(var(--u) * 4.6)/1 var(--font-sans); letter-spacing: 0.05em; color: #8a8b93; }
.irp__nums b { font: 700 calc(var(--u) * 7.5)/1 var(--font-sans); letter-spacing: -0.03em; color: #111113; font-variant-numeric: tabular-nums; white-space: nowrap; }
.irp__nums .is-venta { color: #1f5ef5; }
.irp__nums .is-ok { color: #12a15a; }
/* El que vas a elegir: un anillo azul que se enciende un par de veces */
.irp__card.is-top::after { content: ''; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 calc(var(--u) * 1.6) #2f6bff; opacity: 0; pointer-events: none; }
.cl.show-pane .irp__stats p, .cl.show-pane .irp__card { animation: irpIn .6s var(--ease-out-quint) both; }
.cl.show-pane .irp__stats p:nth-child(2) { animation-delay: .05s; }
.cl.show-pane .irp__stats p:nth-child(3) { animation-delay: .1s; }
.cl.show-pane .irp__stats p:nth-child(4) { animation-delay: .15s; }
.cl.show-pane .irp__card:nth-child(1) { animation-delay: .2s; }
.cl.show-pane .irp__card:nth-child(2) { animation-delay: .27s; }
.cl.show-pane .irp__card:nth-child(3) { animation-delay: .34s; }
.cl.show-pane .irp__card:nth-child(4) { animation-delay: .41s; }
.cl.show-pane .irp__card.is-top::after { animation: irpPick 2.4s var(--ease-soft) 1.1s 3; }
@keyframes irpIn { from { opacity: 0; transform: translate3d(0, calc(var(--u) * 8), 0); } }
@keyframes irpPick { 0%, 100% { opacity: 0; } 35%, 65% { opacity: 1; } }

/* Tu tienda: antes y después, una encima de otra; la de después entra barriendo de izquierda a derecha, con su línea */
.cl__shop-a, .cl__shop-b { position: absolute; inset: 0; display: flex; flex-direction: column; overflow: hidden; }
.cl__shop-a p, .cl__shop-b p { margin: 0; }
.cl__shop-a svg, .cl__shop-b svg { display: block; flex: none; }
.cl__shop-b { clip-path: inset(0 100% 0 0); }
.cl__shop-line { position: absolute; z-index: 2; inset: 0; pointer-events: none; opacity: 0; }
.cl__shop-line::before { content: ''; position: absolute; top: 0; bottom: 0; left: calc(var(--u) * -1); width: calc(var(--u) * 2); background: #ffcc1a; box-shadow: 0 0 calc(var(--u) * 14) rgba(255, 204, 26, 0.75); }
.cl.is-store .cl__shop-b { animation: shopSweep 6s var(--ease-soft) .4s infinite; }
.cl.is-store .cl__shop-line { animation: shopLine 6s var(--ease-soft) .4s infinite; }
@keyframes shopSweep {
  0%, 8% { clip-path: inset(0 100% 0 0); opacity: 1; }
  38%, 88% { clip-path: inset(0 0 0 0); opacity: 1; }
  97% { clip-path: inset(0 0 0 0); opacity: 0; }
  100% { clip-path: inset(0 100% 0 0); opacity: 0; }
}
@keyframes shopLine { 0%, 8% { transform: translateX(0); opacity: 0; } 11%, 35% { opacity: 1; } 38%, 100% { transform: translateX(100%); opacity: 0; } }
/* Qué estás viendo, arriba a la derecha, en la barra del panel (así no tapa la tienda) */
.cl__shop-t { position: absolute; z-index: 3; top: calc(var(--u) * 8); right: calc(var(--u) * 10); display: grid; opacity: 0; transition: opacity .4s; pointer-events: none; }
.cl.is-store .cl__shop-t { opacity: 1; }
.cl__shop-t i { grid-area: 1 / 1; justify-self: end; padding: calc(var(--u) * 4) calc(var(--u) * 10); border-radius: 99px; font: 700 calc(var(--u) * 9)/1 var(--font-sans); font-style: normal; letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap; }
.cl__shop-ta { background: #3a3935; color: #faf9f5; }
.cl__shop-tb { background: #ffcc1a; color: #111; opacity: 0; }
:root:not([data-theme="dark"]) .cl__shop-ta { background: #e9e7df; color: #141413; }
.cl.is-store .cl__shop-ta { animation: shopTa 6s var(--ease-soft) .4s infinite; }
.cl.is-store .cl__shop-tb { animation: shopTb 6s var(--ease-soft) .4s infinite; }
@keyframes shopTa { 0%, 12% { opacity: 1; } 24%, 92% { opacity: 0; } 100% { opacity: 1; } }
@keyframes shopTb { 0%, 22% { opacity: 0; } 32%, 88% { opacity: 1; } 96%, 100% { opacity: 0; } }

/* Antes: el tema de serie, con tu producto tal como llega del proveedor */
.sdf { background: #f6f6f6; color: #121212; font-family: var(--font-sans); line-height: 1.3; }
.sdf__nav { flex: none; display: flex; align-items: center; gap: calc(var(--u) * 10); height: calc(var(--u) * 42); padding: 0 calc(var(--u) * 15); background: #fff; border-bottom: 1px solid #e8e8e8; }
.sdf__nav > svg { width: calc(var(--u) * 16); height: calc(var(--u) * 16); fill: none; stroke: #121212; stroke-width: 1.8; stroke-linecap: round; }
.sdf__nav b { font-size: calc(var(--u) * 13); font-weight: 650; }
.sdf__icons { display: flex; gap: calc(var(--u) * 12); margin-left: auto; }
.sdf__icons .ic { width: calc(var(--u) * 15); height: calc(var(--u) * 15); }
.sdf__hero { flex: none; padding: calc(var(--u) * 26) calc(var(--u) * 15) calc(var(--u) * 22); }
.sdf__t { font-size: calc(var(--u) * 22); font-weight: 400; line-height: 1.12; letter-spacing: -0.02em; }
.sdf__btn { display: inline-flex; align-items: center; height: calc(var(--u) * 30); margin-top: calc(var(--u) * 14); padding: 0 calc(var(--u) * 15); border-radius: 99px; background: #121212; color: #fff; font-size: calc(var(--u) * 10.5); font-weight: 550; }
.sdf__band { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: calc(var(--u) * 5); padding: calc(var(--u) * 15); background: #ebecee; }
.sdf__card { position: relative; flex: 1; min-height: 0; border-radius: calc(var(--u) * 12); background: #fff; overflow: hidden; }
.sdf__card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.sdf__pt { margin-top: calc(var(--u) * 6); font-size: calc(var(--u) * 13); }
.sdf__pd { font-size: calc(var(--u) * 10); color: #555; text-decoration: underline; text-underline-offset: 0.25em; }

/* Después: la que diseña Claude (VoltHorn), su portada en el móvil */
.vhm { background: #0b0b0c; color: #fff; font-family: 'Barlow Condensed', 'Arial Narrow', sans-serif; line-height: 1.1; -webkit-font-smoothing: antialiased; }
.vhm__ann { flex: none; padding: calc(var(--u) * 5) 0; background: #000; text-align: center; font-size: calc(var(--u) * 9.5); font-weight: 700; letter-spacing: 0.03em; }
.vhm__nav { flex: none; display: flex; align-items: center; justify-content: space-between; height: calc(var(--u) * 40); padding: 0 calc(var(--u) * 14); background: #0f0f11; border-bottom: 1px solid rgba(255, 255, 255, 0.07); }
.vhm__nav > svg:first-child { width: calc(var(--u) * 17); height: calc(var(--u) * 17); fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; }
.vhm__nav .ic { width: calc(var(--u) * 16); height: calc(var(--u) * 16); color: #fff; }
.vhm .vh__logo { font-size: calc(var(--u) * 19); }
.vhm__hero { position: relative; isolation: isolate; flex: 1; min-height: 0; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: calc(var(--u) * 6); padding: 0 calc(var(--u) * 16); overflow: hidden; }
.vhm__hero::before { content: ''; position: absolute; z-index: -2; top: 0; bottom: 0; right: 0; width: 58%; background: url(../assets/tienda-fondo.jpg) 50% 62% / cover no-repeat; }
.vhm__hero::after { content: ''; position: absolute; z-index: -1; inset: 0; background: linear-gradient(90deg, #0b0b0c 40%, rgba(11, 11, 12, 0.5) 56%, rgba(11, 11, 12, 0) 76%); }
.vhm .vh__k { font-size: calc(var(--u) * 9.5); }
.vhm__t { font-size: calc(var(--u) * 50); font-weight: 800; line-height: 0.86; text-transform: uppercase; }
.vhm__t2 { font-size: calc(var(--u) * 20); font-weight: 800; text-transform: uppercase; }
.vhm__t2 em { font-style: normal; color: #ffcc1a; }
.vhm__btn { display: inline-flex; align-items: center; height: calc(var(--u) * 30); margin-top: calc(var(--u) * 6); padding: 0 calc(var(--u) * 15); border-radius: 99px; background: #ffcc1a; color: #111; font-size: calc(var(--u) * 10.5); font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap; }
.vhm__tick { flex: none; position: relative; display: flex; align-items: center; height: calc(var(--u) * 28); overflow: hidden; background: #ffcc1a; color: #111; }
.vhm__tick::before, .vhm__tick::after { content: ''; position: absolute; left: 0; right: 0; height: calc(var(--u) * 4); background: repeating-linear-gradient(-45deg, #111 0 calc(var(--u) * 5), #ffcc1a calc(var(--u) * 5) calc(var(--u) * 10)); }
.vhm__tick::before { top: 0; }
.vhm__tick::after { bottom: 0; }
.vhm .vh__tick-in { font-size: calc(var(--u) * 12.5); animation-play-state: paused; }
.cl.is-store .vhm .vh__tick-in { animation-play-state: running; }
.vhm .vh__tick-in span { padding-right: calc(var(--u) * 15); }
.vhm .vh__tick-in span::after { margin-left: calc(var(--u) * 15); }

/* Sin bloque de prefers-reduced-motion para la réplica de Claude (.cl, solo vive
   dentro de las demos): sus animaciones son la demo y se mueven también con los
   efectos de animación de Windows apagados. */

/* Los logos de los conectores: cada marca en su baldosa blanca (como en el directorio de Claude); AutoDS ya es una baldosa */
.cl__logo--b { padding: calc(var(--u) * 5); background: #fff; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08); }
/* Lo que encuentras al buscar: a todo el ancho, para que su nombre no se corte */
.cl.is-found .cl__card--hit { grid-column: 1 / -1; }
/* La skill letsgodrop, con su logo (sin el fondo de las letras) */
.cl__rico--lg, .cl.is-installed .cl__li--new .cl__rico--lg, :root:not([data-theme="dark"]) .cl__rico--lg { padding: 0; background: none; }
.cl__rico--lg svg { width: 100%; height: 100%; }

/* ==== Claude en su tema claro (generado por claude_claro.py: no editar a mano) ==== */
:root:not([data-theme="dark"]) .mk--claude { background: #faf9f5; border-color: rgba(0, 0, 0, 0.1); color: #3d3d3a; }
:root:not([data-theme="dark"]) .cl { background: #faf9f5; color: #3d3d3a; }
:root:not([data-theme="dark"]) .cl__bar { background: #f3f1ea; border-bottom: 1px solid #e6e4dc; }
:root:not([data-theme="dark"]) .cl__tb { color: #73726c; }
:root:not([data-theme="dark"]) .cl__seg { background: #e9e7df; border: 1px solid #e6e4dc; }
:root:not([data-theme="dark"]) .cl__segb { color: #73726c; }
:root:not([data-theme="dark"]) .cl__segb--chat, :root:not([data-theme="dark"]) .cl.is-code .cl__segb--code { background: #f0eee7; color: #141413; }
:root:not([data-theme="dark"]) .cl.is-code .cl__segb--chat { background: none; color: #73726c; }
:root:not([data-theme="dark"]) .cl__win i { border: 1px solid #a8a59b; }
:root:not([data-theme="dark"]) .cl__win i:last-child { border: 0; background: linear-gradient(45deg, transparent 45%, #a8a59b 45% 55%, transparent 55%), linear-gradient(-45deg, transparent 45%, #a8a59b 45% 55%, transparent 55%); }
:root:not([data-theme="dark"]) .cl__side { background: #f3f1ea; }
:root:not([data-theme="dark"]) .cl__new { color: #141413; }
:root:not([data-theme="dark"]) .cl__new i { background: #c6613f; color: #fff; }
:root:not([data-theme="dark"]) .cl__nav { color: #3d3d3a; }
:root:not([data-theme="dark"]) .cl__nav svg { color: #73726c; }
:root:not([data-theme="dark"]) .cl.is-modal .cl__nav[data-t="personalizar"] { background: #e9e7df; color: #141413; }
:root:not([data-theme="dark"]) .cl__lab { color: #8a887f; }
:root:not([data-theme="dark"]) .cl__rec { color: #5e5d59; }
:root:not([data-theme="dark"]) .cl__rec--code { background: #e9e7df; color: #141413; }
:root:not([data-theme="dark"]) .cl__me { border-top: 1px solid #e6e4dc; color: #141413; }
:root:not([data-theme="dark"]) .cl__me i { background: #d4d2c8; color: #1f1e1d; }
:root:not([data-theme="dark"]) .cl__me small { color: #87867f; }
:root:not([data-theme="dark"]) .cl__hi { color: #141413; }
:root:not([data-theme="dark"]) .cl__ast { color: #d97757; fill: currentColor; }
:root:not([data-theme="dark"]) .cl__box { background: #ffffff; border: 1px solid #e3e1d7; box-shadow: 0 calc(var(--u) * 6) calc(var(--u) * 20) rgba(20, 20, 18, 0.08); }
:root:not([data-theme="dark"]) .cl__ph { color: #87867f; }
:root:not([data-theme="dark"]) .cl__typed { color: #141413; }
:root:not([data-theme="dark"]) .cl__plus { border: 1px solid #dcd9cf; color: #3d3d3a; }
:root:not([data-theme="dark"]) .cl__mdl { color: #3d3d3a; }
:root:not([data-theme="dark"]) .cl__mdl em { color: #87867f; }
:root:not([data-theme="dark"]) .cl.is-dd .cl__mdl { background: #f0eee7; }
:root:not([data-theme="dark"]) .cl__send { background: #c6613f; color: #fff; }
:root:not([data-theme="dark"]) .cl__chips span { border: 1px solid #e3e1d7; }
:root:not([data-theme="dark"]) .cl__env span { background: #ffffff; color: #3d3d3a; }
:root:not([data-theme="dark"]) .cl__env svg { color: #73726c; }
:root:not([data-theme="dark"]) .cl__mode { color: #73726c; }
:root:not([data-theme="dark"]) .cl__mode b { color: #141413; }
:root:not([data-theme="dark"]) .cl__conv { border-right: 1px solid #e6e4dc; }
:root:not([data-theme="dark"]) .m { color: #141413; }
:root:not([data-theme="dark"]) .m--u { background: #e9e7df; color: #141413; }
:root:not([data-theme="dark"]) .m__ast { color: #d97757; fill: currentColor; }
:root:not([data-theme="dark"]) .m--tool { color: #73726c; }
:root:not([data-theme="dark"]) .m__spin { border: calc(var(--u) * 2) solid #d97757; }
:root:not([data-theme="dark"]) .cl__allow { background: #ffffff; border: 1px solid rgba(217, 119, 87, 0.55); }
:root:not([data-theme="dark"]) .cl__allow-t { color: #141413; }
:root:not([data-theme="dark"]) .cl__allow code { background: #f3f1ea; color: #3d3d3a; }
:root:not([data-theme="dark"]) .cl__pane { background: #f3f1ea; }
:root:not([data-theme="dark"]) .cl__ptab { border-bottom: 1px solid #e6e4dc; }
:root:not([data-theme="dark"]) .cl__ptab span { color: #73726c; }
:root:not([data-theme="dark"]) .cl__ptab-r { background: #ffffff; color: #141413 !important; }
:root:not([data-theme="dark"]) .cl.is-store .cl__ptab-s { background: #ffffff; color: #141413; }
:root:not([data-theme="dark"]) .cl__shop { background: #fff; }
:root:not([data-theme="dark"]) .cl__modal { background: rgba(20, 20, 18, 0.18); }
:root:not([data-theme="dark"]) .cl__mwin { background: #faf9f5; border: 1px solid #e3e1d7; box-shadow: 0 calc(var(--u) * 30) calc(var(--u) * 70) rgba(20, 20, 18, 0.18); }
:root:not([data-theme="dark"]) .cl__mside { background: #f3f1ea; }
:root:not([data-theme="dark"]) .cl__mlab { color: #87867f; }
:root:not([data-theme="dark"]) .cl__mi { color: #3d3d3a; }
:root:not([data-theme="dark"]) .cl__mi--skills, :root:not([data-theme="dark"]) .cl.tab-con .cl__mi--con { background: #ffffff; color: #141413; }
:root:not([data-theme="dark"]) .cl.tab-con .cl__mi--skills { background: none; color: #3d3d3a; }
:root:not([data-theme="dark"]) .cl__mtitle { color: #141413; }
:root:not([data-theme="dark"]) .cl__btn { background: #141413; color: #faf9f5; }
:root:not([data-theme="dark"]) .cl__btn2 { border: 1px solid #dcd9cf; color: #141413; }
:root:not([data-theme="dark"]) .cl__msub { color: #87867f; }
:root:not([data-theme="dark"]) .cl__li { border-top: 1px solid #e6e4dc; }
:root:not([data-theme="dark"]) .cl__rico { background: #ffffff; color: #141413; }
:root:not([data-theme="dark"]) .cl__rname { color: #141413; }
:root:not([data-theme="dark"]) .cl__rname small { color: #87867f; }
:root:not([data-theme="dark"]) .cl__tgl { background: #d6d3c9; }
:root:not([data-theme="dark"]) .cl__tgl::after { background: #ffffff; }
:root:not([data-theme="dark"]) .cl__rok { color: #2f8a3e; }
:root:not([data-theme="dark"]) .cl__li--new { background: rgba(217, 119, 87, 0.08); }
:root:not([data-theme="dark"]) .cl.is-installed .cl__li--new .cl__rico { background: #c6613f; }
:root:not([data-theme="dark"]) .cl__menu { background: #ffffff; border: 1px solid #dcd9cf; box-shadow: 0 calc(var(--u) * 16) calc(var(--u) * 40) rgba(20, 20, 18, 0.16); }
:root:not([data-theme="dark"]) .cl__mo { color: #141413; }
:root:not([data-theme="dark"]) .cl__search { border: 1px solid #dcd9cf; }
:root:not([data-theme="dark"]) .cl__search svg { color: #87867f; }
:root:not([data-theme="dark"]) .cl__search .cl__typed { color: #141413; }
:root:not([data-theme="dark"]) .cl.is-typing .cl__search { border-color: #a8a59b; }
:root:not([data-theme="dark"]) .cl__glab { color: #87867f; }
:root:not([data-theme="dark"]) .cl__card { border: 1px solid #e3e1d7; background: #ffffff; }
:root:not([data-theme="dark"]) .cl__logo--l { background: var(--c); color: #fff; }
:root:not([data-theme="dark"]) .cl__cname { color: #141413; }
:root:not([data-theme="dark"]) .cl__cdesc { color: #87867f; }
:root:not([data-theme="dark"]) .cl__cplus { border: 1px solid #dcd9cf; color: #141413; }
:root:not([data-theme="dark"]) .cl__cok { color: #2f8a3e; }
:root:not([data-theme="dark"]) .cl.is-connected .cl__card--hit { border-color: rgba(127, 200, 130, 0.45); }
:root:not([data-theme="dark"]) .cl__pop { background: #ffffff; border: 1px solid #dcd9cf; box-shadow: 0 calc(var(--u) * 24) calc(var(--u) * 60) rgba(20, 20, 18, 0.19); }
:root:not([data-theme="dark"]) .cl__pt { color: #141413; }
:root:not([data-theme="dark"]) .cl__pt--dk { color: #1a1a1a; }
:root:not([data-theme="dark"]) .cl__pnote { color: #87867f; }
:root:not([data-theme="dark"]) .cl__pop--auth { background: #fff; border: 0; }
:root:not([data-theme="dark"]) .cl__pbar { background: #ececee; border-bottom: 1px solid #dcdce0; }
:root:not([data-theme="dark"]) .cl__pbar i { background: #c9c9ce; }
:root:not([data-theme="dark"]) .cl__pbar span { color: #555; }
:root:not([data-theme="dark"]) .cl__pop--auth .cl__pt { color: #14213d; }
:root:not([data-theme="dark"]) .cl__fld { border: 1px solid #d4d4d8; color: #555; }
:root:not([data-theme="dark"]) .cl__btn--blue { background: #2463eb; color: #fff; }
:root:not([data-theme="dark"]) .cl__perm { border-top: 1px solid #dcd9cf; color: #141413; }
:root:not([data-theme="dark"]) .cl__perm b { border: 1px solid #dcd9cf; color: #3d3d3a; }
:root:not([data-theme="dark"]) .cl.is-perm-ok .cl__perm b { background: #e3e1d7; color: #141413; border-color: #a8a59b; }
:root:not([data-theme="dark"]) .cl__drop { border: 1.5px dashed #a8a59b; color: #3d3d3a; }
:root:not([data-theme="dark"]) .cl.is-over .cl__drop { border-color: #d97757; background: rgba(217, 119, 87, 0.1); }
:root:not([data-theme="dark"]) .cl__zip { background: #141413; color: #faf9f5; box-shadow: 0 calc(var(--u) * 10) calc(var(--u) * 24) rgba(20, 20, 18, 0.14); }
:root:not([data-theme="dark"]) .cl__zip i { background: #d97757; color: #fff; }
:root:not([data-theme="dark"]) .cl__dd { background: #ffffff; border: 1px solid #dcd9cf; box-shadow: 0 calc(var(--u) * 20) calc(var(--u) * 50) rgba(20, 20, 18, 0.18); }
:root:not([data-theme="dark"]) .cl__ddk { color: #87867f; }
:root:not([data-theme="dark"]) .cl__ddo { color: #141413; }
:root:not([data-theme="dark"]) .cl__ddo small { color: #87867f; }
:root:not([data-theme="dark"]) .cl__ddo i { color: #d97757; }
:root:not([data-theme="dark"]) .cl.is-opus .cl__ddo[data-t="opus"] { background: #f0eee7; }
:root:not([data-theme="dark"]) .cl__effs span { border: 1px solid #dcd9cf; color: #3d3d3a; }
:root:not([data-theme="dark"]) .cl__eff-a, :root:not([data-theme="dark"]) .cl.is-medio .cl__eff-m { background: #e3e1d7; color: #141413 !important; border-color: #a8a59b !important; }
:root:not([data-theme="dark"]) .cl.is-medio .cl__eff-a { background: none; color: #3d3d3a !important; border-color: #dcd9cf !important; }
:root:not([data-theme="dark"]) .cl__tgl::after { background: #ffffff; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25); }
:root:not([data-theme="dark"]) .mk--claude { box-shadow: var(--shadow-lg); }
:root:not([data-theme="dark"]) .cl__box { box-shadow: 0 2px 10px rgba(20, 20, 18, 0.06); }
:root:not([data-theme="dark"]) .cl__card { box-shadow: 0 1px 2px rgba(20, 20, 18, 0.04); }
/* ==== fin de Claude en su tema claro ==== */