/* =============================================
   Scroll Header Overlay
   Casa Xu'unan — activa overlay oscuro al scroll
   en todas las paginas excepto home (index.php)
   ============================================= */

/* Overlay oscuro al scroll.
   El <header> es height:80px fijo. Cuando entra el banner dentro del header
   ocupa ~45px y deja solo ~35px para logo+menu+botones que necesitan 80px.
   Los elementos se salen por arriba/abajo.
   Solucion: cuando el banner esta visible, aumentar la altura del header
   para que todos los elementos quepan y el background los cubra. */

/* Si el banner esta visible, expandir el header para acomodar todo */
header:has(.dbb-sticky.dbb-visible) {
    height: auto !important;
    min-height: 125px;
}

/* Fix: designesia.js agrega "height-auto" al header cuando se interactua
   con el menu mobile, que le pone fondo oscuro. En mobile lo forzamos
   transparente para que no aparezca la barra negra residual. */
@media (max-width: 767px) {
    header.height-auto {
        background: transparent !important;
    }
}

header.header-scrolled {
    background: rgba(26, 23, 20, 0.72) !important;
    backdrop-filter: blur(18px) saturate(1.4);
    -webkit-backdrop-filter: blur(18px) saturate(1.4);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04), 0 4px 20px rgba(0, 0, 0, 0.18);
    transition: background 0.4s cubic-bezier(0.4, 0, 0.2, 1),
                box-shadow 0.4s cubic-bezier(0.4, 0, 0.2, 1),
                backdrop-filter 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Transicion suave tambien al volver a arriba */
header {
    transition: background 0.4s cubic-bezier(0.4, 0, 0.2, 1),
                box-shadow 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}