.slider-container {

    position: relative;

    width: 100vw;

    left: 50%;

    transform: translateX(-50%);

    

    /* Forzamos la proporción y destruimos alturas mínimas conflictivas en TODAS las pantallas */

    height: 31.25vw !important; 

    min-height: 0 !important;

    

    overflow: hidden;

    margin-top: 90px;

    background-color: transparent;

}



.slider-wrapper {

    position: relative; 

    width: 100%;

    height: 100% !important;

    min-height: 0 !important;

}



.banner-slide {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    

    background-size: cover !important;

    background-position: center !important;

    background-repeat: no-repeat;

    

    display: none; 

    opacity: 1 !important;

    transition: opacity 1s ease-in-out;

    z-index: 1;

    filter: none !important;  

    background-color: transparent;

}

.banner-slide:first-child { 

    display: block; 

}





.banner-link-overlay {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    z-index: 10; 

    display: block;

    cursor: pointer;

}



.visually-hidden {

    position: absolute;

    width: 1px;

    height: 1px;

    margin: -1px;

    padding: 0;

    overflow: hidden;

    clip: rect(0, 0, 0, 0);

    border: 0;

}



/* ====== FLECHAS DE NAVEGACIÓN ====== */

.slider-arrow {

    position: absolute;

    top: 50%;

    transform: translateY(-50%);

    z-index: 10;

    

    /* Estilos del botón */

    background: rgba(0, 0, 0, 0.5); 

    color: white;

    border: 2px solid #cb6019; /* Borde naranja */

    padding: 10px 15px;

    cursor: pointer;

    font-size: 1.5em;

    border-radius: 50%;

    transition: background-color 0.3s, color 0.3s;

}



.slider-arrow:hover {

    background: var(--accent-green); /* Naranja de DCnet al pasar el mouse */

    color: #fff;

}



.prev-arrow { left: 10px; }

.next-arrow { right: 10px; }



/* ====== PUNTOS DE NAVEGACIÓN (DOTS) ====== */

.slider-dots {

    position: absolute;

    bottom: 15px;

    left: 50%;

    transform: translateX(-50%);

    z-index: 10;

    text-align: center;

}



.dot {

    cursor: pointer;

    height: 12px;

    width: 12px;

    margin: 0 5px;

    background-color: #bbb;

    border-radius: 50%;

    display: inline-block;

    transition: background-color 0.6s ease;

    border: 2px solid white; 

    box-shadow: 0 2px 5px rgba(0,0,0,0.5); /* Sombra para que se vea en fondos claros */

}



.dot.active, .dot:hover {

    background-color: #cb6019; /* Naranja activo */

    border-color: #cb6019;

}



.header-content-wrapper {

    position: relative; 

    z-index: 2; 

    color: #fff; 

}



/* ====== ANIMACIÓN RESPONSIVA ====== */

@media (max-width: 768px) {

    /* Achicamos controles para que no estorben en el banner más bajito */

    .slider-arrow {

        font-size: 1rem !important;

        padding: 4px 8px !important;

    }

    

    .slider-dots {

        bottom: 2px !important;

    }

    

    .dot {

        height: 6px !important;

        width: 6px !important;

        margin: 0 3px !important;

        border-width: 1px !important;

    }

}