: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;
}




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



/** 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: 55px;
}

.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);

}


.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: 600px;
    border-radius: 10px;
    border: 5px solid var(--blue);
    
    }


.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: 25px;
    margin-bottom: 15px;
}

.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 .titulo_tarjeta .fecha .boton_principal a{
    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 .titulo_tarjeta .fecha .boton_principal .boton_generico a{
    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 .titulo_tarjeta .fecha .boton_principal a:hover{
    background: var(--rose);
}

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


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

.iconos_s{
    text-align: center;
}

.iconos_s .iconos_stream{
    margin: 5px;
}

.main .nosotros .titulo_tarjeta .fecha span{
    color: var(--rose);
}

.main .nosotros .titulo_tarjeta .fecha{
    border-radius: 15px;
    border: 2px solid var(--blue);
    margin: 5px;
}



.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;
}



















.titulo_tarjeta .formulario-content{
    width: 50%;
    background:var(--White);
    border-radius: 20px;
    border: 3px solid var(--red);
    margin: 40px auto;
    padding: 20px;
    margin-bottom: 80px;
}

.titulo_tarjeta .formulario-content #formulario{
    display: flex;
    justify-content: center;
    flex-direction: column;
}

.titulo_tarjeta .formulario-content #formulario label{
    text-align: center;
    color: var(--red);
    font-size: 18px;
    margin: 20px 0px 8px 0px;
}

.titulo_tarjeta .formulario-content #formulario input{
    width: 80%;
    margin: auto;
    border: 2px solid var(--blue);
    border-radius: 24px;
    outline: none;
    height: 30px;
    text-align: center;
    font-size: 16px;
    color: var(--blue);
    display: inline;
}

.titulo_tarjeta .formulario-content #formulario select{
    width: 80%;
    margin: auto;
    border: 2px solid var(--blue);
    border-radius: 24px;
    outline: none;
    height: 30px;
    text-align: left;
    font-size: 16px;
    color: var(--blue);
    display: inline;
}

.titulo_tarjeta .formulario-content #formulario .noneoption{
    text-align: center;
    color: #6d6c6c;
}


.titulo_tarjeta .formulario-content #formulario textarea{
    width: 80%;
    margin: auto;
    border: 2px solid var(--blue);
    border-radius: 24px;
    outline: none;
    height: 25px;
    font-size: 13px;
    color: var(--blue);
    padding: 5px;
    height: 80px;
    text-align: center;
}

.titulo_tarjeta .formulario-content #formulario .send{
    width: 90%;
    display: flex;
    justify-content: center;
    margin: 5px 0px;
    margin-left: 15px;
}

.titulo_tarjeta .formulario-content #formulario .send button{
width: 100px;
height: 30px;
background: var(--red);
border-radius: 24px;
border: none;
outline: none;
font-size: 22px;
color: #fff;
text-align: center;
margin-top: 5px;
cursor: pointer;
transition: 0.5s;
}

.titulo_tarjeta .formulario-content #formulario .send2{
    width: 90%;
    display: flex;
    justify-content: center;
    margin: 5px 0px;
    margin-left: 35px;
}

.titulo_tarjeta .formulario-content #formulario .send2 button{
    width: 200px;
    height: 25px;
    background: var(--red);
    border-radius: 24px;
    border: none;
    outline: none;
    font-size: 15px;
    color: #fff;
    text-align: center;
    margin-top: 5px;
    cursor: pointer;
    transition: 0.5s;
    }

.titulo_tarjeta .formulario-content #formulario .mensaje-form{
    font-size: 12px;
    color: var(--blue);
    margin-left: 10px;
    height: 15px;
    text-align: center;
}

.titulo_tarjeta .formulario-content #formulario .send button:hover{
    background: var(--rose);
}

/*
@media only screen and (max-width: 450px){


   

    .titulo_tarjeta .formulario-content{
    margin: 2px;
    padding: 2px;
    height: 800px;
    }

}

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


   
    .titulo_tarjeta .formulario-content{
        width: 85%;
        padding: 20px;
    }
    .titulo_tarjeta .formulario-content #formulario input{
        width: 100%;
    }
    .titulo_tarjeta .formulario-content #formulario textarea{
        width: 100%;
    }

    .menu #acsi {
        display: none;
    }

}
*/

@media only screen and (max-width: 450px) {
    .titulo_tarjeta .formulario-content {
        margin: 2px;
        padding: 2px;
        min-height: 800px; /* Evita que el contenido sea más alto de lo necesario */
        box-sizing: border-box;
        overflow: auto; /* Asegura que el contenido extra no sobrepase */
    }

    /* Asegura que el footer esté siempre visible */
    footer {
        position: relative;
        z-index: 10; /* Asegura que el footer quede por encima del contenido */
    }
}

@media only screen and (max-width: 900px) {
    .titulo_tarjeta .formulario-content {
        width: 85%;
        padding: 20px;
        box-sizing: border-box;
    }

    .titulo_tarjeta .formulario-content #formulario input,
    .titulo_tarjeta .formulario-content #formulario textarea {
        width: 100%;
    }

    .menu #acsi {
        display: none;
    }
}

/* Opcional: Asegura que el footer quede siempre en la parte inferior */
html, body {
    height: 100%;
    margin: 0;
}

body {
    display: flex;
    flex-direction: column;
}

footer {
    margin-top: auto;
}



















/** Acerca de nosotros **/



/**media qery**/
@media only screen and (max-width:900px){
  
   


    
    .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);
}




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





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


}


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

}

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

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




}

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


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

    .menu #acsi {
        display: none;
    }

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{
    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;
    }

    .menu #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{
        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) {
 
 .main .nosotros .cabecera .iconos_s{
    /*display: none;*/
    text-align: center;
    overflow: hidden;
 }

 
    .topnav a:not(:first-child), .dropdown .dropbtn {
      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;
      
    }
    
        .menu #acsi {
        display: none;
    }

    .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;
}

 
    .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;
}**/