/*======================================
HEADER
======================================*/

.header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 9999;
    padding: 24px 0;
    background: transparent;
    transition:
        background .45s ease,
        backdrop-filter .45s ease,
        padding .45s ease,
        box-shadow .45s ease;
}

.header-container {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 40px;
}

/* LOGO — centrado */
.logo {
    grid-column: 2;
    grid-row: 1;
    justify-self: center;
}

/* Prefijado con .header (no ".logo img" a secas) para ganarle en           */
/* especificidad a ".woocommerce img, .woocommerce-page img" del theme      */
/* padre Kadence (misma especificidad, pero carga después): sin este         */
/* empate a favor nuestro, esa regla pisa el height:36px con height:auto,   */
/* y como el SVG del logo declara width/height="100%" en su propio <svg>    */
/* (ver assets/images/logo.svg), sin una altura fija el navegador no puede  */
/* resolver su tamaño intrínseco y termina renderizando 0×0 — el logo       */
/* "desaparece" en cualquier página con esas clases (tienda, categorías,    */
/* producto).                                                               */
.header .logo img {
    height: 36px;
    width: auto;
    display: block;
    transition: filter .3s ease;
}

/* Blanco sobre el hero: solo en home, antes de hacer scroll */
:where(body.home) .header:not(.scrolled) .logo img {
    filter: brightness(0) invert(1);
}

:where(body.home) .header:not(.scrolled) .nav a,
:where(body.home) .header:not(.scrolled) .nav-dropdown-toggle,
:where(body.home) .header:not(.scrolled) .menu-toggle {
    color: var(--color-white);
    text-shadow: 0 1px 4px rgba(0, 0, 0, .2);
}

/* Oscuro en páginas internas, o en home después de hacer scroll */
:where(body:not(.home)) .header .nav a,
:where(body:not(.home)) .header .nav-dropdown-toggle,
:where(body:not(.home)) .header .menu-toggle,
.header.scrolled .nav a,
.header.scrolled .nav-dropdown-toggle,
.header.scrolled .menu-toggle {
    color: var(--color-text-dark);
}

:where(body:not(.home)) .header .logo img,
.header.scrolled .logo img {
    filter: none;
}

/* Fondo blanco difuminado al hacer scroll */
.header.scrolled {
    padding: 16px 0;
    background: rgba(255, 255, 255, .85);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    box-shadow: 0 1px 0 rgba(0, 0, 0, .06);
}

/* NAV — envoltorio sin caja propia en desktop: nav-left/nav-right */
/* se ubican directamente en las columnas del grid, junto al logo   */
.nav {
    display: contents;
}

.nav-left,
.nav-right {
    display: flex;
    align-items: center;
    gap: 32px;
}

.nav-left {
    grid-column: 1;
    grid-row: 1;
    justify-self: end;
    margin-right: 56px;
}

.nav-right {
    grid-column: 3;
    grid-row: 1;
    justify-self: start;
    margin-left: 56px;
}

.nav a,
.nav-dropdown-toggle {
    position: relative;
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: .03em;
    text-decoration: none;
}

/* Subrayado que se dibuja de izquierda a derecha en vez de un simple      */
/* fade de opacidad — usa currentColor para heredar el blanco/oscuro que   */
/* ya resuelve .header (ver reglas de arriba) sin duplicar esa lógica.     */
.nav a::after,
.nav-dropdown-toggle::after {
    content: '';
    position: absolute;
    left: 0;
    right: 100%;
    bottom: -3px;
    height: 1px;
    background: currentColor;
    transition: right .35s cubic-bezier(.65, 0, .35, 1);
}

.nav a:hover::after,
.nav-dropdown-toggle:hover::after,
.nav-dropdown.is-open .nav-dropdown-toggle::after {
    right: 0;
}

/* Sin esto, un click (no solo el teclado) deja el outline azul nativo del  */
/* navegador pegado en el botón — sobre todo notorio en "[ Menu ]" en       */
/* mobile, que se queda ahí incluso después de cerrar el menú. El estilo    */
/* de foco propio (más abajo) sigue mostrándose para navegación por         */
/* teclado vía :focus-visible.                                              */
.nav a,
.nav-dropdown-toggle,
.logo,
.menu-toggle {
    outline: none;
}

.nav a:focus-visible,
.nav-dropdown-toggle:focus-visible,
.logo:focus-visible,
.menu-toggle:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 4px;
    border-radius: 2px;
}

/* DROPDOWN TIENDA */
/* display:inline-flex + align-items:center (no solo position:relative):     */
/* sin esto, este div no tiene font-size/line-height propios y hereda el     */
/* line-height del body (bastante más alto que los 14px/line-height:1 del    */
/* botón de adentro), quedando más alto que los <a> hermanos en .nav-left —  */
/* eso corría "Tienda" unos px hacia abajo respecto de "Inicio". Con flex,   */
/* este div se ajusta al alto real del botón y listo.                       */
.nav-dropdown {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.nav-dropdown-toggle {
    background: none;
    border: none;
    margin: 0;
    padding: 0;
    color: inherit;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    display: inline-flex;
    align-items: center;
}

/* Firefox mete un padding interno invisible en los botones (vía              */
/* ::-moz-focus-inner) que `padding: 0` no logra quitar del todo — sin esto   */
/* "Tienda" queda unos px más abajo que el resto de links del nav.            */
.nav-dropdown-toggle::-moz-focus-inner {
    border: 0;
    padding: 0;
}

.nav-dropdown-menu {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 12px;
    padding: 12px 0;
    min-width: 220px;
    background: var(--color-white);
    box-shadow: 0 8px 24px rgba(0, 0, 0, .12);
    border-radius: 4px;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-8px);
    transition: opacity .25s ease, transform .3s cubic-bezier(.16, .84, .44, 1), visibility .25s ease;
}

.nav-dropdown.is-open .nav-dropdown-menu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
}

.nav-dropdown-menu a {
    color: var(--color-text-dark) !important;
    padding: 8px 20px;
    white-space: nowrap;
}

.nav-dropdown-menu a::after {
    left: 20px;
    right: calc(100% - 20px);
    bottom: 2px;
}

.nav-dropdown-menu a:hover::after {
    right: 20px;
}

/* MENU TOGGLE (solo mobile) */
.menu-toggle {
    display: none;
    background: none;
    border: none;
    font-family: var(--font-body);
    font-size: 14px;
    cursor: pointer;
}

@media (max-width: 768px) {
    .header-container {
        grid-template-columns: auto 1fr auto;
        padding: 0 20px;
    }

    .logo {
        grid-column: 1;
        grid-row: 1;
        justify-self: start;
    }

    .nav {
        display: flex;
        grid-column: 1 / -1;
        position: fixed;
        inset: 0;
        z-index: 9998;
        /* Degradé rosa → blanco (nunca llega a blanco puro dentro de la      */
        /* pantalla visible — el stop de 100% queda fuera, en 145%, para que */
        /* el texto blanco siga siendo legible en todo el alto real).        */
        background: linear-gradient(165deg, var(--color-primary) 0%, var(--color-pink-light) 65%, var(--color-white) 145%);
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
        gap: 30px;
        padding: 90px 24px 40px;
        overflow-y: auto;

        opacity: 0;
        visibility: hidden;
        transform: translateY(-30px);
        transition: opacity .35s ease, transform .4s cubic-bezier(.22,1,.36,1), visibility .35s ease;
    }

    /* En mobile el nav es una sola lista: los grupos dejan de agrupar visualmente */
    .nav-left,
    .nav-right {
        display: contents;
    }

    .nav.is-open {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }

    .nav a {
        color: var(--color-white) !important;
        font-size: 19px;
        font-weight: 500;
    }

    .nav-dropdown {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    /* !important porque le compite en especificidad a la regla de color      */
    /* oscuro de arriba (:where(body:not(.home)) .header .nav-dropdown-toggle */
    /* = dos clases) — sin esto "Tienda" quedaba oscuro en vez de blanco acá. */
    .nav-dropdown-toggle {
        color: var(--color-white) !important;
        font-size: 19px;
        font-weight: 500;
    }

    /* El submenú ya se ve siempre, sin necesidad de tocar "Tienda" antes    */
    /* (a diferencia de escritorio, que sigue abriéndolo con el click — ver  */
    /* header.js). "Tienda" es ahora un link directo a la tienda.            */
    .nav-dropdown-menu {
        position: static;
        align-items: center;
        background: transparent;
        box-shadow: none;
        margin-top: 16px;
        gap: 16px;
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: none;
        transition: none;
    }

    .nav-dropdown-menu a {
        color: var(--color-white) !important;
        padding: 0;
    }

    /* "Tienda" ya hace de "Ver todo" en mobile (link directo a la tienda). */
    .nav-dropdown-viewall {
        display: none;
    }

    .nav-dropdown-menu a::after {
        left: 0;
        right: 100%;
        bottom: -3px;
    }

    .nav-dropdown-menu a:hover::after {
        right: 0;
    }

    .menu-toggle {
        display: block;
        grid-column: 3;
        grid-row: 1;
        justify-self: end;
        position: relative;
        z-index: 9999;
    }

    /* Sin esto, la página de atrás seguía scrolleando mientras el menú     */
    /* (position:fixed) quedaba pegado a la pantalla — al scrollear con el  */
    /* menú abierto se veía el footer de la página mezclado con los links   */
    /* del menú. Ver toggle de esta clase en js/header.js.                  */
    body.nav-open {
        overflow: hidden;
    }
}

@media (prefers-reduced-motion: reduce) {
    .nav a::after,
    .nav-dropdown-toggle::after,
    .nav-dropdown-menu,
    .nav {
        transition: none;
    }
}