/* ########   #######  ########  #######  ##    ## ########  ######     ########  ######   ######   #######  ##          ###    ########  #### ########     ###    ########  
##     ## ##     ##    ##    ##     ## ###   ## ##       ##    ##    ##       ##    ## ##    ## ##     ## ##         ## ##   ##     ##  ##  ##     ##   ## ##   ##     ## 
##     ## ##     ##    ##    ##     ## ####  ## ##       ##          ##       ##       ##       ##     ## ##        ##   ##  ##     ##  ##  ##     ##  ##   ##  ##     ## 
########  ##     ##    ##    ##     ## ## ## ## ######    ######     ######    ######  ##       ##     ## ##       ##     ## ########   ##  ##     ## ##     ## ##     ## 
##     ## ##     ##    ##    ##     ## ##  #### ##             ##    ##             ## ##       ##     ## ##       ######### ##   ##    ##  ##     ## ######### ##     ## 
##     ## ##     ##    ##    ##     ## ##   ### ##       ##    ##    ##       ##    ## ##    ## ##     ## ##       ##     ## ##    ##   ##  ##     ## ##     ## ##     ## 
########   #######     ##     #######  ##    ## ########  ######     ########  ######   ######   #######  ######## ##     ## ##     ## #### ########  ##     ## ########   */
.opciones {
    padding: 2.1em 1.7em;
    overflow: visible;
}

.opciones ul {
    display: flex;
    flex-wrap: nowrap;         /* ← Nunca permite saltar de línea */
    justify-content: space-between;
    gap: 1em;
    padding: 0 1em;
    margin: 2.5em auto;
    max-width: 100%;
}


.opciones ul li {
    flex: 1 1 0;
    min-width: 0;
    max-width: 100%;
    border-radius: 14px;
    transition: all 0.3s ease-in-out;
    position: relative;
    overflow: hidden;
    text-align: center;
}

/* Franjas de colores */
.opciones ul li::before,
.opciones ul li::after {
    content: "";
    position: absolute;
    left: 0;
    width: 100%;
    height: 14px;
    z-index: 5;
}

.opciones ul li::before { top: 0; }
.opciones ul li::after { bottom: 0; }

.opciones ul li:nth-child(1)::before,
.opciones ul li:nth-child(1)::after { background: #5CACCC; }

.opciones ul li:nth-child(2)::before,
.opciones ul li:nth-child(2)::after { background: #8CD19D; }

.opciones ul li:nth-child(3)::before,
.opciones ul li:nth-child(3)::after { background: #CEE879; }

.opciones ul li:nth-child(4)::before,
.opciones ul li:nth-child(4)::after { background: #FCB653; }

.opciones ul li:nth-child(5)::before,
.opciones ul li:nth-child(5)::after { background: #FF5254; }

/* Imagen */
.imagen-opcion {
    width: 100%;
    height: 550px;
    background-size: cover;
    background-position: center;
    filter: grayscale(100%);
    transition: filter 0.5s ease-in-out;
    border-radius: 14px;
}

/* Botón flotante */
.botoncito {
    position: absolute;
    bottom: 10%;
    left: 50%;
    transform: translateX(-50%);
    padding: 1.6em 1.4em;
    font-size: 1.25em;
    border-radius: 12px;
    text-align: center;
    max-width: 90%;
    white-space: normal;
    z-index: 10;
    display: block;
    line-height: 1.4;
    text-decoration: none;
}

.botoncito h3 {
    font-size: 1.15em;
    color: white;
    text-align: center;
    padding: 0 0.4em;
    margin: 0;
    overflow: visible; 
    white-space: normal;
    line-height: 1.25;
    letter-spacing: 0.3px;
    display: block;
}


.botoncito i {
    display: block;
    font-size: 3.2em;
    margin-bottom: 0.6em;
    color: white;
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
}

.opciones ul li:nth-child(1) .botoncito { background: rgba(92, 172, 196, 0.85); }
.opciones ul li:nth-child(2) .botoncito { background: rgba(140, 209, 157, 0.85); }
.opciones ul li:nth-child(3) .botoncito { background: rgba(206, 232, 121, 0.85); }
.opciones ul li:nth-child(4) .botoncito { background: rgba(252, 182, 83, 0.85); }
.opciones ul li:nth-child(5) .botoncito { background: rgba(255, 82, 84, 0.85); }

.boton-opcion {
    display: block;
    text-decoration: none;
    position: relative;
    overflow: hidden;
}

/* Hover states */
.boton-opcion:hover .imagen-opcion {
    filter: grayscale(0%);
}

.boton-opcion:hover .botoncito {
    background: rgba(0, 0, 0, 0.8);
}

.opciones ul li:hover {
    transform: translateY(-6px);
    box-shadow: 0 4.5px 11px rgba(0, 0, 0, 0.25);
}

/* ########  ########  ######  ########   #######  ##    ##  ######  #### ##     ## #### ########     ###    ########     
##     ## ##       ##    ## ##     ## ##     ## ###   ## ##    ##  ##  ##     ##  ##  ##     ##   ## ##   ##     ##    
##     ## ##       ##       ##     ## ##     ## ####  ## ##        ##  ##     ##  ##  ##     ##  ##   ##  ##     ##    
########  ######    ######  ########  ##     ## ## ## ##  ######   ##  ##     ##  ##  ##     ## ##     ## ##     ##    
##   ##   ##             ## ##        ##     ## ##  ####       ##  ##   ##   ##   ##  ##     ## ######### ##     ##    
##    ##  ##       ##    ## ##        ##     ## ##   ### ##    ##  ##    ## ##    ##  ##     ## ##     ## ##     ##    
##     ## ########  ######  ##         #######  ##    ##  ######  ####    ###    #### ########  ##     ## ########     
*/

/* Responsive */
@media screen and (max-width: 1024px) {
    .opciones ul {
        justify-content: center;
    }
}

@media screen and (max-width: 900px) and (orientation: landscape) {
    .botoncito {
        padding: 1.7em 1.5em;
        font-size: 1.4em;
    }

    .botoncito h3 {
        font-size: 1.75em;
    }
}

@media screen and (max-width: 768px) {
    .opciones ul {
        flex-direction: column;
        gap: 1em;
    }

    .opciones ul li {
        flex: none;
        width: 100%;
    }


    .imagen-opcion {
        height: 470px;
    }

    .botoncito {
        padding: 1.3em;
        font-size: 1.2em;
    }

    .botoncito h3 {
        font-size: 1.35em;
    }
}
@media screen and (max-height: 500px) {
    .opciones ul {
        flex-direction: column;
        gap: 1em;
    }

    .opciones ul li {
        flex: none;
        width: 100%;
    }

    .imagen-opcion {
        height: 470px;
    }

    .botoncito {
        padding: 1.3em;
        font-size: 1.2em;
    }

    .botoncito h3 {
        font-size: 1.35em;
    }
}


 /* 
 ########   #######  ########  #######  ##    ##    ########  ######   ######  ##     ## ######## ##          ###     ######  
##     ## ##     ##    ##    ##     ## ###   ##    ##       ##    ## ##    ## ##     ## ##       ##         ## ##   ##    ## 
##     ## ##     ##    ##    ##     ## ####  ##    ##       ##       ##       ##     ## ##       ##        ##   ##  ##       
########  ##     ##    ##    ##     ## ## ## ##    ######    ######  ##       ##     ## ######   ##       ##     ##  ######  
##     ## ##     ##    ##    ##     ## ##  ####    ##             ## ##       ##     ## ##       ##       #########       ## 
##     ## ##     ##    ##    ##     ## ##   ###    ##       ##    ## ##    ## ##     ## ##       ##       ##     ## ##    ## 
########   #######     ##     #######  ##    ##    ########  ######   ######   #######  ######## ######## ##     ##  ######  
 */
.ver-por-escuelas {
    display: flex;
    justify-content: center;
    margin-top: 1.28em;
}


.ver-por-escuelas a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 15px 30px; /* Aumentar el padding para hacer el botón más grande */
    width: auto; /* Se ajusta al texto */
    min-width: 180px; /* Aumentar el tamaño mínimo del botón */
    background-color: #001489;
    color: white;
    text-align: center;
    letter-spacing: 1px;
    font-size: 18px; /* Aumentar el tamaño de la fuente */
    font-weight: normal;
    border: 2px solid #ffffff;
    border-radius: 10px;
    box-shadow: none;
    transition: background 0.3s ease-in-out, color 0.3s ease-in-out, border 0.3s ease-in-out;
    text-decoration: none;
    font-family: Arial, sans-serif;
}

.ver-por-escuelas a:hover {
    background-color: #ffffff;
    color: #001489;
    border: 2px solid #001489;
}

h5{
    font-size: 2rem;
    font-weight: bold;
    color: #333;
    text-align: center;
    display: block;
    width: 100%;
}