:root{
    --red:#DC1F26;
    --yellow:#F1A71F;
    --blue:#243B6C;
    --White:#FFFFFF;
    --black: #000000;
    --rose:#D8515B;
}

html{
    scroll-behavior: smooth;
    overflow-x: hidden;
}

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body{
    background: #fff;
    overflow-x: hidden;
    font-family: 'Fira Sans', 'Open Sans', 'Helvetica Neue', sans-serif;
}

/**go top**/
 .go-top{
    position: fixed;
    bottom: 100px;
    right: -100%;
    width: 50px;
    height: 50px;
    border: 2px solid var(--red);
    background: #DC1F26;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: 400ms;
    z-index: 9999;
}

.go-top:hover{
    border: 2px solid var(--rose);
    background: var(--rose);
}

.go-top > span{
    font-size: 30px;
    color: var(--White);
}

.go-top:hover span{
    color: var(--White);
}




/**Menu de navegacion**/






.menu{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 90px;
    background: #fff;

    /**display: flex;**/
    justify-content: space-between;
    align-items: center;
    z-index: 9999;
}

.menu .logo-box{
    margin-left: 20px;
}

.menu .logo-box img{
    margin:15px;
}



.menu .list-container{
    margin-right: 20px;
}

.menu .list-container .lists{
    display: flex;
}

.menu .list-container .lists li{
    list-style: none;
}

.menu .list-container .lists li a{
    text-decoration: none;
    margin: 0px 10px;
    padding: 8px;
    color: var(--blue);
    border-radius: 24px;
    font-size: 16px;
    transition: 0.3s;
}

.menu .list-container .lists li a.active{
    background: var(--blue);
    color: #fff;
}

.menu .list-container .lists li a:hover{
    background: var(--blue);
    color: #fff;
}


.iconomatricula a{
    width: 120px;
    height: 40px;
    background: var(--red);
    border-radius: 24px;
    border: none;
    outline: none;
    font-size: 22px;
    color: #fff;
    text-align: center;
    margin-top: 20px;
    cursor: pointer;
    transition: 0.5s;
    text-decoration: none;
    padding-top: 7px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.iconomatricula {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 15px;
}

.btn-menu > .fa-bars{
    display: none;
}



/**submenu**/

/**

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
 
  }
  
  li {
    float: left;
  }
  


  li a, .dropbtn {
    display: inline-block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
  }
  



  li a:hover, .active:hover .dropbtn {
    background-color: var(--blue);
  }
  
  li.active {
    display: inline-block;
  }
  


  .active-content {
    display: none;
    position: absolute;
    background-color: #fff;
    min-width: 160px;
    border-radius: 24px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
  }
  
  .active-content a {
    
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
  }
  
  .active-content a:hover {background-color: #fff;}
  
  .active:hover .active-content {
    display: block;
  }


**/

/**submenu**/

/** Menu de navegacion**/

/**Video**/
.videos_frame{
    position: relative;
    width: 100%;
    height: 100%;
    background-attachment: fixed;
    background-position: center;
    background-size: cover;
    margin-top: 100px;
    margin: auto;
    padding-top: 10px;
}


.videos_frame .video{
    width: 100%;
    max-width: 800px;
    margin: auto;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 5px;
    margin-bottom: 100px;
    border-radius: 10px;
    border: 2px solid var(--blue);
}
/**Video**/



/** Acerca de nosotros **/




.nosotros{
    width: 100%;
    margin-top: 120px;
    height: auto;
}

.nosotros .logo{
    margin: 10px;
    display: flex;
    align-items: center;
    flex-direction: column;
    


}

.nosotros .cabecera{
    width: 90%;
    margin: auto;
    display: flex;
    justify-content: center;
    flex-direction: column;
    margin-bottom: 15px;
}

.nosotros .cabecera h1{
    font-size: 45px;
    font-weight: 400px;
    color: var(--blue);
    text-align: center;
    margin-bottom: 5px;
}

.nosotros .cabecera h2{
    font-size: 35px;
    font-weight: 200px;
    color: var(--blue);
    text-align: center;
    margin-bottom: 5px;
}

.nosotros .cabecera h3{
    font-size: 30px;
    font-weight: 200px;
    color: var(--red);
    text-align: center;
    margin-bottom: 5px;
}

.nosotros .cabecera hr{
    background: var(--red);
    width: 25%;
    margin: auto;
    margin-bottom: 20px;
    margin-top: 0px;
    height: 2px;
    border: none;
}

.nosotros .cabecera p{
    text-align: center;
    font-size: 17px;
    color: var(--blue);
    line-height: 35px;
    margin: 10px 0px;
}

.nosotros .cabecera span{
    text-align: center;
    font-size: 20px;
    color: var(--red);
    line-height: 45px;
    margin: 10px 0px;
}


/** PDFs **/

.nosotros .cabecera .pdf{
         position: relative;
         overflow: hidden;
         width: 100%;
         padding-top: 100%;
}

.nosotros .cabecera .pdf-frame{
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
    border-radius: 10px;
    border: 5px solid var(--blue);

}

/* --------------------------------------- frame pdf silabos --------------------------------------- */
.nosotros .cabecera .acordeon .pdf2{
    position: relative;
    overflow: hidden;
    width: 100%;
    padding-top: 100%;
}

.nosotros .cabecera .acordeon .pdf-frame2{
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
width: 100%;
height: 100%;
border-radius: 10px;
border: 5px solid var(--blue);
}


.nosotros .cabecera .mapa{
    margin: 10px;
    display: flex;
    align-items: center;
    flex-direction: column;
    

}


.nosotros .cabecera .mapa-frame{
top: 0;
left: 0;
bottom: 0;
right: 0;
width: 75%;
height: 75%;
border-radius: 10px;
border: 5px solid var(--blue);

}

.nosotros .cabecera .mapa-google{
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 75%;
    height: 400px;
    border-radius: 10px;
    border: 5px solid var(--blue);
    
    }


/** INICIO -------- GALERIA galeria_light FOTO MAPA UEBI**/

.nosotros .cabecera .galeria_light{
    margin: 10px;
    display: flex;
    align-items: center;
    flex-direction: column;
/****/
    align-content: center;
    margin: 10px 110px;
    
}


.nosotros .cabecera .galeria_light img{
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 75%;
    border-radius: 10px;
    border: 5px solid var(--blue);

    /**width: 230px;
    padding: 5px;**/
    filter: grayscale(80%);
    transition: 1s;
    
}


.galeria_light img:hover{
    filter: grayscale(0);
    transform: scale(1.05);

    /**align-items: center;
    align-content: center;**/
    
}


/** FIN -------- GALERIA galeria_light FOTO MAPA UEBI**/


/* Contenedor de los divs .fecha2 */
.titulo_tarjeta {
    display: flex;
    flex-wrap: wrap; /* Permite que los elementos salten a la siguiente línea si no hay espacio */
    justify-content: space-between; /* Distribuye los elementos con espacio entre ellos */
    gap: 15px; /* Espaciado entre los elementos */
}

/* Estilo para los divs individuales */
.titulo_tarjeta .fecha2 {
    flex: 1; /* Los elementos ocupan espacio equitativo */
    min-width: 300px; /* Ancho mínimo para evitar que se hagan muy pequeños */
    max-width: 32%; /* Asegura que quepan tres en una fila cuando hay espacio */
    box-sizing: border-box; /* Incluye padding y border en el ancho */
}

/* Media query para pantallas más pequeñas */
@media (max-width: 900px) {
    .titulo_tarjeta .fecha2 {
        max-width: 48%; /* Dos elementos por fila en pantallas medianas */
    }
}

@media (max-width: 600px) {
    .titulo_tarjeta .fecha2 {
        max-width: 100%; /* Los elementos ocupan toda la fila en pantallas pequeñas */
    }
}





















.nosotros .titulo_tarjeta{
    width: 90%;
    margin: auto;
    display: flex;
    justify-content: center;
    /*flex-direction: column;*/
    margin-bottom: 55px;
}


.nosotros .titulo_tarjeta h2{
    font-size: 35px;
    font-weight: 200px;
    color: #444444;
    text-align: left;
    margin-bottom: 5px;
    margin-left: 7%;
}

.nosotros .titulo_tarjeta hr{
    background: var(--yellow);
    width: 90%;
    margin: auto;
    margin-bottom: 20px;
    margin-top: 0px;
    height: 2px;
    border: none;
    
}

.nosotros .titulo_tarjeta p{
    text-align: center;
    font-size: 17px;
    color: #444444;
    line-height: 35px;
    margin: 10px 0px;
}





.tarjetas{
    width: 100%;
    max-width: 1200px;
    height: auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin: auto;
}

.tarjetas .card{
    width: 330px;
    height: 350px;
    border-radius: 8px;
    box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2);
    overflow: hidden;
    margin: 15px;
    text-align: center;
    transition: all 0.25s;
}


.tarjetas .card img{
    width: 160px;
    height: 224px;
    /*w:330px h:220px*/
}


.tarjetas .card h4{
    font-weight: 600;
    color: var(--blue);
}

.tarjetas .card p{
    font-size: 16px;
    font-weight: 600;
    padding: 0 1rem;
    color: #444444;
}

.tarjetas .card a {
    font-weight: 300;
    text-decoration: none;
    color: #444444;
}

.tarjetas .card hr{
    width: 95%;
    height: 1px;
    background: var(--yellow);
    border: none;
    margin-bottom: 10px;
}

.boton_principal {
    text-align: center;
    margin-top: 35px;
}

.boton_principal .boton_generico{
    padding: 10px; /*espacio alrededor texto*/
    border-radius: 50px; /*bordes redondos*/
    width: 170px;
    height: 40px;
    background: var(--red);
    font-size: 20px;
    color: #fff;
    text-align: center;
    margin-top: 20px;
    text-decoration: none; /*decoración texto*/
}

.main .nosotros .boton_principal .boton_generico{
    padding: 10px; /*espacio alrededor texto*/
    border-radius: 50px; /*bordes redondos*/
    width: 170px;
    height: 40px;
    background: var(--red);
    font-size: 20px;
    color: #fff;
    text-align: center;
    margin-top: 20px;
    text-decoration: none; /*decoración texto*/
}

.main .nosotros .boton_principal .boton_generico:hover{
    background: var(--rose);
}




.boton > button{
    width: 500px;
    height: 80px;
    background: var(--blue);
    border-radius: 5px;
    border: none;
    outline: none;
    font-size: 20px;
    color: #fff;
    text-align: center;
    margin-top: 20px;
    cursor: pointer;
    transition: 0.5s;
}

.boton{
    display: block;
    justify-content: center;
    align-items: center;
    margin: 5%;
    margin-left: 10%;
    
}


.boton > button:hover{
    background: #7888A3;
}

#h11 {
    color: var(--rose);
}

/*boton para dentro de un sumary*/

.boton2 > button{
    width: 500px;
    height: 80px;
    background: var(--blue);
    border-radius: 5px;
    border: none;
    outline: none;
    font-size: 20px;
    color: #fff;
    text-align: center;
    margin-top: 20px;
    cursor: pointer;
    transition: 0.5s;
}

.boton2{
    display: block;
    justify-content: center;
    align-items: center;
    padding-bottom: 1%;
    /*
    margin: 5%;
    margin-left: 10%;
    */
    
}


.boton2 > button:hover{
    background: #7888A3;
}


/*
.nosotros .info-container .about-gallery{
    width: 100%;
    display: flex;
    justify-content: center;
    margin: 50px 0px;
}

.nosotros .info-container .about-gallery img{
    width: calc(33.33% - 10px);
    height: 300px;
    object-fit: cover;
    margin: 10px 10px;
    border-radius: 10px;
    cursor: pointer;
}

.nosotros .info-container .about-more{
    width: 100%;
    display: flex;
    justify-content: center;
}

.nosotros .info-container .about-more a{
    width: 120px;
    height: 40px;
    background: var(--red);
    border-radius: 24px;
    border: none;
    outline: none;
    font-size: 22px;
    color: #fff;
    text-align: center;
    margin-top: 20px;
    cursor: pointer;
    transition: 0.5s;
    text-decoration: none;
    padding-top: 7px;
}

.nosotros .info-container .about-more a:hover{
    background: var(--rose);
}
*/




/** Filosoifa Institucional **/
.acordeon {
    width: 98%;
    margin: 10px;
    box-shadow: 7px 13px 37px gray;
    text-align: center;
}
  
.acordeon p {
    text-align: center;
    font-family: 'Fira Sans', 'Open Sans', 'Helvetica Neue', sans-serif;
    background: var(--White);
    color: var(--blue);
    text-decoration: none;
    padding: 5px;
    padding-left: 20px;
    padding-right: 20px;
    font-size: 18px;
    margin: 15px;
}

.acordeon span {
    text-align: center;
    color: var(--rose);
    font-size: 18px;
    margin: 0px;
    font-weight: bold;
}

.acordeon summary {
    text-decoration: none;
    text-align: left;
    padding: 10px;
    font-family: 'Fira Sans', 'Open Sans', 'Helvetica Neue', sans-serif;
    background-color: var(--blue);
    border-bottom: 2px solid var(--rose);
    color: white;
    font-size: 18px;
    height: 50px;
}


/* --------------------------------------- frame pdf silabos --------------------------------------- */

/**
batman
.nosotros .pdf_acordeon {
    margin: 10px;
    display: flex;
    align-items: center;
    flex-direction: column;
}

.nosotros .pdf_acordeon .pdf_acordeon2{
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 80%;
    height: 80%;
    border-radius: 10px;
    border: 5px solid var(--blue);
}
**/

/** Acerca de nosotros **/



/**media qery**/
@media only screen and (max-width:900px){
  
   
     #acsi {
        display: none;
    }

    
    .btn-menu > .fa-bars{
        display: block;
        position: absolute;
        top: 20px;
        right: 30px;
        font-size: 28px;
        cursor: pointer;
    }

    .btn-menu > .fa-bars:hover{
        color:var(--red);
    }
    .btn-menu > .fa-times{
        color: var(--red);
    }


    .menu .list-container{
        position: absolute;
        top: 60px;
        left: -100%;
        width: 100%;
        height: calc(100vh - 60px);
        background: #fff;
    }

    .menu .list-container .lists{
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        border-top: 5px solid var(--red);
        width: 100%;
        height: 100%;
    }

    .menu .list-container .lists li{
        width: 90%;
        margin: 10px 0px;
        border-bottom: 1px solid var(--red);
        text-align: center;
    }

    .menu .list-container .lists li a{
        font-size: 20px;
        padding-bottom: 10px;
    }

    .menu .list-container .lists .active .active-content{
        position: static;
        width: 100%;
    } 


    .menu .list-container .lists .active .dropbtn{
        border-radius: 1px;
    } 

    .menu .list-container .lists .active .dropbtn a.active{
        color: var(--White);
    } 

    .menu .list-container .lists .active .active-content a{
        text-align: center;
        border-radius: 0;
        border-bottom: 1px solid var(--red);
    } 

    .menu .list-container .lists .active .active-content a.hover{
        text-align: center;
        border-radius: 0;
        border-bottom: 1px solid var(--red);
        color: var(--White);
    } 

    
    .menu .list-container .lists li a.activo{
        background: none;
        color: var(--red);
    }

    .menu .list-container .lists li a.hover{
        background: none;
        color: var(--red);
    }
    

}



.footer {

    background: var(--blue);
    height: auto;
    width: 100%;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    padding-top: 4px;
    color: #fff;
}



.footer-contentt{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    text-align: center;
    
}

.footer-contentt h3{
    font-size: 20px;
    font-weight: 400;
    line-height: 25px;
    margin-bottom: 5px;
}

.footer-contentt p{
    max-width: 500spx;
    margin: 5px auto;
    line-height: 20px;
    font-size: 15px;
}

.footer-contentt span{
    text-transform: uppercase;
    font-weight: 200;
    color: var(--yellow);
}

.footer-contentt a{
    text-decoration: none;
    max-width: 500spx;
    margin: 5px auto;
    line-height: 20px;
    font-size: 15px;
    height: auto;
    width: 100%;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    padding-top: 4px;
    color: #fff;
}


.socials{
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 10px 0 3px 0;
}



.socials li{
    margin: 0 10px;
}

.socials a{
    text-decoration: none;
    color: #fff;
}

.socials a i{
    font-size: 1.1rem;
    transition: color .4s ease;
}

.socials a:hover i{
    color: var(--yellow);
}

.footer-bottom{
    background: var(--red);
    width: 100%;
    padding: 10px 0;
    text-align: center;
}

.footer .footer-contentt hr{
    width: 15%;
    height: 2px;
    background: var(--red);
    border: none;
    margin-bottom: 5px;
}

.footer-bottom p{
    font-size: 14px;
    word-spacing: 2px;
    text-transform: capitalize;
}

.footer-bottom span{
    text-transform: uppercase;
    opacity: .4;
    font-weight: 200;
    color: var(--yellow);
}




 .admisiones h5{
    font-size: 20px;
    font-weight: 200px;
    color: #444444;
    text-align: left;
    margin-bottom: 5px;
    margin-left: 7%;
}

.admisiones h6{
    font-size: 25px;
    font-weight: 200px;
    color: var(--blue);
    text-align: left;
    margin-bottom: 5px;
    margin-left: 7%;
}



 .admisiones hr{
    background: var(--yellow);
    width: 90%;
    margin: auto;
    margin-bottom: 20px;
    margin-top: 0px;
    height: 1px;
    border: none;
    align-items: left;
    
}

.admisiones .descarga{
    font-size: 35px;
    font-weight: 200px;
    color: var(--red);
    text-align: center;
    margin-bottom: 5px;
    margin-left: 7%;
}

.admisiones{
    margin-bottom: 25px;
    margin-top: 55px;
}

.nosotros .fotoadmisiones {
    margin: 10px;
    display: flex;
    align-items: center;
    flex-direction: column;
    

}


.nosotros .fotoadmisiones .fotoadmisiones-frame{
top: 0;
left: 0;
bottom: 0;
right: 0;
width: 75%;
height: 75%;
border-radius: 10px;
border: 5px solid var(--blue);

}

.nosotros .fotoadmisiones .fotoadmisiones-frame2{
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 50%;
    height: 50%;
    border-radius: 10px;
    border: 5px solid var(--blue);
    
    }

/*
#acsi img {
    display: none;
}


 --------------------------------------- docentes --------------------------------------- */





@media only screen and (max-width: 773px){

     #acsi {
        display: none;
    }
}


@media only screen and (max-width: 590px){


    .videos_frame .video{
        width: 80%;
        margin-bottom: 30px;
    }


    #acsi img {
        display: none;
    }
}

@media only screen and (max-width: 890px){

   
   
    .menu .logo-box{
        margin-left: auto;
        margin-right: auto;
        width: 15em;
    
    }

    #acsi {
        display: none;
    }



}

@media only screen and (max-width: 900px){
    
        #acsi {
        display: none;
    }
}


























nav{
    background: var(--White);
}

nav::after{
    content: '';
    clear: both;
    display: table;
}

nav .logo{
    float: left;
    color: var(--White);
    font-size: 27px;
    font-weight: 600;
    line-height: 70px;
    padding-left: 60px;
}



nav ul{
    float: right;
    list-style: none;
    margin-right: 40px;
    position: relative;
    padding-top: 10px;
    z-index: 9999;
}

nav ul li{
    /**float: left;**/ /**REVISAR URGENTE**/
    display: inline-block;
    background: var(--White);
    margin: 0 5px;
}

nav ul li a{
    color: var(--blue);
    text-decoration: none;
    line-height: 70px;
    font-size: 18px;
    padding: 8px 15px; 
}

nav ul li a:hover{
    color: var(--White);
    background: var(--blue);
    border-radius: 3px;
}

nav ul ul li a:hover{
    color: var(--White);
    box-shadow: none;
}

nav ul ul{
    position: absolute;
    top: 90px;
    border-top: 3px solid var(--red);
    opacity: 0;
    visibility: hidden;
    transition: top .5s;
}

nav ul ul ul{
    border-top: none;
}

nav ul li:hover > ul{
    top: 70px;
    opacity: 1;
    visibility: visible;
}

nav ul ul li{
    position: relative;
    margin: 0;
    width: 250px;
    float: none;
    display: list-item;
    border-bottom: 1px solid rgba(0,0,0,0,.3);
}

nav ul ul li a{
    line-height: 50px;
}

nav ul ul ul li{
    position: relative;
    top: -70px;
    left: 150px;
}

.fa-plus{
    margin-left: 40px;
    font-size: 15px;
    color: var(--blue);
}

.show, .icon,input{
    display: none;
}

@media all and (max-width: 980px) {
    nav ul{
        margin-right: 0px;
        float: left;
    }

 #acsi {
        display: none;
    }

    nav .logo{
        padding-left: 30px;
        width: 100%;
    }

    nav ul li, nav ul ul li{
        display: block;
        width: 100%;
    }

    nav ul ul{
        top: 70px;
        position: static;
        border-top: none;
        float: none;
        display: none;
        opacity: 1;
        visibility: visible;
    }

    nav ul ul ul li{
        position: static;
    }

    nav ul ul li{
        border-bottom: 0px;
    }

    nav ul ul a{
        padding-left: 40px;
    }

    nav ul ul ul a{
        padding-left: 80px;
    }

    .show{
        display: block;
        color: var(--blue);
        font-size: 18px;
        padding: 0 20px;
        line-height: 70px;
        cursor: pointer;
        background: var(--White);
    }

    .show:hover{
        color: var(--White);
        background: var(--blue);
    }

    .icon{
        display: block;
        color: var(--blue);
        position: absolute;
        right: 40px;
        line-height: 70px;
        font-size: 25px;
        cursor: pointer;
    }

    .icon:hover{
        color: var(--red);
    }
    nav ul li a:hover{
         box-shadow: none;
         color: var(--White);
    }

    .show + a, ul{
        display: none;
    }
    [id^=btn]:checked + ul{
        display: block;
    }

    nav ul li{
        /**float: left;**/ /**REVISAR URGENTE**/
        display: inline-block;
        background: var(--rose);
        margin: 0 5px;
    }
    
    nav ul li a{
        color: var(--White);
        text-decoration: none;
        line-height: 70px;
        font-size: 18px;
        padding: 8px 15px; 
    }
    
    nav ul li a:hover{
        color: var(--White);
        background: var(--blue);
        border-radius: 3px;
    }
}

@media screen and (max-width: 1000px) {
 
 
 
    .topnav a:not(:first-child), .dropdown .dropbtn {
      display: none;
      
    }

          #acsi {
        display: none;
    }
    
    
    .topnav a.icon {
      float: right;
      display: block;
      background: none;
      color: var(--red);

   

    }

    .topnav .icon{
        font-size: 35px;
      
       
    }

    .menu .logo-box{

        margin-bottom: -100px;
      
    }

    .topnav a.icon:hover {
        color: var(--blue);
  
      }


    .menu{
        display: block;
       
        
        margin: 0;
        padding: 0;
    }
    .menu .topnav{
        background: white;
    }

  }
  
  /* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
  @media screen and (max-width: 1000px) {
 /**
 .menu .logo-box{
     display: none;
 }
 **/

.menu .topnav .dropbtn{
    justify-content: center;
align-items: center;
background-position: center;
    


}


     #acsi {
        display: none;
    }


 
    .topnav.responsive {position: relative;}
    .topnav.responsive a.icon {
      position: absolute;
      right: 0;
      top: 0;
    }
    .topnav.responsive a {
      float: none;
      display: block;
      text-align: center;
    }
    .topnav.responsive .dropdown {float: none;}
    .topnav.responsive .dropdown-content {position: relative;}
    .topnav.responsive .dropdown .dropbtn {
      display: block;
      width: 100%;
      text-align: center;
    }
  }



/** quitar flechas de cada menu**/
  .dropbtn > .fa-caret-down{
    display: none;
}


/** quitar menu de haburgesa
.topnav a.icon{
    display: none;
}**/

/** seccion de cuadros cogido de styles 3css**/

.titulo_tarjeta .fecha2 h3{
    font-size: 25px;
    font-weight: 400px;
    color: var(--blue);
    text-align: center;
    margin-bottom: 5px;
    margin-top: 5px;
}

.titulo_tarjeta .fecha2{
    padding: 10px;
}

.btn-sistemas{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 16px;
    border-radius: 25px;
    text-decoration: none;
    font-weight: 600;
    transition: background 0.2s;
    background: #25D366;
    color: white;
    display: inline-block;
    background-color: #23f111;
    color: white;
    padding: 10px 20px;
    border-radius: 10px;
    text-decoration: none;
    font-weight: bold;
  }

  .titulo_tarjeta .fecha2 .btn-sistemas{
    color: white;
  }
  

.btn-whatsapp {
  background: #25D366;
  color: white;
}
.btn-whatsapp:hover {
  background: #1ebe5d;
}
.btn-youtube {
  background: #E52421;
  color: white;
}
.btn-youtube:hover {
  background: #b61b1b;
}

.titulo_tarjeta .fecha2 h4{
    font-size: 15px;
    font-weight: 200px;
    color: gray;
    text-align:start;
    margin-bottom: 5px;
    padding-left: 5%;
    padding-bottom: 5px;
}

.cabecera h6{
    font-size: 15px;
    font-weight: 200px;
    color: gray;
    text-align: center;
    margin-bottom: 0px;
}

.cabecera2 h6{
    font-size: 15px;
    font-weight: 200px;
    color: gray;
    text-align: center;
    margin-bottom: 0px;
}

.nosotros .cabecera2 h6 span{
    font-size: 15px;
    font-weight: 200px;
    text-align: center;
    color: var(--rose);
}


.nosotros .titulo_tarjeta .fecha2 .nota-horario {
    display: block;           /* se comporta como bloque */
    font-size: 15px;          /* tamaño pequeño */
    color: #a5a5a5;           /* gris oscuro */
    font-weight: bold;        /* negrita */
    margin: 2px 0 0 0;        /* 5px arriba, 0 abajo y laterales */
    text-align: center;       /* opcional: centrar el texto */
    line-height: 20px;
    text-decoration: none;    /* sin subrayado */
  }
  


.titulo_tarjeta .fecha2 span{
    color: var(--rose);
}

.titulo_tarjeta .fecha2{
    border-radius: 15px;
    border: 2px solid var(--blue);
    margin: 5px;
    background: white;
    border-radius: 12px;
    box-shadow: 0 12px 18px rgba(0,0,0,0.1);
}

.titulo_tarjeta .fecha2 a img{
    font-size: 15px;
    font-weight: 200px;
    color: gray;
    text-align: center;
    margin-bottom: 5px;
    width: 80%;
    
}

.titulo_tarjeta .fecha2 a{
    font-size: 15px;
    font-weight: 200px;
    color: gray;
    text-align: center;
    margin-bottom: 5px;
    width: 90%;
    batman
}

.fecha2 {
    text-align: center;
  }
  

/** seccion de cuadros cogido de styles 3css**/




/** seccion TUTORIAELS SISTEMAS**/
/** seccion TUTORIAELS SISTEMAS**/
/** seccion TUTORIAELS SISTEMAS**/
/** seccion TUTORIAELS SISTEMAS**/
/** seccion TUTORIAELS SISTEMAS**/
/** seccion TUTORIAELS SISTEMAS**/
/** seccion TUTORIAELS SISTEMAS**/
/** seccion TUTORIAELS SISTEMAS**/

.main-wrapper{
    position: relative;
    width: 100%;
    height: 100%; /** es height: 100vh;**/
    display: flex;
    justify-content: center;
    align-items: center;
    padding-bottom: 25px;
}

.video-wrapper{
    position: relative;
    width: 1200px;
}

.iframe-video{
    position: relative;
    width: 100%;
    height: 100%; /** es height: 250px;**/
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    margin: 10px 0;
    cursor: pointer;
    align-self: flex-start;
    border: 2px solid;
     border-color: gray;
}

.iframe-video:before{
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

.iframe-video h2{
    width: 100%;
    font-size: 20px;
    font-weight: 800;
    color: #181818;
    background-color: #fff;
    padding: 10px 0;
    display: block;
    width: 100%;
    background: var(--blue);
    color: white;
    text-align: center;
    text-decoration: none;
}

/** video popup **/

.video-popup{
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgba(0,0,0,.8);
    cursor: pointer;
    z-index: 1;
    display: none !important;
}

.video-popup.show-video{
    display: flex !important;
}

.video-popup .iframe-wrapper{
    position: relative;
    width: 600px;
    height: 350px;
    /**background-color: #fff;**/
}

.video-popup .close-btn{
    position: absolute;
    top: 200px;
    right: 250px;
    width: 35px;
    height: 35px;
    background: rgba(255,255,255,.9) url(close.png);
    background-size: 30px;
    background-repeat: no-repeat;
    background-position: center;
    cursor: pointer;
}

@media(max-width: 575px){
    .main-wrapper{
        height: 100%;
        padding: 40px;
    }

    .iframe-video h2{
        font-size: 16px;
    }

     #acsi {
        display: none;
    }


    .iframe-video{
        padding: 20px;
        height: 300px;
    }
}


.nosotros .titulo_tarjeta2{
    width: 90%;
    margin: auto;
    display: flex;
    justify-content: center;
    flex-direction: column;
    margin-bottom: 15px;
}

.nosotros .titulo_tarjeta2 h2{
    font-size: 35px;
    font-weight: 200px;
    color: #444444;
    text-align: left;
    margin-bottom: 5px;
    margin-left: 7%;
}

.nosotros .titulo_tarjeta2 hr{
    background: var(--yellow);
    width: 90%;
    margin: auto;
    margin-bottom: 20px;
    margin-top: 0px;
    height: 2px;
    border: none;
    opacity: 1;
    
}



/**BOTONERA ESPECIFICA SISTEMAS**/
/**BOTONERA ESPECIFICA SISTEMAS**/
/**BOTONERA ESPECIFICA SISTEMAS**/
/**BOTONERA ESPECIFICA SISTEMAS**/


.contenedor {
    display: flex;
    justify-content: center;
  }
  
  .botonera {
    list-style-type: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
  }
  
  .botonera li {
    margin-bottom: 5px;
  }
  
  .botonera li a {
    display: block;
    text-align: center;
    padding: 10px;
    border-radius: 10px;
    background-color: #304e75;
    color: #fff;
    text-decoration: none;
    margin-right: 5px;
  }
  
  .botonera li a:hover {
    background-color: #183151;
  }
  
  @media (max-width: 767px) {
    .botonera {
      flex-direction: column;
      align-items: stretch;
    }
  
  
       #acsi {
        display: none;
    }
  
    .botonera li a {
      margin-right: 0;
    }
  }
  


  .nosotros .sistemas {
    text-align: center;
    color: var(--red);
  }
  




/**CUADROS SISTEMAS**/



  .titulo_tarjeta .fecha3 h3{
    font-size: 25px;
    font-weight: 400px;
    color: var(--blue);
    text-align: center;
    margin-bottom: 5px;
    margin-top: 5px;
}


.titulo_tarjeta .fecha3 h4{
    font-size: 15px;
    font-weight: 200px;
    color: gray;
    text-align: center;
    margin-bottom: 5px;
}

.titulo_tarjeta .fecha3 span{
    color: var(--rose);
}

.titulo_tarjeta .fecha3{
    /**border-radius: 15px;
    border: 2px solid var(--blue);**/
    margin: 5px;
}