@import url('https://fonts.googleapis.com/css2?family=Roboto+Serif:ital,opsz,wdth,wght,GRAD@0,8..144,50..150,100..900,-50..100;1,8..144,50..150,100..900,-50..100&family=Special+Elite&display=swap');

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

img {
      max-width: 100%;
    }    

body{ 
      background-color:#ABC3FF;
      margin: 0 auto;
      padding: 0em;
    }    

h1,h2,h3{
  font-family: "Special Elite", system-ui;
  font-weight: 400;
  font-style:normal;
}

header {
      background-color: #1a1a6b;
      padding: 8px 20px;
      display: inline-block;
      justify-content: space-between;
      align-items: center;
      position: sticky;
      top:0em;
      z-index: 10000;
      box-shadow: 0 4px 2px hsl(0 0% 0% / 0.25);
      width: 100%;
}

.contenedora {
  display: flex;
  justify-content: space-between ;
  align-items: center;
  flex-wrap: wrap;
  padding: 1rem;
  background-color: #1a1a6b;
}

/* ----
   menu
   ---- */

/* botón "hamburguesa" */
.menu-btn {
  background-color: transparent;
  border: none;
  cursor: pointer;
  transition: all 0.3s ease-out; /* anima el "hover" */

  /* capa superior, pero no parece */
  position: relative;
  /* en capa superior, casi arriba de todo */
  z-index: 9000;
}

/* cada barra de la "hamburguesa" */
.menu-btn .btn-linea {
 border-radius: 2em;
  width: 25px;
  height: 3px;
  margin: 4px 0 4px 0;
  background: #DEF243;
  transition: all 0.3s ease-out;
}

/* cada barra, transformacion para formar la "X" */
.menuVisible .menu-btn .btn-linea {
  transform: rotate(180deg);
}
/* Las tres barras para formar la "X" */
.menuVisible .menu-btn .btn-linea:nth-child(1) {
  transform: rotate(45deg) translate(4px, 6px);
}
.menuVisible .menu-btn .btn-linea:nth-child(2) {
  opacity: 0;
}
.menuVisible .menu-btn .btn-linea:nth-child(3) {
  transform: rotate(-45deg) translate(4px, -6px);
}

/* menú propiamente dicho */
nav ul {
  background-color: hsl(210 92% 10% / 95%);
  display: grid;
  place-items: center;
  place-content: center;

  /* sale del fondo, queda fijo */
  position: fixed;
  /* emplazamiento,
  estirado en toda la ventana */
  inset: 0;
  /* capa superior, arriba de casi todo */
  z-index: 8000;
  /* escondido "a la derecha" */
  translate: 100%;
  
  transition: all .6s ease; /* anima cuando "nav" NO tiene la clase "menuVisible" */
}
.menu{
  padding: 1em;
  align-content: center;
}
/* el menu,
   cuando "nav" tiene
   la clase "menuVisible" */
.menuVisible ul {
  background-color: #ABC3FF;
  width: 14em;
  left: calc(100vw - 14em);
  transition: all .3s ease; /* anima cuando "nav" tiene la clase "menuVisible" */
  
  /* se muestra */
  translate: 0;
}

/* cada vínculo del menu */
nav ul li a {
  border-bottom: solid 1px #ffffff;
  color: #12127A;
  display: block;
  font-size: 1.5rem;
  margin-block-end: .5rem;
  text-align: center;
  padding: .5rem;
  text-decoration: none;
}

nav ul li a:hover {
  border-bottom: solid 3px hsla(0, 71%, 35%, 0.5);
  transition: all .3s;
}


/*empieza portada*/

#vozeterna{
  color: #ffffff;
  font-size: 60pt;
  text-align: center;
  text-transform: uppercase;
  span {color: #DEF243;} 
}

#intro {
  padding-block: 10em;
  align-items: center;
  background-image: url(../imagenes/portada.png);
  background-repeat:no-repeat;
  background-size: cover;
}

/*termina portada*/

/*quienes somos*/
#quienessomos {
  position: relative;
  z-index: 2000;
  margin-top: -1em;
  padding-block: 5em;
  padding-inline: 2em;
  background-image: url(../imagenes/fondoquienessomos.png);
  background-repeat:no-repeat;
  background-size: cover;
  h2{
    color:#12127A;
  }
  #boton a
  {
    color:#12127A;
    background-color: none;
    border: none;
    background-image: url(../imagenes/botonquienessomos.png);
    background-repeat:no-repeat;
    background-size: cover;
    background-position: center;
    padding: 10px 20px;
    align-items: center;
    align-content: center;
    text-align: center;
    margin-left: 12em;
    font-family: "Special Elite", system-ui;
    font-weight: 400;
    font-style:normal;
    text-decoration: none;
}
}
/*termina quienes somos*/

/*historia*/
.botonera{
  position: relative;
  z-index: 1000;
  display: flex;
  background-color:#4949E9;
  margin-top: -1.6em ;

div{
  background-color: #12127A;
  font-family: "special elite";
  writing-mode: vertical-rl;
  text-orientation: sideways;
  rotate: 180deg;
  color: white;
  text-align: center;
  justify-content: center;
  padding: 2em;
  }
}

  #botoneshistoria{
    padding-block: 1.5em;
    .cadaboton a{
    display: block;
    flex-grow: 1;
    border-bottom: solid 1px #ffffff;
    color: #DEF243;
    font-family: "Roboto serif", serif;
    font-weight: bold;
    font-style:normal;
    white-space: nowrap;
    font-size: 1.2rem;
    text-align: left;
    padding: 1.3rem;
    text-decoration: none;
    padding-left: 1.5em;
    }
  }
/*fin historia*/

/*foro*/

#foro{
  position: relative;
  z-index: 500;
  background-image: url(../imagenes/fondoforo.png);
  background-repeat:no-repeat;
  background-size: cover;
  box-sizing: border-box;
  padding-block: 8em;
  text-align: center;
  align-content:center;
  h2{
    color: #12127A;
    padding-bottom: 1.5em;
  }
  #irforo a{
    background-color: transparent;
    border: none;
    background-image: url(../imagenes/botonforo.png);
    background-repeat:no-repeat;
    background-size: cover;
    background-position: center;
    text-align: center;
    padding: 50px 65px;
    padding-top: 1.4em;
    font-family: "roboto serif", serif;
    font-weight: bold;
    font-style:normal;
    text-decoration: none;
    text-transform: uppercase;
    color:#12127A;
  }
}
/*fin foro*/

/*actividades*/
#fondoactiv{
  background-image: url(../imagenes/fondoactiv.png);
  background-repeat:no-repeat;
  background-size: cover;
  background-position: center;
  padding-block: 8em;
  h2{
    color: #ffffff;
   margin: 1em;
  }
figure{
  background-image: url(../imagenes/fondoquizz.png);
  background-repeat:no-repeat;
  background-size: 100%;
  background-position: top center;
  padding-block: 1em;
  padding-inline: 1em;
  width: 80%;
  height: 80%;
  margin-inline: auto;
}

img{
  margin: auto;
}

h3{
  font-family:'roboto serif', serif;
  font-weight: bold;
  font-style:normal;
  color: #12127A;
  margin-bottom: 0.5em;
}
p{
  color: #12127A;
  font-weight: 600;
  white-space: pre-line;
  width: 12em;
  margin-bottom: 1em;

}
#boton{margin-bottom: 3em;
  margin-top: -5.5em;}
#boton a{
    color:#12127A;
    background-color: none;
    border:none;
    background-image: url(../imagenes/botonquienessomos.png);
    background-repeat:no-repeat;
    background-size: cover;
    background-position: center;
    padding: 10px 28px;
    align-items: center;
    align-content: center;
    text-align: center;
    margin-left: 11.5em;
    font-family: "Special Elite", system-ui;
    font-weight: 400;
    font-style:normal;
    text-decoration: none;
  }
}

/*fin actividades*/

/*calendario*/
#calendario {
  border: 0px solid #ddd;
  background-image: url(../imagenes/fondoevento.png);
  background-repeat:no-repeat;
  background-size: cover;
  background-position: center;
  padding-block: 5em;
  h2 {
    position: absolute;
    z-index: 7000;
    color:#12127A;
    text-align: left;
    padding: 16px;
    font-size: 1.5em;
    margin-left:2em;
    margin-top: 3em;
  }
  #textocalendario{
    position: absolute;
    z-index: 7000;
    margin:3.5em;
  margin-top:9em;
  }
  #fondocalendario{
    object-fit: cover;
    object-position: left center;
    width: 100%;
    height: 100%;
    display:block;

  }
}

.dias {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  font-family: 'roboto serif';
  color: #EA489B;
}
.numeros {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  font-family: 'roboto serif';
  color: #1a1a6b;
}

.dias, .numeros div {
  padding: 10px;
  text-align: center;
  border: 1px solid #ddd;
}

.dias {
  background-color: #eceff1;
  font-weight: bold;
}


.days div.vacio {
  background-color: transparent;
  border: none;
}

.destacado {
  background-color: #EA489B;
  border-radius: 100em;
}

/*fin calendario*/

p{
  font-family:'roboto serif';
   font-size:16px;
   color: #12127A;
   padding-bottom: 2rem;
}

li{
  list-style: none;
}

footer {
  color: #ffffff;
  background-color: #4949E9;
  font-family: 'roboto serif', serif;
  padding: 2em;

#logofooter{
    width: 8em;
    margin-bottom: 2em;
  }

h3{
  font-family: 'roboto serif', serif;
  font-weight: bold;
}  
#redes{
  display: flex;
  margin-block-end: 2em;
  
  img{
    width: 1.3em;
    margin-inline: 0.4em;
    margin-left: 0em;
  }
}
li{
  padding-block:0.3em;
}
ul{
  margin-bottom: 2em;
}
}

/*termina home*/

/*NOSOTROS*/



#portadanos{
  background-image: url(../imagenes/portadanosbg.png);
  background-repeat:no-repeat;
  background-size: cover;
  background-position: center;
  #portadanosotros{
    display: block;
      margin: 0 auto;
  }
}

#misionvision {
  position: relative;
  z-index: 2000;
  margin-top: -1em;
  padding-block: 5em;
  padding-inline: 2em;
  background-image: url(../imagenes/misionyvisionbg.png);
  background-repeat:no-repeat;
  background-size: cover;
  h2{
    color: #DEF243;
  }
  p{
    color:#ffffff
  }
  
  #boton a {
    color:#12127A;
    background-color: none;
    border: none;
    background-image: url(../imagenes/botonquienessomos.png);
    background-repeat:no-repeat;
    background-size: cover;
    background-position: center;
    padding: 10px 20px;
    align-items: center;
    align-content: center;
    text-align: center;
    margin-left: 13em;
    font-family: "Special Elite", system-ui;
    font-weight: 400;
    font-style:normal;
    text-decoration: none;
}
}


.integranteequipo{
  background-color: #0C0D5A;
  border-radius: 2em;
  align-content: center;
  padding: 2em;
  margin: 1em;
  width: fit-content;
  box-shadow: -10px 10px 0px rgb(65, 64, 190);
  text-align: center;
  display: flex;
  h3{ color:#DEF243;
    white-space: pre-line;
    width: 150px; 
  padding-block: 0.5em;}
  p{color: #ffffff;
    white-space: pre-line;
    width: 150px; 
    font-family: 'roboto serif';
  }

  }
.fondotextura{
    justify-content: center;
    background-image:url(../imagenes/equipobg.png);
    background-position:cover;
    margin-top: -2em;
      h2{font-size: 2em;
        text-align: center;
        padding-top: 2em;}
        h4{font-size: 1.2em;
          text-align: center;
          padding-top: 2em;}
    
  }
  
.equipo{
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  h4{
    font-family: 'roboto serif';
    font-weight: bold;
    text-align: center;
    color:#4949E9
  }
}

.input {
  width: 300px;
  padding: 10px;
  margin: 2em;
  border: 2px solid #0C0D5B;
  border-radius: 5px;
  background-color: #4949E9;
  font-size: 16px;
  font-family: 'roboto serif';
  cursor: text;
  color: #DEF243;
}
.fake-input:empty:before {
  content: "Ingresá tu mail";
  color: #4949E9;
}

#mail{ 
  color:#12127A;
  background-color: transparent;
  border: none;
  background-image: url(../imagenes/botonquienessomos.png);
  background-repeat:no-repeat;
  background-size: cover;
  background-position: center;
  padding: 10px 20px;
  align-items: center;
  align-content: center;
  text-align: center;
  margin-left: 18em;
  font-family: "Special Elite", system-ui;
  font-weight: 400;
  font-style:normal;
  text-decoration: none;
}
.burbuja{
  background-image: url(../imagenes/burbuja.png);
  background-repeat:no-repeat;
  background-position: center;
  padding: 5em;
  align-self: center;
  h2{
    text-align: center;
    color:#EA489B;
    padding-top: 0em;
  }
  p{
    font-family:'roboto serif';
    font-weight:600;
    text-align: center;
  }
}

/*fin nosotros*/

/*empieza nuestra historia*/
#iniciohistoria{
  padding-block: 10em;
  align-items: center;
  background-image: url(../imagenes/fondohistoria.png);
  background-repeat:no-repeat;
  background-size: cover;
  }
  
  #origen{
    background-image: url(../imagenes/fondoorigen.png);
    background-repeat:no-repeat;
    background-size: cover;
    background-position: center;
    padding-block: 8em;
    position: relative;
    z-index: 2000;
    margin-top: -4em;
    padding-inline: 2em;
    h2{
      color: #12127A;
    }
    figure{
      background-color: #12127A;
      border: 1em solid #12127A;
      border-bottom: 1em solid #12127A;
      margin:3em;
      margin-inline: auto;
      height: 80%;
      width: 80%;
    }
  
    #imgorigen{
      background-color: #12127A;
    }
    h3{
      color: #ffffff;
      text-transform: uppercase;
      margin-left: 2em;
      margin-top: 1em;
    }
    p{
      font-family: 'roboto serif', serif;  
    }
    #boton a{
      color:#12127A;
      background-color: none;
      border: none;
      background-image: url(../imagenes/botonquienessomos.png);
      background-repeat:no-repeat;
      background-size: cover;
      background-position: center;
      padding: 10px 20px;
      align-items: center;
      align-content: center;
      text-align: center;
      margin-left: 12em;
      font-family: "Special Elite", system-ui;
      font-weight: 400;
      font-style:normal;
      text-decoration: none;
    }
  }
  
  /*empieza hechos importantes*/
  #hechos{
    margin-top: -1.5em;
    background-color: #EA489B; 
    padding-top: 3em;
    padding-bottom: 20em;
  
    h2{
      margin-inline: 1.5em;
      color: #DEF243;
      margin-bottom: 0.5em;
    }
    p{
      font-family: 'roboto serif', serif;
      margin-inline: 2em;
      color: #ffffff;
    }
    #fechas{
      position: absolute;
      width: 120%;
      margin-top: 2em;
      
    }
    #boton a{
      color:#12127A;
      background-color: none;
      border: none;
      background-image: url(../imagenes/botonquienessomos.png);
      background-repeat:no-repeat;
      background-size: cover;
      background-position: center;
      padding: 10px 20px;
      align-items: center;
      align-content: center;
      text-align: center;
      margin-left: 15em;
      font-family: "Special Elite", system-ui;
      font-weight: 400;
      font-style:normal;
      text-decoration: none;
    }
  }
  
  /*termina hechos importantes*/
  
  /*empieza personas claves*/
  #personasclaves{
    background-color: #4949E9; 
    padding-top: 10em;
    padding-bottom: 10em;
    h2{
      margin-inline: 1.5em;
      color: #DEF243;
      margin-bottom: 0.5em;
    }
    p{
      font-family: 'roboto serif', serif;
      margin-inline: 2em;
      color: #ffffff;
    }
    #boton a{
      color:#12127A;
      background-color: none;
      border: none;
      background-image: url(../imagenes/botonquienessomos.png);
      background-repeat:no-repeat;
      background-size: cover;
      background-position: center;
      padding: 10px 20px;
      align-items: center;
      align-content: center;
      text-align: center;
      margin-left: 16em;
      font-family: "Special Elite", system-ui;
      font-weight: 400;
      font-style:normal;
      text-decoration: none;
    }
    #personas{
      margin-left: 2em;
      transform: rotate(-15deg)
    }
  }
  
  /*empieza seccion personas clave*/

   #seccionpersonasclave {
    background-color: #4949E9;
    background-image: url(../imagenes/fondopersonasclave.png);
    background-repeat:no-repeat;
    background-size: cover;
    background-position: center;
    padding-block: 1em;
  h2{
    color: #ffffff;
     margin: 1em;
    }

    #flecha{
      margin: 1.5em;
    }
  #personas{
    figure{
      background-image: url(../imagenes/fondoverde.png);
      background-repeat:no-repeat;
      background-size: contain;
      background-position: top center;
      padding-block: 2em;
      padding-inline: 1em;
      width: 100%;
      height: 100%;
      margin-inline: auto;
      margin-bottom: 2em;
      text-align: center;
    }
    h3{
      color:#12127A;
     margin: 1em;
     text-align: center;
    }
    p{
      font-size: 10pt;
      width: 22em;
      justify-content: center;
      margin-inline: auto;
    }
  }    
}

/*termina seccion personas clave*/

  
  
  /*empieza hebe de bonafini*/
  
  #hebe{
    position: relative;
    z-index: 7000;
    background-image: url(../imagenes/fondohebe.png);
    background-repeat:no-repeat;
    background-size: cover;
    background-position: center;
    padding-bottom: 11em;
    padding-inline: 3em;
    width: 100%;
    height: 100%;
    #flecha{
      margin-block: 1.2em;
    }
    h1{
      color: #ffffff;
      font-size: 30pt;
      margin-block: 0.5em;
    }
    #videohebe {
      border-radius: 1em;
      margin-top: 2em;
      aspect-ratio: 16/9;
      width: 100%;
    }
  }
  #suhistoria {
    background-color: #EA489B;
    padding-block: 5em;
    margin-top: -6em;
    h2{
      color: #ffffff;
      margin-inline: 1.2em;
       margin-bottom: 0.5em;
       text-align: start;
      }
      p{
        font-family: 'roboto serif', serif;
        margin-inline: 2em;
        color: #ffffff;
      }
  }
  #poneaprueba{
    position: relative;
    z-index: 7000;
    background-image: url(../imagenes/fondoprueba.png);
    background-repeat:no-repeat;
    background-size: cover;
    background-position: center;
    margin-top: -5em;
    padding-block: 5em;
    margin-bottom: -2.5em;
    width: 100%;
    margin-inline: auto;
 
   h2{
    color: #12127A;
    padding-inline: 2em;
    text-align: center;
   }
 
   article{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1em;
    margin-block: 2em;
   }
 
   #boton1 a{
    color:#12127A;
    background-color: none;
    border: none;
    background-image: url(../imagenes/botonquienessomos.png);
    background-repeat:no-repeat;
    background-size: contain;
    background-position: center;
    padding: 10px 30px;
    font-family: "Special Elite", system-ui;
    font-weight: 400;
    font-style:normal;
    text-decoration: none;
  }
  #boton2 a{
    color:#12127A;
    background-color: none;
    border: none;
    background-image: url(../imagenes/botonizq.png);
    background-repeat:no-repeat;
    background-size: contain;
    background-position: center;
    padding: 10px 30px;
    margin-left: 5em;
    font-family: "Special Elite", system-ui;
    font-weight: 400;
    font-style:normal;
    text-decoration: none;
  }
 
 
 
  }
 
  /*termina hebe de bonafini*/
 
  /*termina personas claves*/
 
  /*empieza blog*/
  #blog{
    background-image: url(../imagenes/fondoblog.png);
    background-repeat:no-repeat;
    background-size: cover;
    background-position: center;
    padding-block: 5em;
    position: relative;
    z-index: 2000;
    margin-top: -5em;
    padding-inline: 2em;
  h2{
    color: #12127A;
    align-content: center;
    text-align: center;
    margin-bottom: 0.5em;
  }
  h1{
    color: #EA489B;
    text-transform: uppercase;
    text-align: center;
    font-size: 30pt;
    margin-bottom: 1em;
  }
  #boton a{
    color:#12127A;
    background-color: none;
    border: none;
    background-image: url(../imagenes/botonquienessomos.png);
    background-repeat:no-repeat;
    background-size: cover;
    background-position: center;
    padding: 10px 20px;
    align-items: center;
    align-content: center;
    text-align: center;
    margin-left: 12em;
    font-family: "Special Elite", system-ui;
    font-weight: 400;
    font-style:normal;
    text-decoration: none;
  }
  }
  /*seccion blog*/
  #blogseccion{
    margin-inline: 1em;
    #flecha{
      margin-block: 1.2em;
    }
    #blogpag {
      margin-bottom: 7em;
    h2{
      color:#12127A;
       margin: 0.5em;
       text-align: start;
      }
  article{
   display: flex;
   background-image: url(../imagenes/recorteblog.png);
   background-repeat:no-repeat;
   background-position: center;
   padding-inline: 1em;
   width: 100%;
   height: 100%;
   margin-inline: auto;
   margin-block: 2em;
    h3{
      color:#12127A;
      margin-left: 1.5em;
      text-align: start;
      padding-block: 2em;
      }
     }
     #boton {
      align-content: center;
     }
     #boton a{
      color:#12127A;
      background-color: none;
      border: none;
      background-image: url(../imagenes/botonquienessomos.png);
      background-repeat:no-repeat;
      background-size: cover;
      background-position: center;
      padding: 10px 20px;
      text-align: center;
      font-family: "Special Elite", system-ui;
      font-weight: 400;
      font-style:normal;
      text-decoration: none;
      margin-block: 2em;
      margin-inline: 1em;
     
    }


  }
}
  /*fin seccion blog*/
 
/*empieza articulo y noticias*/
#articulosynoticias{
  margin-inline: 1em;
  #flecha{
    margin-block: 1.2em;
  }
  #articulos {
  h2{
    color:#12127A;
     margin: 0.5em;
     text-align: start;
    }
  figure{
    background-color: #d3d3d3;
    border: 1em solid #d3d3d3;
    border-bottom: 1em solid #d3d3d3;
    margin:3em;
    margin-inline: auto;
    height: 80%;
    width: 80%;
   h3{
     color:#12127A;
     text-align: start;
     margin-bottom: 0.3em;
     font-size: 1.2em;
    }
    p{
    font-family: 'roboto serif', serif;
     font-size: 11pt;
     color:#12127A;
    text-align: start;
   }
  }
  }
}
  /*termina empieza articulo y noticias*/


  /*empieza relatos*/
  #relatosyopiniones {
    #flecha{
      margin-inline: 1em;
      margin-block: 1.2em;
    }
    h2{
      color:#12127A;
       margin-block: 0.5em;
       text-align: start;
       margin-inline: 1em;
      }
 #entrevistas  {
        background-image: url(../imagenes/fondoentrevistas.png);
        background-repeat:no-repeat;
        background-size: cover;
        background-position: center;
        padding-block:5em;
        margin-inline: auto;
      h3{
        color:#ffffff;
         margin-inline: 1.5em;
         text-align: start;
         margin-block: 1em;
        }
        #teleotilia{
          margin-left: 2.5em;
        }
        p{
          color:#ffffff;
           margin-inline: 2em;
           text-align: start;
           font-family: 'roboto serif', serif;
           font-size: 11pt;
        }
    }
  }
 
  /*termina relatos*/
  /*termina blog*/
 
  /*empieza biblioteca*/
  #biblioteca{
    padding-block: 3em;
   
    h2{
      padding-inline: 1.5em;
      color: #EA489B;
      margin-bottom: 0.5em;
    }
    p{
      padding-inline: 2em;
      font-family: 'roboto serif', serif;
      color: #12127A;
    }
    #boton a{
      color:#12127A;
      background-color: none;
      border: none;
      background-image: url(../imagenes/botonquienessomos.png);
      background-repeat:no-repeat;
      background-size: cover;
      background-position: center;
      padding: 10px 20px;
      align-items: center;
      align-content: center;
      text-align: center;
      margin-left: 16em;
      font-family: "Special Elite", system-ui;
      font-weight: 400;
      font-style:normal;
      text-decoration: none;
    }
    img{
      margin-left: -2em;
    }
  }
 
  /* empieza seccion biblioteca*/
  #seccionbiblioteca {
    #flecha{
      margin-left: 1.5em;
      margin-block: 1.2em;
    }
    h2{
      margin-left: 1.2em;
      color:#12127A;
       text-align: start;
      }
      #grillaclips{
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0.5em;
        margin-bottom: 2em;
        align-items: center;


      .clips{
            background-image: url(../imagenes/papelgancho.png);
            background-repeat:no-repeat;
            background-position: center;
            background-size: contain;
            width: 80%;
            height: 80%;
            margin-block: 2em;
            align-content: center;
            margin-inline: auto;
            a {
              text-decoration: none;  
                     }
            h3{
              color:#EA489B;
               justify-content: center;
               text-align: center;
               padding: 2em;
               margin-top: 1.5em;
            }
      }
    }
  }
  /* termina seccion biblioteca*/
 
  /*termina biblioteca*/
 
  /*termina nuestra historia*/




/*empieza foro*/
#forito{
  background-color: #EA489B;
  background-image:url(../imagenes/equipobg.png) ;
  h2{color:white}
  #flecha{
    margin: 2em;
  }
  .foro {
    padding: 20px;
  
  }
  
  .tema {
    padding: 15px;
    margin-bottom: 20px;
    border-radius: 1em;
    background-color: #ABC3FF;
    font-family: 'roboto serif';} 
    
  
  .tema-titulo {
    color: #12127A;
    margin: 0;
    font-family: 'roboto serif';
  }
  
  .tema-autor {
    font-size: 14px;
    color: #EA489B;
    font-family: 'roboto serif';
  }
  
  .tema-contenido {
    margin-top: 10px;
    font-size: 16px;
    color: #12127A;
  }
  
  .respuesta {
    padding: 10px;
    margin-top: 10px;
    background-color:#ffffff;
    border-left: 3px solid #EA489B;
    margin-left: 20px;
    border-radius: 1em;
    font-family: 'roboto serif';
  }
  
  .respuesta-autor {
    font-size: 14px;
    color: #12127A;
   
  }
  
  .respuesta-contenido {
    font-size: 15px;
    color: #EA489B;
    margin-top: 5px;
    font-family: 'roboto serif';
  }
  
  .formulario {
    margin-top: 20px;
  }
  
  .formulario input,
  .formulario textarea {
    width: 100%;
    padding: 10px;
    margin-bottom: 10px;
    border: 1px solid #ffffff;
    border-radius: 3px;
    font-size: 15px;
    font-family: 'roboto serif';
  }
  
  .formulario button {
    color:#12127A;
      background-color: transparent;
      border: none;
      background-image: url(../imagenes/botonquienessomos.png);
      background-repeat:no-repeat;
      background-size: cover;
      background-position: center;
      padding: 10px 20px;
      align-items: center;
      align-content: center;
      text-align: center;
      margin-left: 13em;
      font-family: "Special Elite", system-ui;
      font-weight: 400;
      font-style:normal;
      text-decoration: none;
  }
  
  .formulario button:hover {
    background-color: #0056b3;
  }
}


/*termina foro*/

/*empieza actividades*/
#fondoactividades{
  background-image: url(../imagenes/fondoactividades.png);
  background-repeat:no-repeat;
  background-size: cover;
  background-position: center;
  padding-bottom: 5em;
  h1{
  color: #ffffff;
  font-size: 30pt;
   margin: 1em;
  }
  #flecha{
    margin-block-start: 2em;
    margin-inline: 2em;
  }
  figure{
    background-image: url(../imagenes/fondoquizz.png);
    background-repeat:no-repeat;
    background-size: cover;
    background-position: center;
    padding-block: 1em;
    padding-inline: 1em;
    width: 80%;
    height: 100%;
    margin-inline: auto;
    margin-block: 3em;
    .imgjuegos{
      margin-inline: auto;
    }
    h2{
      font-size: 20pt;
      color: #ffffff;
      text-align: center;
      margin-block-start: 0.5em;
    }
  }
}





/*empieza sopa de letras*/
#sopadeletras{
  background-image: url(../imagenes/fondoactividades.png);
  background-repeat:no-repeat;
  background-size: cover;
  padding-bottom: 5em;
  #flecha{
    margin-block-start: 2em;
    margin-inline: 2em;
  }
  h1{
    color: #ffffff;
    font-size: 30pt;
     margin: 1em;
    }
#temas{
  background-color: #ffffff;
  border-radius: 2em;
  margin: 2em;
  padding: 2em;
  h2{
    color:#EA489B ;
    margin-block-end: 1em;
  }
  ul{
    padding-top: 0.5em;
    padding-bottom: 2em;
    list-style: none;
    padding: 0;
   
  }
    li{
    color: #12127A;
    font-family: "Roboto serif", serif;
    font-weight: bold;
    font-style: normal;
    font-size: 1.2rem;
    text-align: left;
    text-decoration: none;
    padding-block-end: 1em;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
 
  .nivel-container {
    width: 15em;
    border-radius: 5px;
    position: relative;
    margin-block-start: 2em;
  }
 
  .nivel-barra {
    height: 10px;
    width: 16.2em;
    background: linear-gradient(to right, green, yellow, orange, red);
    border-radius: 5px;
  }
 
  .nivel-punto {
    position: absolute;
    top: 50%;
    transform: translateY(-15%);
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 1.5px solid #12127A;
  }
 
  .nivel-punto:first-child {
    background-color:#12127A;
  }
 
  .nivel-texto span {
    display: inline-block;
    margin-block-start: 1em;
    font-family: "roboto serif", serif;
    color: #12127A;
    margin-inline-end: 3em;
   
  }
  .nivel-texto {
    width: 20em;
  }




  #boton {
    color:#12127A;
    background-image: url(../imagenes/botonquienessomos.png);
    background-repeat:no-repeat;
    background-size: cover;
    background-position: center;
    padding: 10px 20px;
    align-items: center;
    align-content: center;
    text-align: center;
    margin-left: 10em;
    font-family: "Special Elite", system-ui;
    font-weight: 400;
    font-style:normal;
    text-decoration: none;
    margin-block-start: 3em;
    a{
        text-decoration: none; 
    }
  }
  }
}
/*juego*/
#fondosopa{
  background-image: url(../imagenes/fondoactividades.png);
  background-repeat:no-repeat;
  background-size: cover;
  padding-bottom: 5em;
}
#titulosopa{
  #flecha{
    margin-block-start: 2em;
    margin-inline: 2em;
  }
  h1{
    color: #ffffff;
    font-size: 30pt;
    margin-inline: 1em;
    margin-block-start: 1em;
    margin-block-end: 0.5em;
     
    }
  p{
    margin-inline: 2em;
    font-family: 'roboto serif', serif;
    font-weight: normal;
    color: #EA489B;
    padding-bottom: 1em;
  }
  #palabras{
    color: #ffffff;
    font-weight: bold;
    text-transform: uppercase;
    font-size: 13px;
    margin-inline-start: 2.4em;
  }
}


.progress {
  margin-block: 1em;
  height: 20px;
  background-color: #ffffff;
  border-radius: 1em;
  width: 21em;
}


.progress-bar {
  height: 100%;
  background-color: #EA489B;
  text-align: center;
  color: white;
  border-radius: 1em;
  margin-block: 1em;
}


.textojuego {
  h3 { color: #EA489B;
  font-size: 16px;
  font-family: "roboto serif", serif;
  font-style: normal;
  font-weight: bold;
  margin-block-start: 2em;
  margin-block-end: 0.5em;
 }
   
  }


#sopa{
  margin-inline: 2em;
.sopa-letras {
  display: grid;
  grid-template-columns: repeat(10, 2rem); /* Tamaño de cada celda de la cuadrícula */
  gap: 3px;
  text-align: center;
  font-size: 1.4rem;
  font-weight: bold;
  color: #12127A;
}


.sopa-letras div {
  width: 2rem;
  height: 2rem;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid #ddd;
  background-color: #fff;
  cursor: pointer;
  transition: background-color 0.3s ease;
}


.sopa-letras div:hover {
  background-color: #EA489B;
}
.sopa-letras div.selected {
  background-color: #EA489B; /* Indica que está seleccionada */
}
.sopa-letras div.found {
  text-decoration: line-through; /* Tacha las palabras encontradas */
  background-color: #d3d3d3;
  color: #EA489B;
}

#boton {
margin-top: 2em;  
}

#boton a
  {
    color:#12127A;
    background-color: none;
    border: none;
    background-image: url(../imagenes/botonquienessomos.png);
    background-repeat:no-repeat;
    background-size: cover;
    background-position: center;
    padding: 10px 20px;
    align-items: center;
    align-content: center;
    text-align: center;
    margin-left: 14em;
    font-family: "Special Elite", system-ui;
    font-weight: 400;
    font-style:normal;
    text-decoration: none;
}

}


/*termina sopa de letras*/

/*empieza pop up*/

#sopaprogreso { 
  background-image: url(../imagenes/fondoactividades.png);
  background-repeat:no-repeat;
  background-size: cover;
  padding-bottom: 5em;

  .registro {
    margin: 0 auto;
    width: 90%;
    background-color:#ABC3FF;
    border-radius: 25px;
    padding: 1rem;
  }

  article{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1em;
    margin-block: 2em;
   }

   #boton1 a{
    color:#12127A;
    background-color: none;
    border: none;
    background-image: url(../imagenes/botonquienessomos.png);
    background-repeat:no-repeat;
    background-size: contain;
    background-position: center;
    padding: 10px 30px;
    font-family: "Special Elite", system-ui;
    font-weight: 400;
    font-style:normal;
    text-decoration: none;
  }
  #boton2 a{
    color:#12127A;
    background-color: none;
    border: none;
    background-image: url(../imagenes/botonizq.png);
    background-repeat:no-repeat;
    background-size: contain;
    background-position: center;
    padding: 10px 30px;
    margin-left: 1em;
    font-family: "Special Elite", system-ui;
    font-weight: 400;
    font-style:normal;
    text-decoration: none;
  }
 
  h4 {
  font-family: "roboto serif", serif;  
  font-weight: 400;
  color: #12127A;
  text-align: left;
  }
  h2 {
  color: #EA489B; 
  text-align: center;
  margin-bottom: 2em;
  margin-top: 1em;
  }
  #progreso {
  color: #EA489B;
  font-size: 60pt; 
  text-align: center;
  background-color: white;
  border-radius: 100em;
  display: block;
  width: 2em;
  padding-block: 0.5em;
  margin: 0 auto;
  }
  h3 {
  font-family: "roboto serif", serif;
  color: #12127A;
  text-align: left; 
  margin-block: 1em; 
  }

  .registro input {
    border: 1px solid none;
    border-radius: 5px;
    padding: 8px;
    margin: 8px auto;
    width: 100%;
}
}

/*termina pop up*/


/*termina actividades*/

/*empieza eventos*/
#eventos {
  #flecha{
    margin: 2em;
  }
  h2 {
    position: absolute;
    z-index: 7000;
    color:#12127A;
    text-align: left;
    padding: 16px;
    font-size: 1.5em;
    margin-left:2em;
    margin-top: 3em;
  }
  h3{
    position: absolute;
    z-index: 7000;
    color:#EA489B;
    text-align: left;
    padding: 16px;
    font-size: 1em;
    margin-left:3em;
    margin-top: 6.3em;
   font-family: 'roboto serif';
  }
  #textocalendario{
    position: absolute;
    z-index: 7000;
    margin:3.5em;
    margin-top:9em;
  }
  #fondocalendario{
    object-fit: cover;
    object-position: center;
    width: 100%;
    height: 100%;
    display:block;
    margin:0 auto;

  }
}
.cafecito{
  display: block;
  margin:2em;
h2{margin-block: 0.5em;
color:#0C0D5A}
h3{
  background-color: #EA489B;
  color: white;
  padding: 0.3em;
  margin-block: 0.5em;
}
p{  border-bottom: 1px solid  #EA489B;};
ul{margin-top: 1em;
  text-decoration: none;
color:#101061;
font-weight:bold;}
a{ color:#12127A;
  background-color: transparent;
  border: none;
  background-image: url(../imagenes/botonquienessomos.png);
  background-repeat:no-repeat;
  background-size: cover;
  background-position: center;
  padding: 10px 20px;
  align-items: center;
  align-content: center;
  text-align: center;
  margin-left: 13em;
  font-family: "Special Elite", system-ui;
  font-weight: 400;
  font-style:normal;
  text-decoration: none;}
}















/*//////////////////EMPIEZA TABLET///////////////////////*/ 



@media (min-width: 768px) {
  header.contenedora
     {display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      align-items: center;}

  .contenedora {
        width: min(50rem, 100%);
        margin-inline: auto;
        padding: 1rem;}

  header nav {
          position: relative;
      }

  header nav ul, header .menuVisible ul {
        display: flex;
        position: relative;
        translate: 0;
        background-color: unset;

    }
    header nav ul li {
      text-align: right;

      
  }
  header nav ul li a {
    color: white;
    font-size: 1em;
    border-bottom: none;
    font-family: 'roboto serif', serif;
    margin-block-end:0em;
    text-align: center;
    text-decoration: none;

  }

#logoheader{
  width: 8em;
  align-items: flex-start;
  justify-content: flex-start;
}


  h2{
    font-size: 1.5em;
  }
  h3{
    font-size: 1.2em;
  }
  p{
    font-size: 1em;
  }

  header .contenedora {
      display: flex;
      justify-content: space-between;
      align-items: center;
  }


.menu-btn .btn-linea {
display: none;
}
/* SECCIÓN HOME */
/* portada */
#intro {
  padding-block: 22em;
  align-items: center;
  background-image: url(../imagenes/portada.png);
  background-repeat:no-repeat;
  background-size: cover;
}
#intro h1 {
  font-size: 7em;
}

/*quienes somos*/
#quienessomos {
  padding-block: 6em;
  padding-inline: 4em;
  font-size: 1.2em;

  #boton a
  {    margin-left: 25em;
    
}
}
/*termina quienes somos*/

/*historia*/
.botonera{
  

div{
  font-size: 1.5em;
  padding: 3em;
  padding-block: 3em;
  }
}

  #botoneshistoria{
    padding-block: 1.5em;
    .cadaboton a{
   
    font-size: 1.5rem;
    text-align: left;
    padding: 1.3rem;
    text-decoration: none;
    padding-left: 3em;
    }
  }
/*fin historia*/


/*actividades*/
#fondoactiv{
  padding-block: 3em;
  padding-bottom: 6em;
  h2{
  font-size: 2.5em;
   margin-inline: 4em;
   text-align: center;
  }
figure{
  background-size: contain;
  background-position: top center;
  padding-block: 1em;
  padding-inline: 1em;
}

img{
  display: block;
  margin: 0 auto;

}

h3{
 
  font-size: 1.5em;
  margin-bottom: 0.5em;
  margin-inline: 4.4em;
  margin-top: 0.5em;
}
p{
  margin-inline: 4.8em;
  font-size: 1.4em;
  white-space: pre-line;
  width: 10em; 
}
#boton{margin-bottom: 3em;
  margin-top: -5em;}
#boton a{
  font-size: 1.5em;
 margin-left: 15em;
 padding:10px 28px;
 
    }
}
/*fin actividades*/

/*calendario*/
#calendario {
  padding-block: 5em;
  h2 {
    font-size: 2em;
    margin-left:6em;
    margin-top: 4em;
  }
  #textocalendario{
    margin:13em;
  margin-top:15em;
  }
  #fondocalendario{
    object-fit: contain;
    object-position: center;
    margin-left: 5em;
    width: 80%;
    height: 80%;

  }
}

.dias {
  font-size: 1.5em;
}
.numeros {
 font-size: 1.5em;
}

/*fin calendario*/
/* FIN SECCIÓN HOME */

/*SECCIÓN NOSOTROS*/
#portadanos{
  padding:7em;
  #portadanosotros{
    height: 28em;
  }
}

#misionvision {
  padding-block: 10em;
  padding-inline: 3em;
  margin-top: -7em;
  h2{
    font-size: 2em;
    margin-left: 1.8em;
  }
  p{
      white-space: pre-line;
      width: 30em;
      font-size: 1.2em;
      margin-left: 3em;
      }
      #boton a {
        padding: 10px 20px;
        font-size: 1.5em;
        margin-left: 16.5em;
    }
  }

.equipo {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  flex-direction: row;
 
}
.fondotextura{
  background-repeat:no-repeat;
  background-size: cover;
  h2{font-size: 2em;
  text-align: center;
  padding-top: 2em;}
}
#suscrip{
  display: flex;
}
.burbuja{
 
  p{margin-left: 0.5em;
    margin-bottom: 2em;
    white-space: pre-line;
    width: 10em;
  }
}

.input {
 margin: 0 auto;
 font-size: 1.2em;
 justify-content: center;
 padding-right: 15em;
 width: fit-content;
 height: fit-content;
 margin-top: 8em;

}


#mail{ 
 margin-top: 1em;
 font-size: 1.3em;
 margin-left: 0em;


}

/*FIN SECCIÓN NOSOTROS*/

/*EMPUEZA NUESTRA HISTORIA*/
#iniciohistoria{
  padding-top: 18em;
  padding-bottom: 25em;
  padding-inline: 2em;

  }
  
  #origen{
    background-image: url(../imagenes/fondoorigen.png);
    background-repeat:no-repeat;
    background-size: cover;
    background-position: center;
    padding-block: 10em;
    padding-inline: 3em;
    h2{
      font-size: 2em;
    }

    figure{
      margin:3em;
      height: 100%;
      width:40%;
      margin-inline: auto;
  }
    p{
      font-size: 1.1em;  
    }
    #boton a{
      margin-left: 32em;
    }
  }
  
  /*empieza hechos importantes*/
  #hechos{
    margin: auto; 
    padding-bottom: 15em;
  
    h2{
      padding-inline: 1em;
      margin-inline: 1em;
      font-size: 2em;
      margin-bottom: 0.5em;
    }
    p{
      padding-inline: 2em;
      margin-inline: 2em;
      font-size: 1.1em;
    }
    #fechas{
      width: 100%;
      margin-top: 5em;
      
    }
    #boton a{
      margin-left: 35em;

    
    }
  }
  
  /*termina hechos importantes*/
  
  /*empieza personas claves*/
  #personasclaves{ 
    padding-top: 12em;
    padding-bottom: 10em;
    h2{
      font-size: 2em;
    }
    p{
      font-size: 1.1em;
      margin-inline: 3em;
    }
    #boton a{
      margin-left: 35em;
    }
    #personas{
      margin-left: 7em;
      width: 40%;
    }
  }
  
  
   /*empieza seccion personas clave*/
   #seccionpersonasclave {


    h2{
      font-size: 2em;
      }
    #personas{
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 1em;
      margin-inline: 2em;
      margin-bottom: 2em;
      h3{
        font-size: 1.5em;
      }
      p{
        font-size: 11pt;
        width: 21em;
      }
    }    
  }
 
/*termina seccion personas clave*/

  
/*empieza hebe de bonafini*/

#hebe{
  background-image: url(../imagenes/fondohebetablet.png);
  #televisorhebe{
    width: 50%;
    height: 50%;
    margin-left: 10em;


  }
  #flecha{
    margin-block: 1.5em;
  }
  h1{
    font-size: 30pt;
    margin-block: 0.5em;
  }
}
#suhistoria {
  padding-block: 10em;
  margin-top: -8em;
  h2{
    margin-inline: 2em;
    font-size: 2em;
    }
    p{
      margin-inline: 3.5em;
      font-size: 1.1em;
    }
}
#poneaprueba{
  background-image: url(../imagenes/fondopruebatablet.png);
  margin-top: -8em;
  padding-block: 10em;
  margin-bottom: -3em;


 h2{
  font-size: 2em;
 }
 #boton1 a{
  padding: 15px 45px;
  font-size: 1.5em;
}
#boton2 a{
  font-size: 1.5em;
  padding: 15px 35px;
  margin-left: 8em;


}
}


/*termina hebe de bonafini*/
 
  /*termina personas claves*/
 
  /*empieza blog*/
  #blog{
    background-image: url(../imagenes/fondoblogtablet.png);
    padding-block: 8em;
    width: 101%;
    height: 100%;
    padding-inline: 2em;
  h2{
    font-size: 2em;
  }
  h1{
    font-size: 40pt;
  }
  #boton a{
    margin-left: 32em;
  }
  }
  /*termina blog*/
 
/*empieza seccion nuestro blog*/
#blogseccion{
  #blogpag {
    margin-bottom: 5em;
  h2{
    font-size: 2em;
    }
article{
 background-image: url(../imagenes/recorteblogtablet.png);
 background-size: cover;
 padding-block: 2em;
  h3{
    margin-top: 0.5em;
    font-size: 1.5em;
    }
   }
   #boton a{
    padding: 15px 45px;
    font-size: 1.2em;
    margin-left: 10em;
  }


}
}
/*fin seccion nuestro blog*/


/*empieza articulo y noticias*/
#articulosynoticias{
  margin-inline: 1em;
  #flecha{
    margin-block: 1.2em;
  }
  #articulos {
    article{
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 1em;
      margin-inline: 2em;
      margin-bottom: 2em;
  h2{
    font-size: 2em;
    }
  figure{
    margin-inline: auto;
    height: 90%;
    width: 90%;
   h3{
     font-size: 1.5em;
    }
    p{
    font-family: 'roboto serif', serif;
     font-size: 12pt;
     color:#12127A;
    text-align: start;
   }
  }
  }
  }
}
  /*termina empieza articulo y noticias*/


  /*empieza relatos*/
  #relatosyopiniones {
    h2{
      font-size: 2em;
      }
 #entrevistas  {
       background-image: url(../imagenes/fondoentrevistastablet.png);
       padding-block:8em;
       h3{
        font-size: 1.5em;
        }
       #muriootilia{
       display: grid;
       grid-template-columns: 1fr 1fr;
       gap: 1em;
       margin-bottom: 2em;
       margin-inline: 2em;
       align-items: center;
        p{
           font-size: 12pt;
        }
      }
    }
  }
 
  /*termina relatos*/


  /*empieza biblioteca*/
  #biblioteca{
    padding-block: 3em;
   
    h2{
      font-size: 2em;
      padding-inline: 0.5em;
    }
    p{
      font-size: 1.1em;
      padding-inline: 3.5em;
      font-family: 'roboto serif', serif;
      color: #12127A;
    }
    #boton a{
      margin-left: 32em;
    }
    img{
      margin-left: -2em;
      width: 50%;
    }
  }
 
  /*termina biblioteca*/
    /* empieza seccion biblioteca*/
    #seccionbiblioteca {
      h2{
        font-size: 2em;
        }
        #grillaclips{
        .clips{
              h3{
                font-size: 1.8em;
              }
        }
      }
    }
    
   /* termina seccion biblioteca*/
  
  /*TERMINA NUESTRA HISTORIA*/

  /*EMPIEZA ACTIVIDADES*/
  #fondoactiv{
    figure{
    .imgjuegos{
      margin-inline: auto;
      padding-inline: 6em;
    }
  }
  }
  
  
  /*empieza sopa de letras*/
  #sopadeletras{
  #temas{
   
    .nivel-container {
      width: 38.8em;
    }
   
    .nivel-barra {
      width: 40em;
    }
     
    .nivel-texto span {
      margin-inline-end: 11em;
     
    }
    .nivel-texto {
      width: 44em;
    }
  
  
    }
  }
  /*juego*/
  #titulosopa{
    h1{
      text-align: center;
      }
    p{
      text-align: center;
    }
    #palabras{
      align-content: center;
    }
  }
  
  
  .progress {
   margin-inline-start: 11.3em;
  }
  
  
  .textojuego {
    text-align: center;
   }
     
  #sopa{
  .sopa-letras {
    margin-inline-start: 8em;
  }
  
  
  
  
  }
  
  
  
  /*termina sopa de letras*/
  #fondoactividades{
    figure {
      height: 87%;
    
      
  }
  }
  #seccionentera{
       display: grid;
       grid-template-columns: 1fr 1fr;
       gap: 1em;
       margin-bottom: 2em;
       margin-inline: 2em;
       align-items: center;
  }
   /*empieza pop up*/

  #sopaprogreso { 
    .registro {
     width: 70%; 
    }
    #boton2 a{
      margin-left: 7em;
    }
    .registro input {
      width: 70%;
      margin: 0 auto;
      display: flex;    
  }
  h4 {
  margin-left: 5em;  
  }
  h3 {
  margin-left: 4em;  
  }
  }
  
  /*termina pop up*/
  
  /*fin actividades*/
  
/*TERMINA ACTIVIDADES*/



  /*EMPIEZA EVENTOS*/
#eventos {

  #flecha{
    height: 1.5em;
  }
  h2 {
    font-size: 2em;
    margin-left:6.3em;
    margin-top: 4em;
  }
  h3{
    font-size: 1.5em;
    margin-left:8.5em;
    margin-top: 7em;
  }
  #textocalendario{
    margin-left:13.5em;
    margin-top:15em;
  }
  #fondocalendario{
    width: 35em;
  }
}
.cafecito{
  margin:0 auto;
  width: 30em;
  margin-bottom: 3em;
h2{margin-block: 1em;
  font-size: 2em;}
h3{font-size: 1.5em;}
p{ font-size: 1.3em;};
ul{font-size: 1.5em;}
}



/* FOOTER */
  footer ul {
      display: flex;
      flex-direction: column;
  }
}

/*//////////////////////EMPIEZA ESCRITORIO/////////////////*/

@media (min-width: 1025px) {

  .contenedora{
    margin-inline: 2em;
    }
    header{
      padding: 0em;
    }
    
/*SECCIÓN HOME*/
/*quienes somos*/
/* portada */
#intro {
  padding-block: 23em;
  background-image: url(../imagenes/portadapc.png);
}
#intro h1 {
  font-size: 9em;
}

/*quienes somos*/
#quienessomos {
  padding-block: 10em;
  padding-inline: 4em;
  font-size: 1.2em;
  p{
  white-space: pre-line;
  width: 40em;
  }
   

  #boton a
  {    margin-left: 0em;
    
}
}
/*termina quienes somos*/

/*foro*/
.foro{
  width:70em;
  margin:0 auto;
  
justify-content: center;
}
#foro{
  padding-bottom: 16em;
 
  h2{
    font-size: 3em;
    color: #12127A;
    padding-bottom: 3em;
  }
  #irforo a{
    padding: 150px 150px;
    padding-top: 3em;
    font-size: 1.5em;
  
}
}
/*fin foro*/

/*actividades*/
#fondoactiv{
  padding-block: 6em;
  padding-bottom: 9em;
  h2{
  font-size: 2.5em;
  
  }

img{
   display: block;
    margin: 0 auto;

}

h3{
 
  font-size: 1.5em;
  margin-bottom: 0.5em;
  margin-inline: 21.5em;
  margin-top: 0.5em;
}
p{
  margin-inline: 25em;
  font-size: 1.3em;
  white-space: pre-line;
  width: 10em; 
}
#boton{margin-bottom: 3em;
margin-top: -5em;}
#boton a{
  font-size: 1.5em;
   margin-left: 30.5em;
  
    }
}
/*fin actividades*/

/*calendario*/
#calendario {
  padding-block: 5em;
  h2 {
    font-size: 2em;
    margin-left:24em;
    margin-top: 5em;
  }
  #textocalendario{
    margin:49em;
  margin-top:16em;
  }
  #fondocalendario{
    margin-left: 40em;
    width: 35%;
    height: 70%;

  }
}

.dias {
  font-size: 1.5em;
}
.numeros {
 font-size: 1.5em;
}

/*fin calendario*/
/*FIN SECCIÓN HOME*/

/*SECCIÓN NOSOTROS*/
#portadanos{
  padding:3em;}
#portadanosotros{
  height: 25em;
}
#misionvision {
  padding-block: 15em;
  padding-inline: 28em;
  margin-top: -7em;
  #boton a {
   margin-left: 24em;
}
p{
  white-space: pre-line;
  width: 40em;
  font-size: 1.2em;
  }
 
  }
  .fondotextura{
    h4 {
      font-size: 1.5em;}
      h2{font-size: 2.5em;}
  }
  .integranteequipo {
    h3{ 
      font-size: 1.5em;
      width: 250px;
    }
    p{
      width: 250px;
    }
  }

.burbuja{
 padding: 2em;
 margin-left: 30em;
  h2{font-size: 2em;}
  p{margin-left: 0.5em;
    padding-bottom: 3em;
   
  }
}

.input {
  margin: 4em;
margin-bottom: 0em;
margin-top: 6em;}
#mail{ 
 margin-top: 2em;
 margin-left:3.5em;
 font-size: 1.3em;

}


/*FIN SECCIÓN NOSOTROS*/

/*EMPUEZA NUESTRA HISTORIA*/
#iniciohistoria{
  background-image: url(../imagenes/fondonuestrahistoriacompu.png);
  padding-top: 10em;
  padding-bottom: 30em;
  width: 100%;
  height: 100%;
  h1{
    font-size: 6em;
    white-space: pre-line;
    width: 6em;
    margin: auto;
  }

  }
  
  #origen{
    padding-block: 10em;
    padding-inline: 10em;
    justify-content: center;
    h2{
      font-size: 2em;
      margin-left: 1.5em;
    }
    #origencompu{
      display: grid;
      grid-template-columns: 0.5fr 10.5fr;
      gap: 1em;
      justify-content: center;
    }

    figure{
      margin:3em;
      height: 28em;
      width:25em;
  }
  #imgorigen{
width: 25em;
height: 20em;
  }
  h3{
    font-size: 1.5em;
    padding-inline: auto;
  }
    p{
      margin-top: 5em;
      font-size: 1.1em;
      width: 30em;  
    }
    #boton a{
      margin-left: 45em;
    }
  }
  
  /*empieza hechos importantes*/
  #hechos{
    margin: auto; 
    padding-bottom: 15em;
    
   h2{
      margin-inline: 19.4em;
    }
    p{
      margin-inline: 35em;
      width: 30em;
    }
    #boton a{
      margin-left: 58em;

    
    }
  }
  
  /*termina hechos importantes*/
  
  /*empieza personas claves*/
  #personasclaves{ 
    padding-top: 25em;
    padding-bottom: 15em;
    padding-inline: 10em;
    #personasclavescompu{
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 1em;
    }
    h2{
      font-size: 2em;
    }
    p{
      font-size: 1.1em;
      margin-inline: 3em;
      width: 30em;

    }
    #boton a{
      margin-left: 27em;
    }
    #personas{
      margin-left: 5em;
      width: 40%;
    }
  }
   /*empieza seccion personas clave*/
   #seccionpersonasclave {


    h2{
      font-size: 2.5em;
      }
    #personas{
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      gap: 1em;
      margin-inline: 2em;
      margin-bottom: 2em;
      h3{
        font-size: 2em;
      }
      p{
        font-size: 13pt;
        width: 21em;
      }
    }    
  }
 
/*termina seccion personas clave*/
/*empieza hebe de bonafini*/
#hebe{
  background-image: url(../imagenes/fondohebecompu.png);
  padding-bottom: 11em;
  padding-inline: 3em;
  width: 100%;
  height: 80%;
  h1{
    font-size: 35pt;
  }
  #videohebe {
    width: 70%;
    margin: 0 auto ;
    display: flex;
    margin-bottom: 2em;
    margin-top: 2em;
  }
}
#suhistoria {
  padding-block: 12em;
  margin-top: -11em;
  h2{
    font-size: 2.5em;
    }
    p{
      font-size: 1.3em;
    }
}
#poneaprueba{
padding-block: 20em;
margin-top: -5em;
margin-bottom: -5em;
 h2{
  font-size: 2.5em;
 }
#boton2 a{
  margin-left: 28em;
}
}

footer {
  padding-block-start: 8em;
}
/*termina hebe de bonafini*/


  /*termina personas claves*/
  
  /*empieza blog*/
  #blog{
    background-image: url(../imagenes/fondoblogcompu.png);
    padding-block: 18em;
    width: 100%;
    height: 100%;
    padding-inline: 2em;
  h2{
    font-size: 3em;
  }
  h1{
    font-size: 50pt;
  }
  #boton a{
    margin-left: 48em;
  }
  }
  /*termina blog*/
  /*seccion blog*/
#blogseccion{
  #blogpag {
    margin-bottom: 7em;
  h2{
    font-size: 3em;
    }
    #nuestroblog{
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 1em;
      margin-inline: 2em;
      margin-bottom: 2em;
    article{
    h3{
      font-size: 2.2em;
      margin-top: 3em;
    }
   }
   #boton {
    align-content: center;
   }
   #boton a{
    padding: 15px 45px;
    font-size: 1.8em;
  }
  }
}
}

/*empieza articulo y noticias*/
#articulosynoticias{
  #articulos {
  h2{
     margin-left: 3em;
    }
    article{
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      gap: 1em;
      margin-inline: 2em;
      margin-bottom: 2em;
  figure{
    margin:2em;
    height: 85%;
    width: 60%;
   h3{
     font-size: 1.5em;
    }
    p{
     font-size: 13pt;
     width: 17em;
   }
  }
  }
}
}
  /*termina empieza articulo y noticias*/


  /*empieza relatos*/
  #relatosyopiniones {
    h2{
      font-size: 3em;
      }
 #entrevistas  {
        background-image: url(../imagenes/fondoentrevistacompu.png);
        padding-block:15em;
        width: 100%;
        height: 100%;
        #muriootilia{
          display: grid;
          grid-template-columns: 1fr 1fr;
          gap: 1em;
          margin-bottom: 2em;
          margin-inline: 2em;
          align-items: center;
      h3{
        font-size: 1.8em;
        }
        #teleotilia{
          margin-left: 25em;
          width: 50%;
        }
        p{
           font-size: 13pt;
           width: 25em;
        }
    }
  }
}
  /*termina relatos*/

/*fin seccion blog*/

  /*empieza biblioteca*/
  #biblioteca{
    padding-block: 3em;
    padding-inline: 10em;
    #bibliotecaparacompu{
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 1em;
    }
    h2{
      font-size: 2em;
      padding-inline: 0.5em;
      margin-inline-start: 1.5em;
    }
    p{
      font-size: 1.1em;
      width: 40em;
    }
    #boton a{
      margin-left: 31em; 
    }
    img{
      margin-top: 5em;
      margin-left: -2em;
      width: 70%;
    }
  }
  
  /*termina biblioteca*/
    /* empieza seccion biblioteca*/
    #seccionbiblioteca {
      h2{
        font-size: 3em;
        }
        #grillaclips{
          display: grid;
          grid-template-columns: 1fr 1fr 1fr 1fr;
          gap: 0.5em;
          margin-bottom: 2em;
          align-items: center;
        .clips{
              h3{
                font-size: 1.8em;
              }
        }
      }
    }
    /* termina seccion biblioteca*/
  
  
  /*TERMINA NUESTRA HISTORIA*/

   /*EMPIEZA EVENTOS*/
#eventos {
  background-image: url(../imagenes/fondocale.png);
  background-repeat:no-repeat;
  background-position: top center;

  #flecha{
    margin-left: 20em;
  }
  h2 {
    margin-left:22em;
    margin-top: 4em;
  }
  h3{
    margin-left:29.3em;
  }
  #textocalendario{
    margin-left:45em;
  }
  #fondocalendario{
    width: 35em;
  }
}
.cafecito{
  margin-left:20em;
  display:flex;
  width:fit-content;
  .parte1{
    img{
    height: 15em;
   }
  }
  
  .parte2{
    margin-top: 6em;
    width: 30em;
    margin-left: 3em;
    margin-bottom: 4em;
  }
h2{margin-block: 1em;
  font-size: 2em;}
h3{font-size: 1.5em;}
p{ font-size: 1.3em;};
ul{font-size: 1.5em;}
}

 /*TERMINA EVENTOS*/

 /*EMPIEZA ACTIVIDADES*/
 #fondoactividades{
    figure {
       width: 74%;  
  }
  h1{
    text-align: center;
  }
  }
  #seccionentera{
       display: grid;
       grid-template-columns: 1fr 1fr 1fr;
       gap: 1em;
       margin-bottom: 2em;
       margin-inline: 2em;
       align-items: center;
  }

 /*empieza sopa de letras*/
 #sopadeletras{
  h1{
    text-align: center;
  }
  #temas{
          margin-block: 2em;
          margin-inline: 33.5em;
          #boton {
            margin-left: 32em; 
        }
    
       
      } 
}
#sopa {
  margin-inline: 33em;
}
    /*termina sopa de letras*/

   /*empieza pop up*/

   #sopaprogreso { 
    .registro {
     width: 40%; 
    }
    #boton2 a{
      margin-left: 12em;
    }
    .registro input {
      width: 70%;
      margin: 0 auto;
      display: flex;    
  }
  h4 {
  margin-left: 6.5em;  
  }
  h3 {
  margin-left: 5.3em;  
  }
  }
  
  /*termina pop up*/

 /*TERMINA ACTIVIDADES*/

 /*EMPIEZA SECCION FORO*/
 #forito{
 .formulario button {
  margin-left: 0em;
}
/*FIN SECCION FORO*/

}
}