/* R.A. Works · demo web · estilos
   Base: tokens.css (copia del manual V1.0). Solo los 6 colores del manual, radio 0 (2 px en campos),
   sin sombras, sin blur, sin degradés. Movimiento solo con transform y opacity.
   Mobile first: lo de escritorio va en min-width: 901px. */

/* ── Fuentes autoalojadas, recortadas a los pesos y glifos en uso ─────────────────────────── */
@font-face{font-family:'Space Grotesk';src:url(../fonts/SpaceGrotesk-Medium.woff2) format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:'Space Grotesk';src:url(../fonts/SpaceGrotesk-Bold.woff2) format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:'IBM Plex Sans';src:url(../fonts/IBMPlexSans-Regular.woff2) format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'IBM Plex Sans';src:url(../fonts/IBMPlexSans-Medium.woff2) format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:'JetBrains Mono';src:url(../fonts/JetBrainsMono-Regular.woff2) format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'JetBrains Mono';src:url(../fonts/JetBrainsMono-Bold.woff2) format('woff2');font-weight:700;font-display:swap}

/* ── Roles y curvas (los colores son los tokens del manual) ───────────────────────────────── */
:root{
  --ease-salida:cubic-bezier(.2,.7,0,1);
  --ease-plano:cubic-bezier(.65,0,.35,1);
  --pad:var(--s-4);
  --gutter:var(--margen-m);
  --hx:max(32px, calc((100vw - var(--contenedor)) / 2 + 32px));
  --hw:min(600px, calc(50vw - var(--hx) - 40px));
}
@media (min-width:901px){:root{--pad:var(--s-8);--gutter:var(--s-8)}}

/* ── Base ─────────────────────────────────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;border-radius:0}
html{overflow-x:hidden;overflow-x:clip;-webkit-text-size-adjust:100%;scroll-padding-top:var(--nav-h);background:var(--noche)}
body{overflow-x:hidden;overflow-x:clip;background:var(--noche);color:var(--hueso);font:400 var(--fs-body-m)/var(--lh-body) var(--font-body);-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent}
@media (min-width:901px){body{font-size:var(--fs-body)}}
img,video,canvas{display:block;max-width:100%}
a{color:inherit}
ul,ol{list-style:none}
b{font-weight:inherit}
code{font-family:var(--font-mono)}
[hidden]{display:none!important}
:focus-visible{outline:2px solid var(--hueso);outline-offset:3px}
::selection{background:var(--hueso);color:var(--noche)}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.saltar{position:fixed;left:16px;top:-80px;z-index:100;background:var(--hueso);color:var(--noche);font:700 var(--fs-btn)/1 var(--font-mono);letter-spacing:var(--ls-btn);text-transform:uppercase;padding:16px 20px;text-decoration:none}
.saltar:focus{top:12px}

/* ── Tipografía ───────────────────────────────────────────────────────────────────────────── */
.h1{font-family:var(--font-display);font-weight:700;font-size:var(--fs-h1-m);line-height:.95;letter-spacing:-.0385em}
.h2{font-family:var(--font-display);font-weight:700;font-size:var(--fs-h2-m);line-height:.98;letter-spacing:var(--ls-h2-m)}
.h3{font-family:var(--font-display);font-weight:700;font-size:var(--fs-h3-m);line-height:1.05;letter-spacing:var(--ls-h3-m)}
.paso{font-family:var(--font-display);font-weight:500;font-size:var(--fs-paso-m);line-height:1.25}
.lead{font-family:var(--font-body);font-size:var(--fs-lead-m);line-height:var(--lh-lead);color:var(--gris)}
.lbl{font:400 var(--fs-lbl)/1.35 var(--font-mono);letter-spacing:var(--ls-lbl);text-transform:uppercase;color:var(--gris)}
.dato{font:400 12px/1.4 var(--font-mono);letter-spacing:.5px;color:var(--gris)}
.senal{color:var(--senal)}
@media (min-width:901px){
  .h1{font-size:clamp(64px, 6.4vw, var(--fs-h1));line-height:var(--lh-h1)}
  .h2{font-size:var(--fs-h2);line-height:var(--lh-h2);letter-spacing:var(--ls-h2)}
  .h3{font-size:var(--fs-h3);line-height:var(--lh-h3);letter-spacing:var(--ls-h3)}
  .paso{font-size:var(--fs-paso);line-height:var(--lh-paso)}
  .lead{font-size:var(--fs-lead)}
  .dato{font-size:13px}
}

/* ── Componentes del manual [09]: se definen una vez y se reutilizan ─────────────────────── */
/* Botón primario: Hueso, texto Noche, mono 700 13, 18 × 24, radio 0, cierra con ↗. Hover: invierte. */
.btn{display:inline-flex;align-items:center;justify-content:space-between;gap:16px;min-height:52px;padding:var(--btn-pad);background:var(--hueso);color:var(--noche);border:1px solid var(--hueso);font:700 var(--fs-btn)/1 var(--font-mono);letter-spacing:var(--ls-btn);text-transform:uppercase;text-decoration:none;cursor:pointer}
.btn:hover{background:var(--noche);color:var(--hueso)}
@media (max-width:900px){.btn{width:100%}}
/* Botón secundario: texto subrayado con offset 5. Nunca verde. */
.btn2{display:inline-flex;align-items:center;gap:10px;min-height:44px;font:700 var(--fs-btn)/1 var(--font-mono);letter-spacing:var(--ls-btn);text-transform:uppercase;color:var(--hueso);text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1px}
.btn2:hover{text-decoration-thickness:2px}
/* LED de estado: cuadrado de 7, separación de 8. Gris = inactivo. */
.led{display:inline-block;flex:none;width:var(--led);height:var(--led);margin-right:8px;background:var(--senal);vertical-align:1px}
/* Franja de metadatos: 44 px, celdas de borde a borde. */
.franja{display:flex;min-height:var(--franja-h);border-bottom:var(--line)}
.f-cel{display:flex;align-items:center;min-width:0;padding:0 var(--pad);font:400 var(--fs-lbl)/1.2 var(--font-mono);letter-spacing:var(--ls-lbl);text-transform:uppercase;color:var(--gris);white-space:nowrap}
.f-cel+.f-cel{border-left:var(--line)}
.codigo{font-family:var(--font-mono);font-weight:700;color:var(--hueso);text-transform:none;letter-spacing:.5px}
/* Regla de 1 px que se dibuja al entrar en pantalla (eco de la estela del Recorrido: Hueso al 40 %). */
.regla{display:block;width:100%;max-width:560px;height:1px;background:var(--hueso);opacity:.4;transform-origin:left;transform:scaleX(var(--k,1))}

/* ── Hoja: las líneas laterales del contenedor de 1280 px, fijas detrás de todo ─────────── */
.contenedor{position:relative;max-width:var(--contenedor);margin:0 auto}
.hoja{position:fixed;inset:0;z-index:0;pointer-events:none}
.hoja::before,.hoja::after{content:"";position:absolute;top:0;bottom:0;width:1px;background:var(--grafito)}
.hoja::before{left:calc(50% - var(--contenedor) / 2)}
.hoja::after{left:calc(50% + var(--contenedor) / 2 - 1px)}
@media (max-width:1311px){.hoja{display:none}}
main,.pie{position:relative;z-index:1}
section{border-top:var(--line)}

/* ── Navegación fija de 56 px ─────────────────────────────────────────────────────────────── */
.nav{position:fixed;top:0;left:0;right:0;z-index:40;height:var(--nav-h);background:var(--noche);border-bottom:var(--line)}
.nav-in{display:flex;height:100%;max-width:var(--contenedor);margin:0 auto}
.nav-logo{display:flex;align-items:center;flex:1;padding:0 8px 0 4px}
.nav-logo img{height:46px;width:auto}
.nav-links,.nav-contacto{display:none}
.nav-menu{all:unset;box-sizing:border-box;display:flex;align-items:center;padding:0 var(--s-4);min-width:88px;justify-content:center;border-left:var(--line);font:400 var(--fs-lbl)/1 var(--font-mono);letter-spacing:var(--ls-lbl);text-transform:uppercase;color:var(--hueso);cursor:pointer}
.nav-menu:focus-visible{outline:2px solid var(--hueso);outline-offset:-4px}
.menu-movil{position:fixed;top:var(--nav-h);left:0;right:0;z-index:39;background:var(--noche);border-bottom:var(--line)}
.menu-movil a{display:flex;align-items:center;justify-content:space-between;min-height:56px;padding:0 var(--s-4);border-top:var(--line);font:400 var(--fs-lbl)/1 var(--font-mono);letter-spacing:var(--ls-lbl);text-transform:uppercase;color:var(--hueso);text-decoration:none}
.menu-movil a:first-child{border-top:0}
@media (min-width:901px){
  .nav-logo{flex:none;width:240px;padding:0 12px 0 20px;border-right:var(--line)}
  .nav-links{display:flex;flex:1;align-items:center;gap:var(--s-8);padding:0 var(--s-6)}
  .nav-links a{display:inline-flex;align-items:center;min-height:44px;font:400 var(--fs-lbl)/1 var(--font-mono);letter-spacing:var(--ls-lbl);text-transform:uppercase;color:var(--gris);text-decoration:none}
  .nav-links a:hover{color:var(--hueso)}
  .nav-contacto{display:flex;align-items:center;justify-content:center;gap:8px;width:200px;border-left:var(--line);font:700 var(--fs-lbl)/1 var(--font-mono);letter-spacing:var(--ls-lbl);text-transform:uppercase;color:var(--hueso);text-decoration:none}
  .nav-contacto:hover{background:var(--hueso);color:var(--noche)}
  .nav-menu,.menu-movil{display:none!important}
}

/* ── 00 · Hero ─────────────────────────────────────────────────────────────────────────────
   Base (sin JS, celular, tablet vertical y movimiento reducido): hero estático como 05-hero-mobile.
   html.scrub-activo (escritorio, lo arma scrub.js): escenario fijo con el video de Remotion.
   Las 5 compuertas del hero estático están escritas igual acá y en scrub.js. */
.hero{position:relative;padding-top:var(--nav-h);border-top:0}
.hero-escenario{position:relative;display:flex;flex-direction:column;min-height:calc(100svh - var(--nav-h))}
.hero-medio{display:none}
.hero-textos{padding:28px var(--gutter) 24px}
.banda:not(.banda-1){display:none}
.banda-1{display:flex;flex-direction:column;align-items:flex-start}
.hero-lbl{margin-bottom:var(--s-4)}
.banda-1 .regla{margin:var(--s-5) 0 var(--s-4)}
.hero-lead{max-width:34ch;max-width:min(34em, 100%)}
.hero-cta{margin-top:var(--s-6)}
.anim-movil{position:relative;flex:1 1 auto;min-height:0}
.anim-movil canvas{position:absolute;inset:0}
.hero-flujo{border-top:var(--line)}
.flujo-cab{display:flex;align-items:center;min-height:36px;padding:0 var(--gutter);border-bottom:var(--line)}
.flujo li{display:grid;grid-template-columns:76px 1fr auto;align-items:center;gap:12px;padding:11px var(--gutter);border-bottom:var(--line)}
.flujo .paso{font-size:16px}
.flujo .dato{font-size:11px}
.flujo .senal{display:flex;align-items:center}
.flujo .senal .led{width:6px;height:6px;margin-right:6px}
.hero-franja{position:relative;border-bottom:0;background:var(--noche)}
.solo-interactivo{display:none}
.js .solo-interactivo{display:inline}
.hero-franja .f-base,.hero-franja .f-que{display:none}
.f-origen{flex:1;color:var(--gris);overflow:hidden}
.f-origen .codigo{margin-left:6px;overflow:hidden;text-overflow:ellipsis}
.f-scroll .cue-txt{display:none}
.carga-barra{position:absolute;left:0;right:0;top:-1px;height:1px;background:var(--hueso);transform-origin:left;transform:scaleX(var(--ld,0));opacity:0}
@media (max-width:374px){.f-origen-txt{display:none}}
@media (max-height:700px){.anim-movil{display:none}}
@media (min-width:600px){.hero-franja .f-base{display:flex}.f-scroll .cue-txt{display:inline}}
@media (min-width:901px){
  .hero-textos{padding:var(--s-14) var(--hx) var(--s-10)}
  .hero-lead{max-width:34em}
  .hero-cta{width:auto}
  .flujo-cab{padding:0 var(--hx)}
  .flujo li{grid-template-columns:120px 1fr auto;padding:14px var(--hx)}
}
@media (min-width:1100px){.hero-franja .f-que{display:flex}}

/* Hero estático en escritorio con movimiento reducido: la composición del scrub sobre el cuadro final. */
@media (prefers-reduced-motion:reduce) and (min-width:1025px) and (orientation:landscape){
  .hero-escenario{min-height:calc(100vh - var(--nav-h));overflow:hidden}
  .hero-medio{display:block;position:absolute;inset:0;bottom:var(--franja-h)}
  .hero-respaldo{position:absolute;inset:0;background:var(--noche) url(../img/hero-recorrido-final.webp) center/cover no-repeat}
  .hero-textos{position:relative;flex:1;display:flex;align-items:center;padding:var(--s-10) 0 var(--s-10) var(--hx);width:calc(var(--hx) + var(--hw))}
  .hero-flujo{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .anim-movil{display:none}
}

/* Hero scrub (escritorio): 600 vh de alto (500 vh de recorrido, medido con el flick test) y escenario fijo de 100 vh. */
.scrub-activo .hero{height:600vh;padding-top:0}
.scrub-activo .hero-escenario{position:sticky;top:0;height:100vh;min-height:0;overflow:hidden}
.scrub-activo .hero-medio{display:block;position:absolute;inset:0}
.scrub-activo .hero-respaldo{position:absolute;inset:0;background:var(--noche);opacity:0}
.scrub-activo.video-fallo .hero-respaldo{background:var(--noche) url(../img/hero-recorrido-final.webp) center/cover no-repeat;opacity:1;transition:opacity .6s var(--ease-salida)}
.hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:translateZ(0)}
.video-lista .hero-video{opacity:1;transition:opacity .5s var(--ease-salida)}
.video-fallo .hero-video{display:none}
.scrub-activo .hero-textos{position:absolute;top:var(--nav-h);bottom:var(--franja-h);left:var(--hx);width:var(--hw);padding:0}
.scrub-activo .banda{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;position:absolute;inset:0;opacity:0}
.scrub-activo .banda-1{opacity:1}
.scrub-activo .banda .regla{margin:var(--s-5) 0}
.scrub-activo .banda-1 .regla{margin:var(--s-5) 0 var(--s-4)}
.scrub-activo .banda .lbl{margin-bottom:0}
.banda-txt{font-family:var(--font-display);font-weight:700;font-size:var(--fs-h3-m);line-height:var(--lh-h3);letter-spacing:var(--ls-h3-m);max-width:16em}
@media (min-width:901px){.banda-txt{font-size:clamp(32px, 3.4vw, 48px);line-height:1;letter-spacing:-.04em}}
.banda-reposo .btn{margin-top:var(--s-8)}
.scrub-activo .hero-flujo{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.scrub-activo .anim-movil{display:none}
.scrub-activo .hero-franja{position:absolute;left:0;right:0;bottom:0;background:var(--noche);border-top:var(--line)}
.scrub-activo .carga-barra{opacity:1}
.scrub-activo .hero-franja .f-base,.scrub-activo .hero-franja .f-que{display:flex}
@media (max-height:560px){.scrub-activo .hero-franja .f-que{display:none}}
@media (max-height:720px) and (min-width:901px){.scrub-activo .h1{font-size:clamp(52px, 5.2vw, 72px)}}
/* Palabras partidas: entran en orden de lectura, en horizontal (eco de los tramos rectos del Recorrido). */
.w{display:inline-block;--kc:clamp(0, (var(--k,1) - var(--th,0)) * 2.4, 1);opacity:var(--kc);transform:translateX(calc((1 - var(--kc)) * -14px))}
/* Las 5 compuertas: si cualquiera aplica, el hero queda estático aunque falle el JS. Mismas cadenas que scrub.js. */
@media (max-width: 720px), (orientation: portrait) and (max-width: 1024px), (orientation: portrait) and (pointer: coarse), (orientation: landscape) and (pointer: coarse) and (max-height: 560px), (prefers-reduced-motion: reduce){
  .scrub-activo .hero{height:auto;padding-top:var(--nav-h)}
  .scrub-activo .hero-escenario{position:relative;height:auto;min-height:calc(100svh - var(--nav-h))}
  .scrub-activo .banda:not(.banda-1){display:none}
  .scrub-activo .hero-textos{position:relative;inset:auto;width:auto}
}

/* ── 02 · El problema ─────────────────────────────────────────────────────────────────────── */
.problema-foto img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}
.problema-texto{padding:var(--s-8) var(--gutter) var(--s-10)}
.problema-texto .regla{margin:var(--s-4) 0 var(--s-5)}
.problema-texto .lead{margin:var(--s-5) 0 var(--s-4);max-width:36em}
@media (min-width:901px){
  .problema{position:relative}
  .problema-foto img{max-height:92vh;min-height:560px}
  .problema-texto{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;padding:var(--s-14) var(--s-8)}
  .problema-texto > *{max-width:min(620px, 48vw)}
}

/* ── 03 · [01] Trabajos ───────────────────────────────────────────────────────────────────── */
.sec-franja .f-indice{color:var(--hueso)}
.trabajos-cuerpo{display:grid;grid-template-columns:1fr}
.trabajos-media{border-bottom:var(--line)}
.loop-caja{position:relative;overflow:hidden;background:var(--noche)}
.loop-caja img,.loop-caja video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.loop-caja video{opacity:0}
.loop-caja video.reproduciendo{opacity:1;transition:opacity .4s var(--ease-salida)}
.caja-4x5{aspect-ratio:4/5}
.caja-1x1{aspect-ratio:1/1}
.caja-16x9{aspect-ratio:16/9}
.trabajos-h2{padding:var(--s-8) var(--gutter) var(--s-6)}
.ficha{background:var(--superficie);border-top:var(--line)}
.ficha-cab{display:flex;justify-content:space-between;align-items:center;min-height:var(--franja-h);padding:0 var(--gutter);border-bottom:var(--line)}
.ficha-cab .lbl{color:var(--hueso)}
.estado{display:inline-flex;align-items:center;font:400 var(--fs-lbl)/1 var(--font-mono);letter-spacing:var(--ls-lbl);text-transform:uppercase;color:var(--senal)}
.ficha-cuerpo{padding:var(--s-5) var(--gutter) var(--s-6)}
.ficha-txt{margin-top:var(--s-3);color:var(--gris);max-width:40em}
.ficha-datos > div{display:grid;grid-template-columns:110px 1fr;border-top:var(--line)}
.ficha-datos dt{padding:14px var(--gutter);border-right:var(--line)}
.ficha-datos dd{padding:12px var(--gutter)}
.frase-pauta{display:flex;flex-direction:column;gap:var(--s-6);padding:var(--s-8) var(--gutter);border-top:var(--line)}
@media (min-width:901px){
  .trabajos-cuerpo{grid-template-columns:5fr 7fr}
  .trabajos-media{border-bottom:0;border-right:var(--line)}
  .trabajos-media .loop-caja{position:sticky;top:calc(var(--nav-h) + var(--s-8));margin:var(--s-8)}
  .trabajos-h2{padding:var(--s-10) var(--s-8) var(--s-8)}
  .ficha-cuerpo{padding:var(--s-6) var(--s-8)}
  .ficha-cab,.ficha-datos dt,.ficha-datos dd{padding-left:var(--s-8);padding-right:var(--s-8)}
  .ficha-datos dt{padding-right:0}
  .ficha-datos > div{grid-template-columns:140px 1fr}
  .frase-pauta{flex-direction:row;align-items:center;justify-content:space-between;gap:var(--s-10);padding:var(--s-10) var(--s-8)}
  .frase-pauta .h3{max-width:22em}
  .frase-pauta .btn{flex:none}
}

/* ── [01] Trabajos: carrusel de webs online (main.js lo mueve con un resorte, solo transform y opacity) ── */
.obras-cab{display:grid;gap:var(--s-6);padding:var(--s-10) var(--gutter) var(--s-8)}
.obras-cab .regla{margin:var(--s-4) 0 var(--s-5)}
.obras-cab .lead{margin-top:var(--s-4);max-width:34em}
.obras-flechas{display:flex;align-items:center;gap:var(--s-4)}
.obras-btn{all:unset;box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;width:52px;height:52px;border:1px solid var(--hueso);color:var(--hueso);font:700 18px/1 var(--font-mono);cursor:pointer}
.obras-btn:hover{background:var(--hueso);color:var(--noche)}
.obras-btn:focus-visible{outline:2px solid var(--hueso);outline-offset:3px}
.obras-btn:disabled{border-color:var(--grafito);color:var(--gris);cursor:default;background:none}
.obras-cuenta{min-width:44px;text-align:center}
.obras-ventana{overflow:hidden;border-top:var(--line);border-bottom:var(--line);padding:var(--s-8) 0}
.obras-pista{display:flex;gap:var(--s-6);padding:0 var(--gutter);touch-action:pan-y;cursor:grab;user-select:none;-webkit-user-select:none;will-change:transform}
.obras-pista.arrastrando{cursor:grabbing}
.obra{flex:0 0 82vw;transform-origin:center}
.obra a{display:block;border:1px solid var(--grafito);background:var(--superficie);text-decoration:none;color:var(--hueso)}
.obra a:hover,.obra a:focus-visible{border-color:var(--hueso)}
.obra a:focus-visible{outline:2px solid var(--hueso);outline-offset:3px}
.obra img{width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;object-position:top;pointer-events:none}
.obra-pie{display:flex;flex-direction:column;gap:4px;padding:var(--s-4) var(--s-5);border-top:var(--line)}
.obra-pie .dato{overflow-wrap:anywhere}
.obras-cierre{display:flex;flex-direction:column;gap:var(--s-6);padding:var(--s-8) var(--gutter) var(--s-10)}
@media (min-width:901px){
  .obras-cab{grid-template-columns:1fr auto;align-items:end;padding:var(--s-14) var(--s-8) var(--s-10)}
  .obras-pista{padding:0 max(var(--s-8), calc((100vw - var(--contenedor)) / 2 + var(--s-8)))}
  .obra{flex-basis:min(46vw, 560px)}
  .obra-pie{flex-direction:row;justify-content:space-between;align-items:baseline}
  .obras-cierre{flex-direction:row;align-items:center;justify-content:space-between;padding:var(--s-10) var(--s-8)}
}

/* ── 04 · Anatomía de una consulta (el momento interactivo) ───────────────────────────────── */
.anatomia-cab{display:grid;gap:var(--s-6);padding:var(--s-10) var(--gutter) var(--s-8)}
.anatomia-intro .regla{margin:var(--s-4) 0 var(--s-5)}
.anatomia-intro .lead{margin-top:var(--s-4);max-width:34em}
.btn-hold{all:unset;box-sizing:border-box;position:relative;display:flex;align-items:center;justify-content:center;width:100%;min-height:64px;padding:18px 24px;border:1px solid var(--hueso);font:700 var(--fs-btn)/1.2 var(--font-mono);letter-spacing:var(--ls-btn);text-transform:uppercase;color:var(--hueso);text-align:center;cursor:pointer;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
.btn-hold:hover{background:var(--superficie)}
.btn-hold:focus-visible{outline:2px solid var(--hueso);outline-offset:3px}
.btn-hold-barra{position:absolute;left:0;bottom:0;width:100%;height:3px;background:var(--hueso);transform-origin:left;transform:scaleX(var(--p,0))}
.anatomia-cuerpo{position:relative;border-top:var(--line)}
.anatomia-riel{position:absolute;top:0;bottom:0;left:0;width:40px;border-right:var(--line)}
.anatomia-traza{position:absolute;left:19px;top:var(--y0,40px);width:2px;height:var(--ytr,0px);background:var(--hueso);opacity:.4}
.anatomia-punto{position:absolute;left:16px;top:0;width:var(--led);height:var(--led);margin-top:-3px;background:var(--hueso);transform:translateY(var(--yp,40px))}
.fila{display:grid;grid-template-columns:52px 1fr;gap:6px 12px;padding:var(--s-5) var(--gutter) var(--s-5) 56px;border-bottom:var(--line)}
.hora{font:700 13px/1.6 var(--font-mono);letter-spacing:.5px;color:var(--gris)}
.fila-que{display:flex;flex-direction:column;gap:4px}
.fila-txt{color:var(--gris)}
.registro{grid-column:2;display:flex;flex-direction:column;gap:4px}
.registro .dato{color:var(--hueso);display:flex;align-items:center}
.fila-final .registro .dato{color:var(--senal)}
.anatomia-cierre{display:flex;flex-direction:column;gap:var(--s-6);padding:var(--s-8) var(--gutter) var(--s-10)}
.anatomia-accion,.anatomia-punto{display:none}
.js .anatomia-accion,.js .anatomia-punto{display:block}
/* Estados que maneja main.js. Sin JS o con movimiento reducido se ve el estado final: todo registrado y el LED encendido. */
.js-anatomia .fila .paso{color:var(--gris)}
.js-anatomia .fila .registro{opacity:0;transform:translateX(-8px)}
.js-anatomia .fila.hecha .paso{color:var(--hueso)}
.js-anatomia .fila.hecha .registro{opacity:1;transform:none;transition:opacity .35s var(--ease-salida),transform .35s var(--ease-salida)}
.js-anatomia .fila.hecha .hora{color:var(--hueso)}
.js-anatomia:not(.completa) .fila-final .registro .led{background:var(--gris)}
.js-anatomia:not(.completa) .fila-final .registro .dato{color:var(--hueso)}
.js-anatomia .anatomia-cierre{opacity:0}
.js-anatomia.completa .anatomia-cierre{opacity:1;transition:opacity .5s var(--ease-salida)}
@media (min-width:901px){
  .anatomia-cab{grid-template-columns:1fr 340px;align-items:end;gap:var(--s-10);padding:var(--s-14) var(--s-8) var(--s-10)}
  .anatomia-riel{width:64px}
  .anatomia-traza{left:31px}
  .anatomia-punto{left:28px}
  .fila{grid-template-columns:96px 1fr 300px;align-items:baseline;gap:var(--s-6);padding:var(--s-6) var(--s-8) var(--s-6) 96px}
  .registro{grid-column:auto}
  .anatomia-cierre{flex-direction:row;align-items:center;justify-content:space-between;padding:var(--s-10) var(--s-8)}
}

/* ── 05 · [02] Método ─────────────────────────────────────────────────────────────────────── */
.metodo-foto{position:relative}
.metodo-foto img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}
.metodo-texto{padding:var(--s-8) var(--gutter) var(--s-8)}
.metodo-texto .regla{margin:var(--s-4) 0 var(--s-5)}
.metodo-texto .lead{margin-top:var(--s-5);max-width:30em}
.hitos{display:grid;grid-template-columns:1fr;border-top:var(--line)}
.hito{display:flex;flex-direction:column;gap:6px;padding:var(--s-5) var(--gutter);border-bottom:var(--line)}
.hito .dato{text-transform:uppercase;letter-spacing:1px}
.hito-txt{color:var(--gris)}
.arrancar{display:grid;grid-template-columns:1fr}
.arrancar-lbl{padding:var(--s-5) var(--gutter) var(--s-3)}
.arrancar-celda{padding:var(--s-4) var(--gutter) var(--s-5);border-bottom:var(--line)}
.arrancar-celda p{margin-top:6px;color:var(--gris);max-width:30em}
.arrancar-cta{padding:var(--s-6) var(--gutter) var(--s-10)}
@media (min-width:640px){.hitos{grid-template-columns:1fr 1fr}.hito:nth-child(odd){border-right:var(--line)}}
@media (min-width:901px){
  .metodo-foto img{max-height:92vh;min-height:560px}
  .metodo-texto{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;padding:var(--s-14) var(--s-8) var(--s-14) 55%}
  .metodo-texto > *{max-width:min(520px, 40vw)}
  .hitos{grid-template-columns:repeat(4, 1fr)}
  .hito{padding:var(--s-6) var(--s-8);min-height:150px}
  .hito:nth-child(odd){border-right:0}
  .hito + .hito{border-left:var(--line)}
  .arrancar{grid-template-columns:200px 1fr 1fr auto;border-bottom:var(--line)}
  .arrancar-lbl{padding:var(--s-6) var(--s-8);border-right:var(--line)}
  .arrancar-celda{padding:var(--s-6) var(--s-8);border-bottom:0;border-right:var(--line)}
  .arrancar-cta{display:flex;align-items:center;padding:var(--s-6) var(--s-8)}
}

/* ── 06 · [03] Medición ───────────────────────────────────────────────────────────────────── */
.medicion-cuerpo{display:grid;grid-template-columns:1fr}
.medicion-texto{padding:var(--s-10) var(--gutter) var(--s-8)}
.medicion-texto .regla{margin:var(--s-4) 0 var(--s-5)}
.medicion-texto .lead{margin:var(--s-5) 0 var(--s-6);max-width:34em}
.piezas > div{display:grid;grid-template-columns:1fr;gap:4px;padding:var(--s-4) 0;border-top:var(--line)}
.piezas dt{color:var(--hueso)}
.piezas dd{color:var(--gris);max-width:34em}
.medicion-media{border-top:var(--line)}
.utm{border-top:var(--line)}
.utm-cab{display:flex;justify-content:space-between;align-items:center;min-height:var(--franja-h);padding:0 var(--gutter);border-bottom:var(--line)}
.utm-filas li{display:grid;grid-template-columns:36px 1fr auto;align-items:center;border-bottom:var(--line);font:400 12px/1.5 var(--font-mono)}
.utm-n,.utm-c{padding:12px var(--gutter) 12px 12px;color:var(--gris)}
.utm-n{padding-left:var(--gutter);padding-right:0}
.utm-filas code{padding:12px;border-left:var(--line);border-right:var(--line);color:var(--hueso);overflow-wrap:anywhere}
.firma{display:grid;grid-template-columns:1fr;border-bottom:var(--line)}
.firma-estado{display:flex;align-items:center;flex-wrap:wrap;gap:6px 10px;padding:var(--s-5) var(--gutter);border-bottom:var(--line)}
.firma-estado .led{margin-right:0}
.firma-estado .codigo{font-size:15px}
.firma-txt{padding:var(--s-5) var(--gutter);font-size:var(--fs-lead-m);line-height:var(--lh-lead)}
.firma-txt b{font-family:var(--font-mono);font-weight:700;font-size:.92em}
.firma-cta{padding:0 var(--gutter) var(--s-8)}
@media (min-width:901px){
  .medicion-cuerpo{grid-template-columns:7fr 5fr}
  .medicion-texto{padding:var(--s-14) var(--s-8) var(--s-10)}
  .piezas > div{grid-template-columns:200px 1fr;gap:var(--s-6)}
  .medicion-media{border-top:0;border-left:var(--line);align-self:stretch;aspect-ratio:auto;min-height:100%}
  .utm-cab{padding:0 var(--s-8)}
  .utm-filas li{grid-template-columns:64px 1fr 120px;font-size:13px}
  .utm-n{padding:14px 0 14px var(--s-8)}
  .utm-c{padding:14px var(--s-8);text-align:right}
  .utm-filas code{padding:14px var(--s-6)}
  .firma{grid-template-columns:auto 1fr auto;align-items:center}
  .firma-estado{padding:var(--s-6) var(--s-8);border-bottom:0;border-right:var(--line);align-self:stretch}
  .firma-txt{padding:var(--s-6) var(--s-8);font-size:var(--fs-lead)}
  .firma-cta{padding:var(--s-6) var(--s-8)}
}

/* ── 07 · Tu cotización ───────────────────────────────────────────────────────────────────── */
.cotiz-cab{padding:var(--s-10) var(--gutter) var(--s-8)}
.cotiz-cab .regla{margin:var(--s-4) 0 var(--s-5)}
.cotiz-cab .lead{margin-top:var(--s-5);color:var(--hueso)}
.cotiz-cols{display:grid;grid-template-columns:1fr;border-top:var(--line)}
.cotiz-tit{padding:var(--s-4) var(--gutter);border-bottom:var(--line)}
.cotiz-no .cotiz-tit{border-top:var(--line)}
.incluye li{display:grid;grid-template-columns:52px 1fr;gap:var(--s-2) var(--s-3);padding:var(--s-5) var(--gutter);border-bottom:var(--line)}
.inc-que{display:flex;flex-direction:column;gap:4px}
.inc-txt{color:var(--gris);max-width:34em}
.inc-ent{grid-column:2;color:var(--hueso)}
.cotiz-opcional{border-top:var(--line)}
.no-incluye li{display:flex;flex-direction:column;gap:4px;padding:var(--s-5) var(--gutter);border-bottom:var(--line)}
.no-incluye .paso{color:var(--gris)}
.no-incluye li:first-child .paso{color:var(--hueso)}
.cotiz-cta{padding:var(--s-8) var(--gutter) var(--s-10)}
@media (min-width:901px){
  .cotiz-cab{padding:var(--s-14) var(--s-8) var(--s-10)}
  .cotiz-cols{grid-template-columns:7fr 5fr}
  .cotiz-no{border-left:var(--line)}
  .cotiz-no .cotiz-tit{border-top:0}
  .cotiz-tit{padding:var(--s-4) var(--s-8)}
  .incluye li{grid-template-columns:72px 1fr 160px;align-items:baseline;gap:var(--s-6);padding:var(--s-6) var(--s-8)}
  .inc-ent{grid-column:auto;text-align:right}
  .no-incluye li{padding:var(--s-6) var(--s-8)}
  .cotiz-cta{padding:var(--s-8)}
}

/* ── 08 · Preguntas frecuentes ────────────────────────────────────────────────────────────── */
.faq-cuerpo{display:grid;grid-template-columns:1fr}
.faq-cab{padding:var(--s-10) var(--gutter) var(--s-6)}
.faq-cab .h2{margin-top:var(--s-4)}
.faq-cta-escritorio{display:none}
.faq-lista{border-top:var(--line)}
.faq-lista details{border-bottom:var(--line)}
.faq-lista summary{display:flex;justify-content:space-between;align-items:center;gap:var(--s-4);min-height:64px;padding:var(--s-4) var(--gutter);font:500 17px/1.35 var(--font-body);color:var(--hueso);cursor:pointer;list-style:none}
.faq-lista summary::-webkit-details-marker{display:none}
.faq-lista summary:hover{background:var(--superficie)}
.faq-lista summary:focus-visible{outline:2px solid var(--hueso);outline-offset:-4px}
.faq-lista summary i{position:relative;flex:none;width:12px;height:12px}
.faq-lista summary i::before,.faq-lista summary i::after{content:"";position:absolute;left:0;top:5px;width:12px;height:2px;background:var(--hueso)}
.faq-lista summary i::after{transform:rotate(90deg)}
.faq-lista details[open] summary i::after{transform:rotate(0deg)}
.faq-lista details p{padding:0 var(--gutter) var(--s-6);color:var(--gris);max-width:44em}
.faq-cta-movil{margin:var(--s-8) var(--gutter) var(--s-10);width:calc(100% - 2 * var(--gutter))}
@media (min-width:901px){
  .faq-cuerpo{grid-template-columns:4fr 8fr}
  .faq-cab{position:sticky;top:var(--nav-h);align-self:start;padding:var(--s-14) var(--s-8)}
  .faq-cta-escritorio{display:inline-flex;margin-top:var(--s-8)}
  .faq-cta-movil{display:none}
  .faq-lista{border-top:0;border-left:var(--line)}
  .faq-lista summary{padding:var(--s-5) var(--s-8);font-size:18px}
  .faq-lista details p{padding:0 var(--s-8) var(--s-6)}
}

/* ── 09 · [04] Cotización: el asistente real ──────────────────────────────────────────────── */
.asist-cuerpo{display:grid;grid-template-columns:1fr}
.asist-izq{padding:var(--s-10) var(--gutter) var(--s-6)}
.asist-izq .h2{margin-top:var(--s-4)}
.asist-izq .lead{margin-top:var(--s-4);max-width:32em}
.asist-media{margin-top:var(--s-6);border:var(--line)}
.asist-puntos{margin-top:var(--s-6);border-top:var(--line)}
.asist-puntos li{display:grid;grid-template-columns:48px 1fr;align-items:baseline;padding:var(--s-4) 0;border-bottom:var(--line)}
.asist-der{padding:0 0 var(--s-10)}
@media (min-width:901px){
  .asist-cuerpo{grid-template-columns:1fr 520px}
  .asist-izq{padding:var(--s-14) var(--s-10) var(--s-14) var(--s-8);border-right:var(--line)}
  .asist-der{padding:var(--s-10)}
}
@media (min-width:901px) and (max-width:1100px){.asist-cuerpo{grid-template-columns:1fr 460px}.asist-der{padding:var(--s-8)}}
/* Ajustes del asistente a esta página (el componente no se toca) */
.asist .rac{min-height:600px}
@media (max-width:900px){.asist .rac{border-left:0;border-right:0}}

/* ── 10 · Footer en celdas ────────────────────────────────────────────────────────────────── */
.pie{border-top:var(--line);padding-bottom:var(--s-20)}
.pie-grid{display:grid;grid-template-columns:1fr}
.pie-celda{padding:var(--s-6) var(--gutter);border-bottom:var(--line)}
.pie-logo img{height:46px;width:auto;margin-left:-11px}
.pie-logo .lbl{margin-top:var(--s-3)}
.pie-wa ul{margin-top:var(--s-3)}
.pie-wa li{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-2) var(--s-6);padding:6px 0}
.pie-link,.pie-tel{display:inline-flex;align-items:center;gap:8px;min-height:44px;font:700 var(--fs-btn)/1.2 var(--font-mono);letter-spacing:var(--ls-btn);text-transform:uppercase;text-decoration:none}
.pie-link{color:var(--hueso)}
.pie-link:hover{text-decoration:underline;text-underline-offset:5px}
.pie-tel{color:var(--gris);text-decoration:underline;text-underline-offset:5px}
.pie-tel:hover{color:var(--hueso)}
.pie-datos .lbl + .pie-dato{margin:4px 0 var(--s-4)}
.pie-dato{color:var(--hueso);text-transform:uppercase;letter-spacing:1px}
@media (min-width:901px){
  .pie{padding-bottom:0}
  .pie-grid{grid-template-columns:220px 1.3fr 0.9fr 1.2fr}
  .pie-celda{padding:var(--s-8);border-bottom:0}
  .pie-celda + .pie-celda{border-left:var(--line)}
}

/* ── Barra fija inferior en celular ───────────────────────────────────────────────────────── */
.barra-cta{position:fixed;left:0;right:0;bottom:0;z-index:30;width:100%;min-height:56px;padding:18px var(--s-4);padding-bottom:calc(18px + env(safe-area-inset-bottom, 0px));border:0;border-top:1px solid var(--noche);transform:translateY(110%);transition:transform .3s var(--ease-salida)}
.barra-cta.visible{transform:translateY(0)}
.barra-cta:hover{background:var(--hueso);color:var(--noche)}
@media (min-width:901px){.barra-cta{display:none}}

/* ── Entradas: líneas que se dibujan una vez (main.js agrega .in) ─────────────────────────── */
.js .se-dibuja .regla{--k:0;transition:transform .9s var(--ease-salida)}
.js .se-dibuja.in .regla{--k:1}
.video-lista .carga-barra{opacity:0;transition:opacity .6s var(--ease-salida)}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}

/* ── Táctil: objetivos de 44 px ───────────────────────────────────────────────────────────── */
@media (pointer:coarse){.btn,.btn2,.nav-links a{min-height:44px}}

/* ── Pestaña oculta: todo quieto ──────────────────────────────────────────────────────────── */
body.pausado *,body.pausado *::before,body.pausado *::after{animation-play-state:paused!important}

/* ── Movimiento reducido: estados finales, sin transiciones ───────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none!important;animation:none!important;transition-delay:0s!important}
  .regla,.js .se-dibuja .regla{--k:1;transform:none}
  .w{--k:1;opacity:1;transform:none}
  .barra-cta{transition:none}
  .btn-hold,.js .solo-interactivo{display:none}
}

/* Ronda 2: precios desde y los dos links de WhatsApp al final del asistente */
.precios{display:grid;gap:0;margin-top:var(--s-6);border-top:var(--line)}
.precios > div{display:grid;gap:4px;padding:var(--s-4) 0;border-bottom:var(--line)}
.precios dd{display:flex;flex-direction:column;gap:4px}
.precio{font-family:var(--font-display);font-weight:700;font-size:var(--fs-h3-m);line-height:1.05;letter-spacing:var(--ls-h3-m);color:var(--hueso)}
@media (min-width:901px){.precios{grid-template-columns:1fr 1fr;max-width:900px}.precios > div{padding:var(--s-5) var(--s-6) var(--s-5) 0}.precios > div + div{padding-left:var(--s-6);border-left:var(--line)}.precio{font-size:var(--fs-h3);letter-spacing:var(--ls-h3)}}
.rac-enlaces{display:flex;flex-wrap:wrap;gap:12px;margin-top:8px}
.pie-link{text-decoration:none}
/* Ronda 3: dos botones al final del asistente (Dylan y Gero) */
.rac-pie-final{flex-wrap:wrap}
.rac .rac-pie-final .rac-sig{flex:1 1 180px}
@media (max-width:520px){.rac .rac-pie-final .rac-atras,.rac .rac-pie-final .rac-sig{flex:1 0 100%}}
/* Otros contactos en el pie: correo, Instagram y dominio (en minúsculas, como se escriben) */
.pie-otros{margin:var(--s-2) 0 var(--s-4)}
.pie-otros li{padding:2px 0}
.pie-minus{text-transform:none;letter-spacing:0;overflow-wrap:anywhere}
/* Legales (guía de requisitos, 2026-10-31): consentimiento en el asistente y aviso de cookies */
[hidden]{display:none!important}
.rac-consent{display:flex;align-items:flex-start;gap:12px;margin-top:var(--s-5);font:400 14px/1.5 var(--font-body);color:var(--gris);cursor:pointer}
.rac-consent input{flex:none;width:20px;height:20px;margin:1px 0 0;accent-color:var(--hueso);border-radius:0}
.rac-consent a{color:var(--hueso);text-decoration:underline;text-underline-offset:4px}
.aviso-cookies{position:fixed;left:0;right:0;bottom:0;z-index:60;background:var(--noche);border-top:var(--line);padding:var(--s-5) var(--gutter);padding-bottom:calc(var(--s-5) + env(safe-area-inset-bottom, 0px));display:grid;gap:var(--s-3)}
.aviso-txt{color:var(--hueso);max-width:56em}
.aviso-txt a{color:var(--hueso);text-decoration:underline;text-underline-offset:4px}
.aviso-botones{display:flex;flex-wrap:wrap;gap:var(--s-4);align-items:center}
@media (min-width:901px){.aviso-cookies{grid-template-columns:auto 1fr auto;align-items:center;gap:var(--s-6);padding:var(--s-4) var(--s-8)}}
.aviso-cookies .btn2{background:none;border:0;padding:0;cursor:pointer}
.pie-legales{display:flex;flex-direction:column;gap:2px}
.aviso-botones .btn{width:auto;flex:1 1 auto;min-width:0}@media (max-width:900px){.aviso-cookies{gap:var(--s-2);padding-top:var(--s-4)}.aviso-txt{font-size:14px}}