/* ZILVIO — sistema. Agnóstico de página. Se carga primero en todas. */
/* ============================================================
   ZILVIO — sistema
   Paleta tomada de la identidad refinada v2.
   Una sola familia: Archivo variable (eje de ancho usado en display).
   ============================================================ */
:root{
  --navy:#082238;
  --navy-alto:#0C2C47;
  --navy-hondo:#051828;
  --teal:#0F8F83;
  --teal-texto:#0B6E66;   /* el teal solo pasa contraste AA a partir de aquí */
  --violeta-texto:#5B49CF;
  --mint:#28C789;
  --violeta:#7767E8;
  --hueso:#FBFAF8;
  --frio:#F4F6F8;
  --mint-tenue:#EFF8F3;
  --violeta-tenue:#F4F2FD;
  --linea:#DFE4E8;
  --linea-oscura:#1B3A55;
  --gris:#556A7C;
  --gris-claro:#A9BCCA;
  --firma:linear-gradient(100deg,#0F8F83,#28C789);
  --radio-s:8px;
  --radio-m:14px;
  --radio-l:24px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;
  background:#fff;
  color:var(--navy);
  font-family:"Archivo","Helvetica Neue",Helvetica,Arial,sans-serif;
  font-size:17px;
  line-height:1.65;
  font-synthesis-weight:none;
  -webkit-font-smoothing:antialiased;
}
/* Toda imagen conserva su proporción: sin height:auto, limitar el ancho la estira
   a lo alto en cuanto no la alcanza una regla más específica. */
img{max-width:100%;height:auto}
svg{max-width:100%}
a{color:inherit}
h1,h2,h3,h4{margin:0;font-weight:700;letter-spacing:-.028em;line-height:1.06;font-stretch:108%}
h1{font-size:clamp(2.35rem,5.5vw,4.15rem)}
h2{font-size:clamp(1.85rem,4.2vw,3rem);line-height:1.1}
h3{font-size:1.12rem;line-height:1.35;letter-spacing:-.012em;font-stretch:100%}
p{margin:0}
ul{margin:0;padding:0;list-style:none}
.wrap{max-width:1200px;margin:0 auto;padding:0 22px}
.franja{padding:clamp(74px,9vw,132px) 0}
.franja-alta{padding:clamp(88px,12vw,172px) 0}
.franja-alta h2{font-size:clamp(2rem,4.8vw,3.35rem)}
.texto{max-width:60ch;color:var(--gris)}
.dos>*+*{margin-top:22px}
.texto-l{max-width:52ch;font-size:1.16rem;line-height:1.55;color:var(--gris)}
.mini{font-size:.94rem;line-height:1.55;color:var(--gris)}
.sep{margin-top:14px}
.sep-l{margin-top:26px}
.sep-xl{margin-top:clamp(38px,5vw,64px)}
/* --- superficies --- */
.s-navy{background:var(--navy);color:#fff}
.s-navy .texto,.s-navy .mini,.s-navy .texto-l{color:var(--gris-claro)}
.s-frio{background:var(--frio)}
.s-mint{background:var(--mint-tenue)}
.s-violeta{background:var(--violeta-tenue)}
.s-hueso{background:var(--hueso)}
/* --- marca --- */
.marca{display:flex;flex:none;align-items:center;gap:11px;text-decoration:none}
.marca svg{display:block}
.marca .letras{height:21px;width:auto;fill:currentColor}
.marca .simbolo{height:27px;width:auto}
/* --- header --- */
.cabecera{position:sticky;top:0;z-index:60;background:rgba(8,34,56,.92);backdrop-filter:blur(14px);color:#fff;border-bottom:1px solid rgba(255,255,255,.09)}
.cabecera .wrap{display:flex;align-items:center;justify-content:space-between;height:68px;gap:20px}
.nav{display:none}
.nav a{text-decoration:none;white-space:nowrap;font-size:.95rem;color:#D6E2EC;padding:6px 0;border-bottom:1px solid transparent}
.nav a:hover{color:#fff;border-bottom-color:var(--mint)}
.acciones{display:flex;align-items:center;gap:12px}
.hamb{display:inline-flex;flex-direction:column;justify-content:center;gap:5px;width:42px;height:38px;padding:0 9px;background:transparent;border:1px solid rgba(255,255,255,.22);border-radius:var(--radio-s);cursor:pointer}
.hamb span{display:block;height:1.5px;background:#fff;border-radius:2px}
.cajon{display:none;padding:8px 22px 26px;border-top:1px solid rgba(255,255,255,.09)}
/* Sin JavaScript el cajón no puede abrirse: el pie de página conserva todos los
   enlaces, así que la navegación nunca queda bloqueada. */
.no-js .cajon{display:block}
.cajon.abierto{display:block}
.cajon a{display:block;text-decoration:none;color:#D6E2EC;padding:11px 0;border-bottom:1px solid rgba(255,255,255,.08);font-size:1.02rem}
/* --- botones --- */
.btn{display:inline-flex;align-items:center;gap:9px;font:inherit;font-size:1rem;font-weight:600;text-decoration:none;background:transparent;padding:14px 24px;border-radius:var(--radio-s);border:1px solid transparent;cursor:pointer;transition:background .18s ease,color .18s ease,border-color .18s ease}
.btn-primario{background:var(--mint);color:var(--navy)}
.btn-primario:hover{background:#41DBA0}
/* Sin background propio, un <button> hereda el gris del navegador: texto blanco
   sobre gris claro. El fondo transparente de .btn lo evita. */
.btn-fantasma{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.4);color:#fff}
.btn-fantasma:hover{border-color:#fff;background:rgba(255,255,255,.07)}
.btn-oscuro{background:var(--navy);color:#fff}
.btn-oscuro:hover{background:var(--navy-alto)}
.btn-linea{border-color:var(--linea);color:var(--navy);background:#fff}
.btn-linea:hover{border-color:var(--navy)}
.btn-chico{padding:10px 17px;font-size:.94rem}
:focus-visible{outline:2px solid var(--mint);outline-offset:3px;border-radius:3px}
/* --- hero --- */
.hero-rejilla{display:grid;gap:clamp(46px,6vw,58px)}
.hero-sub{margin-top:22px;max-width:46ch;font-size:1.13rem;line-height:1.58;color:#C4D4E1}
.hero-ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:34px}
.hero-pie{margin-top:34px;padding-top:20px;border-top:1px solid rgba(255,255,255,.13);font-size:.92rem;color:#8CA4B8;max-width:44ch}
.oculto-movil{display:none}
/* --- marco de producto --- */
/* Marco de producto. Las capturas del sistema son de interfaz clara, así que el
   marco es blanco: sobre navy se lee como una captura flotando; sobre superficie
   clara, como una ventana con su propio borde. */
.marco{border:1px solid var(--linea);border-radius:var(--radio-l);background:#fff;
  box-shadow:0 24px 60px -28px rgba(3,16,28,.4);overflow:hidden}
.s-navy .marco,.s-teal-n .marco{border-color:rgba(255,255,255,.24);box-shadow:0 30px 70px -26px rgba(0,0,0,.7)}
.marco-barra{display:flex;align-items:center;gap:9px;padding:12px 18px;background:var(--frio);border-bottom:1px solid var(--linea)}
.marco-barra b{font-size:.82rem;font-weight:600;color:#3D5163;letter-spacing:.01em}
.punto{width:7px;height:7px;border-radius:50%;background:#C2CEDA}
.punto.vivo{background:var(--mint)}
.marco-lienzo{padding:20px 18px 24px;background:linear-gradient(180deg,#0C2C47,#061A2B)}
/* nine box mini */
/* --- mapa de relaciones (svg) --- */
.mapa{width:100%;height:auto;display:block}
.mapa .nodo{fill:rgba(255,255,255,.055);stroke:rgba(255,255,255,.2)}
.mapa .nodo-vivo{fill:rgba(40,199,137,.13);stroke:rgba(40,199,137,.55)}
.mapa .et{font-family:inherit;font-size:16.5px;font-weight:600;fill:#EAF2F8}
.mapa .rel{font-family:inherit;font-size:12.5px;fill:#7F98AC}
.mapa .cable{fill:none;stroke:rgba(160,190,210,.42);stroke-width:1.2}
.mapa .cable-vivo{stroke:var(--mint);stroke-width:1.6}
.mapa .punta{fill:#A0BED2}
.mapa .punta-viva{fill:var(--mint)}
/* --- fragmentos sueltos (el problema) --- */
/* --- bandas de acompañamiento --- */
.territorio{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;
  border-top:2px solid var(--teal);padding-top:16px;margin-bottom:clamp(30px,4vw,48px)}
.territorio b{font-weight:600;font-size:1.04rem;letter-spacing:-.014em}
.indice{display:flex;gap:5px;align-items:center}
.indice i{display:block;width:16px;height:3px;border-radius:2px;background:rgba(8,34,56,.16)}
.indice i.aqui{width:34px;background:var(--teal)}
.t-violeta{border-top-color:var(--violeta)}
.t-violeta .indice i.aqui{background:var(--violeta)}
.t-mint{border-top-color:var(--mint)}
.t-mint .indice i.aqui{background:var(--mint)}
.t-navy{border-top-color:var(--navy)}
.t-navy .indice i.aqui{background:var(--navy)}
.cadena-navy .eslabon::before{background:var(--navy)}
.titulo-ancho{max-width:22ch;margin-bottom:clamp(30px,4vw,50px)}
.prueba{margin-top:30px;padding:20px 22px;border-left:2px solid var(--mint);background:var(--mint-tenue);border-radius:0 var(--radio-m) var(--radio-m) 0;max-width:64ch;color:var(--navy)}
/* --- cadena horizontal --- */
.cadena{position:relative;display:grid;gap:22px}
.cadena::before{content:"";position:absolute;left:5px;top:10px;bottom:10px;width:1px;background:var(--linea)}
.eslabon{position:relative;padding-left:28px}
.eslabon::before{content:"";position:absolute;left:0;top:5px;width:11px;height:11px;border-radius:2px;background:var(--teal);box-shadow:0 0 0 3px rgba(255,255,255,.9)}
.eslabon b{display:block;font-weight:600;letter-spacing:-.01em}
.eslabon span{display:block;font-size:.9rem;color:var(--gris);margin-top:2px}
.cadena-mint .eslabon::before{background:var(--mint)}
.s-frio .eslabon::before{box-shadow:0 0 0 3px var(--frio)}
.s-hueso .eslabon::before{box-shadow:0 0 0 3px var(--hueso)}
.cadena::before{background:#C9D4DE}
/* --- escalera de compensación --- */
/* --- esquema de bandas --- */
.lista-plana{display:flex;flex-wrap:wrap;gap:8px}
.etiqueta{padding:8px 14px;border:1px solid var(--linea);border-radius:99px;font-size:.9rem;background:#fff;color:#3D5163}
.s-navy .etiqueta{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.18);color:#D6E2EC}
/* --- nine box grande --- */
.eje-y{writing-mode:vertical-rl;transform:rotate(180deg);font-size:.86rem;color:var(--gris);align-self:center;letter-spacing:.01em}
.nueve-caja{display:grid;grid-template-columns:repeat(3,1fr);gap:5px}
.nueve-caja i{display:block;aspect-ratio:1.35;border-radius:5px;background:#FAF9FE;border:1px solid #E7E3F7}
.nueve-caja i.n1{background:#EDEAFB}
.nueve-caja i.n2{background:#D7D0F6}
.nueve-caja i.n3{background:#B9ADF0}
.eje-x{grid-column:2;font-size:.86rem;color:var(--gris);text-align:center;margin-top:8px}
/* --- estructura (navy) --- */
.s-navy .cadena::before{background:var(--linea-oscura)}
.s-navy .eslabon::before{box-shadow:0 0 0 3px var(--navy)}
.s-navy .eslabon span{color:var(--gris-claro)}
/* --- capacidades adicionales --- */
/* --- seguridad --- */
/* --- implementación --- */
/* --- cierre --- */
.cierre{position:relative;overflow:hidden;background:var(--navy-hondo);color:#fff}
.cierre::before{content:"";position:absolute;inset:auto -20% -60% -20%;height:70%;background:var(--firma);opacity:.2;filter:blur(70px)}
.cierre .wrap{position:relative;z-index:2}
.cierre h2{max-width:17ch;font-size:clamp(2.1rem,5vw,3.5rem)}
.cierre .texto-l{margin-top:24px;color:#B9CCDB}
/* --- footer --- */
.pie{background:var(--navy-hondo);color:#8CA4B8;padding:44px 0;border-top:1px solid rgba(255,255,255,.08);font-size:.92rem}
.pie .wrap{display:grid;gap:20px}
.pie a{text-decoration:none}
.pie a:hover{color:#fff}
.pie-links{display:flex;flex-wrap:wrap;gap:18px}
/* --- entrada orquestada (una sola vez, al cargar) --- */
.entra{opacity:0;transform:translateY(14px);animation:sube .7s cubic-bezier(.2,.7,.3,1) forwards}
.d1{animation-delay:.05s}
.d2{animation-delay:.16s}
.d3{animation-delay:.27s}
.d4{animation-delay:.4s}
@keyframes sube{to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  .entra{animation:none;opacity:1;transform:none}
  html{scroll-behavior:auto}
}
/* ============================ 900px ============================ */
@media (min-width:900px){
  .hero-rejilla{grid-template-columns:1.02fr .98fr;align-items:center;gap:clamp(40px,4.6vw,72px)}
  .oculto-movil{display:inline-flex}
  .dos{display:grid;grid-template-columns:1fr 1fr;gap:clamp(34px,4vw,66px);align-items:start}
  .dos>*+*{margin-top:0}
  .dos-ancho{grid-template-columns:1.15fr .85fr}
  .dos-corto{grid-template-columns:.85fr 1.15fr}
  .nueve-caja i{aspect-ratio:1.5}
  .cadena{grid-auto-flow:column;grid-auto-columns:1fr;gap:18px}
  .cadena::before{left:6px;right:6px;top:5px;bottom:auto;width:auto;height:1px}
  .eslabon{padding-left:0;padding-top:26px}
  .eslabon::before{top:0;left:0}
}
/* ============================ 1000px =========================== */
@media (min-width:1220px){
  .nav{gap:26px}
}
@media (min-width:1080px){
  .nav{display:flex;align-items:center;gap:14px;font-size:.92rem}
  .nav a{font-size:inherit}
  .hamb{display:none}
  .cajon{display:none !important}
}
.aqui{color:#fff !important;border-bottom-color:var(--mint) !important}
/* --- menú Soluciones --- */
.menu{position:relative}
/* Puente invisible sobre el hueco entre el botón y el panel: sin él, el ratón
   sale del menú al bajar y el panel se cierra antes de poder elegir. */
.menu::after{content:"";position:absolute;left:-18px;right:-18px;top:100%;height:18px;display:none}
.menu:hover::after,.menu:focus-within::after{display:block}
.menu-btn{font:inherit;font-size:inherit;color:#D6E2EC;background:none;border:0;padding:6px 0;cursor:pointer;
  border-bottom:1px solid transparent;display:inline-flex;align-items:center;gap:6px}
.menu-btn::after{content:"";width:6px;height:6px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
  transform:rotate(45deg) translate(-2px,-2px)}
.menu-btn:hover,.menu-btn[aria-expanded="true"]{color:#fff}
.menu-panel{display:grid}
.menu-panel[hidden]{display:none}
.cajon-grupo{margin:16px 0 2px;font-size:.82rem;color:#7E93A6}
.cajon .sol-comp,.cajon .sol-tal,.cajon .sol-cli,.cajon .sol-rec{padding-left:14px}
@media (min-width:1080px){
  .menu-panel{position:absolute;top:calc(100% + 14px);left:-18px;min-width:230px;padding:10px 0;
    background:#0C2C47;border:1px solid rgba(255,255,255,.12);border-radius:var(--radio-m);
    box-shadow:0 26px 50px -22px rgba(0,0,0,.7);z-index:70}
  .menu-panel a{padding:9px 18px;border-bottom:0}
  .menu-panel a:hover{background:rgba(255,255,255,.06);border-bottom:0;color:#fff}
}

/* El submenú no depende del JavaScript: con puntero, el hover y el foco lo
   abren por CSS. El script solo añade el estado accesible y el caso táctil. */
@media (min-width:1080px) and (hover:hover){
  .menu:hover .menu-panel[hidden],
  .menu:focus-within .menu-panel[hidden]{display:grid}
  .cajon-grupo{display:none}
}

/* --- marcador de captura (usado por plataforma y compensación) --- */
/* Marcador de captura. Sustituir por <img> cuando exista el material:
   1600x1000 exportado a 2x, sin cromo de navegador ni barra del sistema. */
.captura{aspect-ratio:16/10;background:
  linear-gradient(rgba(8,34,56,.05) 1px,transparent 1px) 0 0/100% 34px,
  linear-gradient(90deg,rgba(8,34,56,.05) 1px,transparent 1px) 0 0/34px 100%,
  var(--frio)}
.captura-alta{aspect-ratio:2.4/1}
.captura-corta{aspect-ratio:16/9}
.captura:has(img){aspect-ratio:auto;background:none}
.captura img{display:block;width:100%;height:auto}
/* La captura ocupa el lienzo completo del marco: sin padding y sin fondo oscuro. */
.marco-lienzo:has(img){padding:0;background:none}
.marco-lienzo.con-captura{padding:0;background:none}
.marco > img{display:block;width:100%;height:auto}

/* Figuras anchas: en pantallas chicas se desplazan en lugar de volverse ilegibles */
.desliza{overflow-x:auto;overscroll-behavior-x:contain}
.desliza .fig{min-width:740px}
@media (min-width:900px){.desliza .fig{min-width:0}}

/* --- alternativas por ancho ---
   Los diagramas densos no se leen a 390 px, y desplazarlos de lado es incómodo.
   Cada figura tiene una versión propia para pantalla chica. */
.solo-movil{display:block}
.solo-escritorio{display:none}
@media (min-width:720px){
  /* utilidades: ganan a la regla de display del propio patrón */
  .solo-movil{display:none !important}
  .solo-escritorio{display:block}
}
@media (max-width:719px){
  .solo-escritorio{display:none !important}
}

/* lista de nodos: sustituye a un diagrama en móvil */
.nodos-m{display:grid;gap:0;border-top:1px solid var(--linea)}
.nodos-m div{display:grid;gap:2px;padding:13px 0 13px 26px;position:relative;border-bottom:1px solid var(--linea)}
.nodos-m div::before{content:"";position:absolute;left:0;top:20px;width:10px;height:10px;border-radius:2px;background:#C2CEDA}
.nodos-m b{font-weight:600;font-size:1rem}
.nodos-m span{font-size:.9rem;color:var(--gris)}
.nodos-m .eje::before{background:var(--teal)}
.nodos-m .eje b{color:var(--teal-texto)}
.s-navy .nodos-m,.s-navy .nodos-m div{border-color:var(--linea-oscura)}
.s-navy .nodos-m span{color:var(--gris-claro)}
.s-hondo .nodos-m,.s-hondo .nodos-m div{border-color:rgba(255,255,255,.16)}

/* escala de percentiles en móvil */
.escala-m{display:grid;gap:8px}
.escala-m .rango{position:relative;height:26px;border-radius:13px;background:rgba(40,199,137,.16);
  border:1px solid #28C789;margin:0 14% 0 24%}
.escala-m .rango::after{content:"";position:absolute;right:-5px;top:50%;transform:translateY(-50%);width:11px;height:11px;border-radius:50%;background:#28C789}
.escala-m .ejes{display:flex;justify-content:space-between;font-size:.8rem;color:var(--gris-claro);padding:0 2px}
.escala-m .pie{font-size:.85rem;color:var(--gris-claro)}

/* barras de brechas en móvil */
.brechas-m{display:grid;gap:14px}
.brechas-m div{display:grid;gap:6px}
.brechas-m b{font-size:.92rem;font-weight:600}
.brechas-m .riel{position:relative;height:16px;border-radius:8px;background:#EDE9FB}
.brechas-m .obs{position:absolute;left:0;top:0;height:16px;border-radius:8px;background:#7767E8}
.brechas-m .esp{position:absolute;top:-4px;width:2px;height:24px;background:var(--navy)}

/* cajas anidadas en móvil */
.anidado-m{display:grid;gap:0}
.anidado-m div{padding:12px 0 12px 14px;border-left:2px solid var(--linea)}
.anidado-m div:nth-child(2){margin-left:14px}
.anidado-m div:nth-child(3){margin-left:28px}
.anidado-m div:nth-child(4){margin-left:42px}
.anidado-m div:nth-child(5){margin-left:56px}
.anidado-m div:nth-child(6){margin-left:70px}
.anidado-m b{font-weight:600;display:block}
.anidado-m span{display:block;font-size:.9rem;color:var(--gris);margin-top:2px}
.anidado-m .foco{border-left-color:var(--teal)}
.anidado-m .foco b{color:var(--teal-texto)}


/* --- lienzo de figuras (lo usan seis páginas) ---
   Una figura nunca se amplía más allá de su lienzo: escalada hacia arriba, su
   tipografía crece con ella y se ve desproporcionada frente al resto. */
.fig,.mapa{width:100%;height:auto;display:block;margin-inline:auto}
.f420{max-width:420px}
.f460{max-width:460px}
.f500{max-width:500px}
.f520{max-width:520px}
.f540{max-width:540px}
.f560{max-width:560px}
.f760{max-width:760px}
.f860{max-width:860px}
.f900{max-width:900px}
.f940{max-width:940px}
.f1000{max-width:1000px}
.f1120{max-width:1120px}
.fig .caja{fill:#fff;stroke:var(--linea)}
.fig .et{font-family:inherit;font-size:15px;font-weight:600;fill:var(--navy)}
.fig .rel{font-family:inherit;font-size:12.5px;fill:var(--gris)}
.fig .hilo{fill:none;stroke:#C2CEDA;stroke-width:1.4}
.s-navy .fig .caja{fill:rgba(255,255,255,.06);stroke:rgba(255,255,255,.2)}
.s-navy .fig .et{fill:#EAF2F8}
.s-navy .fig .rel{fill:#8CA4B8}
.s-navy .fig .hilo{stroke:rgba(160,190,210,.45)}

/* --- reparto de responsabilidades (lo usan cinco páginas) --- */
.reparto{display:grid;gap:clamp(28px,4vw,48px)}
.reparto h3{padding-bottom:12px;border-bottom:2px solid var(--acento,var(--navy))}
.reparto li{padding:12px 0;border-bottom:1px solid var(--linea);font-size:1rem}
@media (min-width:720px){.reparto{grid-template-columns:1fr 1fr}}

/* --- aviso de cookies --- */
.consentimiento-barra{position:fixed;left:16px;right:16px;bottom:16px;z-index:200;
  display:grid;gap:14px;padding:18px 20px;border-radius:var(--radio-m);
  background:#0C2C47;color:#D6E2EC;
  border:1px solid rgba(255,255,255,.14);box-shadow:0 24px 60px -24px rgba(0,0,0,.7)}
.consentimiento-barra p{font-size:.94rem;line-height:1.5;max-width:70ch}
.consentimiento-btns{display:flex;flex-wrap:wrap;gap:10px}
@media (min-width:820px){
  .consentimiento-barra{left:auto;right:24px;bottom:24px;max-width:520px}
}
.consentimiento-barra .btn-fantasma{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.5);color:#fff}
.consentimiento-barra .btn-fantasma:hover{border-color:#fff}
.cajon .sol-ope{padding-left:14px}

/* --- capturas a todo el ancho ---
   Una captura del sistema tiene interfaz densa: metida en media columna se ve
   comprimida e ilegible. Cuando un bloque de dos columnas contiene un marco de
   producto, el bloque se apila y el marco ocupa el ancho completo del contenedor. */
@media (min-width:900px){
  .dos:has(.marco){grid-template-columns:1fr;row-gap:clamp(34px,4vw,52px)}
  .dos:has(.marco) > div:has(.marco){grid-column:1;max-width:none}
  .dos:has(.marco) .texto-l,.dos:has(.marco) .texto{max-width:64ch}
}