/* Página de asesorías. Base visual: la plantilla de #historia (azul petróleo, crema, Outfit).
   Orden: portada de cine → antes y ahora → cuerpo 3D que se construye solo → nutrición → casos → contacto.
   También da estilo a /asesorias/politica/. Solo tokens de /ds/asesorias-tokens.css. */

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; min-width: 320px; background: var(--as-walnut); color: var(--as-cream); font-family: var(--as-font-body); -webkit-font-smoothing: antialiased; }
::selection { background: var(--as-cream); color: var(--as-walnut); }
a { color: inherit; }
button { font: inherit; }
img, video { display: block; max-width: 100%; }
:focus-visible { outline: var(--as-focus); outline-offset: 4px; }
section[id] { scroll-margin-top: var(--as-header-height); }
section.story { scroll-margin-top: 0; }
.saltar { position: absolute; z-index: 100; left: var(--as-gutter); top: -100px; padding: var(--as-space-2) var(--as-space-3); background: var(--as-cream); color: var(--as-walnut); }
.saltar:focus { top: var(--as-space-2); }

/* ---------- Botones ---------- */
.boton { display: inline-flex; flex: none; align-items: center; justify-content: space-between; gap: var(--as-space-5); min-height: 48px; padding: var(--as-space-2) var(--as-space-4); border: 1px solid var(--as-transparent); border-radius: var(--as-radius-pill); font-size: var(--as-small); font-weight: 700; text-decoration: none; cursor: pointer; transition: transform var(--as-press) var(--as-ease-out), background-color var(--as-fast) var(--as-ease-standard), color var(--as-fast) var(--as-ease-standard), border-color var(--as-fast) var(--as-ease-standard); }
.boton:active { transform: scale(.97); }
.boton-claro { background: var(--as-cream); color: var(--as-walnut); }
.boton-linea { border-color: var(--as-line-strong); background: var(--as-transparent); color: var(--as-cream); }

/* ---------- Cabecera ---------- */
.cabecera { position: fixed; z-index: 20; top: 0; left: 0; display: flex; align-items: center; justify-content: space-between; gap: var(--as-space-4); width: 100%; min-height: var(--as-header-height); padding: var(--as-space-3) var(--as-gutter); border-bottom: var(--as-header-border); background: var(--as-header-bg); backdrop-filter: blur(12px); color: var(--as-cream); transition: background-color var(--as-medium) var(--as-ease-standard); }
.cabecera[data-estado="desplazada"] { background: var(--as-header-bg-scrolled); }
.marca { position: relative; display: block; flex: none; width: 166px; height: 59px; text-decoration: none; transition: opacity var(--as-medium) var(--as-ease-out), visibility var(--as-medium); }
.marca img { width: 100%; height: auto; filter: var(--as-logo-glow); }
/* Arriba del todo el logo grande de la portada hace de marca; el pequeño entra al bajar. */
.cabecera[data-estado="arriba"] .marca { opacity: 0; visibility: hidden; }
.cabecera nav { display: flex; gap: var(--as-space-5); }
.cabecera nav a, .cabecera-cita { font-size: var(--as-small); text-decoration: none; }
.cabecera nav a { padding: var(--as-space-2) 0; border-bottom: 1px solid var(--as-transparent); transition: border-color var(--as-fast) var(--as-ease-standard); }
.cabecera-cita { display: inline-flex; flex: none; gap: var(--as-space-4); align-items: center; min-height: 44px; padding: var(--as-space-2) var(--as-space-4); border: var(--as-call-border); border-radius: var(--as-radius-pill); transition: background-color var(--as-fast) var(--as-ease-standard), color var(--as-fast) var(--as-ease-standard), transform var(--as-press) var(--as-ease-out); }
.cabecera-cita:active { transform: scale(.97); }

/* ---------- Portada de cine ---------- */
.hero { position: relative; display: flex; align-items: end; isolation: isolate; min-height: 100svh; overflow: hidden; background: var(--as-walnut) url('/asesorias/assets/hero-poster-wide.webp') center / cover no-repeat; }
.hero-film { position: absolute; z-index: -4; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: center; animation: hero-aparecer var(--as-intro) var(--as-ease-out) both; }
.hero-film-portrait { display: none; }
.hero-shade { position: absolute; z-index: -3; inset: 0; background: linear-gradient(90deg, var(--as-hero-shade), var(--as-hero-shade-soft) 72%, var(--as-transparent)), linear-gradient(0deg, var(--as-hero-shade), var(--as-transparent) 46%); }
.hero-vineta { position: absolute; z-index: -2; inset: 0; background: var(--as-vignette); pointer-events: none; }
/* Grano de película: textura fija que salta de sitio (steps), como el negativo. */
.hero-grano { position: absolute; z-index: -1; inset: 0; overflow: hidden; opacity: var(--as-grain-opacity); pointer-events: none; }
.hero-grano::before { content: ''; position: absolute; inset: -40%; background-image: var(--as-grain); animation: hero-grano 1s steps(6) infinite; }
/* Bandas de cine: entran altas y se recogen, como un telón. */
.hero-banda { position: absolute; z-index: 3; left: 0; width: 100%; height: var(--as-band); background: var(--as-letterbox); pointer-events: none; animation: hero-banda var(--as-intro) var(--as-ease-move) both; }
.hero-banda-arriba { top: 0; transform-origin: top; }
.hero-banda-abajo { bottom: 0; transform-origin: bottom; }
@keyframes hero-banda { from { transform: scaleY(9); } to { transform: scaleY(1); } }
@keyframes hero-aparecer { from { opacity: 0; } to { opacity: 1; } }
@keyframes hero-grano { 0% { transform: translate(0, 0); } 20% { transform: translate(-6%, 4%); } 40% { transform: translate(5%, -7%); } 60% { transform: translate(-3%, 8%); } 80% { transform: translate(7%, 2%); } 100% { transform: translate(0, 0); } }

.hero-content { position: relative; z-index: 2; width: 100%; padding: var(--as-space-9) var(--as-gutter) calc(var(--as-space-7) + var(--as-band)); }

/* Logo integrado: la capa azul entra con un barrido, la blanca aparece encima y luego pasa un brillo. */
.hero-logo { position: relative; width: clamp(200px, 24vw, 380px); aspect-ratio: 1400 / 495; margin: 0 0 var(--as-space-5); filter: var(--as-logo-glow-strong); }
.logo-capa { position: absolute; inset: 0; width: 100%; height: 100%; }
.logo-capa-azul { animation: logo-barrido var(--as-intro) var(--as-ease-move) both; }
.logo-capa-blanca { animation: logo-entra var(--as-slow) var(--as-ease-out) both; animation-delay: var(--as-medium); }
.logo-brillo { position: absolute; inset: 0; overflow: hidden; -webkit-mask: url('/asesorias/assets/marca/logo-capa-blanca.webp') center / 100% 100% no-repeat; mask: url('/asesorias/assets/marca/logo-capa-blanca.webp') center / 100% 100% no-repeat; pointer-events: none; }
.logo-brillo::before { content: ""; position: absolute; inset: 0; background: var(--as-sheen); transform: translateX(-110%); animation: logo-brillo 7s var(--as-ease-move) 1.8s infinite; }
@keyframes logo-barrido { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes logo-entra { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes logo-brillo { 0% { transform: translateX(-110%); } 30%, 100% { transform: translateX(110%); } }

.hero-kicker { display: flex; align-items: center; gap: var(--as-space-3); margin: 0 0 var(--as-space-5); color: var(--as-soft-cream); font-size: var(--as-small); letter-spacing: var(--as-tracking-wide); text-transform: uppercase; animation: subir var(--as-reveal) var(--as-ease-out) both; animation-delay: .35s; }
.hero-kicker-line { display: block; width: 38px; height: 1px; background: var(--as-ember); }
.hero h1 { max-width: 1100px; margin: 0; font-family: var(--as-font-body); font-size: var(--as-hero-display); font-weight: 700; line-height: var(--as-hero-leading); letter-spacing: var(--as-hero-tracking); text-transform: uppercase; text-shadow: var(--as-title-shadow); }
.hero h1 em { color: var(--as-hero-blue); font-style: normal; }
/* Cada línea sube desde una ranura invisible (clip-path, sin overflow oculto). */
.hero-linea { display: block; animation: linea-entra var(--as-reveal) var(--as-ease-out) both; }
.hero-linea-1 { animation-delay: .5s; }
.hero-linea-2 { animation-delay: .68s; }
@keyframes linea-entra { from { clip-path: inset(100% -6% -30% -6%); transform: translateY(42%); } to { clip-path: inset(-30% -6% -30% -6%); transform: none; } }
@keyframes subir { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

.hero-foot { display: flex; align-items: end; justify-content: space-between; gap: var(--as-space-6); max-width: 1000px; margin-top: var(--as-space-6); animation: subir var(--as-reveal) var(--as-ease-out) both; animation-delay: .9s; }
.hero-foot p { max-width: 470px; margin: 0; color: var(--as-cream); font-size: var(--as-body-large); line-height: var(--as-line-body); }
.hero-acciones { display: flex; flex-wrap: wrap; gap: var(--as-space-3); }
.hero-video-boton { position: absolute; z-index: 4; right: var(--as-gutter); bottom: calc(var(--as-band) + var(--as-space-3)); min-height: 44px; padding: var(--as-space-1) var(--as-space-3); border: 1px solid var(--as-line-strong); border-radius: var(--as-radius-pill); background: var(--as-chip-bg); color: var(--as-cream); font-size: var(--as-tiny-readable); letter-spacing: var(--as-tracking-wide); text-transform: uppercase; cursor: pointer; transition: transform var(--as-press) var(--as-ease-out), border-color var(--as-fast) var(--as-ease-standard); }
.hero-video-boton:active { transform: scale(.96); }
.hero-side-note { position: absolute; z-index: 2; top: 42%; right: var(--as-gutter); margin: 0; color: var(--as-soft-cream); font-size: var(--as-tiny-readable); letter-spacing: var(--as-tracking-wide); writing-mode: vertical-rl; }

/* ---------- Secciones: base común ---------- */
.section-label { margin: 0 0 var(--as-space-5); color: var(--as-soft-cream); font-size: var(--as-small); font-weight: 400; letter-spacing: var(--as-tracking-normal); }
:is(.cambio, .nutricion, .casos, .contacto) h2, .politica h1 { margin: 0; font-family: var(--as-font-display); font-size: var(--as-heading); font-weight: 600; line-height: var(--as-line-display); letter-spacing: var(--as-tracking-tight); }
:is(.cambio, .nutricion, .casos, .contacto) h2 em, .politica h1 em { color: var(--as-soft-cream); font-style: normal; font-weight: 400; }
.nota { max-width: 640px; margin: var(--as-space-4) 0 0; color: var(--as-ink-muted); font-size: var(--as-small); line-height: var(--as-line-body); }

/* ---------- Antes y ahora (compacto) ---------- */
.cambio { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: var(--as-space-7); padding: var(--as-space-8) var(--as-gutter); border-top: 1px solid var(--as-line); background: var(--as-bark); }
.cambio-intro { max-width: 480px; margin: var(--as-space-4) 0 0; color: var(--as-soft-cream); font-size: var(--as-body-large); line-height: var(--as-line-body); }
.comparar { justify-self: end; width: min(100%, 460px); margin: 0; }
.comparar-marco { position: relative; aspect-ratio: 760 / 950; overflow: hidden; background: var(--as-walnut); cursor: ew-resize; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.comparar-foto { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; pointer-events: none; -webkit-user-drag: none; }
.comparar-antes { position: absolute; inset: 0; clip-path: inset(0 50% 0 0); }
.comparar-etiqueta { position: absolute; z-index: 2; top: var(--as-space-3); padding: var(--as-space-1) var(--as-space-2); background: var(--as-label-bg); backdrop-filter: blur(8px); font-size: var(--as-tiny-readable); letter-spacing: var(--as-tracking-wide); text-transform: uppercase; pointer-events: none; }
.comparar-etiqueta-antes { left: var(--as-space-3); }
.comparar-etiqueta-ahora { right: var(--as-space-3); }
.comparar-asa { position: absolute; z-index: 3; top: 0; bottom: 0; left: 50%; width: 2px; background: var(--as-cream); box-shadow: var(--as-handle-shadow); pointer-events: none; }
.comparar-asa span { position: absolute; left: 50%; top: 50%; width: 46px; height: 46px; border: 2px solid var(--as-cream); border-radius: var(--as-radius-pill); background: var(--as-translucent); backdrop-filter: blur(8px); box-shadow: var(--as-handle-shadow); transform: translate(-50%, -50%); transition: transform var(--as-press) var(--as-ease-out); }
.comparar-asa span::before { content: "‹ ›"; position: absolute; inset: 0; display: grid; place-items: center; color: var(--as-cream); font-size: var(--as-small); letter-spacing: var(--as-tracking-normal); }
/* Respuesta al apretar, no al soltar. */
.comparar-marco[data-arrastrando] .comparar-asa span { transform: translate(-50%, -50%) scale(.9); }
.comparar-control { display: flex; align-items: center; gap: var(--as-space-3); margin-top: var(--as-space-2); color: var(--as-soft-cream); font-size: var(--as-tiny-readable); letter-spacing: var(--as-tracking-wide); text-transform: uppercase; }
.comparar-control input { flex: 1 1 auto; min-width: 0; height: 44px; margin: 0; accent-color: var(--as-ember); cursor: pointer; }
.comparar figcaption { margin-top: var(--as-space-0); color: var(--as-ink-muted); font-size: var(--as-tiny-readable); line-height: var(--as-line-small); }

/* ---------- Historia: panel fijo con un cuerpo anatómico 3D en vivo; las marcas se animan solas ---------- */
.story { position: relative; height: 425svh; border-top: 1px solid var(--as-line); background: var(--as-walnut); }
.story-panel { position: sticky; top: 0; z-index: 1; isolation: isolate; height: 100svh; min-height: 620px; overflow: hidden; background: var(--as-walnut); }
/* Cinco tramos de scroll (100svh + 5 × 65svh = altura de .story), uno por capítulo. Deciden el capítulo activo. */
.story-marcas { position: absolute; z-index: 0; top: 0; left: 0; width: 100%; pointer-events: none; }
.story-marca { height: 65svh; }

.escena { position: absolute; inset: 0; }
.escena-aviso { grid-column: 1; grid-row: 1; align-self: end; display: flex; align-items: baseline; gap: var(--as-space-2); max-width: 22rem; margin: 0; color: var(--as-ink-muted); font-size: var(--as-tiny-readable); line-height: var(--as-line-small); pointer-events: none; }
.punto { flex: none; width: 7px; height: 7px; border-radius: var(--as-radius-pill); background: var(--as-ember); box-shadow: var(--as-glow-blue); }

/* Zona del cuerpo 3D: mitad derecha en escritorio. El visor recorta con clip-path (no con overflow) y es el
   contenedor de las etiquetas, que cuerpo3d.js coloca sobre puntos del cuerpo. */
.medios { position: absolute; z-index: 1; top: calc(var(--as-header-height) + var(--as-space-3)); right: var(--as-gutter); bottom: calc(var(--as-space-9) + var(--as-space-1)); left: 50%; display: flex; flex-direction: column; gap: var(--as-space-1); }
.visor3d { position: relative; flex: 1 1 auto; min-height: 0; border: 1px solid var(--as-line); background: var(--as-3d-fondo); clip-path: inset(0); container: marco / inline-size; }
.visor3d::before { content: ""; position: absolute; z-index: 0; right: 18%; bottom: 3%; left: 18%; height: 14%; background: var(--as-3d-suelo); pointer-events: none; }
.visor3d-poster, .visor3d-lienzo { position: absolute; z-index: 1; inset: 0; display: block; width: 100%; height: 100%; max-width: none; }
.visor3d-poster { object-fit: contain; transition: opacity var(--as-slow) var(--as-ease-out); }
.visor3d-lienzo { opacity: 0; transition: opacity var(--as-slow) var(--as-ease-out); }
.visor3d[data-3d="listo"] .visor3d-lienzo { opacity: 1; }
.visor3d[data-3d="listo"] .visor3d-poster { opacity: 0; }
/* Sin 3D (cargando o imagen fija) las etiquetas pegadas al cuerpo no tienen dónde ir: se ocultan. */
.visor3d:not([data-3d="listo"]) .anclado { visibility: hidden; }
.plano { position: absolute; z-index: 2; inset: 0; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity var(--as-medium) var(--as-ease-out), visibility var(--as-medium); }
.plano.is-active { opacity: 1; visibility: visible; }
.plano-pie { flex: none; margin: 0; color: var(--as-ink-muted); font-size: var(--as-tiny-readable); letter-spacing: var(--as-tracking-wide); line-height: var(--as-line-small); text-align: center; text-transform: uppercase; }
.visor-esquina { position: absolute; z-index: 3; width: 22px; height: 22px; border: 0 solid var(--as-viewfinder); pointer-events: none; }
.visor-esquina-1 { top: var(--as-space-2); left: var(--as-space-2); border-top-width: 2px; border-left-width: 2px; }
.visor-esquina-2 { top: var(--as-space-2); right: var(--as-space-2); border-top-width: 2px; border-right-width: 2px; }
.visor-esquina-3 { bottom: var(--as-space-2); left: var(--as-space-2); border-bottom-width: 2px; border-left-width: 2px; }
.visor-esquina-4 { bottom: var(--as-space-2); right: var(--as-space-2); border-bottom-width: 2px; border-right-width: 2px; }
.visor-rec { flex: none; width: 7px; height: 7px; border-radius: var(--as-radius-pill); background: var(--as-ember); animation: parpadeo 1.2s steps(2) infinite; }
@keyframes parpadeo { 50% { opacity: .2; } }

/* Marcas: aparecen por fases (data-visible lo pone historia.js). Explican la idea; no son medidas. */
.marcas { position: absolute; z-index: 2; inset: 0; pointer-events: none; }
.marcas [data-visible] { opacity: 0; transition: opacity var(--as-medium) var(--as-ease-out); }
.marcas [data-visible="si"] { opacity: 1; }
.et-texto, .sello, .toma, .plano-rec { padding: var(--as-space-0) var(--as-space-2); border: 1px solid var(--as-line); background: var(--as-note-bg); backdrop-filter: blur(8px); color: var(--as-cream); font-size: var(--as-tiny-readable); letter-spacing: var(--as-tracking-wide); line-height: var(--as-line-small); text-transform: uppercase; white-space: nowrap; }

/* Punto pegado al cuerpo: cuerpo3d.js mueve el envoltorio con transform en cada fotograma. */
.anclado { position: absolute; top: 0; left: 0; width: 0; height: 0; will-change: transform; }

/* Etiqueta: punto sobre el cuerpo, línea y texto. data-lado="izq" pone el texto a la izquierda del punto. */
.et { position: absolute; top: 0; left: 0; display: flex; align-items: center; transform: translate(-5px, -50%); }
.et[data-lado="izq"] { flex-direction: row-reverse; transform: translate(calc(-100% + 5px), -50%); }
.et-punto { flex: none; width: 10px; height: 10px; border: 2px solid var(--as-cream); border-radius: var(--as-radius-pill); background: var(--as-ember); box-shadow: var(--as-note-dot-shadow); }
.et-linea { flex: none; width: 26px; height: 1px; background: var(--as-line-strong); transform: scaleX(0); transform-origin: left; transition: transform var(--as-medium) var(--as-ease-out); }
.et[data-lado="izq"] .et-linea { transform-origin: right; }
.et[data-visible="si"] .et-linea { transform: scaleX(1); }

/* Sello arriba a la izquierda: dice en pocas palabras qué pasa en esa fase. */
.sello, .plano-rec { position: absolute; top: var(--as-space-3); left: var(--as-space-3); display: inline-flex; align-items: center; gap: var(--as-space-1); }
.plano-rec { z-index: 3; }
.luna { flex: none; width: 10px; height: 10px; border-radius: var(--as-radius-pill); box-shadow: var(--as-moon-shadow); }

/* Inicio: barrido de escáner, cuestionario y las tres tomas (el cuerpo gira a frente, perfil y espalda). */
.escaneo { position: absolute; inset: 0; }
.escaneo::before { content: ""; position: absolute; top: 0; right: 0; left: 0; height: 2px; background: var(--as-hero-blue); box-shadow: var(--as-scan-glow); }
.escaneo::after { content: ""; position: absolute; right: 0; bottom: 100%; left: 0; height: 22%; background: var(--as-scan-trail); }
.escaneo[data-visible="si"] { animation: escanear 3.4s var(--as-ease-move) infinite; }
@keyframes escanear { from { transform: translateY(0); } to { transform: translateY(100%); } }
.ficha { position: absolute; top: 22%; left: var(--as-space-3); display: grid; gap: var(--as-space-1); min-width: 8.5rem; padding: var(--as-space-2) var(--as-space-3); border: 1px solid var(--as-line); background: var(--as-note-bg); backdrop-filter: blur(8px); }
.ficha-titulo { color: var(--as-hero-blue); font-size: var(--as-tiny-readable); letter-spacing: var(--as-tracking-wide); line-height: var(--as-line-small); text-transform: uppercase; }
.ficha-fila { display: flex; align-items: center; gap: var(--as-space-1); color: var(--as-cream); font-size: var(--as-small); line-height: var(--as-line-small); opacity: 0; transform: translateX(-6px); transition: opacity var(--as-medium) var(--as-ease-out), transform var(--as-medium) var(--as-ease-out); transition-delay: calc(var(--i) * var(--as-stagger)); }
.ficha-fila::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: var(--as-radius-pill); background: var(--as-ember); }
.ficha[data-visible="si"] .ficha-fila { opacity: 1; transform: none; }
.tomas { position: absolute; right: 0; bottom: var(--as-space-4); left: 0; display: flex; justify-content: center; gap: var(--as-space-1); }
.toma { color: var(--as-soft-cream); transition: border-color var(--as-fast) var(--as-ease-standard), color var(--as-fast) var(--as-ease-standard); }
.toma.is-hecha { border-color: var(--as-cream); color: var(--as-cream); }

/* Músculo y descanso: pulso donde trabaja o se repara la fibra. */
.pulso { position: absolute; top: 0; left: 0; width: 72px; height: 72px; transform: translate(-50%, -50%); }
.pulso::before, .pulso::after { content: ""; position: absolute; inset: 0; border: 2px solid var(--as-pulse); border-radius: var(--as-radius-pill); opacity: 0; }
.pulso[data-visible="si"]::before, .pulso[data-visible="si"]::after { animation: latido 2.4s var(--as-ease-out) infinite; }
.pulso[data-visible="si"]::after { animation-delay: 1.2s; }
@keyframes latido { from { opacity: .9; transform: scale(.35); } to { opacity: 0; transform: scale(1.35); } }

/* Grasa: balance sin cifras. Las partículas de energía y de aire las dibuja el 3D. */
.balanza { position: absolute; top: var(--as-space-3); left: var(--as-space-3); display: grid; gap: var(--as-space-1); width: 9.5rem; padding: var(--as-space-2) var(--as-space-3); border: 1px solid var(--as-line); background: var(--as-note-bg); backdrop-filter: blur(8px); }
.balanza-fila { display: grid; grid-template-columns: 3.6rem minmax(0, 1fr); align-items: center; gap: var(--as-space-1); color: var(--as-cream); font-size: var(--as-tiny-readable); letter-spacing: var(--as-tracking-wide); line-height: var(--as-line-small); text-transform: uppercase; }
.balanza-barra { display: block; height: 6px; background: var(--as-ember); transform: scaleX(0); transform-origin: left; transition: transform var(--as-slow) var(--as-ease-out); }
.balanza-fila + .balanza-fila .balanza-barra { background: var(--as-cream); }
.balanza[data-visible="si"] .balanza-barra { transform: scaleX(var(--valor)); }

/* Visor estrecho (móvil): etiquetas más compactas para que no se pisen ni toquen el borde. */
@container marco (max-width: 340px) {
  .et-texto, .sello, .toma, .plano-rec { padding: var(--as-space-0) var(--as-space-1); letter-spacing: var(--as-tracking-normal); }
  .et-linea { width: 14px; }
  .ficha { min-width: 0; padding: var(--as-space-1) var(--as-space-2); }
  .ficha-fila { font-size: var(--as-tiny-readable); }
  .pulso { width: 56px; height: 56px; }
}

.story-copy { position: absolute; z-index: 5; top: var(--as-header-height); bottom: var(--as-space-9); left: var(--as-gutter); display: flex; flex-direction: column; justify-content: center; width: min(44%, 600px); pointer-events: none; }
.story-copy :is(a, button) { pointer-events: auto; }
.story-titulo { margin: 0 0 var(--as-space-5); color: var(--as-soft-cream); font-family: var(--as-font-display); font-size: var(--as-subheading); font-weight: 400; line-height: var(--as-line-small); letter-spacing: var(--as-tracking-tight); }
.story-titulo em { color: var(--as-cream); font-style: normal; font-weight: 600; }
.story-chapters { display: grid; }
.story-chapter { grid-area: 1 / 1; opacity: 0; visibility: hidden; transform: translateY(20px); transition: opacity var(--as-chapter) var(--as-ease-out), transform var(--as-chapter) var(--as-ease-out), visibility var(--as-chapter); }
.story-chapter.is-active { opacity: 1; visibility: visible; transform: translateY(0); }
.story-num { margin: 0 0 var(--as-space-2); color: var(--as-hero-blue); font-size: var(--as-tiny-readable); letter-spacing: var(--as-tracking-wide); text-transform: uppercase; }
.story-chapter h3 { margin: 0; font-family: var(--as-font-display); font-size: var(--as-display); font-weight: 600; line-height: var(--as-line-display); letter-spacing: var(--as-tracking-tight); }
.story-chapter p:not(.story-num) { max-width: 440px; margin: var(--as-space-4) 0 0; color: var(--as-soft-cream); font-size: var(--as-body); line-height: var(--as-line-body); }

/* Fases de la animación: tres barras que se llenan solas; se pueden tocar. */
.fases { margin-top: var(--as-space-5); }
.fases-botones { display: flex; gap: var(--as-space-1); max-width: 300px; }
.fases-botones button { flex: 1 1 0; min-width: 44px; min-height: 44px; padding: 0; border: 0; background: none; cursor: pointer; transition: transform var(--as-press) var(--as-ease-out); }
.fases-botones button:active { transform: scale(.96); }
.fase-barra { position: relative; display: block; width: 100%; height: 2px; background: var(--as-phase-track); }
.fase-barra span { position: absolute; inset: 0; background: var(--as-cream); transform: scaleX(0); transform-origin: left; }
.fases-botones button[data-estado="hecha"] .fase-barra span { background: var(--as-hero-blue); }
.fase-texto { min-height: 1.3em; margin: var(--as-space-0) 0 0; color: var(--as-cream); font-size: var(--as-small); line-height: var(--as-line-small); }

.story-cta { align-self: flex-start; min-width: 220px; margin-top: var(--as-space-5); }

.story-bottom { position: absolute; z-index: 8; right: var(--as-gutter); bottom: calc(var(--as-space-4) + var(--as-safe-bottom)); left: var(--as-gutter); display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; column-gap: var(--as-space-5); row-gap: var(--as-space-3); }
.controles { grid-column: 2; grid-row: 1; justify-self: end; display: flex; gap: var(--as-space-3); }
.chip { display: inline-flex; flex: none; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: var(--as-space-1) var(--as-space-3); border: 1px solid var(--as-line-strong); border-radius: var(--as-radius-pill); background: var(--as-chip-bg); color: var(--as-cream); font-size: var(--as-tiny-readable); letter-spacing: var(--as-tracking-wide); line-height: var(--as-line-small); text-transform: uppercase; white-space: nowrap; cursor: pointer; transition: background-color var(--as-fast) var(--as-ease-out), color var(--as-fast) var(--as-ease-out), border-color var(--as-fast) var(--as-ease-out), transform var(--as-press) var(--as-ease-out); }
.chip:active { transform: scale(.96); }
.chip[aria-pressed="true"] { border-color: var(--as-cream); background: var(--as-cream); color: var(--as-walnut); }
.chip-icono { padding: 0; letter-spacing: var(--as-tracking-normal); }

.story-steps { grid-column: 1; grid-row: 2; display: flex; flex-wrap: wrap; gap: var(--as-space-1) var(--as-space-5); align-items: center; }
.story-steps button { min-height: 44px; padding: var(--as-space-2) 0; border: 0; background: none; color: var(--as-soft-cream); cursor: pointer; font-size: var(--as-small); text-align: left; transition: color var(--as-fast) var(--as-ease-standard); }
.story-steps button[aria-pressed="true"] { color: var(--as-cream); }
.story-steps .paso-num { margin-right: var(--as-space-1); color: var(--as-ink-muted); font-size: var(--as-tiny-readable); }
.story-steps button[aria-pressed="true"] .paso-num { color: var(--as-hero-blue); }
.scroll-hint { grid-column: 2; grid-row: 2; justify-self: end; margin: 0; color: var(--as-soft-cream); font-size: var(--as-tiny-readable); letter-spacing: var(--as-tracking-wide); text-transform: uppercase; }
.scroll-hint span { margin-left: var(--as-space-2); }
.story-progress { grid-column: 1 / -1; grid-row: 3; height: 1px; background: var(--as-progress-light); }
.story-progress span { display: block; width: 100%; height: 100%; background: var(--as-ember); transform: scaleX(0); transform-origin: left; }

/* ---------- Nutrición ---------- */
.nutricion, .casos { position: relative; z-index: 2; padding: var(--as-space-8) var(--as-gutter); border-top: 1px solid var(--as-line); }
.nutricion { background: var(--as-nutrition-bg); }
.nutricion-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .55fr); column-gap: var(--as-space-8); align-items: end; margin-bottom: var(--as-space-6); }
.nutricion-head .section-label { grid-column: 1 / -1; }
.nutricion-head > p:last-child { max-width: 430px; margin: 0; color: var(--as-soft-cream); font-size: var(--as-body); line-height: var(--as-line-body); }
.nutricion-claves { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--as-space-5); margin: 0 0 var(--as-space-6); }
.nutricion-claves > div { padding-top: var(--as-space-3); border-top: 1px solid var(--as-line-strong); }
.nutricion-claves dt { margin: 0 0 var(--as-space-2); font-size: var(--as-row-head); font-weight: 600; }
.nutricion-claves dd { margin: 0; color: var(--as-soft-cream); font-size: var(--as-body); line-height: var(--as-line-body); }
.nutricion-galeria { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--as-space-4); }
.nutricion-foto { min-width: 0; margin: 0; overflow: hidden; background: var(--as-bark); }
.nutricion-foto img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; object-position: center; transition: transform var(--as-chapter) var(--as-ease-out); }
.nutricion-foto figcaption { padding: var(--as-space-3) 0; border-top: 1px solid var(--as-line); color: var(--as-soft-cream); font-size: var(--as-tiny-readable); font-weight: 600; letter-spacing: var(--as-tracking-wide); text-transform: uppercase; }

/* ---------- Casos: dos huecos con silueta hasta tener casos con permiso ---------- */
.casos { background: var(--as-walnut); }
.casos-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .7fr); column-gap: var(--as-space-8); align-items: end; }
.casos-head .section-label { grid-column: 1 / -1; }
.casos-entrada { max-width: 460px; margin: 0; color: var(--as-soft-cream); font-size: var(--as-body); line-height: var(--as-line-body); }
.casos-huecos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--as-space-5); margin-top: var(--as-space-6); }
.caso-hueco { margin: 0; }
.caso-par { display: grid; grid-template-columns: 1fr 1fr; gap: var(--as-space-1); }
.caso-silueta { position: relative; aspect-ratio: 3 / 4; border: var(--as-slot-border); background: var(--as-slot-bg); }
/* La silueta sale del modelo 3D (assets/casos/silueta.webp): no es ninguna persona. */
.caso-silueta::before { content: ""; position: absolute; inset: 12% 18% 0; background: var(--as-silhouette); -webkit-mask: url('/asesorias/assets/casos/silueta.webp') center bottom / contain no-repeat; mask: url('/asesorias/assets/casos/silueta.webp') center bottom / contain no-repeat; }
.caso-silueta-despues::before { background: var(--as-silhouette-after); }
.caso-etiqueta { position: absolute; z-index: 1; top: var(--as-space-2); left: var(--as-space-2); padding: var(--as-space-0) var(--as-space-2); background: var(--as-label-bg); color: var(--as-soft-cream); font-size: var(--as-tiny-readable); letter-spacing: var(--as-tracking-wide); text-transform: uppercase; }
.caso-hueco figcaption { padding-top: var(--as-space-2); color: var(--as-ink-muted); font-size: var(--as-tiny-readable); letter-spacing: var(--as-tracking-wide); text-transform: uppercase; }
.casos-lista:empty { display: none; }
.casos-lista { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--as-space-5); margin-top: var(--as-space-6); }
.caso { padding: var(--as-space-5); border: 1px solid var(--as-line); }
.caso h3 { margin: var(--as-space-1) 0 var(--as-space-3); font-size: var(--as-row-head); }
.caso p { margin: 0; color: var(--as-soft-cream); font-size: var(--as-body); line-height: var(--as-line-body); }
.caso .etiqueta { color: var(--as-hero-blue); font-size: var(--as-tiny-readable); letter-spacing: var(--as-tracking-wide); text-transform: uppercase; }
.caso-fotos { display: grid; grid-template-columns: 1fr 1fr; gap: var(--as-space-2); margin-top: var(--as-space-4); }
.caso-fotos figure { margin: 0; }
.caso-fotos figcaption { padding-top: var(--as-space-1); color: var(--as-ink-muted); font-size: var(--as-tiny-readable); }
.caso .rail { margin: var(--as-space-4) 0 0; }
.caso .rail > div { display: flex; justify-content: space-between; gap: var(--as-space-3); padding: var(--as-space-2) 0; border-top: 1px solid var(--as-line); font-size: var(--as-small); }
.caso .rail dd { margin: 0; }

/* ---------- Contacto y pie ---------- */
.contacto { position: relative; z-index: 2; padding: var(--as-space-8) var(--as-gutter) var(--as-space-9); border-top: 1px solid var(--as-line); background: var(--as-bark); }
.contacto-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); align-items: end; gap: var(--as-space-8); }
.contacto-pasos { margin: 0 0 var(--as-space-5); padding: 0; list-style: none; counter-reset: paso; }
.contacto-pasos li { counter-increment: paso; display: flex; gap: var(--as-space-3); padding: var(--as-space-3) 0; border-top: 1px solid var(--as-line); font-size: var(--as-body); line-height: var(--as-line-body); }
.contacto-pasos li::before { content: counter(paso, decimal-leading-zero); flex: none; padding-top: var(--as-space-0); color: var(--as-hero-blue); font-size: var(--as-tiny-readable); letter-spacing: var(--as-tracking-wide); }
.contacto-cta { min-width: 250px; min-height: 56px; padding: var(--as-space-3) var(--as-space-5); }
.pie { position: relative; z-index: 2; padding: var(--as-space-5) var(--as-gutter) calc(var(--as-space-6) + var(--as-safe-bottom)); border-top: 1px solid var(--as-line); background: var(--as-walnut); color: var(--as-soft-cream); font-size: var(--as-small); }
.pie-fila { display: flex; align-items: center; justify-content: space-between; gap: var(--as-space-4); padding-bottom: var(--as-space-4); }
.pie-fila .marca { width: 136px; height: 48px; }
.pie-fila > a:last-child { display: inline-flex; align-items: center; min-height: 44px; text-decoration: underline; text-underline-offset: .25em; }
.pie > p { max-width: 900px; margin: var(--as-space-3) 0 0; line-height: var(--as-line-body); }
.pie-creditos { color: var(--as-ink-muted); font-size: var(--as-tiny-readable); }
.pie-creditos a { white-space: nowrap; }

/* ---------- Página de fuentes y política ---------- */
.politica { max-width: 1100px; padding: calc(var(--as-header-height) + var(--as-space-7)) var(--as-gutter) var(--as-space-8); }
.politica-volver { display: inline-flex; align-items: center; gap: var(--as-space-1); min-height: 44px; margin-bottom: var(--as-space-4); color: var(--as-soft-cream); font-size: var(--as-small); text-decoration: none; }
.politica-entrada { max-width: 620px; margin: var(--as-space-4) 0 0; color: var(--as-soft-cream); font-size: var(--as-body-large); line-height: var(--as-line-body); }
.politica-bloque { margin-top: var(--as-space-7); padding-top: var(--as-space-5); border-top: 1px solid var(--as-line); }
.politica-bloque h2 { margin: 0 0 var(--as-space-3); font-size: var(--as-subheading); font-weight: 600; letter-spacing: var(--as-tracking-tight); }
.politica-bloque > p a { white-space: nowrap; }
.politica-bloque > p { max-width: 720px; margin: 0 0 var(--as-space-3); color: var(--as-soft-cream); font-size: var(--as-body); line-height: var(--as-line-body); }
.politica-pendiente { display: inline-block; padding: var(--as-space-0) var(--as-space-2); border: var(--as-slot-border); color: var(--as-ink-muted); font-size: var(--as-tiny-readable); letter-spacing: var(--as-tracking-wide); text-transform: uppercase; }
.lista-fuentes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--as-space-6); margin: var(--as-space-4) 0 0; padding: 0; list-style: none; counter-reset: fuente; }
.lista-fuentes li { position: relative; counter-increment: fuente; padding: var(--as-space-4) 0 var(--as-space-4) var(--as-space-6); border-top: 1px solid var(--as-line); scroll-margin-top: calc(var(--as-header-height) + var(--as-space-4)); }
.lista-fuentes li::before { content: counter(fuente, decimal-leading-zero); position: absolute; left: 0; top: var(--as-space-4); color: var(--as-hero-blue); font-size: var(--as-tiny-readable); letter-spacing: var(--as-tracking-wide); }
.lista-fuentes p { margin: 0; font-size: var(--as-body); line-height: var(--as-line-body); }
.lista-fuentes cite { display: block; margin-top: var(--as-space-2); color: var(--as-soft-cream); font-size: var(--as-small); font-style: normal; line-height: var(--as-line-small); }
.lista-fuentes a { display: inline-flex; align-items: center; min-height: 44px; color: var(--as-hero-blue); font-size: var(--as-small); overflow-wrap: anywhere; text-underline-offset: .2em; }

/* ---------- Pantallas medianas ---------- */
@media (max-width: 1600px) {
  .story-steps { gap: var(--as-space-1) var(--as-space-3); }
  .story-steps button:not([aria-pressed="true"]) .paso-texto { display: none; }
  .story-steps button { min-width: 44px; }
}
@media (max-width: 1000px) {
  .cabecera nav { gap: var(--as-space-3); }
  .hero h1 { font-size: var(--as-display); }
  .story-chapter h3 { font-size: var(--as-display-mobile); }
}

/* ---------- Por debajo de 900 px: texto arriba, cuerpo 3D en medio, controles abajo ---------- */
@media (max-width: 899px) {
  .cabecera nav { display: none; }
  .hero-foot { display: block; }
  .hero-acciones { margin-top: var(--as-space-4); }
  .story-panel { display: flex; flex-direction: column; min-height: 600px; padding-top: var(--as-header-height-mobile); }
  .story-copy { position: relative; inset: auto; order: 1; flex: none; display: block; width: auto; padding: var(--as-space-3) var(--as-gutter) 0; }
  .story-titulo { margin-bottom: var(--as-space-2); font-size: var(--as-small); }
  .story-chapter h3 { font-size: var(--as-display-mobile); }
  .story-chapter p:not(.story-num) { max-width: 560px; margin-top: var(--as-space-2); font-size: var(--as-small); }
  .fases { display: flex; align-items: center; gap: var(--as-space-3); margin-top: var(--as-space-1); }
  .fases-botones { flex: none; width: 150px; }
  .fase-texto { margin: 0; font-size: var(--as-tiny-readable); }
  .story-cta { display: none; }
  .escena { position: relative; inset: auto; order: 2; flex: 1 1 auto; min-height: 0; }
  .medios { top: var(--as-space-2); right: var(--as-gutter); bottom: var(--as-space-2); left: var(--as-gutter); }
  .escena-aviso { grid-column: 1; grid-row: 1; align-self: center; max-width: none; }
  .story-bottom { position: relative; right: auto; bottom: auto; left: auto; order: 3; flex: none; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--as-space-3); row-gap: var(--as-space-2); padding: 0 var(--as-gutter) calc(var(--as-space-3) + var(--as-safe-bottom)); }
  .controles { display: contents; }
  .controles > .chip { grid-column: 2; grid-row: 1; }
  .story-steps { grid-column: 1 / -1; grid-row: 2; flex-wrap: nowrap; justify-content: space-between; gap: var(--as-space-1); }
  .story-steps .paso-texto { display: none; }
  .story-steps button { flex: 1 1 0; min-width: 44px; text-align: center; }
  .story-steps .paso-num { margin: 0; font-size: var(--as-small); }
  .scroll-hint { display: none; }
  .story-progress { grid-row: 3; }
  .cambio, .contacto-grid, .nutricion-head, .casos-head { grid-template-columns: minmax(0, 1fr); }
  .cambio { gap: var(--as-space-5); }
  .comparar { justify-self: stretch; width: 100%; }
  .nutricion-claves, .lista-fuentes { grid-template-columns: minmax(0, 1fr); }
  .nutricion-head, .casos-head { row-gap: var(--as-space-4); }
  .nutricion-head .section-label, .casos-head .section-label { margin-bottom: 0; }
}

@media (max-width: 700px) {
  .cabecera { min-height: var(--as-header-height-mobile); padding: var(--as-space-2) var(--as-gutter); }
  .marca { width: 116px; height: 41px; }
  .cabecera-cita { gap: var(--as-space-2); padding: var(--as-space-2) var(--as-space-3); }
  section[id] { scroll-margin-top: var(--as-header-height-mobile); }
  section.story { scroll-margin-top: 0; }
  /* El vídeo vertical trae una línea al 88 % de alto: se alarga hacia abajo para que quede fuera y no cruce los botones. */
  .hero { background-image: none; }
  .hero-film-wide { display: none; }
  .hero-film-portrait { display: block; bottom: auto; height: 116%; }
  .hero-shade { background: linear-gradient(180deg, var(--as-hero-shade-soft), var(--as-transparent) 34%, var(--as-hero-shade) 100%); }
  .hero-banda { height: var(--as-band-mobile); }
  .hero-content { padding: var(--as-space-9) var(--as-gutter) calc(var(--as-space-6) + var(--as-band-mobile)); }
  .hero-logo { width: clamp(170px, 52vw, 260px); margin-bottom: var(--as-space-4); }
  .hero-kicker { margin-bottom: var(--as-space-4); font-size: var(--as-tiny-readable); }
  .hero h1 { font-size: var(--as-hero-display-mobile); }
  .hero h1 em { font-size: var(--as-hero-display-mobile-accent); }
  .hero-foot { margin-top: var(--as-space-4); }
  .hero-foot p { max-width: 340px; font-size: var(--as-body); }
  .hero-acciones .boton { flex: 1 1 auto; }
  .hero-video-boton { top: calc(var(--as-header-height-mobile) + var(--as-space-3)); bottom: auto; }
  .hero-side-note { display: none; }
  :is(.cambio, .nutricion, .casos, .contacto) h2, .politica h1 { font-size: var(--as-heading-mobile); }
  .cambio, .nutricion, .casos { padding: var(--as-space-7) var(--as-gutter); }
  .nutricion-galeria { grid-template-columns: minmax(0, 1fr); gap: var(--as-space-4); }
  .casos-huecos { grid-template-columns: minmax(0, 1fr); gap: var(--as-space-5); }
  .contacto { padding: var(--as-space-7) var(--as-gutter); }
  .contacto-grid { gap: var(--as-space-5); }
  .contacto-cta { width: 100%; }
  .pie-fila { flex-wrap: wrap; }
  .politica { padding-top: calc(var(--as-header-height-mobile) + var(--as-space-6)); }
}
@media (max-width: 420px) {
  .pie-fila > span { order: 3; width: 100%; }
}
/* Pantallas bajas: se quita el párrafo para que el cuerpo 3D tenga sitio. */
@media (max-width: 899px) and (max-height: 700px) {
  .story-chapter p:not(.story-num) { display: none; }
}

/* Movimiento reducido: nada se desplaza ni hace zoom; lo que entra, entra con un fundido corto. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero-film, .hero-grano::before, .logo-capa-azul, .logo-brillo::before, .visor-rec, .escaneo[data-visible] { animation: none; }
  .logo-brillo { display: none; }
  .hero-banda { animation: none; }
  .hero-linea, .hero-kicker, .hero-foot, .logo-capa-blanca { animation: fundido .3s ease both; }
  .story-chapter { transform: none; }
  .ficha-fila, .et-linea { transform: none; }
  .escaneo { display: none; }
  .pulso[data-visible="si"]::before { animation: none; opacity: .7; transform: scale(.8); }
  .pulso[data-visible="si"]::after { animation: none; }
}
@keyframes fundido { from { opacity: 0; } to { opacity: 1; } }

/* Botón de pausa de la historia: congela todo lo que se mueve en la escena. */
.escena[data-movimiento="no"] :is(*, *::before, *::after) { animation-play-state: paused; }

@media (hover: hover) and (pointer: fine) {
  .cabecera nav a:hover { border-color: var(--as-cream); }
  .cabecera-cita:hover { background: var(--as-cream); color: var(--as-walnut); }
  .boton-claro:hover { background: var(--as-soft-cream); }
  .boton-linea:hover { border-color: var(--as-cream); background: var(--as-cream); color: var(--as-walnut); }
  .hero-video-boton:hover, .chip:hover { border-color: var(--as-cream); }
  .story-steps button:hover { color: var(--as-cream); }
  .nutricion-foto:hover img { transform: scale(1.035); }
  .politica-volver:hover { color: var(--as-cream); }
  .comparar-marco:hover .comparar-asa span { transform: translate(-50%, -50%) scale(1.06); }
  .comparar-marco[data-arrastrando] .comparar-asa span { transform: translate(-50%, -50%) scale(.9); }
}