/* Ajustes compartidos de Valnor: menú móvil y cabeceras visuales. */

/* El carrusel principal conserva proporción, no crece indefinidamente y no se deforma. */
#header-carousel {
    overflow: hidden;
    background: #061429;
}

#header-carousel .carousel-inner {
    width: 100%;
    max-width: 1920px;
    margin-right: auto;
    margin-left: auto;
}

#header-carousel .carousel-item,
#header-carousel .carousel-item img {
    height: clamp(560px, 65vh, 720px) !important;
    min-height: 0 !important;
}

#header-carousel .carousel-item img {
    display: block;
    width: 100%;
    max-width: 1920px;
    object-fit: cover !important;
    object-position: center;
}

/* Cabeceras fotográficas de las páginas interiores. */
@media (min-width: 992px) {
    body > .container-fluid.p-0.mb-5 {
        overflow: hidden;
        background: #061429;
    }

    body > .container-fluid.p-0.mb-5 > .position-relative {
        width: 100%;
        max-width: 1920px;
        height: clamp(390px, 31vw, 480px);
        margin-right: auto;
        margin-left: auto;
        overflow: hidden;
    }

    body > .container-fluid.p-0.mb-5 > .position-relative > img.w-100 {
        display: block;
        width: 100%;
        height: 100% !important;
        max-height: none !important;
        object-fit: cover !important;
        object-position: center;
    }
}

/* El menú del tema del blog se convierte en un panel móvil compacto. */
@media (max-width: 991px) {
    .valnor-nav-wrap .valnor-navbar {
        display: flex;
        min-height: 82px;
        align-items: center;
        flex-wrap: wrap;
        padding-right: 18px;
        padding-left: 18px;
    }

    .valnor-nav-wrap .valnor-brand {
        min-height: 82px;
    }

    .valnor-nav-wrap .valnor-menu-toggle {
        flex: 0 0 auto;
        margin-left: auto;
    }

    .valnor-nav-wrap .valnor-menu {
        display: none !important;
        width: calc(100% + 36px);
        max-height: 0;
        flex: 0 0 calc(100% + 36px);
        align-items: stretch;
        margin: 0 -18px;
        padding: 0 18px;
        overflow: hidden;
        background: #091e3e;
        border-top: 1px solid rgba(255, 255, 255, .1);
    }

    .valnor-nav-wrap .valnor-menu.is-open {
        display: flex !important;
        max-height: calc(100dvh - 128px);
        flex-direction: column;
        gap: 0;
        padding-top: 8px;
        padding-bottom: 18px;
        overflow-y: auto;
    }

    .valnor-nav-wrap .valnor-menu > a,
    .valnor-nav-wrap .valnor-dropdown > summary {
        display: flex;
        width: 100%;
        min-height: 48px;
        align-items: center;
        justify-content: space-between;
        padding: 11px 8px;
        color: #fff;
        border-bottom: 1px solid rgba(255, 255, 255, .09);
        text-align: left;
    }

    .valnor-nav-wrap .valnor-menu > a.is-active {
        color: #48c5ef;
        box-shadow: inset 3px 0 0 #06a3da;
    }

    .valnor-nav-wrap .valnor-dropdown {
        width: 100%;
    }

    .valnor-nav-wrap .valnor-dropdown-menu {
        position: static !important;
        width: 100%;
        min-width: 0;
        margin: 0;
        padding: 4px 0 8px 18px;
        background: rgba(255, 255, 255, .035);
        border: 0;
        border-radius: 0;
        box-shadow: none;
    }

    .valnor-nav-wrap .valnor-dropdown-menu a {
        display: block;
        padding: 10px 8px;
        color: rgba(255, 255, 255, .82);
        text-align: left;
    }
}

@media (max-width: 575.98px) {
    #header-carousel .carousel-item,
    #header-carousel .carousel-item img {
        height: 520px !important;
    }
}
/* Cabeceras diferenciadas, comprimidas y estables en pantallas grandes. */
.bg-header.valnor-hero-cases {
    background-image:
        linear-gradient(rgba(9, 30, 62, .76), rgba(9, 30, 62, .76)),
        url("../img/hero-casos-exito.webp") !important;
    background-position: center 52% !important;
    background-size: cover !important;
}

.bg-header.valnor-hero-about {
    background-image:
        linear-gradient(rgba(9, 30, 62, .78), rgba(9, 30, 62, .78)),
        url("../img/hero-sobre-nosotros.webp") !important;
    background-position: center !important;
    background-size: cover !important;
}

.bg-header.valnor-hero-contact {
    background-image:
        linear-gradient(rgba(9, 30, 62, .76), rgba(9, 30, 62, .76)),
        url("../img/hero-contacto.webp") !important;
    background-position: center !important;
    background-size: cover !important;
}

.valnor-blog-hero {
    background-image:
        linear-gradient(rgba(9, 30, 62, .76), rgba(9, 30, 62, .76)),
        url("../img/hero-blog.webp") !important;
    background-position: center !important;
    background-size: cover !important;
}