/* ==========================================================
   LUCE BONITO - CABECERA DEFINITIVA
   Barra -> menú -> logo completo -> vídeos
   ========================================================== */


/* ==========================================================
   TOPBAR
   EN FLUJO NORMAL: NO TAPA EL LOGO
   ========================================================== */

.topbar {
    position: relative !important;

    top: auto !important;
    left: auto !important;
    right: auto !important;

    z-index: 100;

    width: 100% !important;

    height: 40px !important;
    min-height: 40px !important;

    margin: 0 !important;

    padding: 0 4% !important;

    display: flex !important;

    align-items: center !important;
    justify-content: center !important;

    gap: clamp(28px, 4.5vw, 68px) !important;

    background:
        rgba(250,240,246,.96) !important;

    color: #654f6b !important;

    font-family: "Jost", sans-serif !important;

    font-size: 12px !important;
    font-weight: 500 !important;

    white-space: nowrap;
}


.topbar-item {
    display: flex !important;

    align-items: center;

    gap: 8px;
}


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

.site-header {
    position: relative !important;

    width: 100% !important;

    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;

    margin: 0 !important;
    padding: 0 !important;

    overflow: visible !important;
}


/* ==========================================================
   MENÚ
   TAMBIÉN EN FLUJO NORMAL
   ========================================================== */

.desktop-nav {
    /*
     * sticky está EN el flujo.
     * No tapa el hero cuando cargas la página.
     */
    position: sticky !important;

    top: 0 !important;
    left: auto !important;
    right: auto !important;

    z-index: 3000 !important;

    width: 100% !important;

    height: 62px !important;
    min-height: 62px !important;

    margin: 0 !important;

    padding: 0 3.5% !important;

    background:
        rgba(249,235,244,.96) !important;

    border: 0 !important;

    border-bottom:
        1px solid rgba(120,80,135,.10) !important;

    box-shadow:
        0 4px 18px rgba(70,40,80,.045) !important;

    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}


.nav-menu > a,
.nav-dropdown > button {
    min-height: 62px !important;
}


/* ==========================================================
   HERO
   ESTE ES EL PUNTO CLAVE
   ========================================================== */

.luce-hero-complete {
    position: relative !important;

    width: 100% !important;

    /*
     * NO fijamos altura.
     * La altura la decide la imagen.
     */
    height: auto !important;

    min-height: 0 !important;
    max-height: none !important;

    margin: 0 !important;
    padding: 0 !important;

    display: block !important;

    overflow: visible !important;

    line-height: 0 !important;

    background: #fbefef !important;
}


/*
 * IMAGEN COMPLETA.
 *
 * NO cover.
 * NO crop.
 * NO translate.
 * NO max-height.
 */

.luce-hero-complete > img {
    position: static !important;

    inset: auto !important;

    width: 100% !important;
    height: auto !important;

    min-width: 0 !important;
    min-height: 0 !important;

    max-width: 100% !important;
    max-height: none !important;

    margin: 0 !important;
    padding: 0 !important;

    display: block !important;

    object-fit: contain !important;
    object-position: center center !important;

    transform: none !important;

    clip: auto !important;
    clip-path: none !important;

    border: 0 !important;
}


/* Ningún pseudoelemento puede tapar la imagen */

.luce-hero-complete::before,
.luce-hero-complete::after {
    display: none !important;

    content: none !important;
}


/* ==========================================================
   ANULAMOS LOS HERO ANTIGUOS
   ========================================================== */

.brand-hero-background {
    display: none !important;
}


/* ==========================================================
   VÍDEOS JUSTO DEBAJO
   ========================================================== */

.reels-section {
    position: relative !important;

    margin: 0 !important;

    padding:
        22px 20px
        38px !important;

    border: 0 !important;
}


.reels-section::before {
    display: none !important;

    content: none !important;
}


.reels-section .section-heading {
    margin:
        0 0 12px !important;
}


.reels-section .section-heading > p {
    margin:
        0 0 4px !important;
}


.reels-section .section-heading h2 {
    margin: 0 !important;

    line-height: 1.05 !important;
}


.reels-track {
    margin-top:
        16px !important;
}


/* ==========================================================
   TABLET / MÓVIL
   ========================================================== */

@media (max-width: 850px) {

    .topbar {
        display: none !important;
    }


    .desktop-nav {
        display: none !important;
    }


    .mobile-header {
        /*
         * También EN FLUJO.
         * Nada de position:absolute encima del logo.
         */
        position: relative !important;

        top: auto !important;
        left: auto !important;
        right: auto !important;

        z-index: 3000 !important;

        width: 100% !important;

        min-height: 54px !important;

        background:
            rgba(247,231,242,.97) !important;

        backdrop-filter: blur(14px);
    }


    .luce-hero-complete {
        width: 100% !important;

        height: auto !important;
        max-height: none !important;
    }


    .luce-hero-complete > img {
        width: 100% !important;

        height: auto !important;
        max-height: none !important;

        object-fit: contain !important;
    }


    .reels-section {
        padding-top:
            18px !important;
    }

}