/* ============================================================
   INSTALNET COMUNICACIONES — Sitio institucional
   Navy + Azul #0D3C95 + Teal #3CBEB4 · Montserrat MAYÚSCULAS 800/900
   Firma: cortes diagonales, tipografía masiva, listas numeradas.
   ============================================================ */
:root{
  --blue:#0D3C95; --blue-hi:#1450BE; --blue-dp:#0A2E72;
  --blue-card:#11439F; --blue-card-hi:#164BB0;   /* tarjetas opacas sobre la seccion azul */
  --teal:#3CBEB4; --teal-hi:#5FD6CC;
  --white:#FFFFFF;
  --bg:#06152E; --bg-2:#0A2148; --bg-3:#0E2A5C;   /* navy derivado del azul de marca #0D3C95 */
  --mut:#9DAECD; --mut2:#7184AD;
  --line:rgba(255,255,255,.12); --line-2:rgba(255,255,255,.07);
  /* Curvas: --ease es ease-out fuerte (entradas, hover, feedback: arranca rapido, asienta suave).
     --ease-io es solo para lo que se mueve DENTRO de la pantalla (acordeones). Una sola familia. */
  --ease:cubic-bezier(.23,1,.32,1);
  --ease-io:cubic-bezier(.77,0,.175,1);
  --err:#FF8A80;
  --maxw:1360px; --pad:clamp(20px,4.5vw,64px);

  /* ---- Escala tipografica (por ROL, no por capricho) ----
     Antes habia 27 tamanos distintos y 5 rampas de clamp para h2 del mismo rol. */
  --fs-micro:11px;                       /* labels flotados, sufijos, scroll cue */
  --fs-label:12px;                       /* eyebrows, claves, titulos de columna */
  --fs-body-s:14px;
  --fs-body:15px;
  --fs-body-l:16px;
  --fs-lead:clamp(15px,1.15vw,17px);
  --fs-h3:clamp(18px,1.8vw,23px);
  --fs-h2:clamp(27px,3.9vw,54px);        /* todos los h2 de seccion */
  --fs-h2-xl:clamp(30px,5vw,72px);       /* solo el CTA full-bleed */

  /* ---- Radios ---- */
  --r-xs:2px; --r-sm:4px; --r-md:6px; --r-pill:999px;

  /* ---- Tracking: en mayusculas, cuanto mas chico el texto mas tracking.
     Antes habia 14 valores distintos elegidos a ojo. ---- */
  --ls-micro:.2em;      /* 11-12px mayusculas: eyebrows, claves */
  --ls-ui:.08em;        /* 13-14px mayusculas: botones, nav, labels */
  --ls-head:-.01em;     /* titulos */
  --ls-display:-.02em;  /* display: h1, cifras grandes */

  /* ---- Blancos sobre el azul de marca ---- */
  --on-blue:rgba(255,255,255,.86);
  --on-blue-2:rgba(255,255,255,.66);
  --on-blue-line:rgba(255,255,255,.22);
}
/* ============================================================
   TIPOGRAFIA — Montserrat variable, alojada en el propio dominio.
   Se sirve desde /assets/fonts en lugar de Google Fonts para que:
   · no haya salto de layout (FOUT) ni peticion a un tercero,
   · el archivo llegue con preload junto al CSS, antes del primer pintado,
   · no se filtre la IP del visitante a un servicio externo.
   Es una sola variable de 400 a 900: cubre todos los pesos del sitio.
   El sitio no usa cursivas (el <i> es solo acento de color), asi que la
   italica no se descarga.
   ============================================================ */
@font-face{
  font-family:'Montserrat';
  font-style:normal;
  font-weight:400 900;
  font-display:swap;
  src:url('fonts/montserrat-latin-normal.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Montserrat';
  font-style:normal;
  font-weight:400 900;
  font-display:swap;
  src:url('fonts/montserrat-latin-ext-normal.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
/* Respaldo con metricas ajustadas: Montserrat mide 110% del ancho de Arial al
   mismo cuerpo. Solo se ve si el woff2 tarda o falla, pero evita el corrimiento. */
@font-face{
  font-family:'Montserrat fallback';
  src:local('Arial'),local('Helvetica Neue'),local('Liberation Sans'),local('Arimo');
  size-adjust:110%;
  ascent-override:88%;
  descent-override:23%;
  line-gap-override:0%;
}
*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%;
  /* el nav es fixed: sin esto el foco por teclado y los #hash quedan tapados debajo de el */
  scroll-padding-top:96px;
  /* al bloquear el scroll con el menu abierto la barra desaparece; el gutter evita el salto lateral */
  scrollbar-gutter:stable}
body{font-family:'Montserrat','Montserrat fallback',-apple-system,Segoe UI,Roboto,sans-serif;background:var(--bg);color:var(--white);
  line-height:1.55;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a{color:inherit;text-decoration:none}
/* sin zoom por doble toque sobre controles: el tap responde al instante y el doble tap no amplía la pagina */
a,button,label,summary,[role="button"]{touch-action:manipulation}
img{max-width:100%;display:block}
::selection{background:var(--teal);color:var(--bg)}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-stopped{overflow:hidden}
/* Bloqueo de scroll del menu mobile. Es un candado, no un parche de desborde. Lenis ya
   pone .lenis-stopped; esta clase cubre el caso sin Lenis (reduced motion / vendor caido). */
html.menu-open{overflow:hidden}
/* enlace de salto: primer tab de cada pagina */
.skip{position:fixed;left:var(--pad);top:10px;z-index:200;padding:12px 18px;background:var(--teal);color:var(--bg);
  font-size:13px;font-weight:700;letter-spacing:var(--ls-ui);text-transform:uppercase;border-radius:var(--r-sm);
  transform:translateY(-200%);transition:transform .2s var(--ease)}
.skip:focus-visible{transform:none}
main:focus{outline:none}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad)}

/* ---------- Tipografía ---------- */
.eyebrow{display:inline-block;font-size:var(--fs-label);font-weight:700;letter-spacing:var(--ls-micro);text-transform:uppercase;color:var(--teal)}
.eyebrow.mut{color:var(--mut)}
h1,h2,h3{font-weight:800;letter-spacing:var(--ls-head);line-height:1.04;
  /* red de seguridad: una palabra larga (IMPLEMENTACIONES) se parte antes que salirse del viewport */
  overflow-wrap:break-word}
/* En este sistema <i> es SIEMPRE el acento de color de un titular, nunca cursiva.
   Estaba resuelto con diez reglas por seccion y la pagina 404 se escapaba de las
   diez: se renderizaba en italica sintetica. Una regla, sin excepciones. */
h1 i,h2 i,h3 i,blockquote i,.stat .n i,.metric .n i{font-style:normal;color:var(--teal)}
/* sobre el azul de marca el teal base no llega a 4.5:1 */
.blue-sec h2 i,.band h2 i{color:var(--teal-hi)}
.display{font-weight:900;letter-spacing:var(--ls-display);line-height:.98}
.huge{font-size:clamp(40px,7.4vw,110px)}
.big{font-size:clamp(30px,4.6vw,68px)}
.mid{font-size:clamp(24px,3vw,44px)}
.lead{font-size:var(--fs-lead);color:var(--mut);font-weight:500;line-height:1.65;text-transform:none;letter-spacing:0}
/* evita líneas viudas (última palabra sola) de forma global */
.lead,.hero-sub,blockquote,h1,h2,h3,.about-copy h2,.diff-copy h2,.sim-copy h2,.contact-info h2{text-wrap:pretty}
blockquote{text-wrap:balance}

/* ---------- Botones (cuadrados + flecha ↘) ---------- */
.btn{display:inline-flex;align-items:center;gap:14px;font-family:inherit;font-weight:700;font-size:13px;
  letter-spacing:var(--ls-ui);text-transform:uppercase;padding:18px 26px;border-radius:var(--r-sm);cursor:pointer;border:1px solid transparent;
  transition:background .35s var(--ease),color .35s var(--ease),border-color .35s var(--ease),transform .35s var(--ease)}
.btn .ar{width:15px;height:15px;transition:transform .35s var(--ease)}
/* feedback de presion: tambien en touch, donde no existe el hover */
.btn:active{transform:scale(.97);transition-duration:.12s}
@media(hover:hover){.btn:hover .ar{transform:translate(3px,3px)}}
.btn-blue{background:var(--blue);color:#fff}
@media(hover:hover){.btn-blue:hover{background:var(--blue-hi)}}
.btn-teal{background:var(--teal);color:var(--bg)}
@media(hover:hover){.btn-teal:hover{background:var(--teal-hi)}}
.btn-ghost{background:transparent;border-color:var(--line);color:#fff}
@media(hover:hover){.btn-ghost:hover{border-color:var(--teal);color:var(--teal)}}
.btn-line{position:relative;display:inline-flex;align-items:center;gap:10px;font-weight:700;font-size:13px;letter-spacing:var(--ls-ui);text-transform:uppercase;
  padding-bottom:6px;border-bottom:1.5px solid var(--white);transition:color .3s var(--ease),border-color .3s var(--ease)}
.btn-line::after{content:"";position:absolute;left:0;right:0;top:50%;height:44px;transform:translateY(-50%)}
.btn-line .ar{width:14px;height:14px;transition:transform .3s var(--ease)}
@media(hover:hover){.btn-line:hover{color:var(--teal);border-color:var(--teal)}}
@media(hover:hover){.btn-line:hover .ar{transform:translate(3px,3px)}}

/* ============================================================
   NAV
   ============================================================ */
.nav{position:fixed;top:0;left:0;right:0;z-index:100;transition:background .5s var(--ease),border-color .5s var(--ease)}
.nav.scrolled{background:rgba(7,11,26,.82);backdrop-filter:blur(16px);border-bottom:1px solid var(--line-2)}
/* Hasta 1080px (nav con burger: celulares y tablets) el desenfoque se cambia por un fondo casi opaco. backdrop-filter
   obliga a re-rasterizar lo que hay detras del nav en cada cuadro de scroll, y en GPUs de gama media/baja es de lo
   primero que hace perder cuadros. Con .96 de opacidad la diferencia visual es imperceptible sobre el navy. */
@media(max-width:1080px){.nav.scrolled{background:rgba(7,11,26,.96);backdrop-filter:none}}
.nav-in{max-width:var(--maxw);margin:0 auto;padding:22px var(--pad);display:flex;align-items:center;justify-content:space-between;gap:24px}
.brand{display:inline-flex;align-items:center;
  /* area tactil de 44px sin agrandar el logo (34px) ni mover el nav */
  padding:5px 0;margin:-5px 0}
.brand-logo{height:34px;width:auto;display:block}
.nav-links{display:flex;align-items:center;gap:34px}
.nav-links a{position:relative;font-size:13px;font-weight:700;letter-spacing:var(--ls-ui);text-transform:uppercase;color:var(--white);transition:color .3s var(--ease)}
/* areas de 44px de alto para mouse/touch: el padding se compensa con margen negativo y el nav no crece */
.nav-links>a,.nav-links .has-sub>a{display:inline-flex;align-items:center;padding:12px 0;margin:-12px 0}
.nav-links a::after{content:"";position:absolute;left:0;bottom:6px;right:0;height:1.5px;background:var(--teal);transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease)}
@media(hover:hover){.nav-links a:hover{color:var(--teal)}}@media(hover:hover){.nav-links a:hover::after{transform:scaleX(1)}}
.burger{display:none;flex-direction:column;align-items:center;justify-content:center;gap:5px;width:44px;height:44px;padding:0;background:none;border:0;cursor:pointer;-webkit-tap-highlight-color:transparent}
.burger span{width:24px;height:2px;background:#fff;transition:transform .3s var(--ease),opacity .2s var(--ease);transform-origin:center}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0;transform:scaleX(.2)}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.burger[aria-expanded="true"]{position:relative;z-index:101}
.mobile-menu{position:fixed;inset:0;z-index:99;background:rgb(7,11,26);
  display:flex;flex-direction:column;justify-content:center;gap:6px;padding:0 var(--pad);overscroll-behavior:contain;
  transform:translateY(-100%);
  /* cerrado = fuera del arbol de foco y de accesibilidad; visibility espera a que termine la salida */
  visibility:hidden;transition:transform .45s var(--ease),visibility 0s linear .45s}
.mobile-menu.open{transform:translateY(0);visibility:visible;transition-delay:0s}
.mobile-menu a{font-size:34px;font-weight:900;text-transform:uppercase;letter-spacing:var(--ls-display);padding:10px 0}
.mobile-menu a span{display:inline-block;min-width:32px;margin-right:12px;color:var(--teal);font-size:14px;font-weight:700;letter-spacing:var(--ls-micro);vertical-align:middle}

/* ============================================================
   HERO
   ============================================================ */
.hero{position:relative;min-height:100svh;display:flex;align-items:center;background:var(--bg)}
.hero-media{position:absolute;top:0;right:0;bottom:0;width:52%;overflow:hidden;
  clip-path:polygon(14% 0,100% 0,100% 100%,0 100%)}
.hero-media .ph{position:absolute;inset:0;transform:scale(1.08);animation:kb 14s cubic-bezier(.22,.61,.36,1) forwards;
  /* El shorthand deja el JPG como fallback; image-set() sirve WebP a quien lo soporte.
     Si el navegador no entiende type(), la declaracion es invalida y cae sola al JPG. */
  background:url('hero-hq.jpg') 60% center/cover no-repeat;
  background-image:-webkit-image-set(url('hero-hq.webp') type('image/webp'),url('hero-hq.jpg') type('image/jpeg'));
  background-image:image-set(url('hero-hq.webp') type('image/webp'),url('hero-hq.jpg') type('image/jpeg'))}
/* Celular (<=560px): variante recortada de la misma foto (1000x941 centrada en el mismo 60% horizontal, ~105 KB en
   vez de ~205 KB). Con cover y una caja vertical solo se ve esa franja central, asi que el encuadre es identico.
   El JPG completo sigue de respaldo para navegadores sin image-set(type()). */
@media(max-width:560px){
  .hero-media .ph{
    background-image:-webkit-image-set(url('hero-m.webp') type('image/webp'),url('hero-hq.jpg') type('image/jpeg'));
    background-image:image-set(url('hero-m.webp') type('image/webp'),url('hero-hq.jpg') type('image/jpeg'))}
}
/* tinte navy de marca para integrar la foto a la paleta */
.hero-media .ph::before{content:"";position:absolute;inset:0;
  background:linear-gradient(110deg,var(--bg) 0%,rgba(6,21,46,.55) 30%,rgba(6,21,46,.15) 60%,transparent 100%)}
@keyframes kb{to{transform:scale(1)}}
.hero-media .scrim{position:absolute;inset:0;background:linear-gradient(90deg,var(--bg) 2%,transparent 32%)}
.hero-in{position:relative;z-index:3;width:100%;max-width:var(--maxw);margin:0 auto;padding:0 var(--pad)}
.hero-copy{max-width:760px;padding-top:90px}
.hero h1{font-size:clamp(34px,5.2vw,78px);font-weight:900;letter-spacing:var(--ls-display);line-height:1;margin-bottom:26px}
.hero-sub{font-size:clamp(16px,1.4vw,19px);color:var(--mut);max-width:440px;margin-bottom:38px;line-height:1.6}
.hero .actions{display:flex;gap:14px;flex-wrap:wrap}
/* ---- Entrada del hero: una vez por visita, es donde vive el presupuesto de "delight" ----
   Solo CSS: corre fuera del hilo principal mientras la pagina todavia carga y no depende de site.js.
   Fill `backwards`, no `both`: el estado final ya es el del CSS, y un fill hacia adelante le ganaria
   al opacity inline que pone el parallax en .scroll-cue.
   La foto entra con un barrido de clip-path que termina en el corte diagonal (el keyframe define
   solo el "from": el "to" es el clip-path de cada breakpoint). El copy sube escalonado detras. */
.hero-media{animation:hero-wipe 1.1s var(--ease) .05s backwards}
@keyframes hero-wipe{from{clip-path:polygon(100% 0,100% 0,100% 100%,100% 100%)}}
.hero-copy>*{animation:hero-rise .8s var(--ease) backwards;animation-delay:calc(.3s + var(--i,0) * 90ms)}
.hero h1{--i:0}.hero-sub{--i:1}.hero .actions{--i:2}
.scroll-cue{animation:hero-fade .6s var(--ease) 1s backwards}
@keyframes hero-rise{from{opacity:0;transform:translateY(24px)}}
@keyframes hero-fade{from{opacity:0}}
/* Parallax (site.js): la foto baja mas lento que la pagina. Le sobra un 12% arriba para que el
   desplazamiento nunca deje ver un hueco. Usa la propiedad `translate`, no `transform`, para no
   pisar el zoom (kb) ni la entrada, que viven en transform. */
.hero-media .ph{top:-12%}
.scroll-cue{position:absolute;left:var(--pad);bottom:30px;z-index:3;display:flex;align-items:center;gap:12px;
  font-size:var(--fs-micro);font-weight:700;letter-spacing:var(--ls-micro);text-transform:uppercase;color:var(--mut2)}
.scroll-cue .ln{width:44px;height:1px;background:var(--mut2);position:relative;overflow:hidden}
.scroll-cue .ln::after{content:"";position:absolute;inset:0;background:var(--teal);animation:cue 2.2s var(--ease) infinite}
@keyframes cue{0%{transform:translateX(-100%)}60%,100%{transform:translateX(100%)}}

/* ============================================================
   SECTION base
   ============================================================ */
.sec{padding:clamp(80px,11vw,150px) 0;position:relative}
.sec-eyebrow{margin-bottom:26px}
.diag-tag{display:inline-flex;align-items:center;gap:10px;font-size:var(--fs-label);font-weight:700;letter-spacing:var(--ls-micro);text-transform:uppercase;color:var(--teal);margin-bottom:26px}
.diag-tag::before{content:"";width:22px;height:2px;background:var(--teal)}

/* ---------- ABOUT ---------- */
.about-grid{display:grid;grid-template-columns:.86fr 1.14fr;gap:clamp(36px,5vw,80px);align-items:center}
.about-media{position:relative;aspect-ratio:4/4.6}
.about-media .blue{position:absolute;inset:-6% -10% -6% 6%;background:var(--blue);clip-path:polygon(10% 0,100% 6%,90% 100%,0 94%)}
.about-media .img{position:absolute;inset:0;overflow:hidden;clip-path:polygon(6% 2%,100% 0,94% 98%,0 100%)}
/* La foto vive en un hijo (.im) y no en .img: .img ya lleva el recorte diagonal en clip-path, y el reveal
   y el parallax necesitan un elemento propio al que animarle clip-path/scale/translate sin pisarlo. */
.about-media .im{position:absolute;inset:0;display:block}
/* La foto es un <img> perezoso (antes era background): el navegador no la baja hasta que la seccion se acerca,
   y en 3G no compite con el hero por el ancho de banda. */
.about-media .im img,.diff-media .im img{display:block;width:100%;height:100%;object-fit:cover}
.about-media .img::before{content:"";position:absolute;inset:0;z-index:1;background:rgba(6,21,46,.18)}
.about-copy h2{font-size:var(--fs-h2);line-height:1.02;margin-bottom:26px}
.about-copy .lead{max-width:560px;margin-bottom:34px}

/* ---------- SERVICIOS (sección azul) ---------- */
.blue-sec{background:var(--blue);position:relative}
/* La cuna es absolute y el .wrap es estatico: sin estos z-index la cuna pinta
   ENCIMA del contenido y oscurece el texto de las dos ultimas columnas. */
.blue-sec::before{content:"";position:absolute;z-index:0;top:0;right:0;width:60%;height:100%;background:var(--blue-dp);
  clip-path:polygon(38% 0,100% 0,100% 100%,0 100%);opacity:.5}
.blue-sec>.wrap{position:relative;z-index:1}
.blue-sec .eyebrow{color:var(--on-blue-2)}
.blue-sec .head{position:relative;max-width:820px;margin-bottom:clamp(40px,6vw,72px)}
.blue-sec .head h2{font-size:var(--fs-h2);line-height:1.04}
.blue-sec .lead,.blue-sec .sec-head .lead{color:var(--on-blue)}
.num-list{position:relative;--num-w:clamp(34px,3.4vw,50px);--num-gap:clamp(18px,3vw,44px)}
.num-item{border-top:1px solid var(--on-blue-line)}
.num-item:last-child{border-bottom:1px solid var(--on-blue-line)}
.num-row{width:100%;background:none;border:0;color:inherit;font:inherit;text-align:left;cursor:pointer;
  display:grid;grid-template-columns:var(--num-w) 1fr auto;gap:var(--num-gap);align-items:center;
  padding:clamp(24px,3vw,38px) 0}
.num-row>.n,.num-row>.t{transition:transform .5s var(--ease),color .4s var(--ease)}
@media(hover:hover){.num-row:hover>.n,.num-row:hover>.t{transform:translateX(12px)}}
.num-row .n{font-size:clamp(22px,2.4vw,32px);font-weight:800;color:var(--on-blue-2);font-variant-numeric:tabular-nums;transition:transform .5s var(--ease),color .4s var(--ease)}
.num-row .t{font-size:clamp(21px,3vw,44px);font-weight:800;letter-spacing:var(--ls-head);line-height:1.05}
.num-row .go{width:52px;height:52px;border:1px solid rgba(255,255,255,.35);border-radius:50%;display:flex;align-items:center;justify-content:center;
  flex-shrink:0;transition:background .4s var(--ease),border-color .4s var(--ease)}
.num-row .go svg{width:18px;height:18px;transition:transform .45s var(--ease),color .4s var(--ease)}
@media(hover:hover){.num-row:hover .go{background:var(--teal);border-color:var(--teal)}}
@media(hover:hover){.num-row:hover .go svg{color:var(--blue)}}
.num-row[aria-expanded="true"] .n{color:var(--teal-hi)}
.num-row[aria-expanded="true"] .go{background:var(--teal);border-color:var(--teal)}
.num-row[aria-expanded="true"] .go svg{transform:rotate(135deg);color:var(--blue)}
/* panel desplegable: grid 0fr->1fr anima hasta altura auto */
.num-panel{display:grid;grid-template-rows:0fr;transition:grid-template-rows .5s var(--ease-io)}
.num-row[aria-expanded="true"]+.num-panel{grid-template-rows:1fr}
.num-panel>.clip{overflow:hidden;visibility:hidden;transition:visibility 0s linear .55s}
.num-row[aria-expanded="true"]+.num-panel>.clip{visibility:visible;transition-delay:0s}
.num-panel-in{padding:0 0 clamp(30px,3.6vw,46px) calc(var(--num-w) + var(--num-gap));max-width:860px;
  opacity:0;transform:translateY(10px);transition:opacity .45s var(--ease) .06s,transform .45s var(--ease) .06s}
.num-row[aria-expanded="true"]+.num-panel .num-panel-in{opacity:1;transform:none}
.num-panel-in p{color:var(--on-blue);font-size:var(--fs-lead);line-height:1.65}
.num-feat{list-style:none;margin-top:20px;display:grid;gap:11px}
.num-feat li{position:relative;padding-left:26px;color:var(--on-blue);font-size:var(--fs-body);line-height:1.6}
.num-feat li::before{content:"";position:absolute;left:0;top:.58em;width:9px;height:9px;border:2px solid var(--teal);border-radius:50%}
.num-mode{margin-top:20px;display:grid;gap:16px}
.num-mode>div{border-left:2px solid rgba(60,190,180,.5);padding-left:16px}
.num-mode b{display:block;color:var(--teal-hi);font-weight:800;font-size:var(--fs-label);letter-spacing:var(--ls-micro);text-transform:uppercase;margin-bottom:6px}
.num-mode span{display:block;color:var(--on-blue);font-size:var(--fs-body);line-height:1.6}
.num-cta{display:inline-flex;align-items:center;gap:9px;margin-top:24px;font-size:var(--fs-body-s);font-weight:800;color:var(--teal-hi);
  text-decoration:none;padding:8px 0;border-bottom:1px solid rgba(95,214,204,.38);transition:color .35s var(--ease),border-color .35s var(--ease)}
@media(hover:hover){.num-cta:hover{color:#fff;border-color:#fff}}
.num-cta svg{width:14px;height:14px;transition:transform .35s var(--ease)}
@media(hover:hover){.num-cta:hover svg{transform:translate(2px,-2px)}}

/* ---------- STATS ---------- */
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,3vw,40px)}
.stat .n{font-size:clamp(30px,3.9vw,58px);font-weight:900;letter-spacing:var(--ls-display);line-height:.95;white-space:nowrap}
.stat .l{font-size:var(--fs-body-s);color:var(--mut);margin-top:12px;font-weight:500;text-transform:none;letter-spacing:0}

/* ---------- DIFERENCIALES + wedge ---------- */
.diff{position:relative;margin-top:clamp(70px,9vw,120px)}
/* El borde duro de la cuna cruzaba el h2 y se leia como un glitch, no como diseno.
   Ahora arranca por debajo del titular en los tres breakpoints. */
.diff-wedge{position:absolute;inset:0;background:var(--blue);opacity:.16;
  clip-path:polygon(0 44%,100% 26%,100% 100%,0 100%);pointer-events:none}
.diff-grid{position:relative;display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(36px,5vw,80px);align-items:center}
.diff-copy h2{font-size:var(--fs-h2);margin-bottom:clamp(28px,4vw,50px)}
.diff-item{padding:clamp(20px,2.4vw,30px) 0;border-top:1px solid var(--line)}
.diff-item:first-of-type{border-top:0}
.diff-item .r{display:flex;gap:18px;align-items:baseline}
.diff-item .n{font-size:var(--fs-body);font-weight:800;color:var(--teal);font-variant-numeric:tabular-nums;flex:0 0 24px}
.diff-item h3{font-size:var(--fs-h3);font-weight:700;text-transform:none;letter-spacing:0}
.diff-item p{font-size:var(--fs-body);color:var(--mut);margin-top:10px;padding-left:42px;line-height:1.6;text-transform:none}
.diff-media{position:relative;aspect-ratio:4/4.4;overflow:hidden;clip-path:polygon(0 0,100% 4%,100% 100%,0 96%)}
/* mismo criterio que .about-media: la foto en un hijo para poder animarla sin tocar el recorte del contenedor */
.diff-media .im{position:absolute;inset:0;display:block}
.diff-media::before{content:"";position:absolute;inset:0;z-index:1;background:rgba(6,21,46,.18)}

/* ---------- SIMULADOR ---------- */
.sim-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(36px,5vw,80px);align-items:center}
.sim-copy h2{font-size:var(--fs-h2);line-height:1.02;margin-bottom:22px}
.sim-copy .lead{max-width:440px}
.sim-panel{min-width:0;background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r-md);padding:clamp(26px,3vw,40px)}
.sim-tag{display:inline-flex;align-items:center;gap:9px;font-size:var(--fs-label);font-weight:700;letter-spacing:var(--ls-micro);text-transform:uppercase;color:var(--teal);margin-bottom:24px}
.sim-tag svg{width:15px;height:15px}
.sim-field{margin-bottom:20px}
.sim-field label{display:block;font-size:var(--fs-micro);font-weight:600;letter-spacing:var(--ls-micro);text-transform:uppercase;color:var(--mut);margin-bottom:8px}
.sim-iw{position:relative;border-bottom:1.5px solid var(--line);transition:border-color .3s var(--ease)}
.sim-iw:focus-within{border-color:var(--teal)}
.sim-iw .pfx{position:absolute;left:0;bottom:12px;font-size:24px;font-weight:800;color:var(--mut2)}
.sim-field input{width:100%;min-width:0;background:transparent;border:0;outline:none;color:#fff;font-family:inherit;font-size:24px;font-weight:800;padding:6px 0 12px}
.sim-field input.pad{padding-left:24px}
.sim-out{margin:26px 0 22px;padding:24px;background:var(--blue);border-radius:var(--r-sm);position:relative;overflow:hidden}
.sim-out::before{content:"";position:absolute;inset:0;background:var(--blue-dp);clip-path:polygon(58% 0,100% 0,100% 100%,88% 100%);opacity:.55}
.sim-out .l{position:relative;font-size:var(--fs-micro);font-weight:700;letter-spacing:var(--ls-micro);text-transform:uppercase;color:var(--on-blue)}
.sim-out .n{position:relative;font-size:clamp(30px,4.4vw,46px);font-weight:900;color:var(--teal-hi);line-height:1;margin-top:8px;font-variant-numeric:tabular-nums;letter-spacing:var(--ls-display)}
.sim-panel .btn{width:100%;justify-content:space-between}

/* ---------- CTA full-bleed ---------- */
.cta{position:relative;text-align:center;padding:clamp(90px,13vw,180px) 0}
.cta .bg{position:absolute;inset:0;overflow:hidden}
.cta .bg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
/* scrim navy para legibilidad del texto blanco */
.cta .bg::before{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(6,21,46,.82),rgba(6,21,46,.72) 45%,rgba(6,21,46,.9)),
    radial-gradient(90% 90% at 50% 44%,rgba(6,21,46,.35),rgba(6,21,46,.72))}
.cta-in{position:relative;z-index:2;max-width:900px;margin:0 auto}
.cta h2{font-size:var(--fs-h2-xl);line-height:1;margin-bottom:26px}
.cta .lead{max-width:620px;margin:0 auto 36px}
.cta-feats{display:flex;justify-content:center;flex-wrap:wrap;gap:14px 40px;margin-top:clamp(48px,7vw,90px)}
.cta-feats span{display:inline-flex;align-items:center;gap:10px;font-size:var(--fs-label);font-weight:700;letter-spacing:var(--ls-micro);text-transform:uppercase;color:var(--white)}
.cta-feats svg{width:16px;height:16px;color:var(--teal)}

/* ---------- TESTIMONIAL ---------- */
.testi{text-align:center}
.testi .eyebrow{margin-bottom:34px}
.testi blockquote{font-size:clamp(22px,3vw,42px);font-weight:700;letter-spacing:var(--ls-head);line-height:1.24;
  max-width:1040px;margin:0 auto 40px}
.testi .who{display:inline-flex;align-items:center;gap:15px}
.testi .av{width:52px;height:52px;border-radius:50%;background:linear-gradient(140deg,var(--teal),var(--blue));display:flex;align-items:center;justify-content:center;font-weight:800;color:var(--bg)}
.testi .who .nm{font-size:var(--fs-body);font-weight:800;text-transform:none;letter-spacing:0}
.testi .who .rl{font-size:var(--fs-body-s);color:var(--mut);text-transform:none}
.logos{--lg-gap:clamp(14px,1.6vw,22px);display:flex;flex-wrap:wrap;justify-content:center;
  gap:var(--lg-gap);margin-top:clamp(56px,8vw,90px)}
.logos span{flex:0 0 calc((100% - 3*var(--lg-gap))/4);
  display:flex;align-items:center;justify-content:center;padding:22px;min-height:118px;
  background:#fff;border-radius:var(--r-md);transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
@media(hover:hover){.logos span:hover{transform:translateY(-4px);box-shadow:0 22px 44px -24px rgba(0,0,0,.6)}}
.logos img{max-height:46px;max-width:100%;width:auto;height:auto;object-fit:contain;
  filter:grayscale(1);opacity:.72;transition:filter .35s var(--ease),opacity .35s var(--ease)}
/* Alturas calibradas por MASA OPTICA medida (area de tinta sobre la tarjeta), no por
   el tamano del archivo. Un logo oscuro y denso pesa mas que uno claro y fino al mismo
   alto, asi que necesita menos altura para leerse parejo en la grilla. */
.logos img.lg-xs{max-height:32px}   /* muy denso y muy ancho */
.logos img.lg-md{max-height:58px}
.logos img.lg-lg{max-height:70px}
.logos img.lg-xl{max-height:76px}   /* claro y compacto */
/* Ajuste tonal: el tamano solo no empareja un logo que es un bloque solido oscuro
   contra uno de linea fina. Se compensa en reposo; el hover siempre devuelve el original. */
.logos img.tone-down{opacity:.54}
.logos img.tone-up{opacity:.96;filter:grayscale(1) contrast(1.18)}
@media(hover:hover){.logos span:hover img{filter:none;opacity:1}}

/* ---------- CONTACTO ---------- */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(36px,5vw,80px)}
.contact-info h2{font-size:var(--fs-h2);line-height:1;margin-bottom:24px}
.contact-info .lead{max-width:380px;margin-bottom:36px}
.c-item{display:flex;gap:16px;padding:18px 0;border-top:1px solid var(--line)}
.c-item:first-of-type{border-top:0}
.c-item .k{font-size:var(--fs-label);font-weight:700;letter-spacing:var(--ls-micro);text-transform:uppercase;color:var(--teal)}
.c-item .v{font-size:var(--fs-body-l);font-weight:600;margin-top:4px;text-transform:none;letter-spacing:0}
.c-item .v a{display:inline-flex;align-items:center;min-height:44px}
@media(hover:hover){.c-item .v a:hover{color:var(--teal)}}
.form .fld{margin-bottom:2px;border-bottom:1px solid var(--line);position:relative}
.form label{position:absolute;left:0;top:18px;max-width:100%;white-space:nowrap;font-size:var(--fs-body-s);color:var(--mut2);pointer-events:none;
  /* el label flota con transform (no top/font-size): 0 layout por cuadro */
  transform-origin:left top;transition:transform .25s var(--ease),color .25s var(--ease);
  text-transform:uppercase;letter-spacing:var(--ls-ui);font-weight:600}
/* subrayado de foco: mismo lenguaje que los campos del simulador */
.form .fld::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--teal);
  transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease),background-color .3s var(--ease);pointer-events:none}
.form .fld:focus-within::after{transform:scaleX(1)}
.form .fld:has(:user-invalid)::after{background:var(--err);transform:scaleX(1)}
.form .fld:has(:user-invalid) label{color:var(--err)}
.form input,.form select,.form textarea{width:100%;background:transparent;border:0;outline:none;color:#fff;font-family:inherit;
  font-size:var(--fs-body-l);font-weight:600;padding:22px 0 14px}
.form textarea{min-height:70px;resize:vertical}
/* campo trampa anti-spam: fuera de pantalla (no display:none, que algunos bots detectan) */
.form .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
/* resultado del envio: lo completa site.js; .nojs-msg lo muestra :target tras el envio clasico sin JS */
.form-status{margin-top:18px;padding:14px 16px;border-radius:var(--r-sm);font-size:var(--fs-body-s);line-height:1.5;
  border:1px solid var(--line);outline:none}
.form-status.is-ok{border-color:var(--teal);color:var(--teal)}
.form-status.is-err{border-color:var(--err);color:#fff}
.form-status a{color:inherit;text-decoration:underline}
.nojs-msg{display:none}
html:not(.js) .nojs-msg:target{display:block}
.form[aria-busy="true"] .btn{opacity:.7;cursor:progress}
.form .fld.filled label,.form input:focus~label,.form textarea:focus~label,.form select:focus~label,
.form .fld:has(select) label{transform:translateY(-16px) scale(.7857);color:var(--teal)}
.form .fld:has(select) label{color:var(--mut2)}
.form .fld:has(select):focus-within label{color:var(--teal)}
.form select{color:#fff;cursor:pointer;appearance:none;-webkit-appearance:none;padding-right:28px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239DAECD' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 2px center;background-size:16px}
.form select option{background:var(--bg-2)}
.form .btn{margin-top:30px;width:100%;justify-content:space-between}
.form-note{font-size:var(--fs-label);color:var(--mut2);margin-top:14px;text-transform:none}

/* ============================================================
   FOOTER
   ============================================================ */
.footer{padding-top:clamp(70px,9vw,120px);border-top:1px solid var(--line);position:relative}
.foot-cta{padding:clamp(80px,12vw,170px) 0;margin-bottom:clamp(28px,4vw,48px)}
.foot-cta-in{display:flex;flex-direction:column;align-items:center;text-align:center}
.foot-cta .eyebrow{display:block;margin-bottom:clamp(28px,4vw,46px)}
.foot-cta h2{font-size:clamp(40px,7.2vw,110px);line-height:1.02;max-width:12ch;margin-bottom:clamp(38px,5vw,58px)}
.foot-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr)) minmax(0,1.5fr);gap:36px;padding:clamp(40px,5vw,60px) 0;border-top:1px solid var(--line)}
.foot-col .foot-h{display:flex;align-items:center;gap:9px;font-size:var(--fs-label);font-weight:800;letter-spacing:var(--ls-micro);text-transform:uppercase;margin-bottom:20px}
.foot-col .foot-h svg{width:15px;height:15px;color:var(--teal)}
.foot-col a{display:flex;align-items:center;gap:10px;font-size:var(--fs-body);color:var(--mut);min-height:44px;padding:6px 0;transition:color .3s var(--ease);text-transform:none}
@media(hover:hover){.foot-col a:hover{color:var(--white)}}
/* flecha que aparece al hover en links de navegación */
.foot-col a .lk{width:13px;height:13px;flex-shrink:0;opacity:0;transform:translateX(-4px);transition:opacity .3s var(--ease),transform .3s var(--ease);color:var(--teal)}
@media(hover:hover){.foot-col a:hover .lk{opacity:1;transform:translateX(0)}}
/* iconos fijos en la columna de contacto */
.foot-col a .ci{width:15px;height:15px;flex-shrink:0;color:var(--teal)}
.foot-news p{font-size:var(--fs-body);font-weight:600;margin-bottom:18px;text-transform:none}
.news-in{display:flex;align-items:center;border:1px solid var(--line);border-radius:var(--r-sm);padding:6px 6px 6px 18px}
.news-in input{flex:1;background:transparent;border:0;outline:none;color:#fff;font-family:inherit;font-size:var(--fs-body);padding:12px 0}
.news-in button{width:44px;height:44px;background:var(--teal);border:0;border-radius:var(--r-sm);color:var(--bg);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .3s var(--ease)}
@media(hover:hover){.news-in button:hover{background:var(--teal-hi)}}
.news-in button svg{width:16px;height:16px}
.foot-social{display:flex;gap:10px;margin-top:22px}
.foot-social a{width:44px;height:44px;border:1px solid var(--line);border-radius:var(--r-sm);display:flex;align-items:center;justify-content:center;
  color:var(--mut);transition:color .3s var(--ease),border-color .3s var(--ease),background .3s var(--ease),transform .3s var(--ease)}
@media(hover:hover){.foot-social a:hover{color:var(--bg);background:var(--teal);border-color:var(--teal);transform:translateY(-3px)}}
.foot-social svg{width:19px;height:19px}
/* logo chico de cierre */
/* Logo del footer como marca de agua: ocupa todo el ancho del contenido, semitransparente y
   desvanecido hacia abajo para cerrar la pagina con presencia de marca sin competir con los enlaces.
   El PNG mide 929px: a 1232px (wrap maximo) se agranda ~1.3x; la transparencia disimula la
   perdida, pero con un SVG del logo quedaria perfecto en pantallas de alta densidad. */
.foot-mark{padding:clamp(40px,6vw,80px) 0 clamp(8px,1.5vw,20px);pointer-events:none;user-select:none}
.foot-logo{display:block;width:100%;height:auto;opacity:.16;
  -webkit-mask-image:linear-gradient(180deg,#000 35%,rgba(0,0,0,.25) 100%);
          mask-image:linear-gradient(180deg,#000 35%,rgba(0,0,0,.25) 100%)}
.foot-bottom{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;padding:24px 0;border-top:1px solid var(--line);font-size:var(--fs-label);color:var(--mut2);text-transform:none}

/* WhatsApp */
.wa{position:fixed;right:max(22px,env(safe-area-inset-right));bottom:max(22px,env(safe-area-inset-bottom));-webkit-tap-highlight-color:transparent;z-index:95;width:56px;height:56px;border-radius:50%;background:#25D366;
  display:flex;align-items:center;justify-content:center;box-shadow:0 14px 34px -10px rgba(37,211,102,.7);transition:transform .35s var(--ease)}
@media(hover:hover){.wa:hover{transform:scale(1.08)}}.wa:active{transform:scale(.94);transition-duration:.12s}.wa svg{width:29px;height:29px;fill:#fff}


/* ============================================================
   RAIL — en mobile las tarjetas pasan a scroll horizontal con snap.
   Desktop/tablet: el rail no existe (los hijos mantienen su grid/flex).
   ============================================================ */
.rail-wrap{position:relative;min-width:0}
/* sin min-width:0 el item de grid crece hasta el max-content del riel y el riel deja de scrollear */
.diff-copy,.about-copy,.sim-copy,.contact-info{min-width:0}
.rail-bar{display:none;height:3px;border-radius:var(--r-pill);background:var(--line);margin-top:22px;overflow:hidden}
.rail-bar span{display:block;height:100%;width:30%;border-radius:var(--r-pill);background:var(--teal);
  transform:translateX(0);transition:transform .12s linear}


/* ============================================================
   ARQUITECTURA POR SECCIONES — componentes de las páginas interiores
   Todo lo de abajo reutiliza los tokens de :root. Ninguna página
   define color, tamaño ni tracking propio: si algo se ve distinto,
   el token está mal, no la página.
   ============================================================ */

/* ---------- NAV: submenú de Servicios ----------
   El <li> es el que abre en hover (área continua). Abrir en el <a>
   deja un hueco muerto entre el link y el panel y el menú parpadea. */
.nav-links .has-sub{position:relative;display:flex;align-items:center}
.nav-links .has-sub{gap:0}
/* el chevron es un boton propio (44x44): el link va a servicios.html, el boton abre el panel */
.sub-toggle{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;margin:-12px -16px -12px -9px;
  background:none;border:0;color:var(--white);cursor:pointer;-webkit-tap-highlight-color:transparent;transition:color .3s var(--ease)}
.sub-toggle .cv{width:11px;height:11px;transition:transform .3s var(--ease)}
.has-sub.open .sub-toggle .cv{transform:rotate(180deg)}
.has-sub.open .sub-toggle{color:var(--teal)}
.subnav{position:absolute;top:100%;left:50%;transform:translate(-50%,10px);margin-top:20px;
  min-width:660px;background:rgb(10,33,72);
  border:1px solid var(--line);border-radius:var(--r-md);padding:14px;
  display:grid;grid-template-columns:1fr 1fr;gap:2px;
  opacity:0;visibility:hidden;pointer-events:none;
  box-shadow:0 34px 70px -30px rgba(0,0,0,.85);
  transition:opacity .3s var(--ease),transform .3s var(--ease),visibility 0s linear .3s}
/* el puente invisible cubre el gap de 20px entre el link y el panel */
.subnav::before{content:"";position:absolute;left:0;right:0;top:-22px;height:22px}
.nav-links .has-sub.open .subnav,html:not(.js) .nav-links .has-sub:focus-within .subnav{
  opacity:1;visibility:visible;pointer-events:auto;transform:translate(-50%,0);transition-delay:0s}
@media(hover:hover){/* sin JS el panel sigue siendo alcanzable por hover/foco */
html:not(.js) .nav-links .has-sub:hover .subnav{
  opacity:1;visibility:visible;pointer-events:auto;transform:translate(-50%,0);transition-delay:0s}}
.subnav a{display:flex;align-items:flex-start;gap:12px;padding:13px 14px;border-radius:var(--r-sm);
  text-transform:none;letter-spacing:0;font-weight:600;font-size:var(--fs-body-s);color:var(--white);
  transition:background .25s var(--ease)}
.subnav a::after{display:none}
@media(hover:hover){.subnav a:hover{background:rgba(255,255,255,.07);color:var(--white)}}
.subnav a .ic{display:block;width:17px;height:17px;flex-shrink:0;margin-top:1px;color:var(--teal)}
.subnav a b{display:block;font-weight:700;font-size:var(--fs-body);margin-bottom:3px;color:var(--white)}
.subnav a span{display:block;color:var(--mut);font-weight:500;line-height:1.5;font-size:var(--fs-body-s)}
.nav-links a.active{color:var(--teal)}
.nav-links a.active::after{width:100%}

/* menú mobile: los servicios entran como sub-lista compacta */
.mobile-menu{overflow-y:auto;padding-top:96px;padding-bottom:40px;justify-content:flex-start}
.mobile-menu a{font-size:clamp(24px,7vw,34px);min-height:44px;display:block}
.mm-sub{display:grid;gap:0;margin:6px 0 14px;padding-left:44px;border-left:1px solid var(--line)}
.mm-sub a{font-size:var(--fs-body);font-weight:600;text-transform:none;letter-spacing:0;color:var(--mut);padding:9px 0;min-height:44px;display:flex;align-items:center}
@media(hover:hover){.mm-sub a:hover{color:var(--teal)}}
.mobile-menu a:active{color:var(--teal)}

/* ---------- HERO de página interior ---------- */
.phero{position:relative;background:var(--bg);
  padding:clamp(140px,17vw,210px) 0 clamp(60px,8vw,100px)}
.phero-media{position:absolute;top:0;right:0;bottom:0;width:44%;overflow:hidden;
  clip-path:polygon(18% 0,100% 0,100% 100%,0 100%)}
.phero-media img{width:100%;height:100%;object-fit:cover}
.phero-media::after{content:"";position:absolute;inset:0;
  background:linear-gradient(100deg,var(--bg) 0%,rgba(6,21,46,.72) 32%,rgba(6,21,46,.28) 62%,rgba(6,21,46,.12) 100%)}
.phero-in{position:relative;z-index:2;max-width:760px}
.phero h1{font-size:clamp(31px,4.6vw,64px);font-weight:900;letter-spacing:var(--ls-display);line-height:1.02;margin:18px 0 22px}
.phero .lead{max-width:600px}
.phero .actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:34px}

/* migas — orientación, no decoración */
.crumbs{display:flex;align-items:center;flex-wrap:wrap;gap:9px;
  font-size:var(--fs-label);font-weight:700;letter-spacing:var(--ls-micro);text-transform:uppercase;color:var(--mut2)}
.crumbs a,.crumbs .sep{flex-shrink:0}
.crumbs a{position:relative;color:var(--mut2);transition:color .3s var(--ease)}
/* zona de toque de 44px sin abrir espacio entre las migas y el titular */
.crumbs a::before{content:"";position:absolute;inset:-14px 0}
@media(hover:hover){.crumbs a:hover{color:var(--teal)}}
.crumbs .sep{opacity:.5}
.crumbs [aria-current]{color:var(--teal)}

/* ---------- SPLIT: texto + media, alternable ---------- */
.split{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(36px,5vw,80px);align-items:center}
.split.rev>.split-media{order:-1}
.split-copy h2{font-size:var(--fs-h2);line-height:1.04;margin-bottom:24px}
.split-copy .lead+.lead{margin-top:18px}
.split-media{position:relative;aspect-ratio:4/3.1;overflow:hidden;border-radius:var(--r-sm);
  clip-path:polygon(0 0,100% 3%,100% 100%,0 97%)}
.split-media img{width:100%;height:100%;object-fit:cover}
.split-media::after{content:"";position:absolute;inset:0;background:rgba(6,21,46,.16);pointer-events:none}
/* variante retrato para fotos verticales */
.split-media.tall{aspect-ratio:4/4.6}
.split.pad{margin-top:clamp(64px,9vw,110px)}

/* ---------- CHECKS: listas de alcance/beneficio ---------- */
.checks{list-style:none;display:grid;gap:13px;margin-top:26px}
.checks.two{grid-template-columns:1fr 1fr;gap:13px clamp(24px,3vw,44px)}
.checks li{position:relative;padding-left:32px;font-size:var(--fs-body);color:var(--mut);line-height:1.6}
.checks li::before{content:"";position:absolute;left:0;top:.18em;width:19px;height:19px;border-radius:50%;
  border:1.5px solid rgba(60,190,180,.42)}
.checks li::after{content:"";position:absolute;left:6px;top:.52em;width:7px;height:4px;
  border-left:1.8px solid var(--teal);border-bottom:1.8px solid var(--teal);transform:rotate(-45deg)}
.blue-sec .checks li{color:var(--on-blue)}
.blue-sec .checks li::before{border-color:rgba(255,255,255,.34)}

/* ---------- PASOS del proceso ---------- */
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  border-top:1px solid var(--line);border-left:1px solid var(--line);margin-top:clamp(32px,4vw,50px)}
.step{border-right:1px solid var(--line);border-bottom:1px solid var(--line);
  padding:clamp(26px,3vw,36px);position:relative;transition:background .4s var(--ease)}
@media(hover:hover){.step:hover{background:var(--bg-2)}}
.step .k{font-size:var(--fs-micro);font-weight:800;letter-spacing:var(--ls-micro);text-transform:uppercase;color:var(--teal)}
.step h3{font-size:var(--fs-h3);font-weight:700;text-transform:none;letter-spacing:0;margin:14px 0 12px;line-height:1.25}
.step p{font-size:var(--fs-body-s);color:var(--mut);line-height:1.65}
.step .bar{position:absolute;left:0;top:0;height:2px;width:100%;background:var(--teal);transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease)}
@media(hover:hover){.step:hover .bar{transform:scaleX(1)}}
.blue-sec .steps{border-color:var(--on-blue-line)}
.blue-sec .step{border-color:var(--on-blue-line)}
@media(hover:hover){.blue-sec .step:hover{background:var(--blue-dp)}}
.blue-sec .step .k{color:var(--teal-hi)}
.blue-sec .step p{color:var(--on-blue)}

/* ---------- CARDS genéricas ---------- */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:clamp(14px,1.8vw,22px);margin-top:clamp(32px,4vw,50px)}
.card{background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r-md);padding:clamp(24px,2.6vw,32px);
  transition:border-color .4s var(--ease),transform .4s var(--ease)}
@media(hover:hover){.card:hover{border-color:rgba(60,190,180,.45);transform:translateY(-4px)}}
.card .ic{display:block;width:26px;height:26px;color:var(--teal);margin-bottom:20px}
.card h3{font-size:var(--fs-h3);font-weight:700;text-transform:none;letter-spacing:0;margin-bottom:11px;line-height:1.25;overflow-wrap:break-word}
.card p{font-size:var(--fs-body-s);color:var(--mut);line-height:1.65}
.card .n{font-size:var(--fs-label);font-weight:800;color:var(--teal);letter-spacing:var(--ls-micro);display:block;margin-bottom:16px}
.blue-sec .card{background:var(--blue-card);border-color:var(--on-blue-line)}
/* teal 3.96:1 sobre --blue-card no pasa AA en 12-14px; teal-hi da 5.15:1 */
.blue-sec .card .n,.blue-sec a.card .go,.blue-sec .card .ic{color:var(--teal-hi)}
.blue-sec .card p{color:var(--on-blue)}
@media(hover:hover){.blue-sec .card:hover{border-color:rgba(255,255,255,.42);background:var(--blue-card-hi)}}

/* tarjeta-link: toda la superficie es el destino */
a.card{display:block}
a.card .go{display:inline-flex;align-items:center;gap:9px;margin-top:20px;font-size:var(--fs-body-s);font-weight:800;
  color:var(--teal);text-transform:uppercase;letter-spacing:var(--ls-ui)}
a.card .go svg{width:14px;height:14px;transition:transform .35s var(--ease)}
@media(hover:hover){a.card:hover .go svg{transform:translate(3px,-3px)}}

/* ---------- HUB DE SERVICIOS: filas numeradas navegables ---------- */
.svc-rows{border-top:1px solid var(--line);margin-top:clamp(36px,5vw,60px)}
.svc-row{display:grid;grid-template-columns:clamp(40px,4vw,64px) 1fr minmax(0,.85fr) auto;gap:clamp(18px,3vw,44px);
  align-items:center;padding:clamp(26px,3.2vw,40px) 0;border-bottom:1px solid var(--line)}
.svc-row>.n,.svc-row>h3,.svc-row>p{transition:transform .5s var(--ease),color .4s var(--ease)}
@media(hover:hover){.svc-row:hover>.n,.svc-row:hover>h3,.svc-row:hover>p{transform:translateX(14px)}}
.svc-row .n{font-size:clamp(20px,2.2vw,30px);font-weight:800;color:var(--mut2);font-variant-numeric:tabular-nums;transition:transform .5s var(--ease),color .4s var(--ease)}
@media(hover:hover){.svc-row:hover .n{color:var(--teal)}}
.svc-row h3{font-size:clamp(20px,2.6vw,36px);font-weight:800;letter-spacing:var(--ls-head);line-height:1.08;text-transform:none}
.svc-row p{font-size:var(--fs-body-s);color:var(--mut);line-height:1.6}
.svc-row .go{width:52px;height:52px;border:1px solid var(--line);border-radius:50%;display:flex;align-items:center;justify-content:center;
  flex-shrink:0;transition:background .4s var(--ease),border-color .4s var(--ease)}
.svc-row .go svg{width:17px;height:17px;transition:transform .45s var(--ease),color .4s var(--ease)}
@media(hover:hover){.svc-row:hover .go{background:var(--teal);border-color:var(--teal)}}
@media(hover:hover){.svc-row:hover .go svg{color:var(--bg);transform:translate(2px,-2px)}}

/* ---------- MÉTRICAS en línea ---------- */
.metrics{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:clamp(20px,3vw,40px);margin-top:clamp(34px,4vw,54px)}
.metric .n{font-size:clamp(28px,3.4vw,48px);font-weight:900;letter-spacing:var(--ls-display);line-height:1;color:var(--teal)}
.metric .l{font-size:var(--fs-body-s);color:var(--mut);margin-top:11px;line-height:1.5}

/* ---------- CASOS DE ÉXITO ---------- */
.case{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(30px,4.5vw,68px);align-items:center;
  padding:clamp(40px,5.5vw,72px) 0;border-top:1px solid var(--line)}
.case:nth-child(even){grid-template-columns:1.1fr .9fr}
.case:nth-child(even) .case-media{order:2}
.case-media{position:relative;aspect-ratio:4/2.9;overflow:hidden;border-radius:var(--r-sm);
  clip-path:polygon(0 0,100% 3%,100% 100%,0 97%)}
.case-media img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
@media(hover:hover){.case:hover .case-media img{transform:scale(1.04)}}
.case-media::after{content:"";position:absolute;inset:0;background:rgba(6,21,46,.14)}
.case-copy .sector{display:inline-flex;align-items:center;gap:10px;font-size:var(--fs-label);font-weight:700;
  letter-spacing:var(--ls-micro);text-transform:uppercase;color:var(--teal);margin-bottom:18px}
.case-copy .sector::before{content:"";width:22px;height:2px;background:var(--teal)}
.case-copy h2{font-size:clamp(21px,2.5vw,34px);font-weight:800;letter-spacing:var(--ls-head);line-height:1.12;text-transform:none;margin-bottom:16px}
.case-copy p{font-size:var(--fs-body);color:var(--mut);line-height:1.68}
.case-copy p+p{margin-top:12px}
.case-copy .clients{display:flex;flex-wrap:wrap;gap:7px;margin-top:20px}
.case-copy .clients span{font-size:var(--fs-micro);font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--mut);border:1px solid var(--line);border-radius:var(--r-pill);padding:7px 13px}
.case-copy .metrics{grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:24px;margin-top:26px}
.case-copy .metric .n{font-size:clamp(22px,2.2vw,32px)}

/* ---------- FAQ ---------- */
.faq{max-width:900px;margin-top:clamp(34px,4vw,54px)}
.faq-item{border-top:1px solid var(--line)}
.faq-item:last-child{border-bottom:1px solid var(--line)}
.faq-q{width:100%;background:none;border:0;color:inherit;font:inherit;text-align:left;cursor:pointer;
  display:flex;align-items:center;justify-content:space-between;gap:24px;padding:clamp(20px,2.4vw,28px) 0;
  font-size:var(--fs-h3);font-weight:700;line-height:1.35;transition:color .3s var(--ease)}
@media(hover:hover){.faq-q:hover{color:var(--teal)}}
.faq-q .pm{width:38px;height:38px;flex-shrink:0;border:1px solid var(--line);border-radius:50%;
  display:flex;align-items:center;justify-content:center;transition:background .4s var(--ease),border-color .4s var(--ease)}
.faq-q .pm svg{width:15px;height:15px;transition:transform .45s var(--ease),color .35s var(--ease)}
.faq-q[aria-expanded="true"]{color:var(--teal)}
.faq-q[aria-expanded="true"] .pm{background:var(--teal);border-color:var(--teal)}
.faq-q[aria-expanded="true"] .pm svg{transform:rotate(135deg);color:var(--bg)}
.faq-a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .5s var(--ease-io)}
.faq-q[aria-expanded="true"]+.faq-a{grid-template-rows:1fr}
.faq-a>.clip{overflow:hidden;visibility:hidden;transition:visibility 0s linear .5s}
.faq-q[aria-expanded="true"]+.faq-a>.clip{visibility:visible;transition-delay:0s}
.faq-a p{font-size:var(--fs-body);color:var(--mut);line-height:1.7;max-width:74ch;padding-bottom:clamp(22px,2.6vw,30px)}

/* ---------- BANDA CTA de cierre de página ---------- */
.band{background:var(--blue);position:relative;padding:clamp(64px,9vw,120px) 0}
.band::before{content:"";position:absolute;top:0;right:0;width:56%;height:100%;background:var(--blue-dp);
  clip-path:polygon(34% 0,100% 0,100% 100%,0 100%);opacity:.5}
.band-in{position:relative;display:grid;grid-template-columns:1.25fr .75fr;gap:clamp(30px,4vw,60px);align-items:center}
.band h2{font-size:var(--fs-h2);line-height:1.06;margin:18px 0 20px}
.band p{font-size:var(--fs-lead);color:var(--on-blue);line-height:1.65;max-width:60ch}
.band .eyebrow{color:var(--on-blue-2)}
.band .actions{display:flex;flex-direction:column;gap:12px;align-items:stretch}
.band .btn{justify-content:space-between}
.band .btn-ghost{border-color:var(--on-blue-line)}
@media(hover:hover){.band .btn-ghost:hover{border-color:#fff;color:#fff}}

/* ---------- PARTNERS ---------- */
.partners{--pg:clamp(10px,1.2vw,16px);display:grid;grid-template-columns:repeat(auto-fill,minmax(178px,1fr));gap:var(--pg);margin-top:clamp(36px,5vw,60px)}
.partners span{display:flex;align-items:center;justify-content:center;padding:16px;min-height:100px;
  background:#fff;border-radius:var(--r-md);transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
@media(hover:hover){.partners span:hover{transform:translateY(-4px);box-shadow:0 20px 40px -22px rgba(0,0,0,.65)}}
/* Los PNG estan recortados al bounding box de la tinta, asi que estas dos reglas
   alcanzan para toda la grilla: los wordmarks anchos topan contra el ancho de la
   tarjeta y los isologos cuadrados topan contra la altura. Sin clases por logo. */
.partners img{max-height:46px;max-width:100%;width:auto;height:auto;object-fit:contain;
  filter:grayscale(1);opacity:.74;transition:filter .35s var(--ease),opacity .35s var(--ease)}
@media(hover:hover){.partners span:hover img{filter:none;opacity:1}}
/* unica excepcion: los isologos con simbolo pesan menos a igual altura */
.partners img.p-lg{max-height:58px}

/* certificaciones: no hay logo de todas, así que van como sellos tipográficos */
.certs{display:flex;flex-wrap:wrap;gap:9px;margin-top:clamp(28px,3.5vw,40px)}
.certs span{font-size:var(--fs-label);font-weight:800;letter-spacing:var(--ls-ui);text-transform:uppercase;
  color:var(--mut);border:1px solid var(--line);border-radius:var(--r-sm);padding:11px 16px;
  transition:color .3s var(--ease),border-color .3s var(--ease)}
@media(hover:hover){.certs span:hover{color:var(--teal);border-color:rgba(60,190,180,.5)}}

/* ---------- PROCESO de 5 pasos (Nosotros) ---------- */
.flow{counter-reset:f;margin-top:clamp(36px,5vw,60px)}
.flow-item{display:grid;grid-template-columns:clamp(48px,5vw,74px) 1fr;gap:clamp(20px,3vw,40px);
  padding:clamp(22px,2.8vw,34px) 0;border-top:1px solid var(--line);align-items:start}
.flow-item:last-child{border-bottom:1px solid var(--line)}
.flow-item .n{font-size:clamp(24px,2.8vw,40px);font-weight:900;color:var(--teal);
  font-variant-numeric:tabular-nums;letter-spacing:var(--ls-display);line-height:1}
.flow-item h3{font-size:var(--fs-h3);font-weight:700;text-transform:none;letter-spacing:0;line-height:1.3;margin-bottom:8px}
.flow-item p{font-size:var(--fs-body-s);color:var(--mut);line-height:1.65;max-width:70ch}

/* ---------- VALORES ---------- */
.values{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  border-top:1px solid var(--line);border-left:1px solid var(--line);margin-top:clamp(32px,4vw,50px)}
.value{border-right:1px solid var(--line);border-bottom:1px solid var(--line);
  padding:clamp(24px,2.8vw,34px);transition:background .4s var(--ease)}
@media(hover:hover){.value:hover{background:var(--bg-2)}}
.value h3{font-size:var(--fs-body-l);font-weight:800;text-transform:none;letter-spacing:0;margin-bottom:10px}
.value h3::before{content:"";display:block;width:26px;height:2px;background:var(--teal);margin-bottom:16px}
.value p{font-size:var(--fs-body-s);color:var(--mut);line-height:1.6}

/* ---------- PLACA de cita / principio ---------- */
.plate-q{background:var(--bg-2);border:1px solid var(--line);border-left:3px solid var(--teal);
  border-radius:var(--r-sm);padding:clamp(28px,3.4vw,44px);margin-top:clamp(32px,4vw,50px)}
.plate-q p{font-size:var(--fs-lead);color:var(--white);line-height:1.7;font-weight:500;max-width:90ch}

/* ---------- MAGOS: bloques con diagramas de fondo claro ---------- */
.diag-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:clamp(14px,1.8vw,22px);margin-top:clamp(32px,4vw,50px)}
.diag-card{background:#fff;border-radius:var(--r-md);overflow:hidden;display:flex;flex-direction:column}
/* <picture> es inline por defecto: display:contents deja al <img> como hijo
   directo de la tarjeta y las reglas de tamano vuelven a aplicar. */
.diag-card picture,.phero-media picture,.split-media picture,.case-media picture{display:contents}
/* height:auto es obligatorio: con los atributos width/height del <img> (necesarios para CLS 0), el alto
   del atributo gana y el aspect-ratio se ignora; la imagen quedaba de 828px de alto. */
.diag-card img{width:100%;height:auto;aspect-ratio:16/9;object-fit:contain;background:#fff;padding:12px}
.diag-card .t{padding:0 22px 24px}
.diag-card h3{font-size:var(--fs-body-l);font-weight:800;color:var(--bg);text-transform:none;letter-spacing:0;margin-bottom:8px;line-height:1.3}
.diag-card p{font-size:var(--fs-body-s);color:#4A5B77;line-height:1.6}

/* aplicaciones MAGOS: grilla compacta de iconos */
.apps{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));
  border-top:1px solid var(--line);border-left:1px solid var(--line);margin-top:clamp(32px,4vw,50px)}
.app{border-right:1px solid var(--line);border-bottom:1px solid var(--line);
  padding:26px 18px;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:14px;text-align:center;
  transition:background .4s var(--ease)}
@media(hover:hover){.app:hover{background:var(--bg-2)}}
.app svg{display:block;width:26px;height:26px;color:var(--teal)}
.app span{font-size:var(--fs-body-s);font-weight:600;color:var(--mut);line-height:1.4}

/* logo de partner destacado sobre navy */
.brandmark{display:flex;align-items:center;gap:18px;margin-bottom:26px}
.brandmark img{height:30px;width:auto}

/* ---------- Utilidades de layout ---------- */
/* auto-fit reparte de a 4 y deja 1 o 2 huerfanos con 5 y 6 items.
   Cuando la cantidad es conocida y significativa, se fija la grilla. */
@media(min-width:920px){ .cards.c3{grid-template-columns:repeat(3,minmax(0,1fr))} }

.sec-head{max-width:820px;margin-bottom:clamp(34px,4.5vw,58px)}
.sec-head h2{font-size:var(--fs-h2);line-height:1.04;margin-top:20px}
.sec-head .lead{margin-top:20px;max-width:70ch}
.sec-head.center{margin-left:auto;margin-right:auto;text-align:center}
.sec-head.center .lead{margin-left:auto;margin-right:auto}
.sec.alt{background:var(--bg-2)}
/* sobre la seccion clara la tarjeta se invierte: si no, card y seccion
   comparten color y solo queda el hairline flotando */
.sec.alt .card,.sec.alt .plate-q,.sec.alt .sim-panel{background:var(--bg)}
.sec.alt .step,.sec.alt .value{background:var(--bg)}
.sec.tight{padding:clamp(56px,7vw,96px) 0}
.hr{height:1px;background:var(--line);border:0;margin:clamp(56px,7vw,96px) 0}
/* Reveal — mejora progresiva.
   El estado oculto cuelga de .js, que agrega un script inline en el <head>.
   Si el JS esta bloqueado o falla, la clase nunca se agrega y el contenido
   se ve igual. Si el JS arranco pero site.js no llego (ni .js-ready ni IO), un
   temporizador del head agrega .reveal-fail y todo se muestra igual.
   Se revela con @keyframes + fill-mode backwards y no con transition: asi el retraso
   escalonado no queda pegado al elemento y no demora luego el hover (antes una tarjeta
   podia tardar casi un segundo en reaccionar). Solo transform y opacity. */
@keyframes rise{from{opacity:0;transform:translateY(22px)}}
.js .up,.js [data-stagger]>*{opacity:0}
.js .up.in,.js [data-stagger].in>*{opacity:1;animation:rise .7s var(--ease) backwards}
.js [data-stagger].in>*{animation-duration:.6s;animation-delay:var(--d,0s)}
.reveal-fail .up,.reveal-fail [data-stagger]>*{opacity:1!important;animation:none!important}
@media print{.up,[data-stagger]>*{opacity:1!important;animation:none!important}}
@media print{.lt{transform:none!important;animation:none!important}
  .split-media img,.case-media img,.about-media .im,.diff-media .im{clip-path:none!important;animation:none!important;scale:none!important}}

/* ============================================================
   MOVIMIENTO MODERNO (cinco piezas, todas mejora progresiva)
   Regla comun: el estado oculto SIEMPRE cuelga de .js, y .reveal-fail / print / reduced-motion
   lo anulan. Solo transform, opacity y clip-path: nada de esto toca el layout (CLS 0).
   Curvas: solo --ease. Sin curvas nuevas.
   ============================================================ */
@keyframes fade{from{opacity:0}}

/* ---- 1. Transiciones entre paginas (cross-document View Transitions) ----
   Progresivo: donde no hay soporte la regla se ignora y se navega normal. Va dentro de
   no-preference: con reduced motion no se opta a la transicion, asi que no hay ni fundido.
   Un href="#ancla" de la misma pagina es una navegacion del mismo documento: no dispara nada. */
@media(prefers-reduced-motion:no-preference){
  @view-transition{navigation:auto}
  /* nav y logo con nombre propio: se sacan del fundido del root y quedan clavados,
     sin parpadear entre pagina y pagina. Cada nombre debe ser unico en la pagina o la transicion se aborta. */
  .nav{view-transition-name:site-nav}
  .nav .brand{view-transition-name:site-brand}
  ::view-transition-old(root),::view-transition-new(root){animation-duration:.24s;animation-timing-function:var(--ease)}
  /* el par viejo/nuevo del nav se reemplaza en seco: solo se ve el nuevo (con su link activo), sin cross-fade
     ni morph de tamano */
  ::view-transition-group(site-nav),::view-transition-group(site-brand){animation:none}
  ::view-transition-old(site-nav),::view-transition-old(site-brand){display:none}
  ::view-transition-new(site-nav),::view-transition-new(site-brand){animation:none}
}

/* ---- 2. Titulos que se revelan por linea ----
   site.js parte el h2 en lineas visuales (.ln = mascara, .lt = texto que sube) y marca con .has-split
   al contenedor .up. El contenedor pasa a fundirse (sin subir) para no duplicar el movimiento del titulo.
   El padding/margin negativo agranda la mascara sin cambiar el alto: con overflow:hidden a ras de la
   caja de linea (line-height ~1.04) se cortan los acentos de las mayusculas (Á, Ó...). */
/* h2.split es flex en columna: los margenes de items flex no colapsan entre si. En un bloque normal los
   margin -.14em de lineas vecinas colapsarian (-.14em en vez de -.28em) y el titulo crecería. */
h2.lines{display:flex;flex-direction:column}
.ln{display:block;overflow:hidden;white-space:nowrap;padding:.14em 0;margin:-.14em 0}
.ln>.lt{display:block}
@keyframes line-up{from{transform:translateY(120%)}}
/* 120% y no 105%: la mascara tiene .14em de colchon a cada lado y con 105% asomaria el borde superior de la linea */
.js .has-split:not(.in) .lt{transform:translateY(120%)}
.js .has-split.in .lt{animation:line-up .75s var(--ease) backwards;animation-delay:calc(var(--i,0)*70ms)}
.js .up.has-split.in{animation:fade .5s var(--ease) backwards}
/* re-split por resize con el titulo ya revelado: quieto, sin repetir la entrada */
.js .has-split.in .lines-static .lt{animation:none}   /* mas especifica que la regla de arriba: con menos especificidad no le gana y la entrada se repite */
.reveal-fail .lt{transform:none!important;animation:none!important}

/* ---- 3. Reveal de fotos de contenido ----
   La foto (img, o .im donde la foto es un fondo) se descubre con clip-path de arriba hacia abajo y asienta
   de scale mayor a su reposo. El clip-path va en la foto, NUNCA en el contenedor: el contenedor ya lleva
   recortes diagonales propios (split/case/diff/about) y animarselo los rompe.
   El disparador es .in sobre la propia media, que site.js agrega desde el mismo IntersectionObserver.
   Como el contenedor .up de la media solo se funde, no sube dos veces. */
.js .split-media.up.in,.js .about-media.up.in,.js .diff-media.up.in{animation:fade .5s var(--ease) backwards}
/* --s es la escala de reposo: 1 sin parallax, 1.12 cuando el parallax necesita sobrante (ver punto 5) */
@keyframes img-reveal{
  from{clip-path:inset(0 0 100% 0);scale:calc(var(--s,1)*1.12)}
  to{clip-path:inset(0);scale:var(--s,1)}}
.js .split-media:not(.in) img,.js .case-media:not(.in) img,
.js .about-media:not(.in) .im,.js .diff-media:not(.in) .im{clip-path:inset(0 0 100% 0)}
.js .split-media.in img,.js .case-media.in img,
.js .about-media.in .im,.js .diff-media.in .im{animation:img-reveal .9s var(--ease) backwards}
.reveal-fail .split-media img,.reveal-fail .case-media img,.reveal-fail .about-media .im,.reveal-fail .diff-media .im{
  clip-path:none!important;animation:none!important}

/* ---- 5. Parallax ligado al scroll (scroll-driven animations) ----
   `translate` (propiedad individual) para el parallax y `scale` para el asentamiento: componen entre si
   y con el transform del hover de .case-media, sin pelearse. scale 1.12 deja 6% de sobrante por lado y el
   recorrido es de +-5%, asi nunca se ve el borde. El timeline se nombra en el CONTENEDOR (view-timeline):
   las media son overflow:hidden, o sea scroll container, y un view() puesto en la foto mediria contra
   ese contenedor, que nunca scrollea. Solo desktop/tablet y nunca con reduced motion. */
@keyframes img-par{from{translate:0 -5%}to{translate:0 5%}}
@supports (animation-timeline:view()){
  @media(min-width:681px) and (prefers-reduced-motion:no-preference){
    .split-media,.case-media,.about-media,.diff-media{view-timeline:--media block}
    .split-media img,.case-media img,.about-media .im,.diff-media .im{
      --s:1.12;scale:var(--s);
      animation:img-par linear both;animation-timeline:--media;animation-range:cover}
    /* el reveal tambien es una animacion de la foto: se declaran las dos juntas (el shorthand
       `animation` reinicia el timeline, por eso se vuelve a fijar el de cada una) */
    .js .split-media.in img,.js .case-media.in img,.js .about-media.in .im,.js .diff-media.in .im{
      animation:img-reveal .9s var(--ease) backwards,img-par linear both;
      animation-timeline:auto,--media;animation-range:normal,cover}
  }
}

/* ---- 4. Spotlight en tarjetas (solo mouse/lapiz) ----
   Un gradiente radial teal muy suave sigue al cursor via --mx/--my, seteadas por site.js en la propia
   tarjeta. Pseudo-elemento con z-index:-1 dentro de un stacking context propio (isolation): queda sobre
   el fondo de la tarjeta y bajo su contenido, sin tocar el layout ni la interaccion.
   Se activa con .spot (que agrega el JS): sin JS la tarjeta queda como estaba.
   .diag-card no lo lleva: su foto de diagrama es opaca (fondo blanco) y taparia el destello. */
@media(hover:hover) and (pointer:fine){
  .card{position:relative;isolation:isolate}
  .card::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;opacity:0;
    background:radial-gradient(360px circle at var(--mx,50%) var(--my,50%),rgba(60,190,180,.14),transparent 70%);
    transition:opacity .45s var(--ease)}
  .blue-sec .card::before{background:radial-gradient(360px circle at var(--mx,50%) var(--my,50%),rgba(95,214,204,.16),transparent 70%)}
  .card.spot:hover::before{opacity:1}
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media(max-width:1080px){
  .nav-links{display:none}
  .burger{display:flex}
  .hero-media{width:46%;clip-path:polygon(20% 0,100% 0,100% 100%,0 100%)}
  .about-grid,.diff-grid,.contact-grid,.sim-grid{grid-template-columns:minmax(0,1fr);gap:40px}
  /* width:100% es obligatorio: con margin-inline:auto y sin width el item de grid
     pasa a fit-content, y como el contenido es absolute colapsa a 0x0 */
  .about-media,.diff-media{width:100%;max-width:520px;margin-inline:auto}
  .stats{grid-template-columns:1fr 1fr;gap:36px 24px}
  .foot-grid{grid-template-columns:1fr 1fr}
}
/* tablet: la foto ocupa el 46% derecho; el texto se queda en el resto en vez de pisarla */
@media(min-width:681px) and (max-width:1080px){
  .hero-copy{max-width:52%}
}
@media(max-width:680px){
  /* La foto arranca debajo del nav fijo (64px): si no, los cascos de los tecnicos quedaban tapados
     por el logo y el burger. Encima queda el navy del hero, que se funde con el nav. El sobrante de
     arriba para el parallax pasa a ser 64px - 12% (sigue siendo el 12% que recorre site.js). */
  .hero-media{position:relative;width:100%;height:calc(44vh + 64px);clip-path:polygon(0 calc(64px + 3%),100% 64px,100% 100%,0 100%);order:-1}
  .hero-media .ph{top:calc(64px - 12%)}
  /* Entrada del hero en celular: la foto entra sin barrido y el copy arranca antes. El barrido de clip-path
     dejaba la foto con el area visible casi en cero durante ~1 s; Chrome la descartaba como candidata de LCP y
     tomaba al h1, o sea que el LCP quedaba atado al final de la animacion y no a la llegada de la foto. En redes
     lentas la foto llega despues de que el barrido ya termino, asi que ahi nunca se llegaba a ver. */
  .hero-media{animation:none}
  .hero-copy>*{animation-duration:.6s;animation-delay:calc(.1s + var(--i,0) * 70ms)}
  .hero{flex-direction:column;min-height:auto;padding-top:0}
  .hero-in{padding-top:40px;padding-bottom:60px}
  .hero-media .scrim{background:linear-gradient(0deg,var(--bg) 2%,transparent 40%)}
  .hero-copy{padding-top:0}
  .scroll-cue{display:none}
  .num-list{--num-w:30px;--num-gap:14px}
  .num-row{grid-template-columns:var(--num-w) 1fr auto;gap:var(--num-gap)}
  .num-row .go{width:44px;height:44px}
  .num-row .go svg{width:15px;height:15px}
  .num-panel-in{padding-left:0;max-width:none}
  .foot-grid{grid-template-columns:1fr 1fr;gap:28px 24px}
  /* el titulo de grupo debe quedar mas cerca de sus enlaces que del grupo anterior */
  .foot-col .foot-h{margin-bottom:10px}
  /* reserva la zona del FAB de WhatsApp para que no tape el + de cada pregunta */
  .faq-q{padding-right:64px}
  .foot-news{grid-column:1/-1;margin-top:14px}
  /* footer mas corto en mobile: el CTA se conserva, solo se aprietan sus aires */
  .footer{padding-top:48px}
  .foot-cta{padding:40px 0;margin-bottom:0}
  .foot-cta .eyebrow{margin-bottom:20px}
  .foot-cta h2{margin-bottom:28px}
  /* El FAB de WhatsApp tapaba la ultima linea del footer. En vez de reservarle 86px de alto vacios
     abajo, el texto le cede el costado derecho: el FAB queda al lado y el footer es mas corto. */
  .foot-bottom{padding-right:76px}
  /* ---- Footer plegable (lo activa site.js con .folded; sin JS queda abierto en dos columnas) ----
     Empresa, Servicios y Operacion pasan a desplegables cerrados; Contacto queda siempre a la vista
     porque es lo que mas se usa desde el celular. Los enlaces siguen tambien en el menu mobile. */
  .foot-grid.folded{grid-template-columns:minmax(0,1fr);gap:0;padding-top:clamp(20px,5vw,32px)}
  .foot-grid.folded .foot-news{margin-top:32px}
  .fold{border-bottom:1px solid var(--line)}
  .fold .foot-h{margin:0}
  .foot-tg{display:flex;align-items:center;gap:9px;width:100%;min-height:56px;padding:0;background:none;border:0;
    color:inherit;font:inherit;letter-spacing:inherit;text-transform:inherit;text-align:left;cursor:pointer;
    -webkit-tap-highlight-color:transparent}
  .foot-tg .cv{width:14px;height:14px;margin-left:auto;color:var(--mut);transition:transform .3s var(--ease)}
  .foot-tg[aria-expanded="true"] .cv{transform:rotate(180deg)}
  /* grid-template-rows 0fr->1fr: la misma tecnica que los acordeones de la home (unica animacion de
     alto del sitio). visibility saca los enlaces cerrados del orden de Tab, recien al terminar de cerrar. */
  .fold .foot-links{display:grid;grid-template-rows:0fr;visibility:hidden;
    transition:grid-template-rows .35s var(--ease-io),visibility 0s linear .35s}
  .fold.open .foot-links{grid-template-rows:1fr;visibility:visible;transition:grid-template-rows .35s var(--ease-io),visibility 0s}
  .fold .foot-links>div{min-height:0;overflow:hidden}
  .fold .foot-links>div>a:last-child{margin-bottom:10px}
  .sec{padding:clamp(64px,9vw,150px) 0}
  /* el recorte azul del about no debe sangrar fuera del viewport */
  .about-media .blue{inset:-4% -5% -4% 6%}
  /* CTA del hero a ancho completo: dos botones de anchos distintos se leian flojos */
  .hero .actions{gap:12px}
  .hero .actions .btn{flex:1 1 100%;justify-content:space-between}

  /* ---- RAILES HORIZONTALES ---- */
  /* justify-content:center + overflow = la mitad de las tarjetas queda inalcanzable
     a la izquierda (scrollLeft no puede ser negativo). Siempre flex-start. */
  .rail{display:flex;justify-content:flex-start;flex-wrap:nowrap;gap:12px;overflow-x:auto;overscroll-behavior-x:contain;
    scroll-snap-type:x mandatory;scroll-padding-left:var(--pad);
    margin-inline:calc(var(--pad)*-1);padding-inline:var(--pad);padding-bottom:4px;
    -webkit-overflow-scrolling:touch;scrollbar-width:none}
  .rail::-webkit-scrollbar{display:none}
  .rail>*{scroll-snap-align:start;flex:0 0 auto}
  .rail-bar{display:block}

  .stats.rail>.stat{flex:0 0 62%;background:var(--bg-2);border:1px solid var(--line);
    border-radius:var(--r-md);padding:22px 20px}
  .stats.rail>.stat .l{margin-top:8px}

  .diff-items.rail>.diff-item{flex:0 0 80%;border-top:0;background:var(--bg-2);
    border:1px solid var(--line);border-radius:var(--r-md);padding:24px 22px}
  .diff-items.rail>.diff-item p{padding-left:0;margin-top:12px}

  .logos.rail{margin-top:clamp(40px,7vw,90px);gap:12px}
  .logos.rail>span{flex:0 0 44%;min-height:104px;padding:18px}

  /* Grupos de tarjetas (.cards y .diag-cards de todas las paginas): apiladas eran miles de px de
     scroll. En riel se recorren de costado y la que sigue asoma a la derecha para invitar a deslizar.
     Sin subida en mobile, ni escalonada ni en bloque: en un riel las tarjetas ya estan en su lugar y
     moverlas hacia arriba solo distrae (pedido del cliente). align-items:stretch iguala las alturas. */
  .cards.rail,.diag-cards.rail{display:flex;gap:12px;align-items:stretch}
  .cards.rail>*,.diag-cards.rail>*{flex:0 0 78%}
  .js .rail[data-stagger]>*,.js .rail-wrap.up{opacity:1;animation:none!important}
}
@media(max-width:420px){
  .foot-grid{grid-template-columns:minmax(0,1fr)}
  /* 31px es el piso de la rampa, pero 'Implementaciones' a 900 de peso no entra en 280px */
  .phero h1{font-size:clamp(25px,8vw,31px)}
}
@media(max-width:520px){
  .stats:not(.rail){grid-template-columns:1fr}
  .stats.rail>.stat{flex:0 0 72%}
  .diff-items.rail>.diff-item{flex:0 0 86%}
  .logos.rail>span{flex:0 0 52%}
  .cards.rail>*,.diag-cards.rail>*{flex:0 0 84%}
}
:focus-visible{outline:2px solid var(--teal);outline-offset:3px}
/* los campos reemplazan el outline por un subrayado animado; el resto mantiene el anillo */
.form :focus-visible,.sim-field input:focus-visible{outline:0}
.rail:focus-visible{outline-offset:-3px}

/* ============================================================
   RESPONSIVE de los componentes de sección
   ============================================================ */
@media(max-width:1080px){
  .split,.band-in{grid-template-columns:1fr;gap:40px}
  /* en una sola columna la media siempre va DESPUÉS del texto:
     invertir el orden en mobile deja la página empezando por una foto muda */
  .split.rev>.split-media{order:0}
  .split-media{width:100%;max-width:560px;margin-inline:auto}
  .phero-media{width:38%;clip-path:polygon(26% 0,100% 0,100% 100%,0 100%)}
  .apps{grid-template-columns:repeat(4,minmax(0,1fr))}
  .case,.case:nth-child(even){grid-template-columns:1fr;gap:28px}
  .case:nth-child(even) .case-media{order:0}
  .svc-row{grid-template-columns:clamp(36px,5vw,50px) minmax(0,1fr) auto;gap:14px 20px;align-items:center}
  .svc-row .n{align-self:center}
  .svc-row h3{grid-column:2;grid-row:1}
  .svc-row .go{grid-column:3;grid-row:1;align-self:center}
  .svc-row p{grid-column:2/-1;grid-row:2;margin-top:0}
  .band .actions{flex-direction:row;flex-wrap:wrap}
  .band .actions .btn{flex:1 1 240px}
}
@media(max-width:680px){
  /* la media del hero interior tapaba el titular: en mobile es solo un fondo tenue */
  .phero{padding-top:clamp(116px,30vw,150px)}
  .phero-media{width:100%;clip-path:none;opacity:.48}
  .phero-media::after{background:linear-gradient(180deg,rgba(6,21,46,.5) 0%,rgba(6,21,46,.78) 42%,var(--bg) 94%)}
  .checks.two{grid-template-columns:1fr}
  .steps,.values{grid-template-columns:1fr}
  @media(hover:hover){.svc-row:hover>.n,.svc-row:hover>h3,.svc-row:hover>p{transform:none}}
  .svc-row .go{width:44px;height:44px}
  .subnav{display:none}
  .band .actions .btn{flex:1 1 100%}
  .partners{grid-template-columns:repeat(auto-fill,minmax(118px,1fr))}
  .partners span{min-height:80px;padding:14px}
  .partners img{max-height:30px}
  .apps{grid-template-columns:repeat(2,minmax(0,1fr))}
  .case-copy .metrics{grid-template-columns:1fr 1fr;gap:20px}
  .faq-q{font-size:var(--fs-body-l)}
}


/* ============================================================
   PREFERS-REDUCED-MOTION — por niveles, no un interruptor.
   Nivel 1 (se elimina): zoom del hero, indicador de scroll en bucle, desplazamientos
     de entrada/hover/presion, movimiento del menu, Lenis (en site.js).
   Nivel 2 (se suaviza): el menu mobile entra con un fundido corto en vez de deslizarse.
   Nivel 3 (se conserva): cambios de color, borde, fondo y opacidad, y el anillo de foco.
   El contenido que se revela queda visible desde el primer cuadro.
   ============================================================ */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important;animation-iteration-count:1!important;animation-delay:0s!important;
    scroll-behavior:auto!important;
    /* solo sobreviven las propiedades que no implican desplazamiento; 150ms para que nada "teletransporte" */
    transition-property:color,background-color,border-color,opacity,box-shadow,fill,stroke,visibility!important;
    transition-duration:.15s!important;transition-delay:0s!important}
  .hero-media .ph{transform:none;animation:none!important}
  /* la entrada del hero queda en su estado final desde el primer cuadro (ni barrido ni subida) */
  .hero-media,.hero-copy>*,.scroll-cue{animation:none!important}
  .scroll-cue .ln::after{animation:none!important}
  .js .up,.js [data-stagger]>*{opacity:1}
  .js .up.in,.js [data-stagger].in>*{animation:none!important}
  /* titulos y fotos: contenido visible desde el primer cuadro, sin lineas desplazadas, barridos, zoom ni parallax */
  .lt{transform:none!important;animation:none!important}
  .split-media img,.case-media img,.about-media .im,.diff-media .im{
    clip-path:none!important;animation:none!important;scale:none!important;translate:none!important}
  .btn:active,.wa:active,.wa:hover,.card:hover,.logos span:hover,.partners span:hover,.foot-social a:hover,
  .num-row:hover>.n,.num-row:hover>.t,.svc-row:hover>.n,.svc-row:hover>h3,.svc-row:hover>p,
  .case:hover .case-media img,.quiz-result .btn:hover{transform:none!important}
  .mobile-menu{transform:none!important;opacity:0}
  .mobile-menu.open{opacity:1}
  .mobile-menu,.mobile-menu.open{transition-property:opacity,visibility!important}
  /* el skip-link sigue fuera de pantalla (no es movimiento percibido); solo pierde la transicion */
  .skip{transition:none!important}
}

/* Sin JS no hay burger que abra el menu: se muestran los enlaces principales en una fila que envuelve. */
@media(max-width:1080px){
  html:not(.js) .burger,html:not(.js) .sub-toggle{display:none}
  html:not(.js) .nav{background:var(--bg)}
  html:not(.js) .nav-in{flex-wrap:wrap;row-gap:16px;padding-bottom:14px}
  html:not(.js) .nav-links{display:flex;flex-wrap:wrap;gap:12px 20px;width:100%}
  html:not(.js) .phero{padding-top:clamp(170px,42vw,220px)}
  html:not(.js) .nav-links .subnav{display:none}
}