/*===================================================*/
/*=== CARRUSEL DE DETALLES ========================*/
/*===================================================*/

#detalles-section {
    background-color: var(--color-fondo-oscuro);
    padding: 100px 0 50px 0;
    overflow: hidden;
}

.carousel-container-detalles {
    width: 90%;
    max-width: 1000px;
    aspect-ratio: 16 / 9;
    margin: 0 auto;
    position: relative;
}

#detalles-section .carousel-title {
    text-align: center;
    margin-bottom: 50px;
}

#detalles-section .carousel-title h2 {
    color: var(--color-primario-vivo);
}

#detalles-section .carousel-title p {
    color: #ddd;
}

.details-carousel {
    overflow: hidden;
    /* Recorta las esquinas de los slides */
    border-radius: 20px;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6);
    position: relative;
    /* Contexto para flechas/puntos */
}

.details-carousel .swiper-wrapper {
    border-radius: 20px;
    /* Forzar el redondeo en el contenedor interno */
}

.details-carousel .swiper-slide {

    position: relative;
    /* Necesario para el posicionamiento absoluto del hijo */
    overflow: hidden;
    /* Buena práctica para contener la imagen */
}

.details-carousel .swiper-slide img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Asignación de imágenes de fondo a cada slide */
.details-carousel .slide-detalles-1 {
    background-image: url('../../img/bisagra-detalle-puerta-seccional.jpg');
}

.details-carousel .slide-detalles-2 {
    background-image: url('../../img/detalle-de-paneles-de-puerta-seccional-negra.jpg');
}

.details-carousel .slide-detalles-3 {
    background-image: url('../../img/mecanismo-interior-de-puerta-seccional-automatica.jpg');
}

.details-carousel .slide-detalles-4 {
    background-image: url('../../img/motor-wifi-para-puerta-seccional-liftranger.jpg');
}


/* --- Navegación Personalizada --- */
#detalles-section .swiper-button-next,
#detalles-section .swiper-button-prev {
    color: var(--color-primario-vivo);
}

.carousel-nav-detalles {
    position: absolute;
    bottom: 40px;
    /* Ajustado para estar dentro del contenedor */
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 15px;
    z-index: 10;
}

.carousel-nav-detalles .swiper-pagination-bullet {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
    border: 2px solid rgba(212, 175, 55, 0.5);
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    opacity: 1;
}

.carousel-nav-detalles .swiper-pagination-bullet:hover {
    background: rgba(212, 175, 55, 0.5);
}

.carousel-nav-detalles .swiper-pagination-bullet-active {
    background: #d4af37;
    border-color: #d4af37;
    width: 40px;
    border-radius: 10px;
    box-shadow: 0 0 20px rgba(212, 175, 55, 0.6);
}

@media (max-width: 768px) {
    .carousel-container-detalles {
        aspect-ratio: 4 / 3;
    }

    .details-carousel .swiper-slide {
        height: 100%;
    }

    .details-carousel .slide-overlay {
        padding: 30px;
    }

    .details-carousel .slide-title {
        font-size: 32px;
    }

    .details-carousel .slide-description {
        font-size: 16px;
    }

    .carousel-arrow-detalles {
        width: 45px;
        height: 45px;
    }
}