/* CSS del CARRUSEL*/

/* Estilos generales del carrusel */
#carouselExampleSlidesOnly {
    max-width: 100%;
    margin: auto;
    overflow: hidden;
    border-radius: 15px;
    /* Bordes redondeados */
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    /* Sombra elegante */
}

/* Ajustes de imágenes */
#carouselExampleSlidesOnly .carousel-item img,
#carouselExampleSlidesOnly .carousel-item video {
    width: 100%;
    height: 65vh;
    /* Altura adaptable (65% de la ventana) */
    object-fit: cover;
    /* Mantiene proporciones sin deformar */
    transition: transform 0.6s ease-in-out;
    /* Animación suave */
}

/* Efecto de zoom sutil en la transición */
#carouselExampleSlidesOnly .carousel-item.active img,
#carouselExampleSlidesOnly .carousel-item.active video {
    transform: scale(1.02);
}

/* Responsividad extra para pantallas pequeñas */
@media (max-width: 768px) {
    #carouselExampleSlidesOnly .carousel-item img,
    #carouselExampleSlidesOnly .carousel-item video {
        height: 40vh;
        /* Reduce altura en móviles */
    }
}


/* Texto superpuesto minimalista */
#carouselExample .carousel-caption {
    position: absolute;
    bottom: 15%;
    left: 10%;
    right: 10%;
    text-align: left;
    /* alineado a la izquierda */
    color: #fff;
    text-shadow: 1px 1px 8px rgba(0, 0, 0, 0.6);
    /* mejor legibilidad */
}

#carouselExample .carousel-caption h2 {
    font-size: 2.2rem;
    font-weight: 700;
}

#carouselExample .carousel-caption p {
    font-size: 1rem;
    font-weight: 300;
    margin-top: 10px;
}

/* Responsivo para móviles */
@media (max-width: 768px) {
    #carouselExample .carousel-caption h2 {
        font-size: 1.4rem;
    }

    #carouselExample .carousel-caption p {
        font-size: 0.9rem;
    }
}


/* Controlar altura para que no se deforme */
#carouselExample .carousel-item img,
#carouselExample .carousel-item video {
    width: 100%;
    height: 65vh;
    /* ocupa 65% de la pantalla */
    object-fit: cover;
    /* evita deformación */
}

/* Responsivo para móviles: altura menor en el carrusel principal */
@media (max-width: 768px) {
    #carouselExample .carousel-item img,
    #carouselExample .carousel-item video {
        height: 40vh;
    }
}

/* Texto */
#carouselExample .carousel-caption {
    bottom: 15%;
    left: 8%;
    right: 8%;
    text-align: left;
    color: #fff;
    text-shadow: 1px 1px 8px rgba(0, 0, 0, 0.6);
}