:root {
    --colortitulos: #f5a729;
    --colorfooter: #f7f7f7;
    --blanco: #ffffff;
    --negro: #000000;
    --margenesnormales: 8px;
}

*{
    box-sizing: border-box;
}

html{
    font-family: Arial, Helvetica, sans-serif;
}

body {
    background-color: var(--blanco);
    margin: 0px;
    padding: 0px;
}

header nav ul {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    gap: var(--margenesnormales);
    text-align: center;
    justify-items: center;
    align-items: center;
    list-style: none;
    padding: 0px;
}

#idioma{
    color: var(--colortitulos);
}
header nav ul li a {
    text-decoration: none;
    color: var(--negro);
    font-size: 1.5em;
}

header nav ul li a:hover {
    color: var(--colortitulos);
}

main {
    width: 60%;
    display: block;
    margin: auto;
}

h2 {
    font-size: 2em;
    color: white;
    background-color: var(--colortitulos);
    margin: 0px;
    margin-top: 40px;
    margin-bottom: 20px;
    padding: var(--margenesnormales);
}

.lista_maxis {
    display: grid;
    grid-template-columns: 100%;
    padding: 0px;
    list-style: none;
    gap: var(--margenesnormales);
}

.maxi {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 3fr 1fr;
    grid-template-areas: "foto titulo"
        "foto descripcion"
        "foto botoncito";
    border: 2px solid rgba(206, 206, 206, 0.575);
}

.maxi h3 {
    font-size: 2em;
    padding: var(--margenesnormales);
    margin: 0px;
    grid-area: titulo;
}

.maxi p {
    padding: var(--margenesnormales);
    text-align: justify;
    grid-area: descripcion;
}

.maxi div {
    grid-area: botoncito;
    text-align: right;
}

.maxi img {
    object-fit: cover;
    max-width: 100%;
    grid-area: foto;
}

.maxi:hover {
    -webkit-box-shadow: 0px 0px 5px 5px rgba(0, 0, 0, 0.25);
    -moz-box-shadow: 0px 0px 5px 5px rgba(0, 0, 0, 0.25);
    box-shadow: 0px 0px 5px 5px rgba(0, 0, 0, 0.25);
}

.boton {
    margin: var(--margenesnormales);
    background-color: var(--colortitulos);
    color: var(--blanco);
    border: none;
}

.boton:hover {
    background-color: var(--blanco);
    color: var(--colortitulos);
    border: 2px solid var(--colortitulos);
}

.introduccion{
    text-align: justify;
    background-color: var(--colorfooter);
    margin: 0px;
    padding: 20px;
    font-size: 1.2em;
    margin-bottom: 20px;
}

.lista_minis {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    padding: 0px;
    margin: 0px;
    list-style: none;
    gap: var(--margenesnormales);
}

.mini {
    border: 2px solid rgba(206, 206, 206, 0.575);
}

.mini h3 {
    padding: var(--margenesnormales);
}

.mini p {
    padding: var(--margenesnormales);
    text-align: justify;
}

.mini ul {
    margin: 0px;
    padding: 0px;
    list-style: none;
    display: grid;
}

.mini img {
    width: 100%;
}

.mini:hover {
    -webkit-box-shadow: 0px 0px 5px 5px rgba(0, 0, 0, 0.25);
    -moz-box-shadow: 0px 0px 5px 5px rgba(0, 0, 0, 0.25);
    box-shadow: 0px 0px 5px 5px rgba(0, 0, 0, 0.25);
}

.mini div {
    text-align: right;
}

.boton_mas {
    text-align: center;
}

.boton2 {
    margin: var(--margenesnormales);
    background-color: var(--blanco);
    color: var(--colortitulos);
    border: none;
    border: 2px solid var(--colortitulos);
    padding: var(--margenesnormales);
}

.boton2:hover {
    background-color: var(--colortitulos);
    color: var(--blanco);
    border: 2px solid var(--colortitulos);
}

footer {
    background-color: var(--colorfooter);
    margin: 0px;
    padding: 20px;
    margin-top: 40px;
    font-size: 0.8em;
}

footer h4{
    margin: 0px;
    padding-bottom: var(--margenesnormales);
}
footer nav {
    display: grid;
    grid-template-columns: 1fr 4fr;
    grid-template-areas: "logo navegador navegador navegador navegador"
        "logo redes redes redes redes";
    gap: var(--margenesnormales);
    padding: var(--margenesnormales);
    width: 60%;
    align-items: center;
    margin: auto;
}

footer ul {
    list-style: none;
    margin: 0px;
    padding: 0px;
}

#logo_footer {
    grid-area: logo;
}

#navegador_footer {
    grid-area: navegador;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    border-bottom: 1px solid var(--negro);
    gap: var(--margenesnormales);
    padding: var(--margenesnormales);
}

#navegador_footer a {
    text-decoration: none;
    color: var(--negro);
}

#navegador_footer a:hover {
    color: var(--colortitulos);
}

#redes_footer {
    grid-area: redes;
    padding: var(--margenesnormales);
}

#redes_footer ul {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
}

#redes_footer a {
    text-decoration: none;
    color: var(--negro);
}

#redes_footer a:hover {
    color: var(--colortitulos);
}