.banner-container {
    position: relative;
    width: 100%;
    /* Relación de aspecto basada en banner.png (6912/1782 = 3.88) */
    aspect-ratio: 6912 / 1782; /* Mantiene la misma proporción que banner.png */
    background-color: #000; /* Fondo negro para evitar espacios en blanco */
    overflow: hidden;
}

.banner-slide {
    width: 100%;
    height: 100%;
    display: none;
    object-fit: cover; /* La imagen cubre todo el contenedor manteniendo su proporción */
    object-position: center; /* Centra la imagen */
    vertical-align: bottom;
}

.banner-slide.active {
    display: block;
}

.banner-controls {
    position: absolute;
    bottom: 20px;
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
    gap: 10px;
    z-index: 10;
}

.banner-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.5);
    cursor: pointer;
    transition: background-color 0.3s ease;
    border: 2px solid rgba(0, 0, 0, 0.3);
}

.banner-dot.active {
    background-color: #ffcc00;
    border-color: #000;
}

.banner-dot:hover {
    background-color: #ffcc00;
}

/* Animación de fade */
.banner-slide {
    animation: fadeEffect 1s;
}

@keyframes fadeEffect {
    from { opacity: 0.4; }
    to { opacity: 1; }
}

/* Media query para móviles - mantiene la misma relación de aspecto */
@media (max-width: 768px) {
    .banner-controls {
        bottom: 10px;
    }
    .banner-dot {
        width: 14px; /* Puntos más grandes para touch */
        height: 14px;
    }
}