@font-face{font-family:'Clash Display';src:url('fonts/clash-500.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Clash Display';src:url('fonts/clash-600.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Switzer';src:url('fonts/switzer-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Switzer';src:url('fonts/switzer-500.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Switzer';src:url('fonts/switzer-600.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'JetBrains Mono';src:url('fonts/jbmono-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'JetBrains Mono';src:url('fonts/jbmono-500.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}

:root{
  --azul-950:#060B1F; --azul-900:#0B1740; --azul-800:#14297E; --azul-700:#1D45C8;
  --azul-600:#2B6BFF; --azul-400:#66A8FF; --azul-200:#B7D9FF; --azul-050:#E4F0FF;
  --tinta:#05070B; --grafito:#0E1116; --grafito-2:#171B22;
  --hueso:#F2EFE9; --hueso-2:#DED9CF;
  --fg:var(--azul-050); --fg-mute:#A7BAD4; --fg-soft:#8CA4C6;

  --display:'Clash Display',system-ui,sans-serif;
  --texto:'Switzer',system-ui,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,monospace;

  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-soft:cubic-bezier(.4,0,.2,1);
  --ease-desliza:cubic-bezier(.16,1,.3,1);
  --alto-hero:100svh;
  --pad:clamp(20px,5vw,72px);
  /* aire vertical de cada seccion: 80px en movil, 128px en escritorio, y nada mas */
  --ritmo:clamp(80px,10vw,128px);
  --banda:1220px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--azul-950);color:var(--fg);font-family:var(--texto);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased}
img,video,svg{display:block;max-width:100%}
a{color:inherit}

/* ---------- el fondo ----------
   Dos capas. La base es un azul casi plano que cubre todo el documento: es lo que
   sostiene el texto de las secciones. Encima, el degradado difuminado, que solo
   existe en el hero y muere unos 70vh mas abajo con una mascara. Arranca donde
   arranca el hero, que ahora es el principio del documento. */
body{position:relative}
body::before{content:"";position:absolute;inset:0;z-index:-2;pointer-events:none;
  background:linear-gradient(180deg,#0A1636 0%,#0A1533 38%,#0B1839 72%,#081027 100%)}
body::after{content:"";position:absolute;left:0;right:0;z-index:-1;pointer-events:none;
  top:0;height:176vh;opacity:.72;
  background:
    linear-gradient(180deg, rgba(6,11,31,.30) 0%, rgba(6,11,31,.14) 38%, rgba(6,11,31,.26) 100%),
    url('hero-1280.jpg') center/cover no-repeat;
  /* Solo se escala en vertical: escalar tambien en horizontal sacaba la capa fuera
     del viewport y la pagina se movia 51px de lado. El borde lateral del desenfoque
     lo tapa el degradado lineal, que llega hasta el borde. */
  filter:blur(34px);transform:scaleY(1.08);
  -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 50%,transparent 100%);
          mask-image:linear-gradient(180deg,#000 0%,#000 50%,transparent 100%)}

/* ---------- cortina al navegar por la barra ----------
   Sube desde abajo, tapa la pantalla, el scroll salta debajo, y baja. clip-path
   corre en el compositor: no hay reflujo ni repintado del contenido. */
.cortina{position:fixed;inset:0;z-index:30;background:var(--azul-950);pointer-events:none;
  clip-path:inset(100% 0 0 0);transition:clip-path .45s var(--ease-desliza)}
.cortina.is-cubre{clip-path:inset(0 0 0 0)}

.skip{position:absolute;left:-9999px;top:0;background:var(--azul-600);color:#fff;padding:12px 18px;z-index:99}
.skip:focus{left:12px;top:12px}
:focus-visible{outline:2px solid var(--azul-400);outline-offset:3px;border-radius:3px}

/* ---------- barra superior: una capsula flotante que se recoge al bajar ----------
   Fija arriba y centrada. En el tope lleva marca, enlaces y boton; pasados 100px se
   recoge a marca y tres puntos, y se queda asi hasta volver al tope. Cristal fino:
   un 7% de luz, desenfoque con saturacion, filo de 1px y un reflejo en el canto.

   El ancho se anima entre dos medidas que pone main.js en --nav-ancho y --nav-mini:
   max-content no se puede animar, y de un max-width holgado a otro el cambio no se
   ve hasta que el tope cruza el contenido, que es un salto. */
.nav{position:fixed;top:14px;left:50%;transform:translateX(-50%);z-index:20;
  display:flex;align-items:center;gap:clamp(10px,1.4vw,20px);overflow:hidden;
  /* Ajustada a lo que lleva dentro. El aire entre la marca y los enlaces no lo
     decide el ancho, lo pone .nav__brand con un margen fijo. main.js mide este
     ancho y el recogido para poder animar entre los dos. */
  width:var(--nav-ancho,max-content);max-width:calc(100% - 2 * var(--pad));
  padding:11px 9px 11px 18px;border-radius:999px;
  background:rgba(228,240,255,.07);
  backdrop-filter:blur(20px) saturate(180%);-webkit-backdrop-filter:blur(20px) saturate(180%);
  border:1px solid rgba(255,255,255,.10);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 12px 32px -14px rgba(0,0,0,.55);
  transition:width .36s var(--ease),padding .36s var(--ease),gap .36s var(--ease)}
/* el reflejo: una lamina de luz que cae desde el canto de arriba y se apaga a media altura */
.nav::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.10) 0%,rgba(255,255,255,0) 48%)}
/* el margen derecho es el aire entre el nombre y el primer enlace */
.nav__brand{display:flex;align-items:center;gap:12px;text-decoration:none;flex:none;margin-right:clamp(18px,2.2vw,34px)}
.nav__mark{width:auto;height:26px;fill:var(--azul-050);flex:none}
/* el nombre en una linea; el salto del HTML solo se usa en pantallas estrechas */
.nav__name{font-family:var(--display);font-weight:500;font-size:13px;line-height:1.1;letter-spacing:.07em;text-transform:uppercase;white-space:nowrap}
.nav__name br{display:none}
/* el boton lleva su propio fondo dentro de la capsula */
/* el boton: negro, con la foto a la izquierda del texto (avatar + texto) */
.nav__cta{display:inline-flex;align-items:center;gap:9px;font-family:var(--texto);font-weight:500;font-size:13.5px;letter-spacing:.01em;text-decoration:none;
  color:#fff;background:#000;border-radius:999px;padding:5px 16px 5px 5px;white-space:nowrap;
  border:1px solid rgba(255,255,255,.10);box-shadow:inset 0 1px 0 rgba(255,255,255,.10);
  transition:background .35s var(--ease-soft),transform .35s var(--ease-soft),opacity .18s var(--ease),visibility 0s 0s}
.nav__cta:hover{background:#15181F;transform:translateY(-1px)}
.nav__cta-foto{width:30px;height:30px;border-radius:50%;flex:none;display:block;
  box-shadow:0 0 0 1px rgba(255,255,255,.22)}

/* selector de idioma: dos mitades, la activa encendida */
.nav__lang{display:flex;align-items:center;flex:none;padding:3px;margin:0;border-radius:999px;cursor:pointer;
  font:inherit;font-family:var(--texto);font-weight:600;font-size:11px;letter-spacing:.08em;color:#8CA4C6;
  background:rgba(228,240,255,.05);border:1px solid rgba(255,255,255,.12);
  transition:opacity .18s var(--ease),visibility 0s 0s}
.nav__lang span{padding:6px 8px;border-radius:999px;line-height:1;
  transition:background .3s var(--ease-soft),color .3s var(--ease-soft)}
.nav__lang span.is-activo{background:rgba(228,240,255,.16);color:#F4F9FF}
.nav__lang:hover span:not(.is-activo){color:#C6D6EC}

/* recogida: los enlaces y el boton no salen del DOM. Se sacan del flujo y se apagan
   con visibility, que ademas los quita del orden de tabulacion. */
.nav.is-mini{width:var(--nav-mini,max-content);padding-right:22px;gap:14px}
.nav.is-mini .nav__menu,.nav.is-mini .nav__cta,.nav.is-mini .nav__lang{position:absolute;opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .16s var(--ease),visibility 0s .16s}
.nav__dots{display:flex;align-items:center;gap:4px;flex:none;
  position:absolute;opacity:0;visibility:hidden;
  transition:opacity .16s var(--ease),visibility 0s .16s}
.nav.is-mini .nav__dots{position:static;opacity:1;visibility:visible;
  transition:opacity .28s var(--ease) .14s,visibility 0s 0s}
.nav__dots i{width:5px;height:5px;border-radius:50%;background:var(--azul-400);
  animation:navPulse 1.7s var(--ease-soft) infinite}
.nav__dots i:nth-child(2){animation-delay:.22s}
.nav__dots i:nth-child(3){animation-delay:.44s}
@keyframes navPulse{0%,100%{opacity:.32;transform:scale(.78)}42%{opacity:1;transform:scale(1)}}
/* mientras main.js mide los dos anchos no se anima nada */
.nav.is-midiendo,.nav.is-midiendo *{transition:none!important}


/* ---------- enlaces de la barra ---------- */
.nav__menu{display:flex;align-items:center;gap:clamp(0px,.5vw,6px);
  transition:opacity .18s var(--ease),visibility 0s 0s}
.nav__link{position:relative;text-decoration:none;color:#C6D6EC;font-weight:500;font-size:14px;
  padding:8px 9px;border-radius:9px;white-space:nowrap;
  transition:color .3s var(--ease-soft),background .3s var(--ease-soft)}
.nav__link::after{content:"";position:absolute;left:9px;right:9px;bottom:3px;height:1.5px;border-radius:2px;
  background:rgba(228,240,255,.7);transform:scaleX(0);transform-origin:left;
  transition:transform .38s var(--ease)}
.nav__link:hover,.nav__link[aria-expanded="true"]{color:var(--azul-050);background:rgba(228,240,255,.06)}
.nav__link[aria-expanded="true"]::after{transform:scaleX(1)}
@media (max-width:1080px){.nav__menu{display:none}}
/* estrecho: el nombre vuelve a dos lineas y todo pierde un punto, para que quepa */
@media (max-width:520px){
  .nav{padding:8px 8px 8px 16px;gap:12px}
  .nav__brand{margin-right:0}
  .nav__name br{display:block}
  .nav__name{font-size:11px;letter-spacing:.1em}
  .nav__mark{height:24px}
  /* el boton se queda en la foto sola; el texto sigue en el aria-label del enlace */
  .nav__cta{padding:3px;gap:0}
  .nav__cta span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
}

/* ---------- panel de previsualización, en cristal ---------- */
.preview{position:fixed;top:0;left:0;right:0;z-index:19;display:flex;justify-content:center;
  padding:0 var(--pad);pointer-events:none}
.preview.is-on{pointer-events:auto}
.preview__panel{position:relative;width:min(1080px,100%);overflow:hidden;
  border-radius:20px;border:1px solid rgba(228,240,255,.15);
  background:linear-gradient(178deg,rgba(21,37,80,.80) 0%,rgba(7,12,28,.86) 100%);
  backdrop-filter:blur(26px) saturate(170%);-webkit-backdrop-filter:blur(26px) saturate(170%);
  box-shadow:0 34px 90px -24px rgba(0,0,0,.78),inset 0 1px 0 rgba(228,240,255,.18);
  height:0;opacity:0;transform:translateY(-14px) scale(.985);transform-origin:top center;
  transition:height .52s var(--ease-desliza),opacity .3s var(--ease),transform .42s var(--ease)}
.preview.is-on .preview__panel{opacity:1;transform:none}

.pv{position:absolute;inset:0;padding:26px 28px 22px;
  opacity:0;transform:translate3d(var(--dx,0),var(--dy,9px),0);pointer-events:none;
  transition:opacity .34s var(--ease-desliza),transform .52s var(--ease-desliza)}
.pv.is-active{opacity:1;transform:none;pointer-events:auto}
.pv__eyebrow{margin:0 0 18px;font-weight:500;font-size:12px;letter-spacing:.15em;
  text-transform:uppercase;color:var(--fg-soft)}
.pv__grid{display:grid;gap:10px}
.pv__grid--3{grid-template-columns:repeat(3,1fr)}
.pv__grid--4{grid-template-columns:repeat(4,1fr)}
.pv__grid article{padding:14px 15px;border-radius:12px;
  background:rgba(228,240,255,.05);border:1px solid rgba(228,240,255,.09);
  transition:background .3s var(--ease-soft),border-color .3s var(--ease-soft)}
.pv__grid article:hover{background:rgba(228,240,255,.09);border-color:rgba(102,168,255,.34)}
.pv h4{margin:0 0 5px;font-family:var(--display);font-weight:600;font-size:15px;
  letter-spacing:-.01em;color:var(--azul-050);line-height:1.24}
.pv p{margin:0;font-size:13.5px;line-height:1.45;color:#93A7C4}

.pv__pasos{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.pv__pasos li{padding:14px 15px;border-radius:12px;
  background:rgba(228,240,255,.05);border:1px solid rgba(228,240,255,.09)}
.pv__pasos span{display:block;margin-bottom:9px;font-weight:500;font-size:11.5px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--fg-soft)}

.pv__casos{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.pv__caso{display:flex;align-items:center;gap:12px;padding:10px;border-radius:12px;text-decoration:none;
  background:rgba(228,240,255,.05);border:1px solid rgba(228,240,255,.09);
  transition:background .3s var(--ease-soft),border-color .3s var(--ease-soft)}
.pv__caso:hover{background:rgba(228,240,255,.09);border-color:rgba(102,168,255,.34)}
.pv__tile{flex:none;height:46px;aspect-ratio:var(--ar,27/20);border-radius:8px;overflow:hidden;
  background:var(--tile);border:1px solid rgba(228,240,255,.12)}
.pv__tile img{width:100%;height:100%;object-fit:cover}
.pv__caso-txt{min-width:0;display:flex;flex-direction:column;gap:2px}
.pv__caso-txt b{font-family:var(--display);font-weight:600;font-size:14px;color:var(--azul-050);
  letter-spacing:-.01em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pv__caso-txt i{font-style:normal;font-size:12px;color:var(--fg-soft);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.pv__cta{display:inline-flex;align-items:center;gap:7px;margin-top:18px;
  font-weight:500;font-size:13.5px;text-decoration:none;color:var(--azul-050)}
.pv__cta::after{content:"→";transition:transform .3s var(--ease)}
.pv__cta:hover::after{transform:translateX(4px)}

@media (prefers-reduced-motion:reduce){
  .preview__panel,.pv{transition-duration:.01ms}
}

/* ---------- hero ---------- */
.hero{position:relative;height:var(--alto-hero)}
.hero__stage{position:relative;height:100svh;overflow:hidden;background:var(--tinta)}

.hero__media{position:absolute;inset:0}
.hero__poster,.hero__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero__video{opacity:0;transition:opacity .8s var(--ease-soft);transform:translateZ(0)}
.hero__video.is-on{opacity:1}
.hero__scrim{position:absolute;inset:0;
  background:
    radial-gradient(112% 82% at 50% 46%, rgba(5,7,11,.30) 0%, rgba(5,7,11,.19) 42%, rgba(5,7,11,.05) 78%, rgba(5,7,11,0) 100%),
    linear-gradient(to bottom, rgba(5,7,11,.26) 0%, rgba(5,7,11,.02) 30%, rgba(5,7,11,.08) 62%, rgba(5,7,11,.46) 100%)}

/* Velo que sigue el brillo real del metraje: el recorrido acaba casi blanco y el
   titular es blanco. Las opacidades salen de medir la luminancia cada medio segundo. */
.hero__veil{position:absolute;inset:0;background:var(--tinta);opacity:0;pointer-events:none}

.hero__content{position:relative;height:100%;display:flex;flex-direction:column;justify-content:center;
  align-items:center;text-align:center;gap:clamp(18px,2.6vh,34px);
  padding:0 var(--pad);max-width:min(1420px,100%);margin:0 auto}

/* firma: simbolo + nombre */
.signature{display:flex;align-items:center;justify-content:center;gap:14px}
.signature__mark{display:block;width:auto;height:clamp(72px,20vh,232px);flex:none;
  clip-path:polygon(-40% 0%,-40% 0%,-20% 100%,-20% 100%);
  transition:clip-path 1.05s var(--ease)}
.signature__mark svg,.signature__mark canvas{height:100%;width:auto;display:block;
  filter:drop-shadow(0 4px 44px rgba(5,7,11,.6))}
.signature__mark svg{fill:var(--azul-050)}
/* El lienzo solo aparece cuando ha pintado su primer fotograma. Si algo falla,
   se queda el SVG plano y nadie se entera. */
.signature__mark canvas{display:none}
.signature__mark.is-3d svg{display:none}
.signature__mark.is-3d canvas{display:block}

.hero__title{margin:0;font-family:var(--display);font-weight:600;
  font-size:clamp(32px,7vw,96px);line-height:1.02;letter-spacing:-.032em;
  min-height:2.04em;                      /* reserva dos lineas: la frase rota sin dar saltos */
  color:#F4F9FF;
  opacity:0;transform:translateY(18px);transition:opacity .95s var(--ease) .24s,transform .95s var(--ease) .24s}

/* El degradado va en cada tramo, no en el h1. Si va en el padre, Safari pierde el
   texto recortado en cuanto un hijo recibe opacity o transform (la rotacion). */
.hero__lead,.hero__rot{
  background-image:linear-gradient(180deg,#FFFFFF 0%,#EAF3FF 42%,#B9D2F0 100%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent}
@supports not ((-webkit-background-clip:text) or (background-clip:text)){
  .hero__lead,.hero__rot,.s__title{-webkit-text-fill-color:#F4F9FF;color:#F4F9FF}
}
.hero__rot.is-out{opacity:0;transition:opacity .3s var(--ease)}
@keyframes rotIn{from{opacity:0}to{opacity:1}}
.hero__rot.anim{animation:rotIn .5s var(--ease) both}

.hero__lede{margin:0;max-width:58ch;color:#DCE9FA;font-size:clamp(15px,1.42vw,20px);line-height:1.6;
  text-wrap:balance;
  /* El hero ya no lleva velo fuerte: la sombra es lo que sostiene este texto cuando
     cae sobre la banda clara del degradado. En el h1 no se puede poner, porque su
     relleno es transparente con background-clip y la sombra asomaria por detras. */
  text-shadow:0 1px 20px rgba(5,7,11,.72),0 1px 3px rgba(5,7,11,.5);
  opacity:0;transform:translateY(14px);transition:opacity .9s var(--ease) .5s,transform .9s var(--ease) .5s}

.hero__actions{display:flex;flex-direction:column;gap:14px;align-items:center;
  opacity:0;transform:translateY(14px);transition:opacity .9s var(--ease) .64s,transform .9s var(--ease) .64s}
/* negro, con el mismo filo y reflejo que el boton de la capsula */
.btn{display:inline-flex;align-items:center;gap:10px;text-decoration:none;
  background:#000;color:#fff;font-weight:500;font-size:16px;
  padding:14px 26px;border-radius:999px;border:1px solid rgba(255,255,255,.10);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10),0 0 0 0 rgba(228,240,255,0);
  transition:background .35s var(--ease-soft),box-shadow .5s var(--ease-soft),transform .35s var(--ease-soft)}
.btn:hover{background:#15181F;box-shadow:0 0 0 7px rgba(228,240,255,.07);transform:translateY(-1px)}

.is-ready .signature__mark{clip-path:polygon(-40% 0%,170% 0%,190% 100%,-20% 100%)}
.is-ready .hero__lede,.is-ready .hero__actions,.is-ready .hero__title{opacity:1;transform:none}



/* ============ cinta de tecnologias ============ */
.marquee{position:relative;z-index:1;background:rgba(6,11,31,.24);color:var(--fg);
  /* la cinta es una banda, no una seccion: lleva la mitad del ritmo */
  padding:calc(var(--ritmo) / 2) 0;border-block:1px solid rgba(228,240,255,.08);overflow:hidden}
.marquee__label{margin:0 var(--pad) clamp(20px,2.6vh,30px);text-align:center;
  font-family:var(--texto);font-weight:500;font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--fg-soft)}
.marquee__viewport{display:flex;width:max-content;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 9%,#000 91%,transparent 100%);
          mask-image:linear-gradient(90deg,transparent 0,#000 9%,#000 91%,transparent 100%)}
.marquee__track{display:flex;align-items:center;gap:clamp(34px,4.6vw,74px);
  list-style:none;margin:0;padding:0 clamp(17px,2.3vw,37px);
  animation:desfile 34s linear infinite;will-change:transform}
.marquee__track li{font-family:var(--display);font-weight:500;
  font-size:clamp(19px,2.1vw,29px);letter-spacing:-.01em;color:#B7C8DF;white-space:nowrap;
  transition:color .4s var(--ease-soft)}
.marquee:hover .marquee__track{animation-play-state:paused}
.marquee__track li:hover{color:var(--azul-050)}
@keyframes desfile{from{transform:translateX(0)}to{transform:translateX(-100%)}}

/* nada se mueve en una pestana oculta ni fuera de pantalla */
body.paused *,body.paused *::before,body.paused *::after{animation-play-state:paused!important}
@media (prefers-reduced-motion:reduce){
  .marquee__track{animation:none}
  .marquee__viewport{width:100%;overflow-x:auto}
}

/* ============ secciones ============ */
.s{position:relative;z-index:1;padding:var(--ritmo) var(--pad)}
.s+.s,.marquee+.s{border-top:1px solid rgba(228,240,255,.07)}
/* Ninguna seccion trae color propio: las tres variantes solo son velos de distinta
   densidad sobre el mismo azul, para que el scroll tenga ritmo sin cortar el fondo. */
.s--hueso{background:linear-gradient(180deg,rgba(228,240,255,.03) 0%,rgba(6,11,31,.10) 100%);color:var(--fg)}
.s--tinta{background:rgba(6,11,31,.26);color:var(--fg)}
.s--cierre{background:linear-gradient(180deg,rgba(6,11,31,.30) 0%,rgba(11,23,64,.52) 100%);color:var(--fg)}
.s__in{max-width:var(--banda);margin:0 auto}

/* Cabecera de seccion: el simbolo, el numero, el titular y la entradilla, centrados
   y con el mismo aire en todas. Es lo que da el ritmo: cada bloque abre igual. */
.s__obj{position:relative;display:flex;justify-content:center;margin-bottom:clamp(16px,2.2vh,26px)}
/* El simbolo es lo unico que emite luz en la seccion: el halo hace que se note que
   esta encendido y devuelve algo de azul a una base que es casi plana. */
.s__obj::before{content:"";position:absolute;left:50%;top:50%;pointer-events:none;
  width:min(620px,96%);height:300px;transform:translate(-50%,-50%);
  background:radial-gradient(50% 50% at 50% 50%,
    rgba(80,148,240,.26) 0%, rgba(66,126,217,.10) 46%, rgba(66,126,217,0) 72%)}
.marca-obj{position:relative;height:clamp(104px,10.5vw,158px);width:auto;display:block;
  filter:drop-shadow(0 0 22px rgba(120,180,255,.34)) drop-shadow(0 10px 32px rgba(5,7,11,.6))}
.s__cab{text-align:center;margin-bottom:clamp(34px,4.6vh,58px)}
.s__cab .s__num{margin-bottom:14px}
.s__cab .s__title{max-width:22ch;margin:0 auto}
.s__cab .s__lede{max-width:58ch;margin:clamp(14px,1.8vh,20px) auto 0}
.s__in--estrecho{max-width:760px;text-align:center}

.s__num{margin:0 0 18px;font-family:var(--texto);font-weight:500;font-size:12px;letter-spacing:.15em;text-transform:uppercase}
.s__num{color:var(--fg-soft)}

.s__title{margin:0 0 clamp(30px,4.4vh,52px);font-family:var(--display);font-weight:600;
  background-image:linear-gradient(180deg,#FFFFFF 0%,#EEF6FF 46%,#C6DCF6 100%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
  font-size:clamp(27px,3.9vw,50px);line-height:1.1;letter-spacing:-.026em;max-width:20ch;text-wrap:balance}
.s__in--estrecho .s__title{max-width:none;margin-inline:auto}
.s__title--grande{font-size:clamp(32px,5.2vw,68px)}
.s__lede{margin:-22px 0 clamp(30px,4vh,48px);max-width:56ch;font-size:clamp(15px,1.3vw,18px);line-height:1.62}
.s__lede{color:#C0D3EC}
.s__in--estrecho .s__lede{margin-inline:auto}
.s__foot{margin:clamp(30px,4vh,48px) 0 0;max-width:62ch;font-size:16px;line-height:1.62;color:#C0D3EC}
.s__foot b{color:var(--azul-050);font-weight:600}

.grid{display:grid;gap:clamp(14px,1.6vw,22px)}
.grid--2{grid-template-columns:repeat(auto-fit,minmax(min(440px,100%),1fr))}
.grid--4{grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}

/* ---------- entrada por scroll: el texto se despeja ----------
   .reveal anima a sus hijos, escalonados 100ms; .reveal-uno se anima a si mismo.
   El estado final es filter:none, no blur(0): un blur(0) deja al elemento en su
   propia capa para siempre. Sin will-change a proposito: promocionaria cuarenta
   bloques a capa propia al cargar, y el compositor ya lo hace al arrancar cada
   transicion, que es cuando hace falta. */
.reveal>*,.reveal-uno{opacity:0;transform:translateY(20px);filter:blur(10px);
  transition:opacity .7s var(--ease-desliza),transform .7s var(--ease-desliza),filter .7s var(--ease-desliza)}
.reveal.in>*,.reveal-uno.in{opacity:1;transform:none;filter:none}
.reveal.in>*:nth-child(2){transition-delay:.1s}
.reveal.in>*:nth-child(3){transition-delay:.2s}
.reveal.in>*:nth-child(4){transition-delay:.3s}
.reveal.in>*:nth-child(5){transition-delay:.4s}
.reveal.in>*:nth-child(6){transition-delay:.5s}
.reveal.in>*:nth-child(7){transition-delay:.6s}
.reveal.in>*:nth-child(8){transition-delay:.7s}
.reveal.done>*,.reveal-uno.done{transition-delay:0s!important}

/* 01 sintomas */
.sint{padding:26px 24px;border-radius:14px;
  background:linear-gradient(180deg,rgba(228,240,255,.075),rgba(228,240,255,.035));
  border:1px solid rgba(228,240,255,.13);box-shadow:inset 0 1px 0 rgba(228,240,255,.13)}
.sint h3{margin:0 0 10px;font-family:var(--display);font-weight:600;font-size:19px;line-height:1.22;letter-spacing:-.015em;color:var(--azul-050)}
.sint p{margin:0;font-size:15.5px;line-height:1.58;color:#B9CCE6}

/* 02 apps */
.app{padding:26px 24px;border-radius:14px;
  background:linear-gradient(180deg,rgba(228,240,255,.075),rgba(228,240,255,.035));
  border:1px solid rgba(228,240,255,.13);box-shadow:inset 0 1px 0 rgba(228,240,255,.13)}
.app h3{margin:0 0 14px;font-family:var(--display);font-weight:600;font-size:20px;letter-spacing:-.015em;color:var(--azul-050)}
.app p{margin:0 0 8px;font-size:15px;line-height:1.55}
.app p:last-child{margin-bottom:0}
.app__ab{color:#7E93B2}
.app__ab b{color:#93A7C4;font-weight:500}
.app__ds{color:#C6DBF5}
.app__ds b{color:var(--azul-050);font-weight:500}

/* 03 pasos */
.pasos{list-style:none;margin:0;padding:0;display:grid;gap:0;
  grid-template-columns:repeat(auto-fit,minmax(232px,1fr))}
.paso{position:relative;padding:28px 22px 26px 0}
.paso::before{content:"";position:absolute;left:0;top:0;width:100%;height:2px;background:rgba(228,240,255,.16)}
.paso::after{content:"";position:absolute;left:0;top:0;width:34px;height:2px;background:rgba(228,240,255,.5)}
.paso__t{display:block;margin-bottom:12px;font-family:var(--texto);font-weight:500;font-size:12px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--fg-soft)}
.paso h3{margin:0 0 8px;font-family:var(--display);font-weight:600;font-size:19px;letter-spacing:-.015em;color:var(--azul-050)}
.paso p{margin:0;font-size:15px;line-height:1.56;color:#C0D3EC;max-width:32ch}
/* paso 1: la foto, con un aro de cristal fino, encima del texto */
.paso__foto{display:block;width:96px;height:96px;border-radius:50%;margin:2px 0 18px;
  background:rgba(228,240,255,.06);
  box-shadow:0 0 0 1px rgba(255,255,255,.16),0 0 0 7px rgba(228,240,255,.05),0 18px 34px -16px rgba(0,0,0,.7)}

/* ---------- 04 en escritorio: dos monitores apilados que se abren con el scroll ----------
   .pila es el recorrido (220vh) y .pila__escena se queda pegada mientras dura. Las
   dos tarjetas arrancan centradas, una detras de la otra, y main.js mueve --x, --k,
   --dy y --o con el progreso del scroll: se separan hasta quedar una al lado de la
   otra y el texto de encima se apaga en el primer tramo. Por debajo de 1081px no
   existe: se queda el acordeon de siempre. */
.pila{display:none}
@media (min-width:1081px){
  .pila{display:block;height:220vh;margin-bottom:clamp(40px,6vh,72px)}
  .pila__escena{position:sticky;top:0;height:100svh}
  .pila__tarjeta{position:absolute;left:50%;top:50%;width:min(46vw,760px);margin:0;
    transform:translate(-50%,-50%) translate(var(--x,0px),var(--dy,0px)) scale(var(--k,1));
    border-radius:18px;overflow:hidden;background:#0B0D12;
    box-shadow:0 0 0 1px rgba(255,255,255,.10),0 40px 80px -30px rgba(0,0,0,.85)}
  .pila__tarjeta img{display:block;width:100%;height:auto}
  .pila__tarjeta--a{z-index:2}
  .pila__tarjeta--b{z-index:1;--k:.93;--dy:-22px}
  .pila__txt{position:absolute;inset:0;margin:0;display:flex;flex-direction:column;justify-content:flex-end;gap:5px;
    padding:28px 30px;color:#fff;opacity:var(--o,1);
    background:linear-gradient(180deg,rgba(5,7,11,0) 42%,rgba(5,7,11,.78) 100%)}
  .pila__txt b{font-family:var(--display);font-weight:600;font-size:clamp(22px,2vw,30px);letter-spacing:-.02em;line-height:1.1}
  .pila__txt i{font-style:normal;font-size:15px;color:#DCE9FA}
  .pila__estado{display:inline-flex;align-items:center;gap:7px;margin-top:4px;font-size:12.5px;font-weight:500;color:#DCE9FA}
  .pila__estado::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--c)}
}
/* con "reducir movimiento": ya separadas, con su texto, y sin recorrido */
@media (min-width:1081px) and (prefers-reduced-motion:reduce){
  .pila{height:auto}
  .pila__escena{position:static;height:auto;display:grid;grid-template-columns:1fr 1fr;gap:24px}
  .pila__tarjeta{position:relative;left:auto;top:auto;width:auto;transform:none}
}

/* 04 casos: dos filas que se abren ----------------------------------------
   Antes eran dos bandas enormes con la foto y todo el detalle siempre visible.
   Ahora la seccion es una lista: el logo, el nombre y poco mas; el detalle vive
   dentro y se abre al pulsar. La casilla del logo toma la proporcion real de
   cada imagen con --ar, asi que ninguna se recorta: la de Prana es 1400x429 y
   la de Fertiorganicos 701x593, y en una casilla fija una de las dos siempre
   salia mutilada. */
.casos{border-top:1px solid rgba(228,240,255,.11)}
.caso{border-bottom:1px solid rgba(228,240,255,.11)}
.caso__fila{margin:0;font-weight:inherit;font-size:inherit}
.caso__btn{display:grid;width:100%;align-items:center;
  grid-template-columns:auto 1fr auto auto;gap:clamp(14px,2.1vw,26px);
  padding:clamp(17px,2.2vh,24px) 0;
  background:none;border:0;color:inherit;font:inherit;text-align:left;cursor:pointer;
  transition:opacity .3s var(--ease-soft)}
.caso__btn:hover{opacity:.82}
.caso__marca{height:clamp(38px,4.2vw,50px);aspect-ratio:var(--ar);
  background:var(--logo-bg);border-radius:9px;overflow:hidden;
  border:1px solid rgba(228,240,255,.12)}
.caso__marca img{width:100%;height:100%;object-fit:cover}
.caso__id{min-width:0;display:flex;flex-direction:column;gap:3px}
.caso__id b{font-family:var(--display);font-weight:600;letter-spacing:-.022em;color:var(--azul-050);
  font-size:clamp(18px,1.6vw,23px);line-height:1.16}
.caso__id i{font-style:normal;font-size:14px;color:var(--fg-soft)}
.caso__estado{display:inline-flex;align-items:center;gap:7px;white-space:nowrap;
  font-size:12.5px;font-weight:500;color:var(--fg-soft)}
.caso__estado::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--c)}
.caso__signo{position:relative;width:20px;height:20px}
.caso__signo::before,.caso__signo::after{content:"";position:absolute;left:50%;top:50%;
  background:var(--azul-200);border-radius:2px;
  transition:transform .45s var(--ease-desliza),opacity .3s var(--ease)}
.caso__signo::before{width:15px;height:1.5px;transform:translate(-50%,-50%)}
.caso__signo::after{width:1.5px;height:15px;transform:translate(-50%,-50%)}
.caso.is-open .caso__signo::after{transform:translate(-50%,-50%) rotate(90deg);opacity:0}

/* La apertura anima grid-template-rows de 0fr a 1fr: se puede transicionar y no
   hace falta medir la altura desde JS. */
.caso__cuerpo{display:grid;grid-template-rows:0fr;opacity:0;
  transition:grid-template-rows .5s var(--ease-desliza),opacity .34s var(--ease)}
.caso.is-open .caso__cuerpo{grid-template-rows:1fr;opacity:1}
.caso__dentro{overflow:hidden}
.caso__prob{margin:0 0 16px;max-width:62ch;color:#C0D3EC;line-height:1.58;
  font-size:clamp(15px,1.2vw,17px)}
.caso__hechos{list-style:none;margin:0 0 18px;padding:0;display:grid;gap:8px;max-width:62ch}
.caso__hechos li{position:relative;padding-left:22px;font-size:15px;line-height:1.5;color:#B9CCE6}
.caso__hechos li::before{content:"";position:absolute;left:2px;top:.58em;
  width:9px;height:2px;border-radius:2px;background:var(--c)}
.caso__dato{margin:0;padding-bottom:26px;display:flex;align-items:baseline;gap:11px}
.caso__dato b{font-family:var(--display);font-weight:600;font-size:26px;color:var(--azul-050)}
.caso__dato span{font-weight:500;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--fg-soft)}

@media (max-width:720px){
  /* en estrecho el estado baja bajo el nombre y el logo ocupa las dos filas */
  .caso__btn{grid-template-columns:auto 1fr auto;gap:14px}
  .caso__marca{grid-column:1;grid-row:1/3}
  .caso__id{grid-column:2;grid-row:1}
  .caso__estado{grid-column:2;grid-row:2;margin-top:4px}
  .caso__signo{grid-column:3;grid-row:1/3}
  .caso__id b{font-size:17px}
  .caso__id i{font-size:13px}
}

/* 05 objeciones */
.obj{padding:28px 26px;border-radius:14px;
  background:linear-gradient(180deg,rgba(228,240,255,.075),rgba(228,240,255,.035));
  border:1px solid rgba(228,240,255,.13);box-shadow:inset 0 1px 0 rgba(228,240,255,.13)}
.obj h3{margin:0 0 10px;font-family:var(--display);font-weight:600;font-size:21px;line-height:1.2;letter-spacing:-.018em;color:var(--azul-050)}
.obj p{margin:0;font-size:15.5px;line-height:1.6;color:#B9CCE6}

/* 06 contacto */
.cta-fila{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-bottom:clamp(34px,5vh,54px)}
/* whatsapp y correo: negros como el resto; el de correo solo baja un punto la letra */
.btn--ghost{font-weight:500;font-size:15px}

.form{display:grid;gap:14px;grid-template-columns:1fr 1fr;text-align:left;
  padding:clamp(22px,3vw,34px);border-radius:18px;
  background:rgba(228,240,255,.05);border:1px solid rgba(228,240,255,.13);
  backdrop-filter:blur(16px) saturate(140%);-webkit-backdrop-filter:blur(16px) saturate(140%)}
.campo{display:flex;flex-direction:column;gap:7px}
.campo--ancho{grid-column:1/-1}
.campo span{font-family:var(--texto);font-weight:500;font-size:12px;letter-spacing:.13em;text-transform:uppercase;color:var(--fg-soft)}
.campo input,.campo textarea{width:100%;font:inherit;font-size:16px;color:var(--fg);
  background:rgba(5,7,11,.42);border:1px solid rgba(228,240,255,.16);border-radius:10px;padding:12px 14px;
  transition:border-color .3s var(--ease-soft),background .3s var(--ease-soft)}
.campo textarea{resize:vertical;min-height:96px}
.campo input:focus,.campo textarea:focus{outline:none;border-color:var(--azul-600);background:rgba(5,7,11,.62)}
.form .btn{grid-column:1/-1;justify-self:start}
/* trampa antibots: fuera de la vista pero no display:none, que algunos bots detectan */
.trampa{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden;margin:0}
.btn[disabled]{opacity:.55;pointer-events:none}
.form__nota{grid-column:1/-1;margin:0;font-family:var(--texto);font-size:13.5px;color:var(--fg-soft);min-height:1.2em}
.form__nota[data-estado="error"]{color:#FF8A8A}
.form__nota[data-estado="ok"]{color:#7BE3A8}

/* ---------- el nombre, gigante y desenfocado, detras del contacto ----------
   Va en una caja aparte que recorta, en vez de overflow:hidden en la seccion,
   para no cortar el halo del simbolo. Cortado por el borde de abajo a proposito. */
.wordmark-caja{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.s--cierre .s__in{position:relative;z-index:1}
.wordmark{position:absolute;left:50%;bottom:-.34em;margin:0;
  transform:translateX(-50%) translateY(var(--wy,0px));
  /* el tamano lo pone main.js midiendo el texto, para que el nombre entero ocupe
     el 96% del ancho; este es el valor de arranque por si el script no llega */
  font-family:var(--display);font-weight:600;font-size:9.4vw;line-height:1;
  letter-spacing:-.03em;white-space:nowrap;color:#F4F9FF;
  opacity:.5;filter:blur(6px);user-select:none}
/* la seccion de contacto deja sitio abajo para el nombre */
.s--cierre{padding-bottom:calc(var(--ritmo) + 5vw)}

[data-pendiente],[data-pendiente-wa]{position:relative}

@media (max-width:640px){
  .form{grid-template-columns:1fr}
  .paso{padding-right:0}
}

/* ---------- hero en pantallas pequenas ----------
   El video corre tambien aqui: lo que cambia es la colocacion. El titular baja al
   tercio de abajo, donde el recorte vertical tiene el degradado mas oscuro, y el
   velo pasa a su propia tabla (VELO_V en main.js). */
@media (max-width:720px),
       (orientation:portrait) and (max-width:1024px),
       (orientation:portrait) and (pointer:coarse),
       (orientation:landscape) and (pointer:coarse) and (max-height:560px){
  .hero__scrim{background:
    linear-gradient(180deg, rgba(5,7,11,.36) 0%, rgba(5,7,11,.26) 46%, rgba(5,7,11,.56) 100%)}
  .hero__content{justify-content:flex-end;padding-bottom:clamp(40px,8vh,80px)}
  .hero__title{max-width:14ch}
}

/* pantallas muy bajas (movil en horizontal): el simbolo cede altura al texto */
@media (max-height:560px){
  .signature__mark{height:clamp(48px,11vh,74px)}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition-duration:.01ms!important;transition-delay:0ms!important}
  .signature__mark{clip-path:none}
  /* ni se descarga (main.js), pero por si acaso tampoco se pinta */
  .hero__video{display:none}
  /* el texto entra directo, sin desenfoque ni desplazamiento */
  .reveal>*,.reveal-uno{opacity:1;transform:none;filter:none}
  .wordmark{transform:translateX(-50%)}
  .hero__scrim{background:
    linear-gradient(180deg, rgba(5,7,11,.36) 0%, rgba(5,7,11,.26) 46%, rgba(5,7,11,.56) 100%)}
}

@media (max-width:1100px){.hero__title{min-height:3.06em}}
@media (max-width:720px){.hero__title{min-height:4.08em}}

/* ---------- movil en horizontal (y ventanas de escritorio muy bajas) ----------
   Aqui sobra ancho y falta alto. El tope de 14ch del titular, que en vertical
   viene bien, en horizontal lo parte en cuatro lineas y saca el hero de pantalla.
   Va al final del archivo a proposito: tiene que ganar a las reservas de altura
   de mas abajo, que estan pensadas para pantallas estrechas. */
@media (orientation:landscape) and (max-height:600px){
  .hero__title{font-size:clamp(28px,4.2vw,40px);max-width:none;min-height:2.04em}
  .hero__lede{font-size:15px;line-height:1.5}
  .hero__content{gap:12px}
}