*{
   box-sizing: border-box;
   margin: 0;
   padding: 0;
   border: 0;
   outline: none;
   text-decoration: none;}

   @media (prefers-reduced-motion: reduce) {
    *, ::before, ::after {
      animation-delay: -1ms !important;
      animation-duration: 1ms !important;
      animation-iteration-count: 1 !important;
      background-attachment: initial !important;
      scroll-behavior: auto !important;
      transition-duration: 0s !important;
      transition-delay: 0s !important;}}
/*---------------------------------header-------------------------*/

header {
    display: flex;
    flex-direction: row;
    z-index: 2000;
    width: 100vw;
    background-color: #56208a;
    max-width: 100%;
    text-align: left;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 4px 2px hsla(229, 77%, 26%, 0.25); 
    position: sticky;
    top: 0;}
  
.logo img {
  max-height: 7rem;}
  

/*TODO LO DEL MENÚ EMPIEZA ACÁ!!*/
ul {list-style: none;}

.menu-btn {
  background: hsl(0 0% 100% / 0.25);
  border-radius: 50%;
  box-shadow: -5px 5px 5px hsl(180 100% 4% / 0.2);
  padding: 0.75rem;
  width: 3rem;
  aspect-ratio: 1;
  cursor: pointer;
  transition: all 0.3s ease-out;
  position: fixed;
  top: 1em;
  right: 1em;
  display: block;
  z-index: 9000;}

.menubar {
  width: fit-content;}

.menu-btn .btn-linea {
  width: 25px;
  height: 3px;
  margin: 4px 0 4px 0;
  background: hsl(0 0% 90%);
  transition: all 0.5s ease-out;
  position: relative;
  z-index: 9000;}

.menuVisible .menu-btn .btn-linea {
  transform: rotate(180deg);}

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

nav ul {
  background-color: #56208a;
  display: grid;
  place-content: center;
  position: fixed;
  inset: 0;
  z-index: 8000;
  translate: 100%;
  transition: all .6s ease;}

.menuVisible ul {
  background-color: #3f1a61;
  transition: all 0.5s ease; 
  translate: 0;}

nav ul li a {
  border-bottom: solid 4px hsl(0 0% 100% / 0.1);
  color: white;
  display: block;
  font-size: 1.3rem;
  margin-block-end: .5rem;
  width: min(70vw, 20rem); 
  text-align: center;
  padding: .5rem;
  text-decoration: none;}

nav ul li a:hover {
  border-bottom: solid 3px hsl(0 0% 100% / 0.5);
  transition: all 5s;}

/* +360 pixeles */
@media (min-width: 25em) {}

/* +640 pixeles */
@media(min-width: 40em) {

  /* ------ menu ------ */
  .menu-btn {
    display: none;
  }

  /* menu visible */
  header nav ul,
  header .menuVisible ul {
    display: flex;
    position: relative;
    translate: 0;
    margin-left: 3em;
  }
    
   header nav ul li {
    min-width: 4em;
  }

  header nav ul li a {
    color: white;
    font-size: 1.2rem;
    width: auto;
    padding: .25em 1em;
    text-align: center;
    border-bottom: none;
  }

  nav ul li a:hover {
      color:#d49dee;
      border-bottom: none;
      transition: all .4s;
  }


/*+800px*/
@media(min-width: 50em) {

  .galeria {
    padding: 1em;}

  .textos h3 {
    padding: 1em;}}}

/*+1200px*/
@media(min-width: 75em) {

.galeria {
    margin-block-start: 4em;
    margin-block-end: 3em;}}
/*TERMINA EL MENÚ*/
/*---------------------------------header----------------------------*/


/*---------------------------------main------------------------------*/
main {
  font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
  text-align: left;
  color: hsl(0, 0%, 0%);
  width: 100%;
  background-color: hsl(274, 85%, 95%);
  min-height: 140vh;
  display: grid;
  grid-template-rows: auto 1fr;
  align-content: center;}

  .btnleer {
    text-align: center;
    background-color: #f8e7f8;
    border-radius: 1000px; 
    padding: 4px 8px;
    width: 110px;
    font-size: 13px;
    cursor: pointer;
    left: 50%;
    top: 10%;
    transform: translate(-50%, -50%);
    height: 3em;
    width: 65%;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin: 2%;}

  .texto1 {
    top: 50%;
    left: 50%;
    font-size: 17px;
    color: white;
    display: flex;
    margin-bottom: 20px;
    flex-direction: column;
    justify-content: center;
    text-align: center;}

  .texto2 {
    font-size: 17px;
    color: white;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;}

  .texto3 {
    top: 50%;
    left: 50%;
    font-size: 17px;
    color: white;
    display: flex;
    flex-direction: column;
    justify-content:center;
    text-align: center;}

  .texto4 {
    font-size: 17px;
    color: white;
    display: flex;
    flex-direction: column;
    justify-content:center;
    text-align: center;}

  .texto5 {
    top: 50%;
    left: 50%;
    font-size: 17px;
    color: white;
    display: flex;
    flex-direction: column;
    justify-content:center;
    text-align: center;}

/*---------------------------cierra el main------------------------------*/


/*--------------------footer-----------------*/
footer {
  background-color: #56208a;
  display: inline-block;
  padding: 1rem;
  align-items: center;
  color:hsl(0, 0%, 100%);}

  .textofooter p { 
    font-size: 90%;
    text-align: center;
    display: block;}
    
  .index.html footer {
    height: 200vh
  }

/*--------------------cierra footer----------------*/

/*INDEX HTML*/
  .rectangulo-inicio {
    width: 100%;
    height: 100vh;}
  
  .formas {
    width: 100%;
    height: 100vh;}

  .rectangulo1, .rectangulo2, .rectangulo3, .rectangulo4, .rectangulo5 {
      display: flex;}

  .rectangulo1 {
    width: 80%;
    background-color: #c92222;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    border-top-right-radius: 1000px;
    border-bottom-right-radius: 1000px;
    margin-bottom: 60px;}
  
  .rectangulo2 {
    width: 80%;
    background-color: #2bc432;
    border-top-left-radius: 1000px;
    border-bottom-left-radius: 1000px;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    margin-bottom: 60px;}

  .rectangulo3 {
    width: 80%;
    background-color: #d6b212;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    border-top-right-radius: 1000px;
    border-bottom-right-radius: 1000px;
    margin-bottom: 60px;}

  .rectangulo4 {
    width: 80%;
    background-color: #12b9be;
    border-top-left-radius: 1000px;
    border-bottom-left-radius: 1000px;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    margin-bottom: 60px;}
    
  .rectangulo5 {
      width: 80%;
      background-color: #b61f77;
      border-top-left-radius: 0;
      border-bottom-left-radius: 0;
      border-top-right-radius: 1000px;
      border-bottom-right-radius: 1000px;
      margin-bottom: 60px;}

    .contenedor {
      width: 60%;}

      .rectangulo1, .rectangulo3, .rectangulo5 {
        margin-left: 0;
        margin-right: auto;}

      .rectangulo2, .rectangulo4 {
        margin-left: auto;
        margin-right: 0;}


      .figura1 img{
        width: 100%;
        height: auto;
        display: block;
        opacity: 60%;
        position: relative;
        object-fit: cover;
        border-top-left-radius: 1000px;
        border-bottom-left-radius: 1000px;
        border-top-right-radius: 1000px;
        border-bottom-right-radius: 1000px;}

      .figura2 img {
        width: 100%;
        height: auto;
        display: block;
        opacity: 60%;
        position: relative;
        object-fit: cover;
        border-top-left-radius: 1000px;
        border-bottom-left-radius: 1000px;
        border-top-right-radius: 1000px;
        border-bottom-right-radius: 1000px;}

      .figura3 img {
        width: 100%;
        height: auto;
        display: block;
        position: relative;
        opacity: 60%;
        object-fit: cover;
        border-top-left-radius: 1000px;
        border-bottom-left-radius: 1000px;
        border-top-right-radius: 1000px;
        border-bottom-right-radius: 1000px;}
      
      .figura4 img {
        width: 100%;
        height: auto;
        display: block;
        position: relative;
        opacity: 60%;
        object-fit: cover;
        border-top-left-radius: 1000px;
        border-bottom-left-radius: 1000px;
        border-top-right-radius: 1000px;
        border-bottom-right-radius: 1000px;}

      .figura5 img {
        width: 100%;
        height: auto;
        display: block;
        opacity: 60%;
        position: relative;
        object-fit: cover;
        border-top-left-radius: 1000px;
        border-bottom-left-radius: 1000px;
        border-top-right-radius: 1000px;
        border-bottom-right-radius: 1000px;}


        .figcaption strong {
            font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
            font-size: 20px;
            color: white;}


        figcaption {
          width: 40%;}

/*ACÁ TERMINA EL INDEX!!!*/



/*JUEGOS (después te direcciona al menu de "ACTIVDADES"*/
section.textos {
  max-width: 70rem;
  margin-inline: auto;
  padding: 3rem;
  display: grid;
  grid-auto-rows: min-content;
  grid-gap: 1px;}

h2.texto-juegos {
  margin: 0;
  text-align: start;
  font-size: 1.5em;
  margin-block-start: 0.83em;
  margin-block-end: 0.83em;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
  font-weight: bold;
  border-bottom: 0.1em solid rgb(158, 21, 21);}

p {
  text-align: left;
  margin-top: 1em;
  line-height: 1.3;}

.rectangulo-juegos2 {
background-color: #508efe;
border-radius: 1000px;
color: white;
padding: 20px;
left: 50%;
top: 10%;
transform: translate(-50%, -50%);
height: 3em;
width: 65%;
position: relative;
display: flex;
flex-direction: column;
justify-content: center;
margin: 2%;}
      
        
        .texto {
          font-size: 24px;
          font-weight: bold;
          justify-content: center;
          margin:auto;}
        
        .fotos {
          display: flex;
          justify-content: center;
          align-items: flex-start;
          height: auto;
          margin-top: auto;}
        
        .fotos img {
          max-width: 100%;
          height: auto;
          margin-top: auto;
          padding: 2em;}



/*ESPACIO DIDÁCTICO (después te direcciona al menu de "ACTIVDADES"*/
      .rectangulo-espacio-didactico {
        width: 100%;
        height: 100vh;}

        .rectangulo-espacio-didactico {
          top: 100%;
          left: 50%;
          transform: translate(-50%, -50%);
          width: 100%;
          max-width: 40em;
          height: 10em;
          margin-top: 10rem;
          background-color: #2bc432;
          border-radius: 50px;
          margin-bottom: 60px;
          position: relative;
          display: flex;
          justify-content: center;
          align-items: center;
          margin: 0;
          padding: 3rem;}

        section.img {width: 100%;
          height: auto;
          display: block;
          opacity: 60%;
          position: relative;
          object-fit: cover;
          border-top-left-radius: 100px;
          border-bottom-left-radius: 100px;
          border-top-right-radius: 100px;
          border-bottom-right-radius: 100px;}

        h2.texto-espacio {
          margin: 20em;
          text-align: start;
          display: block;
          font-size: 1.5em;
          margin-block-start: 0.83em;
          margin-block-end: 0.83em;
          margin-inline-start: 0px;
          margin-inline-end: 0px;
          font-weight: bold;
          border-bottom: 0.1em solid rgb(12, 117, 26);}

        


/*HUERTA (después te direcciona al menu de "ACTIVDADES"*/

  .galeria h3 {
    text-align: center;
    font-weight: bold;
    border-bottom: 0.2em solid rgb(87, 22, 131);}

  h2.texto-huerta {
    margin: 20em;
    text-align: center;
    display: block;
    font-size: 1.5em;
    margin-block-start: 0.83em;
    margin-block-end: 0.83em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    font-weight: bold;
    border-bottom: 0.1em solid rgb(180, 126, 10);}

    .galeria {
      padding: 0 1em 2em 1em;
      width: min(75em, 100%);
      margin-inline: auto;}
    
    .slider {
      width: 100%;
      height: max(400px, 50vh);
      position: relative;
      overflow: hidden;}
    
    .slide {
      width: 100%;
      height: 100%;
      position: absolute;
      transition: all 0.5s;}
    
    .slide img {
      border-radius: .25em;
      width: 100%;
      height: 100%;
      object-fit: cover;
}
    
    .slide a {
      background-color: hsla(268, 79%, 22%, 0.5);
      color: hsl(0 0% 90% / 0.85);
      padding: .25em 1em;
      border-radius: 2em;
      text-decoration: none;
      justify-self: end;
      margin-block-start: 1em;}
    
    .slide a::after {
      content: " →";}
    
    .slide a:hover {
      background-color: hsla(281, 73%, 25%, 0.95);
      box-shadow: 0 .25em .25em hsl(0 0% 0% / 0.25);
      color: hsl(0 0% 90%);}
    
    @media (min-width: 30em) {
      .slide figcaption {
        font-size: 1.1em;
        inset: 2em 50% 2em 2em;
        gap: 1em;
        padding: 1.5em;
        transition: .5s;}}
    
    @media (min-width: 40em) {
      .slide figcaption {
        font-size: 1.25em;
        inset: auto 50% 2em 2em;}}
    
    
    .btn {
      position: absolute;
      z-index: 10;
      top: 1em;
    
      width: 2.5em;
      aspect-ratio: 1;
      border: none;
      border-radius: 50%;
      cursor: pointer;
      background-color: hsla(270, 49%, 72%, 0.75);
      color: white;
      font-size: 1.1em;
      opacity: .75;}
    
    .btn:active,
    .btn:hover {
      opacity: .9;
      border: solid 1px white;}
    
    .btn-prev {
      left: calc(100% - 6.25em);}
    
    .btn-prox {
      right: 1em;}

/*INICIO SESIÓN HTML*/
.formulario h1 {
      display: flex;
      flex-direction: column;
      gap: 1rem;
      padding: 2em;}

.formulario {
  padding: 2rem;
  text-align: center;}

/*FIN DE SESIÓN*/



/* HISTORIA HTML*/
  section.img {width: 100%;
    height: auto;
    display: block;
    opacity: 60%;
    position: relative;
    object-fit: cover;
    border-top-left-radius: 100px;
    border-bottom-left-radius: 100px;
    border-top-right-radius: 100px;
    border-bottom-right-radius: 100px;}

  h2.texto-info {
    margin: 20em;
    text-align: start;
    display: block;
    font-size: 1.5em;
    margin-block-start: 0.83em;
    margin-block-end: 0.83em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    font-weight: bold;
    border-bottom: 0.1em solid rgb(12, 93, 117);}

    .video {
      width: 100%;
      padding: 0px;
      border-width: 0px;
      margin: 0px;
      left: 0px;}
  
    .video iframe{
      margin-top: auto;
      width: 100%;
      bottom: 0;
      left: 0;
      aspect-ratio: 16/9;}

/*FIN DE HISTORIA*/



/*CONTACTO*/
.contacto {
  padding: 2rem;
  border: 0;
  margin: 0;
  width: 100%;
  display: inline-block;
  box-sizing: border-box;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 24px;
  color: white;}

article {
  padding: 1em;}

.datos {
width: 100%;
background: #f0eaf1;
color: hsl(0 0% 50%);
font-size: 1rem;
padding: 0.5em;
border: solid 1px hsl(273, 72%, 29%);
border-radius: 0.55em;
outline: none;
font-family: inherit;
cursor: pointer;
transition: 1s}

.campo {
  text-align: left;
  padding: 2em;
  padding-block: 0.4em;}

.btncampo {
  padding: 10px 20px;
  font-size: 16px;
  background-color: #551d96;
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;}

.ubicación h2{
  margin-top: 2rem;
  font-weight: 300;
  margin-bottom: 1rem;}

.ubicación {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: center;
  align-content: center;
  align-items: center;}

.ubicación iframe{
  max-width: 100%;
  max-height: 15rem;}

::placeholder {
width: 20em;
max-width: 20em;
margin: 1rem;
background-color: rgba(241, 231, 243, 0.301);
border: 1rem;
border-radius: 0.6em;}
/*FIN DE CONTACTO*/