@charset "utf-8";

/* general */
/*--Tipografías-- */
@font-face{
    font-family:'Chelsea Market';
    src: url(../font/ChelseaMarket.woff);
}

@font-face{
    font-family: 'Roboto', sans-serif;
    src: url('https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap');
}

/*--Universal-- */
*,
*::after,
*::before{
    box-sizing: border-box;
    margin:0%;
    padding: 0%;
}

/*--Paleta de color y tipografías-- */
:root{
    --naranja:#FF8A00;
    --naranjaoscuro: #F18200;
    --naranjaclaro: #FCF7F3;
    --naranja-perfil: #FFC67E;
    --rojoa: #F33200;
    --violeta: #4C17C5;
    --verde: #009F5C;
    --amarillo: #FFD600;
    --blanco: #FFFFFF;
    --gris: #F0F0F0;
    --sombra: 1px 1px 10px #8080807a;
    --gris-puntaje: #B3B3B3;
    --rosa: #EB856A; 
    --negro: #000000; 
  
    --titulos:'Chelsea Market';
    --textos:'Roboto', sans-serif;
}  

body{
    font-family: var(--textos);
    background-color:var(--naranjaclaro);
    min-height: 100vh;
}

header,
footer{
    background-color: var(--naranja);
    padding: 1em;
}

 ul,
 ol{
    list-style: none;
}

a{
    text-decoration: none;
}

img{
    max-width: 100%;
}

h1{
    font-size: 2.7em;
    color: var(--naranja);
    text-transform:uppercase;
    font-family:var(--titulos);
    text-wrap: balance;
}

h2{
    font-weight: 700;
    font-size: 1.5em;
    color:var(--naranja);
    text-transform:uppercase;
    text-wrap: balance;
}

p{
    font-weight: 400;
    font-size: 1.2em;
    color:var(--naranja);
    padding-top: 8px;
    text-wrap: balance;
}

h3{
    font-weight: 700;
    font-size: 1.2em;
    color:var(--blanco);
    text-transform:uppercase;
    text-wrap: balance;
}

section:nth-of-type(2){
    --tamanio: 20em;
    background-color: var(--blanco);
}

section:nth-of-type(3){
    --tamanio: 15em;
}

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

/* Inicio header */
header{
    position: sticky;
    top: 0;
    z-index: 5;
}

.contenedor{
    width: min( 75rem, 100% );
    margin-inline: auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.contenedor img{
    height: 2.5rem;
}

#logo{
    height: 3rem;
}

.menu ul li a{
    color: var(--blanco);
}

.menu ul{
    display:flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    margin-top: 1rem;
    margin-inline: 0.5rem;
}

.linea:hover{
   border-block-end: 0.2em solid var(--blanco);
   padding-bottom: 0.2rem;
}

.menuvisible ul{
    opacity: 0;
    visibility: hidden;
    position: absolute;
}

/*Inicio footer*/
 .institucionales{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 7rem;
}

footer p{
    color: var(--blanco);
    padding: 1rem;
    text-align: center;
    font-size: 1em;
}

/* INICIO PÁGINA DE INICIO */
/*Bienvenida*/
.bienvenida{
    background-image:url(../imagenes/fondo.png);
    background-size: cover;
    padding-block: 1.5rem;
    padding-inline: 1.5rem;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
}

.dentro h2{
    color:var(--naranja);
    text-transform:uppercase;
    padding-top: 1rem;
}

.dentro a{
    background-color: var(--naranjaoscuro);
    color: var(--blanco);
    font-size: 1.2em;
    display: block;
    padding-block: 0.7rem;
    border-radius: 2rem;
    width: 14rem;
    text-align: center;
    box-shadow: var(--sombra);
    margin-block: 1rem;
}

.dentro a:hover {
    background-color: var(--naranja);
    transition: 0.2s;
}

#quinquela{
    text-align: left;
}

/*Comenzar a jugar*/
.seccion{
    padding-inline: 1.5rem;
    padding-block: 3rem;
}

.cards{
    margin-top: 0.5rem;
    display: grid;
    grid-template-columns: repeat( auto-fit, minmax( min( var(--tamanio), 100%), 1fr));
    gap: 1rem;
}
  
.card{
    container-type: inline-size;
    margin-top: 1rem;
    background-color: var(--rojoa);
    border-radius: 2rem;
    overflow: hidden;
    box-shadow: var(--sombra);
    display: grid;
    grid-template-columns: 40% 60%;
    grid-template-rows: auto 1fr;
}
  
.card > *{
    grid-column: span 2;
  
    @container (width > 22rem){
      grid-column: unset;
      grid-row: 1 / -1;
    }
}
  
.card__img{
    aspect-ratio: 2;
  
    @container (width > 22rem){
      aspect-ratio: unset;
    }
}
  
.card__img img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}
  
.card__textos{
    padding: 2rem;
    color: var(--color-textos);
    flex: 0 0 100%;
    display: grid;
    grid-template-rows: auto 1fr;
  
    @container (width > 22rem){
      flex: 0 0 60%;
    }
}

.destacador{
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.5rem;
    padding-bottom: 1.5rem;
}

.destacador img{
    width: 2.5rem;
}

.destacador h4{
    font-weight: 400;
    font-size: 1.12em;
    color: var(--blanco);
}

.card__textos p{
    color: var(--blanco);
}
  
.card__textos a{
    background-color: var(--gris);
    border-radius: .125em;
    color: var(--rojoa);
    font-size: 1.12em;
    padding-block: 0.6rem;
    border-radius: 2rem;
    width: 60%;
    display: block;
    text-align: center;
    box-shadow: var(--sombra);
    margin-top: 1em;
    margin-bottom: 1em;
}
  
.card__textos a:hover,
.card__textos a:focus-visible{
    background-color: var(--blanco);
    box-shadow: var(--sombra);
}

/*Próximos Eventos*/
.seccione{
    padding-inline: 1.5rem;
    padding-block: 3rem;
}

.seccione .card {
    background-color: var(--verde);
}

.puntos {
    margin-bottom: 1.5rem;
    width: 5rem;
    aspect-ratio: 1;
    border-radius: 50%;
    color: var(--blanco);
    display: grid;
    place-content: center;
    place-items: center;
    line-height: 1;
    border: dashed 7px var(--amarillo);
    font-size: 1.8em;
}

.puntos span {
    font-size: 44%;
}

/*Videos*/
.seccionvideos{
    background-color: var(--blanco);
    padding-inline: 1.5rem;
    padding-block: 3rem;
}

.videosinformativos iframe{
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: 2rem;
    box-shadow: var(--sombra);
}

.videosinformativos{
    padding-top: 2rem;
    margin: auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.5rem;
}
/* FIN PÁGINA DE INICIO */

/* INICIO PÁGINA DE INICIO USUARIO FRECUENTE */
.c{
    padding-top: 1.5rem;
    text-align: center;
    display: flex;
    flex-direction: row;
    gap: 1rem;
}

.puntosfrecuente .material-symbols-outlined{
    width: 5rem;
    aspect-ratio: 1;
    border-radius: 50%; 
    display: grid;
    place-content: center;
    place-items: center;
    border: dashed 7px var(--gris-puntaje);
    border-right-color: var(--amarillo);
    font-size: 2.8em;
    color: var(--amarillo);
}

.puntosfrecuente p{
    font-weight: 700;
}

.material-symbols-outlined{
    color: var(--amarillo);
    font-size: 1.8em;
}

/* INICIO PÁGINA DE JUEGOS */
/*Inicio Juegos*/
.iniciojuego{
    padding-block: 1.5rem;
    padding-inline: 1.5rem;
    background-image:url(../imagenes/fondo.png);
    background-size: cover;
}

.scroll{
    padding-top: 1rem;
    display: flex;
    flex-direction: row;
    gap: 2rem;
    overflow-x: auto;
}

.scroll::-webkit-scrollbar{
    width: 0.06em;
    background-color: var(--naranjaclaro);
}

.primero{
    background-color: var(--rojoa);
    border-radius: 2rem;
    overflow: hidden;
    flex: 0 0 20rem;
}

.parte-textos{
    text-align: center;
    padding-top: 1rem;
    padding-bottom: 0.5rem;
}

.parte-textos a{
    background-color: var(--gris);
    color:var(--rojoa);
    font-size: 1.1em;
    padding-block: 0.7rem;
    border-radius: 3rem;
    width: 70%;
    display: block;
    box-shadow: var(--sombra);
    margin: auto;
    margin-block: 1rem;
}

.parte-textos .btnjugar:hover {
    background-color: var(--blanco);
    transition: 0.2s;
}

/*Inicio Top 3*/
.top{
    padding-inline: 1.5rem;
    padding-block: 3rem;
}

.top p{
    padding-top: 0.5rem;
    padding-bottom: 1rem;
}

.primerospuestos{
    display: grid;
    grid-template-columns: repeat(3, 7rem);
    justify-content: center;
}

.dos{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    height: 11rem;
}

.dos img{
    height: 4.5rem;
}

.dos h3{
    background-color: var(--naranja);
    text-align: center;
    display: block;
    width: 5.5rem;
    padding-block: 0.3rem;
    margin-top: -1rem;
    font-size: 0.9em;
}

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

.uno img{
    height: 6rem;
}

.uno h3{
    background-color: var(--naranja);
    text-align: center;
    display: block;
    width: 6rem;
    padding-block: 0.3rem;
    margin-top: -1rem;
    font-size: 1em;
}

.puntaje{
    padding-top: 0.5rem;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 0.2rem;
}

.puntaje span{
    color: var(--amarillo);
}

.puntaje h4{
    color: var(--naranja);
    font-size: 1.1em;
}

.podio{
    text-align: center;
}

.lista{
    background-color: var(--rosa);
    border-radius: 2rem;
    margin: auto;
    width: fit-content;
    padding-inline: 1.5rem;
}

.lista ul{
    padding-block: 2rem;
    color: var(--blanco);
    font-size: 1.1em;
    display: grid;
    justify-content: center;
}

.lista img{
    height: 3.5rem;
}

.lista .material-symbols-outlined{
    color: var(--amarillo);
    margin-left: auto;
}

.lista ul li {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.5rem;
    padding-block: 0.5rem;
}

.lista .nombre{
    border-bottom: 3px dotted var(--blanco);
    width: 5rem;
    flex-grow: 1;
}

/* INICIO PÁGINA DE CREA TU MUSEO */
.creamuseo a{
    padding-inline: 1.5rem;
    padding-block: 2.5rem 1.5rem;
    display: flex;
    flex-direction: row;
    gap: 0.5rem; 
}

.creamuseo span{
    color: var(--naranja);
    font-size: 1.8em;
}

.jugaran video{
    max-width: 100%;
}

.computadora{
    visibility: hidden;
    width: 0;
}

.instrucciones{
    padding-inline: 1.5rem;
    padding-block: 3rem;
}

.comojugar{
    padding-bottom: 1.5rem;
}

.comojugar h2{
    padding-bottom: 0.5rem;
}

.comojugar a{
    color:var(--naranja);
    font-weight: 700;
    text-decoration: underline;
}

/* INICIO PÁGINA DE ERROR */
.paginaerror{
    background-image:url(../imagenes/fondoerror.png);
    background-size: cover;
    padding-inline: 1.5rem;
    padding-block: 1.5rem;
}

.error{
    text-align: center;
}

.error h2{
    padding-block: 1rem;
}

.error p {
    padding-top: 1rem;
}

.botonerror a{
    background-color: var(--naranjaoscuro);
    color: var(--blanco);
    font-size: 1.2em;
    display: block;
    padding-block: 0.7rem;
    border-radius: 3rem;
    width: 14rem;
    text-align: center;
    box-shadow: var(--sombra);
    margin: auto;
    margin-top: 1.5rem;
    margin-bottom: 2.5rem;
}

.botonerror :hover{
    background-color: var(--naranja);
    transition: 0.2s;
}

/* INICIO ACTIVIDADES */
.dentro .division{
    border-bottom: 3px solid var(--naranja);
    width: 20rem;
    padding-top: 2rem;
}

.secciontres{
    padding-inline: 1.5rem;
    padding-block: 3rem;
}

.secciontres .card{
    background-color: var(--violeta);
    margin-top: 2rem;
}

.secciontres a{
    color: var(--violeta);
}

.artistas{
    padding-inline: 2rem;
    padding-block: 4rem;
}

.galeria{
    padding-top: 2rem;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 2rem;
}

.mes{ 
    position: relative;
    overflow: hidden;
    flex: 1 1 15rem;
}

.mes img{
	width: 100%;
    object-fit:cover;
    object-position:center center;
}

.nenita{
    position: absolute;
    z-index: 4;
    width: 4em;
    top: 1rem;
    left:1rem; 
}

.like{
    position: absolute;
    display: flex;
    flex-direction: row;
    align-content: flex-end;
    bottom: 1em;
    margin-left: 3%;
}

.like span{
    background-color: var(--blanco);
    border-radius: 6rem;
    padding: 0.2em;
    color: var(--violeta);
    margin-inline: 0.1em;
}

/* Capa de transparencia recuadros */
.mes figure::before{
    content: "";
    background: linear-gradient(0deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 60%);
    position: absolute;
    inset: 0;
}

/* COMIENZO ESCULTURA */
.seccionescultura {
    padding-inline: 1.5rem;
    padding-block: 1.5rem;
}

.seccionescultura .card{
    background-color: var(--violeta);
}

.arribas a{
    padding-top: 1rem;
    display: flex;
    flex-direction: row;
    gap: 0.5rem; 
}

.arribas span{
    color: var(--naranja);
    font-size: 1.8em;
}

.seccionescultura li{
    font-size: 1.1em;
    color: var(--blanco);
    list-style: circle;
}

.necesitar {
    padding-top: 1rem;
    padding-left: 1.5rem;
} 

.contenedorpasoapaso{
    padding-inline: 1.5rem;
    padding-block: 3rem;
    background-color: var(--blanco);
}

.opciones{
    display: flex;
    justify-content: center;
    margin-block: 1rem;
}

.flores{
    border: solid 2px var(--naranja);
    background-color: var(--gris);
    font-size: 0.9em;
    display: block;
    padding-block: 0.3rem;
    border-radius: 3rem;
    width: 5rem;
    text-align: center;
    box-shadow: var(--sombra);
    margin-block: 1rem;
    margin: 1rem;
}

.flores a{
    color: var(--naranja);
}

.opciones li:hover{
    background-color: var(--blanco);
}

.arcillacontenedor{
    max-width: 100dvw;
    display: flex;
    overflow-x: auto;
    gap: 2rem;
    padding-right: 1.5rem;
    padding-left: 1.5rem;
}

.arcillacontenedor::-webkit-scrollbar{
    width: 0.06em;
    background-color: var(--blanco);
}

.arcilla{
    background-color: var(--violeta);
    border-radius: 2rem;
    overflow: hidden;
    margin-bottom: 1rem;
    flex-shrink: 0;
    width: 18em;
}

.arcilla img{
    width: 100%;
}

.arcilla .texto{
    padding-inline: 1.2rem;
    padding-block: 1rem;
}

.texto p{
    color: var(--blanco);
}

.texto h4 {
    color: var(--blanco);
    text-align: center;
}

.textt {
    padding-top: 2rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
}

.textt p {
    margin-bottom: 1rem;
}

.boton a{
    background-color: var(--naranjaoscuro);
    color: var(--blanco);
    font-size: 1.2em;
    display: block;
    padding-block: 0.7rem;
    border-radius: 3rem;
    text-align: center;
    box-shadow: var(--sombra);
    justify-content: center;
    width: 20rem;
    margin: auto;
}

.btsubir:hover{
    background-color: var(--naranja);
    transition: 0.2s;
}

.escanear {
    display: grid;
    justify-items: center;
}

.escanear video {
    max-width: 100%;
}

/* INICIO PÁGINA INFORMACIÓN*/
.fondo{
    background-image:url(../imagenes/fondo.png);  
}

.sabias{   
    padding-inline: 1.5rem;
    padding-block: 3rem;
}

.scroll{
    padding-top: 3rem;
    display: flex;
    flex-direction: row;
    gap: 2rem;
    overflow-x: auto;
}

.scroll::-webkit-scrollbar{
    width: 0.06em;
    background-color: var(--naranjaclaro);
}

.curioso{
    background-color:var(--verde);
    border-radius: 2rem;
    overflow: hidden;
    flex: 0 0 20rem;
}

.contenido{
    display: grid;
    text-align: left;
    padding-inline: 2rem;
    padding-top: 1rem;
    padding-bottom: 2rem;
    justify-content: center;
}

.contenido h3{
    font-weight: 700;
    font-size: 1.2em;
    color:white ;
    text-transform:uppercase; 
}

.contenido p{
    color: white;    
}
 
.seccioncuatro{
    padding-inline: 2rem;
    padding-block: 4rem;
}

.seccioncuatro .card{
    background-color: var(--verde);
    margin-top: 2rem;
}

.seccioncuatro a{
    color: var(--verde);
}

.gustoss{
    background-color:var(--blanco);
    padding: 1.5rem;
}

.gustoss img{
    width: 100%;
}

.contenido a{
    background-color: var(--gris);
    color:var(--verde);
    font-size: 1.2em;
    padding-block: 0.6rem;
    border-radius: 3rem;
    width: 70%;
    display: block;
    box-shadow: var(--sombra);
    margin-block: 1rem;
    text-align: center;
}

.contenido .btndatos:hover {
    background-color: var(--blanco);
    transition: 0.2s;
}

.contenidohilos{
    margin: 1rem;
}

.contenidohilos h4 {
    color:var(--blanco)
}

.contenidohilos p{
    color: var(--blanco);
}

.canjeando{
    color: var(--naranja);
}

/* COMIENZO PÁGINA DATOS CURIOSOS*/
.conocer{
    background-image:url(../imagenes/fondo.png);
}

.conocer h1{
    padding-inline: 1.5rem;
    padding-block: 1rem;
}

.masinformacion{
    contain:layout inline-size;
    background-color: var(--verde);
    border-radius: 2rem;
    overflow: hidden;
    display: grid;
    flex-shrink: 0;
    margin: 2rem;
    margin-bottom: 1rem;
}

.imagen_cardm img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.museocontenido{
    margin: 2rem;    
}

.museocontenido p{
    font-size: 1.2em;
    text-wrap: balance;
    color: var(--blanco);
}

.obrasquinque{
    background-color:var(--blanco);
    padding: 1.5rem;
}

.scroller{
    padding-top: 3rem;
    display: flex;
    flex-direction: row;
    gap: 2rem;
    overflow-x: auto;
}

.scroller::-webkit-scrollbar{
    width: 0.06em;
    background-color: var(--naranjaclaro);
}

.obrass{
    margin: 1rem;
}

.obrass p{
    color: var(--blanco);
}

/*Videos*/
.seccionvideoss p{
    font-size: 1.2em;
    color:var(--naranja);
}

.seccionvideoss{
    background-color: var(--blanco);
    padding-inline: 1.5rem;
    padding-block: 3rem;
}

.videosinformativos iframe{
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: 2rem;
    box-shadow: var(--sombra);
}

.videosinformativos{
    padding-top: 2rem;
    margin: auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.5rem;
}

/* COMIENZO INICIAR SESIÓN */
.iniciarsesion{
    display: grid;
    min-height: 100vh;
    grid-template-rows: auto 1fr auto;
}
.seccionform{
    padding-inline: 1.5rem;
    padding-block: 1.5rem;
}

.seccionform h2{
    padding-top: 1rem;
}

.form{
    padding-block: 1.5rem;
    color: var(--naranja);
    display: flex;
    flex-direction: column;
}

.bloque1{
    padding-bottom: 1rem;
}

.bloque1 h4{
    font-size: 1.1em;
    padding-bottom: 0.5rem;
}

.form_input1{
    width: 18rem;
    height: 2.5rem;
    background: var(--blanco);
    border-radius: 2rem;
    padding-left: 1.5rem;
    border-color: var(--naranja);
}

.textitos{
    padding-top: 0.7rem;
    display: flex;
    flex-direction: row;
    gap: 2rem;
}

.textitos a{
    color: var(--naranja);
    font-size: 0.8em;
    font-weight: 700;
    text-decoration: solid 2px var(--naranja);
}

.entrar button{
    text-align: center;
    background-color: var(--naranjaoscuro);
    color: var(--blanco);
    font-size: 1em;
    display: block;
    padding-block: 0.5rem;
    border-radius: 2rem;
    width: 18rem;
    box-shadow: var(--sombra);
    margin-block: 1rem;
}

.entrar button:hover{
    background-color: var(--naranja);
    transition: 0.2s;
}

.entrar p{
    font-size: 0.9em;
}

.entrar a{
    color: var(--naranja);
    border: solid 2px var(--naranja);
    background-color: var(--sombra);
    border-radius: 2rem;
    text-align: center;
    display: block;
    padding-block: 0.2rem;
    width: 18rem;
    box-shadow: var(--sombra);
    margin-block: 0.5rem;
}

/* COMIENZO REGISTRARME */
.entrada .open{
    text-align: center;
    background-color: var(--naranjaoscuro);
    color: var(--blanco);
    font-size: 1em;
    display: block;
    padding-block: 0.5rem;
    border-radius: 2rem;
    width: 18rem;
    box-shadow: var(--sombra);
    margin-block: 1rem;
}

.entrada .open:hover{
    background-color: var(--naranja);
    transition: 0.2s;
} 

.entrada a{
    color: var(--naranja);
    border: solid 2px var(--naranja);
    background-color: var(--sombra);
    border-radius: 2rem;
    text-align: center;
    display: block;
    padding-block: 0.2rem;
    width: 18rem;
    box-shadow: var(--sombra);
    margin-block: 0.5rem;
}

.entrada p{
    font-size: 0.9em;
}

.modal{
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #111111bd;
    display: flex;
    opacity: 0;
    pointer-events: none;
    z-index: 5;
}

.modal--show{
    opacity: 1;
    pointer-events: unset;
}

.modal_container{
    margin: auto;
    width: 100%;
    max-width: 22rem;
    max-height: 30rem;
    border-radius: 2rem;
    background-color: var(--blanco);
    padding-top: 3rem;
    padding-inline: 1rem;
    text-align: center;
}
  
.avatares-eleccion{
    padding-inline: 2rem;
    margin-block: 2rem;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1.3rem;
}

.imagen_avatar img{
    height: 4em;
}

.imagen_avatar{
    display: inline-flex;
    cursor: pointer;
}

.cerrando a{
    text-align: center;
    background-color: var(--naranjaoscuro);
    color: var(--blanco);
    font-size: 1em;
    display: block;
    padding-block: 0.5rem;
    border-radius: 2rem;
    width: 16rem;
    box-shadow: var(--sombra);
    margin-block: 1.5rem;
    margin-inline: auto;
}

.cerrando a:hover{
    background-color: var(--naranja);
    transition: 0.2s;
}

/* COMIENZO MI PERFIL */
.unolara{
    background-image:url(../imagenes/fondo.png);
    background-size: cover;
    padding-inline: 1.5rem;
    padding-block: 3rem 1rem;
    display: grid;
    justify-content: center;
}

.unolara img{
    height: 10rem;
}

.unolara h3{
    background-color: var(--naranja);
    text-align: center;
    display: block;
    width: 8rem;
    padding-block: 0.4rem;
    margin-top: -1rem;
    font-size: 1.3em;
    margin-inline: auto;
}

.puntajelara{
    padding-top: 0.5rem;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 0.2rem;
}

.puntajelara span{
    color: var(--amarillo);
    font-size: 1.7em;
}

.puntajelara h4{
    color: var(--naranja);
    font-size: 1.4em;
}

.larapuntos{
    background-color: var(--blanco);
    padding-inline: 1.5rem;
    padding-block: 3rem;
}

.unioncreando{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 2rem 4rem;
}

.creando h3{
    color: var(--naranja);
    font-size: 1.4em;
    padding-top: 1.5rem;
}

.creando img{
    padding-top: 0.3rem;
}

.creando span{
    font-size: 1.2em;
}

.premio{
    background-color: var(--naranjaclaro);
    padding-inline: 1.5rem;
    padding-block: 3rem 1rem;
}

.titulopremio{
    padding-bottom: 1rem;
}

.imagenestalleres{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(8em, 1fr));
    gap: 1em;
}

.premio figure{
    border-radius: 1rem;
    position: relative;
    overflow: hidden;
}
  
.premio img{
    object-fit: cover;
    object-position: left center;
    width: 100%;
    height: 100%;
    display: block;
}
  
.premio figcaption{
    background-color: var(--naranja);
    color: var(--blanco);
    padding-left: 1rem;
    line-height: 2em;
    text-transform: uppercase;
    font-weight: 700;
    position: absolute;
    inset: 0;
    transform: translateY(calc(100% - 2em));
}

.premio figcaption span{
    display: block;
    font-size: 1.1em;
    color: var(--blanco);
    margin-block-start: 0.10em;
    text-transform: none
}
  
.premio figure:hover figcaption{
    background-color: hsl(32, 100%, 50%, .6);
    transition: all .3s ease;
    transform: translateY(0);
    display: grid;
    text-align: center;
    place-items: center;
    place-content: center;
    padding-inline: 2em;
}
  
.premio figcaption a::after{
    content: " →";
}
  
.cerrar a:hover {
    background-color: var(--naranja);
    transition: 0.2s;
}

.cerrar a {
    background-color: var(--naranjaoscuro);
    color: var(--blanco);
    display: block;
    padding-block: 0.7rem;
    border-radius: 3rem;
    width: 20rem;
    text-align: center;
    margin: auto;
    margin-block: 4rem 2rem;
}

.formtext {
    text-align: center;
    margin-top: 1rem;
}

.formtitulo, .formcuenta, .formparrafo {
    padding-top: 0.7rem;
}
/* FIN MI PERFIL */

/* Formato tablet */
@media (min-width: 768px) {
    h1{
        font-size: 3.33m;
    }
    .bienvenida h1 {
        width: 30rem;
    } 

    .primerospuestos{
        display: grid;
        grid-template-columns: repeat(3, 11rem);
    }

    .dos{
        height: 16rem;
    }
    
    .dos img{
        height: 7rem;
    }
    
    .dos h3{
        width: 7rem;
        font-size: 1.15em;
    }
    
    .uno img{
        height: 8.5rem;
    }
    
    .uno h3{
        width: 9rem;
        font-size: 1.4em;
    }

    .puntaje h4{
        font-size: 1.3em;
    }

    .podio{
        display: block;
        margin-inline: auto;
    }
    
    .lista{
        padding-inline: 5rem;
    }

    .celular{
        display: none;
    }
    
    .computadora{
        visibility: visible;
        width: 100%;
    }

    .contenedorevento {
        display: grid;
        grid-template-columns: 50% 50%;
        gap: 0.8rem;
    }

    .mis {
        padding: 1em;
    }

    .imagenestalleres {
        width: 70%;
    } 

    .esculturas h3{
        font-size: 1.5em;
    }

    .necesitar {
        font-size: 1.2em;
    }
    
    .arcillacontenedor{
        justify-content: center;
    }

    .arcilla{
        width: 26em;
    }

    .masinformacion{
        container-type: inline-size;
        background-color: var(--verde);
        border-radius: 2rem;
        overflow: hidden;
        display: grid;
        grid-template-columns: 40% 60%;
        grid-template-rows: auto 1fr;
        margin:1.5rem;
    }
    
    .museocontenido {
        padding-block: 2rem;
    }

    .museocontenido h3{
        font-size: 1.5em;
    }

    .museocontenido p{
        font-size: 1.5em;
    }

    .imagen_cardm img{
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    
    .museocontenido{
        margin: 2rem;    
    }

    .scroller{
        justify-content: center;
    }

    .seccionform{
        display: grid;
        justify-content: center;
    }
}

/* Formato computadora */
@media (min-width: 992px){
    .contenedor{
        height: 5rem;
    }

    .menu {
        display: none;
    }

    .menuvisible {
        position: relative;
    }
    
    .menuvisible ul{
        visibility: visible;
        opacity: 100%;
        position: absolute;
        inset: -1rem 10rem 35rem 10rem;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
    }

    .one {
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding-left: 3rem;
        padding-bottom: 2rem;
    }

    .one img {
        height: 2rem;
    }

    .linea {
        text-align: center;
        color: var(--blanco);
        padding-top: 0.3rem;
    }

    .fotor img {
        border-radius: 3rem 0rem 0 3rem;
    }
}
/* Fin Formato computadora */