/* =====================================================================
   IMPRECUETOS — hoja de estilo
   Dirección de arte: negro y blanco puros, tipografía display muy pesada
   y las tres tintas del logotipo (cian, magenta, amarillo) como acento.
   El fondo de la página cambia con el scroll: cada sección declara su
   tema en data-theme y el JS lo traslada al <body>.
   ===================================================================== */

/* ---------------------------------------------------------------- 0. Fuentes
   Las dos de la referencia. Su display es publicaPlay, de pago; Poppins 500 es
   la equivalente libre más cercana: misma geométrica de bols circulares y la
   misma 't' de remate plano. Comparado contra un fotograma del sitio. */
@font-face{font-family:'Poppins';src:url('../assets/fonts/poppins-400.woff2') format('woff2');
  font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Poppins';src:url('../assets/fonts/poppins-500.woff2') format('woff2');
  font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Poppins';src:url('../assets/fonts/poppins-600.woff2') format('woff2');
  font-weight:600;font-style:normal;font-display:swap}
/* Inter es una fuente VARIABLE: un solo archivo cubre todos los pesos. Antes
   había cuatro —400, 500, 600 y 700— y los cuatro eran el mismo archivo byte
   a byte: 193 KB y cuatro peticiones para lo que hace uno. Ahora va una sola
   declaración con el rango de pesos, y el eje recortado a 400-700, que es lo
   único que la página usa: 36 KB. */
@font-face{font-family:'Inter';src:url('../assets/fonts/inter.woff2') format('woff2');
  font-weight:400 700;font-style:normal;font-display:swap}
/* Se queda para el logotipo del hero y nada más. */
@font-face{font-family:'Archivo Black';src:url('../assets/fonts/archivoblack.woff2') format('woff2');
  font-weight:400;font-style:normal;font-display:swap}

/* ---------------------------------------------------------------- 1. Tokens
   Muestreados de un vídeo del sitio de referencia, no estimados.

   CORRECCIÓN IMPORTANTE: la referencia es CLARA. Su fondo es #EEF4F8, un
   blanco azulado pálido; lo oscuro son sus TARJETAS. Una lectura anterior
   tomó el color de las tarjetas por el de la página y la pintó entera de
   negro: era justo al revés. */
:root{
  /* Blanco, uno solo para toda la página. La referencia usa un papel
     azulado (#EEF4F8), pero mezclarlo con blanco creaba un escalón de tono
     al pasar de una sección a otra. Un único fondo lo quita en todas, no
     solo en la que se notaba. */
  --ground:#FFFFFF;
  --ink:#0C0D17;      /* la tinta, y también el relleno de las tarjetas */
  --card:#0C0D17;
  --chip:#1A1E26;     /* píldoras dentro de tarjeta oscura */
  /* DOS grises, no uno. El de la referencia (#8A8F98) da 2,93:1 sobre este
     fondo: vale para un titular enorme pero deja el texto pequeño por debajo
     del mínimo legible. Así que el énfasis de display usa el claro (3,45:1,
     por encima del 3:1 que pide el texto grande) y todo el texto corrido usa
     el oscuro (5,48:1). Medido, no estimado. */
  --mute:#7C838C;     /* gris del énfasis en titulares grandes */
  --n-400:#A9B0B8;    /* pulgar de la barra de desplazamiento */
  --mute-txt:#5C636C; /* gris para texto corrido */
  --hair:#D5DDE3;     /* filetes sobre claro */
  --hair-dk:#242832;  /* filetes sobre oscuro */
  --n-050:#F4F7F9;    /* texto sobre oscuro */
  --on-dark:#F4F7F9;

  /* Las tintas quedan como acento puntual, no como plano. */
  --cyan:#009FDE; --magenta:#E4016F; --yellow:#FFCF04;
  /* El cian de marca sobre papel claro da 2,70:1 y no se puede usar como
     texto. Esta es su versión legible (4,90:1); el original sigue para
     rellenos, donde el contraste de texto no aplica. */
  --cyan-txt:#00719F;

  /* El hero conserva su blanco puro: el recorte del vídeo depende de
     multiply sobre blanco y cualquier tinte lo ensucia. */
  --white:#FFFFFF; --black:#0C0D17;

  --f-display:'Poppins','Segoe UI',Arial,sans-serif;
  --f-body:'Inter',-apple-system,'Segoe UI',Arial,sans-serif;
  --f-marca:'Archivo Black',Impact,sans-serif;   /* solo el logotipo del hero */

  /* Escala: cuerpo cómodo y display enorme, como la referencia. */
  --t-xs:.8125rem; --t-sm:.9375rem; --t-base:1.0625rem;
  --t-md:clamp(1.15rem,.4vw + 1.05rem,1.4rem);
  --t-lg:clamp(1.45rem,1.1vw + 1.15rem,2rem);
  --t-xl:clamp(1.9rem,2.6vw + 1.1rem,3.1rem);
  --t-2xl:clamp(2.6rem,5vw + .8rem,5rem);
  --t-display:clamp(3.4rem,10vw,9.5rem);

  /* Redondeos: esto es lo que más se notaba que faltaba. */
  --r-card:clamp(22px,2.6vw,40px);
  --r-img:16px;
  --r-pill:999px;

  --ease:cubic-bezier(.76,0,.24,1);
  --ease-out:cubic-bezier(.19,1,.22,1);
  --ease-rebote:cubic-bezier(.22,.68,0,1.5);
  --ease-seco:cubic-bezier(.22,.68,0,1);

  --pad:clamp(1rem,3.2vw,2.6rem);
  --nav-h:76px;
  --maxw:1600px;

  --bg:var(--ground);
  --fg:var(--ink);
  --line:var(--hair);
  --dim:var(--mute-txt);
}
body[data-theme="light"],body[data-theme="deep"]{--bg:var(--ground);--fg:var(--ink);
  --line:var(--hair);--dim:var(--mute-txt)}
body[data-theme="dark"]{--bg:var(--ink);--fg:var(--on-dark);--line:var(--hair-dk);--dim:var(--mute-txt)}
body[data-theme="cyan"]{--bg:var(--cyan);--fg:var(--ink);--line:rgba(12,13,23,.25);--dim:rgba(12,13,23,.66)}

/* ---------------------------------------------------------------- 2. Base */
*,*::before,*::after{box-sizing:border-box}
/* La barra de desplazamiento se ve, y va vestida con la paleta. Estaba
   oculta en los dos motores; sin ella no hay forma de saber por dónde vas ni
   cuánto queda, que en una página larga se echa de menos. */
html{-webkit-text-size-adjust:100%;scrollbar-width:thin;
  scrollbar-color:var(--n-400,#A9B0B8) transparent}
html.lenis{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto}
.lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain}
.lenis.lenis-stopped{overflow:hidden}

body{
  margin:0;
  /* clip, no hidden: hidden convierte el body en contenedor de scroll y
     mata position:sticky y ScrollTrigger. */
  overflow-x:clip;
  background:var(--bg);
  color:var(--fg);
  font-family:var(--f-body);
  font-size:clamp(1rem,.3vw + .94rem,1.125rem);
  line-height:1.34;
  letter-spacing:.005em;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  transition:background-color .55s var(--ease),color .55s var(--ease);
}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--n-400,#A9B0B8);border-radius:var(--r-pill);
  border:3px solid transparent;background-clip:content-box}
::-webkit-scrollbar-thumb:hover{background:var(--mute);background-clip:content-box}
/* Sobre las superficies oscuras (menú, hojas, pie) hace falta el contraste
   inverso o la barra desaparece. */
.menu ::-webkit-scrollbar-thumb,.sheet ::-webkit-scrollbar-thumb,
.menu::-webkit-scrollbar-thumb,.sheet::-webkit-scrollbar-thumb{
  background:var(--hair-dk);background-clip:content-box}
.menu,.sheet{scrollbar-color:var(--hair-dk) transparent}
body.is-locked{overflow:hidden}

h1,h2,h3,h4,p,figure,blockquote{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
img,video,svg{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
b,strong{font-weight:600}
em{font-style:italic}
::selection{background:var(--ink);color:var(--bg)}

.visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip-link{position:fixed;top:.5rem;left:.5rem;z-index:120;padding:.6rem 1rem;background:var(--black);
  color:var(--white);font-family:var(--f-body);font-weight:500;font-size:.8rem;transform:translateY(-160%)}
.skip-link:focus{transform:none}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px}

.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad)}

/* ---------------------------------------------------------------- 3. Tipografía
   La referencia hace dos cosas que aquí no se hacían:
   1. El titular grande va en la display GEOMÉTRICA, en minúsculas y con peso
      medio, no en una grotesca negra en versales.
   2. El énfasis dentro de una frase se marca en GRIS, bajando esa palabra,
      no subiéndola con un color. Es al revés de lo que hacía este sitio. */
/* Los rótulos pequeños se quedan en la familia del cuerpo. Lo que los hace
   rótulo son las versales y el espaciado, no cambiar de tipografía: una
   monoespaciada aquí era una tercera voz que no decía nada. */
.mono{font-family:var(--f-body);font-size:var(--t-xs);font-weight:500;line-height:1.25;
  letter-spacing:.11em;text-transform:uppercase}

.huge{font-family:var(--f-display);font-weight:500;font-size:var(--t-xl);
  line-height:1.06;letter-spacing:-.03em;text-wrap:balance;max-width:20ch}
/* El énfasis BAJA a gris. No sube a color. */
.huge em,.lede em{font-style:normal;color:var(--mute)}
.huge--stack span{display:block}

/* El grito: enorme, geométrico, y se sale del encuadre. */
.colosal{font-family:var(--f-display);font-weight:500;font-size:var(--t-display);
  line-height:.9;letter-spacing:-.045em;margin:0}

.pal{display:inline-block;overflow:hidden;vertical-align:bottom;
  padding-bottom:.11em;margin-bottom:-.11em}
.pal>i{display:inline-block;font-style:normal;will-change:transform}

.lede{font-family:var(--f-body);font-size:var(--t-md);line-height:1.5;max-width:56ch}
.lede--end{margin-left:auto}
.dim{color:var(--dim)}

.lbl{display:inline-flex;align-items:center;gap:.6rem;font-family:var(--f-body);font-weight:500;
  font-size:var(--t-xs);text-transform:uppercase;letter-spacing:.12em;color:var(--dim)}
.lbl span{color:var(--cyan-txt)}

.rule{border:0;height:1px;background:var(--line);margin:.9rem 0 clamp(2rem,4vw,3.4rem);
  transform-origin:left center}

/* Píldora con insignia: el botón de la referencia. Texto a la izquierda,
   círculo con icono pegado a la derecha, todo dentro de una cápsula. */
.pill{display:inline-flex;align-items:center;gap:.9rem;padding:.42rem .42rem .42rem 1.5rem;
  border:0;border-radius:var(--r-pill);font-family:var(--f-body);font-weight:500;
  font-size:var(--t-sm);letter-spacing:.02em;text-transform:uppercase;cursor:pointer;
  transition:background-color .4s var(--ease-seco),color .4s var(--ease-seco),
             transform .4s var(--ease-rebote)}
.pill__b{display:grid;place-items:center;width:2.1rem;height:2.1rem;border-radius:var(--r-pill);
  font-size:.9rem;line-height:1;transition:transform .5s var(--ease-rebote)}
.pill:hover{transform:translateY(-2px)}
.pill:hover .pill__b{transform:rotate(45deg)}
.pill--solida{background:var(--ink);color:var(--on-dark)}
.pill--solida .pill__b{background:rgba(244,247,249,.16)}
.pill--suave{background:#DCE3E8;color:var(--ink)}
.pill--suave .pill__b{background:rgba(12,13,23,.1)}
.pill--clara{background:rgba(244,247,249,.12);color:var(--on-dark)}
.pill--clara .pill__b{background:rgba(244,247,249,.16)}

/* ---------------------------------------------------------------- 4. Revelados */
.reveal{opacity:0;transform:translateY(2.6em);
  transition:opacity 1.1s var(--ease-out),transform 1.1s var(--ease-out)}
.reveal.is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}}

/* ---------------------------------------------------------------- 5. Botón */
.btn{position:relative;display:inline-flex;align-items:center;isolation:isolate;
  padding:.62rem 1.15rem;border:1px solid currentColor;overflow:hidden;border-radius:999px}
.btn__bg{position:absolute;inset:0;background:currentColor;transform:scaleY(0);
  transform-origin:bottom center;transition:transform .45s var(--ease)}
/* El botón acompaña a los enlaces: misma familia y mismo cuerpo, o la
   navegación queda hablando en dos voces. */
.btn__t{position:relative;font-family:var(--f-body);font-weight:500;
  font-size:clamp(.95rem,.25vw + .9rem,1.06rem);letter-spacing:-.005em;
  transition:color .45s var(--ease)}
.btn:hover .btn__bg,.btn:focus-visible .btn__bg{transform:scaleY(1)}
.btn:hover .btn__t,.btn:focus-visible .btn__t{color:var(--bg)}
.btn--big{padding:1rem 2rem;margin-top:2.4rem}
.btn--big .btn__t{font-size:.95rem}
.btn--solid{padding:.95rem 1.9rem;justify-self:start}

.link{border-bottom:1px solid currentColor;color:var(--cyan-txt)}

/* ---------------------------------------------------------------- 6. Cortina */
.loader{position:fixed;inset:0;z-index:200;display:grid;place-content:center;justify-items:center;
  gap:1.4rem;background:var(--black);color:var(--white);transition:opacity .6s var(--ease),
  visibility .6s}
.loader.is-done{opacity:0;visibility:hidden;pointer-events:none}
/* La marca es ahora el logotipo real, en mapa de bits: el dibujo lleva
   degradados que no se reconstruyen fielmente en SVG a mano. Se sirve a 160 px
   y se pinta a 26 (menú) o hasta 74 (cortina), así que va sobrado incluso en
   pantallas de alta densidad. */
.loader__mark{width:clamp(46px,7vw,74px)}
.loader__mark img,.brand__mark img{display:block;width:100%;height:auto}
.loader__brand{font-family:var(--f-display);text-transform:uppercase;letter-spacing:-.02em;
  font-size:clamp(1.5rem,5vw,2.6rem);line-height:1}
.loader__track{position:relative;width:min(52vw,300px);height:1px;
  background:var(--hair-dk);overflow:hidden}
/* Escala en vez de ancho: en pantalla es idéntico y el navegador no rehace
   la maqueta en cada paso mientras se descarga el vídeo. */
.loader__bar{display:block;width:100%;height:100%;background:var(--n-050);
  transform:scaleX(0);transform-origin:left center;
  will-change:transform;transition:transform .25s linear}
.loader__meta{display:flex;justify-content:space-between;width:min(52vw,300px);
  color:rgba(255,255,255,.65)}

/* ---------------------------------------------------------------- 7. Navegación */
.nav{position:fixed;top:0;left:0;right:0;z-index:90;height:var(--nav-h);display:flex;
  align-items:center;color:var(--fg);
  transition:transform .5s var(--ease),color .55s var(--ease),opacity .4s var(--ease)}
.nav.is-hidden{transform:translateY(-104%)}
.nav__row{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad);
  display:flex;align-items:center;gap:1.4rem}

.brand{display:flex;align-items:center;gap:.62rem;margin-right:auto}
.brand__mark{width:26px;flex:none}
.brand__word{font-family:var(--f-display);text-transform:uppercase;font-size:1.02rem;
  letter-spacing:-.018em;line-height:1}

.nav__links{display:flex;gap:clamp(1.4rem,2vw,2.1rem);font-family:var(--f-body);
  font-weight:500;font-size:clamp(.95rem,.25vw + .9rem,1.06rem);letter-spacing:-.005em;
  letter-spacing:-.01em}
.nav__links a{position:relative;padding-block:.3rem}
.nav__links a::after{content:'';position:absolute;left:0;right:0;bottom:0;height:1px;
  background:currentColor;transform:scaleX(0);transform-origin:right center;
  transition:transform .4s var(--ease)}
.nav__links a:hover::after{transform:scaleX(1);transform-origin:left center}

.nav__end{display:flex;align-items:center;gap:.8rem}
/* 44x44 es el mínimo cómodo para un dedo; con 38 el botón se falla. */
.burger{display:none;width:44px;height:44px;place-items:center;border:1px solid var(--line);
  border-radius:999px}
.burger span[aria-hidden]{display:grid;gap:5px;width:15px}
.burger i{display:block;height:1.5px;background:currentColor;transition:transform .4s var(--ease)}
.nav.is-open .burger i:first-child{transform:translateY(3.25px) rotate(45deg)}
.nav.is-open .burger i:last-child{transform:translateY(-3.25px) rotate(-45deg)}

/* Menú a pantalla completa */
.menu{position:fixed;inset:0;z-index:85;background:var(--black);color:var(--white);
  display:flex;align-items:center;clip-path:inset(0 0 100% 0);
  transition:clip-path .7s var(--ease);pointer-events:none}
.menu.is-open{clip-path:inset(0 0 0 0);pointer-events:auto}
.menu__inner{width:100%;max-width:var(--maxw);margin-inline:auto;padding:var(--nav-h) var(--pad) 0;
  display:grid;gap:clamp(2rem,5vw,4rem);align-items:end;grid-template-columns:1fr}
.menu__list li{border-top:1px solid rgba(255,255,255,.18)}
.menu__list li:last-child{border-bottom:1px solid rgba(255,255,255,.18)}
.menu__list a{display:flex;align-items:baseline;gap:1.1rem;padding:.5em 0;
  font-family:var(--f-display);text-transform:uppercase;font-size:clamp(1.6rem,5.4vw,3.4rem);
  line-height:.95;letter-spacing:-.02em;
  transition:color .35s var(--ease),transform .45s var(--ease-seco)}
/* Desplazamiento por transform, no por relleno: mismo gesto, sin recalcular. */
.menu__list a:hover{color:var(--cyan);transform:translateX(.35em)}
.menu__list .n{color:var(--mute);font-size:.75rem}
.menu__aside{display:grid;gap:.7rem;color:rgba(255,255,255,.62);max-width:44ch;
  padding-bottom:clamp(1.5rem,4vw,3rem)}
.menu__aside a:hover{color:var(--cyan-txt)}
@media (min-width:62rem){.menu__inner{grid-template-columns:1.55fr .8fr}}

/* ---------------------------------------------------------------- 8. HERO
   El vídeo no tiene canal alfa: su fondo blanco se recorta con
   mix-blend-mode:multiply. De ahí dos reglas que no se pueden romper:
   el blanco se vuelve a pintar DENTRO de .hero__sticky (sticky abre un
   contexto de apilamiento) y ninguna capa del hero lleva z-index. */
/* 8 s de metraje (193 fotogramas), dos segmentos concatenados. Con 430vh el
   scrub avanza ~15 px por fotograma en escritorio: por debajo de ~9 px el
   scroll se siente denso, por encima de ~22 px se nota el escalón. */
.hero{position:relative;height:430vh}
.hero__sticky{position:sticky;top:0;height:100svh;display:flex;flex-direction:column;
  overflow:hidden;color:var(--black)}
/* Blanco puro a propósito, no el papel frío del resto del sitio: el vídeo se
   compone con multiply, así que este fondo TIÑE el metraje. Cualquier otro
   valor ensucia el plató que ya está aprobado. */
.hero__paper{position:absolute;inset:0;background:#fff}

.hero__stage{position:relative;flex:1;display:grid;place-items:center;
  padding:var(--nav-h) var(--pad) 7vh}

/* Ninguna de estas capas se centra con la propiedad CSS `translate`: GSAP la
   absorbe en `transform` al animar el elemento y lo deja fuera de pantalla.
   Se centran con left/right + text-align, o como celda de la retícula. */
/* Va en el hueco que deja la persona a la izquierda, no centrado arriba: ahí
   competía con el titular y quedaba diminuto. Sin `transform` para centrar,
   que GSAP lo absorbe al animar `y` y lo manda fuera de pantalla. */
.hero__kicker{position:absolute;top:43%;left:var(--pad);
  max-width:min(26ch,30vw);
  text-transform:uppercase;letter-spacing:.07em;
  font-size:clamp(.88rem,1.25vw,1.24rem);line-height:1.38;text-align:left;
  color:rgba(0,0,0,.66)}
/* En vertical la persona ocupa todo el ancho: no hay hueco lateral que usar.
   Las notas de las esquinas arrancan en `nav-h + 4vh` y miden unos 35 px, de
   modo que con 8vh el epígrafe empezaba justo donde ellas acababan —medido,
   1 px de solape—. Con 12vh queda un respiro de unos 30 px. */
@media (max-width:62rem){
  .hero__kicker{top:calc(var(--nav-h) + 12vh);left:var(--pad);right:var(--pad);
    max-width:none;text-align:center;font-size:clamp(.8rem,2.5vw,1rem)}
}

/* 11 caracteres en Archivo Black ocupan ~8,25 em: a 11,3vw el titular rozaba
   el ancho útil y desbordaba en cuanto crecía el margen. 10,6vw deja aire. */
/* Partido en dos líneas y llevado al costado derecho: a una sola línea la
   palabra cruzaba por delante de la cara de la persona. Dos líneas admiten
   cuerpo mayor en menos ancho, así que ocupa ~45vw en vez de los 100vw de
   antes. `text-align:left` alinea el arranque de IMPRE y CUETOS. */
.hero__brand{margin:0;text-align:left;width:auto;
  font-family:var(--f-display);font-weight:400;text-transform:uppercase;
  font-size:clamp(2.3rem,8.6vw,9.4rem);line-height:.78;letter-spacing:-.035em}
.hero__brand span{display:block;overflow:hidden;padding-block:.06em}
.hero__brand i{display:inline-block;font-style:normal;will-change:transform}

/* Titular y bajada van juntos como única celda en flujo, centrada por la
   retícula del escenario: suelta y anclada abajo, la bajada caía sobre el
   pantalón oscuro del vídeo y no se leía. */
.hero__type{display:grid;justify-items:start;gap:.7rem;width:auto;justify-self:end}
/* En vertical el bloque deja de ir centrado en el escenario. Centrado caía
   justo sobre la cara y el torso de la figura, y el negro se perdía contra el
   suéter: medido, el titular ocupaba 361-428 px y la cabeza empieza en 345.
   Anclado arriba con 17vh de margen queda en la franja clara que hay entre el
   epígrafe y la cabeza, sobre pared de plató y no sobre la persona. */
@media (max-width:48rem){
  .hero__type{align-self:start;margin-top:17vh}
}
/* Alineado al canto derecho del titular, no al izquierdo: así cuelga de
   CUETOS en vez de quedar suelto bajo la I. */
.hero__by{justify-self:end;text-align:right;font-size:clamp(1.02rem,1.8vw,1.68rem);
  color:rgba(0,0,0,.78)}
.hero__by em{font-style:normal;font-weight:600;color:var(--cyan-txt)}

/* La pista de la retícula se fija al tamaño del contenedor. Sin esto, la
   columna `auto` crece hasta el ancho del vídeo, el vídeo llena la pista y
   el desbordamiento se va todo hacia la derecha en vez de repartirse. */
.hero__media{position:absolute;inset:0;display:grid;grid-template:100% / 100%;
  place-items:center;mix-blend-mode:multiply;pointer-events:none}
/* El vídeo es 16:9 pero el sujeto está compuesto en vertical. Si en pantallas
   verticales se dimensiona por ancho, la persona queda diminuta; ahí se
   dimensiona por ALTO y el sobrante blanco lo recorta .hero__sticky. */
/* El fotograma viene EXTENDIDO por las cuatro orillas: 1920x1080 de imagen
   dentro de un lienzo de 2400x1560, con el fondo prolongado hacia fuera. Así
   no se ve el canto del vídeo sobre el papel. El ×1.25 devuelve a la imagen
   su tamaño original: sin él la persona saldría un 20 % más pequeña. */
/* El suelo de 116vw no es decorativo: el hero arranca con scale 0.9 (ver
   setupHeroLayers), así que el vídeo se dibuja al 90 % de su ancho y en
   pantallas anchas dejaba franja blanca a los lados. 116 × 0.9 = 104vw. */
.hero__media img,.hero__media video{width:max(calc(min(128vw,178vh) * 1.25),124vw);max-width:none;height:auto}
/* En vertical se ancla ABAJO y se agranda: centrado, el borde inferior del
   fotograma cortaba las piernas a media pantalla y se veía la línea. Anclado,
   el corte cae sobre la barra de estado y la figura parece apoyarse en ella. */
@media (orientation:portrait){
  .hero__media{place-items:end center}
  /* ×1.4444 compensa el alto del lienzo extendido (1560/1080) y el margen
     negativo baja la orilla inferior fuera de cuadro, para que la figura
     quede apoyada donde siempre, no flotando sobre su propio fondo. */
  .hero__media img,.hero__media video{width:auto;
    height:calc(min(80vh,190vw) * 1.4444);
    margin-bottom:calc(min(80vh,190vw) * -0.2222)}
  /* En móvil el plano se abre: con 80vh la figura llenaba la pantalla y la
     revista quedaba debajo del logotipo. A 62vh se ve entera y con aire.
     Las dos proporciones —1.4444 del lienzo extendido y 0.2222 del anclaje
     abajo— se conservan, que es lo que mantiene a la figura apoyada. */
  @media (max-width:48rem){
    .hero__media img,.hero__media video{
      height:calc(min(62vh,150vw) * 1.4444);
      margin-bottom:calc(min(62vh,150vw) * -0.2222);
      /* Al abrir el plano, el canto de arriba del fotograma entra en pantalla
         y se ve: medido, la luminancia salta de 255 a 183 en una sola línea,
         porque el lienzo prolongado es gris de plató, no blanco. La máscara
         lo funde: con `multiply`, transparente equivale a blanco, así que el
         gris nace del papel en vez de aparecer de golpe. */
      /* `--velo` marca dónde empieza el desvanecido de ABAJO. En reposo vale
         100 %: no hay tal desvanecido y la figura sigue apoyada en el canto,
         como siempre. El JS lo abre solo en el tramo final, cuando el zoom
         out ya ha levantado la orilla inferior del fotograma dentro de la
         pantalla y, sin esto, se vería su borde recto. */
      --velo:100%;
      -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 30%,
        #000 var(--velo),transparent 100%);
              mask-image:linear-gradient(to bottom,transparent 0,#000 30%,
        #000 var(--velo),transparent 100%)}
  }
}
/* Apaisado muy bajo (móvil girado): sin esto la revista no cabe de alto. */
@media (orientation:landscape) and (max-height:34rem){
  .hero__media img,.hero__media video{width:auto;height:calc(96vh * 1.4444)}
}
/* Póster y vídeo comparten celda de retícula: así los centra `place-items` y
   se funden uno sobre otro. Con `position:absolute; inset:0; margin:auto` el
   vídeo se pegaba a la izquierda al ser más ancho que el contenedor. */
.hero__poster,.hero__video{grid-area:1/1}
/* Al terminar el fundido el póster se retira del todo, no solo a opacidad 0:
   es una imagen del tamaño del lienzo y, mientras siga en el árbol pintado,
   el compositor carga con su textura en cada fotograma del scrubbing para
   nada. El retardo de la visibilidad deja que el fundido se vea entero. */
.hero__poster{transition:opacity .4s linear}
.hero__media.is-ready .hero__poster{opacity:0;visibility:hidden;
  transition:opacity .4s linear,visibility 0s linear .4s}
.hero__video{opacity:0;transition:opacity .4s linear}
.hero__media.is-ready .hero__video{opacity:1}

.floaters{position:absolute;inset:0;pointer-events:none;mix-blend-mode:multiply}
.floaters .f{position:absolute;width:clamp(88px,11vw,168px);will-change:transform}
.f--1{left:4vw;top:20vh;rotate:-8deg}
.f--2{right:5vw;top:14vh;rotate:7deg}
.f--3{left:9vw;bottom:12vh;rotate:5deg}
/* En móvil solo sobrevive una portada: las otras dos se cruzaban con las
   notas de las esquinas. */
@media (max-width:48rem){.f--2,.f--3{display:none}.f--1{left:2vw;top:16vh}}

.hero__notes{position:absolute;inset:0;pointer-events:none}
.hero__note{position:absolute;display:grid;gap:.2rem;color:rgba(0,0,0,.5);
  text-transform:uppercase;letter-spacing:.05em;font-size:.66rem}
.hero__note .mono:first-child{color:rgba(0,0,0,.85)}
.is-lt{left:var(--pad);top:calc(var(--nav-h) + 4vh)}
.is-rt{right:var(--pad);top:calc(var(--nav-h) + 4vh);text-align:right;justify-items:end}
.is-lb{left:var(--pad);bottom:12vh}
.is-rb{right:var(--pad);bottom:12vh;text-align:right;justify-items:end}
@media (max-width:62rem){.hero__note{font-size:.6rem}.is-lb,.is-rb{display:none}}

.hero__cue{position:absolute;left:0;right:0;bottom:2.6vh;display:grid;
  justify-items:center;gap:.4rem;color:rgba(0,0,0,.5);text-transform:uppercase;
  letter-spacing:.09em;font-size:.62rem;transition:opacity .4s linear}
.hero__cue svg{width:15px;fill:none;stroke:currentColor;stroke-width:1.2}

.status{position:relative;display:flex;gap:1.2rem;align-items:center;justify-content:space-between;
  padding:.75rem var(--pad);border-top:1px solid rgba(0,0,0,.14);color:rgba(0,0,0,.6);
  font-size:.7rem;text-transform:uppercase;letter-spacing:.04em}
.status b{color:var(--black);font-weight:400}
@media (max-width:62rem){.status span:nth-child(2){display:none}}
@media (max-width:36rem){.status .status__t{display:none}}

/* ---------------------------------------------------------------- 9. Secciones y Oficio
   Las tres fichas iguales con barra de color debajo se retiran: una fila de
   tarjetas gemelas es el contenedor perezoso, y la referencia no tiene ni una.
   En su lugar, una lista apilada con filetes finos: el número a la izquierda,
   el punto y su explicación a la derecha. Sin cajas, sin barras, sin sombras.

   La frase grande hace lo de la referencia: la segunda mitad baja a gris en
   vez de subir a color. */
.sec{position:relative;padding-block:clamp(4.5rem,10vw,9rem)}
.sec--intro{padding-bottom:clamp(3rem,7vw,6rem)}

.head{display:grid;gap:clamp(1.4rem,3vw,2.6rem);align-items:end;
  margin-bottom:clamp(2.6rem,6vw,5rem)}
@media (min-width:62rem){.head{grid-template-columns:1.35fr .85fr}}

.oficio .huge{max-width:18ch;margin:1.1rem 0 1.4rem}
.oficio .lede{margin-bottom:clamp(2.6rem,5vw,4.4rem)}

.pts{list-style:none;margin:0;padding:0}

/* Los filetes dejan de ser bordes y pasan a ser pseudoelementos para poder
   trazarse: cada fila lleva el suyo encima y la última cierra la lista por
   abajo. `--trazo` es lo que anima el JS —de 0 a 1— y vale 1 de salida, así
   que sin JS o con movimiento reducido la lista se ve completa. */
.pt{--trazo:1;position:relative;
  display:grid;gap:.5rem clamp(1.5rem,4vw,4rem);align-items:start;
  padding-block:clamp(1.5rem,2.8vw,2.3rem)}
.pt::before,.pt:last-child::after{content:'';position:absolute;left:0;right:0;height:1px;
  background:var(--line);transform:scaleX(var(--trazo));transform-origin:left center;
  will-change:transform}
.pt::before{top:0}
.pt:last-child::after{bottom:0}
@media (min-width:52rem){
  .pt{grid-template-columns:auto minmax(0,1.05fr) minmax(0,1.35fr);
    align-items:baseline}
}
.pt__n{color:var(--mute);min-width:2.4ch;
  transition:color .45s var(--ease-seco)}
.pt__t{margin:0;font-family:var(--f-display);font-weight:500;letter-spacing:-.025em;
  font-size:clamp(1.35rem,2.1vw,1.95rem);line-height:1.1;
  transition:transform .55s var(--ease-seco)}
.pt__d{margin:0;color:var(--dim);font-size:var(--t-base);line-height:1.5;max-width:52ch}

/* La foto de cada punto vive dentro de su fila. Ese es el estado base y el
   que se queda en el móvil, sin JS y con movimiento reducido: una miniatura
   cuadrada, sin recorte, debajo del texto. Con ratón el JS se la lleva a la
   lente y esta caja desaparece del flujo sola, porque el nodo se muda. */
.pt__img{display:block;width:100%;max-width:18rem;height:auto;margin-top:1rem;
  aspect-ratio:1/1;object-fit:cover;border-radius:var(--r-img);
  background:var(--n-050)}
/* Con lente, las fotos no van en la fila: las enseña la lente al pasar el
   cursor. Ocultarlas desde el principio —y no al montar la lente— evita que
   la sección encoja a mitad de visita. La clase la pone main.js al arrancar.
   Solo afecta a las que siguen dentro de .pts: las que ya están en la capa de
   la lente quedan fuera de este selector. */
.con-lente .pts .pt__img{display:none}
@media (min-width:52rem){
  .pt__img{grid-column:2/-1;margin-top:1.2rem}
}
/* En teléfono la sección se queda sin fotos: apiladas una por punto estiraban
   El oficio a más de tres pantallas y el texto es lo que importa aquí. En
   escritorio no se pierden, viven en la lente. */
@media (max-width:48rem){
  .pt__img{display:none}
}

/* --- La lente ---------------------------------------------------------
   Una sola capa fija para las tres fotos: se mueve con el cursor y va un
   poco por detrás, que es lo que da la sensación de peso. Se queda por
   debajo de la barra (90) y del menú, y nunca recibe el ratón: si lo
   recibiera, se interpondría entre el puntero y la página justo donde el
   lector está mirando. */
.pts__lente{position:fixed;top:0;left:0;z-index:80;pointer-events:none;
  width:clamp(13rem,19vw,17rem);aspect-ratio:1/1;will-change:transform}
.pts__lente img{position:absolute;inset:0;width:100%;height:100%;
  margin:0;max-width:none;border-radius:var(--r-img);object-fit:cover;
  opacity:0;background:var(--n-050);
  box-shadow:0 1.4rem 3rem -1rem rgba(12,13,23,.38)}
/* `will-change` va solo en la capa, que es lo que se mueve de continuo. Si se
   pone también en las tres fotos, el navegador promociona cuatro superficies
   de 1000x1000 en vez de una y el movimiento sale peor, no mejor. */

/* Al pasar por encima la fila se despierta un poco: el número toma tinta y el
   punto se desplaza. Nada más; es una lista, no un control. */
@media (hover:hover){
  .pt:hover .pt__n{color:var(--ink)}
  .pt:hover .pt__t{transform:translateX(.35rem)}
}
@media (prefers-reduced-motion:reduce){
  .pt__n,.pt__t{transition:none}
  .pt:hover .pt__t{transform:none}
  /* La lente ni se monta: el JS sale antes. Las fotos se quedan en su fila. */
}

/* ---------------------------------------------------------------- 10. Tira
   Técnica del pen «ContainerAnimation SplitText» de GreenSock, reescrita para
   este sitio: la sección se clava mientras el texto recorre la pantalla en
   horizontal, y cada letra entra por su cuenta al asomar por el canto derecho.

   Lo que cambia respecto al original: las letras se parten a mano en vez de
   usar SplitText, para no meter un plugin más ni depender de un CDN; el
   recorrido baja de 5000 px a 2200, que aquí es una banda entre dos secciones
   y no una página entera; y sin JS o con movimiento reducido la frase se ve
   completa y quieta, porque el desplazamiento de salida lo pone el JS. */
.tira{overflow:hidden;min-height:60svh;display:flex;flex-direction:column;
  background:var(--ink);color:var(--on-dark)}
.tira__banda{flex:1 1 auto;display:flex;align-items:center;overflow:hidden;
  min-height:60svh}
.tira__in{width:100%}
.tira__t{display:flex;width:max-content;white-space:nowrap;gap:.42em;margin:0;
  font-family:var(--f-display);font-weight:500;letter-spacing:-.035em;line-height:1.05;
  font-size:clamp(2.4rem,9vw,8.5rem)}
/* Solo cuando el JS toma el mando: el relleno saca la frase fuera de cuadro
   para que entre desde la derecha. */
.js-tira .tira__t{padding-left:100vw}
.tira__p{display:inline-flex}
.tira__c{display:inline-block;will-change:transform}
.tira__sep{color:var(--mute)}

/* --- El suelo -------------------------------------------------------------
   Clavada, la banda ocupa 60svh y deja 40 de blanco muerto debajo: medido,
   321 px de alto durante 2200 px de scroll, y lo que hay ahí no es la
   siguiente sección sino el propio espaciador del clavado. Ese hueco es el
   suelo, y en él vuelven a salir las tres portadas del hero.

   Van en `multiply` como en el hero, y por eso el suelo tiene que ser blanco
   de verdad y no heredar el tema oscuro de la banda: sobre oscuro, multiply
   las dejaría negras. `isolation` corta la mezcla aquí para que no busque el
   fondo de tinta que hay detrás.

   Todo esto solo existe con `.js-tira`. Sin JS la sección no se clava, no
   sobra ningún hueco, y el suelo no se muestra. */
.tira__suelo{display:none}
.tira.js-tira{min-height:100svh}
.tira.js-tira .tira__banda{flex:0 0 60svh;min-height:0}
.tira.js-tira .tira__suelo{display:block;position:relative;flex:1 1 auto;
  isolation:isolate;overflow:hidden;background:var(--white)}
/* Cada una de un tamaño: es lo que da profundidad. La grande se lee como la
   más cercana, y por eso en el JS también es la que más deriva. Las alturas
   están calculadas para que el sube y baja quepa entero en los 322 px del
   suelo sin que el recorte las muerda. */
.tira__suelo .fl{position:absolute;height:auto;
  mix-blend-mode:multiply;will-change:transform}
.fl--c{width:clamp(88px,9vw,132px);  left:9%;  top:18%; rotate:-7deg}
.fl--m{width:clamp(104px,11vw,158px);left:40%; top:25%; rotate:6deg}
.fl--y{width:clamp(80px,8vw,116px);  left:73%; top:13%; rotate:-4deg}
/* En pantalla estrecha el suelo es más bajo y tres portadas se amontonan:
   se queda la del centro, desplazada al borde. */
/* En estrecho la banda se queda con algo más de pantalla, pero las tres
   portadas se quedan. Los sitios están calculados para que el grupo salga
   centrado: 18 px de margen a cada lado y 70 px entre ellas, con lo que la
   última acaba a 18 px del canto derecho. Los tamaños siguen siendo
   distintos —es lo que da profundidad— y las alturas van escalonadas para
   que no parezcan una fila. */
@media (max-width:48rem){
  .tira.js-tira .tira__banda{flex:0 0 66svh}
  .fl--c{width:70px; left:4.6%;  top:20%}
  .fl--m{width:80px; left:40.5%; top:32%}
  .fl--y{width:64px; left:79%;   top:12%}
}

@media (prefers-reduced-motion:reduce){
  /* Sin clavado no hay suelo que llenar: `.js-tira` nunca llega. */
  .tira{min-height:0;padding-block:clamp(2.4rem,5vw,4rem)}
  .tira__banda{min-height:0}
  .tira__t{white-space:normal;width:auto;flex-wrap:wrap;
    font-size:clamp(1.6rem,4vw,3rem);padding-left:0}
}

/* ---------------------------------------------------------------- 11. Servicios
   El patrón de la referencia: cada servicio es una tarjeta oscura, muy
   redondeada, casi a sangre, que se queda pegada arriba mientras la siguiente
   sube y se monta encima. Dentro, tres bloques: título en dos líneas con la
   segunda en gris, una fila de píldoras y un párrafo con asterisco.

   La versión anterior de esta sección también se apilaba y hubo que quitarla
   porque ocupaba 4,5 pantallas con un 74 % de hueco. El apilado no era el
   problema: el problema era que las tarjetas iban vacías. Aquí cada una lleva
   título, seis etiquetas y un párrafo, y el alto sale del contenido. */
.svc{padding-block:clamp(4rem,8vw,7rem) 0}
.svc__cab{margin-bottom:clamp(2.4rem,5vw,4.5rem)}
.svc__cab .huge{max-width:26ch;margin-top:1.2rem}

.svc__pila{position:relative}
.tar{position:sticky;top:clamp(1rem,3vw,2.4rem);padding-inline:var(--pad);
  margin-bottom:clamp(1rem,2vw,1.6rem)}
/* Cada tarjeta se pega un poco más abajo que la anterior: así asoma el canto
   de la de debajo y se ve que son piezas apiladas, no una sola. */
.tar[data-n="02"]{top:calc(clamp(1rem,3vw,2.4rem) + 1.1rem)}
.tar[data-n="03"]{top:calc(clamp(1rem,3vw,2.4rem) + 2.2rem)}

.tar__in{--tar-p:clamp(1.8rem,3.4vw,3.2rem);
  position:relative;display:grid;align-content:space-between;gap:clamp(2rem,5vw,4rem);
  min-height:min(78vh,720px);padding:var(--tar-p);
  background:var(--card);color:var(--on-dark);border-radius:var(--r-card);
  overflow:hidden}

/* Cuando llega la tira, la página entera pasa a oscuro. Las tarjetas son
   oscuras y, sin nada más, perderían sus cantos y se fundirían con el fondo:
   con Servicios justo antes de la tira, la última tarjeta queda en pantalla
   durante el cambio. Un canto de luz tenue las recorta SOLO en ese momento;
   sobre la página clara no se ve. Va por encima de la foto (z-index 4). */
.tar__in::after{content:'';position:absolute;inset:0;z-index:4;border-radius:inherit;
  pointer-events:none;box-shadow:inset 0 0 0 1px rgba(244,247,249,.16);opacity:0;
  transition:opacity .55s var(--ease)}
body[data-theme="dark"] .tar__in::after{opacity:1}

.tar__n{position:absolute;top:clamp(1.8rem,3.4vw,3.2rem);right:clamp(1.8rem,3.4vw,3.2rem);
  color:var(--mute);margin:0}

.tar__t{margin:0;font-family:var(--f-display);font-weight:500;
  font-size:clamp(2.4rem,7vw,6.2rem);line-height:.98;letter-spacing:-.04em}
.tar__t span{display:block}
/* La segunda línea baja a gris. Es el recurso de la referencia: el énfasis se
   marca quitando peso visual, no añadiendo color. */
.tar__t span+span{color:var(--mute)}

.tar__pie{display:grid;gap:clamp(1.2rem,2.4vw,1.8rem)}

.tar__chips{display:flex;flex-wrap:wrap;gap:.5rem;margin:0;padding:0;list-style:none}
.tar__chips li{padding:.52rem 1.05rem;border-radius:var(--r-pill);background:var(--chip);
  font-size:var(--t-sm);color:var(--on-dark);white-space:nowrap}

.tar__d{margin:0;display:grid;grid-template-columns:auto 1fr;gap:.9rem;align-items:start;
  font-size:var(--t-md);line-height:1.5;max-width:62ch;color:var(--on-dark)}
.tar__d b{font-weight:400;color:var(--mute);font-size:1.15em;line-height:1}

/* --- Tarjeta 01: las dos máquinas, partidas en diagonal -------------------
   El corte va del 57,5 % arriba al 42,5 % abajo —justo por la mitad—. Es el
   mismo gesto que el resto de la página: una línea que no es recta del todo.

   Las dos capas miden la tarjeta ENTERA. La de offset va debajo sin recortar
   y la digital encima con su polígono, así que en la juntura no hay dos
   bordes que puedan no tocarse: donde acaba una empieza lo que ya estaba
   pintado. Con dos polígonos enfrentados se abre una rendija de un píxel en
   cuanto el ancho no cae en un número redondo. */
.tar__fondo{position:absolute;inset:0;z-index:0;overflow:hidden}
/* Cada foto ocupa SU cuña, no la tarjeta entera. Es lo que las abre: con una
   caja del ancho completo la foto se escala al ancho de la tarjeta y de ella
   solo se ve la mitad, que es como mirar un recorte al doble de tamaño. En su
   propia cuña cabe la máquina completa. */
.tar__foto{position:absolute;top:0;height:100%;object-fit:cover}

/* El corte va del 57,5 % arriba al 42,5 % abajo: parte la tarjeta justo por
   la mitad, con la misma inclinación. En coordenadas de cada caja eso es
   57,5/57,5 arriba y 42,5/57,5 abajo. El píxel de más la mete por debajo de la de offset —que va
   pintada antes— para que en la juntura no pueda abrirse una rendija. */
.tar__foto--a{left:0;width:57.5%;object-position:50% 50%;
  clip-path:polygon(0 0,100% 0,calc(73.913% + 1px) 100%,0 100%)}
/* Y para la de la derecha, (57,5-42,5)/57,5 arriba y 0 abajo. */
.tar__foto--b{left:42.5%;width:57.5%;object-position:50% 50%;
  clip-path:polygon(26.087% 0,100% 0,100% 100%,0 100%)}

/* Cuando la tarjeta lleva una sola foto no hay nada que partir: ocupa el
   ancho entero y se queda sin diagonal ni juntura. */
.tar__foto--sola{left:0;width:100%;object-position:50% 46%}

/* El texto baja al pie. Es el cambio que hace que esto funcione: con el
   titular arriba cae justo sobre la parte clara de la impresora digital y la
   segunda línea, que va en gris, deja de leerse —se probó—. Abajo se apoya
   en una sombra que ya no tapa ninguna de las dos máquinas. */
.tar--foto .tar__in{align-content:end}

/* El velo. Tapa lo justo: el pie, donde se apoya el texto, y la esquina del
   número. Fuera de ahí las fotos van limpias —es lo que se pidió—, así que
   cada tramo está recortado al mínimo que aún aprueba la medición de
   contraste; no hay margen de sobra que gastar oscureciendo de más. */
.tar__velo{
  /* El rincón del número sale a variable porque cada tarjeta necesita lo
     suyo: depende de lo claro que sea la foto que hay justo debajo. */
  --esquina:radial-gradient(22% 26% at 100% 0%,rgba(12,13,23,.62) 0%,
    rgba(12,13,23,.4) 45%,rgba(12,13,23,.1) 72%,rgba(12,13,23,0) 90%);
  position:absolute;inset:0;z-index:2;pointer-events:none;
  background:
    linear-gradient(to top,rgba(12,13,23,.97) 0%,rgba(12,13,23,.94) 26%,
      rgba(12,13,23,.84) 36%,rgba(12,13,23,.5) 46%,rgba(12,13,23,.18) 56%,
      rgba(12,13,23,0) 66%),
    var(--esquina),
    /* Un apoyo en el canto izquierdo para que la foto no acabe en seco contra
       el blanco de la página. */
    linear-gradient(100deg,rgba(12,13,23,.22) 0%,rgba(12,13,23,.04) 22%,
      rgba(12,13,23,0) 38%)}

/* En la 01 basta un roce: detrás del número cae el bastidor rojo de la
   prensa, que ya es oscuro. La 03 lleva una foto mucho más clara y ahí hay
   pared blanca a casi cualquier ancho: con el roce de la 01 el número se
   queda en 3,3:1 y necesita 4,5. Medido. */
.tar[data-n="03"] .tar__velo{
  --esquina:radial-gradient(24% 28% at 100% 0%,rgba(12,13,23,.86) 0%,
    rgba(12,13,23,.6) 45%,rgba(12,13,23,.15) 74%,rgba(12,13,23,0) 92%)}

/* La 02 queda en medio: detrás del número cae el amarillo del realce, que no
   es blanco pero casi. Con el roce de la 01 se queda en 4,1:1. */
.tar[data-n="02"] .tar__velo{
  --esquina:radial-gradient(23% 27% at 100% 0%,rgba(12,13,23,.74) 0%,
    rgba(12,13,23,.5) 45%,rgba(12,13,23,.12) 74%,rgba(12,13,23,0) 90%)}

/* La juntura: un pelo de luz. Lleva los mismos porcentajes que el recorte,
   con el grosor en píxeles dentro del calc(), para que no se despegue de la
   diagonal cuando cambia el ancho de la tarjeta. */
.tar__junta{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:rgba(244,247,249,.22);
  clip-path:polygon(calc(57.5% - 1.5px) 0,57.5% 0,42.5% 100%,calc(42.5% - 1.5px) 100%)}

/* El texto sube por encima de las fotos. El número ya es absoluto: solo
   necesita el z-index. */
.tar--foto .tar__n{z-index:3;color:var(--on-dark)}
.tar--foto .tar__texto{position:relative;z-index:3;display:grid;
  gap:clamp(1.4rem,2.6vw,2.2rem)}

@media (max-width:52rem){
  .tar{position:relative;top:auto!important}
  .tar__in{min-height:0}

  /* Las fotos siguen detrás, igual que en pantalla grande. Aquí la tarjeta sí
     necesita un alto propio: sin él se ajusta al texto y las dos máquinas se
     quedan en una rendija. */
  .tar--foto .tar__in{min-height:min(70vh,520px)}

  /* El titular ocupa todo el ancho y las píldoras van en dos filas, así que el
     texto sube más que en escritorio y el pie del velo tiene que subir con él.
     Arriba quedan limpias las dos terceras partes de la foto. */
  /* Aquí el velo del pie se cuelga DEL TEXTO, no de la tarjeta. El bloque de
     texto mide entre 204 y 340 px según el teléfono —las píldoras pasan de dos
     filas a tres, y a 320 px el titular parte en cuatro líneas—, así que un
     degradado medido en porcentajes de la tarjeta o se queda corto en el caso
     estrecho o tiñe de más en el normal. Colgado del texto acierta en ambos:
     crece y mengua con él. Los márgenes negativos son los que lo llevan hasta
     los cantos, y el relleno vuelve a meter el texto en su sitio. */
  .tar--foto .tar__texto{
    margin:0 calc(var(--tar-p) * -1) calc(var(--tar-p) * -1);
    padding:clamp(5rem,12vw,9rem) var(--tar-p) var(--tar-p);
    background:linear-gradient(to top,rgba(12,13,23,.97) 0%,rgba(12,13,23,.95) 50%,
      rgba(12,13,23,.91) 70%,rgba(12,13,23,.55) 82%,rgba(12,13,23,.22) 92%,
      rgba(12,13,23,0) 100%)}

  /* La 02 necesita más: lleva seis píldoras —el bloque de texto es el más
     alto de las tres— y debajo cae el amarillo del realce. Un gris medio sobre
     amarillo pide 0,80 de opacidad detrás y en el teléfono estrecho solo
     llegaba a 0,72. Medido. */
  .tar[data-n="02"] .tar__texto{
    background:linear-gradient(to top,rgba(12,13,23,.97) 0%,rgba(12,13,23,.95) 55%,
      rgba(12,13,23,.9) 80%,rgba(12,13,23,.55) 88%,rgba(12,13,23,.22) 95%,
      rgba(12,13,23,0) 100%)}

  /* De pie, la ventana sobre la prensa es estrecha y con el encuadre de
     escritorio se queda en un rodillo suelto. A 42 % entra el pliego con el
     rostro impreso, que es lo que hace entender la foto. */
  .tar__foto--b{object-position:56% 50%}

  /* Al velo de la tarjeta solo le queda el rincón del número, cada una con
     el suyo. */
  .tar__velo{--esquina:radial-gradient(40% 20% at 100% 0%,rgba(12,13,23,.7) 0%,
    rgba(12,13,23,0) 78%);background:var(--esquina)}
  .tar[data-n="03"] .tar__velo{--esquina:radial-gradient(46% 24% at 100% 0%,
    rgba(12,13,23,.96) 0%,rgba(12,13,23,.55) 50%,rgba(12,13,23,.12) 74%,
    rgba(12,13,23,0) 88%)}
  .tar[data-n="02"] .tar__velo{--esquina:radial-gradient(44% 22% at 100% 0%,
    rgba(12,13,23,.88) 0%,rgba(12,13,23,.48) 52%,rgba(12,13,23,0) 86%)}
}

/* ---------------------------------------------------------------- 12. Productos
   Las categorías de la referencia: dos columnas de fotos muy redondeadas, sin
   marco ni sombra en reposo, con el nombre puesto ENCIMA de la foto abajo a la
   izquierda. Nada de etiqueta pequeña sobre el titular: el nombre de la familia
   ES el titular, y lo que antes era el nombre del producto baja a la línea de
   descripción. Así no se pierde información y se quita el rótulo de adorno.

   Cada ficha abre la hoja de cotización con esa familia: si se comporta como
   pulsable al pasar el cursor, tiene que serlo de verdad. */
.cats .huge{max-width:24ch;margin:1.2rem 0 clamp(2.4rem,5vw,4rem)}

.cats__grid{display:grid;gap:clamp(1rem,1.8vw,1.75rem)}
@media (min-width:46rem){.cats__grid{grid-template-columns:1fr 1fr}}

.cat{position:relative;display:block;width:100%;aspect-ratio:4/3;padding:0;border:0;
  border-radius:clamp(14px,1.6vw,20px);overflow:hidden;cursor:pointer;background:var(--chip);
  text-align:left;isolation:isolate;
  transition:transform .55s var(--ease-rebote),box-shadow .55s var(--ease-seco)}

.cat__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform 1s var(--ease-seco)}

/* Velo inferior. No es decoración: las fotos de producto son claras y el
   nombre en blanco encima de un cartón beige no se leería. */
.cat__ov{position:absolute;left:0;right:0;bottom:0;z-index:2;display:grid;gap:.3rem;
  padding:clamp(1.1rem,2vw,1.7rem);color:#fff;
  background:linear-gradient(to top,rgba(8,10,14,.82),rgba(8,10,14,.45) 52%,transparent)}
.cat__t{font-family:var(--f-display);font-weight:500;letter-spacing:-.03em;
  font-size:clamp(1.5rem,2.6vw,2.2rem);line-height:1.02}
.cat__d{font-size:var(--t-sm);line-height:1.4;color:rgba(255,255,255,.76);max-width:34ch}

/* La flecha aparece al pasar el cursor: dice qué hace la ficha. */
.cat__flecha{position:absolute;top:clamp(.8rem,1.4vw,1.1rem);right:clamp(.8rem,1.4vw,1.1rem);
  z-index:3;display:grid;place-items:center;width:2.5rem;height:2.5rem;
  border-radius:var(--r-pill);background:var(--ink);color:#fff;
  opacity:0;transform:translateY(-6px) scale(.9);
  transition:opacity .4s var(--ease-seco),transform .5s var(--ease-rebote)}

/* Sobresale de la página: sube, crece un punto y proyecta sombra con
   desplazamiento y desenfoque de verdad, no un halo pegado al canto. */
.cat:hover,.cat:focus-visible{transform:translateY(-10px) scale(1.018);
  box-shadow:0 26px 48px -18px rgba(8,10,14,.45),0 8px 16px -10px rgba(8,10,14,.3)}
.cat:hover .cat__img,.cat:focus-visible .cat__img{transform:scale(1.06)}
.cat:hover .cat__flecha,.cat:focus-visible .cat__flecha{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  .cat,.cat__img,.cat__flecha{transition:none}
  .cat:hover,.cat:focus-visible{transform:none}
  .cat__flecha{opacity:1;transform:none}
}

/* ---------------------------------------------------------------- 13. Nosotros
   La sección deja de ser oscura. Ahora toda la página es blanca y el contraste
   lo ponen las piezas: las fotos redondeadas y el panel oscuro de misión y
   visión, que reutiliza el mismo lenguaje de tarjeta que Servicios. Un fondo
   oscuro aquí devolvería el escalón de tono que acabamos de quitar. */
.nos .huge{max-width:16ch;margin:1.1rem 0 1.4rem}
.nos .lede{margin-bottom:clamp(2.4rem,4.5vw,3.8rem)}

.nos__fotos{display:grid;gap:clamp(.7rem,1.2vw,1.1rem);
  grid-template-columns:repeat(2,1fr)}
@media (min-width:60rem){.nos__fotos{grid-template-columns:repeat(4,1fr)}}
.nos__f{margin:0;overflow:hidden;border-radius:var(--r-img);background:var(--chip)}
.nos__f img{display:block;width:100%;aspect-ratio:3/4;object-fit:cover;
  transition:transform 1s var(--ease-seco)}
@media (hover:hover){.nos__f:hover img{transform:scale(1.05)}}

.nos__cap{margin:clamp(.9rem,1.6vw,1.2rem) 0 clamp(2.6rem,5vw,4.4rem);color:var(--dim)}

/* Misión y visión: un solo panel oscuro partido en dos, con el mismo radio y
   el mismo relleno que las tarjetas de Servicios. */
.nos__panel{display:grid;gap:clamp(1.6rem,3vw,3rem);
  padding:clamp(1.8rem,3.4vw,3.2rem);border-radius:var(--r-card);
  background:var(--card);color:var(--on-dark,#F4F7F9)}
@media (min-width:52rem){.nos__panel{grid-template-columns:1fr 1fr;
  gap:clamp(2rem,4vw,4.5rem)}}
.nos__b{display:grid;gap:.7rem;align-content:start}
.nos__k{margin:0;color:var(--mute);letter-spacing:.14em}
.nos__d{margin:0;font-size:var(--t-md);line-height:1.5;max-width:46ch}

.nos__num{display:none}

@media (prefers-reduced-motion:reduce){.nos__f img{transition:none}}

/* --- Nosotros clavado: la pila de fotos -----------------------------------
   Adaptación del componente «vertical image stack». El original es React con
   framer-motion y cambia de foto con la rueda del ratón, capturándola en
   `window`; eso aquí secuestraría el scroll de toda la página y pelearía con
   Lenis. Se gobierna con el scroll de la sección clavada, que además es lo
   que se pidió: que ocurra mientras se baja.

   La composición la fija la retícula: el titular grande a la izquierda, el
   texto de la sección a la derecha, misión y visión debajo de cada uno, y la
   pila en la columna del centro.

   Todo esto vive bajo `.js-nos` y solo a partir de 60rem. Sin JS, con
   movimiento reducido o en pantalla estrecha no se aplica nada y la sección
   se queda tal cual estaba: cuatro fotos en retícula y el panel entero. */
/* La escena es transparente para la retícula de escritorio: sus hijos caen
   directos en ella. En móvil sí es una caja, y es la que se clava. */
.js-nos .nos__escena{display:contents}

/* Guía de pasos: una marca por foto. Es lo que hacían los puntos del
   componente original, pero aquí no son botones —manda el scroll—, así que
   informan y no invitan a pulsar. La orientación la pone cada anchura: de
   pie al costado en escritorio, tumbada bajo la pila en móvil.

   La marca activa crece con `transform`, nunca con `width` ni `height`:
   animar el tamaño obliga a rehacer la maquetación en cada fotograma y
   además movería de sitio a las demás. */
.nos__guia{display:flex;gap:.35rem}
.nos__tick{display:block;border-radius:2px;background:var(--hair);
  transition:transform .45s var(--ease-rebote),background-color .45s var(--ease-seco)}
.nos__tick.is-on{background:var(--ink)}

/* El aviso solo hace falta al llegar: en cuanto la pila avanza una vez, ya
   se ha entendido y se retira. */
.nos__hint{display:inline-flex;color:var(--mute);
  transition:opacity .5s var(--ease-seco)}
.nos__hint.is-off{opacity:0}

/* --- Nosotros clavado en móvil -------------------------------------------
   La misma pila y el mismo recorrido que en escritorio; lo que cambia es el
   reparto. Aquí no caben a la vez titular, pila, texto, misión y visión en
   una pantalla de teléfono, así que solo se clava la escena —rótulo,
   titular, pila y pie— y el resto fluye debajo cuando el clavado termina. */
@media (max-width:59.99rem){
  .js-nos .nos__escena{display:flex;flex-direction:column;
    min-height:100svh;padding-block:calc(var(--nav-h) + 1rem) 1.6rem}
  .js-nos .nos__escena .huge{margin:.6rem 0 0;max-width:12ch}
  .js-nos .nos__fotos{flex:1 1 auto;display:block;position:relative;
    perspective:1000px;min-height:0;margin-top:1.2rem}
  .js-nos .nos__f{position:absolute;left:50%;top:50%;margin:0;
    height:clamp(11rem,34svh,17rem);width:auto;aspect-ratio:3/4;
    transform-style:preserve-3d;will-change:transform,opacity;
    box-shadow:0 1.2rem 2.6rem -.9rem rgba(12,13,23,.26)}
  .js-nos .nos__f img{height:100%;width:100%;aspect-ratio:auto;transition:none}
  /* El carril se tumba y se ancla al PIE de la pila. En estático caía al
     principio del contenedor —sus fichas son todas absolutas, así que no hay
     nada en el flujo que lo empuje hacia abajo—. */
  .js-nos .nos__guia{position:absolute;left:0;right:0;bottom:0;top:auto;
    translate:none;flex-direction:row;justify-content:center;gap:.4rem}
  .js-nos .nos__tick{width:22px;height:2px;transform:scaleX(.45)}
  .js-nos .nos__tick.is-on{transform:scaleX(1)}
  .js-nos .nos__num{display:flex;align-items:baseline;gap:.45em;
    justify-content:center;margin:1rem 0 0;color:var(--dim)}
  .js-nos .nos__num b{font-weight:400;font-size:1.4rem;color:var(--ink);
    font-variant-numeric:tabular-nums}
  .js-nos .nos__cap{margin:.5rem 0 0;text-align:center}
  /* El texto y el panel salen del clavado y respiran por su cuenta. */
  .js-nos .lede{margin-top:clamp(2.5rem,7vw,4rem)}
}

@media (min-width:60rem){
  .nos.js-nos{padding-block:0}
  .js-nos .wrap{display:grid;align-content:center;min-height:100svh;
    padding-block:clamp(2.5rem,6vh,4.5rem);
    grid-template-columns:minmax(0,1fr) clamp(15rem,24vw,21rem) minmax(0,1fr);
    grid-template-rows:auto auto 1fr auto;
    column-gap:clamp(2rem,4.5vw,5.5rem);row-gap:clamp(.9rem,2vh,1.8rem)}

  .js-nos .lbl     {grid-column:1;grid-row:1;align-self:end}
  .js-nos .nos__num{grid-column:2;grid-row:1;display:flex;justify-content:center;
    align-items:baseline;gap:.45em;margin:0;color:var(--dim)}
  .js-nos .nos__num b{font-weight:400;font-size:1.6rem;color:var(--ink);
    font-variant-numeric:tabular-nums}
  .js-nos .huge    {grid-column:1;grid-row:2;margin:0;max-width:11ch}
  .js-nos .lede    {grid-column:3;grid-row:2;margin:0;align-self:end}
  /* A todo el ancho, no solo la columna del centro: ahí partía en dos. */
  .js-nos .nos__cap{grid-column:1/-1;grid-row:4;margin:0;text-align:center}

  /* El panel deja de ser una caja y sus dos mitades se reparten los lados,
     cada una con la misma piel de tarjeta oscura que tenía el conjunto. */
  .js-nos .nos__panel{display:contents}
  .js-nos .nos__b{padding:clamp(1.3rem,2vw,1.9rem);border-radius:var(--r-card);
    background:var(--card);color:var(--on-dark);grid-row:3;align-self:start}
  .js-nos .nos__b:first-child{grid-column:1}
  .js-nos .nos__b:last-child {grid-column:3}
  .js-nos .nos__d{font-size:var(--t-base)}

  /* La pila. `perspective` en el contenedor y `preserve-3d` en cada ficha son
     lo que hace que el giro en X se lea como inclinación y no como aplastado. */
  .js-nos .nos__fotos{grid-column:2;grid-row:2/4;display:block;position:relative;
    perspective:1200px;min-height:0;align-self:stretch}
  /* El alto de la ficha manda: los vecinos se apartan en porcentaje de ella,
     así que con 29svh la pila entera ocupa 29 + 2x45% = unos 443 px y cabe en
     la columna sin morder ni el contador de arriba ni el pie de abajo. */
  /* El centrado NO va en la propiedad `translate`: GSAP escribe `transform` y
     acaba mandando él, así que la ficha se quedaba colgando del 50 %. Lo
     centra el propio GSAP con xPercent/yPercent, que es quien controla todo
     el transform de aquí. */
  .js-nos .nos__f{position:absolute;left:50%;top:50%;margin:0;
    height:clamp(13rem,40svh,21rem);width:auto;aspect-ratio:3/4;
    transform-style:preserve-3d;
    will-change:transform,opacity;
    box-shadow:0 1.4rem 3rem -1rem rgba(12,13,23,.26)}
  .js-nos .nos__f img{height:100%;width:100%;aspect-ratio:auto;transition:none}
  .js-nos .nos__f:hover img{transform:none}

  /* En ancho el carril va de pie, pegado al canto derecho de la columna. */
  .nos__guia{position:absolute;right:0;top:50%;translate:0 -50%;
    flex-direction:column}
  .nos__tick{width:2px;height:30px;transform:scaleY(.4)}
  .nos__tick.is-on{transform:scaleY(1)}
}

/* ---------------------------------------------------------------- 14. Llamada
   La referencia remata con una frase enorme, dos píldoras y un objeto que se
   sale del encuadre por la derecha. Aquí el objeto es la foto de la prensa
   imprimiendo, que estaba sin usar desde que se rehizo Servicios: es material
   real y hace el mismo papel sin repetir ninguna otra foto de la página.

   Deja de ser un plano cian. Toda la página es blanca y las tintas quedan
   como acento, que es lo acordado. */
.cta{padding-block:clamp(4.5rem,10vw,9rem);overflow:hidden}
.cta__in{display:grid;gap:clamp(2.4rem,5vw,4rem);align-items:center}
@media (min-width:62rem){
  .cta__in{grid-template-columns:minmax(0,1fr) minmax(0,.92fr);
    gap:clamp(2rem,4vw,4.5rem)}
}
.cta__txt{display:grid;gap:1.3rem;align-content:start}
/* Dos líneas, como la frase de cierre de la referencia. A 11ch se partía
   en cuatro y la sección se estiraba sin motivo. */
.cta .colosal{max-width:15ch;font-size:clamp(2.6rem,6.6vw,6.4rem);
  margin:.4rem 0 .2rem}
.cta .colosal em{font-style:normal;color:var(--mute)}
.cta .lede{max-width:44ch}

.cta__acc{display:flex;flex-wrap:wrap;gap:.7rem;margin:.9rem 0 0}

/* La foto sale del contenedor por la derecha, como el objeto de la referencia:
   el margen negativo la lleva hasta el canto de la ventana. */
.cta__f{margin:0;border-radius:var(--r-card);overflow:hidden;background:var(--chip)}
@media (min-width:62rem){
  .cta__f{margin-right:calc(var(--pad) * -1 - 2vw);border-top-right-radius:0;
    border-bottom-right-radius:0}
}
.cta__f img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;
  transition:transform 1.1s var(--ease-seco)}
@media (hover:hover){.cta__f:hover img{transform:scale(1.04)}}
@media (prefers-reduced-motion:reduce){.cta__f img{transition:none}}

/* ---------------------------------------------------------------- 15. Pie
   Se revela con paralaje: el contenido entra desde arriba mientras el
   pie sale a la vista, igual que en la referencia. */
.footer{position:relative;background:var(--black);color:var(--white);overflow:hidden}
/* El relleno de arriba no es solo aire: el paralaje sube este bloque dentro
   de un pie que recorta, así que ese relleno es el colchón que se come el
   recorte. Con 22 % de paralaje se comía 275 px y cortaba la primera línea;
   ahora el desplazamiento es del 10 % y el colchón le saca ventaja. */
.footer__in{padding-block:clamp(6rem,11vw,10rem) clamp(1.5rem,3vw,2.5rem);
  will-change:transform}
.footer__top{display:grid;gap:clamp(2rem,4vw,3rem);
  padding-bottom:clamp(2.5rem,5vw,4rem)}
@media (min-width:62rem){.footer__top{grid-template-columns:1.6fr .7fr .7fr}}
.footer__about{display:grid;gap:.7rem;color:var(--mute);max-width:44ch}
.footer__about a{color:var(--cyan-txt)}
.footer__col h3{color:var(--mute);text-transform:uppercase;letter-spacing:.06em;
  margin-bottom:.9rem;font-weight:400}
.footer__col li + li{margin-top:.45rem}
.footer__col a{position:relative;transition:color .35s var(--ease)}
.footer__col a:hover{color:var(--cyan-txt)}

/* «IMPRECUETOS» en Archivo Black mide ~7,74 em. Por debajo de 541 px el
   relleno toca su mínimo (1,15rem) y la caja encoge más deprisa que el vw,
   así que a 12,4vw la S final quedaba cortada por el overflow del pie. */
/* El degradado CMYK se queda por decisión del cliente (16/09/2026): no es un
   adorno, son las tres tintas con las que imprime. Registrado como excepción
   del detector con ese motivo. */
.footer__word{font-family:var(--f-display);font-weight:500;text-transform:uppercase;
  line-height:.92;letter-spacing:-.04em;font-size:clamp(2rem,10.5vw,9.6rem);
  border-top:1px solid var(--hair-dk);padding-top:.3em;
  background:linear-gradient(100deg,var(--cyan),var(--magenta) 46%,var(--yellow));
  -webkit-background-clip:text;background-clip:text;color:transparent}
.footer__bottom{display:flex;flex-wrap:wrap;gap:.6rem 1.4rem;justify-content:space-between;
  color:var(--mute);padding-top:1.4rem}

/* ---------------------------------------------------------------- 15b. Colofón */
.end{margin-top:clamp(4rem,9vw,8rem);padding-top:clamp(2.2rem,4vw,3.4rem);
  border-top:1px solid var(--hair-dk);display:grid;gap:clamp(1.4rem,2.6vw,2.2rem);
  justify-items:center;text-align:center;padding-bottom:clamp(2rem,4vw,3.5rem)}

/* Tira de control: los cuatro parches se llenan al llegar al final. */
.end__bar{display:flex;gap:6px;width:min(100%,340px)}
.end__bar i{flex:1;height:6px;background:currentColor;transform:scaleX(0);
  transform-origin:left center;transition:transform .9s var(--ease)}
.end__bar i[data-ink="c"]{color:var(--cyan)}
.end__bar i[data-ink="m"]{color:var(--magenta);transition-delay:.1s}
.end__bar i[data-ink="y"]{color:var(--yellow);transition-delay:.2s}
.end__bar i[data-ink="k"]{color:rgba(255,255,255,.85);transition-delay:.3s}
.end.is-in .end__bar i{transform:scaleX(1)}

.end__k{color:var(--mute);text-transform:uppercase;letter-spacing:.24em}

/* En caja baja: es una frase, no un rótulo, y la referencia pone sus frases
   grandes así. En versales y con Poppins perdía la voz. */
.end__t{font-family:var(--f-display);font-weight:500;line-height:1.02;
  letter-spacing:-.035em;font-size:clamp(1.7rem,5vw,3.8rem)}
.end__t span{display:block;overflow:hidden}
.end__t span > *,.end__t span{will-change:transform}
.end__t em{font-style:normal;color:var(--ink);
  font-size:1.08em;background:linear-gradient(100deg,var(--cyan),var(--magenta) 52%,var(--yellow));
  -webkit-background-clip:text;background-clip:text;color:transparent}

.end__col{display:grid;gap:.42rem;color:var(--mute);max-width:52ch;line-height:1.5}
.end__col span{opacity:0;transform:translateY(.9em);
  transition:opacity .8s var(--ease-out),transform .8s var(--ease-out)}
.end.is-in .end__col span{opacity:1;transform:none}
.end.is-in .end__col span:nth-child(2){transition-delay:.12s}
.end.is-in .end__col span:nth-child(3){transition-delay:.24s}

/* Píldora, como los controles de la referencia. */
.end__up{display:inline-flex;align-items:center;gap:.8rem;margin-top:.6rem;
  padding:.5rem 1.25rem .5rem .5rem;border-radius:var(--r-pill);
  background:rgba(255,255,255,.08);color:var(--n-050);
  transition:background-color .4s var(--ease-seco),transform .45s var(--ease-rebote)}
.end__up:hover{background:var(--hair-dk);transform:translateY(-2px)}
.end__reg{width:30px;color:inherit;display:block}
.end__reg svg{width:100%;height:auto;stroke-width:1;opacity:.75}
.end__up:hover .end__reg svg{opacity:1}
.end__up .mono{text-transform:uppercase;letter-spacing:.12em;font-size:var(--t-xs)}

@media (prefers-reduced-motion:reduce){
  .end__bar i{transform:scaleX(1)}
  .end__col span{opacity:1;transform:none}
}

/* ---------------------------------------------------------------- 16. Hojas (FAQ / cotización) */
.sheet{position:fixed;inset:0;z-index:100;background:var(--white);color:var(--black);
  display:flex;flex-direction:column;clip-path:inset(0 0 100% 0);
  transition:clip-path .7s var(--ease);pointer-events:none}
.sheet.is-open{clip-path:inset(0 0 0 0);pointer-events:auto}
.sheet__bar{flex:none;height:var(--nav-h);display:flex;align-items:center;
  justify-content:space-between;padding-inline:var(--pad);border-bottom:1px solid rgba(0,0,0,.14);
  text-transform:uppercase;letter-spacing:.05em}
/* Cerrar es el control que más se toca en una hoja a pantalla completa, y
   medía 16 px de alto. El relleno lo sube a 44 sin moverlo de sitio: el margen
   negativo devuelve el espacio que el relleno añade. */
.sheet__x{display:flex;align-items:center;gap:.55rem;text-transform:uppercase;
  letter-spacing:.05em;min-height:44px;padding-inline:.7rem;margin-inline:-.7rem}
.sheet__x svg{width:12px;height:12px;flex:none}
.sheet__scroll{flex:1;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;
  padding-block:clamp(2.5rem,6vw,5rem)}
.sheet .huge{margin-bottom:clamp(2rem,4vw,3.5rem)}
/* Gris, como en el resto de la página. El cian aquí era el único resto del
   sistema anterior de énfasis. */
.sheet .huge em{color:var(--mute)}
.sheet .rule{background:rgba(0,0,0,.14)}
.sheet .dim{color:rgba(0,0,0,.5)}
.sheet__foot{margin-top:2.6rem;color:rgba(0,0,0,.55)}

/* Acordeón */
.faq__item{border-top:1px solid rgba(0,0,0,.14)}
.faq__item:last-child{border-bottom:1px solid rgba(0,0,0,.14)}
.faq__item summary{list-style:none;cursor:pointer;display:flex;align-items:center;
  justify-content:space-between;gap:1.5rem;padding:1.15em 0;
  font-family:var(--f-display);text-transform:uppercase;letter-spacing:-.015em;
  font-size:clamp(1.02rem,2.1vw,1.72rem);line-height:1.02;
  transition:color .35s var(--ease)}
.faq__item summary::-webkit-details-marker{display:none}
.faq__item summary:hover{color:var(--cyan-txt)}
.faq__ico{position:relative;flex:none;width:16px;height:16px}
.faq__ico::before,.faq__ico::after{content:'';position:absolute;inset:50% 0 auto;height:1.5px;
  background:currentColor;transition:transform .4s var(--ease)}
.faq__ico::after{transform:rotate(90deg)}
.faq__item[open] .faq__ico::after{transform:rotate(0)}
.faq__body{overflow:hidden}
.faq__body > *{padding-bottom:1.6rem;max-width:62ch;color:rgba(0,0,0,.66)}
.faq__body .ticks li,.steps li{color:rgba(0,0,0,.66)}
.faq__body .ticks li::before{background:var(--cyan)}
.steps{counter-reset:s;display:grid;gap:.6rem}
.steps li{counter-increment:s;position:relative;padding-left:2.1rem;font-family:var(--f-body);font-weight:500;
  font-size:.84rem}
.steps li::before{content:counter(s,decimal-leading-zero);position:absolute;left:0;
  color:var(--cyan-txt)}

/* Cotización */
.cot{display:grid;gap:clamp(2.5rem,5vw,4.5rem)}
@media (min-width:62rem){.cot{grid-template-columns:.85fr 1.15fr}}
.cot__side{display:grid;gap:1rem;align-content:start}
.cot__side .lede{max-width:38ch}
.cot__side a{color:var(--cyan)}

.form{display:grid;gap:1.35rem}
.form__row{display:grid;gap:1.35rem}
@media (min-width:40rem){.form__row{grid-template-columns:repeat(2,1fr)}}
.field{display:grid;gap:.42rem}
.field label{text-transform:uppercase;letter-spacing:.05em;color:rgba(0,0,0,.62)}
.field .opt{text-transform:none;letter-spacing:0}
.field input,.field textarea{width:100%;padding:.85rem 0;border:0;
  border-bottom:1px solid rgba(0,0,0,.24);background:transparent;color:inherit;
  font-family:var(--f-body);font-size:1.02rem;border-radius:0;
  transition:border-color .35s var(--ease)}
.field textarea{min-height:8.5rem;resize:vertical}
.field input::placeholder,.field textarea::placeholder{color:rgba(0,0,0,.3)}
.field input:focus,.field textarea:focus{outline:none;border-bottom-color:var(--cyan)}
.field.is-invalid input,.field.is-invalid textarea{border-bottom-color:var(--magenta)}
.field__err{color:var(--magenta);min-height:1em}
/* Fuera de la vista pero presente en el formulario: `display:none` lo delata
   ante los robots que lo comprueban. */
.cazabots{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* El aviso de fallo solo ocupa sitio cuando dice algo. */
.form__fallo{margin:.9rem 0 0;color:var(--magenta);line-height:1.4}
.form__fallo:empty{display:none}

.consent{display:flex;gap:.7rem;align-items:flex-start;font-size:.92rem;
  color:rgba(0,0,0,.66);min-height:44px;padding-block:.2rem}
.consent input{margin-top:.22em;accent-color:var(--cyan);width:16px;height:16px;flex:none}
.consent.is-invalid{color:var(--magenta)}
/* ---- Opciones del formulario ----------------------------------------
   Botones de radio de verdad, no divs: se recorren con el tabulador, las
   flechas cambian la eleccion y el lector de pantalla anuncia el grupo por
   su leyenda. El circulo del radio se oculta pero sigue enfocable; lo que
   se ve es la pildora. */
.form__paso{margin:.6rem 0 -.3rem;text-transform:uppercase;letter-spacing:.08em;
  color:var(--cyan-txt)}
.form__paso:first-of-type{margin-top:0}
.grupo{border:0;margin:0;padding:0;min-width:0}
.grupo legend{display:block;padding:0;margin:0 0 .75rem;text-transform:uppercase;
  letter-spacing:.05em;color:rgba(0,0,0,.62)}
.grupo .opt{text-transform:none;letter-spacing:0;color:var(--mute-txt)}
.opciones{display:flex;flex-wrap:wrap;gap:.5rem}
.op{position:relative;display:inline-flex}
.op input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.op span{display:inline-flex;align-items:center;min-height:44px;padding:.5rem 1.1rem;
  border:1px solid rgba(12,13,23,.3);border-radius:var(--r-pill);
  font-family:var(--f-body);font-size:.95rem;line-height:1.2;color:var(--ink);
  transition:background-color .2s var(--ease-seco),border-color .2s var(--ease-seco),
    color .2s var(--ease-seco)}
.op:hover span{border-color:var(--ink)}
.op input:checked + span{background:var(--ink);border-color:var(--ink);color:#fff}
.op input:focus-visible + span{outline:2px solid var(--cyan-txt);outline-offset:2px}
.grupo.is-invalid .op span{border-color:var(--magenta)}
.grupo > .field__err{display:block;margin-top:.5rem}
/* Vacío no ocupa sitio: si lo ocupara, los grupos obligatorios quedarían
   más separados que el opcional, que no tiene aviso. */
.grupo > .field__err:empty{display:none}
.grupo__nota{margin:.6rem 0 0;color:var(--mute-txt)}
/* `hidden` pierde contra `.field{display:grid}`; hay que decirlo. */
.field[hidden]{display:none}
.form__envio{display:grid;gap:.75rem;justify-items:start}
.form__nota{margin:0;color:var(--mute-txt)}
@media (prefers-reduced-motion:reduce){.op span{transition:none}}

.form__done{display:none;border-top:2px solid var(--cyan);padding-top:1.4rem;gap:.5rem}
.form__done.is-visible{display:grid}
.form__done .mono{text-transform:uppercase;letter-spacing:.06em;color:var(--cyan)}

/* ---------------------------------------------------------------- 17. Responsive */
@media (max-width:62rem){
  .nav__links{display:none}
  .burger{display:grid}
}
@media (max-width:48rem){
  /* ~11 px por fotograma en móvil, el mismo criterio que en escritorio. */
  .hero{height:330vh}
  .btn--big{width:100%;justify-content:center}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important}
  .hero{height:auto}
  .hero__sticky{position:relative;height:auto;min-height:100svh}
  .hero__video{display:none}
  .panel{position:relative;min-height:0}
}

/* ---------------------------------------------------------------- WhatsApp
   El verde NO es el oficial (#25D366): con el icono blanco da 1,98:1 y un
   boton pide al menos 3:1. #1CA14E da 3,36:1 y se sigue leyendo como
   WhatsApp. Al pasar el cursor se oscurece a #147A3B, que es cuando sale la
   etiqueta de texto: ahi el blanco sube a 5,4:1, suficiente para texto. */
.wa{position:fixed;z-index:70;
  right:max(1rem,env(safe-area-inset-right));bottom:max(1rem,env(safe-area-inset-bottom));
  display:flex;align-items:center;height:3.5rem;border-radius:var(--r-pill);
  background:#1CA14E;color:#fff;text-decoration:none;
  box-shadow:0 12px 26px -10px rgba(8,10,14,.5),0 2px 6px rgba(8,10,14,.16);
  opacity:0;visibility:hidden;transform:translateY(14px) scale(.9);
  transition:opacity .35s var(--ease-seco),transform .55s var(--ease-rebote),
    background-color .25s var(--ease-seco),visibility 0s linear .35s}
.wa.is-on{opacity:1;visibility:visible;transform:none;
  transition:opacity .35s var(--ease-seco),transform .55s var(--ease-rebote),
    background-color .25s var(--ease-seco),visibility 0s}
.wa svg{flex:none;width:1.75rem;height:1.75rem;margin:0 .875rem}
.wa__t{max-width:0;overflow:hidden;white-space:nowrap;font-family:var(--f-body);
  font-weight:600;font-size:.95rem;letter-spacing:-.005em;
  transition:max-width .5s var(--ease-seco),padding .5s var(--ease-seco)}
.wa:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
/* La etiqueta solo donde hay cursor: en el telefono basta el icono, que es de
   los pocos que todo el mundo reconoce. */
@media (hover:hover){
  .wa:hover,.wa:focus-visible{background:#147A3B}
  .wa:hover .wa__t,.wa:focus-visible .wa__t{max-width:14rem;padding-left:1.25rem}
}
@media (prefers-reduced-motion:reduce){
  .wa,.wa.is-on,.wa__t{transition:none}
  .wa{transform:none}
}
@media print{.wa{display:none}}

/* Enlaces de WhatsApp en texto: el icono a la altura de la letra. */
.enlace-wa{display:inline-flex;align-items:center;gap:.45rem}
.enlace-wa .i-wa{width:1.05em;height:1.05em;flex:none}
.pill__b .i-wa{width:15px;height:15px}
/* La flecha de las pildoras gira al pasar el cursor; un icono de WhatsApp
   girado queda raro, asi que en esta solo crece un punto. */
.pill--wa:hover .pill__b{transform:scale(1.12)}