@font-face{font-family:'Inter';font-style:normal;font-weight:400 900;font-display:swap;src:url('fonts/inter-latin-variable.woff2') format('woff2')}
  @font-face{font-family:'Rubik';font-style:normal;font-weight:700 900;font-display:swap;src:url('fonts/rubik-latin-variable.woff2') format('woff2')}

  :root{
    --ink:#070A16;--blue:#586EFF;--blue-lit:#586EFF;--white:#fff;
    --hero-word:#F7F8FF;--hero-accent:#F7F8FF;--hero-muted:rgba(255,255,255,.64);
    --muted:rgba(255,255,255,.56);--faint:rgba(255,255,255,.15);
    --font:'Inter',-apple-system,sans-serif;--display:'Rubik',var(--font);
    --max:1280px;--vvh:100svh;
  }
  *{box-sizing:border-box;margin:0;padding:0}
  /* El overflow-x va SOLO en body, nunca en html. En iOS, un overflow
     distinto de visible en el elemento raíz rompe position:fixed: la barra
     deja de estar anclada al visor y aparece a mitad de página.
     Puesto en body el efecto es el mismo —el navegador lo propaga al
     visor— pero sin tocar el anclaje de lo fijado. */
  html{overscroll-behavior-x:none}
  body{font-family:var(--font);background:var(--ink);color:var(--white);-webkit-font-smoothing:antialiased;overflow-x:clip;overscroll-behavior-x:none;line-height:1.6}
  .wrap{width:min(calc(100% - 60px),var(--max));margin-inline:auto;position:relative;z-index:3}

  .hero{
    position:relative;min-height:100svh;height:100svh;display:grid;align-content:start;overflow:hidden;
    padding:clamp(128px,18svh,174px) 0 78px;--exit:0;
  }

  /* la luz: apagada al entrar, se enciende con el interruptor,
     después sigue al cursor durante toda la visita */
  .glow{
    position:absolute;inset:-15%;z-index:1;pointer-events:none;opacity:0;
    background:
      radial-gradient(48vw 48vw at calc(var(--mx,50) * 1%) calc(var(--my,44) * 1%), rgba(88,110,255,.11) 0%, rgba(88,110,255,.035) 38%, transparent 70%),
      radial-gradient(70vw 55vw at 82% 6%, rgba(126,86,255,.06) 0%, transparent 62%);
    transition:opacity 1.2s ease .5s;
  }
  .on .glow{opacity:1}
  .grid-bg{
    position:absolute;inset:0;z-index:1;pointer-events:none;opacity:0;
    background-image:radial-gradient(circle, rgba(255,255,255,.075) 1px, transparent 1px);
    background-size:26px 26px;
    mask-image:radial-gradient(72% 62% at 50% 46%,#000 0%,transparent 100%);
    -webkit-mask-image:radial-gradient(72% 62% at 50% 46%,#000 0%,transparent 100%);
    transition:opacity 1.4s ease .6s;
  }
  .on .grid-bg{opacity:1}
  .hero.on{--hero-word:#FFFFFF;--hero-accent:var(--blue);--hero-muted:rgba(255,255,255,.58)}
  .grain{position:absolute;inset:0;z-index:2;pointer-events:none;opacity:.3;mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.45'/%3E%3C/svg%3E")}

  /* el interruptor: la marca hecha gesto */
  /* Ahora es un botón: se puede apagar y volver a encender la presencia.
     El estado apagado no hubo que inventarlo, ya existía —es con el que
     carga la página—, así que tocarlo muestra literalmente lo que dice el
     titular: cómo se ve un negocio sin presencia y cómo se ve con ella. */
  .switch{
    -webkit-appearance:none;appearance:none;display:block;background:none;padding:0;cursor:pointer;
    width:132px;height:66px;border-radius:999px;
    border:2.5px solid rgba(255,255,255,.2);position:relative;margin-bottom:clamp(24px,4vh,44px);
    transition:border-color .8s ease .2s,box-shadow .9s ease .3s;
  }
  .switch:focus-visible{outline:2px solid var(--blue);outline-offset:6px}
  .on .switch{border-color:var(--blue);box-shadow:0 0 64px rgba(88,110,255,.5)}
  .knob{
    position:absolute;top:50%;left:7px;width:46px;height:46px;border-radius:50%;
    background:rgba(255,255,255,.22);transform:translateY(-50%);
    transition:transform 1.05s cubic-bezier(.72,0,.16,1) .25s,background .7s ease .7s,box-shadow .7s ease .7s;
  }
  .on .knob{transform:translate(64px,-50%);background:var(--blue);box-shadow:0 0 44px rgba(88,110,255,.95)}
  /* Al tocarlo desaparecen las demoras: una demora en la carga se lee como
     puesta en escena, pero después de un clic se lee como que no anduvo. */
  .hero.manual .switch{transition:border-color .35s ease,box-shadow .4s ease}
  .hero.manual .knob{transition:transform .5s cubic-bezier(.72,0,.16,1),background .3s ease,box-shadow .3s ease}
  .hero.manual .glow{transition:opacity .5s ease}
  .hero.manual .grid-bg{transition:opacity .55s ease}

  /* titular visible desde el primer render; la activación enciende el sistema */
  h1{
    font-family:var(--display);font-weight:900;text-transform:uppercase;
    font-size:clamp(2.7rem,min(8.6vw,15.5vh),7.4rem);line-height:.86;letter-spacing:-.038em;
    margin-left:-.045em;color:var(--hero-word);transition:filter .8s ease,color .8s ease;
  }
  h1 .ln{display:block;overflow:hidden;padding-bottom:.05em}
  h1 .ln > span{display:block;transform:none}
  .on h1{filter:none}
  .hero.leaving h1{transform:translateY(calc(var(--exit) * -18px));filter:blur(calc(var(--exit) * 1.4px))}
  h1 em{font-style:normal;color:var(--hero-accent);transition:color .8s ease,text-shadow .8s ease}
  .on h1 em{color:var(--blue);text-shadow:0 0 10px rgba(88,110,255,.12)}

  .foot{
    display:flex;justify-content:space-between;align-items:flex-end;gap:40px;flex-wrap:wrap;
    margin-top:clamp(26px,4.4vh,48px);padding-top:24px;border-top:1px solid var(--faint);
    opacity:1;transform:none;transition:border-color .9s ease,opacity .9s ease,transform .9s ease;
  }
  .on .foot{border-color:rgba(88,110,255,.36)}
  .hero.leaving .foot{opacity:calc(1 - var(--exit) * .55);transform:translateY(calc(var(--exit) * -12px))}
  .foot{flex-wrap:nowrap}
  .foot p{flex:1 1 auto;min-width:0;max-width:82ch;color:var(--hero-muted);font-size:clamp(1.04rem,1.22vw,1.24rem);line-height:1.55;overflow-wrap:break-word;transition:color .8s ease}
  .foot .btn{flex:0 0 auto;max-width:100%}
  .hero .btn{display:inline-flex;align-items:center;gap:11px;background:rgba(255,255,255,.92);color:var(--ink);text-decoration:none;border-radius:10px;padding:16px 25px;font-size:.77rem;font-weight:850;letter-spacing:.1em;text-transform:uppercase;white-space:nowrap;box-shadow:0 14px 40px rgba(255,255,255,.08);transition:transform .25s ease,box-shadow .45s ease,background .45s ease,color .45s ease}
  .hero.on .btn{background:var(--blue);color:#fff;box-shadow:0 14px 40px rgba(88,110,255,.32)}
  .btn:hover{transform:translateY(-2px);box-shadow:0 20px 52px rgba(88,110,255,.48)}

  .cue{position:absolute;left:50%;bottom:30px;transform:translateX(-50%);width:1px;height:54px;background:var(--faint);overflow:hidden;z-index:3;opacity:0;transition:opacity .8s ease 2s}
  .on .cue{opacity:1}
  .cue::after{content:'';position:absolute;left:0;top:0;width:1px;height:20px;background:var(--blue);animation:drop 2.1s cubic-bezier(.7,0,.3,1) infinite}
  .hero.leaving .cue{height:54px;bottom:30px;opacity:calc(1 - var(--exit) * 3)}
  @keyframes drop{0%{transform:translateY(-22px)}60%,100%{transform:translateY(56px)}}

  @media(max-width:900px){
    .wrap{width:min(calc(100% - 36px),354px);margin-left:18px;margin-right:auto}
    /* El hero mide una pantalla y el contenido no la llena: con el bloque
       alineado arriba sobraban unos 110px muertos entre el botón y el final
       de la sección. Ahora la columna ocupa todo el alto y el pie —el texto
       y el botón— se apoya abajo. El aire queda entre el titular y el pie,
       que es donde se lee como composición y no como sobra. */
    /* El hero deja de forzar una pantalla entera en celular.
       Intentarlo dejaba 174px sin uso: primero apilados abajo del botón, y
       después —cuando empujé el pie a la base— apilados en el medio. Moví el
       hueco, no lo resolví.
       El contenido mide unos 566px de los 740 de un teléfono. Con el alto
       libre no sobra nada, y los 174px que antes eran hueco pasan a ser el
       comienzo de la sección siguiente asomando por abajo: eso dice "seguí"
       mejor que cualquier flecha, y es lo que la sección de la pregunta
       necesita para que no la saltees. */
    .hero{height:auto;min-height:0;align-content:start;
          padding:clamp(104px,14svh,138px) 0 clamp(44px,7svh,64px)}
    .nav-inner{gap:18px}
    .nav-logo{flex:0 0 auto}
    .nav-cta{flex:0 1 auto;max-width:calc(100vw - 92px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
    .foot{display:block}
    .foot p{width:100%;max-width:100%;font-size:.94rem;line-height:1.6}
    .foot .btn{width:auto;white-space:normal;text-align:center;line-height:1.25}
    h1{font-size:clamp(2.28rem,10vw,3.12rem);line-height:.96;letter-spacing:-.028em;margin-left:0;max-width:100%}
    .switch{width:104px;height:52px;margin-bottom:38px}
    .knob{width:36px;height:36px;left:6px}
    .on .knob{transform:translate(50px,-50%)}
    .cue{display:none}
  }
  @media(prefers-reduced-motion:reduce){
    *,*::before,*::after{transition:none!important;animation:none!important}
    .glow,.grid-bg,.foot,.cue{opacity:1}
    .foot{transform:none}
    .knob{background:var(--blue)}
  }


  .nav{position:fixed;top:0;left:0;right:0;z-index:50;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);background:rgba(7,10,22,.66);border-bottom:1px solid rgba(255,255,255,.08)}
  /* En celular el desenfoque de la barra se apaga. Es exactamente el mismo
     problema que rompía el telón de las muestras: Safari no repinta bien una
     capa desenfocada mientras la página se mueve con inercia, y la barra
     aparece dibujada donde ya no está. Sin desenfoque y con el fondo más
     opaco se ve prácticamente igual y no se puede romper. */
  @media(max-width:900px){
    .nav{backdrop-filter:none;-webkit-backdrop-filter:none;background:rgba(7,10,22,.94)}
  }
  .nav-inner{height:70px;display:flex;align-items:center;justify-content:space-between}
  .nav-logo img{height:30px;width:auto;display:block}
  .nav-cta{color:var(--white);text-decoration:none;font-size:.72rem;font-weight:850;letter-spacing:.12em;text-transform:uppercase;border:1px solid rgba(88,110,255,.5);border-radius:8px;padding:10px 16px;transition:background .25s ease}
  .nav-cta:hover{background:var(--blue)}

  .screen-transition{
    position:fixed;inset:0;z-index:90;pointer-events:none;opacity:0;
    background:
      radial-gradient(48vw 48vw at 50% 52%,rgba(88,110,255,.2),transparent 68%),
      rgba(7,10,22,.34);
    transform:none;
    backdrop-filter:blur(12px);
    -webkit-backdrop-filter:blur(12px);
    transition:opacity .28s ease;
  }
  .screen-transition::before{content:none}
  .screen-transition::after{
    content:'';position:absolute;inset:0;opacity:.09;
    background-image:radial-gradient(circle,rgba(255,255,255,.32) 1px,transparent 1px);
    background-size:28px 28px;
    mask-image:linear-gradient(180deg,transparent,#000 24%,#000 76%,transparent);
    -webkit-mask-image:linear-gradient(180deg,transparent,#000 24%,#000 76%,transparent);
  }
  .screen-transition.on{opacity:1}
  /* La pregunta vuelve a encuadrarse como pantalla estática: no depende del
     progreso del scroll, solo de una entrada inicial por IntersectionObserver. */
  .hero,.ask,#chequeo{scroll-snap-align:start}
  .ask{scroll-snap-stop:always}
  .hero,.ask{touch-action:auto}
  /* ═════ LA PREGUNTA · composición estática ═════ */
  .ask{
    position:relative;min-height:100svh;--mx:50%;--my:50%;
    background:
      radial-gradient(70vw 44svh at 50% 50%,rgba(88,110,255,.14),transparent 92%),
      var(--ink);
  }
  .ask .pin{
    position:relative;z-index:1;min-height:100svh;overflow:hidden;
    display:grid;align-content:center;justify-items:center;
    gap:clamp(28px,4.4svh,42px);padding:clamp(94px,12svh,116px) 18px clamp(42px,6svh,62px);
  }
  .ask .pin::before{
    /* svh y no vh: con vh el óvalo se redimensiona cada vez que la barra
       del navegador aparece o desaparece, repintando una capa entera. */
    content:'';position:absolute;inset:14svh 8vw;z-index:1;pointer-events:none;
    border-radius:999px;
    background:radial-gradient(closest-side,rgba(88,110,255,.18),rgba(88,110,255,.045) 58%,transparent);
    transform:scale(1);
    opacity:.46;
  }
  .ask .pin::after{
    content:'';position:absolute;inset:0;z-index:1;pointer-events:none;opacity:.14;
    background-image:radial-gradient(circle,rgba(255,255,255,.26) 1px,transparent 1px);
    background-size:28px 28px;
    mask-image:radial-gradient(62% 48% at 50% 52%,#000,transparent);
    -webkit-mask-image:radial-gradient(62% 48% at 50% 52%,#000,transparent);
  }
  .ask .halo{
    position:absolute;inset:0;z-index:1;pointer-events:none;
    background:
      radial-gradient(620px 520px at 50% 50%,
      rgba(142,155,255,.2) 0%, rgba(88,110,255,.08) 44%, transparent 74%);
  }
  .ask-scene{
    position:relative;z-index:3;width:min(calc(100vw - 60px),1040px);
    height:clamp(520px,64svh,610px);
    display:grid;grid-template-columns:minmax(150px,1fr) minmax(390px,auto) minmax(150px,1fr);
    grid-template-rows:minmax(96px,1fr) auto minmax(96px,1fr);
    column-gap:clamp(30px,4vw,72px);row-gap:clamp(26px,4svh,42px);
    align-items:center;justify-items:center;
  }
  .ask-rays{display:none;position:absolute;inset:0;z-index:2;pointer-events:none}
  .ask.has-rays .ask-rays{display:block}
  .ask-ray{
    position:absolute;left:0;top:0;width:0;height:2px;border-radius:999px;
    opacity:.62;transform:rotate(var(--a,0deg));transform-origin:left center;
    transition:opacity .18s ease;
  }
  .ask-stem{
    position:absolute;inset:0;display:block;border-radius:999px;
    background:linear-gradient(90deg,rgba(142,155,255,.84),rgba(88,110,255,.58) 62%,rgba(88,110,255,0));
    box-shadow:0 0 10px rgba(88,110,255,.28);
    opacity:.82;transform:scaleX(1);transform-origin:left center;
  }
  .ask-head{
    position:absolute;right:-1px;top:50%;display:block;width:7px;height:7px;
    border-top:1.7px solid rgba(142,155,255,.86);
    border-right:1.7px solid rgba(142,155,255,.86);
    opacity:.86;
    transform:translate(0,-50%) rotate(45deg) scale(1);
    transform-origin:center;
  }
  .topic-word{
    position:relative;z-index:4;display:block;
    font-family:var(--font);font-weight:850;text-transform:uppercase;letter-spacing:.12em;
    font-size:clamp(.94rem,1.25vw,1.12rem);line-height:1.1;text-align:center;pointer-events:none;
    white-space:nowrap;color:rgba(255,255,255,.72);
  }
  .topic-word.t1{grid-area:1/1;justify-self:start;align-self:end}
  .topic-word.t2{grid-area:1/3;justify-self:end;align-self:end;color:var(--blue-lit)}
  .topic-word.t3{grid-area:3/1;justify-self:start;align-self:start;color:var(--blue-lit)}
  .topic-word.t4{grid-area:3/3;justify-self:end;align-self:start}
  .q{
    position:relative;z-index:4;grid-area:2/2;width:min(52vw,620px);margin-inline:auto;
    isolation:isolate;
  }
  .title-flash{
    position:absolute;left:50%;top:50%;z-index:-1;width:min(72vw,560px);height:min(34vw,300px);
    transform:translate(-50%,-50%);
    border-radius:999px;
    background:radial-gradient(closest-side,rgba(142,155,255,.42),rgba(88,110,255,.2) 44%,transparent 72%);
    opacity:0;
    pointer-events:none;
  }
  .q .txt{
    font-family:var(--display);font-weight:900;text-transform:uppercase;
    font-size:clamp(2.15rem,5.6vw,4rem);line-height:.94;letter-spacing:-.025em;
    text-align:center;margin:0;
    padding-top:.12em;
  }
  .q .lit{position:relative;display:grid;gap:.02em;color:var(--white)}
  .q .lit .piece{display:block;width:max-content;max-width:100%;margin-inline:auto}
  .q .lit .from-bottom{color:var(--blue-lit)}
  .q .lit .hit{position:relative}
  .q .lit em{font-style:normal;color:inherit}
  .hint{display:none}
  .go{
    position:relative;z-index:4;display:inline-flex;align-items:center;gap:12px;
    background:none;border:1.5px solid rgba(88,110,255,.55);color:var(--white);
    min-height:52px;border-radius:999px;padding:15px 30px;cursor:pointer;
    font:inherit;font-size:.94rem;font-weight:850;letter-spacing:.1em;text-transform:uppercase;
  }
  .go:hover{border-color:rgba(142,155,255,.78)}
  .go i{width:7px;height:7px;border-radius:50%;background:var(--blue);opacity:.9}
  .go:focus-visible{outline:2px solid var(--white);outline-offset:4px}

  .ask.enter-motion .go{
    opacity:0;transform:translateY(18px);
  }
  .ask.enter-motion .q .piece{
    opacity:0;
  }
  .ask.enter-motion .q .from-left{transform:translateX(-.5em)}
  .ask.enter-motion .q .from-right{transform:translateX(.5em)}
  .ask.enter-motion .q .from-bottom{transform:translateY(.5em)}
  .ask.measure-lines .ask-appear,
  .ask.measure-lines .piece{transform:none!important;transition:none!important}
  .ask.enter-motion .topic-word{
    opacity:0;
    transform:translate(var(--dx),var(--dy)) scale(.94);
  }
  .ask.enter-motion.is-visible .q .from-left{animation:titleFromLeft .42s cubic-bezier(.16,.84,.2,1) both}
  .ask.enter-motion.is-visible .q .from-right{animation:titleFromRight .42s cubic-bezier(.16,.84,.2,1) .04s both}
  .ask.enter-motion.is-visible .q .from-bottom{animation:titleFromBottom .42s cubic-bezier(.16,.84,.2,1) .08s both}
  .ask.enter-motion.is-visible .title-flash{animation:titleFlash .4s ease .48s both}
  .ask.enter-motion.is-visible .go{
    opacity:1;transform:none;
  }
  .ask.enter-motion .ask-stem{transform:scaleX(0)}
  .ask.enter-motion .ask-head{opacity:0;transform:translate(0,-50%) rotate(45deg) scale(.4)}
  .ask.enter-motion.is-visible .go{pointer-events:auto}
  .ask.enter-motion.is-visible .t1{animation:wordArrive .42s cubic-bezier(.2,.85,.25,1) .88s both}
  .ask.enter-motion.is-visible .t2{animation:wordArrive .42s cubic-bezier(.2,.85,.25,1) .94s both}
  .ask.enter-motion.is-visible .t3{animation:wordArrive .42s cubic-bezier(.2,.85,.25,1) 1s both}
  .ask.enter-motion.is-visible .t4{animation:wordArrive .42s cubic-bezier(.2,.85,.25,1) 1.06s both}
  .ask.enter-motion.is-visible .r1 .ask-stem{animation:rayStem .28s cubic-bezier(.16,.84,.2,1) 1.06s both}
  .ask.enter-motion.is-visible .r1 .ask-head{animation:rayHead .18s cubic-bezier(.16,.84,.2,1) 1.18s both}
  .ask.enter-motion.is-visible .r2 .ask-stem{animation:rayStem .28s cubic-bezier(.16,.84,.2,1) 1.12s both}
  .ask.enter-motion.is-visible .r2 .ask-head{animation:rayHead .18s cubic-bezier(.16,.84,.2,1) 1.24s both}
  .ask.enter-motion.is-visible .r3 .ask-stem{animation:rayStem .28s cubic-bezier(.16,.84,.2,1) 1.18s both}
  .ask.enter-motion.is-visible .r3 .ask-head{animation:rayHead .18s cubic-bezier(.16,.84,.2,1) 1.30s both}
  .ask.enter-motion.is-visible .r4 .ask-stem{animation:rayStem .28s cubic-bezier(.16,.84,.2,1) 1.24s both}
  .ask.enter-motion.is-visible .r4 .ask-head{animation:rayHead .18s cubic-bezier(.16,.84,.2,1) 1.34s both}
  .ask.enter-motion.is-visible .go{animation:buttonArrive .3s cubic-bezier(.16,.84,.2,1) 1.18s both}
  @keyframes titleFromLeft{
    0%{opacity:0;transform:translateX(-.5em)}
    100%{opacity:1;transform:none}
  }
  @keyframes titleFromRight{
    0%{opacity:0;transform:translateX(.5em)}
    100%{opacity:1;transform:none}
  }
  @keyframes titleFromBottom{
    0%{opacity:0;transform:translateY(.5em)}
    100%{opacity:1;transform:none}
  }
  @keyframes wordArrive{
    0%,42%{opacity:0;transform:translate(var(--dx),var(--dy)) scale(.94)}
    100%{opacity:1;transform:none}
  }
  @keyframes rayStem{
    0%{transform:scaleX(0)}
    100%{transform:scaleX(1)}
  }
  @keyframes rayHead{
    0%{opacity:0;transform:translate(0,-50%) rotate(45deg) scale(.4)}
    100%{opacity:1;transform:translate(0,-50%) rotate(45deg) scale(1)}
  }
  @keyframes buttonArrive{
    0%{opacity:0;transform:translateY(18px)}
    100%{opacity:1;transform:none}
  }
  @keyframes titleFlash{
    0%{opacity:0}
    28%{opacity:.72}
    100%{opacity:0}
  }
  @media(hover:hover) and (pointer:fine){
    .topic-word{pointer-events:auto;cursor:pointer}
    .topic-word:hover{color:var(--white)}
    .ask.hover-word-1 .r1,
    .ask.hover-word-2 .r2,
    .ask.hover-word-3 .r3,
    .ask.hover-word-4 .r4{opacity:1}
  }

  /* ═════ EL CHEQUEO ═════ */
  .stage{position:relative;min-height:100svh;display:grid;align-content:center;padding:120px 0 96px}
  #chequeo{
    --unlock:0;overflow:hidden;
    background:
      radial-gradient(70vw 55vw at 74% 28%,rgba(88,110,255,.14),transparent 68%),
      radial-gradient(58vw 46vw at 14% 76%,rgba(142,155,255,.08),transparent 70%),
      var(--ink);
  }
  #chequeo::before{
    content:'';position:absolute;left:50%;top:50%;z-index:1;width:min(62vw,760px);height:min(62vw,520px);pointer-events:none;
    transform:translate(-50%,-50%) scale(calc(.72 + var(--unlock) * .28));
    border-radius:999px;
    background:radial-gradient(closest-side,rgba(88,110,255,.16),rgba(88,110,255,.045) 62%,transparent);
    opacity:calc(.18 + var(--unlock) * .38);
  }
  #chequeo .eyebrow,#chequeo h2,#chequeo .check{
    transition:opacity .72s ease,transform .72s cubic-bezier(.16,.84,.2,1),filter .72s ease;
  }
  #chequeo:not(.unlocked) .eyebrow,#chequeo:not(.unlocked) h2,#chequeo:not(.unlocked) .check{
    opacity:.84;transform:translateY(8px);filter:none;
  }
  #chequeo h2{transition-delay:.08s}
  #chequeo .check{transition-delay:.18s}
  #chequeo.unlocked .check{animation:unlockSettle .72s cubic-bezier(.16,.84,.2,1) both}
  @keyframes unlockSettle{0%{transform:translateY(18px) scale(.985)}100%{transform:none}}
  .eyebrow{display:inline-flex;align-items:center;gap:14px;font-size:.71rem;font-weight:800;text-transform:uppercase;letter-spacing:.17em;color:var(--muted);margin-bottom:26px}
  .eyebrow::before{content:'';width:40px;height:1px;background:var(--blue)}
  h2{font-family:var(--display);font-weight:900;text-transform:uppercase;font-size:clamp(1.9rem,3.8vw,3.4rem);line-height:1;letter-spacing:-.02em;max-width:20ch}
  h2 em{font-style:normal;color:var(--blue)}

  .check{
    display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(28px,3.4vw,48px);align-items:stretch;
    margin-top:clamp(26px,3.4vh,42px);padding:clamp(18px,2.2vw,30px);
    border:1.5px solid rgba(142,155,255,.38);border-radius:8px;
    background:linear-gradient(135deg,rgba(255,255,255,.055),rgba(255,255,255,.018));
    box-shadow:0 24px 90px rgba(0,0,0,.24),0 0 34px rgba(88,110,255,.12), inset 0 1px 0 rgba(255,255,255,.08);
    backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  }
  /* align-content:start es lo que impide que las seis casillas se repartan
     el sobrante de la fila. Sin esto crecen y se achican con el largo del
     diagnóstico, que cambia con cada clic. */
  .opts{display:grid;gap:8px;align-content:start}
  .opt{
    position:relative;display:flex;align-items:center;gap:16px;width:100%;min-height:64px;
    background:rgba(4,7,18,.34);border:1px solid rgba(255,255,255,.075);border-radius:8px;
    padding:16px 16px;text-align:left;cursor:pointer;color:var(--white);font:inherit;
    font-size:clamp(1rem,1.34vw,1.18rem);font-weight:760;letter-spacing:-.02em;
    transition:transform .28s ease,background .28s ease,border-color .28s ease,color .28s ease,box-shadow .28s ease;
  }
  .opt:hover{
    transform:translateY(-1px);border-color:rgba(142,155,255,.38);
    background:
      radial-gradient(220px 220px at var(--hx,50%) var(--hy,50%),rgba(142,155,255,.16),transparent 68%),
      rgba(88,110,255,.12);
  }
  .opt .box{flex:0 0 auto;width:27px;height:27px;border-radius:8px;border:1.5px solid rgba(255,255,255,.28);display:grid;place-items:center;transition:background .35s ease,border-color .35s ease,box-shadow .35s ease,transform .35s ease}
  .opt .box::after{content:'';width:9px;height:5px;border-left:2px solid transparent;border-bottom:2px solid transparent;transform:translateY(-1px) rotate(-45deg);transition:border-color .25s ease}
  .opt[aria-pressed="true"]{transform:translateY(-1px);background:rgba(88,110,255,.17);border-color:rgba(142,155,255,.55)}
  .opt[aria-pressed="true"] .box{background:var(--blue);border-color:var(--blue);box-shadow:0 0 26px rgba(88,110,255,.55)}
  .opt[aria-pressed="true"] .box::after{border-color:#fff}
  .opt[aria-pressed="false"]{color:rgba(255,255,255,.74)}
  .opt.sub{margin-left:43px;width:calc(100% - 43px);min-height:58px;font-size:clamp(.9rem,1.12vw,1rem);color:rgba(255,255,255,.66)}
  /* La repregunta, apagada hasta que se marca "Marca". Antes se ocultaba
     con [hidden] y al aparecer empujaba todo lo de abajo. */
  .opt.sub.trabada{opacity:.34;cursor:default;pointer-events:none}
  .opt.sub.trabada .box{border-style:dashed}
  /* La nota del criterio: va una vez, arriba, en vez de repetida en cada
     opción. Ahí es donde deja de leerse como si el sitio contestara por vos. */
  .check-nota{color:var(--muted);font-size:.95rem;line-height:1.6;max-width:52ch;
              margin-top:14px}

  .result{
    position:sticky;top:120px;align-self:start;min-height:100%;
    border:1px solid rgba(142,155,255,.18);border-radius:8px;
    padding:clamp(22px,2.6vw,32px);
    background:linear-gradient(180deg,rgba(88,110,255,.13),rgba(4,7,18,.42));
    box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
  }
  .meter{display:flex;gap:7px;margin-bottom:26px}
  .meter i{flex:1;height:3px;background:var(--faint);border-radius:2px;transition:background .45s ease,box-shadow .45s ease}
  .meter i.on{background:var(--blue);box-shadow:0 0 14px rgba(88,110,255,.8)}
  .presence-map{
    position:relative;display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin:0 0 26px;
    padding:10px;border:1px solid rgba(255,255,255,.08);border-radius:8px;
    background:rgba(7,10,22,.24);overflow:hidden;
  }
  .presence-map::before{
    content:'';position:absolute;left:10%;right:10%;top:31px;height:1px;
    background:linear-gradient(90deg,transparent,rgba(88,110,255,.42),transparent);
    opacity:.55;
  }
  .map-node{
    position:relative;z-index:1;display:grid;justify-items:center;gap:8px;
    background:none;border:0;color:rgba(255,255,255,.42);font:inherit;
    font-size:.58rem;font-weight:850;letter-spacing:.08em;text-transform:uppercase;
  }
  .map-node i{
    width:42px;height:42px;border-radius:12px;display:grid;place-items:center;
    border:1px solid rgba(255,255,255,.12);background:#090D1B;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
    transition:background .42s ease,border-color .42s ease,box-shadow .42s ease,transform .42s cubic-bezier(.16,.84,.2,1);
  }
  .map-node i::before{
    content:'';width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.24);
    transition:background .42s ease,box-shadow .42s ease,transform .42s cubic-bezier(.16,.84,.2,1);
  }
  .map-node.is-on{color:rgba(255,255,255,.88)}
  .map-node.is-on i{
    border-color:rgba(88,110,255,.72);background:rgba(88,110,255,.18);
    box-shadow:0 0 28px rgba(88,110,255,.34),inset 0 1px 0 rgba(255,255,255,.08);
    transform:translateY(-2px);
  }
  .map-node.is-on i::before{background:var(--blue);box-shadow:0 0 16px rgba(88,110,255,.9);transform:scale(1.18)}
  .map-node.is-next i{border-color:rgba(255,255,255,.24)}
  .map-node.is-next i::before{background:#fff;box-shadow:0 0 16px rgba(255,255,255,.45)}
  .result h3{font-size:clamp(1.3rem,2.2vw,1.9rem);font-weight:800;letter-spacing:-.03em;line-height:1.12;margin-bottom:13px}
  .result p{color:var(--muted);font-size:.97rem;line-height:1.68;max-width:38ch}
  .result:not(.has-selection) .btn{opacity:0;pointer-events:none;transform:translateY(8px)}
  .result.has-selection .btn{opacity:1;pointer-events:auto}
  .path{margin-top:24px;padding:16px 0 0 18px;border-left:2px solid rgba(88,110,255,.45);max-width:38ch}
  .path > b{display:block;font-size:.68rem;font-weight:850;text-transform:uppercase;letter-spacing:.13em;color:var(--blue);margin-bottom:12px}
  .path em{display:block;font-style:normal;font-size:.78rem;font-weight:800;color:rgba(255,255,255,.82);margin-bottom:3px}
  .path span{display:block;color:var(--muted);font-size:.9rem;line-height:1.6}
  .path[hidden]{display:none}
  /* Los diagnósticos viven en el HTML servido: se muestran y se ocultan,
     nunca se inyectan. Así los lee cualquier buscador o asistente sin
     ejecutar JavaScript, que es justamente lo que este sitio ofrece. */
  .dx [data-dx]{display:none}
  .dx [data-dx].on{display:block}
  [data-paths]{display:grid;gap:14px}
  [data-paths] > [data-camino]{display:none}
  [data-paths] > [data-camino].on{display:block}
  .btn{position:relative;overflow:hidden;display:inline-flex;align-items:center;gap:11px;background:var(--blue);color:#fff;text-decoration:none;border-radius:10px;padding:16px 25px;font-size:.77rem;font-weight:850;letter-spacing:.1em;text-transform:uppercase;box-shadow:0 14px 40px rgba(88,110,255,.3);transition:transform .25s ease,box-shadow .25s ease;margin-top:26px}
  .btn::before,.ghost::before{
    content:'';position:absolute;inset:0;pointer-events:none;opacity:0;
    background:radial-gradient(160px 160px at var(--hx,50%) var(--hy,50%),rgba(255,255,255,.24),transparent 70%);
    transition:opacity .25s ease;
  }
  .btn:hover::before,.ghost:hover::before{opacity:1}
  .btn:hover{transform:translateY(-2px);box-shadow:0 20px 52px rgba(88,110,255,.46)}

  @media(max-width:900px){
    .ask{min-height:100svh;padding:0}
    .ask .pin{
      --ask-top:clamp(76px,12svh,92px);
      --ask-bottom:clamp(24px,4svh,34px);
      --ask-gap:clamp(18px,3svh,24px);
      --ask-button:54px;
      min-height:100svh;gap:var(--ask-gap);
      padding:var(--ask-top) 18px var(--ask-bottom);
    }
    .ask-scene{
      width:calc(100vw - 36px);
      height:calc(100svh - var(--ask-top) - var(--ask-bottom) - var(--ask-gap) - var(--ask-button));
      grid-template-columns:minmax(0,1fr) minmax(0,1fr);
      grid-template-rows:minmax(78px,1fr) auto minmax(78px,1fr);
      column-gap:18px;
      /* Antes 7svh, que en cualquier teléfono de menos de 830px de alto se
         quedaba clavado en el mínimo de 58: la composición medía lo mismo en
         un iPhone chico que en uno grande, y en el grande el aire sobrante
         era mayor. Ahora crece con la pantalla. */
      row-gap:clamp(58px,11svh,96px);
    }
    .topic-word{font-size:15px;line-height:1.15;letter-spacing:.08em}
    .topic-word.t1{grid-area:1/1;justify-self:start;align-self:end}
    .topic-word.t2{grid-area:1/2;justify-self:end;align-self:end}
    .topic-word.t3{grid-area:3/1;justify-self:start;align-self:start}
    .topic-word.t4{grid-area:3/2;justify-self:end;align-self:start}
    /* Las flechas se apagan en celular. En una pantalla chica leían como
       anotación hecha a mano encima de la composición: trazo diagonal fino
       y una punta de 6px que a ese tamaño es un corchete, no una flecha.
       Y explicaban algo que la posición ya dice: cuatro palabras en las
       esquinas de un titular se leen como partes de él sin conectores.
       El cálculo sigue corriendo pero no se dibuja: para volver a
       encenderlas alcanza con sacar esta regla. */
    .ask.has-rays .ask-rays{display:none}
    .ask-ray{height:1.5px;opacity:.72}
    .ask-head{width:6px;height:6px;border-width:1.5px}
    .q{grid-area:2/1/3/3;width:min(100%,360px)}
    .q .txt{font-size:clamp(2rem,10vw,2.5rem);line-height:.98;letter-spacing:-.015em}
    .go{padding:14px 25px;min-height:50px;font-size:15px;letter-spacing:.09em}
    .stage{min-height:auto;padding:104px 0 80px}
    #chequeo.stage{padding-top:78px}
    #chequeo::before{width:120vw;height:90vw;top:34%}
    #chequeo .eyebrow{margin-bottom:20px}
    #chequeo h2{font-size:clamp(1.72rem,8.05vw,2.34rem);line-height:.96;max-width:18ch}
    /* El marco exterior se va en celular: con una sola columna es una caja
       adentro de otra —cada fila ya tiene su borde— y es el lenguaje de
       plantilla que el sitio evita. Se lleva puesto el desenfoque de 16px,
       que corría sobre una tarjeta de ancho completo y era de lo más caro
       que hacía la página. */
    .check{
      grid-template-columns:1fr;gap:10px;margin-top:20px;
      padding:0;margin-inline:0;border:0;border-radius:0;
      background:none;box-shadow:none;
      backdrop-filter:none;-webkit-backdrop-filter:none;
    }
    .opts{gap:7px}
    .opt{min-height:54px;padding:11px 11px;gap:11px;font-size:.93rem;line-height:1.26}
    .opt .box{width:26px;height:26px;border-radius:8px}
    .opt.sub{margin-left:24px;width:calc(100% - 24px);font-size:.88rem;padding:12px 11px}
    .check-nota{font-size:.92rem;margin-top:12px}
    /* ═════ EL RESULTADO EN CELULAR ═════
       En desktop el resultado es pegajoso al lado de las opciones: tocás y
       la respuesta cambia al lado del dedo. En una columna eso se pierde y
       el diagnóstico queda cientos de píxeles más abajo.
       No se resuelve con una barra fija —competiría con la barra superior,
       y una barra pegada abajo en un celular se lee como aviso de cookies—.
       Se resuelve acortando la distancia: lo que cambia al tocar va primero.
       Medidor, diagnóstico y próximos movimientos arriba; el mapa, que es
       ilustrativo y ocupa 70px, pasa al final. */
    .result{position:static;min-height:0;margin-top:12px;padding:17px 18px;
            display:flex;flex-direction:column}
    .meter{margin-bottom:14px;order:0}
    .dx{order:1}
    .path{margin-top:18px;padding-top:13px;order:2}
    .presence-map{gap:5px;margin:22px 0 0;padding:8px;order:3}
    .result .btn{width:100%;justify-content:center;margin-top:18px;padding:14px 18px;order:4}
    .presence-map::before{top:27px}
    /* Estaba en .5rem, que son 8px. Once no es holgado pero es legible;
       si "GOOGLE" no entra en una línea, hay que bajar a cuatro nodos. */
    .map-node{font-size:11px;letter-spacing:.02em}
    .map-node i{width:36px;height:36px;border-radius:10px}
    .result h3{font-size:1.28rem;margin-bottom:9px}
    .result p{font-size:.91rem;line-height:1.56}
    .hero .cue{display:none}
  }
  @media(prefers-reduced-motion:reduce){
    *,*::before,*::after{transition-duration:.001ms!important}
    #pregunta *,#pregunta *::before,#pregunta *::after{transition:none!important;animation:none!important}
  }

  /* ═════ PROCESO DE TRABAJO ═════
     Antes la sección medía 3,6 pantallas y el riel se movía con el scroll
     vertical: viaje del 34% y meseta del 66%, o sea dos tercios de scroll
     que no producían movimiento. Se sentía trabado y eran 32 golpes de
     rueda para cuatro fichas.
     Ahora el riel es un contenedor con desplazamiento horizontal de
     verdad y la sección mide una pantalla. La inercia y el imán los hace
     el navegador. El guion solo agrega lo que un mouse no tiene: rueda,
     botones y teclado. */
  #metodo{
    position:relative;isolation:isolate;
    background:
      radial-gradient(66vw 42svh at 50% 50%,rgba(88,110,255,.11),transparent 92%),
      var(--ink);
    --hz-peek:clamp(64px,7vw,150px);
  }
  .hz-pin{position:relative;z-index:1;
          padding:clamp(64px,9vh,104px) 0 clamp(46px,7vh,84px)}
  .hz-cab{width:min(calc(100% - 60px),var(--max));margin-inline:auto;
          display:flex;align-items:flex-end;justify-content:space-between;gap:32px;flex-wrap:wrap}
  .hz-cab h2{
    font-family:var(--display);font-weight:900;text-transform:uppercase;
    font-size:clamp(1.72rem,3.4vw,2.9rem);line-height:1.02;letter-spacing:-.028em;max-width:14ch;
  }
  .hz-cab h2 em{font-style:normal;color:var(--blue)}

  /* el mando: contador, avance y flechas, a la altura del titular */
  .hz-barra{display:flex;align-items:center;gap:18px;flex:1;min-width:280px;padding-bottom:6px}
  .hz-cuenta{font-family:var(--display);font-weight:900;font-size:.86rem;letter-spacing:.06em;white-space:nowrap}
  .hz-cuenta u{text-decoration:none;color:var(--white)}
  .hz-cuenta s{text-decoration:none;color:rgba(255,255,255,.34)}
  .hz-riel{position:relative;flex:1;height:2px;background:rgba(255,255,255,.12);border-radius:2px}
  .hz-riel i{position:absolute;inset:0 auto 0 0;width:12%;border-radius:2px;background:var(--blue);
             box-shadow:0 0 12px rgba(88,110,255,.5);transition:width .16s linear}
  .hz-flechas{display:flex;gap:8px}
  .hz-flechas button{
    width:38px;height:38px;display:grid;place-items:center;cursor:pointer;
    background:none;border:1px solid rgba(142,155,255,.42);border-radius:999px;
    color:var(--white);font:inherit;font-size:1rem;line-height:1;
    transition:background .25s ease,border-color .25s ease,opacity .25s ease,transform .25s ease;
  }
  .hz-flechas button:hover:not([disabled]){background:rgba(88,110,255,.22);border-color:var(--blue);transform:translateY(-1px)}
  .hz-flechas button[disabled]{opacity:.26;cursor:default}

  /* el riel */
  .hz-marco{position:relative}
  .hz-visor{
    width:min(calc(100% - 60px),var(--max));margin:clamp(26px,3.6vh,40px) auto 0;
    display:flex;gap:16px;overflow-x:auto;overflow-y:visible;
    scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
    padding-bottom:8px;scrollbar-width:none;overscroll-behavior-x:contain;
  }
  .hz-visor::-webkit-scrollbar{display:none}
  .hz-step{
    flex:0 0 calc(100% - var(--hz-peek));scroll-snap-align:start;
    position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);
    gap:clamp(24px,3vw,54px);align-items:start;
    padding:clamp(26px,3vh,38px) clamp(26px,2.6vw,40px);
    border:1px solid rgba(142,155,255,.16);border-radius:12px;
    background:linear-gradient(135deg,rgba(255,255,255,.045),rgba(255,255,255,.012));
    opacity:.34;transition:opacity .5s cubic-bezier(.16,.84,.2,1),border-color .5s ease;
  }
  .hz-step.on{opacity:1;border-color:rgba(142,155,255,.4)}
  .hz-num{display:flex;flex-direction:column;gap:12px}
  .hz-n{font-family:var(--display);font-weight:900;font-size:clamp(2.4rem,4.6vw,3.8rem);
        line-height:.84;letter-spacing:-.04em;color:rgba(255,255,255,.16);
        transition:color .5s cubic-bezier(.16,.84,.2,1)}
  .hz-step.on .hz-n{color:var(--blue)}
  .hz-tag{font-size:.62rem;font-weight:850;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
  .hz-step h3{font-family:var(--display);font-weight:900;text-transform:uppercase;
              font-size:clamp(1.15rem,1.9vw,1.62rem);line-height:1.06;letter-spacing:-.02em;margin-bottom:12px}
  .hz-step h3 .hz-hl{color:var(--blue-lit)}
  .hz-step p{color:var(--muted);font-size:clamp(.95rem,1.05vw,1.04rem);line-height:1.68;max-width:44ch}

  /* Sin puntos ni línea de ayuda. Contador, avance y flechas ya dicen
     dónde estás, cuántas hay y cómo moverte: los puntos repetían las dos
     primeras cosas y, con cuatro fichas y flechas al lado, saltar a una
     puntual no es una necesidad real. La ayuda escrita era una
     instrucción, y el sitio no da instrucciones: la indicación para
     teclado vive en el aria-label del riel, que es donde hace falta. */
  .hz-flechas button:focus-visible{
    outline:2px solid var(--blue);outline-offset:3px;border-radius:999px}
  .hz-visor:focus-visible{outline:2px solid var(--blue);outline-offset:4px;border-radius:12px}


  /* ═════ EL PROCESO EN CELULAR · LA CORRIENTE ═════
     Acá no hay riel horizontal: son cuatro bloques de quince palabras y
     entran enteros. Esconder tres detrás de un deslizamiento es pedir
     trabajo justo en la sección que tiene que tranquilizar.
     El gesto lo pone la marca: el isotipo es un interruptor y la página
     abre encendiéndolo. Así que la línea no decora, es un cable: cada
     etapa se enciende cuando la corriente le llega, y la corriente baja
     siguiendo tu lectura. */
  @media(max-width:900px){
    .hz-cab{width:calc(100% - 36px);display:block}
    /* el contador, la barra de avance y las flechas solo tienen sentido
       cuando hay algo que recorrer de costado */
    .hz-barra{display:none}
    /* el riel deja de ser riel: pasa a ser una columna */
    .hz-marco{width:calc(100% - 36px);margin-inline:auto;padding-left:48px}
    .hz-visor{
      display:block;width:auto;margin:clamp(28px,4.6vh,42px) 0 0;padding:0;
      overflow:visible;scroll-snap-type:none;
    }
    /* el cable apagado, entero: muestra el camino que falta */
    .hz-marco::before{
      content:'';position:absolute;left:13px;top:calc(clamp(28px,4.6vh,42px) + 8px);bottom:8px;
      width:1px;
      background:linear-gradient(180deg,rgba(255,255,255,.10) 74%,rgba(255,255,255,0));
    }
    /* las fichas dejan de ser fichas */
    .hz-step{
      display:block;border:0;border-radius:0;background:none;padding:0;opacity:1;
      padding-bottom:clamp(28px,4.4vh,40px);
    }
    .hz-step:last-child{padding-bottom:0}
    .hz-num{gap:0}
    .hz-n{font-size:clamp(1.5rem,7.4vw,2rem);color:rgba(255,255,255,.15);margin-bottom:9px}
    .hz-tag{margin-bottom:11px}
    .hz-step h3{position:relative;font-size:clamp(1.06rem,5vw,1.3rem);margin-bottom:9px}
    .hz-step p{font-size:1rem;max-width:none}

    /* la lámpara, sobre el cable */
    .hz-step::before{
      content:'';position:absolute;left:-41px;top:8px;z-index:3;
      width:11px;height:11px;border-radius:999px;
      background:var(--ink);border:2px solid rgba(255,255,255,.18);
      box-shadow:0 0 0 5px var(--ink);
      transform:scale(.7);
    }
    /* el tramo de corriente que sale de esta lámpara hacia la siguiente */
    .hz-step::after{
      content:'';position:absolute;left:-36px;top:18px;bottom:-2px;width:3px;z-index:1;
      border-radius:999px;background:var(--blue);
      box-shadow:0 0 12px rgba(88,110,255,.7);
      transform:scaleY(0);transform-origin:top center;
    }
    /* La última etapa también lleva corriente, pero se disipa en vez de
       cortarse: sin esto quedaba un tramo gris abajo del cuarto nodo que
       no se pintaba nunca. Y la etapa se llama Continuidad, así que que
       la línea siga y se apague sola dice lo que tiene que decir. */
    .hz-step:last-child::after{
      background:linear-gradient(180deg,var(--blue),rgba(88,110,255,0));
      box-shadow:none;bottom:-14px;
    }

    /* ── cuando la corriente llega a esta etapa ── */
    .hz-step.viva::before{animation:hzPrende .52s cubic-bezier(.2,.9,.25,1) both}
    .hz-step.viva::after{transform:scaleY(1);transition:transform .62s linear .16s}
    .hz-step.viva .hz-n{animation:hzNumero .5s ease both}

    /* el titular se descubre de izquierda a derecha, con un destello */
    #metodo.hz-anim .hz-step h3{clip-path:inset(0 100% 0 0)}
    #metodo.hz-anim .hz-step.viva h3{animation:hzRevela .55s cubic-bezier(.16,.84,.2,1) .09s both}
    .hz-step h3::after{
      content:'';position:absolute;left:0;top:-6%;width:34px;height:112%;
      background:linear-gradient(90deg,rgba(88,110,255,0),rgba(142,155,255,.55),rgba(88,110,255,0));
      opacity:0;pointer-events:none;
    }
    #metodo.hz-anim .hz-step.viva h3::after{
      animation:hzDestello .55s cubic-bezier(.16,.84,.2,1) .09s both}

    #metodo.hz-anim .hz-tag,#metodo.hz-anim .hz-step p{opacity:0;transform:translateY(10px)}
    #metodo.hz-anim .hz-step.viva .hz-tag{animation:hzSube .5s ease .06s both}
    #metodo.hz-anim .hz-step.viva p{animation:hzSube .55s ease .23s both}
  }
  @keyframes hzPrende{
    0%  {transform:scale(.7);border-color:rgba(255,255,255,.18);
         box-shadow:0 0 0 5px var(--ink),0 0 0 0 rgba(88,110,255,0)}
    38% {transform:scale(1.55);border-color:var(--blue);
         box-shadow:0 0 0 5px var(--ink),0 0 26px 6px rgba(88,110,255,.85)}
    100%{transform:scale(1);border-color:var(--blue);
         box-shadow:0 0 0 5px var(--ink),0 0 14px 0 rgba(88,110,255,.5)}
  }
  @keyframes hzNumero{
    0%{color:rgba(255,255,255,.15)}
    30%{color:#fff;text-shadow:0 0 22px rgba(88,110,255,.7)}
    100%{color:var(--blue);text-shadow:0 0 0 rgba(88,110,255,0)}
  }
  @keyframes hzRevela{
    0%{clip-path:inset(0 100% 0 0)}
    100%{clip-path:inset(0 0 0 0)}
  }
  @keyframes hzDestello{
    0%{opacity:0;transform:translateX(-30px)}
    22%{opacity:1}
    100%{opacity:0;transform:translateX(var(--hz-ancho,320px))}
  }
  @keyframes hzSube{
    0%{opacity:0;transform:translateY(10px)}
    100%{opacity:1;transform:none}
  }
  @media(max-width:900px) and (prefers-reduced-motion:reduce){
    .hz-step::before{transform:scale(1);border-color:var(--blue)}
    .hz-step::after{transform:scaleY(1)}
    .hz-n{color:var(--blue)}
    #metodo.hz-anim .hz-step h3{clip-path:none}
    #metodo.hz-anim .hz-tag,#metodo.hz-anim .hz-step p{opacity:1;transform:none}
    .hz-step h3::after{display:none}
  }
  @media(prefers-reduced-motion:reduce){
    .hz-visor{scroll-snap-type:none}
    .hz-step{opacity:1}
  }

  /* ── cierre: el equipo, fuera del recorrido ── */
  .equipo{position:relative;z-index:2;padding:clamp(32px,5vh,52px) 0 clamp(52px,8vh,80px)}
  .equipo .caja{width:min(calc(100% - 60px),var(--max));margin-inline:auto;
                border-top:1px solid var(--faint);padding-top:clamp(22px,3vh,32px);
                display:grid;grid-template-columns:1fr;gap:18px;align-items:start}
  .equipo b{display:block;font-family:var(--display);font-weight:900;text-transform:uppercase;
            font-size:clamp(1.02rem,1.5vw,1.32rem);line-height:1.12;letter-spacing:-.015em;margin-bottom:9px}
  .equipo p{color:var(--muted);font-size:clamp(.94rem,1.05vw,1.02rem);line-height:1.66;max-width:46ch}
  .equipo ul{list-style:none;display:flex;flex-wrap:wrap;gap:8px}
  .equipo li{font-size:.73rem;font-weight:780;letter-spacing:.05em;color:rgba(255,255,255,.8);
             border:1px solid rgba(255,255,255,.18);border-radius:999px;padding:7px 14px;white-space:nowrap}
  @media(min-width:1100px){
    .equipo .caja{grid-template-columns:minmax(0,1fr) auto;gap:clamp(24px,4vw,64px)}
    .equipo ul{justify-content:flex-end}
  }

  /* Transición D · profundidad.
     La sección que sale se aleja —se achica, se desenfoca apenas y se
     apaga— mientras la que entra llega desde adelante creciendo hasta
     su tamaño real. Se mueven en profundidad, no se deslizan. */
  /* Transición D · profundidad.
     El chequeo se aleja mientras el proceso llega desde adelante. Antes
     esto vivía en una clase .cover-in que quedó sin elemento al
     reconstruirse la sección: el gesto estuvo muerto. Ahora la
     profundidad la hace el panel del proceso y no la sección, para no
     transformar al ancestro de un elemento fijado.
     El valor por defecto es 1: sin JavaScript queda en su lugar real. */
  #metodo .hz-pin{
    transform:translateY(calc((1 - var(--t,1)) * 24vh)) scale(calc(.86 + var(--t,1) * .14));
    transform-origin:top center;
    opacity:calc(.16 + var(--t,1) * .84);
    will-change:transform,opacity;
  }
  @media(max-width:900px){
    #metodo .hz-pin{transform:translateY(calc((1 - var(--t,1)) * 12svh)) scale(calc(.94 + var(--t,1) * .06))}
  }
  @media(prefers-reduced-motion:reduce){
    #metodo .hz-pin{transform:none!important;opacity:1!important;will-change:auto}
  }
  @media(min-width:901px){
    .cover-out > *{filter:blur(calc(var(--tb,0) * 6px))}
  }

  .cover-out{position:sticky;top:0;z-index:1;padding-top:clamp(84px,11vh,104px);padding-bottom:clamp(28px,4vh,48px)}
  .cover-out > *{
    transform:scale(calc(1 - var(--t,0) * .22)) translateY(calc(var(--t,0) * -13vh));
    opacity:calc(1 - var(--t,0) * 1.08);
    will-change:transform,opacity;
  }
  @media(max-width:900px){
    /* En celular no se fija: el formulario no entra en una pantalla.
       La profundidad se conserva con solapamiento.
       Era 16svh y encima venía un .breath de 10svh: más de 200px de nada
       entre el chequeo y el proceso en un teléfono. El solapamiento
       necesita aire, no un abismo. */
    .cover-out{position:relative;padding-bottom:7svh}
    .cover-out > *{filter:none;transform:scale(calc(1 - var(--t,0) * .12)) translateY(calc(var(--t,0) * -6svh));opacity:calc(1 - var(--t,0) * .78)}
    /* El respiro entre secciones se va en celular: el relleno de cierre del
       chequeo ya cumple esa función y sumados dejaban un hueco enorme. */
    .breath{height:0}
    .cue{display:block}
  }

  /* ═════ MUESTRAS · el telón se levanta y aparece el trabajo ═════ */
  .work{position:relative;z-index:5;min-height:230svh;--w:0;--pre:0;background:var(--ink);isolation:isolate}
  .work .pin{
    position:sticky;top:0;height:100svh;overflow:hidden;display:grid;align-content:center;background:var(--ink);
    transform:translateY(calc((1 - var(--pre)) * 13vh)) scale(calc(.94 + var(--pre) * .06));
    border-radius:calc((1 - var(--pre)) * 26px) calc((1 - var(--pre)) * 26px) 0 0;
    box-shadow:0 calc((1 - var(--pre)) * -42px) calc((1 - var(--pre)) * 120px) rgba(0,0,0,.72);
    will-change:transform,border-radius,box-shadow;
  }
  .work.is-pinned .pin{position:fixed;left:0;right:0;top:0;z-index:6;transform:none;border-radius:0;box-shadow:none}
  .work.is-past .pin{position:absolute;left:0;right:0;top:auto;bottom:0}
  .curtain{position:absolute;inset:0;z-index:5;pointer-events:none}
  .curtain .half{
    position:absolute;left:0;right:0;height:50.6%;background:var(--blue);
    will-change:transform;
  }
  .curtain .half.top{top:0;transform:translateY(calc(var(--w) * -101%))}
  .curtain .half.bot{bottom:0;transform:translateY(calc(var(--w) * 101%))}
  .curtain .txt{
    position:absolute;inset:0;display:grid;place-content:center;text-align:center;
    opacity:calc(var(--pre) - var(--w) * 2.2);
    transform:translateY(calc((1 - var(--pre)) * 34px)) scale(calc(.95 + var(--pre) * .05));
    filter:blur(calc((1 - var(--pre)) * 8px));
    will-change:transform,opacity,filter;
  }
  .curtain .txt h2{
    font-family:var(--display);font-weight:900;text-transform:uppercase;
    font-size:clamp(2.2rem,min(9vw,15vh),7rem);line-height:.9;letter-spacing:-.04em;
  }
  .curtain .txt h2 em{font-style:normal;color:#0A0E1E}
  .curtain .txt span{display:block;margin-top:22px;font-size:.7rem;font-weight:850;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.62)}

  .grid{
    position:relative;z-index:3;display:grid;grid-template-columns:repeat(6,1fr);gap:14px;
    width:min(calc(100% - 60px),var(--max));margin-inline:auto;
    opacity:calc(var(--w) * 1.25);transform:translateY(calc((1 - var(--w)) * 36px)) scale(calc(.96 + var(--w) * .04));
    transition:none;
  }
  .card{
    position:relative;display:block;border-radius:14px;overflow:hidden;
    background:#0C1122;border:1px solid rgba(255,255,255,.09);text-decoration:none;color:var(--white);
    opacity:0;transform:translateY(34px) scale(.985);
    cursor:pointer;
    transition:opacity .7s ease,transform .7s cubic-bezier(.16,.84,.2,1),border-color .3s ease;
  }
  .card:focus-visible{outline:2px solid var(--blue);outline-offset:4px}
  .work.open .card{opacity:1;transform:none}
  .work.open .card:nth-child(2){transition-delay:.07s}
  .work.open .card:nth-child(3){transition-delay:.14s}
  .work.open .card:nth-child(4){transition-delay:.21s}
  .work.open .card:nth-child(5){transition-delay:.28s}
  .work.open .card:nth-child(6){transition-delay:.35s}
  .card:nth-child(1){grid-column:span 2}
  .card:nth-child(2){grid-column:span 2}
  .card:nth-child(3){grid-column:span 2}
  .card:nth-child(4){grid-column:span 2}
  .card:nth-child(5){grid-column:span 2}
  .card:nth-child(6){grid-column:span 2}
  .card img{width:100%;height:clamp(150px,26vh,290px);object-fit:cover;display:block;transition:transform .6s cubic-bezier(.16,.84,.2,1)}
  .traiber-clean{position:relative;height:clamp(150px,26vh,290px);overflow:hidden;border-bottom:1px solid rgba(255,255,255,.09);background:#172231}
  .traiber-clean img{
    width:100%;height:100%;object-fit:cover;object-position:54% center;filter:none;
  }
  .traiber-clean::before{display:none}
  .miriam-mockups{
    position:relative;height:clamp(150px,26vh,290px);overflow:hidden;border-bottom:1px solid rgba(255,255,255,.09);
    background:
      linear-gradient(180deg,#fbfbfa 0%,#f1f1ef 58%,#e8e8e6 100%);
  }
  .miriam-shot{
    position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 28%;z-index:4;
    background:#f3f3f1;
  }
  .phone{
    position:absolute;top:57%;width:30%;max-width:124px;aspect-ratio:9/18.4;padding:5px;border-radius:20px;
    background:#242424;border:1px solid rgba(0,0,0,.22);box-shadow:0 18px 34px rgba(0,0,0,.24);
  }
  .phone::before{
    content:'';position:absolute;left:50%;top:6px;width:28%;height:4px;transform:translateX(-50%);
    border-radius:999px;background:#242424;z-index:3;
  }
  .phone-screen{position:relative;width:100%;height:100%;border-radius:14px;overflow:hidden;background:#fff}
  .phone.side-a{left:8%;transform:translateY(-39%) rotate(-4deg);z-index:1}
  .phone.grid-phone{left:50%;width:34%;max-width:142px;transform:translate(-50%,-52%);z-index:3}
  .phone.side-b{right:8%;transform:translateY(-39%) rotate(4deg);z-index:1}
  .insta-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;height:100%;background:#101323}
  .insta-grid i{display:block;min-width:0}
  .insta-grid i:nth-child(1),.insta-grid i:nth-child(9){background:#ff5a20}
  .insta-grid i:nth-child(2){background:#f41a71}
  .insta-grid i:nth-child(3){background:#63ee67}
  .insta-grid i:nth-child(4){background:#e9edff}
  .insta-grid i:nth-child(5){background:#ffeb31}
  .insta-grid i:nth-child(6){background:#9414d8}
  .insta-grid i:nth-child(7){background:linear-gradient(135deg,#252a37,#0e111c)}
  .insta-grid i:nth-child(8){background:#38d6c8}
  .insta-post{
    position:relative;height:100%;display:grid;align-content:start;padding:14px 11px 10px;
    color:#fff;font-weight:900;line-height:1.04;text-transform:uppercase;font-size:clamp(.62rem,1.05vw,.95rem);
  }
  .insta-post::before{
    content:'';position:absolute;right:-18%;bottom:-18%;width:68%;aspect-ratio:1;border-radius:50%;
    background:rgba(255,255,255,.18);
  }
  .insta-post::after{
    content:'';position:absolute;left:12%;right:12%;bottom:11%;height:30%;border-radius:50% 50% 12px 12px;
    background:rgba(10,13,24,.34);
  }
  .insta-post.pink{background:#f41a71}
  .insta-post.orange{background:#ff5a20}
  .insta-post.yellow{background:#ffeb31;color:#25304a}
  .insta-post.green{background:#63ee67;color:#29304a}
  .insta-post em{position:relative;z-index:1;font-style:normal}
  .insta-post b{position:relative;z-index:1;color:#ffeb31}
  .insta-post.yellow b,.insta-post.green b{color:#9414d8}
  .phone-feed{height:100%;display:grid;grid-template-rows:1fr 1fr 1fr;gap:1px;background:#101323}
  .card::after{
    content:'';position:absolute;inset:0;z-index:2;pointer-events:none;opacity:0;
    background:radial-gradient(260px 220px at var(--hx,50%) var(--hy,50%),rgba(142,155,255,.18),transparent 68%);
    transition:opacity .28s ease;
  }
  .card:hover::after{opacity:1}
  .card:hover{border-color:rgba(88,110,255,.55)}
  .card:hover img{transform:scale(1.04)}
  .card.traiber-card:hover img{transform:none}
  .card .meta{padding:14px 16px 16px}
  .card .meta b{display:block;font-size:.98rem;font-weight:800;letter-spacing:-.02em}
  .card .meta span{display:block;margin-top:4px;font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.42)}
  .card .open{
    position:absolute;top:12px;right:12px;z-index:6;font-size:.62rem;font-weight:850;letter-spacing:.12em;text-transform:uppercase;
    background:rgba(7,10,22,.72);border:1px solid rgba(88,110,255,.5);border-radius:999px;padding:7px 13px;
    backdrop-filter:blur(6px);
  }
  .case-detail{
    display:grid;grid-template-rows:0fr;transition:grid-template-rows .42s cubic-bezier(.16,.84,.2,1);
    border-top:1px solid rgba(142,155,255,.14);
  }
  .case-detail > div{overflow:hidden}
  .case-detail p{
    padding:0 16px 16px;color:rgba(255,255,255,.66);font-size:.88rem;line-height:1.55;
  }
  .card.is-expanded .case-detail{grid-template-rows:1fr}
  .card.is-expanded .open{background:var(--blue);border-color:var(--blue)}
  .case-note{
    position:absolute;left:12px;right:112px;top:12px;z-index:6;pointer-events:none;
    display:grid;gap:5px;padding:12px 13px;border-radius:8px;
    border:1px solid rgba(142,155,255,.22);
    background:rgba(7,10,22,.78);
    backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
    opacity:0;transform:translateY(-8px);
    transition:opacity .32s ease,transform .36s cubic-bezier(.16,.84,.2,1);
  }
  .case-note b{
    font-size:.58rem;font-weight:850;letter-spacing:.13em;text-transform:uppercase;color:var(--blue);
  }
  .case-note span{
    color:rgba(255,255,255,.84);font-size:.82rem;font-weight:720;line-height:1.35;letter-spacing:-.01em;
  }
  .card:hover .case-note,.card:focus-within .case-note{opacity:1;transform:none}
  .card.is-expanded .case-note{opacity:0;transform:translateY(-8px)}
  @media(max-width:900px){
    /* Lo que quedaba de la versión con telón —la grilla en dos columnas
       posicionada en absoluto, alturas de 82px, textos de 8 y 9 píxeles—
       se eliminó: la tira horizontal lo redefine todo más abajo y tener
       dos bloques peleándose es cómo se pierden los arreglos.
       Acá queda solo lo que la tira no cubre. */
    .case-note{
      position:static;margin:0;border-width:0 0 1px;border-radius:0;
      padding:8px 10px;background:rgba(88,110,255,.075);
      opacity:1;transform:none;backdrop-filter:none;-webkit-backdrop-filter:none;
    }
    .card.is-expanded .case-note{display:none}
    /* el mockup de Miriam: el teléfono y sus piezas son ilustración */
    .phone{top:59%;width:31%;padding:3px;border-radius:12px}
    .phone::before{top:4px;height:3px}
    .phone-screen{border-radius:9px}
    .phone.side-a{left:5%}
    .phone.grid-phone{left:50%;width:36%}
    .phone.side-b{right:5%}
    .insta-post{padding:9px 7px;font-size:.42rem}
  }


  /* imán de scroll: si el scroll queda cerca del inicio del proceso,
     se acomoda solo y la sección queda encuadrada. Es "proximity" y no
     "mandatory" a propósito: solo actúa cuando estás cerca, así no pelea
     con los tramos fijados ni secuestra el scroll normal. */
  /* imán de scroll, en todos los anchos: encuadra la sección y evita
     quedar a mitad de camino entre dos. "always" impide además que un
     scroll fuerte se saltee la sección de un solo envión. */
  html{scroll-snap-type:y proximity}
  #pregunta{scroll-snap-align:start;scroll-snap-stop:always}
  #chequeo,#muestras{
    scroll-snap-align:start;scroll-snap-stop:always;scroll-margin-top:70px;
  }
  /* #metodo gestiona su propio scroll interno: no usa snap */
  #metodo{
    scroll-snap-align:none;
  }
  :target{scroll-margin-top:70px}
  @media(prefers-reduced-motion:reduce){
    html{scroll-snap-type:none}
  }
  @media(max-width:900px){
    /* El imán de #muestras es de cuando la sección medía 230svh y se
       fijaba. Ahora es una columna normal con una tira horizontal adentro:
       quedaban dos contenedores con imán, uno por eje. Un deslizamiento
       apenas diagonal lo toma el eje equivocado y la página tironea
       mientras estás pasando trabajos. Se saca el de la página; manda el
       de la tira. */
    #muestras{scroll-snap-align:none;scroll-snap-stop:normal}
    /* El hero ya no mide una pantalla, así que el freno duro de #pregunta
       pasaría a cortar un scroll normal en vez de encuadrar una sección.
       Queda el imán, que sí encuadra; se va el freno. */
    #pregunta{scroll-snap-stop:normal}
    /* En celular el chequeo mide según su contenido y es más alto que la
       pantalla. "always" ahí no encuadra nada: solo frena en seco un
       scroll rápido en el medio de la sección. Queda el imán, se va el
       freno. */
    #chequeo{scroll-snap-stop:normal}
  }

  /* ═════ FAQ ═════ */
  .faq{
    position:relative;z-index:4;background:
      radial-gradient(64vw 40svh at 50% 50%,rgba(88,110,255,.10),transparent 92%),
      var(--ink);
    padding:118px 0 96px;overflow:hidden
  }
  .faq h2{font-family:var(--display);font-weight:900;text-transform:uppercase;font-size:clamp(1.9rem,3.8vw,3.4rem);line-height:1;letter-spacing:-.02em;max-width:20ch}
  .faq h2 em{font-style:normal;color:var(--blue)}
  .qs{margin-top:44px;position:relative}
  /* la misma línea que se dibuja del bloque 'Sobre mí': emparenta el
     tramo final sin agregar un mecanismo nuevo */
  .qs::before{content:'';position:absolute;left:0;right:0;top:0;height:1px;background:var(--faint);
              transform:scaleX(1);transform-origin:left center}
  .faq.revela:not(.is-visible) .qs::before{transform:scaleX(0)}
  .qs::before{transition:transform .82s cubic-bezier(.16,.84,.2,1) .06s}
  .qs details{position:relative;border-bottom:1px solid var(--faint)}
  .qs details::before{
    content:'';position:absolute;left:0;top:0;bottom:0;width:3px;
    background:var(--blue);transform:scaleY(0);transform-origin:top;
    transition:transform .38s cubic-bezier(.16,.84,.2,1);
  }
  .qs details[open]::before{transform:scaleY(1)}
  .qs summary{
    list-style:none;cursor:pointer;padding:26px 44px 26px 24px;position:relative;
    font-size:clamp(1.02rem,1.5vw,1.24rem);font-weight:750;letter-spacing:-.02em;
    transition:color .3s ease;
  }
  .qs summary::-webkit-details-marker{display:none}
  .qs summary::after{
    content:'';position:absolute;right:6px;top:50%;width:13px;height:13px;
    border-right:2px solid var(--blue);border-bottom:2px solid var(--blue);
    transform:translateY(-70%) rotate(45deg);transition:transform .35s cubic-bezier(.16,.84,.2,1);
  }
  .qs details[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
  .qs details[open] summary{color:var(--blue-lit)}
  .qs p{color:var(--muted);font-size:.99rem;line-height:1.72;max-width:74ch;padding:0 44px 28px 24px}
  /* Sin desenfoque: eran seis elementos repintándose a la vez y es de lo
     más caro que hace la página en celular. El cierre además conviene
     quieto: es donde la persona decide, no donde mira. */
  .end .eyebrow,.end h2,.end .sub,.end .acts,.start{
    transition:opacity .72s ease,transform .72s cubic-bezier(.16,.84,.2,1);
  }
  .end.revela:not(.is-visible) .eyebrow,.end.revela:not(.is-visible) h2,
  .end.revela:not(.is-visible) .sub,
  .end.revela:not(.is-visible) .acts,.end.revela:not(.is-visible) .start{
    opacity:0;transform:translateY(20px);
  }
  .faq .eyebrow,.faq h2,.qs details{
    opacity:1;transform:none;filter:none;
    transition:opacity .56s ease,transform .56s cubic-bezier(.16,.84,.2,1);
  }
  .faq.revela:not(.is-visible) .eyebrow,.faq.revela:not(.is-visible) h2,
  .faq.revela:not(.is-visible) .qs details{
    opacity:0;transform:translateY(18px);
  }
  .faq.is-visible .eyebrow,.faq.is-visible h2,.faq.is-visible .qs details,
  .end.is-visible .eyebrow,.end.is-visible h2,.end.is-visible .sub,.end.is-visible .acts,.end.is-visible .start{
    opacity:1;transform:none;filter:none;
  }
  .faq.is-visible h2{transition-delay:.08s}
  .faq.is-visible .qs details:nth-child(1){transition-delay:.14s}
  .faq.is-visible .qs details:nth-child(2){transition-delay:.18s}
  .faq.is-visible .qs details:nth-child(3){transition-delay:.22s}
  .faq.is-visible .qs details:nth-child(4){transition-delay:.26s}
  .faq.is-visible .qs details:nth-child(5){transition-delay:.30s}
  .faq.is-visible .qs details:nth-child(6){transition-delay:.34s}
  .faq.is-visible .qs details:nth-child(7){transition-delay:.38s}
  .faq.is-visible .qs details:nth-child(8){transition-delay:.42s}
  .end.is-visible h2{transition-delay:.08s}
  .end.is-visible .sub{transition-delay:.14s}
  .end.is-visible .acts{transition-delay:.26s}
  .end.is-visible .start{transition-delay:.32s}

  /* ═════ CONTACTO ═════ */
  .end{position:relative;z-index:4;background:var(--ink);padding:clamp(84px,11vh,120px) 0;overflow:hidden}
  .end::before{content:'';position:absolute;inset:0;pointer-events:none;background:radial-gradient(58vw 48vw at 18% 42%, rgba(88,110,255,.17) 0%, transparent 66%)}
  .end-grid{display:grid;grid-template-columns:1.12fr .88fr;gap:clamp(38px,5vw,80px);align-items:start}
  .end h2{font-family:var(--display);font-weight:900;text-transform:uppercase;font-size:clamp(2.1rem,4.4vw,4rem);line-height:.96;letter-spacing:-.035em}
  .end h2 em{font-style:normal;color:var(--blue)}
  .end .sub{color:var(--muted);max-width:42ch;margin-top:22px;font-size:1.02rem;line-height:1.7}
  .end .acts{display:flex;gap:12px;flex-wrap:wrap;margin-top:32px}
  .end .acts .btn,.end .acts .ghost{height:54px;padding:0 26px;display:inline-flex;align-items:center;justify-content:center;margin:0;line-height:1}
  .ghost{position:relative;overflow:hidden;color:var(--white);text-decoration:none;gap:10px;border:1.5px solid rgba(255,255,255,.24);border-radius:10px;font-size:.75rem;font-weight:850;letter-spacing:.11em;text-transform:uppercase;transition:border-color .25s ease,background .25s ease}
  .ghost:hover{border-color:var(--blue);background:rgba(88,110,255,.12)}
  .start{padding:30px;border:1px solid rgba(88,110,255,.3);border-radius:16px;background:rgba(88,110,255,.055)}
  .start b{display:block;font-size:.68rem;font-weight:850;letter-spacing:.14em;text-transform:uppercase;color:var(--blue);margin-bottom:12px}
  .start h3{font-size:1.16rem;font-weight:800;letter-spacing:-.02em;line-height:1.2;margin-bottom:11px}
  .start p{color:var(--muted);font-size:.94rem;line-height:1.7}
  .start ul{list-style:none;margin:15px 0 0;display:grid;gap:7px}
  .start li{color:var(--muted);font-size:.9rem;padding-left:17px;position:relative}
  .start li::before{content:'';position:absolute;left:0;top:.62em;width:6px;height:6px;border-radius:50%;background:var(--blue)}
  .foot-bar{
    position:relative;z-index:4;background:var(--ink);border-top:1px solid var(--faint);
    padding:26px 0;display:flex;gap:18px;flex-wrap:wrap;justify-content:space-between;align-items:center;
    font-size:.78rem;color:rgba(255,255,255,.4);
  }
  .foot-bar a{color:rgba(255,255,255,.62);text-decoration:none}
  .foot-bar a:hover{color:var(--white)}
  @media(max-width:900px){
    .faq{padding:76px 0 64px}
    .end-grid{grid-template-columns:1fr;gap:34px}
    .end .acts .btn,.end .acts .ghost{width:100%}
    .qs{margin-top:36px}
    .qs summary{padding:20px 38px 20px 18px;font-size:.98rem;line-height:1.28}
    .qs p{padding:0 0 22px 18px;font-size:.93rem;line-height:1.66}
    .end .acts{gap:12px}
    .start{padding:26px 30px}
    .foot-bar{flex-direction:column;align-items:flex-start;gap:10px}
  }

  /* Innegociable: el contenido siempre alcanzable.
     En pantallas bajas la sección no se fija —fijarla escondería el
     final del chequeo— pero la transición de profundidad se conserva:
     se logra con solapamiento en vez de con quietud. */
  @media(max-height:880px) and (min-width:901px){
    .cover-out{position:relative;padding-bottom:18svh}
    .cover-out > *{filter:blur(calc(var(--tb,0) * 2px))}
  }
  @media(max-height:720px){
    html{scroll-snap-type:none}
  }

  /* grilla de puntos: el mismo recurso que uso en las piezas de redes.
     Muy tenue y desvanecida hacia los bordes, para que dé textura sin
     competir con el texto. */
  #chequeo::after,#metodo::after{
    content:'';position:absolute;inset:0;z-index:0;pointer-events:none;
    background-image:radial-gradient(circle, rgba(255,255,255,.055) 1px, transparent 1px);
    background-size:26px 26px;
    mask-image:radial-gradient(78% 68% at 50% 46%, #000 0%, transparent 100%);
    -webkit-mask-image:radial-gradient(78% 68% at 50% 46%, #000 0%, transparent 100%);
  }
  #metodo::after{border-radius:inherit}
  .curtain .txt{z-index:2}
  .curtain .half.top::after,.curtain .half.bot::after{
    content:'';position:absolute;inset:0;pointer-events:none;
    background-image:radial-gradient(circle, rgba(255,255,255,.14) 1px, transparent 1px);
    background-size:26px 26px;
  }
  @media(max-width:900px){
    #chequeo::after,#metodo::after,.curtain .half.top::after,.curtain .half.bot::after{background-size:20px 20px}
  }



  /* ═════ SOBRE MÍ ═════
     Su isotipo es un interruptor: acá enciende la sección. La página abre
     con él prendiendo la luz en el hero y cierra con lo mismo.
     Base = una columna y todo visible: sin JavaScript no se esconde nada. */
  .quien{position:relative;z-index:3;background:var(--ink);padding:clamp(44px,6.5vh,88px) 0}
  .quien .caja{width:min(calc(100% - 60px),var(--max));margin-inline:auto;
               border-top:1px solid var(--faint);padding-top:clamp(30px,4.5vh,52px)}
  .quien .cols{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
               gap:clamp(28px,4.5vw,68px);align-items:start}
  .quien .llave{position:relative;display:block;width:54px;height:27px;margin-bottom:clamp(22px,3.4vh,36px)}
  .quien .llave .pill{position:absolute;inset:0;border-radius:999px;border:1.5px solid rgba(255,255,255,.2);
                      transition:border-color .9s ease .12s}
  .quien.on .llave .pill{border-color:rgba(88,110,255,.55)}
  .quien .llave .knob{position:absolute;top:50%;left:3.5px;width:19px;height:19px;border-radius:50%;
                      background:rgba(255,255,255,.22);transform:translateY(-50%);
                      transition:transform .95s cubic-bezier(.62,.03,.2,1) .08s,
                                 background .8s ease .28s,box-shadow .8s ease .28s}
  .quien.on .llave .knob{transform:translate(28px,-50%);background:var(--blue);
                         box-shadow:0 0 20px rgba(88,110,255,.8)}
  .quien h2{font-family:var(--display);font-weight:900;text-transform:uppercase;
            font-size:clamp(1.6rem,3.4vw,2.9rem);line-height:1.02;letter-spacing:-.03em;margin:0}
  .quien .cuerpo{color:var(--muted);font-size:clamp(.98rem,1.1vw,1.03rem);line-height:1.72;
                 max-width:46ch;margin-top:-.28em}
  .quien .cuerpo b{color:var(--white);font-weight:700}
  .quien .link{display:inline-flex;align-items:center;gap:9px;margin-top:22px;color:var(--white);
               text-decoration:none;font-size:.73rem;font-weight:850;letter-spacing:.13em;
               text-transform:uppercase;border-bottom:1px solid rgba(88,110,255,.5);padding-bottom:5px;
               transition:border-color .3s ease}
  .quien .link i{font-style:normal;color:var(--blue);transition:transform .3s ease}
  .quien .link:hover{border-color:var(--blue)}
  .quien .link:hover i{transform:translateX(4px)}

  /* el interruptor enciende el texto. La clase .anim la pone el JS: sin
     JavaScript, o con movimiento reducido, nada arranca apagado. */
  .quien.anim .apaga{opacity:.34;transition:opacity .85s ease}
  .quien.anim.on .apaga{opacity:1}
  .quien.anim .llave{opacity:1}
  .quien.anim.on .a2{transition-delay:.46s}
  .quien.anim.on .a3{transition-delay:.58s}

  @media(max-width:900px){
    .quien{padding:46px 0}
    .quien .caja{width:calc(100% - 36px)}
    .quien .cols{grid-template-columns:1fr;gap:18px}
    .quien .llave{margin-bottom:18px}
    .quien h2{font-size:1.66rem}
    .quien .cuerpo{max-width:none;font-size:1rem;margin-top:0}
  }
  @media(prefers-reduced-motion:reduce){ .quien.anim .apaga{opacity:1} }

  /* ═════ FOCO DE TECLADO ═════
     Un solo bloque para todo lo accionable. Sin esto, los seis botones del
     chequeo, los de contacto y las ocho preguntas se recorren a ciegas.
     Si vuelve a desaparecer en una reescritura, hay que restituirlo. */
  .opt:focus-visible,.btn:focus-visible,.ghost:focus-visible,
  .nav-cta:focus-visible,.nav-logo:focus-visible,.quien .link:focus-visible,
  .qs summary:focus-visible,.foot-bar a:focus-visible{
    outline:2px solid var(--blue);outline-offset:3px;border-radius:8px;
  }
  .qs summary:focus-visible{outline-offset:-3px}
  a,button,summary,[tabindex]{scroll-margin-top:86px}

  .page-light{
    display:none;
  }
  @media(hover:none),(pointer:coarse){ .page-light{display:none} }
  @media(prefers-reduced-motion:reduce){ .page-light{display:none} }

  /* volver arriba: un ítem más del pie, no un botón flotante */
  .arriba{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
  .arriba i{font-style:normal;transition:transform .3s ease}
  .arriba:hover i{transform:translateY(-3px)}

  /* En celular no se desenfoca nada.
     filter:blur() obliga al navegador a repintar la capa entera en cada
     cuadro de scroll y es lo más caro que hace la página. Los cinco casos
     que lo usaban también mueven y funden el elemento, así que sin el
     desenfoque la transición se sigue leyendo igual. */
  @media(max-width:900px){
    .hero.leaving h1,
    .q,
    .q .lit .piece,
    .curtain .txt{filter:none}
  }

/* ═══ legibilidad del caso · también en desktop ═══
   Mismo problema que en celular: el texto abierto arranca pegado a la
   línea que lo separa de la imagen, sin nada de aire arriba. */
  .case-detail p{padding:14px 18px 18px;font-size:.94rem;line-height:1.62;color:rgba(255,255,255,.72)}
  .case-note{padding:13px 15px}
  .case-note b{font-size:.62rem;letter-spacing:.13em}
  .case-note span{font-size:.88rem;line-height:1.42;color:rgba(255,255,255,.88)}
  .card .meta{padding:15px 18px 17px}
  .card .meta b{font-size:1.02rem}
  .card .meta span{margin-top:5px;font-size:.74rem;color:rgba(255,255,255,.5)}

  @media(max-width:900px){
    /* ═════ MUESTRAS EN CELULAR · tira horizontal ═════
       El telón se va. Era pegajoso de 100svh con la grilla subida por un
       margen de -100svh y un translate por cuadro: Safari no repintaba esa
       combinación con scroll de inercia y dejaba bandas azules encima de
       los trabajos. Acá no hay nada fijado, ni márgenes de una pantalla,
       ni transform por cuadro. El azul pasa a ser el encabezado y los
       trabajos se le montan con un margen fijo: puro maquetado. */
    .work{min-height:0!important;padding-bottom:clamp(40px,7vh,72px)}
    .work .pin,.work.is-pinned .pin,.work.is-past .pin{
      position:relative!important;left:auto;right:auto;top:auto;bottom:auto;
      height:auto;overflow:visible;transform:none!important;
      border-radius:0!important;box-shadow:none!important;will-change:auto;
      display:flex;flex-direction:column;padding:0;background:none}

    /* el telón deja de ser telón: es el encabezado de la sección */
    .curtain{
      position:relative!important;inset:auto;z-index:1;pointer-events:auto;
      background:var(--blue);overflow:hidden;
      padding:clamp(74px,13svh,110px) 18px calc(clamp(52px,8svh,80px) + 74px);
    }
    .curtain .half{display:none}
    .curtain::after{
      content:'';position:absolute;inset:0;pointer-events:none;opacity:.5;
      background-image:radial-gradient(circle,rgba(255,255,255,.16) 1px,transparent 1px);
      background-size:22px 22px;
    }
    .curtain .txt{
      position:relative!important;inset:auto;display:block;text-align:left;
      opacity:1!important;transform:none!important;filter:none!important;will-change:auto;
    }
    .curtain .txt h2{font-size:clamp(2.1rem,11.4vw,3.1rem);line-height:.92;letter-spacing:-.03em}
    .curtain .txt span{margin-top:16px;color:rgba(10,14,30,.62)}

    /* la grilla pasa a tira con imán, montada sobre el azul */
    .grid{
      order:1;position:relative!important;left:auto;right:auto;top:auto;
      margin:-74px 0 0;width:auto;z-index:2;counter-reset:caso;
      display:flex;gap:14px;overflow-x:auto;overflow-y:visible;
      scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
      scroll-padding-left:18px;padding:0 18px 6px;
      scrollbar-width:none;overscroll-behavior-x:contain;
      opacity:1!important;transform:none!important;
    }
    .grid::-webkit-scrollbar{display:none}
    .grid:focus-visible{outline:2px solid var(--blue);outline-offset:4px;border-radius:10px}
    .card{
      flex:0 0 calc(100% - 48px);scroll-snap-align:start;
      grid-column:auto!important;border-radius:10px;
      opacity:1!important;transform:none!important}
    /* el número sale de un contador: no hace falta tocar el marcado */
    .card::before{
      counter-increment:caso;content:counter(caso,decimal-leading-zero);
      position:absolute;left:12px;top:11px;z-index:6;pointer-events:none;
      font-family:var(--display);font-weight:900;font-size:.74rem;letter-spacing:.06em;
      color:var(--white);background:rgba(7,10,22,.72);
      border:1px solid rgba(142,155,255,.24);border-radius:6px;padding:4px 8px;
    }
    .card .open{top:10px;right:10px;font-size:11px!important;letter-spacing:.1em;padding:8px 12px!important}
    .card img{height:clamp(196px,31svh,268px)}
    .traiber-clean,
    .miriam-mockups{height:clamp(196px,31svh,268px)}
    .traiber-clean img,
    .miriam-shot{height:100%}

    /* índice: dónde estás, sin contar */
    .idx{order:2;display:flex;align-items:center;gap:12px;margin:18px 18px 0}
    .idx .n{font-family:var(--display);font-weight:900;font-size:.82rem;letter-spacing:.06em}
    .idx .n u{text-decoration:none;color:var(--white)}
    .idx .n s{text-decoration:none;color:rgba(255,255,255,.38)}
    .idx .bar{flex:1;height:2px;background:rgba(255,255,255,.14);border-radius:999px;overflow:hidden}
    .idx .bar i{display:block;height:100%;width:16%;background:var(--blue);
                border-radius:999px;transition:width .18s linear}
    .idx .hint{font-size:11px;font-weight:850;letter-spacing:.1em;
               text-transform:uppercase;color:rgba(255,255,255,.42)}
    /* con mouse no hay gesto horizontal: aparecen solo con puntero fino */
    .idx .flechas{display:none}

    /* ── legibilidad del caso en celular ── */
    .case-detail p{padding:15px 16px 18px!important;font-size:.95rem!important;
                   line-height:1.62!important;color:rgba(255,255,255,.74)!important}
    .case-note{padding:12px 14px!important}
    .case-note b{font-size:11px!important;letter-spacing:.1em!important}
    .case-note span{font-size:.9rem!important;line-height:1.45!important;
                    color:rgba(255,255,255,.82)!important}
    .card .meta{padding:13px 15px 15px!important}
    .card .meta b{font-size:1.02rem}
    .card .meta span{margin-top:5px!important;letter-spacing:.07em!important;font-size:12px}
    .card .case-note span{font-size:.9rem}
  }
  @media(max-width:900px) and (hover:hover) and (pointer:fine){
    .idx .flechas{display:flex;gap:8px;margin-left:auto}
    .idx .hint{display:none}
    .idx .flechas button{
      width:34px;height:34px;display:grid;place-items:center;cursor:pointer;
      background:none;border:1px solid rgba(142,155,255,.42);border-radius:999px;
      color:var(--white);font:inherit;font-size:.9rem;line-height:1;
      transition:background .25s ease,border-color .25s ease,opacity .25s ease;
    }
    .idx .flechas button:hover{background:rgba(88,110,255,.22);border-color:var(--blue)}
    .idx .flechas button[disabled]{opacity:.28;cursor:default}
  }
  /* el índice existe solo en celular */
  @media(min-width:901px){ .idx{display:none} }

  /* ═════ RITMO VERTICAL EN CELULAR ═════
     Los rellenos entre secciones eran valores pensados para una pantalla de
     escritorio y nunca se re-escalaron. En un teléfono de 740px cada junta
     medía entre 120 y 200px: un quinto de pantalla vacía, ocho veces
     seguidas. No es un hueco puntual, es el ritmo entero.
     Acá se define uno solo para celular y se aplica parejo. */
  @media(max-width:900px){
    .stage{padding:62px 0 46px}
    #chequeo.stage{padding-top:56px}
    .cover-out{padding-bottom:4svh}
    .hz-pin{padding:52px 0 40px}
    .equipo{padding:26px 0 40px}
    .quien{padding:44px 0}
    .faq{padding:52px 0 44px}
    .end{padding:56px 0 60px}
    .curtain{padding:clamp(60px,10svh,84px) 18px calc(clamp(40px,6svh,58px) + 74px)}
  }

  /* ═════ NADA SE DESBORDA DE COSTADO ═════
     El overflow-x estaba en <html>, y ahí rompe position:fixed en iOS: por eso
     el navbar se iba a mitad de página. Al sacarlo quedó a la vista un desborde
     real que estaba tapado.
     La solución no es volver a taparlo desde la raíz sino contenerlo donde
     nace: cada sección se recorta a sí misma. Una sección no tiene por qué
     poder empujar la página entera.
     Se usa "clip" y no "hidden" a propósito: hidden convertiría cada sección en
     un contenedor de scroll y rompería cualquier position:sticky adentro. */
  section,
  .equipo,
  .foot-bar,
  .breath{max-width:100%;overflow-x:clip}

  /* Y el cinturón, por si algún navegador viejo ignora clip en las secciones.
     En body es inofensivo: el navegador lo propaga al visor sin tocar el
     anclaje de lo que está fijado. En html NO va nunca. */
  body{max-width:100vw}

  /* Los rieles tienen que poder desplazarse adentro suyo. Se declara solo
     donde SON rieles: en escritorio el de las etapas, en celular el de los
     trabajos. En escritorio .grid NO es un riel sino una grilla de seis
     dentro del telón, y ponerle overflow ahí la rompería. */
  @media(min-width:901px){
    .hz-visor{overflow-x:auto}
  }
  @media(max-width:900px){
    .hz-visor{overflow-x:visible}
    .work .grid{overflow-x:auto}
  }