@layer reset, tokens, base, layout, components, motion, after, utilities;

/* inherits:false a propósito: .scr también lleva --in y el callout no debe heredarlo. Registrada para poder transicionarla */
@property --cin { syntax:'<number>'; inherits:false; initial-value:0 }

/* ───────────────────────── reset ───────────────────────── */
@layer reset{
  *{ margin:0; padding:0; box-sizing:border-box }
  html, body{ width:100%; overscroll-behavior:none; }
  img, video, canvas, svg{ display:block; max-width:100% }
  a{ color:inherit; text-decoration:none }
  dl, dt, dd{ margin:0 }
}

/* ───────────────────────── tokens ───────────────────────── */
@layer tokens{
  /* Marco de diseño 1470×900: cada medida va contra --u = 1/1470 del ancho, con mínimos en px */
  :root{
    --u: calc(100vw / 1470);
    --w: #ffffff;
    --k: #030303;
    --red: #c8102e;           /* el aro rojo del producto: un solo acento, en dosis mínimas */
    --pol: 0;

    --fs-120: max(56px, calc(120 * var(--u)));
    --fs-80:  max(40px, calc(80 * var(--u)));
    --fs-60:  max(34px, calc(60 * var(--u)));
    --fs-24:  max(15px, calc(24 * var(--u)));
    --fs-18:  max(13px, calc(18 * var(--u)));
    --fs-14:  max(12px, calc(14 * var(--u)));

    --font: 'Inter Tight', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --track: -0.03em;

    --gutter: max(16px, calc(24 * var(--u)));
    --r: 8px;
    --blur: blur(12px);

    --ease-expo: cubic-bezier(.16,1,.3,1);
    --ease-strong: cubic-bezier(.23,1,.32,1);

    --runway: 1000vh;

    --z-stage:0; --z-rev-a:5; --z-rev-b:7;
    --z-outro:8; --z-cutout:9; --z-chrome:10; --z-pill:50;
  }
  *{ letter-spacing:var(--track) }

  /* Los colores derivados viven en cada racimo de POLARIDAD (.pol), nunca en :root */
  .pol, .skip, .tone-light, .tone-dark{
    --ink:   color-mix(in srgb, var(--w), var(--k) calc(var(--pol) * 100%));
    --plate: color-mix(in srgb, var(--k), var(--w) calc(var(--pol) * 100%));
    --ov: color-mix(in srgb, rgba(255,255,255,.10), rgba(3,3,3,.07) calc(var(--pol) * 100%));
    --hairline: color-mix(in srgb, rgba(255,255,255,.16), rgba(3,3,3,.16) calc(var(--pol) * 100%));
    --ink-fade: color-mix(in srgb, var(--ink), var(--plate) 35%);
    --grad: linear-gradient(180deg, var(--ink) 0%, var(--ink-fade) 136.55%);
  }
}

/* ───────────────────────── base ───────────────────────── */
@layer base{
  body{
    font-family:var(--font); font-weight:400;
    background:var(--k); color:var(--w);
    -webkit-font-smoothing:antialiased;
    font-variant-numeric:tabular-nums;
  }
  .runway{ height:var(--runway) }
  ::selection{ background:var(--w); color:var(--k) }
  :where(a):focus-visible{ outline:2px solid var(--ink, #fff); outline-offset:3px }
}

/* ───────────────────────── layout ───────────────────────── */
@layer layout{
  /* PLANO 1: estudio oscuro con un foco detrás del producto */
  .stage{ position:fixed; inset:0; z-index:var(--z-stage); overflow:hidden;
          background:
            radial-gradient(ellipse 34% 52% at 60% 52%, #34353a 0%, #16171a 48%, rgba(3,3,3,0) 100%),
            var(--k);
          opacity:calc(1 - var(--stage-out,0)); }
  /* fondo animado (triángulo cromado y tubos negros): atenuado para que el producto mande */
  .bgv{ position:absolute; inset:0; width:100%; height:100%; max-width:none; object-fit:cover;
        opacity:.62; filter:brightness(.78) contrast(1.06);
        transform:scale(calc(1.04 + var(--q,0) * .1)); }
  /* velo: oscurece bordes y la franja del texto; deja respirar el centro */
  .veil{ position:absolute; inset:0; pointer-events:none;
         background:
           radial-gradient(ellipse 60% 62% at 58% 48%, rgba(3,3,3,0) 0%, rgba(3,3,3,.45) 62%, rgba(3,3,3,.88) 100%),
           linear-gradient(0deg, rgba(3,3,3,.85) 0%, rgba(3,3,3,0) 42%); }

  .shot{ position:absolute; max-width:none; will-change:transform }
  .shot--hero{
    height:88vh; width:auto; left:60%; top:50%;
    filter:drop-shadow(0 30px 60px rgba(0,0,0,.6));
    transform:translate(-50%,-50%)
              translateY(calc(var(--q,0) * -5vh))
              rotate(calc(-14deg + var(--q,0) * 20deg))
              scale(calc(.92 + var(--q,0) * .2));
  }

  /* Revelado A: anclado a la DERECHA, crece hacia la izquierda; el marco mide 100vw fijo a la derecha para que la imagen no se deslice con la caja */
  .reveal{ position:fixed; top:0; right:0; height:100%;
           width:calc(var(--reveal,0) * 100vw);
           overflow:hidden; pointer-events:none; background:var(--w); }
  .reveal--a{ z-index:var(--z-rev-a) }
  /* Revelado B: anclado ABAJO, crece hacia arriba. La disolución suelta solo la imagen; la caja blanca queda como plano final */
  .reveal--b{ z-index:var(--z-rev-b);
              top:auto; bottom:0; right:0;
              width:100vw; height:calc(var(--reveal,0) * 100vh); }
  .frame{ position:absolute; top:0; right:0; width:100vw; height:100% }
  .reveal--b .frame{ top:auto; bottom:0; height:100vh; opacity:calc(1 - var(--dissolve,0)) }
  /* línea fina en el borde de avance del barrido, viva solo mientras viaja */
  .reveal::before{ content:''; position:absolute; z-index:1; left:0; top:0; bottom:0; width:1px;
                   background:rgba(3,3,3,.22); opacity:var(--edge,0); }
  .reveal--b::before{ left:0; right:0; top:0; bottom:auto; width:auto; height:1px }
  .is-covered{ visibility:hidden }

  .shot--press{
    height:94vh; width:auto; right:3vw; bottom:0;
    transform-origin:62% 88%;
    transform:translateY(calc((1 - var(--q,0)) * 3vh)) scale(calc(1 + var(--q,0) * .12));
  }
  .shot--open{
    width:min(60vw, 104vh); height:auto; left:4vw; top:50%;
    transform:translate(calc((.5 - var(--q,0)) * 5vw), -50%)
              rotate(calc(-3deg + var(--q,0) * 5deg))
              scale(calc(.96 + var(--q,0) * .1));
  }

  /* EL RECORTE: un solo movimiento continuo derivado de --exit en polinomios
     (baja primero; crecer y desenfocar arrancan después, al cuadrado para salir desde velocidad cero) */
  .cut-wrap{ position:fixed; inset:0; z-index:var(--z-cutout); pointer-events:none; }
  .cutout{
    position:absolute; left:50%; top:50%;
    height:min(86vh, 62vw); width:auto; max-width:none;
    opacity:var(--cut,0);
    transform-origin:50% 50%;
    --e2:calc(var(--exit,0) * var(--exit,0));
    --e3:calc(var(--e2) * var(--exit,0));
    --eg:clamp(0, calc((var(--exit,0) - .45) / .55), 1);
    --eb:clamp(0, calc((var(--exit,0) - .55) / .45), 1);
    transform:translate(-50%,-50%)
              translateY(calc(var(--e2) * 75vh + var(--e3) * 80vh + (1 - var(--cut,0)) * 4vh))
              rotate(calc(-62deg + (1 - var(--cut,0)) * -8deg))
              scale(calc((.9 + var(--cut,0) * .1) * (1 + var(--eg) * var(--eg) * 1.8)));
  }
  .cutout.is-diving{ filter:blur(calc(var(--eb) * var(--eb) * 64px)); }

  .plate-out{ position:fixed; inset:0; z-index:var(--z-outro); background:var(--w);
              opacity:var(--vidfade,0); pointer-events:none; }

  .chrome{ position:fixed; inset:0; z-index:var(--z-chrome); pointer-events:none }
  .scr{ position:absolute; inset:0 }

  .display{ position:absolute; margin:0 }
  .display--hero{ left:var(--gutter); bottom:calc(228 / 900 * 100%); font-size:var(--fs-120); }
  .display--s2{   left:var(--gutter); bottom:calc(523 / 900 * 100%); font-size:var(--fs-80); }
  .display--s3{   right:var(--gutter); bottom:calc(523 / 900 * 100%); font-size:var(--fs-80); text-align:right; }

  .note{ position:absolute; left:var(--gutter); bottom:calc(33 / 900 * 100%);
         width:max(260px, calc(305 * var(--u)));
         font-size:var(--fs-14); line-height:calc(17 / 14); }
  .note--right{ left:auto; right:var(--gutter); text-align:right; }

  /* imágenes solo para la lectura móvil / sin JS */
  .m-shot{ display:none }

  /* CALLOUT: un anillo y nada más, posicionado en píxeles del marco con --bx/--by, con una leve deriva de paralaje */
  .callout{ position:absolute;
            left:calc(var(--bx) / 1470 * 100%); top:calc(var(--by) / 900 * 100%);
            transform:translateY(calc((0.5 - var(--par,0.5)) * 56px)); }
  .badge{ position:relative; width:max(96px, calc(120 * var(--u))); aspect-ratio:1;
          display:flex; align-items:center; justify-content:center; text-align:center; }
  .ring{ position:absolute; inset:0; width:100%; height:100%; overflow:visible }
  .ring circle{ fill:none; stroke:var(--ink); stroke-width:1;
                stroke-dasharray:374;
                stroke-dashoffset:calc((1 - var(--draw,0)) * 374);
                transform:rotate(-90deg); transform-origin:50% 50%; }

  .card{ position:absolute; right:var(--gutter); bottom:var(--gutter);
         width:max(300px, calc(345 * var(--u))); padding:4px;
         display:flex; flex-direction:column; gap:max(26px, calc(36 * var(--u)));
         background:var(--ov);
         backdrop-filter:var(--blur); -webkit-backdrop-filter:var(--blur);
         border-radius:var(--r); }
  .card-body{ padding:max(32px, calc(48 * var(--u))) 16px 0;
              display:flex; flex-direction:column; gap:max(18px, calc(24 * var(--u))); }

  .pill{ position:fixed; top:var(--gutter); left:var(--gutter); z-index:var(--z-pill);
         width:max(300px, calc(345 * var(--u))); height:max(37px, calc(41 * var(--u)));
         padding:4px 4px 4px 14px;
         display:flex; justify-content:space-between; align-items:center;
         background:var(--ov);
         backdrop-filter:var(--blur); -webkit-backdrop-filter:var(--blur);
         border-radius:var(--r); }
  .pill-nav{ display:flex; align-items:center; gap:16px; font-size:var(--fs-18); color:var(--ink) }
  .pill-nav a{ pointer-events:auto }
  .pill-mark{ display:flex; align-items:center; gap:8px; font-weight:500 }
  /* el logo blanco usado como máscara: toma el color de la tinta y cambia de polaridad con todo lo demás */
  .logo{ width:30px; height:14px; background:var(--ink);
         -webkit-mask:url(assets/logo.png) center / contain no-repeat;
                 mask:url(assets/logo.png) center / contain no-repeat; }

  /* FICHA (z 8, BAJO el recorte en 9): un grupo centrado que NO viaja; la oclusión hace el trabajo */
  .outro{ position:fixed; inset:0; z-index:var(--z-outro); padding:var(--gutter);
          display:flex; flex-direction:column; align-items:center; justify-content:center;
          gap:max(32px, calc(44 * var(--u))); pointer-events:none; }
  .outro a{ pointer-events:auto }
  .display--fin{ position:static; font-size:var(--fs-80); text-align:center; white-space:nowrap;
                 opacity:var(--fin,0);
                 transform:translateY(calc((1 - var(--fin,0)) * 26px)); }
  .outro.is-anim .display--fin{ filter:blur(calc((1 - var(--fin,0)) * 12px)) }
  .outro-foot{ display:flex; flex-direction:column; align-items:center;
               gap:max(20px, calc(32 * var(--u))); width:min(720px, 100%) }
  .spec{ width:min(720px, 100%) }
  .spec-row{ display:grid; grid-template-columns:minmax(96px, 1fr) 2.4fr; gap:16px;
             padding:max(8px, calc(11 * var(--u))) 0;
             border-top:1px solid var(--hairline); }
  .spec-row:last-child{ border-bottom:1px solid var(--hairline) }
  .spec dd{ display:flex; justify-content:space-between; gap:1em }
}

/* ───────────────────────── components ───────────────────────── */
@layer components{
  .display{ font-weight:400; line-height:1;
            background:var(--grad);
            -webkit-background-clip:text; background-clip:text;
            -webkit-text-fill-color:transparent; color:transparent; }
  .display, .b-read{ padding-bottom:.08em }

  .note{ color:var(--ink) }

  .b-read{ position:relative; font-size:var(--fs-24); line-height:1;
           background:var(--grad);
           -webkit-background-clip:text; background-clip:text;
           -webkit-text-fill-color:transparent; color:transparent;
           opacity:var(--val,0);
           transform:translateY(calc((1 - var(--val,0)) * .22em)); }
  .callout.is-anim .b-read{ filter:blur(calc((1 - var(--val,0)) * 7px)) }
  .b-val, .b-unit{ display:block }
  .b-unit{ font-size:.62em; margin-top:.3em }

  .card-title{ font-size:var(--fs-60); line-height:1; text-align:center;
               background:var(--grad);
               -webkit-background-clip:text; background-clip:text;
               -webkit-text-fill-color:transparent; color:transparent; }
  .card-title span{ display:block }
  .card-note{ font-size:var(--fs-14); line-height:calc(17 / 14); text-align:center; color:var(--ink); }

  /* chip + cuadrado con flecha: un solo sistema para la píldora y la tarjeta */
  .card-act{ display:flex; gap:4px; align-items:stretch }
  .chip{ flex:1 1 auto; display:flex; align-items:center;
         padding:8px 48px 8px 16px;
         background:var(--ov); border-radius:var(--r);
         font-size:var(--fs-14); font-weight:500; line-height:calc(17 / 14);
         color:var(--ink); white-space:nowrap; }
  .pill-act{ display:flex; gap:4px; align-items:center }
  .pill-act .chip{ flex:none; padding-right:28px }
  .sq{ position:relative; flex:none; width:32px; height:32px;
       display:flex; align-items:center; justify-content:center;
       background:var(--ink); color:var(--plate);
       border-radius:var(--r); pointer-events:auto;
       transition:transform 160ms var(--ease-strong); }
  .sq:active{ transform:scale(.94) }
  @media (hover:hover) and (pointer:fine){ .sq:hover svg{ transform:translateX(1.5px) } }
  .sq svg{ transition:transform 200ms var(--ease-strong) }
  /* el aro rojo del producto, citado una sola vez: un punto en la acción principal */
  .pill-act .sq::after{ content:''; position:absolute; top:-2px; right:-2px; width:6px; height:6px;
                        border-radius:50%; background:var(--red); }

  .spec dt{ font-size:var(--fs-14); font-weight:500; color:var(--ink) }
  .spec dd{ font-size:var(--fs-14); color:var(--ink) }
  .spec dd span{ opacity:.5; text-align:right }
  /* la última acción: chip y cuadrado son un solo botón sólido, legible sobre cualquier cosa */
  .spec-act{ width:min(720px, 100%) }
  .spec-act .chip{ flex:1; background:var(--ink); color:var(--plate); }

  .skip{ position:fixed; top:8px; left:8px; z-index:100; padding:10px 14px;
         background:var(--w); color:var(--k); font-size:var(--fs-14);
         border-radius:var(--r); transform:translateY(-200%); }
  .skip:focus{ transform:none }
}

/* ───────────────────────── motion ───────────────────────── */
/* Contrato: JS escribe propiedades 0→1 EN el elemento (nunca en :root); CSS deriva todo; el blur va detrás de .is-anim */
@layer motion{
  .scr{ opacity:calc(var(--in,0) * (1 - var(--out,0)));
        transform:translateY(calc((1 - var(--in,0)) * 26px + var(--out,0) * -40px)); }
  .scr.is-anim{ filter:blur(calc((1 - var(--in,0)) * 6px + var(--out,0) * 12px)); }
  .scr.is-hidden{ visibility:hidden }
  .scr--1{ --in:1 }

  /* CALLOUT: la cifra llega PRIMERO y después el anillo se traza alrededor; ambas ventanas salen de un solo --cin */
  .callout{ --val: clamp(0, calc(var(--cin,0) / .45), 1);
            --draw:clamp(0, calc((var(--cin,0) - .40) / .60), 1); }
  .is-ready .scr--1 .callout{ --cin:1; transition:--cin 1500ms var(--ease-expo) 320ms; }

  /* filas de la ficha: ventanas por fila sacadas de un solo --tail, con smoothstep */
  .spec-row, .spec-act{
    --t-row:clamp(0, calc((var(--tail,0) - var(--i,0) * .06) / .52), 1);
    --w-row:calc(var(--t-row) * var(--t-row) * (3 - 2 * var(--t-row)));
    opacity:var(--w-row);
    transform:translateY(calc((1 - var(--w-row)) * 24px)); }
  .outro.is-hidden{ visibility:hidden }

  /* entrada al cargar — el estado en reposo ES el diseño, correcto sin JS */
  .js .scr--1 > *, .js .pill{ opacity:0; filter:blur(10px); transform:translateY(14px) }
  .js .shot--hero{ opacity:0 }
  .is-ready .shot--hero{ opacity:1; transition:opacity 1200ms var(--ease-expo) 120ms }
  .is-ready .scr--1 > *, .is-ready .pill{
    opacity:1; filter:none; transform:none;
    transition:opacity 900ms var(--ease-expo), filter 900ms var(--ease-expo), transform 900ms var(--ease-expo); }
  .is-ready .scr--1 > :nth-child(3){ transition-delay:120ms }
  .is-ready .scr--1 > :nth-child(4){ transition-delay:240ms }
  .js .scr--1 > .callout{ opacity:1; filter:none; transform:none }
  .is-ready .pill{ transition-delay:320ms }
  .is-settled .scr--1 > *, .is-settled .pill{ opacity:1; filter:none; transform:none; transition:none; }
  .is-settled .shot--hero{ opacity:1; transition:none }
  .is-settled .scr--1 .callout{ --cin:1; transition:none }
}

/* ───────────────────────── after ─────────────────────────
   Lo que viene después del recorrido: contenido en flujo normal que sube como un telón sobre la
   composición fija. Cada sección declara su tono (--pol 0/1) y el JS escribe --v (0→1) al entrar. */
@layer after{
  .after{ position:relative; z-index:20 }
  .tone-light{ --pol:1; background:var(--w); color:var(--k) }
  .tone-dark{ --pol:0; background:var(--k); color:var(--w) }
  .sr-only{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap }

  .grad-text, .big, .prod-name, .kit-title{
    font-weight:400; background:var(--grad);
    -webkit-background-clip:text; background-clip:text;
    -webkit-text-fill-color:transparent; color:transparent; padding-bottom:.08em; }

  .eyebrow{ font-size:var(--fs-14); font-weight:500; text-transform:uppercase; letter-spacing:.08em; color:var(--ink-fade) }
  .eyebrow span{ color:var(--ink) }
  .lede, .prod-lede, .kit-lede, .foot-claim{ font-size:var(--fs-18); line-height:1.38; color:var(--ink) }

  /* LA LÍNEA */
  .line{ padding:24vh var(--gutter) 16vh; display:flex; flex-direction:column; align-items:center;
         text-align:center; gap:max(20px, calc(28 * var(--u))); box-shadow:0 -1px 0 rgba(3,3,3,.1); }
  .big{ font-size:var(--fs-120); line-height:.96 }
  .lede{ max-width:540px }
  .line-index{ list-style:none; width:100%; margin-top:8vh;
               display:grid; grid-template-columns:repeat(7, 1fr); gap:8px; }
  .line-index a{ height:100%; display:flex; flex-direction:column; align-items:center; gap:12px;
                 padding:16px 10px 16px; border-radius:var(--r); background:#f4f4f2;
                 transition:background 240ms var(--ease-strong); }
  .line-index img{ height:max(96px, calc(150 * var(--u))); width:100%; object-fit:contain;
                   filter:drop-shadow(0 10px 14px rgba(0,0,0,.18));
                   transition:transform 400ms var(--ease-expo); }
  @media (hover:hover) and (pointer:fine){
    .line-index a:hover{ background:#ebebe8 }
    .line-index a:hover img{ transform:translateY(-6px) }
  }
  .li-n{ font-size:12px; opacity:.45 }
  .li-t{ font-size:var(--fs-14); line-height:1.2; color:var(--ink) }
  .line-index li{ opacity:clamp(0, calc(var(--v,1) * 1.6 - .5), 1);
                  transform:translateY(calc((1 - var(--v,1)) * 40px)); }

  /* PRODUCTOS */
  .prod{ min-height:100vh; display:grid; grid-template-columns:1.15fr 1fr; align-items:center;
         gap:max(32px, calc(96 * var(--u))); padding:10vh var(--gutter); }
  .prod--flip{ grid-template-columns:1fr 1.15fr }
  .prod--flip .prod-media{ order:2 }
  .prod-media{ position:relative; height:min(82vh, 780px); border-radius:var(--r); overflow:hidden;
               display:flex; align-items:center; justify-content:center; }
  .tone-light .prod-media{ background:radial-gradient(ellipse 62% 58% at 50% 50%, #ffffff 0%, #f2f2f0 68%, #eaeae7 100%) }
  .tone-dark  .prod-media{ background:radial-gradient(ellipse 48% 54% at 50% 52%, #393a3f 0%, #17181b 56%, #0b0b0c 100%) }
  .prod-cut{ height:80%; width:auto; max-width:78%; object-fit:contain;
             filter:drop-shadow(0 30px 44px rgba(0,0,0,.22));
             transform:translateY(calc((1 - var(--v,1)) * 9vh)) scale(calc(.92 + var(--v,1) * .08)); }
  .tone-dark .prod-cut{ filter:drop-shadow(0 34px 60px rgba(0,0,0,.75)) }
  .prod-cut--wide{ height:auto; width:70% }
  .prod-photo{ position:absolute; inset:0; width:100%; height:100%; max-width:none; object-fit:cover;
               transform:scale(calc(1.14 - var(--v,1) * .14)); }
  .prod-copy{ display:flex; flex-direction:column; gap:max(18px, calc(24 * var(--u))); max-width:560px }
  .prod-copy > :not(.spec){ opacity:clamp(0, calc(var(--v,1) * 1.7 - .45), 1);
                            transform:translateY(calc((1 - var(--v,1)) * 28px)); }
  .prod-name{ font-size:var(--fs-80); line-height:1 }
  .prod .spec{ width:100%; margin-top:6px }
  .after .spec-row{ --t-row:clamp(0, calc((var(--v,1) - .3 - var(--i,0) * .1) / .4), 1) }

  .link{ display:inline-flex; align-items:center; gap:10px; width:fit-content; padding:8px 0;
         font-size:var(--fs-14); font-weight:500; color:var(--ink); border-bottom:1px solid var(--hairline); }
  .link svg{ transition:transform 200ms var(--ease-strong) }
  @media (hover:hover) and (pointer:fine){ .link:hover svg{ transform:translateX(3px) } }

  /* KIT */
  .kit{ display:grid; grid-template-columns:1.1fr 1fr; align-items:start;
        gap:max(32px, calc(72 * var(--u))); padding:14vh var(--gutter);
        box-shadow:0 -1px 0 rgba(3,3,3,.1); }
  .kit-media{ position:sticky; top:calc(var(--gutter) * 2 + 41px); aspect-ratio:1; border-radius:var(--r); overflow:hidden;
              background:radial-gradient(ellipse 70% 62% at 50% 46%, #ffffff 0%, #f0f0ee 64%, #e6e6e3 100%); }
  .kit-stage{ position:absolute; inset:0 }
  .k{ position:absolute; max-width:none; filter:drop-shadow(0 18px 22px rgba(0,0,0,.22));
      transition:opacity 500ms var(--ease-expo), transform 800ms var(--ease-expo); }
  .k-bag  { left:5%;  top:6%;  height:64% }
  .k-ins  { right:3%; top:5%;  height:40%; transform:rotate(14deg) }
  .k-pro  { left:48%; top:13%; height:56% }
  .k-deo  { left:60%; top:17%; height:53% }
  .k-foam { left:36%; top:31%; height:44% }
  .k-towel{ left:3%;  bottom:4%; width:36%; transform:rotate(-5deg) }
  .k-brush{ left:47%; top:44%; height:60%; transform:rotate(-70deg); z-index:2 }
  /* solo cepillo: el resto se retira y el cepillo viaja al centro, de pie */
  [data-mode="solo"] .k:not(.k-brush){ opacity:0; transform:translateY(24px) scale(.94) }
  [data-mode="solo"] .k-ins{ transform:rotate(14deg) translateY(24px) scale(.94) }
  [data-mode="solo"] .k-towel{ transform:rotate(-5deg) translateY(24px) scale(.94) }
  [data-mode="solo"] .k-brush{ transform:translate(-41%, -40%) rotate(-10deg) scale(1.4) }

  .kit-copy{ display:flex; flex-direction:column; gap:max(18px, calc(24 * var(--u))); max-width:600px }
  .kit-copy > *{ opacity:clamp(0, calc(var(--v,1) * 1.7 - .45), 1);
                 transform:translateY(calc((1 - var(--v,1)) * 28px)); }
  .kit-title{ font-size:var(--fs-60); line-height:1.02 }
  .badges{ list-style:none; display:flex; flex-wrap:wrap; gap:8px }
  .badges li{ display:flex; align-items:center; gap:8px; padding:10px 14px; border-radius:var(--r);
              background:var(--ov); font-size:var(--fs-14); font-weight:500;
              text-transform:uppercase; letter-spacing:.04em; color:var(--ink); }
  .badges svg{ width:16px; height:16px; fill:var(--ink) }
  .kit-opts{ display:grid; grid-template-columns:1fr 1fr; gap:4px; padding:4px;
             border:1px solid var(--hairline); border-radius:var(--r); }
  .kit-opts button{ font:inherit; font-size:var(--fs-14); font-weight:500; text-transform:uppercase; letter-spacing:.04em;
                    padding:12px; border:0; border-radius:6px; background:transparent; color:var(--ink); cursor:pointer;
                    transition:background 200ms var(--ease-strong), color 200ms var(--ease-strong); }
  .kit-opts [aria-selected="true"]{ background:var(--ink); color:var(--plate) }
  .kit-opts button:focus-visible, .qty button:focus-visible{ outline:2px solid var(--ink); outline-offset:2px }
  .kit-inc{ padding:16px; border:1px solid var(--hairline); border-radius:var(--r) }
  .kit-inc-h{ font-size:var(--fs-14); font-weight:500; color:var(--ink); margin-bottom:14px }
  .kit-count{ font-weight:400; opacity:.5 }
  .kit-list{ list-style:none; display:grid; grid-template-columns:1fr 1fr; gap:10px 16px }
  .kit-list li{ display:flex; align-items:center; gap:12px; font-size:var(--fs-14); line-height:1.25; color:var(--ink) }
  .kit-list li[hidden]{ display:none }
  .kit-list img{ flex:none; width:46px; height:46px; padding:5px; object-fit:contain; border-radius:6px; background:#f2f2f0 }
  .kit-buy{ display:flex; gap:8px }
  .qty{ display:flex; align-items:center; border:1px solid var(--hairline); border-radius:var(--r) }
  .qty button{ width:44px; height:50px; border:0; background:none; font:inherit; font-size:18px; color:var(--ink); cursor:pointer }
  .qty output{ min-width:24px; text-align:center; font-size:var(--fs-14); color:var(--ink) }
  .buy{ flex:1; display:flex; align-items:center; justify-content:center; height:52px; border-radius:var(--r);
        background:var(--ink); color:var(--plate); font-size:var(--fs-14); font-weight:500;
        text-transform:uppercase; letter-spacing:.06em; transition:transform 160ms var(--ease-strong); }
  .buy:active{ transform:scale(.98) }
  .kit-note{ font-size:12px; color:var(--ink); opacity:.55 }

  /* FIRMA */
  .foot{ padding:18vh var(--gutter) var(--gutter); display:flex; flex-direction:column; align-items:center;
         gap:32px; text-align:center; }
  .foot-mark{ width:min(64vw, 620px); aspect-ratio:1877 / 838; background:var(--ink);
              -webkit-mask:url(assets/logo.png) center / contain no-repeat;
                      mask:url(assets/logo.png) center / contain no-repeat;
              opacity:clamp(0, calc(var(--v,1) * 1.4 - .2), 1);
              transform:translateY(calc((1 - var(--v,1)) * 40px)) scale(calc(.96 + var(--v,1) * .04)); }
  .foot-claim{ max-width:520px }
  .foot-nav{ display:flex; flex-wrap:wrap; justify-content:center; gap:8px 20px; font-size:var(--fs-14); color:var(--ink-fade) }
  .foot-nav a{ transition:color 200ms }
  .foot-nav a:hover{ color:var(--ink) }
  .foot-legal{ width:100%; margin-top:10vh; padding-top:16px; border-top:1px solid var(--hairline);
               font-size:12px; color:var(--ink); opacity:.5 }

  /* 01 — EL CEPILLO EN MOVIMIENTO: sección alta con un panel fijo; el JS escribe --fp (0→1) */
  .film{ position:relative; height:440vh }
  .film-pin{ position:sticky; top:0; height:100vh; overflow:hidden;
             display:grid; grid-template-columns:1fr auto 1fr; align-items:center;
             gap:max(24px, calc(64 * var(--u))); padding:0 var(--gutter); }
  .film-head{ display:flex; flex-direction:column; gap:max(16px, calc(22 * var(--u))); max-width:420px }
  .film-frame{ position:relative; height:88vh; aspect-ratio:480 / 854;
               /* bordes fundidos: el estudio negro del video se disuelve en el negro de la página */
               -webkit-mask-image:linear-gradient(90deg, transparent 0%, #000 22%, #000 78%, transparent 100%),
                                  linear-gradient(180deg, transparent 0%, #000 14%, #000 86%, transparent 100%);
               -webkit-mask-composite:source-in;
                       mask-image:linear-gradient(90deg, transparent 0%, #000 22%, #000 78%, transparent 100%),
                                  linear-gradient(180deg, transparent 0%, #000 14%, #000 86%, transparent 100%);
                       mask-composite:intersect; }
  .film-frame canvas, .film-poster{ position:absolute; inset:0; width:100%; height:100%; max-width:none }
  .film-frame canvas{ opacity:0; transition:opacity 400ms ease }
  .film-frame.is-live canvas{ opacity:1 }
  .film-steps{ list-style:none; justify-self:end; max-width:320px; display:flex; flex-direction:column; gap:max(22px, calc(30 * var(--u))) }
  .film-steps li{ font-size:var(--fs-14); line-height:1.4; color:var(--ink-fade); opacity:.28;
                  transform:translateX(14px); transition:opacity 450ms var(--ease-expo), transform 450ms var(--ease-expo); }
  .film-steps li.is-on{ opacity:1; transform:none }
  .film-steps span{ display:block; margin-bottom:6px; font-size:12px; letter-spacing:.08em }
  .film-steps b{ display:block; margin-bottom:4px; font-weight:400; font-size:var(--fs-24); line-height:1.1; color:var(--ink) }
  .film-bar{ position:absolute; left:var(--gutter); right:var(--gutter); bottom:var(--gutter); height:1px; background:var(--hairline) }
  .film-bar i{ display:block; height:100%; background:var(--ink); transform-origin:0 50%; transform:scaleX(var(--fp,0)) }

  /* la firma también respira sobre el fondo animado */
  .foot{ position:relative; overflow:hidden; isolation:isolate }
  .bgv--foot{ z-index:-2; opacity:.42; transform:none }
  .veil--foot{ z-index:-1;
               background:
                 linear-gradient(180deg, rgba(3,3,3,1) 0%, rgba(3,3,3,.2) 30%, rgba(3,3,3,.35) 65%, rgba(3,3,3,1) 100%); }

  /* cuando el telón cubre la pantalla, la composición fija deja de pintarse */
  .is-past :is(.stage, .reveal, .cut-wrap, .chrome, .outro, .plate-out){ visibility:hidden }

  @media (prefers-reduced-motion:reduce){
    .after *, .after .spec-row{ transform:none !important }
    .k, .buy, .line-index img{ transition:none }
  }
}

/* ───────────────────────── utilities ───────────────────────── */
@layer utilities{
  @media (prefers-reduced-motion:reduce){
    .scr, .spec-row, .spec-act, .cutout, .b-read{ filter:none !important }
    .scr, .spec-row, .spec-act, .b-read{ transform:none !important }
    .callout{ transform:none !important }
    .ring circle{ stroke-dashoffset:0 }
    .is-ready .scr--1 > *, .is-ready .pill, .is-ready .shot--hero{ transition-duration:1ms }
    .sq{ transition:none }
  }

  /* MÓVIL: su propia composición — sin barridos ni recorte; una lectura vertical en la polaridad oscura */
  @media (max-width:767px){
    :root{ --runway:auto; --gutter:16px }
    .pill{ background:rgba(3,3,3,.72) }   /* pasa sobre fichas blancas: aquí no hay polaridad que lo rescate */
    .reveal, .cut-wrap, .plate-out{ display:none }
    .stage .shot--hero{ display:none }
    .chrome{ position:static; pointer-events:auto }
    .scr{ position:static; inset:auto; min-height:auto; padding:12vh var(--gutter);
          opacity:1 !important; transform:none !important; filter:none !important;
          visibility:visible !important;
          display:flex; flex-direction:column; gap:20px; align-items:flex-start; }
    .scr--1{ min-height:92svh; justify-content:flex-end; padding-top:calc(24px + 56px) }
    .display, .note, .card, .callout{ position:static; inset:auto; transform:none }
    .display--s3, .note--right{ text-align:left }
    .display--fin{ white-space:normal; text-align:left }
    .note{ width:100% }
    .card{ width:100%; margin-top:8px }
    .callout{ flex-direction:row !important; align-items:center; gap:12px }
    .badge{ width:72px }
    .b-read{ font-size:15px }
    .ring circle{ stroke-dashoffset:0 }
    .b-read{ opacity:1 !important; transform:none !important; filter:none !important }
    .m-shot{ display:block; width:100%; height:auto; padding:8%; border-radius:var(--r);
             background:var(--w); }
    .m-shot--dark{ width:78%; align-self:center; padding:0; background:none;
                   filter:drop-shadow(0 20px 40px rgba(0,0,0,.6)); }
    .outro{ position:static; inset:auto; padding:12vh var(--gutter); visibility:visible !important; align-items:flex-start; }
    .spec-row, .spec-act, .display--fin{ opacity:1 !important; transform:none !important }
    .outro{ transform:none !important; gap:32px }
    .outro-foot{ width:100% }
    .chrome, .outro{ position:relative; z-index:1 }
    .stage{ background:radial-gradient(ellipse 80% 50% at 50% 40%, #26272b 0%, var(--k) 70%) }
    .stage::after{ content:''; position:absolute; inset:0;
                   background:linear-gradient(180deg, rgba(3,3,3,0), rgba(3,3,3,.85)); }
    .runway{ display:none }

    .line{ padding:14vh var(--gutter) 10vh }
    .big{ font-size:48px }
    .line-index{ grid-template-columns:repeat(3, 1fr); margin-top:4vh }
    .line-index img{ height:84px }
    .prod, .prod--flip, .kit{ grid-template-columns:1fr; min-height:auto; padding:10vh var(--gutter); gap:28px }
    .prod--flip .prod-media{ order:0 }
    .prod-media{ height:62vh }
    .prod-name{ font-size:40px }
    .kit-media{ position:relative; top:auto }
    .kit-list{ grid-template-columns:1fr }
    .badges li{ font-size:12px; padding:8px 12px }
    .film{ height:360vh }
    .film-pin{ grid-template-columns:1fr; grid-template-rows:auto 1fr auto; align-items:start; gap:12px;
               padding:calc(24px + 56px) var(--gutter) 28px; }
    .film-head{ gap:10px }
    .film-head .prod-lede{ display:none }
    .film-frame{ height:auto; width:min(100%, 34svh); justify-self:center; align-self:center }
    .film-steps{ position:relative; justify-self:stretch; max-width:none; min-height:70px; display:block }
    .film-steps li{ position:absolute; inset:0 auto auto 0; opacity:0; transform:translateY(8px) }
    .film-steps li.is-on{ opacity:1; transform:none }
    .bgv{ opacity:.5 }
  }

  /* SIN JS: se pliega igual (nada puede hacer scroll en una composición fija) */
  html:not(.js) .chrome{ position:static; pointer-events:auto }
  html:not(.js) .scr{ position:static; inset:auto; visibility:visible; opacity:1; transform:none; filter:none;
                      display:flex; flex-direction:column; gap:20px; align-items:flex-start;
                      padding:12vh var(--gutter); }
  html:not(.js) .scr--1{ min-height:88svh; justify-content:flex-end }
  html:not(.js) :is(.display, .note, .card, .callout){ position:static; inset:auto }
  html:not(.js) .display--fin{ white-space:normal; text-align:left; transform:none; opacity:1 }
  html:not(.js) :is(.display--s3, .note--right){ text-align:left }
  html:not(.js) .callout{ flex-direction:row; align-items:center; gap:12px; --cin:1 }
  html:not(.js) .badge{ width:72px }
  html:not(.js) .ring circle{ stroke-dashoffset:0 }
  html:not(.js) .b-read{ opacity:1; transform:none; filter:none }
  html:not(.js) .pill{ opacity:1; filter:none; transform:none }
  html:not(.js) :is(.reveal, .cut-wrap, .plate-out, .runway, .shot--hero, .bgv--foot){ display:none }
  html:not(.js) .m-shot{ display:block; width:min(560px, 100%); height:auto; padding:6%;
                         border-radius:var(--r); background:var(--w); }
  html:not(.js) .m-shot--dark{ background:none; padding:0; width:min(360px, 78%) }
  html:not(.js) .stage::after{ content:''; position:absolute; inset:0;
                               background:linear-gradient(180deg, rgba(3,3,3,.55), rgba(3,3,3,.92)); }
  html:not(.js) .outro{ position:static; inset:auto; visibility:visible; padding:12vh var(--gutter);
                        align-items:flex-start; transform:none; gap:32px }
  html:not(.js) :is(.spec-row, .spec-act){ opacity:1; transform:none }
  html:not(.js) .outro-foot{ width:100% }
  html:not(.js) .film{ height:auto }
  html:not(.js) .film-pin{ position:static; height:auto; padding:12vh var(--gutter) }
  html:not(.js) .film-steps li{ opacity:1; transform:none }
  html:not(.js) :is(.chrome, .outro){ position:relative; z-index:1 }
}