@charset "utf-8" ;

*{
    margin: 0;
    padding: 0;
    

}
@import url('https://fonts.googleapis.com/css2?family=Balsamiq+Sans:wght@700&family=Poppins:ital,wght@0,200;1,100&display=swap');
@import url('https://fonts.googleapis.com/css2? family = Poppins & family = Teko: wght @ 300 & display = swap');
/* ----------------primera pantalla---------------- */


.ini,
.paginainicio { 

    background-color: #2090B5;
    margin: 0; 

}
#logo img{
   
    margin-top: 2em;
    width: 30em;
    margin: auto;
    display: flex;  
    margin-bottom: 1em;  
    margin-top: 30em;
}


li{
    list-style: none;
    margin-top: 1.5em;
}

.bienvenidos{
    font-family: 'Poppins',sans-serif;
    color: rgb(255, 255, 255);
    font-size: 25pt; 
    font-weight: 700;
    text-align: center; 
    margin-top: 1,75em;
    margin: auto;
  
   
}
.frase {
    font-family: 'Poppins',sans-serif;
    color: rgb(255, 255, 255);
    font-size: 20pt;
    line-height: 25pt;
    font-weight: 400;
    text-align: center; 
    margin-top: 1,75em;
    width: 500px;
    margin: auto;
}

.registrate a {
    background-color: #F8B631;
    flex-direction: column;
    justify-content: center;
    width: 220px;
    text-align: center;
    color:rgb(255, 255, 255);
    padding: 0.5em 3em;
    border-radius: 10px;
    display: block;
    margin: auto; 
    font-family: 'Balsamiq Sans';
    font-size: 22pt;
    display: flex;
    filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
    transition: 0.5s;
    margin-top: 2em;
    text-decoration: none;     
}
.registrate a:hover{
    background-color: rgb(255, 255, 255);
    color: #F8B631;
}



.iniciar a{
    background-color:  #D0D728;
    color: #ffffff;
    flex-direction: column;
    justify-content: center;
    width: 220px;
    text-align: center;
    padding: 0.5em 3em;
    border-radius: 10px;
    display: block;
    margin:auto; 
    font-family: 'Balsamiq Sans';
    font-size: 22pt;
    display: flex;
    margin-top: 0,5em;
    filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
    text-decoration: none;
    margin-bottom:2em;
    
}
.iniciar a:hover{
    background-color: rgb(255, 255, 255);
    color: #D0D728;
}

/* ----------------registrarse---------------- */

.registro {
    background-image: url(../imagenes/fondoceleste.jpg);
    margin: 0;

}

h1{
    color:rgb(255, 255, 255);
    font-family: 'Balsamiq Sans',sans-serif;
    font-size: 25pt;
    font-style: normal;
    text-align: center; 
    margin-top: 4.25em;
    font-weight: 700;
}
.cc {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    }

.cc input {
    background-color: rgb(248, 232, 196);
    border: 0.188em solid rgb(248, 232, 196);
    margin-top: 1.64vh;
    color: rgb(32, 145, 182);
    height: 52px;
    width: 275px ;
    font-size: 1.51vh;
    padding: 0em 0em 0em 0.625em;
    border-radius: 5px;
    }

 #checkregistro {
    margin: 2rem auto;
    margin-top: 6.47vh;
    margin-left: 10.51vw ;
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 6.80vh ;
    font-family: 'Poppins';
    
    }

#checkregistro input {
    height:2.88vh ;
    width: 2.41vw ;
      
    }
.bt{
    display: flex;
    margin: auto;
    justify-content: center;
    margin-bottom: 2em;
    }

#checkregistro label {

    font-size: 16pt;
    font-weight: 400;
    }

 .enviar a {
    background-color: #F8B631;
    display: flex;
    justify-content: center;
    width: 7.125em;
    text-align: center;
    color: white;
    padding: .25em .5em;
    border-radius: 10px;
    display: block;
    margin: auto; 
    font-family: 'Balsamiq Sans';
    font-size: 22pt;
    display: flex;
    letter-spacing: -0.02em;
    filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
    margin-left: 1.5em;
    margin-top: 0,5em;
    text-decoration: none;
    margin-top: 8em;
    
    }

    .enviar a:hover{
     background-color: rgb(255, 255, 255);
     color: #F8B631;
    }

.volver a{
    background-color:  #D0D728;
    color: white;
    display: flex;
    justify-content: center;
    width: 7.125em;
    text-align: center;
    padding: .25em .5em;
    border-radius: 10px;
    display: block;
    margin:auto; 
    font-family: 'Balsamiq Sans';
    font-size: 22pt;
    display: flex;
    letter-spacing: -0.02em;
    margin-top: 0,5em;
    filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
    text-decoration: none; 
    margin-top: 8em;
}
.volver a:hover{
    background-color: rgb(255, 255, 255);
    color: #D0D728;
}

/* ----------------inicio html---------------- */

.enviodatos,
.cc{
   margin: auto;
   color:rgb(255, 255, 255);
   text-align: center; 
   margin-top: 4.5em;
   justify-content: center;
   
}


.cc {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    margin-top: 2em;
    
    }

    
.cc input {
       background-color:  rgb(238, 231, 188);
       border: 0.188em solid rgb(238, 231, 188);
       color: rgb(32, 145, 182);
       height: 52px;
       width: 500px;
       font-size: 20pt;
       padding: 0em 0em 0em 0.625em; 
       border-radius: 5px;
       font-family: 'Poppins';
       
       
    }

    .enviodatos input {
        background-color:  #D0D728;
        color: #ffffff;
        justify-content: center;
        width: 220px;
        padding: .25em .5em;
        border-radius: 10px;
        margin:auto; 
        font-family: 'Balsamiq Sans';
        font-size: 22pt;
        letter-spacing: -0.02em;
        margin-top: 0,5em;
        border: 0.188em solid #D0D728;
        text-align: center;
        margin-bottom: 2em;
        
    }
    .enviodatos a{
        text-decoration: none;
        margin: auto;
        text-align: center;
        filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
    }
    .enviodatos input:hover{
        background-color: rgb(255, 255, 255);
        border: 0.188em solid #ffffff;
        color: #D0D728;
    }
    #olvido{
        color: rgb(255, 255, 255);
        text-decoration: none;
        
        text-align: center;
        font-family: 'Poppins';
        font-size: 16pt;
    }
    #olvido:hover{
        color: #D0D728;
        flex-direction: column;
        font-family: 'Poppins';
    }

    #checkregistro{
       margin-top: 1em;
    }
/* ----------------olvido contraseña---------------- */

.olvido {
     
    background-image: url(../imagenes/fondoceleste.jpg);
    margin: 0;
    margin-top: 20em;
}

 /* ----------------codigo---------------- */

.codigo {
    
    background-image: url(../imagenes/fondoceleste.jpg);
    margin: 0;
    
}

h2{
color:rgb(255, 255, 255);
font-size: 3.20vh;
font-style: normal;
text-align: center; 
margin-top: 8em;
font-family: 'Balsamiq Sans';
font-size: 25pt;

}


/* ----------------menu---------------- */
.men{
    background-image: url(../imagenes/fondo.jpg);
    margin: 0;
}
.encabezado{
    background-color: cornflowerblue;
}
ul{
    list-style: none;
}
a{
    text-decoration: none;
    
}
.incio img{
    
    margin: auto;
    margin-top: 600px;
    margin-bottom: 66px;
    width: 40%;
    display: block;
    justify-content: end;
    filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
}
.incio{
   
    margin-left: 2em;
}

.perfil a{
    background-color: #F8B631;
    flex-direction: column;
    justify-content: center;
    width: 220px;
    text-align: center;
    color: #ffffff;
    padding:0.5em 3em;
    border-radius: 10px;
    display: block;
    margin: auto; 
    font-family: 'Balsamiq Sans';
    font-size: 23pt;
    display: flex;
    filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
    transition: 0.5s;
    margin-top: 4em;
}
.perfil a:hover{
    background-color: rgb(255, 255, 255);
    color: #F8B631;
}

.desa a{
    background-color:  #2B775B;
    color: #ffffff;
    flex-direction: column;
    justify-content: center;
    width: 220px;
    text-align: center;
    padding:0.5em 3em;
    border-radius: 10px;
    display: block;
    margin: auto; 
    font-family: 'Balsamiq Sans';
    font-size: 23pt;
    display: flex;
    
   
    transition: 0.5s;
    filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
}
.desa a:hover{
    background-color: rgb(255, 255, 255);
    color: #2B775B;
}
.quienes a{
    background-color:  #EE7925;
    color: #ffffff;
    flex-direction: column;
    justify-content: center;
    width: 220px;
    height: 47px;
    text-align: center;
    padding:0.5em 3em;
    border-radius: 10px;
    display: block;
    margin: auto; 
    font-family: 'Balsamiq Sans';
    font-size: 23pt;
    display: flex;
   
   
    transition: 0.5s;
    filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
}
.quienes a:hover{
    background-color: rgb(255, 255, 255);
    color: #EE7925;
}
.cerrar a{
    background-color:  #D0D728;
    color: #ffffff;
    flex-direction: column;
    justify-content: center;
    width: 220px;
    text-align: center;
    padding: 0.5em 3em;
    border-radius: 10px;
    display: block;
    margin: auto; 
    font-family: 'Balsamiq Sans';
    font-size: 23pt;
    display: flex;
    transition: 0.5s;
    filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
    margin-bottom: 2em;
}
.cerrar a:hover{
background-color: rgb(255, 255, 255);
color: #D0D728;
}
/* ----------------quienes somos---------------- */

.tituquienes {
    color: #EE7925;
    font-size: 25pt;
    margin-top: 20em;
}
.quienessomos{
    background-image: url(../imagenes/fondo.jpg);
    margin: 0;
}
.quienessomos a{
    color: white;
}
.mision{
    background-color: #EE7925;
    color: white;
   display: flex;
   justify-content: center;
   width: 7.125em;
   text-align: center;
   padding:0.5em 3em;
   border-radius: 10px;
   display: block;
   margin: auto;
   font-family: 'Balsamiq Sans';
   font-size: 22pt;
   display: flex;
   letter-spacing: -0.02em;
   margin-top: 0,5em;
   filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
   text-decoration: none;
   margin-top: 1em
}

.acumar{
    background-color: #CC6114;
    color: white;
    display: flex;
    justify-content: center;
    width: 7.125em;
    text-align: center;
    padding: 0.5em 3em;
    border-radius: 10px;
    display: block;
    margin:auto; 
    font-family: 'Balsamiq Sans';
    font-size: 22pt;
    display: flex;
    letter-spacing: -0.02em;
    margin-top: 0,5em;
    filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
    text-decoration: none;
    margin-top: 1em;
}

.equipo{
    background-color: #25AF8B;
    color: white;
    display: flex;
    justify-content: center;
    width: 7.125em;
    text-align: center;
    padding: 0.5em 3em;
    border-radius: 10px;
    display: block;
    margin:auto; 
    font-family: 'Balsamiq Sans';
    font-size: 22pt;
    display: flex;
    letter-spacing: -0.02em;
    margin-top: 0,5em;
    filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
    text-decoration: none;
    margin-top: 1em;
}
.menu a{
    background-color: #F8B631;
    color: white;
    float: right;
    width: 114px;
    text-align: center;
    padding: .25em .5em;
    border-radius: 10px;
    display: block;
     margin: 20em;
    font-family: 'Balsamiq Sans';
    font-size: 22pt;
    letter-spacing: -0.02em;
    margin-top: 0,5em;
    filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
    text-decoration: none;
    margin-top: 1em;
   
}
/* ----------------nueva contraseña---------------- */
.nuevacon{
    background-image: url(../imagenes/fondoceleste.jpg);
}
.rgistroeinicio{
    margin-top: 20em;

}
/* ----------------desafio---------------- */
.fondodesafio {
    background-image: url(../imagenes/fondo.jpg);
    margin: 0;
}
.desafiod {
    background-color: #2B775B;
    flex-direction: column;
    justify-content: center;
    width: 9em;
    text-align: center;
    color: #ffffff;
    padding:0.5em 1em;
    border-radius: 10px;
    display: block;
    margin: auto; 
    font-family: 'Balsamiq Sans';
    font-size: 23pt;
    display: flex;
    filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
    transition: 0.5s;
    margin-top: 2em;
}
.ecodesa a,
.desafiod a{
    color: white;
}

.ecodesa{
   
    background-color: #3FAC63;
    flex-direction: column;
    justify-content: center;
    width: 9em;
    text-align: center;
    color: #ffffff;
    padding:0.5em 1em;
    border-radius: 10px;
    display: block;
    margin: auto; 
    font-family: 'Balsamiq Sans';
    font-size: 23pt;
    display: flex;
    filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
    transition: 0.5s;
    margin-top: 1.5em;
   
}

.encabezadodesa{
    background-color: #25AF8B;
    border-radius: 5px;  
  
}

.encabezadodesa h1{
    color: #2B775B;
    padding: 1em; 
    margin-top: 0em;
    font-family: 'Balsamiq Sans',sans-serif;
    font-size: 30pt;      
}
     
header p{
    color: #25AF8B;   
}
#flecha img{
width: 100%;

}
.titude{
    font-size: 25px;
}
/* ----------------perfil---------------- */



.perf{
    background-image: url(../imagenes/fondo.jpg);
}

.nombre{
    color: #504A98;
    font-family: 'Balsamiq Sans', normal;
    font-size: 35pt;
}
.descrpcion{
    background-color: #F8B631;
    color: rgb(0, 0, 0);
    width: 400px;
    height: 200px;
    justify-content: center;
    margin: auto;
    padding: 5em 6em 0 0;
    border-radius: 10px;
  
   
}
.nombre{
    margin-top: 1em;
}
.descrpcion p{
  
    width: 350px;
    justify-content: center;
    margin: auto;
    font-family: 'Poppins', sans-serif;
    text-align: center;
    font-size: 15pt;
    margin-top: 1em;
    margin-left: 3em;
    
}
.botperf{
    margin-left: 2em;
    margin-top: 15em;
    
}
.datosusuario{
    margin: auto;
    justify-content: center;
    margin-left: 2em;
}

.botperf nav{
    display: flex;
    justify-content: center;
    margin: auto;
    margin-top: 2em;
}
.pefilmenu a{
    background-color: #D0D729;
    color: #0190B5;
    width: 114px;
    text-align: center;
    padding: .25em .5em;
    border-radius: 10px;
    margin:auto; 
    font-family: 'Balsamiq Sans';
    font-size: 23pt;
    display: flex;
  
    margin-top: 0,5em;
    filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
    justify-content: center;
    margin-bottom: 2em;  
}


.editarper a{
    background-color: #F8B631;
    color: #000000;
    width: 114px;
    text-align: center;
    padding: .25em .5em;
    border-radius: 10px;
    margin:auto; 
    font-family: 'Balsamiq Sans';
    font-size: 23pt;
    display: flex;
    
    margin-top: 0,5em;
    filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
    justify-content: center;
    margin-left: 160px;
    margin-bottom: 2em;
    
}
.editarperf{
    background-color: #F8B631;
}

/* ----------------mision---------------- */
.mision2 img{
  
 width: 100%;

}


/* ----------------acumar---------------- */
.acumar2{
    margin: 0;
}

.acumar2 img{
   
    width: 100%;
}

/* ---------------- editar perfil---------------- */
.avaimg{
   
    margin: auto;
    margin-top: 6em;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;   
}
.avaimg img{
    width: 30%;
    margin-left: 8em;
    filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
}



.tituloavatar{
    margin-top: 1em;
    font-size: 30pt;
    font-family: 'Balsamiq Sans';

}
#flecha img{
    width: 5%;
   
    margin: 7em;

}

.tituper{
    margin-top: 4.188;
    font-family: 'Balsamiq Sans';
    font-size: 30pt;
    font-weight: bold;
}

.nomusuario input{
    background-color:  rgb(238, 231, 188);
    border: 0.188em solid rgb(238, 231, 188);
    color: rgb(32, 145, 182);
    height: 52px;
    width: 400px;
    font-size: 20px;
    padding: 0em 0em 0em 0.625em; 
    border-radius: 5px;
    font-family: 'Poppins';
    margin-top: 0.875em;
    margin-left: 2em;
    
}

.uc{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column; 
    margin: auto;
}

.desusuario input{
    background-color:  rgb(238, 231, 188);
    border: 0.188em solid rgb(238, 231, 188);
    color: rgb(32, 145, 182);
    height: 200px;
    width: 400px;
    font-size: 20px;
    padding: 0em 0em 0em 0.625em; 
    border-radius: 5px;
    font-family: 'Poppins';
    margin-top: 0.875em;
    margin-bottom: 3em;
    margin-left: 2em;
}
.btnok a{
    background-color: #D0D729;
    color: rgb(255, 255, 255);
   
    padding: 0.30em 2em;
    border-radius: 10px;
    margin: auto;
    font-family: 'Balsamiq Sans';
    font-size: 23pt;
    display: flex;
    margin-top: 0,5em;
    filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
    justify-content: center;
    margin-bottom: 2em;
    margin: 3em;
    
}
.btnok{
    justify-content: center;
    margin: auto;
    display: flex;
    font-size: 23px;
    margin-top: 1.5em;
    margin-bottom: 2.5em;
}

.usude img{
    margin: auto;
    margin-top: 350px;
    margin-bottom: 66px;
    width: 40%;
    display: block;
    justify-content: end;
    filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
   
    
}

/* ----------------equipo---------------- */


.equipo2 img{
   
    width: 100%;
}

/* ----------------desafio divertite---------------- */
.desdivertite{
    background-color:rgb(248, 232, 196) ;
    margin: 0;
}
.desdivertite img{
    margin-top: 2em;
    width: 61em;
    margin: auto;
    display: flex;
}
/* ----------------desafioeco---------------- */
#ecodesafio img{
    width: 100%;
    display: block;
}