/* El menú de la web pública — el único. El HTML sale de scripts/lib/nav.mjs.
   Usa los colores Aurora escritos en literal (y no los tokens de cada página) porque
   /servicios todavía tiene la paleta vieja: el menú se ve igual en todas.

   Sobre el titileo (30/9/2026): el menú era de vidrio con backdrop-filter, que se
   recalcula cada vez que cambia lo que hay detrás. Detrás hay fondos animados a
   pantalla completa (un canvas a 30 cuadros por segundo), así que el desenfoque se
   rehacía todo el tiempo y en algunos cuadros no llegaba: el menú parpadeaba. Ahora
   es un blanco casi opaco, sin desenfoque, en su propia capa. Se ve igual y no depende
   de lo que se mueva abajo. No volver a ponerle backdrop-filter. */

.nav{position:fixed; top:18px; left:50%; transform:translateX(-50%) translateZ(0); z-index:60;
  width:calc(100% - 48px); max-width:1120px; display:flex; align-items:center; justify-content:space-between;
  gap:16px; margin:0; isolation:isolate;
  background:rgba(255,255,255,.9); border:1px solid rgba(255,255,255,.95);
  border-radius:999px; padding:9px 10px 9px 22px;
  box-shadow:0 1px 2px rgba(14,89,107,.06), 0 12px 32px -12px rgba(14,89,107,.18);
  font-family:'Outfit', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif}
.nav .logo{display:flex; align-items:center; flex-shrink:0}
.nav .logo img{height:32px; width:auto; display:block}
.nav ul{list-style:none; margin:0; padding:0}
.nav > ul{display:flex; align-items:center; gap:4px}
.nav a, .nav .grupo-btn{color:#0e596b; text-decoration:none; font-weight:500; font-size:14px;
  letter-spacing:.1px; font-family:inherit}
.nav a:focus-visible, .nav button:focus-visible{outline:2px solid #4FC3D6; outline-offset:2px}

/* ítems de primer nivel */
.nav .suelto > a, .nav .grupo-btn{display:inline-flex; align-items:center; gap:4px; height:36px;
  padding:0 12px; border-radius:999px; background:none; border:0; cursor:pointer; opacity:.92}
.nav .suelto > a:hover, .nav .grupo-btn:hover, .nav .grupo.abierto .grupo-btn{background:rgba(14,89,107,.07); opacity:1}
.nav .grupo.activo .grupo-btn{font-weight:600}
.nav .chev{transition:transform .2s ease}
.nav .grupo.abierto .chev{transform:rotate(180deg)}

/* el submenú: tarjeta blanca debajo del botón */
.nav .grupo{position:relative}
.nav .sub{position:absolute; top:calc(100% + 12px); left:-8px; min-width:320px; padding:8px;
  background:#fff; border:1px solid rgba(14,89,107,.10); border-radius:16px;
  box-shadow:0 1px 2px rgba(14,89,107,.06), 0 18px 40px -14px rgba(14,89,107,.28);
  opacity:0; transform:translateY(-6px); pointer-events:none; visibility:hidden;
  transition:opacity .18s ease, transform .18s ease, visibility 0s linear .18s}
.nav .grupo.abierto .sub{opacity:1; transform:none; pointer-events:auto; visibility:visible;
  transition:opacity .18s ease, transform .18s ease}
.nav .sub a{display:flex; flex-direction:column; gap:1px; padding:9px 12px; border-radius:10px}
.nav .sub a:hover, .nav .sub a[aria-current="page"]{background:#F4F1EC}
.nav .sub b{font-weight:600; font-size:14px; color:#0e596b}
.nav .sub span{font-weight:400; font-size:12.5px; color:#6B7E84; line-height:1.35}

/* acceso de clientes: botón con borde, distinto del principal */
.nav .acceso{margin-left:8px}
.nav .acceso a{display:inline-flex; align-items:center; gap:7px; height:36px; padding:0 15px;
  border:1px solid rgba(14,89,107,.35); border-radius:999px; background:rgba(255,255,255,.55);
  white-space:nowrap}
.nav .acceso a:hover{border-color:#0e596b; background:#fff}

/* el principal */
.nav .cta{display:inline-flex; align-items:center; height:38px; padding:0 20px; border-radius:999px;
  background:linear-gradient(120deg,#168ca0,#0e596b); color:#F4F1EC; white-space:nowrap;
  box-shadow:0 8px 20px -10px rgba(14,89,107,.7)}
.nav .cta:hover{filter:brightness(1.06)}

/* hamburguesa */
.nav .burger{display:none; background:none; border:0; cursor:pointer; width:44px; height:44px;
  flex-direction:column; gap:5px; align-items:center; justify-content:center; border-radius:999px}
.nav .burger span{display:block; width:22px; height:2px; border-radius:2px; background:#0e596b;
  transition:transform .3s ease, opacity .25s ease}
.nav.open .burger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav.open .burger span:nth-child(2){opacity:0}
.nav.open .burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* touch: el menú entero en un panel; los grupos, abiertos como secciones con su rótulo */
@media (max-width:960px){
  .nav{padding:6px 6px 6px 18px}
  .nav .logo img{height:28px}
  .nav .burger{display:flex}
  .nav > ul{position:absolute; top:calc(100% + 10px); left:0; right:0; flex-direction:column; align-items:stretch;
    gap:2px; padding:10px; background:#fff; border:1px solid rgba(14,89,107,.10); border-radius:20px;
    box-shadow:0 18px 40px -14px rgba(14,89,107,.3); max-height:calc(100dvh - 110px); overflow-y:auto;
    opacity:0; transform:translateY(-8px); pointer-events:none; visibility:hidden;
    transition:opacity .22s ease, transform .22s ease, visibility 0s linear .22s}
  .nav.open > ul{opacity:1; transform:none; pointer-events:auto; visibility:visible;
    transition:opacity .22s ease, transform .22s ease}
  .nav .grupo-btn{display:flex; width:100%; height:auto; padding:12px 12px 4px; border-radius:0;
    font-size:11.5px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:#6B7E84;
    cursor:default; pointer-events:none}
  .nav .grupo-btn:hover, .nav .grupo.abierto .grupo-btn{background:none}
  .nav .chev{display:none}
  .nav .sub{position:static; min-width:0; padding:0; border:0; box-shadow:none; background:none;
    opacity:1; transform:none; pointer-events:auto; visibility:visible; transition:none}
  .nav .sub a{flex-direction:row; align-items:center; min-height:44px; padding:0 12px; font-size:15.5px}
  .nav .sub b{font-size:15.5px; font-weight:500}
  .nav .sub span{display:none}
  .nav .suelto{border-top:1px solid rgba(14,89,107,.08); margin-top:6px; padding-top:6px}
  .nav .suelto > a{display:flex; width:100%; height:44px; padding:0 12px; border-radius:10px; font-size:15.5px}
  .nav .acceso{margin:8px 0 0}
  .nav .acceso a, .nav .cta{display:flex; justify-content:center; width:100%; height:46px; font-size:15.5px}
  .nav .principal{margin-top:6px}
}
@media (max-width:560px){ .nav{width:calc(100% - 32px); top:12px} }

@media (prefers-reduced-motion:reduce){
  .nav .sub, .nav > ul, .nav .chev, .nav .burger span{transition:none!important}
}
@media print{
  .nav{position:static; transform:none; width:auto; max-width:none; box-shadow:none; border:0; background:none;
    margin-bottom:24px; padding:0}
  .nav .burger, .nav .sub{display:none!important}
}

/* Los tres modelos, al pie de Sistemas: mismos ítems que los sistemas, con un rótulo
   arriba que dice qué son (1/10/2026). */
.nav .sub .modelos-rotulo{margin-top:6px; padding:10px 12px 4px; border-top:1px solid rgba(14,89,107,.08);
  font-size:11.5px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:#6B7E84; line-height:1.3}
@media (max-width:960px){
  .nav .sub .modelos-rotulo{padding:12px 12px 4px}
}