.nav-tabs .nav-link.active, .nav-tabs .nav-item.show .nav-link {
    color: var(--avis-color-red);
    border-color: var(--avis-color-red);
    border-bottom: 3px solid;
}

.nav-tabs .nav-link:hover {
    background-color: var(--mdb-nav-tabs-link-hover-bgc);
    border-color: rgba(0,0,0,0);
    color: var(--avis-color-red);
}

.new-tabs .nav-link {
    color: var(--avis-color-dark);
}

#swiper-comments .card {
    height: 100%;
    min-height: 260px;
    display: flex;
    flex-direction: column;
}

/* 1. Definir el contenedor relativo con altura mínima previa */
#avis-carousel {
    width: 100%;
    min-height: 250px; /* Evita que el banner colapse a 0px mientras carga el sitio */
}

/* 2. Mantener la etiqueta picture fluida */
#avis-carousel picture {
    display: block;
    width: 100%;
}

/* 3. Definir la proporción de aspecto (aspect-ratio) de la imagen según cada breakpoint de tu <picture> */
#avis-carousel picture img {
    width: 100%;
    height: auto;
    aspect-ratio: 1920 / 600; /* Pantallas grandes (Desktop) */
}

@media (max-width: 1200px) {
    #avis-carousel picture img {
        aspect-ratio: 990 / 500; /* Basado en tu <source media="(max-width: 1200px)"> */
    }
}

@media (max-width: 820px) {
    #avis-carousel picture img {
        aspect-ratio: 800 / 450; /* Basado en tu <source media="(max-width: 820px)"> */
    }
}

@media (max-width: 576px) {
    #avis-carousel picture img {
        aspect-ratio: 450 / 700; /* Basado en tu <source media="(max-width: 576px)"> */
    }
}