/* ==============================================
   Navbar — ASOPETROL
   CSS custom puro (sin Bootstrap)
   Fixed top + glassmorphism al hacer scroll
   ============================================== */

* { box-sizing: border-box; }

body {
    /* Compensa la altura REAL del header fijo (--nav-height: 94px =
       70px de barra + 24px de margen flotante). Antes eran solo 70px
       y el contenido quedaba 24px montado debajo del navbar. */
    padding-top: 94px;
    padding-top: var(--nav-height);
}

.site-header {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 1000;
    transition: background 0.3s ease,
        box-shadow 0.3s ease,
        border-radius 0.3s ease,
        left 0.3s ease,
        right 0.3s ease,
        top 0.3s ease;
    border-bottom: 1px solid transparent;
}

/* Estado scrolled: barra flotante BLANCA FIJA (en ambos temas).
   Blanca a propósito: el logo oscuro (Largo_WEBP) se ve sobre ella. */
.site-header.scrolled {
    left: 24px;
    right: 24px;
    top: 12px;
    max-width: 1440px;   /* igual que el hero: flota centrada */
    margin: 0 auto;
    background: transparent; /* el fondo vive en ::before (con clip-path) */
    border-bottom: none;
}

/* Fondo de la barra con la máscara de recorte (la misma de las cards).
   Vive en un pseudo-elemento a propósito: si el clip-path estuviera en
   el header, recortaría también el dropdown (el panel cuelga por debajo
   de la barra y quedaría invisible al abrirlo con scroll).
   La sombra usa drop-shadow para seguir la forma recortada. */
.site-header::before {
    content: '';
    position: absolute;
    inset: 0;
    background: #FFFFFF;  /* barra flotante blanca FIJA (para que el logo Largo oscuro se vea) */
    clip-path: polygon(0% 0%, 0% 0%, 0% 0%, 0% 0%, 99% 0%, 100% 25%, 100% 85%, 100% 100%, 85% 100%, 15% 100%, 1% 100%, 0% 75%);
    filter: drop-shadow(var(--shadow-nav));
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: -1;
    pointer-events: none;
    border-radius: 10px;
}

.site-header.scrolled::before {
    opacity: 1;
}

/* La barra flotante ya no necesita el margen interno del contenedor */
.site-header.scrolled .nav-container {
    margin-top: 0;
    height: 70px;
}

/* Texto oscuro sobre la barra blanca (solo links de primer nivel:
   los del dropdown conservan su estilo claro sobre panel oscuro) */
.site-header.scrolled .nav-links > li > a,
.site-header.scrolled .nav-dropdown-toggle {
    color: var(--text-primary);
}

.site-header.scrolled .nav-links > li > a:hover,
.site-header.scrolled .nav-dropdown-toggle:hover,
.site-header.scrolled .nav-dropdown-toggle[aria-expanded="true"] {
    color: var(--color-accent);
}

/* Logo dual: claro (Largo_N) sobre fondos oscuros, oscuro (Largo)
   sobre la barra flotante blanca. Sin filtros: se alterna la imagen. */
.nav-logo img {
    display: none;
    height: 36px;
    width: auto;
}

.site-header:not(.scrolled):not(.menu-open) .nav-logo .nav-logo-light { display: block; }
.site-header.scrolled .nav-logo .nav-logo-dark { display: block; }
.site-header.menu-open .nav-logo .nav-logo-light { display: block; }

/* Hamburger oscuro para la barra blanca */
.site-header.scrolled .nav-hamburger span {
    background: var(--text-primary);
}

/* Menú mobile abierto: el header vuelve a transparente para que la
   barra blanca flotante no se vea sobre el fullscreen oscuro.
   (Debe ir DESPUÉS de los .scrolled para ganar en especificidad
   equivalente.) */
.site-header.menu-open,
.site-header.menu-open.scrolled {
    background: transparent;
    box-shadow: none;
    left: 0; right: 0; top: 0;
    border-radius: 0;
    max-width: none;
    margin: 0;
    border-bottom: 1px solid transparent;
}

.site-header.menu-open .nav-container {
    margin-top: 24px;
    height: 70px;
}

.site-header.menu-open .nav-hamburger span {
    background: var(--text-nav);
}

.site-header.menu-open .nav-hamburger.open span {
    background: var(--color-accent);
}

/* Con el menú mobile abierto el fondo recortado tampoco debe verse */
.site-header.menu-open::before {
    opacity: 0;
}

.nav-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
    margin-top: 24px;
}

.nav-links {
    display: flex;
    align-items: center;
    gap: 8px;
    list-style: none;
    margin: 0; padding: 0;
    flex: 1;
    justify-content: center;
}

.nav-links a {
    color: var(--text-nav);
    text-decoration: none;
    font-size: 16px;
    font-weight: 500;
    padding: 8px 14px;
    border-radius: 8px;
    transition: color 0.2s, background 0.2s;
    white-space: nowrap;
    letter-spacing: 0.3px;
}

.nav-links a:hover {
    color: var(--color-accent);
    background: var(--accent-ghost);
}

/* ── Dropdown (desktop) ──────────────────────────────── */
.nav-item.has-dropdown {
    position: relative;
    --dropdown-gap: 10px; /* separación botón ↔ panel (sincronizada con el bridge) */
}

/* Puente invisible entre botón y panel: sin esto, al bajar el mouse
   por el gap de 10px el hover se pierde y el menú se cierra antes
   de poder tocarlo (bug reportado en QA) */
.nav-item.has-dropdown::before {
    content: '';
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    height: var(--dropdown-gap);
}

/* El disparador es un <button>: mismo aspecto que los links,
   pero semánticamente correcto (abre un menú, no navega) */
.nav-dropdown-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: none;
    border: none;
    cursor: pointer;
    font-family: inherit;
    color: var(--text-nav);
    font-size: 16px;
    font-weight: 500;
    padding: 8px 14px;
    border-radius: 8px;
    transition: color 0.2s, background 0.2s;
    white-space: nowrap;
    letter-spacing: 0.3px;
}

.nav-dropdown-toggle:hover,
.nav-dropdown-toggle[aria-expanded="true"] {
    color: var(--color-accent);
    background: var(--accent-ghost);
}

.nav-caret {
    font-size: 14px;
    transition: transform 0.2s ease;
}

.nav-dropdown-toggle[aria-expanded="true"] .nav-caret {
    transform: rotate(180deg);
}

.nav-dropdown {
    position: absolute;
    top: calc(100% + var(--dropdown-gap));
    left: 50%;
    transform: translateX(-50%) translateY(6px);
    min-width: 230px;
    background: var(--nav-dropdown-bg);
    border: 1px solid var(--border-on-dark);
    border-radius: 14px;
    box-shadow: var(--shadow-dropdown);
    padding: 8px;
    list-style: none;
    margin: 0;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
    z-index: 1001; /* por encima del header (1000) y del menú mobile (999) */
}

/* Abre con: hover (mouse), focus (teclado) y clase .is-open (click/touch) */
.nav-item.has-dropdown:hover .nav-dropdown,
.nav-item.has-dropdown:focus-within .nav-dropdown,
.nav-item.has-dropdown.is-open .nav-dropdown {
    opacity: 1;
    visibility: visible;
    pointer-events: all;
    transform: translateX(-50%) translateY(0);
}

.nav-dropdown a {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--nav-dropdown-text);
    font-size: 14px;
    font-weight: 500;
    padding: 10px 14px;
    border-radius: 8px;
    white-space: nowrap;
    text-decoration: none;
}

.nav-dropdown a:hover {
    background: var(--accent-ghost);
    color: var(--accent-text);
}

.btn-afiliate {
    display: inline-flex;
    align-items: center;
    background: var(--color-accent);
    color: var(--text-on-accent) !important;
    text-decoration: none;
    padding: 10px 22px;
    border-radius: 99px;
    font-size: 16px;
    font-weight: 700;
    transition: opacity 0.2s;
    white-space: nowrap;
    letter-spacing: 0.3px;
}

.btn-afiliate:hover { opacity: 0.88; }

/* CTA + toggle de tema */
.nav-cta {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}

/* Toggle de tema (desktop) */
.nav-theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: none;
    border: 1px solid var(--border-on-dark);
    border-radius: 50%;
    color: var(--text-nav);
    font-size: 18px;
    cursor: pointer;
    transition: color 0.2s, background 0.2s, border-color 0.2s;
    flex-shrink: 0;
}

.nav-theme-toggle:hover {
    color: var(--color-accent);
    border-color: var(--color-accent);
    background: var(--accent-ghost);
}

/* Icono según el tema activo: en dark se ofrece el sol, en light la luna */
.nav-theme-toggle .ti-moon { display: none; }
[data-theme="light"] .nav-theme-toggle .ti-sun { display: none; }
[data-theme="light"] .nav-theme-toggle .ti-moon { display: inline-block; }

/* Sobre la barra flotante blanca */
.site-header.scrolled .nav-theme-toggle {
    color: var(--text-primary);
    border-color: var(--border-subtle);
}

/* Hamburger */
.nav-hamburger {
    display: none;
    flex-direction: column;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
    /* Por encima del menú fullscreen (z-index 999) para
       que el botón X quede visible y clickeable al abrir */
    position: relative;
    z-index: 1000;
}

.nav-hamburger span {
    display: block;
    width: 24px; height: 2px;
    background: var(--text-nav);
    border-radius: 2px;
    transition: transform 0.3s, opacity 0.3s;
}

.nav-hamburger.open span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}
.nav-hamburger.open span:nth-child(2) {
    opacity: 0;
}
.nav-hamburger.open span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

/* X naranja cuando el menú está abierto */
.nav-hamburger.open span {
    background: var(--color-accent);
}

/* Mobile menu — fullscreen */
.nav-mobile {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100vh;
    height: 100dvh; /* iOS Safari: evita desbordes con la URL bar */
    background: var(--color-dark);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0;
    z-index: 999;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.nav-mobile.open {
    opacity: 1;
    pointer-events: all;
}

/* Logo dentro del menú mobile */
.nav-mobile-logo {
    position: absolute;
    top: 20px; left: 24px;
}

/* El logo original es oscuro → se invierte sobre fondo var(--color-dark)
   (mismo truco que usa footer.css) */
.nav-mobile-logo img {
    filter: brightness(0) invert(1);
}

.nav-mobile ul {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    list-style: none;
    margin: 0; padding: 0;
    width: 100%;
}

.nav-mobile a {
    display: block;
    color: var(--text-nav);
    text-decoration: none;
    font-size: 28px;
    font-weight: 700;
    padding: 10px 32px;
    text-align: center;
    transition: color 0.2s;
}

.nav-mobile a:hover { color: var(--color-accent); }

/* Grupo "Sindicato" en mobile: label + sublinks aplanados
   (sin acordeón: más simple y robusto en menú fullscreen) */
.nav-mobile-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

.nav-mobile-label {
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--text-muted-dark);
    padding: 18px 32px 2px;
}

.nav-mobile-sublinks {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

.nav-mobile-sublinks a {
    font-size: 20px;
    font-weight: 600;
    padding: 9px 32px;
}

.nav-mobile .btn-afiliate {
    font-size: 16px;
    margin-top: 24px;
    padding: 14px 40px;
}

/* Toggle de tema (mobile, dentro del menú fullscreen) */
.nav-mobile-theme {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: none;
    border: 1px solid var(--border-on-dark);
    border-radius: 99px;
    color: var(--text-nav);
    font-size: 18px;
    font-weight: 600;
    padding: 12px 28px;
    margin-top: 24px;
    cursor: pointer;
    transition: color 0.2s, border-color 0.2s;
}

.nav-mobile-theme:hover {
    color: var(--color-accent);
    border-color: var(--color-accent);
}

.nav-mobile-theme i { font-size: 22px; color: var(--color-accent); }

.nav-mobile-theme .ti-moon { display: none; }
[data-theme="light"] .nav-mobile-theme .ti-sun { display: none; }
[data-theme="light"] .nav-mobile-theme .ti-moon { display: inline; }

/* ==============================================
   Tema claro — header SIN scroll:
   - Con hero oscuro debajo (home): texto y logo CLAROS
     (default: el navbar flota sobre la foto oscura).
   - Páginas interiores (sin .hero-slider hermano): fondo
     claro → texto y logo OSCUROS.
   ============================================== */
[data-theme="light"] .site-header:not(:has(~ .hero-slider)):not(.scrolled):not(.menu-open) .nav-logo .nav-logo-light { display: none; }
[data-theme="light"] .site-header:not(:has(~ .hero-slider)):not(.scrolled):not(.menu-open) .nav-logo .nav-logo-dark { display: block; }
[data-theme="light"] .site-header:not(:has(~ .hero-slider)):not(.scrolled):not(.menu-open) .nav-links a,
[data-theme="light"] .site-header:not(:has(~ .hero-slider)):not(.scrolled):not(.menu-open) .nav-dropdown-toggle {
    color: var(--text-primary);
}
[data-theme="light"] .site-header:not(:has(~ .hero-slider)):not(.scrolled):not(.menu-open) .nav-hamburger span {
    background: var(--text-primary);
}
[data-theme="light"] .site-header:not(:has(~ .hero-slider)):not(.scrolled) .nav-theme-toggle {
    color: var(--text-primary);
    border-color: var(--border-subtle);
}

/* Responsive: subimos el breakpoint de 768px a 992px porque con
   4 items + dropdown + CTA el menú desktop desborda antes de 768px */
@media (max-width: 992px) {
    .nav-links { display: none; }
    .nav-cta { display: none; }
    .nav-hamburger { display: flex; }

    /* La máscara de recorte usa % del ancho: en pantallas chicas las
       diagonales quedan desproporcionadas contra la altura de la barra.
       En responsive la barra flotante vuelve a rectangular redondeada. */
    .site-header::before {
        clip-path: none;
        border-radius: 14px;
    }
}