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



/* Documento general */

html {
    scroll-behavior: smooth;
    font-family: 'Poppins';
}

body.bodyIndex {
    background-image: url(../imagenes/fondo6.jpg);
    min-height: 100%;
    font-family: 'Poppins';
    color: black;
    background-position: center;
    background-size: 100%;
    backdrop-filter: contrast(0.75);
    text-align: center;
    line-height: 1.125;
}

/* Partes del body */

main {
    margin-inline: auto;
}

header {
    color: #000;
    background-color: #361420;
    padding: 1rem;
    position: sticky;
    top: 0;
    z-index: 1000;
    height: 7rem;
}



footer {
    color: #000;
    width: 100%;
    background-color: #56C9D1;
}

/* Texto */

h1 {
    color: #FEF2CC;
    font-size: 40px;
    text-align: center;
}

h2 {
    color: #2B132B;
    font-size: 2rem;
    font-weight: 900;
    text-align: center;
}

h3 {
    color: #304A59;
    text-align: center;
    font-size: 1rem;
    line-height: 1rem;
    font-weight: bolder;
}

h4 {
    color: #FEF2CC;
    font-size: medium;
    font-weight: 500;
}

h5 {
    color: #FFEAA9;
    font-size: small;
}

p {
    color: #000;
    text-align: left;
    margin-bottom: 1rem;
}

/* Listas */

ul {
    box-sizing: border-box;
    padding: 0;
    list-style: none;
}

li {
    margin: 0;
}

/* Hipervinculos */

a {
    color: #FFEAA9;
    text-decoration: none;
    font-weight: bolder;
    text-align: center;
}

/* Header */


#menu {
    display: flex;
    width: 100%;
    height: auto;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}


#listamenu {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    width: 100%;
    justify-content: flex-end;
}

header nav a {
    color: #FFEAA9;
    display: block;
    text-align: center;
    margin: auto;
}

header nav a:hover,
header nav a:focus-visible {
    color: #FBB400;
    outline: none;
}

.logoheader {
    max-width: 150px;
}

/* Main */

section {
    padding-block-end: 1rem;
    padding: 1rem;
    margin-inline: auto;
}

article {
    margin-block: 0rem;
}

/* Multimedia */

img {
    max-width: 100%;
    min-width: 100px;
    border-radius: 0.5rem;
}

figure {
    margin-block: 0;
    margin-inline: 0;
}

#video img {
    max-width: 100%;
    padding-block: 1rem;
    padding-inline: 1rem;
}

/* Secciones */

#juego {
    display: grid;
    grid-template-areas: 
    "video"
    "botones";
    grid-template-rows: 50% 50%;
    gap: 1rem;
    background-color: #304A59CC;
    height: calc(100dvh - 7rem);
}

#museo {
    max-width: 100%;
    display: block;
    padding: 0;    
}

/* Articulos del juego */

#video {
    display: grid;
    grid-template-rows: auto;
    margin-block: 0;
    grid-area: video;
    align-content: center;
    align-items: center;
}

#presentacion {
    max-width: 400px;
    margin-inline: auto;
}

#botones {
    margin-block: 0;
    grid-area: botones;
    display: grid;
    gap: 1rem;
    padding-block-end: 1rem;
    border-radius: 0.5rem;
    align-content: space-around;
}

/* Independientes del juego*/

.elemento {
    padding-block: 1rem;
    height: auto;
    background-color: #FF7058;
    border-radius: 0.5rem;
    max-width: 400px;
    margin-inline: auto;
}

.elemento:hover,
.elemento:focus-visible {
    background-color: #FFEAA9;
    color: #361420;
    outline: none;
    border-radius: 0.5rem;
}

/* Articulos del museo*/

#presentacionmuseo {
    margin-inline: auto;
    max-width: 100%;
    background-color: #2B132BCC;
    padding: 1rem;
}

#listaextra {
    margin-block: 0;
    list-style: none;
    margin-inline: 0;
    display: block;
}

.listabotones {
    margin-inline: auto;
    margin-bottom: 1rem;
    height: auto;
    width: auto;
    max-width: 90%;
    background-color: #FFEAA9;
    border-radius: 0.5rem;
    text-align: center;
    padding: 1rem;
}

/* Grilla de los botones */

.tituloboton {
    padding-block-end: 1rem;
    font-size: 1.25rem;
    font-weight: bold;
    text-align: center;
}

.textoboton {

    text-align: left;
    margin-bottom: 0;
}

.botonmuseo {
    color: #304A59;
    text-decoration: underline;
    font-weight: bolder;
}

#primeraparte {
    margin-block-end: 1rem;
}

.contenidoboton {
    display: flex;
    align-items: center;
    gap: 1rem;

}

/* Carrusel */

.exposiciones{
    display: flex;
    flex-wrap: nowrap;
    overflow: scroll;
    justify-content: flex-start;
    padding: 10px;
    gap: 1rem;
    overflow-x: auto;
    overflow-y: hidden;
}

.pinturas{
    flex: 1 0 auto;
    width: 300px;
}

#obras{
    background-color: #2B132BCC;
    margin-inline: auto;
    max-width: 100%;
}

/* Información */

#contacto {
    max-width: 100%;
    margin-inline: auto;
    padding: 1rem;
}

#listainfo {
    margin-block: 0;
    text-align: left;
}

#infocontacto {
    text-align: left;
}

.infotitulo {
    padding-block-end: 1rem;
}
  
/* Cambio de dispositivo */

@media (min-width: 640px) {

    #juego {
        padding: 1rem;
        display: flex;
    }

    #listaextra {
        display: flex;
    }

    .tituloboton {
        text-align: center;
    }

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

    .listabotones {
        max-width: 200px;
    }

    #infocontacto {
        text-align: left;
        columns: 2;
    }
    
    #botones {
        margin: auto;
        margin-block: 0;
        align-content: center;
    }

    .botonjuego {
        display: block;
    }

    .elemento {
        min-height: 100px;
        display: grid;
        min-width: 400px;
        align-content: center;
        font-size: 3rem;
    }
    #video {
        min-width: 400px;
    }

    img.logomuseo {
        max-width: 600px;
    }
    #trivia {
        padding: 1rem;
        display: flex;
       
    }


}

@media (min-width: 960px) {

    .listabotones {
        min-width: 250px;
    }
    
    #juego {
        display: flex
    }

    #video {
        min-width: 50%;
    }

    #presentacion {
        max-width: none;
    }

    #trivia {
        display: flex;
    }
}

/* Subpagina Barrio */

body.bodybarrio {
    background-image: url(../imagenes/fondo6.jpg);
    min-height: 100%;
    font-family: 'Poppins';
    color: black;
    background-position: center;
    background-size: 100%;
    backdrop-filter: contrast(0.75);
    text-align: center;
}

#iniciosubpaginas {
    background-color: #2B132BCC;
}

#historia {
    margin-inline: 1rem;
    background-color: #FFEAA9;
    padding: 1rem;
    border-radius: 0.5rem;
}

#barrio {
    margin-inline: 1rem;
    background-color: #FFEAA9;
    padding: 1rem;
    border-radius: 0.5rem;
}

@media (min-width: 40em) {
    #historia {
        display: grid;
        grid-template-areas: 
        "titulo"
        "texto";
        grid-template-rows: 5dvh; 
    }

    #barrio {
        display: grid;
        grid-template-areas: 
        "titulo"
        "texto";
        grid-template-rows: 5dvh; 
    }

    .parrafo {
        columns: 2;
    }

    .subtitulo {
        font-size: 32px;
    }

}

/* Subpagina Biografia */

body.bodybio {
    background-image: url(../imagenes/fondo6.jpg);
    min-height: 100%;
    font-family: 'Poppins';
    color: black;
    background-position: center;
    background-size: 150%;
    backdrop-filter: contrast(0.5);
    text-align: center;
}

#logros {
    margin-inline: 1rem;
    background-color: #FFEAA9;
    padding: 1rem;
    border-radius: 0.5rem;
}

@media (min-width: 40em) {
    #historia {
        display: grid;
        grid-template-areas: 
        "titulo"
        "texto";
    }

    #logros {
        display: grid;
        grid-template-areas: 
        "titulo"
        "texto";
        grid-template-rows: 5dvh; 
    }

    .parrafo {
        columns: 2;
    }

    .subtitulo {
        font-size: 32px;
    }

}

/* Subpagina Museo */

body.bodymuseo {
    background-image: url(../imagenes/fondo6.jpg);
    min-height: 100%;
    font-family: 'Poppins';
    color: black;
    background-position: center;
    background-size: 150%;
    backdrop-filter: contrast(0.5);
    text-align: center;
}

#informacion {
    margin-inline: 1rem;
    background-color: #FFEAA9;
    padding: 1rem;
    border-radius: 0.5rem;
}

.pinturas{
    flex: 1 0 auto;
    width: 300px;
}

#obrasmuseo{
    background-color: #FF7058;
    margin-inline: auto;
    width: 330px;
    height: 300px;
    border-radius: 0.5rem;
}

@media (min-width: 40em) {
    #informacion {
        display: grid;
        grid-template-areas: 
        "titulo"
        "texto";
    }

    .parrafo {
        columns: 2;
    }

    #obrasmuseo{
        background-color: #FF7058;
        margin-inline: 1rem;
        width: auto;
        height: 300px;
        border-radius: 0.5rem;
    }

    .subtitulo {
        font-size: 32px;
    }

}

#trivia {
    background-color: #56C9D1;
    align-self: center;
    
   
}

#trofeo {
    display: flex;
    justify-content: center;
    align-items: center;
}