/* ==========================================
   LOGO DINÁMICO HEADER
   ========================================== */
.glass-menu {
    display: inline-flex;
    width: fit-content;
    max-width: 100%;
    flex: 0 0 auto;

    background: rgba(255, 255, 255, 0.65);

    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 50px;

    -webkit-backdrop-filter: blur(14px) saturate(110%);
    backdrop-filter: blur(14px) saturate(110%);

    box-shadow:
        0 8px 30px rgba(0, 0, 0, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.25);

    padding: 8px 22px;

    transition:
        background 0.3s ease,
        border-color 0.3s ease,
        box-shadow 0.3s ease;
}

.jet-mobile-menu__container {
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}

.cuervo-logo-dinamico img {
    transition: filter 0.3s ease;
}

.cuervo-logo-dinamico.cuervo-logo-sobre-azul img {
    filter: brightness(0) invert(1);
}

/* ==========================================
   ACORDEONES FLEX
   ========================================== */


.acordeon {
    width: 100%;
    height: 500px;

    display: flex;
    flex-direction: row;
    align-items: stretch;

    gap: 16px;

    transition: gap 0.4s ease;
}

.acordeon:hover {
    gap: 6px;
}




.acordeon > .e-con.acordeon-item {
    position: relative;

    flex: 1 1 0;

    min-width: 70px;
    height: 100%;

    overflow: hidden;

    border-radius: 18px;

    opacity: 1;

    cursor: pointer;

    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    transition:
        flex 0.5s cubic-bezier(.2,.8,.2,1),
        opacity 0.4s ease;
}




.acordeon > .e-con.acordeon-item::before {
    content: "";

    position: absolute;
    inset: 0;

    z-index: 1;

    border-radius: inherit;

    background: linear-gradient(
        0deg,
        rgb(0 0 0 / 75%) 0%,
        rgb(0 0 0 / 20%) 50%,
        rgb(0 0 0 / 0%) 100%
    );

    opacity: 0;

    pointer-events: none;

    transition: opacity 0.4s ease;
}




.acordeon > .e-con.acordeon-item > * {
    position: relative;

    z-index: 3;
}




.acordeon > .e-con.acordeon-item:hover {
    flex: 4 1 0;

    opacity: 1;

    z-index: 5;
}


/* Degradado únicamente en la tarjeta activa */
.acordeon > .e-con.acordeon-item:hover::before {
    opacity: 1;
}


/* Atenúa ligeramente las demás SOLO cuando hay hover */
.acordeon:hover > .e-con.acordeon-item:not(:hover) {
    opacity: 0.8;
}




@media (max-width: 767px) {

    .acordeon {
        height: auto;

        flex-direction: column;

        gap: 12px;
    }

    .acordeon:hover {
        gap: 12px;
    }

    .acordeon > .e-con.acordeon-item {
        width: 100%;
        height: 130px;

        flex: none;

        min-width: 0;

        border-radius: 18px;

        opacity: 1;
    }

    .acordeon > .e-con.acordeon-item:hover {
        flex: none;

        height: 230px;
    }

    /* En móvil el degradado queda visible */
    .acordeon > .e-con.acordeon-item::before {
        opacity: 1;
    }

    .acordeon:hover > .e-con.acordeon-item:not(:hover) {
        opacity: 1;
    }

}

@media (min-width: 1025px) {

    .acordeon .elementor-heading-title {
        font-size: 32px;

        transition:
            font-size 0.45s ease-in-out,
            line-height 0.45s ease-in-out;
    }

    .acordeon > .e-con.acordeon-item:hover .elementor-heading-title {
        font-size: 64px;
    }

}







/* ------------------------------------------------------------
   MAPA RUTA LOS CAUCES
   ------------------------------------------------------------ */

.cuervo-mapa-ruta {
    position: relative;
    width: 100%;
    height: 650px;
    overflow: hidden;
    border-radius: 24px;
}

.cuervo-mapa-ruta iframe {
    position: absolute;
    inset: 0;
    width: 100% !important;
    height: 100% !important;
    border: 0;
    display: block;
}


/* TABLET */
@media (max-width: 1024px) {

    .cuervo-mapa-ruta {
        height: 550px;
    }

}


/* MÓVIL */
@media (max-width: 767px) {

    .cuervo-mapa-ruta {
        height: 480px;
        border-radius: 18px;
    }

}