/* ZenFit — componentes calcados de design/*.dc.html. Sin animaciones acá (ver motion.css). */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
html, body { margin: 0; min-height: 100%; }
body { background: var(--bg-desktop); color: var(--text); font-family: var(--font-body); font-size: 15px; line-height: 1.5; -webkit-font-smoothing: antialiased; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; }
img { display: block; max-width: 100%; }
a { color: var(--text-muted); }
:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

.page { min-height: 100dvh; display: flex; justify-content: center; }
.app { position: relative; width: 100%; max-width: var(--app-max); min-height: 100dvh; background: var(--bg); overflow: hidden; }
@media (min-width: 768px) { .app { box-shadow: 0 0 80px rgba(38, 53, 35, 0.12); } }

.screen { position: absolute; inset: 0; display: flex; flex-direction: column; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding-bottom: env(safe-area-inset-bottom); }
/* padding-bottom 90px: deja lugar al sticky CTA de la venta para que el pie legal no quede tapado. */
.screen.scrollable { position: relative; inset: auto; min-height: 100dvh; padding-bottom: 90px; }

/* Header */
/* Con box-sizing:border-box (global), height:72px + padding-top:env(safe-area-inset-top) hace que el padding
   coma el alto en vez de sumarse: con un notch/Dynamic Island de ~47px el contenido quedaba en 25px y el botón
   atrás (44px) se recortaba arriba y abajo del header. min-height deja que el header crezca con el inset real. */
.hdr { flex: none; display: flex; align-items: center; justify-content: space-between; min-height: 72px; padding: 0 16px; padding-top: env(safe-area-inset-top); }
.hdr .back { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 22px; border: 1px solid var(--border); background: var(--card); color: var(--text-strong); }
.hdr .back[hidden] { display: grid; visibility: hidden; }
.hdr .mid { display: flex; flex-direction: column; align-items: center; gap: 8px; width: 200px; }
.hdr .sec { font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); }
.progress { width: 200px; height: 4px; border-radius: 2px; background: var(--track); overflow: hidden; }
.progress > span { display: block; height: 100%; width: 0; border-radius: 2px; background: var(--primary); }
.hdr .count { width: 44px; text-align: right; font-size: 12px; font-weight: 500; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.hdr .logo { height: 34.5px; width: auto; } /* +15% sobre 30px, pedido explícito */
.hdr .spacer { width: 44px; height: 44px; }

/* Texto */
.title { margin: 0; padding: 18px 28px 0; text-align: center; font-family: var(--font-display); font-weight: 400; font-size: 26px; line-height: 1.18; color: var(--text-strong); text-wrap: balance; }
.title.sm { font-size: 24px; }
.title .accent { color: var(--primary); }
.sub { margin: 8px 28px 0; text-align: center; font-size: 14px; line-height: 1.5; color: var(--text-muted); text-wrap: pretty; }
.para { margin: 12px 28px 0; text-align: center; font-size: 15px; line-height: 1.55; color: var(--text); text-wrap: pretty; }
.para.muted { font-size: 13px; color: var(--text-muted); }
.h2 { margin: 22px 28px 0; text-align: center; font-family: var(--font-display); font-weight: 400; font-size: 22px; line-height: 1.2; color: var(--text-strong); text-wrap: balance; }
.big-accent { margin: 6px 0 0; text-align: center; font-family: var(--font-display); font-size: 30px; line-height: 1.1; color: var(--primary); text-wrap: balance; }
/* Privacidad / seguridad en azul grisáceo: se distingue de la promesa (verde) y de la urgencia (terracota). */
.note { display: flex; gap: 10px; align-items: flex-start; margin: 16px var(--pad-x) 0; padding: 12px 14px; border-radius: 12px; background: var(--info-bg); border: 1px solid var(--info-border); font-size: 12px; line-height: 1.5; color: var(--info); }
.note svg { flex: none; margin-top: 1px; }
/* Preguntas alineadas a la izquierda; interstitials, resultados y venta siguen centrados (ritmo entre plantillas). */
.screen.ask .title, .screen.ask .sub, .screen.ask .h2 { text-align: left; padding-left: var(--pad-x); padding-right: var(--pad-x); margin-left: 0; margin-right: 0; }
.screen.ask .title { padding-top: 22px; }
/* Checkpoint corto (título + foto + CTA): el contenido se centra entre el header y el botón, así una foto
   apaisada (ahora completa, no recortada) no deja un hueco raro arriba del CTA. */
.screen.centered .hdr { margin-bottom: auto; }
.screen.centered .cta-wrap { margin-top: auto; }
.pill-note { display: flex; justify-content: center; align-items: center; gap: 8px; margin: 14px var(--pad-x) 0; padding: 10px 14px; border-radius: 12px; background: var(--surface2); border: 1px solid var(--border); font-size: 13px; font-weight: 600; color: var(--primary); }
/* Urgencia en rojo (Shari 17/09: "donde dice 'quedan solo 6 cupos' que sea rojo"): cupos, cierre de grupo, timer. */
.pill-note.urgent { color: var(--text-strong); background: var(--danger-bg); border-color: var(--danger-border); }
.pill-note.urgent svg, .pill-note.urgent b { color: var(--danger-text); }
.pill-note.urgent b { font-size: 16px; font-weight: 700; }
.timer-block { display: flex; justify-content: center; align-items: center; gap: 8px; margin: 12px var(--pad-x) 0; padding: 12px 14px; border-radius: 12px; background: var(--danger-bg); border: 1px solid var(--danger-border); color: var(--text-strong); font-size: 14px; font-weight: 600; }
.timer-block b { font-size: 20px; font-weight: 700; color: var(--danger-text); font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.timer-block .t-ico { font-size: 16px; line-height: 1; }
.legal { padding: 14px 24px 22px; text-align: center; font-size: 11px; line-height: 1.6; color: var(--text-muted); }
.legal a { color: inherit; display: inline-block; padding: 14px 4px; margin: -14px 0; } /* área táctil ≥44px sin alterar el texto visible */

/* Hero */
/* REGLA DURA (Shari, 17/09/2026): la foto se ve COMPLETA. Nada de `object-fit: cover` con alto fijo: con fotos
   cuadradas de ejercicios (12, 13, 14) el recorte se llevaba manos y pies. La imagen toma su proporción real
   (router.js le pone `aspect-ratio` = naturalWidth / naturalHeight apenas carga; 4/3 mientras tanto) y si
   supera el tope de alto se ve entera con bandas (`contain`), nunca recortada. `.tall` quedó sin efecto. */
.hero { position: relative; flex: none; margin: 14px var(--pad-x) 0; border-radius: var(--radius-card); overflow: hidden; background: var(--surface2); }
.hero img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; max-height: 560px; object-fit: contain; object-position: center; }
.hero.contain { background: var(--bg); }
.hero.contain img { max-height: 320px; mix-blend-mode: multiply; }

/* Opciones */
.opts { display: flex; flex-direction: column; gap: 10px; padding: 18px var(--pad-x) 0; }
.opt { display: flex; align-items: center; gap: 14px; width: 100%; min-height: 60px; padding: 8px 12px 8px 18px; border-radius: var(--radius-card); background: var(--card); border: 1px solid var(--border); box-shadow: var(--shadow); text-align: left; color: var(--text); }
.opt.has-icon { padding-left: 12px; }
.opt.has-thumb { padding-left: 8px; }
.opt .thumb { flex: none; width: 52px; height: 52px; border-radius: 12px; overflow: hidden; background: var(--surface2); }
.opt .thumb img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.opt .ico { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--surface2); color: var(--primary); }
/* Emoji que acompaña el mensaje (Shari 17/09): mismo slot que el icono SVG, así la lista queda alineada. */
.opt .emoji { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--surface2); font-size: 22px; line-height: 1; }
.opt .lbl { flex: 1; font-size: 15px; font-weight: 500; line-height: 1.35; }
/* Chevron discreto (no el círculo verde repetido en cada respuesta): el verde queda para la selección y el CTA.
   Al elegir, el chevron se vuelve el círculo verde: la selección positiva sí es verde. */
.opt .arrow { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 16px; background: transparent; color: var(--border); }
.opt[aria-checked="true"] .arrow { background: var(--primary); color: var(--on-primary); }
.opt .check { flex: none; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 7px; border: 1.5px solid var(--border); background: var(--card); color: var(--on-primary); }
.opt[aria-checked="true"] { background: var(--selected); border-color: var(--primary); }
.opt[aria-checked="true"] .check { background: var(--primary); border-color: var(--primary); }

/* Cards con imagen */
.cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; padding: 18px var(--pad-x) 0; }
.cards.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.card { display: flex; flex-direction: column; border-radius: var(--radius-card); overflow: hidden; background: var(--card); border: 1px solid var(--border); box-shadow: var(--shadow); text-align: left; }
/* Cards con foto (tipo de cuerpo): misma regla dura, la foto entera. Todas las fotos de una grilla comparten
   proporción (3:4 en ZenFit), así las cards quedan parejas; router.js ajusta el aspect-ratio real al cargar. */
.card img { display: block; width: 100%; height: auto; aspect-ratio: 6 / 5; object-fit: contain; background: var(--surface2); }
.card .lbl-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 48px; padding: 6px 8px 6px 14px; }
.cols-3 .card .lbl-row { padding-left: 10px; }
.card .lbl { font-size: 14px; font-weight: 600; line-height: 1.3; }
.cols-3 .card .lbl { font-size: 13px; }
.card .arrow { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 15px; background: transparent; color: var(--border); }
.card[aria-checked="true"] .arrow { background: var(--primary); color: var(--on-primary); }
.card[aria-checked="true"] { border-color: var(--primary); background: var(--selected); }

/* CTA */
.cta-wrap { margin-top: auto; flex: none; padding: 16px var(--pad-x) 24px; display: flex; flex-direction: column; gap: 10px; }
.btn { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; height: 56px; border-radius: var(--radius-button); background: var(--primary); color: var(--on-primary); font-size: 15px; font-weight: 600; letter-spacing: .02em; box-shadow: var(--shadow-primary); }
.btn[disabled] { opacity: .45; box-shadow: none; cursor: default; }
.btn.secondary { height: 48px; background: transparent; color: var(--text); border: 1.5px solid var(--border); box-shadow: none; }
.btn-note { margin: 0; text-align: center; font-size: 11px; color: var(--text-muted); }

/* Listas con tick */
.bullets { display: flex; flex-direction: column; gap: 10px; margin: 16px var(--pad-x) 0; }
.bullet { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border-radius: 12px; background: var(--card); border: 1px solid var(--border); font-size: 14px; line-height: 1.5; }
.bullet .dot { flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 13px; background: var(--selected); color: var(--primary); }
.bullet .num { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 14px; background: var(--primary); color: var(--on-primary); font-size: 13px; font-weight: 700; }
.bullet strong { color: var(--text-strong); }

/* Measures (slider) */
/* Fecha de evento (step "evento"): campo grande y táctil; el input nativo abre el selector del sistema. */
.date-field { display: flex; align-items: center; gap: 14px; margin: 22px var(--pad-x) 0; padding: 12px 14px; border-radius: var(--radius-card); background: var(--card); border: 1px solid var(--border); box-shadow: var(--shadow); }
.date-field .emoji { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--surface2); font-size: 22px; line-height: 1; }
.date-field label { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.date-field .date-lbl { font-size: 11px; letter-spacing: .04em; text-transform: uppercase; color: var(--text-muted); }
.date-field input[type=date] { width: 100%; min-height: 44px; border: 0; padding: 0; background: transparent; font: inherit; font-size: 20px; font-weight: 600; color: var(--text-strong); -webkit-appearance: none; appearance: none; }
.date-field input[type=date]::-webkit-date-and-time-value { text-align: left; }
.date-hint { margin: 12px var(--pad-x) 0; min-height: 20px; font-size: 14px; font-weight: 600; color: var(--primary); }
.units { display: flex; justify-content: center; gap: 8px; margin: 18px 0 0; }
/* 44px de alto (no 36): eran, junto con el slider, los únicos controles de estas pantallas y quedaban por
   debajo del mínimo táctil de 44px recomendado. */
.unit { display: flex; align-items: center; justify-content: center; height: 44px; padding: 0 18px; border-radius: 22px; border: 1px solid var(--border); background: var(--card); color: var(--text); font-size: 13px; font-weight: 600; }
.unit[aria-pressed="true"] { background: var(--primary); color: var(--on-primary); border-color: var(--primary); }
.measure { display: flex; align-items: baseline; justify-content: center; gap: 6px; margin: 22px 0 0; }
.measure .val { font-family: var(--font-display); font-size: 64px; line-height: 1; color: var(--text-strong); font-variant-numeric: tabular-nums; }
.measure .u { font-size: 16px; color: var(--text-muted); }
.slider { position: relative; margin: 26px 32px 0; height: 44px; }
.slider input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; z-index: 2; }
.slider .track { position: absolute; left: 0; right: 0; top: 20px; height: 4px; border-radius: 2px; background: var(--track); }
.slider .fill { position: absolute; left: 0; top: 20px; height: 4px; border-radius: 2px; background: var(--primary); width: 50%; }
.slider .thumb { position: absolute; top: 8px; width: 28px; height: 28px; margin-left: -14px; border-radius: 14px; background: var(--card); border: 2px solid var(--primary); box-shadow: var(--shadow-primary); left: 50%; }
.slider-hint { margin: 6px 0 0; text-align: center; font-size: 12px; color: var(--text-muted); }
.calc { display: flex; justify-content: center; align-items: center; gap: 8px; margin: 22px var(--pad-x) 0; font-size: 13px; font-weight: 600; color: var(--primary); }

/* Loader */
.ring-wrap { display: flex; flex-direction: column; align-items: center; margin: 26px var(--pad-x) 0; }
/* Galería del loader: 4-5 antes/después que se van pasando con crossfade (Shari 18/09). Todas completas (contain)
   en una caja cuadrada; las de distinta proporción quedan con bandas del color de superficie, nunca recortadas. */
.loader-gallery { position: relative; flex: none; margin: 14px var(--pad-x) 0; aspect-ratio: 1 / 1; max-height: 360px; border-radius: var(--radius-card); overflow: hidden; background: var(--surface2); }
.loader-gallery img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: 0; transition: opacity 500ms var(--ease); }
.loader-gallery img.on { opacity: 1; }
.ring { position: relative; width: 132px; height: 132px; }
.ring svg { position: absolute; inset: 0; transform: rotate(-90deg); }
.ring .pct { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--font-display); font-size: 30px; color: var(--text-strong); font-variant-numeric: tabular-nums; }

/* Resultados */
.panel { margin: 18px var(--pad-x) 0; padding: 16px; border-radius: var(--radius-card); background: var(--card); border: 1px solid var(--border); }
.panel .eyebrow { font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); }
.gauge { position: relative; margin-top: 10px; }
.gauge .bar { display: flex; height: 10px; border-radius: 5px; overflow: hidden; }
.gauge .bar span { flex: 1; }
/* left:0 fijo + transform:translateX(Npx) calculado en JS (no left:X% animado): `left` es una propiedad de
   layout que fuerza reflow en cada frame de los 700ms; motion.md pide transform/opacity únicamente. */
.gauge .marker { position: absolute; top: -2px; left: 0; width: 14px; height: 14px; margin-left: -7px; border-radius: 7px; background: var(--card); border: 3px solid var(--text-strong); }
.gauge .labels { display: flex; justify-content: space-between; margin-top: 10px; font-size: 10px; letter-spacing: .04em; text-transform: uppercase; color: var(--text-muted); }
.chip { display: inline-block; padding: 4px 12px; border-radius: 12px; background: var(--selected); font-size: 13px; font-weight: 600; color: var(--primary); }
/* El chip de IMC toma el color de su categoría (normal verde, sobrepeso ocre, obesidad rojo): un acento de color con sentido, no decorativo. */
.chip.warn { background: var(--bonus-soft); color: var(--bonus-accent); }
.chip.danger { background: var(--danger-bg); color: var(--danger-text); }
.alert { display: flex; gap: 10px; margin: 12px var(--pad-x) 0; padding: 12px 14px; border-radius: 12px; background: var(--warning-bg); border: 1px solid var(--warning); color: var(--text); font-size: 12px; line-height: 1.5; }
.alert svg { flex: none; color: var(--warning); }
.alert strong { color: var(--text-strong); }
/* flex:none: con overflow:hidden un hijo flex pierde su min-height:auto y se encoge para que el CTA entre en
   pantalla — en 375×667 (iPhone SE) la cuarta métrica quedaba escondida debajo del botón. */
.metrics { flex: none; margin: 14px var(--pad-x) 0; border-radius: var(--radius-card); background: var(--card); border: 1px solid var(--border); overflow: hidden; }
.metric { display: flex; align-items: center; gap: 12px; padding: 12px 14px; }
.metric + .metric { border-top: 1px solid var(--border); }
.metric .ico { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--surface2); color: var(--primary); }
/* Un tinte distinto por métrica (Shari 17/09: "que no sea todo verde"): energía, testosterona, fibras, potencial. */
.metric:nth-child(1) .ico { background: var(--bonus-soft); color: var(--bonus-accent); }
.metric:nth-child(2) .ico { background: var(--danger-bg); color: var(--danger-text); }
.metric:nth-child(3) .ico { background: var(--selected); color: var(--primary-mid); }
.metric:nth-child(4) .ico { background: var(--primary); color: var(--on-primary); }
.metric .k { font-size: 11px; letter-spacing: .04em; text-transform: uppercase; color: var(--text-muted); }
.metric .v { font-size: 15px; font-weight: 600; color: var(--text-strong); }
.chart-panel { margin: 18px var(--pad-x) 0; padding: 16px 14px 10px; border-radius: var(--radius-card); background: var(--card); border: 1px solid var(--border); }
.chart-panel svg { width: 100%; height: auto; display: block; }
/* Plan preview (step 36, bloque calculado del original): comparativo Ahora / Tu objetivo con barras de nivel. */
.plan-card { margin: 14px var(--pad-x) 0; padding: 14px; border-radius: var(--radius-card); background: var(--card); border: 1px solid var(--border); box-shadow: var(--shadow); }
.plan-head { display: grid; grid-template-columns: 1fr 1fr; font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 8px; }
.plan-head span:last-child { color: var(--primary); }
.plan-card .hero { margin: 0 0 12px; }
.plan-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.plan-col .k { font-size: 11px; letter-spacing: .04em; text-transform: uppercase; color: var(--text-muted); margin-top: 8px; }
.plan-col .v { font-size: 15px; font-weight: 600; color: var(--text-strong); }
.plan-col .v.big { font-size: 22px; font-family: var(--font-display); font-weight: 400; }
.plan-col.goal .v.big, .plan-col.goal .v { color: var(--primary); }
.lvl-bars { display: flex; gap: 4px; margin-top: 8px; }
.lvl-bars span { flex: 1; height: 5px; border-radius: 3px; background: var(--track); }
.lvl-bars span.on { background: var(--primary); }
.plan-col.goal .lvl-bars span.on { background: var(--primary); }
.callout-ico { display: flex; gap: 10px; align-items: flex-start; margin: 12px var(--pad-x) 0; padding: 12px 14px; border-radius: 12px; background: var(--selected); border: 1px solid var(--primary-soft); color: var(--text); font-size: 14px; line-height: 1.5; }
.callout-ico.soft { background: var(--surface2); border-color: var(--border); }
.callout-ico svg { flex: none; margin-top: 2px; color: var(--primary); }
.callout-ico p { margin: 0; }
.callout { margin: 14px var(--pad-x) 0; padding: 12px 14px; border-radius: 12px; background: var(--selected); font-size: 13px; line-height: 1.5; color: var(--text-strong); text-align: center; }
.weeks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; padding: 16px var(--pad-x) 0; }
.week { border-radius: var(--radius-card); overflow: hidden; background: var(--card); border: 1px solid var(--border); }
.week img { width: 100%; height: 120px; object-fit: cover; }
.week .wk { padding: 10px 12px 12px; }
.week .wk b { display: block; font-size: 11px; font-weight: 700; letter-spacing: .08em; color: var(--primary); }
.week .wk p { margin: 4px 0 0; font-size: 12px; line-height: 1.45; }

/* Skeleton de arranque */
.sk { background: var(--surface2); border-radius: 12px; }
.sk-logo { width: 90px; height: 30px; }
.sk-spacer { width: 44px; }
.sk-title { height: 30px; margin: 22px 48px 0; }
.sk-hero { height: 240px; margin: 14px var(--pad-x) 0; border-radius: var(--radius-card); }
.sk-opt { height: 60px; margin: 10px var(--pad-x) 0; border-radius: var(--radius-card); }
.skeleton .sk-opt:first-of-type { margin-top: 18px; }

/* Utilidades */
.hidden { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.tabular { font-variant-numeric: tabular-nums; }

/* ===== Página de venta ===== */
.pw-h2 { margin: 30px 28px 0; text-align: center; font-family: var(--font-display); font-weight: 400; font-size: 24px; line-height: 1.2; color: var(--text-strong); text-wrap: balance; }
.pw-cta { margin: 18px var(--pad-x) 0; display: flex; flex-direction: column; gap: 8px; }
.pw-cta .btn { height: 58px; text-decoration: none; }
/* aspect-ratio (no height fija): a 420px fijos, un viewport bajo (ej. con la barra del navegador visible)
   quedaba con el video ocupando más de la mitad de la pantalla sin importar el ancho real disponible.
   4/5 replica la proporción ~388×420 del diseño aprobado pero escala con el viewport. */
.vsl { position: relative; margin: 16px var(--pad-x) 0; aspect-ratio: 4/5; max-height: 420px; border-radius: var(--radius-card); overflow: hidden; background: var(--text-strong); display: grid; place-items: center; }
.vsl::before { content: ""; position: absolute; inset: 0; background: radial-gradient(closest-side at 50% 45%, rgba(113, 130, 103, .35), rgba(38, 53, 35, 0)); }
.vsl iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
/* "Tocá para escuchar" (Shari 23/09): cubre el video que arranca en silencio; al tocar se reemplaza por el video con sonido. */
.vsl-tap { position: absolute; inset: 0; z-index: 2; display: grid; place-items: center; border: 0; padding: 0; cursor: pointer; background: linear-gradient(to top, rgba(32, 37, 31, .55), rgba(32, 37, 31, .12)); font: inherit; }
/* Proporción de la caja según CONFIG.video.aspect (data-aspect; no inline style: rv() ya usa el atributo style). */
.vsl[data-aspect="9/16"] { aspect-ratio: 9 / 16; max-height: none; }
.vsl[data-aspect="16/9"] { aspect-ratio: 16 / 9; max-height: none; }
.vsl-tap span { display: inline-flex; align-items: center; gap: 10px; padding: 14px 22px; border-radius: 999px; background: var(--primary); color: #FFFEFA; font-weight: 600; font-size: 16px; box-shadow: var(--shadow-primary); }
.vsl-tap svg { color: #FFFEFA; }
.vsl-tap:active span { transform: scale(.97); }
/* Contenido posterior al video hasta el destape: fuera del layout, no solo transparente (la página no scrollea en blanco). */
.pitch-delayed[hidden] { display: none; }
.scarcity { margin: 0; }
.scarcity .pill-note b { font-variant-numeric: tabular-nums; }
.bullet.feature { margin: 0 var(--pad-x); font-size: 13px; }
.bullet.feature + .bullet.feature { margin-top: 10px; }
.pw-h2 + .bullet.feature { margin-top: 16px; }
.offer-card { margin: 18px var(--pad-x) 0; padding: 22px 20px; border-radius: var(--radius-card); background: var(--card); border: 1.5px solid var(--primary); box-shadow: var(--shadow-primary); text-align: center; }
.offer-eyebrow { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--primary); }
.offer-anchor { margin-top: 12px; font-size: 15px; color: var(--text-muted); }
.offer-price { display: flex; align-items: baseline; justify-content: center; gap: 6px; margin-top: 4px; }
.offer-price .por { font-size: 14px; color: var(--text-muted); }
.offer-price .amount { font-family: var(--font-display); font-size: 44px; line-height: 1; color: var(--text-strong); }
.offer-sub { margin-top: 10px; font-size: 13px; }
/* align-items:flex-start (no center) + texto centrado en su propio span: con el texto largo envuelto en 2
   líneas y el ícono centrado contra todo el bloque, el candado quedaba flotando a la izquierda, separado del
   texto. Con flex-start el candado se ancla arriba, a la altura de la primera línea. */
.offer-badge { display: flex; justify-content: center; align-items: flex-start; gap: 6px; margin-top: 8px; font-size: 12px; color: var(--text-muted); }
.offer-badge svg { flex: none; margin-top: 2px; }
.offer-badge span { text-align: center; }
.stars { display: flex; justify-content: center; gap: 2px; margin: 30px 0 0; color: var(--warning); }
.stars + .pw-h2 { margin-top: 8px; }
.testis { display: flex; flex-direction: column; gap: 14px; margin: 16px var(--pad-x) 0; }
.testi { border-radius: var(--radius-card); overflow: hidden; background: var(--card); border: 1px solid var(--border); }
/* Foto completa también en los testimonios (misma regla que .hero): proporción real, sin recorte. */
.testi img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; max-height: 420px; object-fit: contain; background: var(--surface2); }
.testi-body { padding: 12px 14px 14px; }
.testi-t { font-size: 14px; font-weight: 700; color: var(--primary); }
.testi-body p { margin: 6px 0 0; font-size: 13px; line-height: 1.5; }
.bonus-block { margin: 16px 12px 0; padding: 18px 10px 12px; border-radius: 20px; background: var(--bonus-bg); border: 1px solid var(--bonus-border); }
.bonus-tag { display: flex; justify-content: center; align-items: center; gap: 8px; width: max-content; margin: 0 auto 12px; padding: 6px 14px; border-radius: 14px; background: var(--bonus-soft); border: 1px solid var(--bonus-border); font-size: 11px; font-weight: 700; letter-spacing: .1em; color: var(--bonus-accent); }
.bonus-list { display: flex; flex-direction: column; gap: 10px; }
.bonus { display: flex; gap: 12px; padding: 14px; border-radius: var(--radius-card); background: var(--card); border: 1px solid var(--bonus-border); }
.bonus-ico { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--bonus-soft); color: var(--bonus-accent); }
.bonus-body { flex: 1; min-width: 0; }
.bonus-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.bonus-n { font-size: 11px; font-weight: 700; letter-spacing: .06em; color: var(--bonus-accent); }
.bonus-val { display: inline-flex; align-items: baseline; gap: 6px; white-space: nowrap; }
.bonus-val s { font-size: 11px; color: var(--text-muted); }
.bonus-val b { font-size: 13px; color: var(--primary); }
.bonus-title { margin-top: 2px; font-size: 14px; font-weight: 600; color: var(--text-strong); }
.bonus p { margin: 4px 0 0; font-size: 12px; line-height: 1.5; color: var(--text-muted); }
.bonus-foot { margin: 12px 6px 0; text-align: center; font-size: 12px; line-height: 1.5; color: var(--text); } /* --text (no muted): muted sobre arena da 4.2:1, bajo para 12px */
.guarantee { display: flex; flex-direction: column; align-items: center; margin: 30px var(--pad-x) 0; padding: 22px 18px; border-radius: var(--radius-card); background: var(--surface2); border: 1px solid var(--border); text-align: center; }
.guarantee .seal { display: block; width: 124px; height: 124px; border-radius: 62px; overflow: hidden; }
.guarantee .seal img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.12); }
.guarantee h3 { margin: 12px 0 0; font-family: var(--font-display); font-weight: 400; font-size: 20px; line-height: 1.2; color: var(--text-strong); text-wrap: balance; }
.guarantee p { margin: 8px 0 0; font-size: 13px; line-height: 1.5; }
.faq { margin: 16px var(--pad-x) 0; border-radius: var(--radius-card); background: var(--card); border: 1px solid var(--border); overflow: hidden; }
.faq-item + .faq-item { border-top: 1px solid var(--border); }
.faq-q { display: flex; justify-content: space-between; align-items: center; gap: 10px; width: 100%; padding: 14px; text-align: left; font-size: 14px; font-weight: 600; color: var(--text-strong); }
.faq-q .chev { display: grid; place-items: center; color: var(--text-muted); }
.faq-a p { margin: 0; padding: 0 14px 14px; font-size: 13px; line-height: 1.5; color: var(--text-muted); }
.pay-logos { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; margin: 22px var(--pad-x) 0; }
.pay-logos span { padding: 6px 10px; border-radius: 8px; border: 1px solid var(--border); background: var(--card); font-size: 10px; font-weight: 700; letter-spacing: .04em; color: var(--text-muted); }
.sticky-cta .btn { height: 54px; text-decoration: none; flex-wrap: nowrap; }
/* Badge del timer en rojo también en la barra fija (Shari 17/09). */
.sticky-timer { flex: none; padding: 4px 10px; border-radius: 10px; background: var(--danger); color: var(--on-primary); font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.sticky-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }