/*
########     ###    ##    ## ##    ## ######## ########     ##       ####  ######  ########    ###     ######  
##     ##   ## ##   ###   ## ###   ## ##       ##     ##    ##        ##  ##    ##    ##      ## ##   ##    ## 
##     ##  ##   ##  ####  ## ####  ## ##       ##     ##    ##        ##  ##          ##     ##   ##  ##       
########  ##     ## ## ## ## ## ## ## ######   ########     ##        ##   ######     ##    ##     ##  ######  
##     ## ######### ##  #### ##  #### ##       ##   ##      ##        ##        ##    ##    #########       ## 
##     ## ##     ## ##   ### ##   ### ##       ##    ##     ##        ##  ##    ##    ##    ##     ## ##    ## 
########  ##     ## ##    ## ##    ## ######## ##     ##    ######## ####  ######     ##    ##     ##  ######  */
.bannerutiles { 
    display: flex;
    flex-direction: column;
    margin: auto;
    overflow: hidden;
    height: calc(70vh - 130px); /* Ajusta la altura restando la navbar fija */

    & .arriba {
        width: 100%;
        margin: auto;
        display: flex;
        position: relative;
        height: 100%; /* Ajustar altura al nuevo tamaño del banner */
    }

    & .slides {
        display: flex;
        transition: transform 0.5s ease-in-out;
        width: 100%;
        height: auto;
    }

    & .slides img {
        width: 100%;
        height: 100%; /* Ajustar la altura a la del contenedor */
        object-fit: cover; /* Ajustar la imagen para que cubra todo el contenedor */
    }

    & .slides a {
        flex: 0 0 100%;
    }
}
/*
########   #######  ########  #######  ##    ## ########  ######  
##     ## ##     ##    ##    ##     ## ###   ## ##       ##    ## 
##     ## ##     ##    ##    ##     ## ####  ## ##       ##       
########  ##     ##    ##    ##     ## ## ## ## ######    ######  
##     ## ##     ##    ##    ##     ## ##  #### ##             ## 
##     ## ##     ##    ##    ##     ## ##   ### ##       ##    ## 
########   #######     ##     #######  ##    ## ########  ######   
 */
.btn-left-banner,
.btn-right-banner {
    background-color: #001489;
    color: white;
    border: none;
    width: 45px;
    height: 45px;
    border-radius: 50%;
    padding: 10px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    z-index: 10;
    box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.2);
}

.btn-left-banner {
    left: 15px;
}

.btn-right-banner {
    right: 15px;
}
/*
#### ##     ##    ###     ######   ######## ##    ## ########  ######  
 ##  ###   ###   ## ##   ##    ##  ##       ###   ## ##       ##    ## 
 ##  #### ####  ##   ##  ##        ##       ####  ## ##       ##       
 ##  ## ### ## ##     ## ##   #### ######   ## ## ## ######    ######  
 ##  ##     ## ######### ##    ##  ##       ##  #### ##             ## 
 ##  ##     ## ##     ## ##    ##  ##       ##   ### ##       ##    ## 
#### ##     ## ##     ##  ######   ######## ##    ## ########  ######   */

.imagen-movil {
    display: none; /* Esconde las imágenes móviles por defecto */
}

.imagen-pc {
    display: block; /* Muestra las imágenes de escritorio por defecto */
}

/* Responsividad para tablets y móviles */
@media (max-width: 1024px) { /* Tablets */
    .bannerutiles {
        height: calc(60vh - 130px); /* Ajuste para tablets */
    }
}

@media (max-width: 768px) { /* Móviles */
    .bannerutiles {
        height: calc(50vh - 130px); /* Ajuste para móviles */

        & .imagen-movil {
            display: block; /* Muestra imágenes móviles en pantallas pequeñas */
        }
        & .imagen-pc {
            display: none; /* Oculta imágenes de escritorio */
        }

        & .arriba {
            width: 100%;
            margin: auto;
            height: 100%;
        }

        & .arriba img {
            width: 100%;
            height: auto;
            object-fit: cover;
        }
    }
}