@charset "utf-8";
@font-face {
    font-family: 'Open Sans', sans-serif;
    src: url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400;0,600;0,700;0,800;1,400;1,600;1,700;1,800&display=swap');
};
/*
================================
  orden de las reglas de estilo:
  de lo general a lo particular,
  de arriba hacia abajo,
  de celular a tablet,
  de tablet a escritorio
================================
*/

/* "reseteo" selector universal */
*,
*::after,
*::before{
  /* para que el ancho de las cajas
     se calcule hasta los bordes y NO
     sólo por sus contenidos */
  box-sizing: border-box;

  margin: 0;
  padding: 0;
  border: 0;
  outline-color: transparent;
}


body {
    font-family: 'Open Sans', sans-serif;

    margin-inline: auto; 
    margin: 0;
    background-color: hsl(0, 0%, 97%);
    color: #1B1C1E;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    min-height: 100vh;
    justify-content: space-between;
}

body p{
    margin-left: 7rem;
}

.inicial p{
    text-align: center;
}

h1 {
    font-family: 'Open Sans', sans-serif;
    font-weight: 'ExtraBold';
    font-size: 6em;
    text-align: center;
    line-height: 0.3em;
}

h3 {
    font-family: 'Open Sans', sans-serif;
    font-weight: 'Bold';
    font-size: 1.8em;
    line-height: 0.2em;
    margin-top: 4rem;
    margin-left: 7rem;
}

h4,
h5,
h6,
p { 
  font-family: 'Open Sans', sans-serif;
  font-weight: 'SemiBold';
  margin-block-end: 1rem;
  line-height: 1.5em;
}



a {
    text-decoration: none;
}
  
ul,
ol {
    list-style: none;
}
  
img {
    max-width: 100%;
    height: auto;
}

header, 
footer{
    background-color: #1B1C1E;
    color: hsl(0, 0%, 97%);
}



header{    
    position: sticky;
    top: 0;
    z-index: 8000;
    padding: 1rem 1rem 1rem 1rem;
}

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

header h6 {
    margin-top: 8px;
    color: #f7f7f7;
}

#logo{
    display: flex;
    flex-direction: column;
    position: relative;
    z-index: 8999;
    cursor: pointer;
}

#logo img{
    width: 8rem;
}

#logo h6{
    font-weight: 500;
    line-height: 1rem;
    margin: 1;
}

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

.menu-btn .btn-linea {
    width: 25px;
    height: 3px;
    margin: 4px 0 4px 0;
    background: hsl(0 0% 90%);
    transition: all 0.3s 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: hsl(210 92% 10% / 95%);
    display: grid;
    place-items: center;
    place-content: center;
  
    position: fixed;
    inset: 0;
    z-index: 8000;
    translate: 100%;
    
    transition: all .6s ease;
}
  
.menuVisible ul {
    background-color: #1B1C1E;
    transition: all .4s ease;
    
    translate: 0;
}
  
  /* cada vínculo del menu */
nav ul li a {
    border-bottom: solid 3px hsl(0 0% 100% / 0.1);
    color: hsl(0, 0%, 97%);
    display: block;
    font-size: 1.5rem;
    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 .3s;
}

.juegos_interact {
    display: flex;
    flex-direction: row;
    justify-content: center;
    flex-wrap: wrap;
}

/* slider */
.galeria {
    width: min(40rem, 100%);
    margin-inline: auto;
    margin-left: 8rem;
}
  
.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: 1rem;
    width: 90%;
    height: 92%;
    object-fit: cover;
    object-position: top 25%;
}
  
.slide figcaption {
    background-color: hsla(210, 62%, 56%, 0.8);
    border-radius: .5rem;
    color:hsl(0, 0%, 97%);
    padding: 1rem;
    text-transform: uppercase;
    font-weight: 700;
    position: absolute;
    inset: auto 1rem 1rem 1rem;
    
    width: 82.5%;
    margin-left: -2rem;

    text-align: center;
    

    display: grid;
    grid-template-rows: auto 1fr auto;
    gap: .5rem;
}
  
.slide figcaption span {
    display: block;
    font-size: .85rem;
    color: hsl(0, 0%, 97%);
    text-transform: none;
}
  
.slide a {
    background-color: #2f7ac6;
    color: hsl(0 0% 90% / 0.85);
    padding: .25rem 1rem;
    border-radius: 2rem;
    text-decoration: none;
    justify-self: end;
    margin-block-start: 1rem;
}
  
.slide a::after {
    content: " →";
}
  
.slide a:hover figcaption{
    background-color: #2f7ac6;
    box-shadow: 0 .25rem .25rem hsl(0 0% 0% / 0.25);
    color: hsl(0 0% 97%);
    
}


@media (min-width: 30rem) {
    .slide figcaption {
      font-size: 1.1rem;
      inset: 2rem 50% 2rem 2rem;
      gap: 1rem;
      padding: 1.5rem;
      transition: .5s;
    }
}
  
  @media (min-width: 40rem) {
    .slide figcaption {
      font-size: 1.25rem;
      inset: auto 50% 2rem 2rem;
    }
}



.btn {
    position: absolute;
    z-index: 10;
    bottom: 1.5rem;
  
    width: 2.5rem;
    aspect-ratio: 1;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    background-color: #2f7ac6;
    color: hsl(0, 0%, 97%);
    font-size: 1.1rem;
    opacity: .75;
}
  
.btn:active,
.btn:hover {
    background-color: #6aa3dc;
    border: solid 1px #f7f7f7;
}
  
.btn-prev {
    left: 4rem;
}
  
.btn-prox {
    right: 4rem;
}


/* formulario GENERAL*/

.formulario{
    width: 400px;
    padding: 30px;
    margin: auto;
    margin-top: 4rem;
    margin-bottom: 5rem;
    border-radius: 1rem;
    color: #1b1c1e;
}

.formulario h4{
    text-transform: uppercase;
    font-size: larger;
}

.datos{
    width: 80%;
    padding: 10px;
    border-radius: .75rem;
    margin-bottom: .25rem;
    margin-right: 0rem;
    font-size: .90rem;
}

.enviar{
    width: 100%;
    padding: 10px;
    border-radius: .75rem;
    margin-bottom: .25rem;
    margin-right: 2rem;
    color: #f7f7f7;
    font-size: .90rem;
    font-weight: 700;
    text-transform: uppercase;
    cursor: pointer;
}

.enviar:hover{
    font-size: .90rem;
    font-weight: 800;
    text-transform: uppercase;
}

/* formulario JUVENTUD*/

#formulario1{
    box-shadow: 7px 13px 37px #ef756c;
}

#formulario1 .datos{
    outline-color: #ea4a3e;
}
#formulario1 .enviar{
    background-color: #ea4a3e;
}
#formulario1 .enviar:hover{
    background-color: #f7f7f7;
    color: #ea4a3e;
}
#formulario1 h4{
    color: #e73023;
}

/* formulario ADULTEZ*/

#formulario2{
    box-shadow: 7px 13px 37px #5cc172;
}
#formulario2 .datos{
    outline-color: #40a756;
}
#formulario2 .enviar{
    background-color: #40a756;
}
#formulario2 .enviar:hover{
    background-color: #f7f7f7;
    color: #40a756;
}
#formulario2 h4{
    color: #38944c;
}


/* formulario LEGADO*/

#formulario3{
    box-shadow: 7px 13px 37px #f1cf30;
}
#formulario3 .datos{
    outline-color: #efc81a;
}
#formulario3 .enviar{
    background-color: #efc81a ;
    color: #1b1c1e;
}
#formulario3 .enviar:hover{
    background-color: #f7f7f7;
    color: #efc81a;
}
#formulario3 h4{
    color: #efc81a;
}


/* formulario TALLERES*/
.ubicacion {
    margin-top: 3rem;
    margin-left: 3rem;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-evenly;
}

#ubicacion_datos {
    text-align: center;
}

.visita{
    width: 400px;
    padding: 30px;
    margin: auto;
    margin-top: 3rem;
    margin-bottom: 5rem;
    border-radius: 1rem;
    color: #1b1c1e;
    box-shadow: 7px 13px 37px #498fd4;
}

.visita h4{
    text-transform: uppercase;
    font-size:larger;
    color: #2f7ac6;
}


#tipo {
    padding-left: 0rem;
}

.enviar {
    padding-left: 0rem;
}

.enviar a{
    width: 100%;
    padding: 1rem 8.7rem 1rem;
    border-radius: 1rem;
    color: #f7f7f7;
    background-color: #2f7ac6;
    font-size: larger;
    font-weight: 600;
    cursor: pointer;
    text-align: center;
}

.enviar a:hover{
    font-size: larger;
    font-weight: 800;
    text-transform: uppercase;
    color: #2f7ac6;
    background-color: #f7f7f7;
    outline-color: #2f7ac6;
}

.datos_talleres {
    padding-left: 0rem;
}

.materiales img{
    width: .8rem;
    margin-right: 1rem;
}

.materiales{
    font-family: 'Open Sans', sans-serif;
    font-weight: 500;
    padding-left: 0rem
}

.materiales p {
    margin-top: 3rem;
}

.materiales ul li{
    margin-left: 5rem;
}

.videos{
    margin-left: 5rem;
}

.juegos_interact{
    margin-left: 3rem;
}


/* SUBTITULOS INICIO Y JUVENTUD */
.subtitulos1 h2 {
    color: #ea4a3e;
    margin: 1rem;
    line-height: 0.4rem;
    font-size: 1.7rem;
}

/* SUBTITULOS ADULTEZ */
.subtitulos2 h2 {
    color: #40a756;
    margin: 1rem;
    line-height: 0.4rem;
    font-size: 1.7rem;
}

/* SUBTITULOS LEGADO */
.subtitulos3 h2 {
    color: #efc81a;
    margin: 1rem;
    line-height: 0.4rem;
    font-size: 1.7rem;
}

/* SUBTITULOS TALLERES */
.subtitulos4 h2 {
    color: #498fd4;
    margin: 1rem;
    line-height: 0.4rem;
    font-size: 1.7rem;
}

.subtitulos_a h2 {
    margin-top: 10rem;
}

.subtitulos_b{
    margin-left: 1rem;
    margin-top: 2rem;
}

.subtitulos p {
    font-family: 'Open Sans', sans-serif;
    font-weight: 'SemiBold';
    margin: 2rem 0 0 2rem;
}

.subtitulos figure {
    margin: 2rem 0 0 2rem;
}

/* ----------------
   cuerpo principal
   ---------------- */


   /* esto es parte del body de INICIO*/

.inicial0 h2 {
    font-weight: 'ExtraBold';
    font-size: 3rem;
    text-align: center;
    color: #ea4a3e;
    text-decoration: underline;
}

.inicial0 img {
    max-width: 100%;
    height: auto;
    width: auto;
}

.bienvenida h1 {
    color: #ea4a3e;
    margin: 1rem;
}

.la{
    margin-left: 2rem;
    margin-top: 4rem;
}

.bienvenida p{
    margin: 4rem 0 0 5rem;
    text-align: center;
}

.subtitulos_a,
.subtitulos_b{
    text-align: left;
    margin-left: 4rem
}

.subtitulos_b{
    margin-left: 6rem;
    margin-bottom: 3rem;
}

.centrable {
    text-align: center;
    margin-bottom: 50px;   
}

p{
    font-size: 14pt;
    font-weight: 600;
}
  /* esto es parte del body de JUVENTUD */

.inicial {
    padding: 2rem;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: flex-start;
    background-color: #ea4a3e;
}

.inicial p {
    color: #f7f7f7;
    margin: 2rem;
    padding: 2rem;
    display: flex;
    justify-content: center;
}

.inicial h1 {
    color: #f7f7f7;
    line-height: 7rem;
    margin: 1rem;
}

.titulo {
    padding: 1rem;
}

.titulo h2 {
    color: #ea4a3e;
    line-height: 1rem;
    font-size: 1.7rem;
}

.anr h2 {
    color: #ea4a3e;
    margin: 1rem;
    line-height: 0.4rem;
}

.micro h2 {
    margin-top: 5rem;
}

.cuentos{
    margin-left: 1rem;
}

/* ACA */
/* .microcuentos h3 {
    font-size: 1.3rem;
    margin: 1rem;
} */

.microcuentos p {
    font-family: 'Open Sans', sans-serif;
    font-weight: 'SemiBold';
    margin: 2rem;
}
/* ACA */
/* .juego h3 {
    font-size: 1.3rem;
    margin: 1rem;
} */

.jugar{
    margin-left: 1.4rem;
}

.juego p {
    margin: 2rem;
}
/* ACA */
/* .actividades h3 {
    font-size: 1.3rem;
    margin: 1rem;
} */

.obra{
    margin-left: 1.4rem;
}

.actividades p {
    margin: 2rem;
}

.bloque1
.bloque2
.bloque3
.bloque4
.bloque5
.bloque6{
    padding: 0rem;
    margin: 2rem;
}


.formulario h2 {
    font-size: 1.3rem;
    margin: 1rem;
}

.formulario h3 {
    font-size: 1.3rem;
    color: hsl(4, 80%, 52%);
    margin: 1.6rem;
}

.formulario p {
    font-family: 'Open Sans', sans-serif;
    font-weight: 'SemiBold';
    margin: 2rem;
}

 /* esto es parte del body de ADULTEZ */

.inicial2 {
    padding: 2rem;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: flex-start;
    background-color: #40a756;
}

.inicial2 h1 {
    color: #f7f7f7;
    line-height: 7rem;
    margin: 1rem;
}

.inicial2 p {
    color: #f7f7f7;
    margin: 2rem;
    padding: 2rem;
    display: flex;
    justify-content: center;
}

.titulo2 {
    padding: 1rem;
}

.titulo2 h2 {
    color: #40a756;
    line-height: 1rem;
    font-size: 1.7rem;
}

.videos figure {
    margin-bottom: 50px;
}

.juego_astillero {
    margin-top: 50px;
    padding: 0rem;
}

.materiales img{
    margin-left: 2rem;
}

/* esto es parte del body de LEGADO*/
.inicial3 {
    padding: 2rem;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: flex-start;
    background-color: #f1cf30;
}

.inicial3 h1 {
    color: #f7f7f7;
    line-height: 7rem;
    margin: 1rem;
}

.inicial3 p {
    color: #f7f7f7;
    margin: 2rem;
    padding: 2rem;
    display: flex;
    justify-content: center;
}

.titulo3 {
    padding: 1rem;
}

.titulo3 h2 {
    color: hsl(49, 87%, 52%);
    line-height: 1rem;
    font-size: 1.7rem;
}

#verticales {
    margin-top: 50px;
}

#horizontales {
    margin-top: 50px;
}

/* esto es parte del body de TALLERES*/

.inicial4 {
    padding: 2rem;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: flex-start;
    background-color: #498fd4;
}

.inicial4 h1 {
    color: #f7f7f7;
    line-height: 7rem;
    margin: 1rem;
}

.inicial4 p {
    color: #f7f7f7;
    margin: 2rem;
    display: flex;
    justify-content: center;
}

.titulo4 {
    padding: 1rem;
}

.titulo4 h2 {
    color: #498fd4;
    line-height: 1rem;
    font-size: 1.7rem;
}

.arte{
    margin-left: 1.3rem;
}

/* ACA */
/* .rincon h3 {
    font-size: 1.3rem;
} */

.rincon_descripcion {
    margin-left: 2rem;
}

.visita h3 {
    font-size: 1rem;
}

.mapa {
    text-align: center;
    margin-bottom: 50px;
}

/* esto es de las SECCIONES de INICIO */

.secciones ul li a {
    font-weight: bold;
    font-size: 1.5rem;
    color: #1b1c1e;
}

.secciones ul {
    padding-left: 0rem;
}

.juventud {
    display: flex;
    justify-content: center;
    background-color: #ea4a3e;
    padding: 2rem;
}

.juventud a:hover{
    color: #f7f7f7;
    font-size: 2rem;
}


.adultez {
    display: flex;
    justify-content: center;
    background-color: #40a756;
    padding: 2rem;
}

.adultez a:hover{
    color: #f7f7f7;
    font-size: 2rem;
}


.legado {
    display: flex;
    justify-content: center;
    background-color: #f1cf30;
    padding: 2rem;
}

.legado a:hover{
    color: #f7f7f7;
    font-size: 2rem;
}


.talleres {
    display: flex;
    justify-content: center;
    background-color: #498fd4;
    padding: 2rem;
}

.talleres a:hover{
    color: #f7f7f7;
    font-size: 2rem;
}

/* galeria GENERAL */

.artistas{
    padding: 0 1rem 2rem 1rem;
    width: min(30rem, 100%);
    margin-inline: auto;
    margin-left: 3rem;
}
  
.artistas figure {
    border-radius: 5px;
    aspect-ratio: 1;
    position: relative;
    overflow: hidden;
}
  
.artistas img {
    object-fit: cover;
    object-position: left center;
    width: 100%;
    height: 100%;
}
  
.artistas figcaption {
    color: white;
    padding: .5rem;
    line-height: 1rem;
    text-transform: uppercase;
    font-weight: 700;
    
    position: absolute;
    inset: 0;
    /* mover para que se vea apenas el "titulo" de la foto */
    transform: translateY(calc(100% - 2rem));
    
    transition: all .6s ease;
}
  
.artistas figure:hover figcaption {
    transition: all .3s ease;
    transform: translateY(0);
    display: grid;
    text-align: center;
    place-items: center;
    place-content: center;
    padding-inline: 2rem;
}
  
.artistas figcaption span {
    display: block;
    font-size: .75rem;
    color: #f7f7f7;
    margin-block-start: .5rem;
    text-transform: none;
}
  
.artistas figcaption a {
    display: inline-block;
    margin-block-start: .5rem;
    color: #f7f7f7;
    padding: .25rem 1rem;
    border-radius: 2rem;
}
  
.artistas figcaption a:hover {
    box-shadow: 0 .25rem .25rem hsl(0 0% 0% / 0.25);
    color: #f7f7f7;
}


/* galeria JUVENTUD */
#fig_juventud figcaption{
    background-color: hsla(4, 80%, 58%, 0.4)
}

#fig_juventud a {
    background-color: #ea4a3e;
}
#fig_juventud a:hover {
    background-color: #e73023;
}

/* galeria ADULTEZ */
#fig_adultez figcaption{
    background-color: hsla(133, 45%, 45%, 0.4);
}

.fig_adultez a {
    background-color: #40a756;
}
.fig_adultez a:hover {
    background-color: #38944c;
}

/* galeria LEGADO */
#fig_legado figcaption{
    background-color: hsla(49, 87%, 57%, 0.4);
}

.fig_legado a {
    background-color: #f1cf30;
}
.fig_legado a:hover {
    background-color: #efc81a;
}



/* ----------------
   footer
   ---------------- */
.footer{
    padding: 1rem;
    width: 100%;
    background-color: hsl(220, 5%, 11%);
    /* height: 200px; */
    max-height: 200px;
}


.pie_de_web .grupo1 {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-evenly;
    align-items: center;
}


.pie_de_web .caja {
    margin: 1rem;
    width: 8rem;
}

.caja ul{
    display: flex;
    flex-direction: row;
}

.pie_de_web .grupo1 .caja img {
    /* margin: 2rem; */
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
}


.pie_de_web .grupo2 {
    margin: 2rem;
    display: flex;
    justify-content: center;
    text-align: center;
}

.redes_footer {
    display: flex;

}

.redes_footer a {
    height: 35px;
    width: 35px;
    padding-right: 1rem;

}



/* ----------------
   error
   ---------------- */



.fondo figure{
    position: relative;
    overflow: hidden;
}

.fondo{
    object-fit: cover;
    object-position: center center;
    width: 100%;
    height: 100%;
    margin: 0;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

}


.mensaje{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    color: #1B1C1E;
    padding: .5rem;
    line-height: 1rem;
    font-weight: 700;
    
    position: absolute;
    inset: 0;
}

.mensaje a{
    padding: 1.5rem;
    border-radius: 3rem;
    color: #f7f7f7;
    background-color: #ea4a3e;
    font-size: 20px;
    font-weight: 700;
    cursor: pointer;
    text-align: center;

}

.mensaje a:hover{
    color: #ea4a3e;
    background-color: #f7f7f7;
    font-weight: 800;
}



.mensaje h1 {
    font-weight: 'ExtraBold';
    font-size: 6rem;
    text-align: center;
    margin-bottom: 3rem;
    margin-top: 8rem;
    margin-bottom: 7rem;
}

.mensaje h6{
    font-weight: 'Bold';
    margin-block-end: 1rem;
    font-size: 18px;
    text-align: center;
    margin-bottom: -5rem;
    line-height: 1.4em;

}

/* ----------------
   @media
   ---------------- */

@media screen and (min-width: 768px){
    .secciones{
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(min(30rem, 100%), 1fr));
    }

          
    .imagenes {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
        gap: 0.25rem;
    }

    .artistas{
        width: min(75rem, 100%);
    }


    .mensaje{
        margin-top: -10rem;
    }
    
    .mensaje h6{
        font-size: 18px;
    }

    .mensaje h1{
        font-size: 7rem;
        margin-top: 9rem;
        margin-bottom: 7rem;
    }

    .mensaje a{
        font-size: 25px;
    }
}

@media screen and (min-width: 992px){

    .bienvenida{
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: space-evenly;
        margin-bottom: 5rem;
    }

    #ubicacion_datos {
        text-align: left;
    }

    .bienvenida p{
        margin: 4rem 0 0 0rem;
        text-align: left;
    }


    .mensaje{
        margin-top: -10rem;
    }
    
    .mensaje h6{
        font-size: 23px;
    }

    .mensaje h1{
        font-size: 9rem;
        margin-top: 10rem;
    }

    .mensaje a{
        font-size: 30px;
    }

}