:root {
    --header-gradient: linear-gradient(180deg,rgba(2, 27, 52, 1) 0%, rgba(2, 27, 52, 0.64) 79%, rgba(2, 27, 52, 0) 100%);
    --menu-font: "Lato", sans-serif;
    --menu-blue: #16407a;
    --menu-gold: #c89c3d;
}

/* =========================================
   HEADER PRINCIPAL (PC) - BLINDADO
========================================= */
.header {
    background-image: var(--header-gradient);
    padding: 0.8rem 0;
    font-family: var(--menu-font) !important;
    position: fixed;
    top: 0;
    z-index: 9999;
    width: 100%;
    transition: background-color 0.4s ease, padding 0.4s ease, box-shadow 0.4s ease;
}

.header--contact {
    position: relative;
    background-color: #fcfcfc !important;
    background-image: none;
    padding-bottom: 2rem;
    box-sizing: border-box;
}

.header .header__logo-link { filter: brightness(0) invert(1); }
.header--solid .header__logo-link, .header--contact .header__logo-link { filter: initial; }

/* Colores Base */
.header .header__menu-link { color: #ffffff !important; }
.header--solid .header__menu-link, .header--contact .header__menu-link { color: var(--menu-blue) !important; }

.header--solid {
    box-shadow: 0 4px 25px rgba(0, 0, 0, 0.06);
    background-color: #ffffff !important;
    background-image: none;
    padding: 0.5rem 0;
}

.header__container {
    max-width: 100%; 
    margin: 0 auto;
    padding: 0 4rem;
    display: flex;
    align-items: center;
    justify-content: space-between; 
    flex-wrap: wrap;
}

/* LOGO */
.header__logo { display: flex; align-items: center; height: 100%; }
.header__logo-link { display: flex; align-items: center; transition: transform 0.4s ease; }
.header__logo-link:hover { transform: scale(1.05); }
.header__logo-link img { width: auto !important; height: 70px !important; max-height: 100% !important; object-fit: contain; display: block; margin: 0; }

/* MENÚ PC */
.header__nav { flex-grow: 1; display: flex; justify-content: flex-end; align-items: center; gap: 1.5rem; }
.header__menu { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 3rem; }

/* IDIOMAS */
.header__lang-menu { list-style: none; padding: 0; margin: 0; display: flex; align-items: center; gap: 0.75rem; padding-left: 1.5rem; border-left: 1px solid rgba(255,255,255,0.2); }
.header--solid .header__lang-menu { border-left: 1px solid rgba(0,0,0,0.1); }
.header__lang-link { text-decoration: none; font-family: var(--menu-font) !important; font-weight: 600 !important; font-size: 0.8rem !important; letter-spacing: 1px; text-transform: uppercase; color: #ffffff !important; padding: 0.35rem 0.6rem; border-radius: 4px; border: 1px solid transparent; transition: all 0.3s ease; }
.header__lang-link:hover { color: var(--menu-gold) !important; border-color: var(--menu-gold); }
.header--solid .header__lang-link, .header--contact .header__lang-link { color: var(--menu-blue) !important; }
.header--solid .header__lang-link:hover, .header--contact .header__lang-link:hover { color: var(--menu-gold) !important; border-color: var(--menu-gold); }

/* LETRAS DEL MENÚ PC */
.header__menu-link { 
    text-decoration: none; 
    display: block; 
    padding-bottom: 0.3rem; 
    font-family: var(--menu-font) !important;
    font-size: 0.85rem !important; 
    font-weight: 700 !important; 
    letter-spacing: 2px !important; 
    text-transform: uppercase !important; 
    transition: color 0.3s ease; 
}
.header__menu-underline { height: 2px; background-color: var(--menu-gold); width: 100%; transform: scaleX(0); transform-origin: center; transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1); }
.header__menu-item:hover .header__menu-link { color: var(--menu-gold) !important; }
.header__menu-item:hover .header__menu-underline { transform: scaleX(1); }
.header__menu-link--active { color: var(--menu-gold) !important; }
.header__menu-link--active + .header__menu-underline { transform: scaleX(1); }

/* EXTRAS PC */
.header__toggle { display: none; font-size: 2rem; background: none; border: none; cursor: pointer; }
.header__close { display: none; position: fixed; top: 1rem; right: 1rem; font-size: 2rem; background: none; border: none; color: var(--menu-blue); cursor: pointer; z-index: 100; }
.header__menu--active+.header__close { display: block; }
.header__menu-item { position: relative; }
.header__menu-item--has-submenu { z-index: 10000; }
.header__menu-link--has-submenu { display: inline-flex !important; align-items: center !important; gap: 0.5rem !important; }
.header__menu-link--has-submenu::after { content: ""; width: 0.4rem; height: 0.4rem; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); transition: transform 0.35s ease; margin-top: -3px; }

/* SUBMENÚ PC */
.header__submenu { list-style: none; margin: 0; padding: 1rem 0; position: absolute; top: 100%; left: 50%; transform: translateX(-50%) translateY(15px); min-width: 12rem; background: #ffffff; border-radius: 8px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); opacity: 0; pointer-events: none; transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1); z-index: 10001; }
.header__submenu::before { content: ""; position: absolute; left: 0; right: 0; top: -1rem; height: 1rem; }
.header__submenu-item { width: 100%; }
.header__submenu-link { display: block; padding: 0.8rem 1.5rem; text-decoration: none; font-family: var(--menu-font) !important; font-weight: 500 !important; font-size: 0.85rem !important; letter-spacing: 1px !important; text-transform: uppercase !important; color: var(--menu-blue) !important; text-align: center; transition: background-color 0.2s ease, color 0.2s ease; }
.header__submenu-link:hover { background-color: #f5f7fa; color: var(--menu-gold) !important; }
.header__menu-item--has-submenu:hover .header__submenu, .header__menu-item--has-submenu:focus-within .header__submenu, .header__submenu:hover { opacity: 1; transform: translateX(-50%) translateY(0); pointer-events: auto; }
.header__menu-item--has-submenu:hover .header__menu-link--has-submenu::after, .header__menu-item--has-submenu:focus-within .header__menu-link--has-submenu::after { transform: rotate(225deg); }

/* =========================================
   TABLETS (769px - 1024px)
========================================= */
@media screen and (min-width: 769px) and (max-width: 1024px) {
    .header__container { padding: 0 2rem; }
    .header__menu { gap: 1.5rem; }
    .header__logo-link img { height: 55px !important; }
    .header__menu-link { font-size: 0.75rem !important; letter-spacing: 1px !important; }
    .header__lang-menu { display: flex; padding-left: 1rem; }
}

/* =========================================
   MÓVILES (ELEGANTE, CENTRADO Y MINIMALISTA)
========================================= */
@media screen and (max-width: 768px) {
    
    .header { padding: 0 !important; }
    
    /* BARRA SUPERIOR */
    .header__container { 
        padding: 1rem 1.5rem !important; 
        display: flex !important;
        flex-wrap: nowrap !important;
        justify-content: space-between !important;
        align-items: center !important;
    }
    
    .header__logo-link img { height: 50px !important; }
    
    .header__nav { 
        flex-direction: row !important; 
        align-items: center !important; 
        /* Usamos margin en el toggle en lugar de gap en el nav para asegurar la separación */
        width: auto !important; 
        justify-content: flex-end !important;
    }

    .header__toggle { 
        display: block !important; 
        margin: 0 0 0 2rem !important; /* 👈 AQUÍ ESTÁ LA MAGIA: Forzamos un margen izquierdo de 2rem (separando banderas de hamburguesa) */
        padding: 0 !important; 
    }
    .header .header__toggle { color: #ffffff; }
    .header--solid .header__toggle, .header .header__close, .header--solid .header__close, .header--contact .header__toggle { color: var(--menu-blue); }
    
    .header__lang-menu { 
        display: flex !important; 
        flex-direction: row !important;
        width: auto !important; 
        border-left: none !important; 
        padding-left: 0 !important; 
        margin-top: 0 !important; 
    }
    .header__lang-link { color: #ffffff !important; font-size: 0.9rem !important; padding: 0.2rem !important; }
    .header--solid .header__lang-link, .header--contact .header__lang-link { color: var(--menu-blue) !important; }

    /* EL MENÚ DESPLEGABLE MÓVIL (PANTALLA COMPLETA) */
    .header__menu {
        display: none; 
        flex-direction: column;
        align-items: center;
        position: fixed;
        left: 0;
        top: 0;
        width: 100% !important;
        max-width: 100vw !important;
        height: 100vh !important;
        background-color: #ffffff !important;
        z-index: 99;
        justify-content: flex-start;
        padding: 6rem 2rem 2rem 2rem !important;
        margin: 0 !important;
        box-sizing: border-box !important;
        overflow-y: auto; 
    }
    
    .header__menu--active { display: flex !important; }
    
    /* ESTRUCTURA DEL ÍTEM (CENTRA EL CONTENIDO) */
    .header__menu-item {
        width: 100% !important;
        border-bottom: 1px solid rgba(200, 156, 61, 0.4) !important; /* Línea dorada sutil */
        margin-bottom: 0 !important;
        text-align: center !important;
        box-sizing: border-box !important;
        display: flex !important;
        flex-direction: column !important; /* Apila título y opciones */
        align-items: center !important;
    }

    /* TEXTO PRINCIPAL + FLECHA A LA DERECHA */
    .header .header__menu .header__menu-link,
    .header .header__menu-link {
        padding: 1.5rem 0 !important;
        font-family: var(--menu-font) !important;
        font-size: 1.15rem !important;
        font-weight: 800 !important; 
        color: var(--menu-blue) !important;
        letter-spacing: 2.5px !important;
        display: flex !important;
        flex-direction: row !important; /* Texto y Flecha lado a lado */
        justify-content: center !important; /* Al centro de la pantalla */
        align-items: center !important;
        gap: 12px !important; /* Separación elegante entre letra y flecha */
        width: 100% !important;
        text-align: center !important;
        box-sizing: border-box !important;
    }
    
    .header__menu-underline { display: none !important; }

    /* FLECHA DORADA */
    .header__menu-item--has-submenu { width: 100% !important; }
    
    .header .header__menu .header__menu-link--has-submenu::after {
        content: "" !important;
        display: block !important; 
        width: 8px !important;
        height: 8px !important;
        border-right: 2px solid var(--menu-gold) !important;
        border-bottom: 2px solid var(--menu-gold) !important;
        transform: rotate(45deg) !important;
        margin: 0 !important; 
        margin-top: -3px !important; /* Ajuste para que se vea perfectamente alineada al texto */
        transition: transform 0.3s ease !important;
        flex-shrink: 0 !important;
    }

    /* ACORDEÓN: EL SUBMENÚ JUSTO DEBAJO */
    .header__submenu {
        position: static !important; /* ELIMINA el comportamiento raro que lo mandaba a la derecha */
        top: auto !important;
        left: auto !important;
        transform: none !important; /* Mata las reglas del PC */
        min-width: 0 !important;
        width: 100% !important;
        background: transparent !important;
        box-shadow: none !important;
        border-radius: 0 !important;
        margin: 0 !important;
        pointer-events: auto !important;
        max-height: 0 !important;
        opacity: 0 !important;
        overflow: hidden !important;
        padding: 0 !important;
        transition: max-height 0.4s ease, opacity 0.4s ease, padding 0.4s ease !important;
        display: block !important; /* Evita conflictos de alineación en flexbox */
    }

    .header__menu-item.is-open .header__submenu,
    .header__menu-item:focus-within .header__submenu,
    .header__menu-item:hover .header__submenu {
        max-height: 350px !important;
        opacity: 1 !important;
        padding: 0 0 1.5rem 0 !important; /* Un poco de respiro al final */
    }

    .header__menu-item.is-open .header__menu-link--has-submenu::after,
    .header__menu-item:focus-within .header__menu-link--has-submenu::after,
    .header__menu-item:hover .header__menu-link--has-submenu::after {
        transform: rotate(225deg) !important; /* La flecha mira hacia arriba al abrir */
        margin-top: 4px !important;
    }

    /* ENLACES SECUNDARIOS (CALIFORNIA/HUANCHACO) */
    .header .header__menu .header__submenu-link {
        display: block !important;
        width: 100% !important;
        padding: 0.7rem 0 !important;
        font-family: var(--menu-font) !important;
        font-size: 1rem !important;
        text-align: center !important; /* Centrado absoluto */
        color: #777777 !important; /* Gris elegante que no compite con el azul */
        text-transform: capitalize !important;
        font-weight: 500 !important;
        letter-spacing: 1.5px !important;
        transition: all 0.3s ease !important;
        box-sizing: border-box !important;
    }

    .header .header__menu .header__submenu-link:hover, 
    .header .header__menu .header__submenu-link:active {
        color: var(--menu-gold) !important;
        font-weight: 700 !important;
        transform: scale(1.03) !important; 
    }
}