/* =========================================================
   LUCE BONITO
   HERO DEFINITIVO - IMAGEN ENTERA, SIN RECORTES
   ========================================================= */


/*
 * Evitamos que el header padre recorte el hero.
 */
.site-header,
header.site-header {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;

    overflow: visible !important;
}


/*
 * Este hero tiene una clase nueva deliberadamente.
 * Así nos da igual todo el CSS viejo de .brand-hero.
 */
.luce-hero-v2 {
    position: relative !important;

    width: 100% !important;
    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: #f8e9ee !important;
}


/*
 * CLAVE:
 *
 * - width 100%
 * - height auto
 * - SIN cover
 * - SIN altura fija
 * - SIN max-height
 *
 * El navegador tiene que enseñar la imagen COMPLETA.
 */
.luce-hero-v2 > 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-path: none !important;

    border: 0 !important;
}


/* Nada de pseudoelementos sobre el banner */
.luce-hero-v2::before,
.luce-hero-v2::after {
    content: none !important;
    display: none !important;
}


/* =========================================================
   VÍDEOS CERCA DE LA CABECERA
   ========================================================= */

.reels-section {
    margin-top: 0 !important;

    padding-top: 18px !important;
}


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


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


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


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


/* =========================================================
   MÓVIL
   También mostramos la imagen completa
   ========================================================= */

@media (max-width: 850px) {

    .luce-hero-v2 {
        width: 100% !important;
        height: auto !important;

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


    .luce-hero-v2 > img {
        width: 100% !important;
        height: auto !important;

        max-height: none !important;

        object-fit: contain !important;
    }

}