/* Layout: Header */
.header__mancheta {
    height: 4px;
    background: var(--gradient-mancheta);
    position: sticky;
    top: 0;
    z-index: var(--z-mancheta);
}

.header {
    background-color: var(--surface-raised);
    box-shadow: var(--shadow-sm);
    position: sticky;
    top: 4px;
    z-index: var(--z-sticky);
}

.header__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    height: auto;
    min-height: 60px;
    padding: var(--space-xs) var(--space-m);
}

.header__logo {
    display: flex;
    align-items: center;
    gap: 8px;
    /* La marca no cede espacio: si algo no cabe, que sea el menú. */
    flex-shrink: 0;
    text-decoration: none;
    color: var(--text-strong);
}

.header__logo-img {
    height: 26px;
    width: auto;
}

/* Con el wordmark en texto (serif cursiva) la distinción entre las dos marcas
   la hacía la propia tipografía. Ahora ambas son la misma familia geométrica,
   así que el filete separador hace falta también en móvil. */
.header__logo-sep {
    display: block;
    width: 1px;
    height: 24px;
    /* Token y no hex: el filete conmuta en oscuro con el resto de bordes. */
    background: var(--border-strong);
}

/* Logotipo "Marca Privada". Antes era texto en la serif de identidad; ahora es
   la marca definitiva. Hereda el color por currentColor, así que sigue al token
   y conmuta en modo oscuro sin reglas propias. El ancho se deduce del viewBox
   ajustado (ratio 7,95:1), por eso solo se fija la altura. */
.header__logo-mp {
    height: 15px;
    width: auto;
    aspect-ratio: 642.4 / 80.8;
    fill: currentColor;
    color: var(--link);
    flex-shrink: 0;
}

.header__actions {
    display: flex;
    align-items: center;
    gap: var(--space-s);
}

/* "Acceder" mide 44px de alto (WCAG 2.5.5): con el relleno de .btn--sm se
   quedaba en 30px, poco para el pulgar. El .header__actions delante gana a
   button.css (que se carga después) sin recurrir a !important. */
.header__actions .header__login-btn {
    display: inline-flex;
    align-items: center;
    min-height: 2.75rem;
    padding: 0 0.625rem;
}

/* "Mi cuenta" como texto plano sin caja (antes, estilo en línea). El icono solo
   se ve donde sustituye al texto. Los selectores van con .header__actions
   delante porque button.css se carga DESPUÉS y sus .btn--sm/.btn--outline
   ganarían a igualdad de especificidad. */
.header__actions .header__account {
    display: inline-flex;
    align-items: center;
    /* Mismo objetivo táctil de 44px que "Acceder" */
    min-height: 2.75rem;
    border-color: transparent;
    color: var(--text-body);
    white-space: nowrap;
}

.header__account svg {
    display: none;
}

.header__actions .header__logout {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.75rem;
    min-height: 2.75rem;
    padding: 0;
}

/* Móvil: logo, "Acceder" o "Mi cuenta"+salir y la hamburguesa suman más que
   el ancho de pantalla, y al no caber los botones caían debajo del logo. Se
   compacta todo para que vayan en una sola línea hasta 360px:
   - el logo baja un escalón (sigue a la misma proporción entre las dos marcas);
   - "Mi cuenta" pasa a icono, con el texto accesible para el lector;
   - los huecos y rellenos se aprietan. */
@media (max-width: 559px) {
    .header__inner {
        padding: var(--space-xs) var(--space-s);
    }

    .header__logo {
        gap: 6px;
    }

    .header__logo-img {
        height: 19px;
    }

    .header__logo-sep {
        height: 18px;
    }

    .header__logo-mp {
        height: 11px;
    }

    .header__actions {
        gap: var(--space-xs);
    }
}

/* Por debajo de 400 (Android de 360) ni así cabían: un escalón más de logo. */
@media (max-width: 399px) {
    .header__logo-img {
        height: 17px;
    }

    .header__logo-sep {
        height: 16px;
    }

    .header__logo-mp {
        height: 10px;
    }
}

/* A 320 (iPhone SE, Android pequeños) el header se partía en dos líneas: logo
   + "Acceder" + hamburguesa sumaban ~340px. Se quita el filete (el cambio de
   marca ya lo marca el color del logotipo de Marca Privada), el logo baja un
   último escalón y se aprietan los rellenos laterales, sin tocar los 44px de
   alto de los objetivos táctiles. Cabe en una línea incluso con barra de
   desplazamiento clásica (~305px útiles). */
@media (max-width: 359px) {
    .header__inner {
        padding-left: var(--space-xs);
        padding-right: var(--space-xs);
    }

    .header__logo-sep {
        display: none;
    }

    .header__logo-img {
        height: 15px;
    }

    .header__logo-mp {
        height: 9px;
    }

    .header__actions .header__login-btn {
        padding: 0 0.5rem;
    }
}

/* "Mi cuenta" a icono en móvil y en la franja 1024-1199, donde con el menú en
   línea el texto empujaba el botón de salir fuera de la pantalla. */
@media (max-width: 559px), (min-width: 1024px) and (max-width: 1199px) {
    .header__actions .header__account {
        padding: 6px;
    }

    .header__account svg {
        display: block;
    }

    .header__account-label {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }
}

/* Mobile Nav Container.
   Desplegado por defecto: si el JS no llega, el menú queda apilado y usable en
   vez de inaccesible. La clase .js-nav (script inline en el head) activa el
   colapso, y así no hay parpadeo de menú abierto al cargar. */
.header__nav-container {
    display: flex;
    width: 100%;
    flex-direction: column;
    padding: var(--space-m) 0;
    border-top: 1px solid var(--border-hair);
    background: var(--surface-raised);
    order: 3;
}

.js-nav .header__nav-container {
    display: none;
}

.js-nav .header__nav-container.is-open {
    display: flex;
}

.nav__list {
    display: flex;
    flex-direction: column;
    list-style: none;
    gap: var(--space-s);
    margin: 0 0 var(--space-m) 0;
    padding: 0;
}

.nav__link {
    text-decoration: none;
    color: var(--text-strong);
    font-size: 0.95rem;
    font-weight: 700;
    text-transform: uppercase;
    display: block;
    padding: var(--space-xs) 0;
}

.nav__link:hover,
.nav__link--active,
.nav__link--subscribe {
    color: var(--link);
}

/* La página actual no puede depender solo del color (WCAG 1.4.1), y además
   "Suscribirse" lleva el mismo dorado siempre y parecía la activa: el
   subrayado es lo que distingue de verdad la página en la que estás. */
.nav__link--active {
    text-decoration: underline;
    text-decoration-thickness: 0.125rem;
    text-decoration-color: var(--link-underline);
    text-underline-offset: 0.4em;
}

/* Mobile Toggle Hamburger */
.header__menu-toggle {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    /* Objetivo táctil de 44px (antes 30). El margen negativo devuelve los 7px
       que crece por cada lado, así el header no cambia de alto ni de reparto. */
    width: 2.75rem;
    height: 2.75rem;
    margin: -0.4375rem;
    cursor: pointer;
    /* Es un <button>: hay que desmontar el estilo nativo */
    background: none;
    border: 0;
    padding: 0;
    color: inherit;
}

.header__menu-toggle span {
    display: block;
    width: 24px;
    height: 2px;
    background-color: var(--text-strong);
    transition: transform 0.3s ease, opacity 0.3s ease, background-color 0.3s ease;
}

/* Conversión de hamburguesa a X. El estado lo lleva aria-expanded, que es lo
   que además anuncia el lector de pantalla; no hay estado duplicado en CSS. */
.header__menu-toggle[aria-expanded="true"] span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}

.header__menu-toggle[aria-expanded="true"] span:nth-child(2) {
    opacity: 0;
}

.header__menu-toggle[aria-expanded="true"] span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

/* Base Language Switcher within mobile menu */
.header__lang {
    padding-top: var(--space-s);
    border-top: 1px solid var(--border-hair-soft);
}

/* Tablet: solo crece el logo. El menú sigue en hamburguesa. */
@media (min-width: 768px) {
    .header__logo-img {
        height: 30px;
    }

    .header__logo-mp {
        height: 19px;
    }
}

/* Desktop: menú en línea. Espera a 1024 porque logo (~330px) + los cuatro
   enlaces + idioma + "Acceder" suman ~1.000px: a 768 no cabían, y como el
   enlace del logo era lo único que encogía, el menú se montaba encima del
   logo de Marca Privada y lo tapaba. */
@media (min-width: 1024px) {
    .header__inner {
        height: 70px;
        flex-wrap: nowrap;
        padding: 0 var(--space-m);
    }

    .header__menu-toggle {
        display: none;
    }

    /* En escritorio no hay colapso: el nav se muestra siempre */
    .js-nav .header__nav-container {
        display: flex;
    }

    .header__nav-container {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        width: auto;
        padding: 0;
        border: none;
        order: 2;
        flex: 1;
        margin-left: var(--space-xl);
    }

    .nav__list {
        flex-direction: row;
        gap: var(--space-l);
        margin: 0;
    }

    .header__lang {
        padding: 0;
        border: none;
        margin-left: auto;
        margin-right: var(--space-l);
    }

    .header__actions {
        order: 3;
    }

    .header__actions .header__login-btn {
        padding: 0 0.75rem;
    }
}
/* De 1024 a 1199 el menú cabe, pero con los aires de desktop "Acceder" se
   salía por la derecha. Se recortan los huecos, no los textos. */
@media (min-width: 1024px) and (max-width: 1199px) {
    .header__nav-container {
        margin-left: var(--space-l);
    }

    .nav__list {
        gap: var(--space-m);
    }

    .header__lang {
        margin-right: var(--space-m);
    }
}