/* ═══════════════════════════════════════════════
   UbicaSAT — nav.css
   Header, menú primario, hamburguesa, mobile-nav.
   Asset global: se carga en todas las páginas.
   ═══════════════════════════════════════════════ */

.site-header{background:#fff;border-bottom:1px solid var(--color-border);
    position:sticky;top:0;z-index:80;box-shadow:var(--shadow-sm)}
.site-header__inner{max-width:var(--max-w);margin:0 auto;padding:14px var(--gutter);
    display:flex;align-items:center;justify-content:space-between;gap:24px}

.site-logo{display:flex;align-items:center;gap:8px;font-family:'Sora',sans-serif;font-weight:800;color:#0f2235;font-size:18px}
.site-logo__img{height:36px;width:auto}
.site-logo__mark{display:inline-flex}
.site-logo__text{letter-spacing:-.01em}

.primary-nav{display:flex}
.nav-list{display:flex;gap:28px;align-items:center;list-style:none;margin:0;padding:0}
.nav-list a{font-size:14px;font-weight:500;color:#3a4a5c;transition:color .15s}
.nav-list a:hover,.nav-list .current-menu-item>a{color:var(--color-primary,#0f2235)}

/* ═══════════════════════════════════════════════
   HAMBURGUESA — Animación "collapse" de Jonathan Suh
   Basado en https://jonsuh.com/hamburgers/ (MIT License).
   Se incluye solo la variante --collapse (+ base) para
   mantener el CSS mínimo y autocontenido.
═══════════════════════════════════════════════ */
.hamburger{display:none;padding:11px 10px;cursor:pointer;transition-property:opacity,filter;
    transition-duration:.15s;transition-timing-function:linear;font:inherit;color:inherit;
    text-transform:none;background-color:transparent;border:0;margin:0;overflow:visible;
    border-radius:8px}
.hamburger:hover{background:#f5f6f8}
.hamburger-box{width:26px;height:20px;display:inline-block;position:relative;vertical-align:middle}
.hamburger-inner{display:block;top:50%;margin-top:-1px}
.hamburger-inner,
.hamburger-inner::before,
.hamburger-inner::after{width:26px;height:2px;background-color:#0f2235;border-radius:3px;
    position:absolute;transition-property:transform;transition-duration:.15s;
    transition-timing-function:ease}
.hamburger-inner::before,
.hamburger-inner::after{content:"";display:block}
.hamburger-inner::before{top:-8px}
.hamburger-inner::after{bottom:-8px}

/* Variante --collapse: las 3 barras se apilan en el centro y rotan en X */
.hamburger--collapse .hamburger-inner{top:auto;bottom:0;transition-duration:.13s;
    transition-delay:.13s;transition-timing-function:cubic-bezier(.55,.055,.675,.19)}
.hamburger--collapse .hamburger-inner::after{top:-16px;
    transition:top .2s .2s cubic-bezier(.33333,.66667,.66667,1),opacity .1s linear}
.hamburger--collapse .hamburger-inner::before{
    transition:top .12s .2s cubic-bezier(.33333,.66667,.66667,1),
    transform .13s cubic-bezier(.55,.055,.675,.19)}
.hamburger--collapse.is-active .hamburger-inner{transform:translate3d(0,-10px,0) rotate(-45deg);
    transition-delay:.22s;transition-timing-function:cubic-bezier(.215,.61,.355,1)}
.hamburger--collapse.is-active .hamburger-inner::after{top:0;opacity:0;
    transition:top .2s cubic-bezier(.33333,0,.66667,.33333),opacity .1s .22s linear}
.hamburger--collapse.is-active .hamburger-inner::before{top:0;transform:rotate(-90deg);
    transition:top .1s .16s cubic-bezier(.33333,0,.66667,.33333),
    transform .13s .25s cubic-bezier(.215,.61,.355,1)}

/* ═══════════════════════════════════════════════
   MOBILE NAV — acordeón inline (v2.6)
   El menú desliza DEBAJO del header (no encima) como
   acordeón con max-height animado. Empuja el contenido
   hacia abajo en lugar de cubrirlo; el header sticky
   permanece visible. Sin overlay, sin botón X interno.
═══════════════════════════════════════════════ */
.mobile-nav{display:none;overflow:hidden;max-height:0;background:#fff;
    transition:max-height .3s ease;
    position:sticky;top:64px;z-index:75}
.mobile-nav.is-open{max-height:calc(100vh - 64px);overflow-y:auto;
    border-bottom:1px solid var(--color-border)}
.mobile-nav__body{padding:8px var(--gutter) 16px}
.mobile-menu{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.mobile-menu li{border-bottom:1px solid #f1f2f4}
.mobile-menu li:last-child{border-bottom:none}
.mobile-menu a{display:block;padding:12px 8px;font-size:15px;color:#1d2a3a;border-radius:6px}
.mobile-menu a:hover{background:#f5f6f8;color:var(--color-primary,#0f2235)}
.mobile-menu .sub-menu{list-style:none;margin:0;padding-left:14px;display:none}
.mobile-menu .is-expanded > .sub-menu{display:block}

@media (max-width:760px){
    .primary-nav{display:none}
    .nav-hamburger,.hamburger{display:inline-block}
    .mobile-nav{display:block}
}

/* ═══════════════════════════════════════════════
   MEGA-MENÚ "Oficinas por Estados" (v2.7)
   Trigger único que despliega los 32 estados en
   grid de 3 columnas (desktop) o acordeón vertical
   (mobile). Data source: páginas con plantilla
   page-estado.php (ver inc/setup.php).
═══════════════════════════════════════════════ */
.has-mega{position:relative}
.mega-trigger{display:inline-flex;align-items:center;gap:6px;
    font:inherit;font-size:14px;font-weight:500;color:#3a4a5c;
    background:transparent;border:0;padding:6px 0;cursor:pointer;
    transition:color .15s}
.mega-trigger:hover,
.has-mega.is-open > .mega-trigger{color:var(--color-primary,#0f2235)}
.mega-caret{width:8px;height:8px;border-right:2px solid currentColor;
    border-bottom:2px solid currentColor;transform:rotate(45deg) translateY(-2px);
    transition:transform .2s ease}
.has-mega.is-open > .mega-trigger .mega-caret{transform:rotate(-135deg) translateY(2px)}

.mega-panel{position:absolute;top:100%;right:0;
    min-width:640px;background:#fff;
    border:1px solid var(--color-border);border-radius:12px;
    box-shadow:0 10px 30px rgba(15,34,53,.12);
    padding:18px 20px;display:none;z-index:90}
/* Puente invisible para que el mouse pueda transitar del trigger al panel
   sin disparar mouseleave (gap visual de 10px sin gap de hover). */
.mega-panel::before{content:"";position:absolute;top:-10px;left:0;right:0;
    height:10px;background:transparent}
.has-mega.is-open > .mega-panel{display:block;animation:megaFade .15s ease}
@keyframes megaFade{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.mega-grid{list-style:none;margin:0;padding:0;
    display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
    gap:4px 24px}
.mega-grid a{display:block;padding:8px 8px;font-size:14px;
    color:#1d2a3a;border-radius:6px;
    transition:background .15s,color .15s}
.mega-grid a:hover,
.mega-grid a:focus-visible{background:#f5f6f8;color:var(--color-primary,#0f2235);outline:none}

/* Progressive enhancement: si no hay JS, dejar visible para SEO */
.no-js .mega-panel{display:block;position:static;min-width:0;
    box-shadow:none;border:0;padding:0}

@media (max-width:760px){
    .has-mega{position:static}
    .mega-trigger{width:100%;text-align:left;
        padding:12px 8px;font-size:15px;color:#1d2a3a;
        border-radius:6px;justify-content:space-between}
    .mega-trigger:hover{background:#f5f6f8;color:var(--color-primary,#0f2235)}
    .mega-panel{position:static;min-width:0;
        border:0;box-shadow:none;padding:0 0 0 14px;display:none;animation:none}
    .mega-panel::before{display:none}
    .mobile-menu .has-mega.is-expanded > .mega-panel{display:block}
    .mega-grid{grid-template-columns:1fr;gap:0}
    .mega-grid a{padding:10px 8px;font-size:14px;
        border-bottom:1px solid #f1f2f4;border-radius:0}
    .mega-grid li:last-child a{border-bottom:0}
}