/* Omnitec v2 — las bandas. Cada una ocupa pantalla o casi,
   y dos contiguas nunca comparten suelo. */

[data-reveal]{opacity:0;transform:translateY(28px);
  transition:opacity .8s var(--muelle) var(--d,0s), transform .8s var(--muelle) var(--d,0s)}
[data-reveal].visto{opacity:1;transform:none}
html.sin-movimiento [data-reveal]{opacity:1;transform:none;transition:none}


/* ══ HERO ═════════════════════════════════════════════════ */
.hero{position:relative;min-height:100svh;display:grid;place-items:center;
  padding:150px var(--mx) 90px;overflow:hidden;isolation:isolate;
  background:radial-gradient(120% 90% at 78% 45%, #013067 0%, #001A57 42%, #000C2B 100%)}

/* El isotipo va como imagen intacta: no rota, no se descompone. Sólo se traslada
   y se escala, que es lo que el manual permite. */
.hero-fondo{position:absolute;inset:0;z-index:-2;pointer-events:none}
.hero-iso{position:absolute;top:46%;right:-12%;
  width:min(82vw,920px);height:auto;
  transform:translate(calc(var(--ix,0px)*-1), calc(-50% + var(--iy,0px) + var(--sy,0px))) scale(var(--is,1));
  opacity:var(--io,0);--is:.94;
  transition:opacity 1.1s var(--muelle), transform .9s var(--muelle);
  will-change:transform}
.hero.listo .hero-iso{--io:.52;--is:1}

.hero-atm{position:absolute;inset:0;width:100%;height:100%;
  transform:translate(var(--ax,0px), var(--ay,0px));
  transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.atm-p{transform:scale(.4);transform-origin:center;transform-box:fill-box;opacity:0;
  transition:transform .9s var(--muelle) var(--d,0s), opacity .7s ease var(--d,0s)}
.hero.listo .atm-p{transform:none;opacity:1}

/* Deriva. Va en el hijo para no pisar la transición de entrada del padre.
   Recorrido asimétrico y desfase propio: así nunca coinciden y no se lee como bucle. */
.atm-f{transform-box:fill-box;transform-origin:center;
  animation:flotar var(--dur,12s) ease-in-out var(--fase,0s) infinite}
@keyframes flotar{
   0%  {transform:translate(0,0)}
  25%  {transform:translate(var(--ampx),calc(var(--amp)*-1))}
  50%  {transform:translate(calc(var(--ampx)*-.5),calc(var(--amp)*-.35))}
  75%  {transform:translate(calc(var(--ampx)*-1),var(--amp))}
 100%  {transform:translate(0,0)}
}

/* Velo radial tras el texto: garantiza el contraste pase lo que pase detrás. */
.hero::before{content:"";position:absolute;inset:0;z-index:-1;
  background:radial-gradient(58% 52% at 44% 48%, rgba(0,10,36,.86) 0%,
    rgba(0,11,38,.62) 46%, rgba(0,12,40,.18) 74%, transparent 100%),
    linear-gradient(178deg,rgba(0,12,43,.5) 0%,transparent 30%,
    transparent 68%,rgba(0,10,34,.72) 100%)}

@media(max-width:900px){
  .hero-iso{right:-32%;width:120vw;top:44%}
  .hero.listo .hero-iso{--io:.3}
}
html.sin-movimiento .hero-iso,html.sin-movimiento .hero-atm,html.sin-movimiento .atm-p{transition:none}
html.sin-movimiento .atm-f{animation:none}
html.sin-movimiento .hero-iso{--io:.52;--is:1}
html.sin-movimiento .atm-p{transform:none;opacity:1}

.hero-cuerpo{width:min(100%,1120px);color:#fff;text-align:center}
.hero h1{max-width:15ch;margin-inline:auto;text-wrap:balance}
.hero .kicker{color:#fff;opacity:.92;margin-bottom:26px}
.hero .lede{margin:30px auto 0;max-width:46ch;color:rgba(255,255,255,.9)}
.hero-acciones{margin-top:42px;display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.hero-pie{position:absolute;left:0;right:0;bottom:0;padding:0 var(--mx) 30px;
  display:flex;justify-content:center;
  color:rgba(255,255,255,.82);font-size:13.5px}
.hero-sedes{display:inline-flex;align-items:center;gap:9px}
.hero-pie b{color:#fff;font-weight:900}
/* alineada con la línea base del texto, no con la caja */
.pin{width:15px;height:15px;flex:none;color:var(--cian);transform:translateY(-.5px)}
@media(max-width:700px){.hero-pie{font-size:12.5px}}

/* ══ LAS CINCO LÍNEAS DE SOLUCIONES ════════════════════════════════════ */
.lineas{background:var(--navy-900);color:#fff;padding-block:clamp(76px,8vw,124px) 0}
/* Dos columnas: titular a la izquierda, párrafo a la derecha. Mismo patrón que
   .sectores .cab, que ya hace esto en la banda de abajo. Al ocupar el ancho de .env
   —antes se capaba a 980 px y se centraba— la cabecera cambia de registro respecto al
   acordeón a sangre que va debajo. */
.lineas-cab{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);
  gap:clamp(26px,4vw,72px);align-items:center;margin-bottom:clamp(44px,5vw,72px)}
.lineas-cab h2{max-width:20ch;text-wrap:balance}
.lineas-cab .kicker{color:var(--cian);display:block;margin-bottom:20px}
.lineas-cab p{max-width:62ch;color:rgba(255,255,255,.7);
  font-weight:300;font-size:clamp(17px,1.6vw,21px);line-height:1.5}
@media(max-width:900px){.lineas-cab{grid-template-columns:1fr;gap:26px}}

.acordeon{display:flex;height:clamp(500px,68vh,720px);overflow:hidden;
  --plus:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M43.75 0.00L56.25 0.00a10.42 10.42 0 0 1 10.42 10.42L66.67 33.33L89.58 33.33a10.42 10.42 0 0 1 10.42 10.42L100.00 56.25a10.42 10.42 0 0 1 -10.42 10.42L66.67 66.67L66.67 89.58a10.42 10.42 0 0 1 -10.42 10.42L43.75 100.00a10.42 10.42 0 0 1 -10.42 -10.42L33.33 66.67L10.42 66.67a10.42 10.42 0 0 1 -10.42 -10.42L0.00 43.75a10.42 10.42 0 0 1 10.42 -10.42L33.33 33.33L33.33 10.42a10.42 10.42 0 0 1 10.42 -10.42Z' fill='%23fff'/%3E%3C/svg%3E")}
.panel{position:relative;flex:1 1 0;min-width:0;display:flex;flex-direction:column;
  justify-content:flex-end;padding:34px 30px;overflow:hidden;color:#fff;isolation:isolate;
  background:var(--g);transition:flex-grow .62s var(--muelle)}
/* Cuatro capas: foto → velo de marca → ventana del plus → velo de legibilidad.
   El duotono va horneado en el .webp, así que aquí no hace falta ningún modo de fusión
   y el techo de luminancia del texto no depende del navegador. El fondo del propio
   .panel es el degradado de siempre: si la foto no carga, el panel queda como antes. */
.panel::before{content:"";position:absolute;inset:0;z-index:-3;
  background-image:var(--gv),var(--f);background-size:cover;background-position:center;
  transition:transform .8s var(--muelle)}
.panel::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(178deg,rgba(0,10,36,.42) 0%,rgba(0,10,36,.20) 34%,rgba(0,10,36,.34) 58%,rgba(0,10,36,.80) 100%);
  transition:opacity .5s}
/* La ventana: la MISMA foto, mismo inset y mismo cover, recortada al plus. Coincide al
   píxel con la capa de abajo, así que el plus enseña justo lo que tapa el velo. */
.panel-vent{position:absolute;inset:0;z-index:-2;pointer-events:none;opacity:.95;
  /* El realce es aditivo, no multiplicativo: un brightness() sobre las zonas oscuras de
     la foto no levanta nada y el plus sólo se dibujaba donde la imagen ya era clara, con
     lo que parecía una mancha. Una capa plana de blanco sube por igual todo el hueco. */
  background-image:linear-gradient(rgba(255,255,255,.12),rgba(255,255,255,.12)),var(--f);
  background-size:cover;background-position:center;
  filter:saturate(1.1);
  -webkit-mask-image:var(--plus);mask-image:var(--plus);
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-size:var(--ps) var(--ps);mask-size:var(--ps) var(--ps);
  -webkit-mask-position:var(--pp);mask-position:var(--pp);
  transition:opacity .6s var(--muelle),transform .8s var(--muelle)}
.panel + .panel{box-shadow:-1px 0 0 rgba(255,255,255,.16)}
.acordeon:hover .panel,.acordeon:focus-within .panel{flex-grow:.78}
.acordeon:hover .panel:hover,.acordeon .panel:focus-visible{flex-grow:2.6}
.acordeon .panel:hover::before,.acordeon .panel:focus-visible::before,
.acordeon .panel:hover .panel-vent,.acordeon .panel:focus-visible .panel-vent{transform:scale(1.06)}
.acordeon .panel:hover .panel-vent,.acordeon .panel:focus-visible .panel-vent{opacity:1}
.acordeon .panel:hover::after,.acordeon .panel:focus-visible::after{opacity:.9}

.panel-num{font-size:13px;font-weight:900;letter-spacing:.14em;color:#fff;
  margin-bottom:auto}
.panel-n{font-size:clamp(19px,1.55vw,25px);font-weight:900;letter-spacing:-.03em;line-height:1.06;
  text-wrap:balance}
.panel-d{margin-top:14px;font-size:15.5px;line-height:1.45;color:rgba(255,255,255,.9);
  max-width:30ch;opacity:0;max-height:0;overflow:hidden;
  transition:opacity .4s .1s,max-height .6s var(--muelle)}
.panel-ir{margin-top:18px;display:inline-flex;align-items:center;gap:9px;font-size:14.5px;
  font-weight:900;opacity:0;transform:translateY(6px);
  transition:opacity .4s .16s,transform .5s var(--muelle) .16s}
.acordeon .panel:hover .panel-d,.acordeon .panel:focus-visible .panel-d{opacity:1;max-height:8em}
.acordeon .panel:hover .panel-ir,.acordeon .panel:focus-visible .panel-ir{opacity:1;transform:none}
.panel-meta{margin-top:12px;font-size:12.5px;font-weight:800;letter-spacing:.1em;
  color:rgba(255,255,255,.88);text-transform:uppercase}
@media(hover:none),(max-width:900px){
  .acordeon{flex-direction:column;height:auto}
  .panel{flex:none;min-height:210px;padding:26px 24px}
  /* apilado: el panel es ancho y bajo, así que va la variante apaisada y la ventana encoge */
  .panel::before{background-image:var(--gv),var(--fm)}
  .panel-vent{background-image:var(--fm);
    -webkit-mask-size:190px 190px;mask-size:190px 190px;
    -webkit-mask-position:right -34px top 16px;mask-position:right -34px top 16px}
  .acordeon:hover .panel,.acordeon .panel:hover{flex-grow:0}
  .panel + .panel{box-shadow:0 -1px 0 rgba(255,255,255,.16)}
  .panel-d,.panel-ir{opacity:1;max-height:none;transform:none}
}
html.sin-movimiento .panel,html.sin-movimiento .panel::before,html.sin-movimiento .panel-vent,
html.sin-movimiento .panel-d,html.sin-movimiento .panel-ir{transition-duration:.01ms !important}


/* ══ ALIADOS ══════════════════════════════════════════════ */
.aliados{background:var(--papel);padding-block:clamp(72px,8vw,116px);overflow:hidden}
.aliados-cab{text-align:center;width:min(100%,980px);margin:0 auto 14px}
.aliados-cab h2{max-width:18ch;margin-inline:auto;text-wrap:balance}
.aliados-cab .kicker{color:var(--azul);display:block;margin-bottom:18px}
.aliados p.sub{text-align:center;max-width:50ch;margin:20px auto clamp(44px,5vw,68px);
  color:var(--gris);font-weight:300;font-size:clamp(17px,1.6vw,21px);line-height:1.5}
.marq{position:relative;padding-block:12px;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent)}
.marq-fila{display:flex;width:max-content;align-items:center;
  animation:correr var(--dur,72s) linear infinite}
.marq-set{display:flex;gap:clamp(44px,5vw,80px);align-items:center;
  padding-right:clamp(44px,5vw,80px)}
.marq-fila.inv{animation-direction:reverse}
.marq:hover .marq-fila{animation-play-state:paused}
@keyframes correr{to{transform:translateX(-50%)}}
.marq a{display:grid;place-items:center;height:64px}
.marq img{object-fit:contain;filter:grayscale(1);opacity:.5;
  transition:filter .3s,opacity .3s,transform .35s var(--muelle)}
.marq a:hover img,.marq a:focus-visible img{filter:none;opacity:1;transform:scale(1.09)}


/* Sin movimiento no hay bucle, así que la copia decorativa sobra: si se deja, se ven
   los 13 logos por duplicado. Las dos marquesinas se funden además en un único flujo:
   display:contents disuelve los envoltorios y deja los 26 <a> como hijos directos de
   .marq-env, que ya sí llena las filas de corrido sin dejar un logo huérfano. */
html.sin-movimiento .marq,html.sin-movimiento .marq-fila,html.sin-movimiento .marq-set{display:contents}
html.sin-movimiento .marq-fila{animation:none}   /* display:contents la haría irrelevante, pero seguiría corriendo */
html.sin-movimiento .marq-set.dup{display:none}
html.sin-movimiento .marq-env{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;
    max-width:var(--tope);margin-inline:auto;padding-inline:var(--mx);
    gap:clamp(26px,3vw,46px) clamp(34px,4vw,64px)}


/* ══ PRUEBA ═══════════════════════════════════════════════ */
.prueba{position:relative;isolation:isolate;background:var(--navy);color:#fff;
  padding-block:clamp(76px,8vw,124px);overflow:hidden}
.prueba-foto{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;
  opacity:.3}
.prueba::before{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(96deg,rgba(0,26,87,.97) 0%,rgba(0,26,87,.9) 46%,rgba(0,20,68,.78) 100%)}
.prueba .env{position:relative;z-index:1}
.prueba-cab h2{max-width:20ch;text-wrap:balance}
.prueba-cab .kicker{color:var(--lima);display:block;margin-bottom:18px}
/* Mismo registro que .lineas-cab p, pero a la izquierda y sin centrar la caja:
   aquel bloque va centrado y éste no. */
/* La medida se estira hasta cubrir tres de las cuatro casillas de cifra que van debajo:
   a 58ch el párrafo era la pieza más estrecha del bloque —más que el propio titular— y
   dejaba medio ancho vacío a la derecha. */
.prueba-cab p{margin-top:24px;max-width:78ch;color:rgba(255,255,255,.78);
  font-weight:300;font-size:clamp(17px,1.6vw,21px);line-height:1.55}
.cifras{margin-top:clamp(44px,5vw,72px);display:grid;
  grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:1px;background:rgba(255,255,255,.16)}
.cifra{background:var(--navy);padding:30px 26px 34px}
.cifra .k{font-size:clamp(42px,5vw,74px);font-weight:900;letter-spacing:-.05em;line-height:.92;color:#fff}
.cifra .v{margin-top:16px;font-size:15px;color:rgba(255,255,255,.72);line-height:1.5}

/* ══ SECTORES ═════════════════════════════════════════════ */
/* Dos columnas: el título a la izquierda y las tarjetas ocupando la derecha, que es
   la disposición original de esta banda. Las ocho tarjetas son iguales. Sin :hover:
   no son enlaces y no deben fingirlo, que era el defecto de las pastillas de origen. */
.sectores{position:relative;isolation:isolate;overflow:hidden;
  background:var(--niebla);padding-block:clamp(68px,7vw,104px)}
/* Un plus y sólo uno, enorme, de suelo, desde la esquina superior derecha. La regla
   de la casa es que el plus o es enorme y hace de suelo o no está.
   Sangra por arriba y por la derecha, pero no tanto como para dejar de leerse como
   cruz: recortado por dos lados se convertía en un rectángulo redondeado. */
/* Detrás de todo, desde la esquina superior derecha, sangrando por arriba y por la
   derecha. Para que se lea como cruz y no como un fragmento suelto necesita suelo
   despejado, y por eso las tarjetas arrancan más abajo que el título: ese respiro
   superior es lo que deja ver el cruce. Probado por delante como marca de agua sobre
   las tarjetas y descartado: sobre blanco se leía como suciedad, no como marca. */
.sec-plus{position:absolute;z-index:-1;right:calc(-1 * clamp(30px,4vw,74px));
  top:calc(-1 * clamp(90px,11vw,190px));
  width:clamp(320px,40vw,600px);height:clamp(320px,40vw,600px);
  opacity:.055;pointer-events:none}
.sec-rej{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.7fr);
  gap:clamp(26px,3.4vw,58px);align-items:start}
/* Sobre --niebla el verde de marca se queda en 4,00:1 y un kicker de 12 px pide
   4,5:1. --verde-700 es el mismo verde con menos luminosidad, igual que --azul-600
   lo es del azul medio. Ningún hue nuevo. */
.sec-cab .kicker{color:var(--verde-700);display:block;margin-bottom:18px}
.sec-cab h2{max-width:11ch}
.sec-cab p{margin-top:22px;font-size:16px;line-height:1.55;color:var(--gris);max-width:38ch}
.sec-tar{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(10px,1.1vw,15px)}
.sec-t{display:flex;flex-direction:column;justify-content:space-between;gap:8px;
  background:var(--papel);border-radius:16px;padding:clamp(15px,1.4vw,21px);
  min-height:clamp(88px,7.4vw,106px);
  box-shadow:0 1px 0 rgba(0,26,87,.1),0 2px 10px -6px rgba(0,26,87,.28)}
.sec-t .ico{width:32px;height:32px;flex:none;color:var(--navy)}
/* El tope de 22px no es estético: «Telecomunicaciones» es una palabra sola, no puede
   partirse, y por encima de ahí se sale de su tarjeta. */
.sec-t span{font-size:clamp(16px,1.28vw,19px);font-weight:900;color:var(--navy);
  letter-spacing:-.03em;line-height:1.1;text-wrap:balance}
.secs{display:flex;flex-wrap:wrap;gap:10px}
.sec{font-size:16px;font-weight:800;color:var(--navy);background:#fff;padding:13px 24px;
  border-radius:999px;box-shadow:0 1px 0 rgba(0,26,87,.1),0 2px 10px -6px rgba(0,26,87,.28);
  transition:transform .3s var(--muelle),background-color .25s,color .25s}
.sec:hover{transform:translateY(-3px);background:var(--navy);color:#fff}
@media(max-width:1099px){
  .sec-rej{grid-template-columns:1fr;gap:clamp(30px,4vw,44px)}
  .sec-cab h2{max-width:18ch}
  .sec-cab p{max-width:62ch}
}
@media(max-width:699px){
  .sec-tar{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sec-t{min-height:94px;gap:8px}
  .sec-t .ico{width:28px;height:28px}
/* Bajo 480 px la tarjeta a dos columnas no da el ancho de «Telecomunicaciones», que
   es una palabra sola y no puede partirse. Pasa a una columna y a formato compacto,
   icono y nombre en línea. */
  /* En estrecho el plus cae por detrás del párrafo: baja de opacidad para que el gris
     del texto no pierda contraste medido sobre el píxel compuesto. */
  .sec-plus{opacity:.035}
}
@media(max-width:479px){
  .sec-tar{grid-template-columns:1fr}
  .sec-t{flex-direction:row;align-items:center;justify-content:flex-start;
    gap:14px;min-height:74px;padding:16px 18px}
  .sec-t .ico{width:28px;height:28px}
}

/* ══ CIERRE ═══════════════════════════════════════════════ */
.cierre{position:relative;background:var(--grad);color:#fff;overflow:hidden;
  padding-block:clamp(84px,9vw,148px);isolation:isolate}
.cierre-campo{position:absolute;inset:0;width:100%;height:100%;z-index:-2;pointer-events:none}
.cierre::before{content:"";position:absolute;inset:-10%;z-index:-1;
  background:radial-gradient(ellipse 62% 58% at 50% 42%, rgba(0,14,46,.62) 0%,
             rgba(0,14,46,.34) 52%, transparent 76%)}
.cierre-cab{text-align:center;width:min(100%,1000px);margin:0 auto}
.cierre-cab h2{max-width:16ch;margin-inline:auto;text-wrap:balance}
.cierre .kicker{color:#fff;opacity:.8;display:block;margin-bottom:22px}
.cierre .lede{margin:26px auto 0;max-width:46ch;color:rgba(255,255,255,.94)}
.cierre-acciones{margin-top:44px;display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.oficinas{margin-top:clamp(56px,6vw,88px);display:grid;
  grid-template-columns:repeat(auto-fit,minmax(268px,1fr));gap:clamp(18px,2vw,30px)}
/* Con cuatro sedes (Perú, 2026-09-28) auto-fit deja un 3+1 huérfano entre ~900 y
   ~1180 px. Se fija: cuatro en ancho, dos por dos en medio, una en móvil. */
@media (min-width:600px){.oficinas{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1180px){.oficinas{grid-template-columns:repeat(4,minmax(0,1fr))}}
.oficina{position:relative;border-radius:22px;overflow:hidden;background:transparent}
.oficina img{width:100%;aspect-ratio:4/5;object-fit:cover;
  transition:transform .8s var(--muelle);opacity:.92}
.oficina img.calada{-webkit-mask-image:var(--hueco);mask-image:var(--hueco);
  -webkit-mask-size:100% 100%;mask-size:100% 100%;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}
.oficina:hover img{transform:scale(1.05)}
.oficina-txt{position:absolute;left:0;right:0;bottom:0;padding:26px 24px;
  background:linear-gradient(0deg,rgba(0,10,36,.96) 34%,rgba(0,10,36,.72) 68%,transparent)}
.oficina h3{font-size:26px;letter-spacing:-.03em}
/* Correo (y web, si la hay) de cada sede. Las direcciones postales salieron el
   2026-09-28 por decisión del cliente; con ellas se fue .of-dir. */
.of-datos{margin-top:12px;display:flex;flex-direction:column;gap:6px}
.of-correo{font-size:14.5px;font-weight:700;color:#fff;width:max-content;
  text-decoration:underline;text-decoration-color:rgba(255,255,255,.45);
  text-underline-offset:3px;transition:text-decoration-color .18s}
.of-correo:hover{text-decoration-color:#fff}
/* La web de la sede va por debajo del correo y con menos peso: el correo sigue
   siendo la vía de contacto, el enlace es información de la oficina. */
.of-web{font-size:14px;color:rgba(255,255,255,.88);width:max-content;
  text-decoration:underline;text-decoration-color:rgba(255,255,255,.32);
  text-underline-offset:3px;transition:text-decoration-color .18s,color .18s}
.of-web:hover{color:#fff;text-decoration-color:#fff}
/* A 1440 el texto del cierre cae sobre la parte navy del degradado y el velo radial
   basta. Al estrechar, el degradado de 118° comprime sus paradas y el lima —el punto
   más claro de la marca— se mete debajo del titular: medido sobre el píxel, el botón
   hueco bajaba a 3,18:1 y el lede a 4,05:1. El velo se agranda y se densifica en
   estrecho; el degradado no se toca. */
@media(max-width:820px){
  .cierre::before{background:radial-gradient(ellipse 120% 74% at 50% 42%,
    rgba(0,14,46,.82) 0%, rgba(0,14,46,.64) 54%, rgba(0,14,46,.34) 84%)}
}
html.sin-movimiento .oficina img,html.sin-movimiento .sec{transition:none}


/* ══ PÁGINA DE SERVICIO ═══════════════════════════════════ */
/* Altura estándar en las ocho páginas interiores. Sin esto la altura es puramente el
   contenido, y las dos variables —si el h1 cae en una línea o en dos, y si el lede cae
   en tres o en cuatro— daban 732 · 732 · 778 · 815 · 778 en las cinco de línea.
   `background:var(--g)` estaba aquí y no pintaba nada: --g no se define en ninguna
   parte de assets/, y el `style` en línea de cada página siempre ganaba. */
.s-hero{position:relative;color:#fff;padding:clamp(140px,14vw,190px) 0 clamp(56px,6vw,88px);
  min-height:clamp(700px,calc(11.5vw + 656px),820px);display:flex;flex-direction:column;
  overflow:hidden}
.s-hero .env{position:relative;z-index:2;width:100%;flex:1;display:flex;flex-direction:column}
.s-migas{font-size:13.5px;color:rgba(255,255,255,.84);margin-bottom:26px}
.s-migas a:hover{color:#fff;text-decoration:underline}
.s-hero h1{font-size:clamp(38px,6vw,88px);max-width:15ch}
/* El `auto` de abajo se come el espacio libre; el margin-top de .s-datos sigue siendo
   el hueco mínimo y se suma encima. Con espacio libre 0 —ciberseguridad, la más alta—
   el resultado es idéntico al de antes. */
.s-hero .lede{margin-top:26px;max-width:44ch;color:rgba(255,255,255,.92);margin-bottom:auto}
.s-datos{margin-top:clamp(38px,4vw,56px);display:flex;gap:1px;background:rgba(255,255,255,.28);
  border-radius:16px;overflow:hidden;width:max-content;max-width:100%;flex-wrap:wrap}
/* Al envolver en móvil, la última fila dejaba a la vista el fondo del contenedor
   —que es la línea de 1 px— como un rectángulo claro y vacío. Creciendo, cada fila
   se llena. */
.s-datos > div{background:rgba(0,14,46,.66);padding:18px 26px;min-width:150px;flex:1 0 auto}
.s-datos .k{font-size:30px;font-weight:900;letter-spacing:-.04em;line-height:1}
.s-datos .v{font-size:13px;color:rgba(255,255,255,.88);margin-top:6px}

/* El círculo que se deshace en pluses. Se coloca como el isotipo de la home —caja
   propia anclada al borde libre, no `inset:0`— porque `slice` sobre un viewBox tan
   apaisado recentra el dibujo en móvil y lo mete debajo del texto. Con caja propia el
   encuadre se manda desde aquí, que es lo que hace .hero-iso. */
.s-atm{position:absolute;top:50%;right:-7%;width:min(62vw,820px);height:auto;
  transform:translateY(-50%);z-index:1;pointer-events:none;overflow:visible}

/* Sólo derivan los pluses sueltos. Los del <mask> se quedan quietos: si flotaran, el
   mordisco se despegaría del canto del disco y la erosión dejaría de leerse.
   La deriva es una traslación pura, así que va sobre el <g> —halo y plus viajan
   juntos— sin que transform-box entre en juego. */
.s-atm-f{transform-box:fill-box;transform-origin:center;
  animation:flotar var(--dur,12s) ease-in-out var(--fase,0s) infinite}

/* Luminiscencia. El halo es un degradado radial pintado, no un filtro: un
   `filter:blur()` o un `drop-shadow` sobre 18 elementos que se animan sin parar
   obliga al navegador a rehacer el filtro en cada fotograma. Esto se compone en GPU
   y no cuesta nada. Late en su propio ciclo, distinto del de la deriva. */
.s-atm-luz{opacity:var(--l0,.4);
  animation:latir var(--durl,9s) ease-in-out var(--fasl,0s) infinite}
@keyframes latir{
   0%,100%{opacity:var(--l0)}
      50% {opacity:var(--l1)}
}
html.sin-movimiento .s-atm-f,html.sin-movimiento .s-atm-luz{animation:none}

@media(max-width:900px){
  /* A un ancho de móvil el texto ocupa TODA la caja: no hay esquina a la que apartar
     el dibujo, así que la única palanca es apagarlo. Pasa a ser atmósfera, que es lo
     mismo que hace el isotipo de la home (.hero-iso, --io:.3). El valor está medido
     sobre el píxel renderizado, no elegido a ojo. */
  .s-atm{top:auto;bottom:-10%;right:-38%;width:120vw;transform:none;opacity:.27}
}

.s-caps{background:var(--papel);padding-block:clamp(66px,7vw,104px)}
.s-caps .kicker{color:var(--azul);display:block;margin-bottom:16px}
.cap{display:grid;grid-template-columns:88px minmax(0,1fr);gap:clamp(20px,3vw,48px);
  padding-block:clamp(30px,3.2vw,46px);border-top:1px solid var(--linea);align-items:start}
.cap:first-of-type{border-top:2px solid var(--navy)}
.cap-num{font-size:13px;font-weight:900;letter-spacing:.12em;color:var(--gris);padding-top:9px}
.cap h3{font-size:clamp(21px,2.2vw,32px);color:var(--navy);max-width:30ch}
.cap p{margin-top:14px;max-width:58ch;color:var(--gris)}
@media(max-width:720px){.cap{grid-template-columns:1fr;gap:8px}}

/* ── Servicios: la lista original a la izquierda, el servidor anclado a la derecha
   Piloto en Infraestructura TI.
   Las reglas .cap de arriba NO se tocan: la columna de contenido es literalmente la
   misma lista que usan las otras cuatro líneas, al mismo tamaño. Lo único que se le
   añade es el estado de aparición. La franja conserva su altura natural —no hay
   carril ni filas estiradas—; lo que se ancla es el servidor.
   El orden importa: primero se enciende la bahía, luego el destello sale por el canto
   del chasis, y sólo entonces el codo viaja hasta el punto. Así el hilo se lee como
   emitido por el aparato y no como un dibujo puesto encima. */
.s-caps-srv{--tope-pin:96px}
/* position:relative lo hace offsetParent de las filas, y el JS mide con offsetTop:
   getBoundingClientRect se movería con el translateY de la aparición. */
.srv-doble{position:relative}

@media(min-width:1081px){
  .srv-doble{display:grid;grid-template-columns:minmax(0,1fr) clamp(300px,31vw,430px);
    gap:clamp(40px,5vw,84px);margin-top:clamp(30px,3.4vw,50px)}
  .srv-lista{grid-column:1;grid-row:1;min-width:0}
  /* Deliberadamente SIN align-items: el stretch por defecto es lo único que le da
     recorrido al sticky. Ponerle `start` aquí lo colapsa y el anclaje desaparece
     sin dar ningún error. */
  .srv-fig{grid-column:2;grid-row:1;position:relative;z-index:1}
  /* Cada línea trae la proporción de su aparato en --apw/--aph. El min(100%,…) es
     lo que impide que el de Ciberseguridad, que es cuadrado, se salga de su columna
     —y mantiene la proporción exacta en vez de dejar el SVG apaisado dentro de una
     caja más ancha, que rompería la medida de los cables. */
  .srv-pin{position:sticky;top:var(--tope-pin);--alto:min(70svh,700px);
    width:min(100%, calc(var(--alto) * var(--apw,240) / var(--aph,380)));
    aspect-ratio:var(--apw,240) / var(--aph,380);margin-inline:auto}
}
.srv-ap{display:block;width:100%;height:100%}

/* Aparición de la fila. Es el único añadido sobre las reglas .cap originales, y va
   acotado al piloto para que las otras cuatro páginas no lo vean. */
/* Los tiempos de SALIDA viven en la regla base y los de ENTRADA en .on. Al subir,
   el efecto se deshace en orden inverso —punto, cable, fila, bahía— y tiene que ir
   más rápido y sin espera: una salida con los mismos 0,22 s de retardo que la
   entrada hace que la página se sienta pegajosa. */
.s-caps-srv .srv-doble.js .cap{opacity:0;transform:translateY(24px);
  transition:opacity .34s var(--muelle) .04s,transform .34s var(--muelle) .04s}
.s-caps-srv .srv-doble.js .cap.on{opacity:1;transform:none;
  transition:opacity .6s var(--muelle) .22s,transform .6s var(--muelle) .22s}

/* ── el aparato ──────────────────────────────────────────── */
/* Los trazos escalan con el viewBox y el servidor se dibuja ahora a casi el doble:
   sin esto el chasis pasaría de 2 a 3,3 px y el dibujo entero se vería basto. */
.srv-ap :is(.srv-chasis,.srv-sled,.srv-rotulo,.srv-filete,.srv-boton,.srv-boton-i,
  .srv-cable-base,.srv-cable-luz){vector-effect:non-scaling-stroke}
.srv-chasis{fill:none;stroke:var(--acento);stroke-width:2}
.srv-rejilla path{fill:var(--linea);stroke:none}
.srv-filete{stroke:var(--linea);stroke-width:1.2;fill:none}

.srv-sled{fill:none;stroke:var(--linea);stroke-width:1.4;
  transition:stroke .5s var(--muelle),fill .5s var(--muelle)}
.srv-tirador{fill:var(--linea);stroke:none;transition:fill .5s var(--muelle)}
.srv-rotulo{fill:none;stroke:var(--linea);stroke-width:2.6;stroke-linecap:round;
  transition:stroke .5s var(--muelle),opacity .5s var(--muelle)}
.srv-bahia.viva .srv-sled{stroke:var(--acento);fill:var(--acento-s)}
.srv-bahia.viva .srv-tirador{fill:var(--acento)}
.srv-bahia.viva .srv-rotulo{stroke:var(--acento);opacity:.42}
:is(.srv-sled,.srv-tirador,.srv-rotulo){transition-delay:.18s}
.srv-bahia.viva :is(.srv-sled,.srv-tirador,.srv-rotulo){transition-delay:0s}

/* Testigo de actividad: en reposo parpadea con ciclo irregular y fase propia por
   bahía —es lo que más vende «servidor trabajando»—; al encenderse su paso dispara
   una ráfaga corta y vuelve al reposo. */
.srv-act{fill:var(--lima);opacity:.16;
  animation:parpadeo var(--dur,5s) linear var(--fase,0s) infinite}
.srv-bahia.viva .srv-act{
  animation:rafaga .52s linear 1, parpadeo var(--dur,5s) linear .52s infinite}

.srv-boton{fill:none;stroke:var(--gris-claro);stroke-width:1.6}
.srv-boton-i{fill:none;stroke:var(--gris-claro);stroke-width:2;stroke-linecap:round}
.srv-led{stroke:none}
.srv-led-a{fill:var(--cian)}                       /* alimentación, fijo */
.srv-led-e{fill:var(--verde);--l0:.34;--l1:1;      /* estado, respirando */
  animation:latir 3.4s ease-in-out infinite}
/* El rojo es la única excepción a la paleta del manual, aprobada por el cliente en
   sesión el 2026-09-17 y acotada a este testigo. Ver CLAUDE.md. */
.srv-led-r{fill:#D7262D}

.srv-cable-base{fill:none;stroke:var(--linea);stroke-width:1.2}
.srv-cable-luz{fill:none;stroke:var(--acento);stroke-width:2;stroke-linecap:round;
  stroke-dasharray:14 100;stroke-dashoffset:100;opacity:0}
.srv-cable.viva .srv-cable-luz{animation:recorrer .5s var(--muelle) .1s 1}

/* ── los hilos ───────────────────────────────────────────────
   El servidor está anclado y las filas se mueven, así que la distancia entre el punto
   de una fila y su bahía cambia con el scroll. Un radio recto rotaría sin parar; el
   codo hace que sólo cambie el largo del tramo vertical, y se lee como holgura de
   cable. Las coordenadas las escribe app.js: las filas no miden todas lo mismo. */
.srv-hilos{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;
  overflow:visible}
.srv-linea{fill:none;stroke:var(--acento);stroke-width:1.8;stroke-linecap:round;
  stroke-linejoin:round;vector-effect:non-scaling-stroke;opacity:.5;
  stroke-dasharray:100;stroke-dashoffset:100;
  transition:stroke-dashoffset .44s var(--muelle) .08s}
.srv-ramo.on .srv-linea{stroke-dashoffset:0;
  transition:stroke-dashoffset .62s var(--muelle) .3s}
.srv-pulso{fill:none;stroke:var(--acento);stroke-width:3.2;stroke-linecap:round;
  stroke-linejoin:round;vector-effect:non-scaling-stroke;
  stroke-dasharray:8 100;stroke-dashoffset:100;opacity:0}
.srv-ramo.on .srv-pulso{animation:recorrer .66s var(--muelle) .34s 1}
/* El punto entra con 0,85 s de retardo: ese desfase es lo que hace que se lea
   «el hilo llega y ENTONCES surge el punto», y no las dos cosas a la vez. */
.srv-nodo{opacity:0;transform:scale(.4);transform-box:fill-box;transform-origin:center;
  transition:opacity .22s var(--muelle),transform .26s var(--muelle)}
.srv-ramo.on .srv-nodo{opacity:1;transform:none;
  transition:opacity .38s var(--muelle) .85s,transform .46s var(--muelle) .85s}
.srv-nodo-o{fill:var(--papel);stroke:var(--acento);stroke-width:2.4;
  vector-effect:non-scaling-stroke}
.srv-nodo-c{fill:var(--acento)}

@keyframes parpadeo{
   0%,40%{opacity:.16}  43%,47%{opacity:1}   50%,56%{opacity:.16}
  59%,62%{opacity:.85} 65%,100%{opacity:.16}
}
@keyframes rafaga{
   0%,100%{opacity:1}  14%,42%,70%{opacity:.14}  28%,56%,84%{opacity:1}
}
@keyframes recorrer{
   0%{stroke-dashoffset:100;opacity:0}  14%{opacity:1}
  86%{opacity:1}  100%{stroke-dashoffset:-8;opacity:0}
}

@media(max-width:1080px){
  /* Una columna. El servidor va primero porque ya es el primero en el DOM, así que
     no hace falta reordenar nada. Los hilos se ocultan: en estrecho no hay hueco
     entre columnas que cruzar. La lista .cap ya colapsa sola a una columna. */
  .srv-doble{margin-top:clamp(24px,4vw,38px)}
  .srv-fig{width:min(210px,44vw);margin:0 auto clamp(26px,5vw,42px)}
  .srv-pin{position:static;width:100%;aspect-ratio:var(--apw,240) / var(--aph,380)}
  .srv-hilos{display:none}
  /* A 210 px de ancho el rótulo del chip queda en 7 px: se oculta y quedan los
     chips, que es donde el dibujo ya no tiene que leerse palabra a palabra. */
  .srv-chip-t{display:none}
}

html.sin-movimiento .srv-pin{position:static}
html.sin-movimiento .s-caps-srv .srv-doble.js .cap{opacity:1;transform:none;transition:none}
html.sin-movimiento :is(.srv-act,.srv-led-e,.srv-cable-luz,.srv-pulso),
html.sin-movimiento .srv-bahia.viva .srv-act,
html.sin-movimiento .srv-cable.viva .srv-cable-luz,
html.sin-movimiento .srv-ramo.on .srv-pulso{animation:none}
html.sin-movimiento .srv-linea{transition:none;stroke-dashoffset:0}
html.sin-movimiento .srv-nodo{transition:none;opacity:1;transform:none}
html.sin-movimiento :is(.srv-sled,.srv-tirador,.srv-rotulo){transition:none}

/* ── los otros cuatro aparatos ───────────────────────────────────────────
   La mecánica es la misma en las cinco líneas: lo único que cambia es el objeto.
   Cada uno cumple el mismo contrato —una pieza .srv-bahia y un .srv-cable por
   servicio, más un .srv-ref sin pintar del que el JS lee el canto izquierdo— así
   que el anclaje, los codos, los puntos y los tiempos ya escritos valen para todos. */
.srv-ref{pointer-events:none}
.srv-ap :is(.srv-espina,.srv-espina-pie,.srv-mod,.srv-fila,.srv-arco,.srv-arco-base,
  .srv-marca,.srv-pieza,.srv-pantalla,
  .srv-puerto,.srv-escudo,.srv-candado,.srv-arco-c,.srv-chip-c,.srv-detalle,.srv-pieza-f){vector-effect:non-scaling-stroke}

/* Empresa Digital · bus de plataforma. Cinco módulos acoplados a una espina, cada
   uno de su tamaño: son capacidades enchufadas a la misma plataforma, no fases de
   un proceso. El cable de cada servicio cruza la espina, que es lo que lo acopla. */
.srv-espina,.srv-espina-pie{fill:none;stroke:var(--acento);stroke-width:2;
  stroke-linecap:round}
.srv-mod{fill:none;stroke:var(--linea);stroke-width:1.4;
  transition:stroke .5s var(--muelle),fill .5s var(--muelle)}
.srv-bahia.viva .srv-mod{stroke:var(--acento);fill:var(--acento-s)}
/* Los chips nombran tipos de objeto, no métricas. El acento de esta línea da 4,39:1,
   por debajo del 4,5 que exige un texto pequeño: el rótulo va en navy encendido y en
   gris apagado, y el acento se queda en el contorno, que es objeto gráfico y con 3:1
   cumple. */
.srv-chip-c{fill:none;stroke:var(--linea);stroke-width:1.2;
  transition:stroke .5s var(--muelle),fill .5s var(--muelle)}
.srv-chip-t{font-family:inherit;font-size:8px;font-weight:800;letter-spacing:.01em;
  fill:var(--gris);transition:fill .5s var(--muelle)}
.srv-bahia.viva .srv-chip-c{stroke:var(--acento);fill:var(--acento-s)}
.srv-bahia.viva .srv-chip-t{fill:var(--navy)}

/* Analítica y Monitoreo · cuadro de mandos. Cinco medidores SIN una sola cifra,
   sin escala numerada y sin aguja que se mueva sola: el arco se llena al activarse
   el servicio, así que su posición es estado de interfaz atado al scroll y no una
   afirmación sobre el cliente. La norma de no inventar ningún dato sigue en pie. */
.srv-fila{fill:none;stroke:var(--linea);stroke-width:1.2;
  transition:stroke .5s var(--muelle),fill .5s var(--muelle)}
.srv-bahia.viva .srv-fila{stroke:var(--acento);fill:var(--acento-s)}
.srv-arco-base{fill:none;stroke:var(--linea);stroke-width:3.4;stroke-linecap:round}
.srv-marca{fill:none;stroke:var(--linea);stroke-width:1.4;stroke-linecap:round;
  transition:stroke .5s var(--muelle),opacity .5s var(--muelle)}
.srv-bahia.viva .srv-marca{stroke:var(--acento);opacity:.55}
.srv-arco{fill:none;stroke:var(--acento);stroke-width:3.4;stroke-linecap:round;
  stroke-dasharray:100;stroke-dashoffset:100;
  transition:stroke-dashoffset .42s var(--muelle)}
.srv-bahia.viva .srv-arco{stroke-dashoffset:0;
  transition:stroke-dashoffset .82s var(--muelle) .14s}
.srv-eje{fill:var(--linea);transition:fill .5s var(--muelle)}
.srv-bahia.viva .srv-eje{fill:var(--acento)}

/* Ciberseguridad · nube con siete puertos, escudo y candado.
   El escudo y el candado están en la lista de anti-patterns del proyecto. Entran por
   decisión expresa del cliente del 2026-09-17, planteada antes la consecuencia, y la
   excepción se agota en este aparato — ver CLAUDE.md. Lo que sí se controla es la
   ejecución: mismo trazo fino que el resto, sin resplandor exterior, sin relleno
   degradado, y el candado dentro del escudo en vez de flotando.
   El escudo y el candado cuelgan del séptimo servicio, que es «cifrado, gestión de
   claves y control de la identidad»: el contenido da el remate. */
.srv-puerto{fill:none;stroke:var(--linea);stroke-width:1.5;
  transition:stroke .5s var(--muelle),fill .5s var(--muelle)}
.srv-bahia.viva .srv-puerto{stroke:var(--acento);fill:var(--acento-s)}
/* El escudo y el candado van encendidos de salida y fuera de los grupos de servicio:
   son la identidad del aparato, como el chasis del servidor, no un paso de la secuencia. */
.srv-escudo,.srv-arco-c{fill:none;stroke:var(--acento);stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round}
.srv-candado{fill:var(--acento-s);stroke:var(--acento);stroke-width:1.8;
  stroke-linejoin:round}
.srv-bocallave{fill:var(--acento)}

/* Infraestructura Endpoint · flota. Seis siluetas al mismo tamaño: portátil,
   sobremesa, monitor, display, sala de control y muro de vídeo. */
.srv-pieza{fill:none;stroke:var(--linea);stroke-width:1.6;stroke-linecap:round;
  transition:stroke .5s var(--muelle)}
.srv-pantalla{fill:none;stroke:var(--linea);stroke-width:1.4;
  transition:stroke .5s var(--muelle),fill .5s var(--muelle)}
.srv-bahia.viva .srv-pieza{stroke:var(--acento)}
.srv-bahia.viva .srv-pantalla{stroke:var(--acento);fill:var(--acento-s)}
/* El detalle fino va por debajo del trazo principal: si pesara lo mismo, la silueta
   se perdería entre sus propios adornos. */
.srv-detalle{fill:none;stroke:var(--linea);stroke-width:1;stroke-linecap:round;
  transition:stroke .5s var(--muelle),opacity .5s var(--muelle)}
.srv-detalle-r{fill:var(--linea);transition:fill .5s var(--muelle)}
.srv-pieza-f{fill:none;stroke:var(--linea);stroke-width:1.6;
  transition:stroke .5s var(--muelle)}
.srv-bahia.viva .srv-detalle{stroke:var(--acento);opacity:.58}
.srv-bahia.viva .srv-detalle-r{fill:var(--acento)}
.srv-bahia.viva .srv-pieza-f{stroke:var(--acento)}

/* Al apagarse, los últimos en irse, igual que las bahías del servidor. */
:is(.srv-mod,.srv-fila,.srv-marca,.srv-eje,.srv-pieza,.srv-pantalla,.srv-bocallave,
  .srv-detalle-r,.srv-puerto,.srv-escudo,.srv-candado,.srv-arco-c,.srv-chip-c,.srv-detalle,.srv-pieza-f){transition-delay:.18s}
.srv-bahia.viva :is(.srv-mod,.srv-fila,.srv-marca,.srv-eje,.srv-pieza,.srv-pantalla,
  .srv-bocallave,.srv-detalle-r,.srv-puerto,.srv-escudo,.srv-candado,.srv-arco-c,.srv-chip-c,.srv-detalle,.srv-pieza-f){transition-delay:0s}

html.sin-movimiento :is(.srv-arco,.srv-mod,.srv-fila,.srv-marca,.srv-eje,.srv-pieza,
  .srv-pantalla,.srv-chip-t,.srv-bocallave,.srv-detalle-r,.srv-puerto,.srv-escudo,.srv-candado,.srv-arco-c,.srv-chip-c,.srv-detalle,.srv-pieza-f),
html.sin-movimiento .srv-bahia.viva :is(.srv-arco,.srv-mod,.srv-fila,.srv-marca,
  .srv-eje,.srv-pieza,.srv-pantalla,.srv-chip-t,.srv-bocallave,.srv-detalle-r,
  .srv-puerto,.srv-escudo,.srv-candado,.srv-arco-c,.srv-chip-c,.srv-detalle,.srv-pieza-f){transition:none}
html.sin-movimiento .srv-arco{stroke-dashoffset:0}

.s-fab{background:var(--niebla);padding-block:clamp(64px,7vw,100px)}
.s-fab .kicker{color:var(--verde);display:block;margin-bottom:16px}
.marca-rej{margin-top:clamp(36px,4vw,56px);display:grid;
  grid-template-columns:repeat(auto-fit,minmax(178px,1fr));gap:14px}
.marca{background:#fff;border-radius:18px;min-height:118px;display:grid;place-items:center;padding:24px;
  box-shadow:0 1px 0 rgba(0,26,87,.08),0 2px 12px -8px rgba(0,26,87,.3);
  transition:transform .35s var(--muelle),box-shadow .35s}
.marca:hover{transform:translateY(-4px);box-shadow:0 20px 40px -22px rgba(0,26,87,.45)}
.marca img{object-fit:contain;filter:grayscale(1);opacity:.62;transition:filter .3s,opacity .3s}
.marca:hover img{filter:none;opacity:1}

.s-mas{background:var(--navy-900);color:#fff;padding-block:clamp(64px,7vw,100px)}
.s-mas .kicker{color:var(--cian);display:block;margin-bottom:16px}
.s-otros{margin-top:clamp(48px,5vw,72px)}
.s-otros h4{font-size:11px;font-weight:900;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(255,255,255,.55);margin-bottom:20px}
.s-otros ul{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:12px}
.s-otros a{display:flex;align-items:center;gap:13px;padding:17px 20px;border-radius:14px;
  background:rgba(255,255,255,.06);font-weight:800;font-size:15.5px;
  transition:background-color .25s,transform .3s var(--muelle)}
.s-otros a:hover{background:rgba(255,255,255,.12);transform:translateX(4px)}
.s-otros .punto{width:10px;height:10px;border-radius:50%;flex:none}

/* ══ PREGUNTAS FRECUENTES ═════════════════════════════════ */
/* Va entre `.s-mas` (navy-900) y el cierre (degradado), que es el único hueco donde
   una banda clara no comparte suelo con ninguna vecina —y además es el orden que pide
   la arquitectura de información: sectores, luego FAQ, luego CTA—. */
.s-faq{background:var(--papel);padding-block:clamp(64px,7vw,100px)}
/* Verde: el azul ya es de `.s-caps` y el cián de `.s-mas`, en esta misma página. */
.s-faq .kicker{color:var(--verde);display:block;margin-bottom:16px}
/* Deliberadamente distinta de `.cap`, que está más arriba en la misma página: sin raíl
   numerado y sin rejilla de dos columnas. Si las dos listas se parecieran, la página
   repetiría esqueleto de sección, que es el anti-pattern que hundió las tres primeras
   propuestas. */
.faq-lista{margin-top:clamp(34px,3.6vw,52px);border-top:2px solid var(--navy);
  max-width:900px}
.faq{border-bottom:1px solid var(--linea)}
.faq summary{display:flex;align-items:flex-start;justify-content:space-between;gap:clamp(18px,3vw,44px);
  padding-block:clamp(19px,2.1vw,27px);cursor:pointer;list-style:none;
  font-size:clamp(17px,1.45vw,21px);font-weight:900;letter-spacing:-.022em;line-height:1.3;
  color:var(--navy);transition:color .25s}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover,.faq[open] summary{color:var(--azul)}
/* Galón, no un plus: el plus no es icono en este sistema —vive en el logotipo y en la
   fotografía—, y aquí hace falta una afordancia de abrir, no un elemento de marca. */
.faq i{flex:none;width:10px;height:10px;margin-top:9px;margin-right:5px;
  border-right:2.5px solid var(--azul);border-bottom:2.5px solid var(--azul);
  transform:rotate(45deg);transition:transform .35s var(--muelle)}
.faq[open] i{transform:rotate(225deg)}
/* `<details>` no interpola `height:auto`, así que el cuerpo abre de golpe y sólo gira
   el galón. Añadirle una transición real pedía `::details-content`, que no llega a
   todos los navegadores, o JavaScript para una lista de cinco. */
.faq-r{padding-bottom:clamp(21px,2.3vw,29px)}
.faq-r p{max-width:62ch;color:var(--gris)}
@media(max-width:560px){.faq summary{font-size:16.5px}.faq summary span{max-width:none}}
html.sin-movimiento .faq i,html.sin-movimiento .faq summary{transition:none}


/* ══ NOSOTROS ═════════════════════════════════════════════ */
/* Sobre blanco sólo el navy y el azul medio pasan el 4,5:1 que pide un kicker
   de 12 px. El verde se queda en 4,32:1 y el cián en 2,80, así que en las bandas
   claras de estas tres páginas el kicker es siempre azul. */
.n-empresa{background:var(--papel);padding-block:clamp(72px,8vw,120px)}
.n-empresa .kicker{color:var(--azul);display:block;margin-bottom:18px}
/* 22ch, no 16: a 16 el titular caía en tres líneas estrechas y dejaba 754 px de
   vacío a su derecha —más ancho que el propio titular—. En dos líneas largas el
   hueco baja a 481 px y la banda deja de leerse partida en dos mitades. */
.n-empresa h2{max-width:22ch}
/* Los dos párrafos los aportó el cliente y son el contenido validado de la página:
   van a escala de lede, no de cuerpo, porque son el protagonista de la banda. Van
   a la MISMA escala a propósito: empresa y misión pesan igual, y lo que distingue
   a la columna derecha es su etiqueta, no un cuerpo más pequeño. */
.n-texto,.n-mision p{color:var(--gris);font-weight:300;max-width:62ch;
  font-size:clamp(19px,2vw,28px);line-height:1.45;letter-spacing:-.015em}
.n-texto{margin-top:clamp(26px,3vw,42px)}
/* El titular queda a ancho completo y los dos textos bajan a columnas: si la misión
   cuelga del titular, la columna derecha se queda corta y abre un hueco muerto de
   350 px bajo ella. Las columnas van iguales: a igual cuerpo, lo que delata que dos
   textos no son pareja es la MEDIDA, y un reparto desigual daba 55ch contra 40ch
   sobre la misma escala. Con 1/1 las dos miden 48ch y sólo difiere el número de
   líneas —siete y cinco—, que es el desnivel normal de un texto a dos columnas.
   Sin filete: el que separa .n-foco es el único de la banda, y repetirlo dos veces
   más convertiría la sección en una pila de reglas horizontales. */
.n-cab{margin-top:clamp(26px,3vw,42px);
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(28px,4.5vw,80px);align-items:start}
.n-cab .n-texto{margin-top:0}
.n-mision h3{font-size:12px;font-weight:900;letter-spacing:.16em;text-transform:uppercase;
  line-height:1.2;color:var(--azul);margin-bottom:16px}
@media(max-width:840px){.n-cab{grid-template-columns:1fr;gap:34px}}
.n-foco{margin-top:clamp(44px,5vw,72px);padding-top:clamp(30px,3vw,44px);
  border-top:1px solid var(--linea);
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.6fr);
  gap:clamp(20px,3vw,52px);align-items:start}
.n-foco h4{font-size:11px;font-weight:900;letter-spacing:.16em;text-transform:uppercase;
  color:var(--gris);margin-bottom:12px}
.n-foco p{font-size:15px;color:var(--gris);max-width:34ch;line-height:1.55}
/* Los tres sectores que no nombra el cliente van en segundo plano, no fuera. */
.sec.tenue{background:var(--niebla);color:var(--gris);box-shadow:inset 0 0 0 1px var(--linea)}
.sec.tenue:hover{background:var(--navy);color:#fff}
@media(max-width:840px){.n-foco{grid-template-columns:1fr}}

.n-sedes{background:var(--navy-900);color:#fff;padding-block:clamp(72px,8vw,116px)}
.n-sedes .kicker{color:var(--cian);display:block;margin-bottom:18px}
.n-sedes h2{max-width:14ch}
.n-sedes > .env > div > p{margin-top:22px;max-width:58ch;color:rgba(255,255,255,.72);
  font-weight:300;font-size:clamp(17px,1.6vw,21px);line-height:1.55}
/* Filas anchas, no la rejilla 4:5 del cierre: la misma fotografía en otro registro,
   para que las sedes no se lean como la misma pieza repetida en tres páginas. */
.n-lista{margin-top:clamp(44px,5vw,72px);border-top:1px solid rgba(255,255,255,.16)}
.n-sede{display:grid;grid-template-columns:minmax(0,320px) minmax(0,1fr);
  gap:clamp(22px,3.4vw,56px);align-items:center;
  padding-block:clamp(24px,2.6vw,38px);border-bottom:1px solid rgba(255,255,255,.16)}
.n-sede-foto{position:relative;border-radius:18px;overflow:hidden}
.n-sede-foto img{width:100%;aspect-ratio:16/10;object-fit:cover;opacity:.92;
  transition:transform .8s var(--muelle)}
.n-sede:hover .n-sede-foto img{transform:scale(1.05)}
.n-sede h3{font-size:clamp(30px,3.6vw,54px);color:#fff}
.n-pais{margin-top:10px;display:flex;flex-wrap:wrap;align-items:center;gap:12px;
  font-size:15px;color:rgba(255,255,255,.7)}
.n-tag{font-size:11px;font-weight:900;letter-spacing:.13em;text-transform:uppercase;
  color:var(--navy);background:var(--cian);padding:5px 12px;border-radius:999px}
.n-datos{margin-top:clamp(20px,2vw,30px);display:grid;
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:18px 26px}
.n-datos dt{font-size:11px;font-weight:900;letter-spacing:.13em;text-transform:uppercase;
  color:rgba(255,255,255,.55);margin-bottom:6px}
.n-datos dd{margin:0;font-size:16px;font-weight:700;color:#fff}
/* El correo es el único enlace de la ficha. Blanco subrayado, no cian: el kicker de la
   banda ya se lleva el acento y no entra un segundo por página. */
.n-datos dd a{text-decoration:underline;text-decoration-color:rgba(255,255,255,.42);
  text-underline-offset:3px;transition:text-decoration-color .18s}
.n-datos dd a:hover{text-decoration-color:#fff}
@media(max-width:760px){.n-sede{grid-template-columns:1fr;gap:20px}}
html.sin-movimiento .n-sede-foto img{transition:none}



/* ══ ALIADOS ══════════════════════════════════════════════ */
.al-dir{background:var(--papel);padding-block:clamp(68px,7vw,108px)}
.al-dir .kicker{color:var(--azul);display:block;margin-bottom:16px}
.al-dir h2{max-width:16ch}
.al-filtros{margin-top:clamp(32px,3.4vw,50px);display:flex;flex-wrap:wrap;gap:10px}
.al-chip{display:inline-flex;align-items:center;gap:10px;padding:12px 22px;border-radius:999px;
  border:0;cursor:pointer;font-size:15.5px;font-weight:800;color:var(--navy);background:#fff;
  box-shadow:inset 0 0 0 1px rgba(0,26,87,.24);
  transition:transform .3s var(--muelle),background-color .25s,color .25s,box-shadow .25s}
.al-chip:hover{transform:translateY(-3px)}
/* El chip activo se resuelve en navy, no en el color de la línea: sobre blanco el
   cián da 2,80:1 y el lima 2,01:1, así que como fondo de texto no valen. El color
   del bloque se queda donde sí funciona, en el punto. */
.al-chip[aria-pressed="true"]{background:var(--navy);color:#fff;box-shadow:none}
.al-chip .punto{width:10px;height:10px;border-radius:50%;flex:none;
  box-shadow:inset 0 0 0 1px rgba(0,26,87,.24)}
.al-chip[aria-pressed="true"] .punto{box-shadow:inset 0 0 0 1px rgba(255,255,255,.5)}
.al-chip .n{opacity:.6;font-weight:700}
.al-cuenta{margin-top:28px;font-size:13px;font-weight:900;letter-spacing:.14em;
  text-transform:uppercase;color:var(--gris)}
.al-rej{margin-top:16px;display:grid;grid-template-columns:repeat(auto-fill,minmax(212px,1fr));gap:14px}
.al{background:#fff;border-radius:18px;padding:24px 22px 20px;
  display:flex;flex-direction:column;align-items:flex-start;gap:13px;min-height:196px;
  box-shadow:0 1px 0 rgba(0,26,87,.08),0 2px 12px -8px rgba(0,26,87,.3);
  transition:transform .35s var(--muelle),box-shadow .35s}
.al[hidden]{display:none}
.al:hover{transform:translateY(-4px);box-shadow:0 20px 40px -22px rgba(0,26,87,.45)}
.al-logo{display:flex;align-items:center;height:54px;width:100%}
/* logo_img() escribe el tamaño en línea; max-height lo gana y object-fit evita
   que la caja recortada deforme la marca. */
.al img{max-height:54px;object-fit:contain;object-position:left center;
  filter:grayscale(1);opacity:.62;transition:filter .3s,opacity .3s}
.al:hover img{filter:none;opacity:1}
.al-n{font-size:17px;font-weight:900;letter-spacing:-.02em;color:var(--navy);line-height:1.15}
.al-lns{margin-top:auto;display:flex;flex-wrap:wrap;gap:6px}
.al-ln{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:800;
  color:var(--navy);background:var(--niebla);padding:6px 12px;border-radius:999px;
  box-shadow:inset 0 0 0 1px var(--linea);transition:background-color .22s,box-shadow .22s}
.al-ln:hover{background:#fff;box-shadow:inset 0 0 0 1px rgba(0,26,87,.28)}
.al-ln .punto{width:7px;height:7px;border-radius:50%;flex:none;
  box-shadow:inset 0 0 0 1px rgba(0,26,87,.24)}
html.sin-movimiento .al,html.sin-movimiento .al-chip,html.sin-movimiento .al img,
html.sin-movimiento .al-ln{transition:none}


/* ══ CONTACTO ═════════════════════════════════════════════ */
.c-sedes{margin-top:clamp(30px,3vw,44px);display:inline-flex;align-items:center;gap:10px;
  color:rgba(255,255,255,.86);font-size:15px}
.c-sedes b{color:#fff;font-weight:900}
.c-form{background:var(--papel);padding-block:clamp(68px,7vw,108px)}
.c-form .kicker{color:var(--azul);display:block;margin-bottom:16px}
.c-form h2{max-width:14ch}
.c-rej{margin-top:clamp(36px,4vw,58px);display:grid;
  grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:clamp(30px,4vw,74px);align-items:start}
.c-campos{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.c-campos .ancho,.c-consent,.c-envio{grid-column:1/-1}
.campo{display:flex;flex-direction:column;gap:8px}
.campo > span{font-size:12px;font-weight:900;letter-spacing:.1em;text-transform:uppercase;
  color:var(--navy)}
.campo i,.c-oblig i{font-style:normal;font-weight:900}
.campo :is(input,select,textarea){width:100%;padding:14px 16px;border-radius:12px;
  background:#fff;color:var(--tinta);
  /* 1.4.11 pide 3:1 para el borde de un campo: --linea se queda en 1,2:1 y --gris-claro
     en 2,9:1. El único de la escala que llega es --gris, a 5,9:1. */
  border:1px solid var(--gris);
  transition:border-color .2s,box-shadow .2s}
.campo textarea{min-height:158px;resize:vertical;line-height:1.6}
/* El aro sólo se retira cuando el foco viene del ratón. Con teclado se conserva el
   del sistema (azul, 4,61:1 sobre blanco): el borde de 1 px y el halo al 24 % no
   llegan por sí solos al 3:1 que pide 1.4.11 para el indicador de foco. */
.campo :is(input,select,textarea):focus{border-color:var(--azul);
  box-shadow:0 0 0 3px rgba(0,124,181,.24)}
.campo :is(input,select,textarea):focus:not(:focus-visible){outline:none}
/* La regla base de foco sólo alcanza a a/button/summary/[tabindex], así que un
   campo de formulario se quedaba con el aro por defecto del navegador. Aquí se le
   da el mismo del sitio, en azul porque la banda es clara. */
.campo :is(input,select,textarea):focus-visible{outline:2.5px solid var(--azul);outline-offset:2px}
.campo :is(input,textarea)::placeholder{color:var(--gris-claro)}
.c-consent{display:flex;gap:13px;align-items:flex-start;font-size:14.5px;color:var(--gris);
  line-height:1.55;cursor:pointer}
.c-consent input{width:20px;height:20px;flex:none;margin:2px 0 0;accent-color:var(--azul)}
.c-envio{display:flex;flex-wrap:wrap;gap:18px;align-items:center;margin-top:4px}
.c-oblig{font-size:14px;color:var(--gris)}
.c-lado h4{font-size:11px;font-weight:900;letter-spacing:.16em;text-transform:uppercase;
  color:var(--gris);margin-bottom:6px}
.c-canal{border-top:1px solid var(--linea);padding-block:22px}
.c-canal > b{display:block;font-size:18px;font-weight:900;color:var(--navy);letter-spacing:-.02em}
.c-canal > p{margin-top:12px;font-size:15px;color:var(--gris);line-height:1.6}
.c-correo{margin-top:10px}
.c-correo a{font-size:17px;font-weight:700;color:var(--navy);
  text-decoration:underline;text-decoration-color:rgba(0,26,87,.32);
  text-underline-offset:3px;transition:text-decoration-color .18s}
.c-correo a:hover{text-decoration-color:var(--navy)}
.c-canal .marcador{margin-top:14px}
@media(max-width:900px){.c-rej{grid-template-columns:1fr}}
/* En una sola columna la tarjeta ya no tiene con quién igualarse de alto. */
@media(max-width:520px){.al{min-height:0}}
@media(max-width:620px){.c-campos{grid-template-columns:1fr}}
html.sin-movimiento .campo :is(input,select,textarea){transition:none}