@charset "utf-8";

/* TIPOGRAFÍAS -------*/
    @import url('https://fonts.googleapis.com/css2?family=Truculenta:opsz,wght@12..72,500;12..72,600;12..72,700&display=swap');

    @import url('https://fonts.googleapis.com/css2?family=Share:ital,wght@0,400;0,700;1,400;1,700&display=swap');

    @font-face {
        font-family: 'Fuentestickers';
        src: url('../fonts/Fuentestickers.woff');
    }
   
/* ANIMACIONES -------*/



/* UNIVERSAL -------*/
 *{
    margin:0;
    box-sizing: border-box;
    cursor: url('../imagenes/cursor-circular.png'), auto;
}

/* NOMBRES COLORES Y TIPOS --------------*/
:root{
    --amarillo1: #F2A007;
    --amarillo2: #FFD485;
    --rojo1: #D9183B;
    --rojo2: #EE667F;
    --rojotexto: #6C0B1C;
    --verde1: #05A63D;
    --verde2: #53DA82;
    --verdetexto: #003713;
    --blanco: #F8F3E0;

    --titulos: 'Truculenta', sans-serif;
    --texto: 'Share', sans-serif;
    --iconos: 'Fuentestickers';
}

/* BODY --------------*/
body{
    background-color:#F8F3E0;
    color: var(--rojotexto);
    display: grid;
    min-height: 100dvh;
    grid-template-rows: auto 1fr auto;
}

section{
    padding-bottom: 1rem;
}
article{
    padding: 0.3rem 0;
}
.centrado{
    margin-inline: auto;
}

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

/* TITULOS ---------*/
h1, h2, h3, h4{
    font-family: var(--titulos);
    width: 100%;
    text-wrap: balance;
}

h1{
    font-size: 4.6em;
    font-weight: 700;
    line-height: 72px;
    color: var(--rojo1);
    padding-bottom: 1rem;
}
h2{
    font-size: 4em;
    font-weight: 600;
    line-height: 1em;
    color: var(--amarillo1);
    padding: 1rem 0;
}
h3{
    font-size: 3em;
    font-weight: 500;
    color:var(--verde1);
    padding: 1rem 0;
}

h4{
    font-size: 4em;
    font-weight: 600;
    line-height: 1em;
    color: var(--rojo1);
    padding: 1rem 0;
    text-align: center;
}


p{
    font-family: var(--texto);
    font-weight: 400;
    padding: 0.5rem 0;
    font-size: 1.2em;
    text-wrap: pretty;
}

/* IMG ------------*/
img{
    max-width: 100%;
}

/* VINCULOS Y LISTAS---------*/
nav ul li a{
    margin:0.5rem;
}
ul{
    list-style: none;
    padding-inline-start: 0;
}
a{
    text-decoration: none;
    font-family: var(--texto);
}
.botones{
    margin: 0.8rem 0;
  
}

.botones_centrado{
    text-align: center;
}

.btn-general{
    font-family: var(--titulos);
    font-size: 1.8em;
    font-weight: 500;
    color:var(--rojo1);
    background-color: var(--amarillo2);
    box-shadow: -5px 5px var(--amarillo1);
    padding: 0.1rem 3rem;
    border-radius: 6.25em;
    display: flex;
    justify-content: center;
    width: min(100%, 20rem);
}

.btn-form{
    font-family: var(--titulos);
    font-size: 1.8em;
    font-weight: 500;
    color:var(--rojo1);
    background-color: var(--amarillo2);
    box-shadow: -5px 5px var(--amarillo1);
    padding: 0.1rem 3rem;
    border-radius: 6.25em;
    display: flex;
    justify-content: center;
    width: min(100%, 18.3rem);
}

.botonsecundario_general{
    font-size: 1em;
    color: var(--rojotexto);
    background-color:var(--amarillo2);
    padding: 0.1em 2.6em;
    border-radius: 20px;
    box-shadow: -5px 5px var(--amarillo1);
    cursor: pointer;
}

.btn-collage{
    font-family: var(--titulos);
    font-size: 30px;
    font-weight: 500;
    color: var(--blanco);
    background-color: var(--rojo1);
    box-shadow: -5px 5px var(--rojotexto);
    padding: 0.1rem 3rem;
    border-radius: 6.25em;
    justify-content: center;
    width: min(100%, 20rem);
}

.botonsecundario_collage{
    font-size: 1em;
    color:var(--blanco);
    background-color:#D9183B;
    padding: 0.1em 2em;
    border-radius: 20px;
    box-shadow: -5px 5px var(--rojotexto);
    height: 1.5em;
    cursor: pointer;
    position: relative;
}
.botonsecundario_collage:hover{
    background-color: var(--rojo1);
}

.btn-trivia{
    font-family: var(--titulos);
    font-size: 30px;
    font-weight: 500;
    color: var(--blanco);
    background-color: var(--verde1);
    box-shadow: 5px 5px var(--verdetexto);
    padding: 0.1rem 3rem;
    border-radius: 6.25em;
    justify-content: center;
    width: min(100%, 20rem);
}

/*-----------BOTONES PARTE ISA (COLLAGE)-----------*/

.botonsecundario_compartir{
    font-size: 1em;
    color:var(--blanco);
    background-color:#D9183B;
    padding: 0.1em 2em;
    border-radius: 20px;
    box-shadow: -5px 5px var(--rojotexto);
    height: 1.5em;
    cursor: pointer;
}

.caja_btns{
    display: flex;
    flex-wrap: wrap;
    gap:2em;
}


/*----------BOTONES PARTE FER---TRIVIA (VERDE)--------------*/


.botonsecundario_trivia{
    font-size: 1.2em;
    color:var(--verdetexto);
    background-color: var(--verde2);
    padding: 0.1em 2em;
    border-radius: 20px; 
}

.botones_trivia{
    margin: 0.8rem 0;
}

.filtros_trivia{
    display: flex;
    align-items: center;
    gap: 1em;
}

.filtros_trivia a:hover{
    background-color: var(--verde1);
    color: var(--blanco);
}

.botones_trivia_chico{
    display: flex;
    justify-content: center;
    margin: 1.2rem 0;
    width: max-content;
    font-size: .7rem;
    justify-self: center;
}


.btn-trivia_secundario{
    font-family: var(--titulos);
    font-weight: 300;
    font-size: 1.3em;
    color: var(--blanco);
    background-color: var(--verde1);
    box-shadow: -5px 5px var(--verdetexto);
    padding: 0.1rem 3rem;
    border-radius: 100px;
}

.btn-trivia_secundario_1{
    font-family: var(--titulos);
    font-weight: 300;
    font-size: 1.3em;
    color: var(--blanco);
    background-color: var(--verde1);
    box-shadow: -5px 5px var(--verdetexto);
    padding: 0.1rem 3rem;
    border-radius: 100px;
}

/*FIN BOTONES TRIVIA (VERDE)*/




/* HEADER  PRINCIPAL (AMARILLO)-----------*/
header a h2{
    font-size: 1.8em;
    text-transform:uppercase;
    color: var(--verde1);
    padding: 0 0.3rem;
    background-color: var(--blanco);
    border-radius: 0.6em;
    line-height: 30px;
}

header{
    background-color: var(--amarillo1);
    position: sticky;
    top: 0;
    z-index: 10;
}
.headerarriba{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.4rem 0.7rem;
}
#iconouser2 p{
    font-family: 'Fuentestickers';
    font-size: 2em;
    color: var(--rojotexto);
}

#headerabajo{
    background-color: #FFD485;
    padding: 1rem;
    font-size: 1.2em;
}
header nav ul li a{
    font-weight: 700;
    color: var(--rojotexto);
    padding: 0 1rem;
    margin-inline-start: 0;
}

header nav ul li a:hover{
    border-block-end: 0.4em solid var(--rojotexto);
}
.navegador{
    display: flex;
    list-style: none;
    justify-content: space-evenly;
}




/*juego2-COLLAGE HEADER (ROJO)*/


#header_collage{
    background-color: var(--rojo1);
    position: sticky;
    top: 0;
}

.headerarriba_collage{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.4rem 0.7rem;
    background-color: var(--rojo1);
}

#headerabajo_collage{
    background-color: var(--rojo2);
    padding: 1rem;
    font-size: 1.2em;
}

#header_collage nav ul li a{
    font-weight: 700;
    color: var(--rojotexto);
    padding: 0 1rem;
}

#header_collage nav ul li a:hover{
    border-block-end: 0.4em solid var(--rojo1);
}

#iconouser2_collage p{
    font-family: 'Fuentestickers';
    font-size: 1.8em;
    color: var(--rojotexto);
}



/*---------JUEGO1-TRIVIA HEADER (VERDE) ------------*/

#header_trivia{
    background-color: var(--verde1);
    position: sticky;
    top: 0;
}

.headerarriba_trivia{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.4rem 0.7rem;
    background-color: var(--verde1);
}

#headerabajo_trivia{
    background-color: var(--verde2);
    padding: 1rem;
    font-size: 1.2em;
}

#header_trivia nav ul li a{
    font-weight: 700;
    color: var(--verdetexto);
    padding: 0 1rem;
}

#header_trivia nav ul li a:hover{
    border-block-end: 0.4em solid var(--verdetexto);
}

#iconouser2_trivia p{
    font-family: 'Fuentestickers';
    font-size: 2em;
    color: var(--verdetexto);
}





/*----------- MAIN --------------*/
main{
    padding: 1em 1em;
}
.maincentral{
    display: grid;
    align-items: center;
    justify-content: center;
}

/*----------------PAGINA DE INICIO1------------------*/
/* seccion intro inicio1*/
span{
    color: #F2A007;
}
#juegos h2{
    text-align: center;
}

.contenedorinicio2 div{
    align-self: center;
}
.contenedorinicio4 div{
    align-self: center;
}
/* seccion juegos inicio1*/
#juegos{
    margin-top: 2rem;
}

/*----------------PAGINA DE INICIO2------------------*/
/* seccion intro inicio2*/
#gridcompu h3{
    color: var(--rojo1);
}

#puntos_inicio2{
    text-align: center;
}
/* seccion juegos inicio2*/
#noti_inicio2{
    background-color: var(--rojotexto);
    color: var(--blanco);
    text-align: center;
    padding: 1rem;
    border-radius: 1rem 1rem 0 0;
    margin-bottom: -1rem;
    margin-top: 1rem;
}
#noti2_inicio2{
    font-family: var(--texto);
    font-size: 1.2em;
    background-color: var(--verdetexto);
    color: var(--blanco);
    text-align: center;
    padding: 1rem;
    border-radius: 1rem 1rem 0 0;
    margin-top: 1rem;
}




/*----------PAGINA INICIO (COLLAGE)-----------*/

/*GRILLA*/
.contenedor-imagenes {
    margin: .5rem auto;
    overflow: hidden;
    white-space: nowrap;
    cursor: grab;
  }
  
#imagesContainer {
    overflow: hidden;
    white-space: nowrap;
    scroll-behavior: smooth; /* Agrega un desplazamiento suave */
    transition: scroll-left 0.5s ease;
  }
  
  
#imagesContainer img {
    margin: .5rem;
    object-fit: fit;
    width: 20rem;
    height: 15rem;
    cursor: pointer;
  }
  
#imagesContainer img:hover {
    opacity: 70%;
    transition: opacity .5s linear;
  }
    
    

    .oculto2{
        visibility:hidden;
    }
    
    .contenedor-imagenes {
        display:flex;
        overflow: hidden;
        transition: transform 0.5s ease;
    }
    
    .contenedor-imagenes img {
        object-fit: cover;
      }
      
    .anterior,
    .siguiente {
    cursor: pointer;
    }
    
    .carrusel figure {
        margin: 0;
        box-sizing: border-box;
        
      }

    /*puntitos*/
    .circulos{
        display: flex;
        gap: 0.5em;
        padding-top: 0.8rem ;
    }
    .circulo{
        width: 1em;
        height: 1em;
        border-radius: 100em;
        border: solid 0.15em var(--rojotexto);
    }

    .relleno{
        background-color: var(--rojotexto);
    }

    .flechitas{
        font-family:var(--iconos);
        font-size: 1em;
    }
    
    .centro{
        display: flex;
        align-items: baseline;
        justify-content: center;

    }

    .desaparece{
        display: flex;
    }
    
/*imagenes ya seleccionadas (COLLAGE)*/

.seccion2{
    display: flex;
    justify-content: flex-start;
    gap: 1rem;
    
    background-color: #ee667f7a;
    padding: 2rem;
    margin-bottom: 1.5rem;
    border-radius: 2rem;

}

.img_collage {
    transition: 0.3s smooth;
    border: 0.2em solid transparent;
    box-sizing: border-box; 
    position: relative;
  }
  

.img_collage:hover {
    border: #6C0B1C solid 0.2em;
    border-radius: 1em;
}

/*PAGINA EDITAR IMAGENES (COLLAGE)*/
/* sección numeros arriba */

.caja_numeros{
    margin: 0 20em;
}

#numeros{
    display: flex;
    justify-content: space-between;
    font-family: var(--texto);
}
.num_rojo{
    background-color: var(--rojo1);
    padding: 0.7em 1em;
    border-radius: 100em;
    color: var(--blanco);
}
.num_rosa{
    background-color: var(--rojo2);
    padding: 0.7em 1em;
    border-radius: 100em;
}
ul#numeros {
    max-width: 800px;
    margin-inline: auto;
    position: relative;
}

.bolitas::after{
    content:"";
    background-color: var(--rojo1);
    position: absolute;
    inset: 0;
    height: 2px;
    margin: auto;
    z-index: -1;
}

/* pestañas */
article#flex_botones{
    display: flex;
    flex-wrap: wrap-reverse;
    gap: 0.5rem;
    justify-content: space-between;
}
#flex_botones div:first-of-type {
    display: flex;
    gap: 0.8em;
}

#pestaña_collage{
    background-color: var(--rojo1);
    padding: 0.6rem 1.5rem;
    padding-bottom: 2rem;
    border-radius: 1em; 
    color: var(--blanco);
}
div#pestaña2_collage{
    margin-bottom: 3rem;
    background-color: var(--rojo2);
    padding: 0.3rem 2.5rem;
    border-radius: 1em; 
    color: var(--blanco);
}
div#pestaña2_collage:hover{
    background-color: var(--rojo1);
}
#pestaña3_collage{
    margin: 1rem auto;
}

/* img editar */
.marco{
    border: var(--rojo1) solid 1em;
    border-radius: 1em;
    position: relative;
    top: -3.2em;
}

/* herramientas */
.iconos_carpeta{
    font-family: var(--iconos);
    font-size: 2.5em;
}
#texto_h{
    font-family: var(--texto);
    font-size: 1.2em;
}
.iconos_h{
    font-family: var(--iconos);
    font-size: 2.6em;
    background-color: var(--rojo2);
    padding: 0.2rem 0.4rem;
    border-radius: 1em;
    color: var(--rojotexto);
}
li.iconos_h:hover{
    background-color: var(--rojo1);
    color: ba;
}

#container_h{
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    position: relative;
    top: -3.5rem;
}
.container_carpeta{
    text-align: center;
}
#flex_h{
    display: flex;
    flex-direction: column;
    gap: 0.3em;
    border: 0.2rem var(--rojo2) solid;
    background-color: var(--blanco);
    border-radius: 1em;
    padding: 0.8rem;
    position: absolute;
    top: -32.7em;
    right: -0.08em;    
}


div#miElemento{
    display: flex;
    position: relative;
}

div#miElemento2{
    position: relative;
}
#flex_h2{
    max-width: 8em;
    border: 0.2rem var(--rojo2) solid;
    background-color: var(--blanco);
    padding: 0.8rem;
    border-radius: 1em;
    position: absolute;
    top: -23em;
    left: -0.09em;   
}
#flex_h2 figure img{
    border-radius: 0.5em;
}

.position-btn-collage{
    position: relative;
    bottom: 3em; 
}

/*PAGINA HTML IMAGENFINALIZADA (de juego Collage) (/;_;)/ AYUDAME LOCOOO*/
.cajita2{
    display: flex;
    flex-direction: column;
    background-color: var(--amarillo2);
    padding: 1em;
    border-radius:1em;
    align-items: center;
    max-height: 20em;
    max-width: 100%;
    text-align: center;
}

.cajita3{
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    max-width: 60%;
}

.cajita4{
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

section.cuadro-compartir {
    display: flex;
    position: inherit;
    bottom: 4em;
    flex-wrap: wrap;
    justify-content: center;
}

.caja_sosten_editar{
    position: relative;
}

.blanco-btn{
    color: var(--blanco);
}
#marco{
    margin-bottom: -4rem;
}

/*POP UP*/
dialog#para_nombre {
    background-color: var(--amarillo2);
    border: none;
    inset: 0;
    margin:auto;
    width: 25em;
    border-radius: 1em;
}

dialog::backdrop {
    opacity: 40;
  }
  
  dialog.visible::backdrop {
    opacity: 20;
    transition: 1s;
  }
 
  .button-dialog{
    color: var(--rojotexto);
    padding: 1rem ;
    margin: 0.4rem;
    border-radius: 8em;
 }
  .btn-cierre {
    position: absolute;
    left: 82%;
    top: 0px;
}

.form__grupo {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    text-wrap: pretty;
    text-align: center;
}


/*-----------INICIO PAGINA TRIVIA-----------*/
#seccion-jugar{
    padding-bottom: .3rem;
}

.trivia_1 h2{
    display: grid;
    justify-content: center;
    text-align: center;
    padding-top: 0.3rem;
}

#texto-p-trivia{
    font-family: var(--texto);
    font-size: 1.2em;
    padding-bottom: 1rem;
}
#centro-btn-trivia{
    display: flex;
    justify-content: center;
}

.puntajes_trivia{
    background-color: var(--amarillo2);
    color: var(--verdetexto);
    text-align: center;
    font-size: 1.2em;
    border-radius: 40px;
}

.trivia_1{
    display: grid;
    justify-content: center;
}
#finalScore{
    font-family: 'Share';
}

.span_trivia{
    color: var(--verde1);
}

#barra-estado img{
    width:fit-content;
    max-width: 100%;
}

#barra-estado{
    display: flex;
    justify-content: center;
    margin-top: 2em;
}

.temporizador{
    width: 3em;
    position: absolute;
    left: 50%;
}

p.texto{
    padding: 1em 0;
    margin-inline: 2.5rem;
}


h3.trivia_titulos{
    line-height: 1em;
}


/* SECCION JUEGO TRIVIA INICIO */
    /* TABLA ------------*/
    table {
        border-collapse: collapse;
        width: 100%;
        margin: 20px auto;
        border: none;
        font-size: 17px;
    }
    
    th, td {
        padding: 10px;
        text-align: center;
        border: none;
        font-family: 'share';
    }
    
    th {
        background-color: #003713;
        color: #fff;
        font-family: 'share';
        font-weight: 600;
    }
    
    tr:nth-child(even) {
        background-color: #05A63D;
        color: var(--blanco);
        font-weight: 500;
    }
    tr{
        background-color: #53DA82;
        color:var(--verdetexto);
        font-weight: 500;
    }
    
    .a{
        font-weight: bold;
    }


/* ------ TRIVIA JAVASCRIPT-----------*/
.cajapregunta{
    position: relative;
}

  .question {
  font-size: 1.2em;
    font-family: var(--texto);
    font-weight: 500;
    text-align: center;
    background-color: var(--amarillo1);
    padding: 0.2em 1em;
    border-radius: 0 0 1rem 1rem;
    color: var(--verdetexto);
    position: absolute;
    top: -5.4rem;
}
  
  #image {
    align-items: center;
    margin-bottom: 2rem;
    border: #003713 solid .3rem;
    aspect-ratio: 4/3;
    object-fit: cover;
    width: 30em;
    border-radius: 1rem;
  }
  
  .options {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
  }

  button {
    margin: .4rem;
    padding: 1rem;
    border: none;
    cursor: pointer;
    font-family: var(--texto);
    font-weight: 700;
    color: var(--verdetexto);
    background-color: var(--amarillo2);
    border-radius: 100px;
    font-size: 1em;
  }

  button:hover{
    background-color: var(--amarillo1);
    color: #F8F3E0;
  }

  #score{
    font-family: var(--texto);
    font-weight: 500;
    color: var(--verdetexto);
  }

  #score span{
    font-family: var(--texto);
    font: "sahre";
    color: var(--verdetexto);
    font-size: 1.2em;

  }

  #questionCount{
    font-family: var(--texto);
    color: var(--verdetexto)
  }

  /* Agregar estilo para opciones incorrectas */
  button.incorrect {
    background-color: var(--rojo1); /* Color de fondo para opciones incorrectas */
  }
  
  /* Agregar estilo para la respuesta correcta */
  button.correct {
    background-color: var(--verde1); /* Color de fondo para la respuesta correcta */
  }
  
  #contenedor_fotos{
    display: flex;
    justify-content: center;
  }

  .contenedor_puntaje{
    display: flex;
    justify-content: space-between;
    margin: 0.5em 1em;
    align-items: baseline;
  }

  #timerImage {
    max-width: 3em;
    height: auto;
    position: absolute;
    top: 0rem;
}

  #timer{
    display: none;
    }
#result{
    font-family: var(--texto);
    text-align: center;
    font-size: 1.2em;
    color: var(--verde1);
    font-weight: 500;
    padding: 1.5rem; 
 }

 .qwerty {
    position: relative;
}

  /* ------------------SECCION GALERIA-------------------------- */

  #filtrogaleria{
    background-color: var(--blanco);
    display: flex;
    flex-wrap: wrap;
    position: sticky;
    top: 7.2rem;
    width: 100%;
    padding: 0.3rem 0.3rem;
}
#filtrogaleria p{
    padding-right: 0.4rem;
    padding-bottom: 0.6rem;
}
#filtrogaleria ul{
 list-style: none;
 font-family: var(--texto);
 display: flex;
 gap: 0.3rem;
 align-items: center;
 padding: 0;
 flex-wrap: wrap;
}
#filtrogaleria ul li{
    padding-bottom: 1rem;
}
#filtrogaleria ul li a{
    background-color: var(--amarillo2);
    padding: 0.5rem 1rem;
    border-radius: 5em;
    text-align: center;
    color: var(--rojotexto);
}
#filtrogaleria ul li a:hover, #filtrogaleria ul li a:active, #filtrogaleria ul li a.active{
    background-color: var(--amarillo1);
    color: var(--blanco);
}

.contenedorimagen{
    padding-bottom: 2rem;
}
.contenedorimagen img{
    border-radius: 0.5em;
}
.contenedorgaleria{
    display: flex;
    align-items: flex-start;
    justify-content: space-around;
    flex-wrap: wrap;
    padding: 0.4rem 0;
}
.contenedorgaleria figcaption{
    padding: 0.4rem 0rem;
    font-family: var(--texto);/
}
.emojis{
    display: flex;
    gap: 0.3rem;
    max-width: 13em;
}
.fondoemojis{
    background-color: var(--amarillo2);
    display: flex;
    padding: 0.5rem 1rem;
    justify-content: right;
    border-radius: 10em;
    align-items: center;
}

/* ---------------------------SECCION CUENTA-------------------------- */
/* iniciar sesión y crear cuenta*/
#left_terminos{
    text-align: left;
}
input{
    background-color: var(--amarillo2);
    font-family: var(--texto);
    border: none;
    padding: 0.6rem ;
    margin-bottom: 0.6rem;
    border-radius: 20em;
    width: 22.5em;
}
.form_link:hover{
 text-decoration: underline;
}
label{
    font-family: var(--texto);
}
.campo{
    display: grid;
}
label.form_label {
    text-align: left;
    padding: .2em;
}
#texto_sesion{
    color: var(--rojotexto);
}
.radio-label input[type="radio"]:checked + img {
    border: 3px solid var(--rojotexto);
    border-radius: 10em;
  }
  .radio-label input[type="radio"] + img {
    border: 3px solid transparent;
    border-radius: 10em;
  }
  
#flex-avatares{
    display: grid;
    grid-template-columns: 1fr 1 fr;
    align-items: center;
}

/* cuenta (perfil) */
#form-cuenta{
    display: grid;
    justify-items: center;
}
#caja_avatar{
    display: flex;
    justify-content: center;
    gap: 1.5rem;
    margin-bottom: 1rem;
}
.caja2_avatar{
   text-align: center;
}
.nombre_cuenta{
    font-size: 2em;
    color: var(--verde1)
}
#editarperfil{
    display: flex;
    gap: 0.5rem;
    margin-top: -1rem;
    justify-content: center;
    color: var(--rojotexto);
}
#lapiz{
    font-family: var(--iconos)
}
#botones_cuenta{
    display: flex;
    justify-content: center;
    margin-bottom: 2rem;
    flex-wrap: wrap;
    gap: 2rem;
}
.form_cuenta div input{
    width: 100%;
}
#info_cole{
    margin-top: -0.5rem;
    margin-bottom: 1rem;
}
input[type="radio"] {
    display: none;
  }


#flex-avatares{
    display: flex;
    justify-content: space-around;
    padding: 1rem;
}
#flex-cuenta{
    display: flex;
    justify-content: center;
    gap: 3rem;
}

/* -------------FOOTER PRINCIPAL (AMARILLO)---------------*/
footer{
    background-color:#F2A007 ;
    padding: 0.7rem;
    display: flex;
    justify-content: space-between;
}
#contenedorfooter{
    display: flex;
    gap: 0.3em;
}
.iconos{
    font-family: var(--iconos);
    font-size: 2.5em;
}
footer a{
    color: var(--rojotexto);
}
footer ul{
    list-style: none;
    text-decoration: none;
    padding-inline-start:0;
    font-size: 0.8rem;
}
#logomuseo img{
    max-width: 6.25em;
}

/* ----------------JUEGO 2 COLLAGE FOOTER-----------------*/

#footer_collage{
    background-color:var(--rojo1);
    padding: 0.7rem;
    display: flex;
    justify-content: space-between;
}

#footer_collage a{
    color: var(--rojotexto);
}

.iconos_collage{
    font-family: 'Fuentestickers';
    font-size: 35px;
    color: var(--rojotexto)
}


/* ---------------- FOOTER JUEGO-TRIVIA-----------  */

#footer_trivia{
    background-color:var(--verde1);
    padding: 0.7rem;
    display: flex;
    justify-content: space-between;
}

#footer_trivia a{
    color: var(--verdetexto);
}

.iconos_trivia{
    font-family: 'Fuentestickers';
    font-size: 2.2em;
    color: var(--verdetexto)
}
/*FIN FOOTER JUEGO TRIVIA*/

/* ------------------SECCION ERROR404-------------------------- */
#barquito{
    display: grid;
    justify-items: center;
 }
 #barquito img{
    width: 12em;
 }
 #contenedor_error{
    display: grid;
    justify-content: center;
    justify-items: center;
    gap: 2rem;
 }
 #contenedor_error h2{
    display: inline;
    text-align: center;
    padding: 0rem;
 }
 #texto_error{
    display: inline;
    font-family: var(--texto);
    font-size: 1.2em;
    max-width: 14em;
    line-height: 1.2em;
 }
 .conpuntos{
    list-style: disc;
    margin-left: 2rem;
 }
#grid_error{
    align-self: center;
}
.btn_error {
    padding-bottom: 2rem;
}


  /* --------------------------VERS TABLETA ------------*/
@media (min-width:40em) {
    .contenedorinicio2{
        display: grid;
        grid-template-columns: repeat(2, 1fr);
    }
    .contenedorinicop4{
        display: grid;
        grid-template-columns: repeat(2, 1fr);
    }
    /* galeria */
    #gridgaleria{
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }
    .caja_sosten_editar{
        display: flex;
        justify-content: center;
        position: static;
    }
        
    /* Collage */
    #options{
        gap: .8rem;
        display: grid;
        grid-template-columns: repeat(2, 1fr); 
    }
    #flex_h{
        display: flex;
        gap: 0.3em;
        flex-wrap: wrap;
        border: 0.2rem var(--rojo2) solid;
        border-radius: 2em;
        padding: 0.8rem;
        position: static;
    }
   
    .position-btn-collage{
        bottom: 2em; 
    }
    
    #miElemento2{
        top: 18rem;
        left: -6rem;
    } 
   
    #container_h{
        display: flex;
        flex-direction: column;
        top: 3.5rem;
        left:0.5rem;
    }
    .caja_contenedora{
        width: min( 75rem, 100%);
        margin-inline: auto;
    }



    /* TRIVIA */
    .cajapregunta{
        position: static;
    }
    .question{
        position: static;
        border-radius: 8em;
        padding: 1em;
        margin-bottom: 1em;
    }
    #options{
        gap: .8rem;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        text-wrap: pretty;
    }

    .trivia_1{
        padding: 2rem 0;
        max-width: 100%;
    }

    .trivia_1 h2{
        display: inline;
        text-align: center;
        width: 9em;
    }

    #trivia_2{
        display: flex;
        align-items: center;
        justify-content: space-evenly;
    }

    .puntajes_trivia {
        font-size: 1.2em;
        padding: 1rem;
        border-radius: 40px;
    }
    #result {
        padding: 1em;
    }

    .qwerty {
        position: relative;
    }

    table{
        width: 30em;
    }


    /*error404*/
    #grid_error{
        display: flex;
        flex-direction: row;
        justify-content: space-evenly;
        align-items: center;
    }
    #barquito img {
        aspect-ratio: 4/3;
        object-fit: cover;
        width: 25em;
    }
    .btn_error {
        padding-bottom: 2rem;
        width: max-content;
        font-size: 0.7em;
    }
    /* cuenta */
    

    /*PAGINA IMAGEN FINALIZA-COLLAGE*/
    .caja_btns{
        flex-direction: column;
        align-items: center;
        gap: 1em;
    }
}

/* --------------------------VERS COMPUTADORA ------------*/
@media (min-width:60em) {
    #headerabajo ul li a:hover{
        border-block-end: 7px solid var(--amarillo2);
    }
    header nav{
        display: contents;
    }
    header nav ul{
        position: absolute;
        inset: 1.4rem 15rem 1rem 20rem;   
    }
    .contenedorinicio1{
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 2rem;
    }
    .contenedorinicio2{
        display: grid;
        grid-template-columns: repeat(2, 1fr);
    }
    .contenedorinicio4{
        display: grid;
        grid-template-columns: repeat(3, 1fr);
    }
    #gridcompu{
        display: grid;
        justify-items: end;
    }
    #gridcompu h3{
        text-align: right;
    }
    #imageniniciocollage{
        max-width: 60em;
    }
    #stickersinicio img{
        max-width: 80%;
    }
    /* galeria */
    #gridgaleria{
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 1rem;
    }
    #filtrogaleria{
        top: 3.86rem;
    }
    /*collage*/
    /*
      .elegir{
        display: grid;
        grid-template-columns: 0.5fr 1fr 2fr 1fr 0.5fr;
    }
    */
    #botones_cuenta{
        flex-direction: column;
        text-align: center;
    }

    #cajita{
        display: flex;
        flex-direction: column;
    }

    ul#lista_herramientas{
        display: block;
        text-align: center;
        grid-column: 2;
    }


    #barra_horizontal{
        top: 6.1rem;
    }


    /* trivia */
     
    #trivia_grid{
        display: flex;
        gap: 5em;
        align-items: center;
        justify-content: center;
    }
    
    .contenedor_puntaje{
        margin: 0.5em 3em;
        font-size: 1.2em;
    }
    #image{
        margin: 1rem 0;
        width: 60em;
    }

    #options{
        padding: 2em;
        gap: 1rem;
        display: grid;
        width: 50em;
        text-wrap: pretty;
    }

    button{
        padding: 1.3em;
        font-size: 1.2em;
    }

    .trivia_1 h2{
        text-align: center;
    }

    #timerImage {
        max-width: 5em;
        top: 1rem;
    }

    #T1{
        align-self: center;
    }

    #result {
        padding: 0;
    }
    /*error404*/
    #barquito img {
        aspect-ratio: 4/3;
        object-fit: cover;
        width: 45em;
        padding-right: 2em;
    }
    #grid_error {
        display: flex;
        flex-direction: row;
        gap: 3em;
        align-items: center;
        justify-content: center;
    }
    #barquito {
        display: grid;
        justify-items: center;
        padding-right: 6em;
    }
    #contenedor_error {
        display: grid;
        justify-content: center;
        justify-items: center;
        gap: 2rem;
        padding-right: 4rem;
    }

}