/*Estilos del Body*/
body{
    background-color: var(--blanco);
}
@media (min-width: 1768px) {
    body{
        min-height: 70vh;
    }
}
/*Estilos del Main Areas*/
h1{
    font-family: 'Zodiak';
    color: var(--dorado1) !important;
}
.mainareas{
    width: 100%;
}
@media (min-width: 768px) {
    .containerbotones{
        width: 100% !important;
    }
}
.color1{background-color: var(--guinda1);}
.color2{background-color: var(--guinda2);}
.color3{background-color: var(--verde1);}
.color4{background-color: var(--verde2);}
.color5{background-color: var(--dorado2);}
.color6{background-color: var(--dorado1);}
.texto1{color: var(--dorado2);}
.texto2{color: var(--blanco);}
.mainareas img{
    width: 40%;
}
.box{
    position: relative;
    aspect-ratio: 1 / 1;
    max-width: 100%;
    cursor: pointer;
}
.box a{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
}
.box p{
    font-family: 'OpenSans';
    text-align: center;
    transition: all ease-in 0.2s;
}
@media (min-width: 1024px) {
    .box p{
        font-size: 30px;
    }
}