/* Paleta
#E7D4B4 beige
#553A26 marron
#92B5C3 celeste
#F6F6F6 tiza */

 /* Tipografia  */

@import url('https://fonts.googleapis.com/css2?family=Great+Vibes&family=Merriweather:ital,opsz,wght@0,18..144,300..900;1,18..144,300..900&family=Nunito+Sans:ital,opsz,wght@0,6..12,200..1000;1,6..12,200..1000&family=Spectral+SC:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;1,200;1,300;1,400;1,500;1,600;1,700;1,800&display=swap');

 /* font-family: "Spectral SC", serif; Nav */
 /* font-family: "Great Vibes", cursive; Titulo */ 
 /* font-family: "Nunito Sans", sans-serif;*/
 /* font-family: "Merriweather", serif; */

/* Estilos generales */

main{
    background-image: url(../archivos/fondo90.png);
}

p{
    font-family: "Merriweather", serif;
    line-height: 0.5;
}
/* Estilo Header--------------------------------------*/

.encabezado {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: baseline;
    background-color: #f7e6d3;
    height: auto;
}
h1{
    color: #553A26;
    font-size: 8rem;
    font-family: "Great Vibes", cursive;
    margin: 0;
}
h2{
    font-size: 3.5rem;
    color: #553A26;
    font-family: "Merriweather", serif;
    text-align: center;
    margin: 0;
}
.logo{
    width: 160px;
    height: 160px;
}

nav ul{
    list-style: none;
    background-color: #75d1f555;
    display: flex;
    justify-content: space-evenly;
    margin-top: 10px;
    position: sticky;
}

nav a{
    font-size: 1.2rem;
    color: #553A26;
    text-decoration: none;
    font-family: "Spectral SC", serif;
}

/* Estilo main --------------*/
/* Index ----*/

#sobre_nosotros{
    display: grid;
    grid-template-columns: 30% 40% 30%;
    grid-template-rows: 20% 20% 15% 25%;
    grid-template-areas:
    "titulo_seccion titulo_seccion titulo_seccion"
    "panaderia presentacion presentacion"
    "panaderia enumeracion enumeracion"
    "despedida despedida manga";
    font-size: 1.5rem;
    justify-content: space-between;
    align-items: center;
    margin: 50px 50px 0px 50px;
}
.titulo_seccion {
    grid-area: titulo_seccion;
    justify-self: start;
}
.panaderia{
    width: 100%;
    grid-area: panaderia;
}
.presentacion{
    grid-area: presentacion;
}
.enumeracion{
    grid-area: enumeracion;
}
.manga{
    grid-area: manga;
    width: 100%;
}
.despedida{
    grid-area: despedida;
    font-family: "Great Vibes", cursive;
    font-size: 230%;
}
#sobre_nosotros p{
    line-height: 1;
}

/* Productos ----*/

.art_tortas{
    display: grid;
    grid-template-columns: 30% 50% 20%;
    grid-template-rows: 10% 60% 20%;
    grid-template-areas:
    "torta titulo_torta titulo_torta"
    "torta texto_torta texto_torta"
    "torta texto_cierre precio";
    font-size: 1.5rem;
    justify-content: space-between;
    align-items: center;
    border: 2px solid black;
    margin: 10px 10px 10px 10px;
}
.titulo_torta{
    grid-area: titulo_torta;
    font-size: 2.5rem;
    text-align: center;
    padding-top: 5%;
}
.texto_torta{
    grid-area: texto_torta;
    line-height: 1.5;
}
.texto_cierre{
    grid-area: texto_cierre;
}
.precio{
    grid-area: precio;
    font-size: 5rem;
}
h3{
    font-family: "Spectral SC", serif;
    font-weight: 800;
    font-style: normal;
    font-size: 2.2rem;
    text-align: center;
}
h4{
    font-family: "Spectral SC", serif;
    font-size: 4rem;
    margin-left:100px;
}
h5{
    font-family: "Spectral SC", serif;
    font-weight: 600;
    font-style: italic;
    text-decoration: underline;
    font-size: 1.3rem;
}


.torta{
    width: 100%;
    grid-area: torta;
    padding: 5%;
}


/* Ubicaciones ----*/
.formulario{
    background-color:#E7D4B4 ;
    font-family: "Spectral SC", serif;
    font-weight: 600;
    font-style: italic;
    font-size: 1rem;
    padding: 50px;
}
.mapa {
    margin: 0px 0px 40px 200px;
}

/* Estilo footer */
footer{
    background-color:#553A26 ;
    height: 100%;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    height: auto;
    padding-left: 50px;
}

footer p{
    color:#F6F6F6 ;
    line-height: 1;
}

.facebook{
    width: 50px;
    height: auto;
    margin: 0px 10px 0px 10px;
}
.instagram{
    width: 50px;
    height: auto;
    margin: 0px 10px 0px 10px;
}
.mail{
    width: 50px;
    height: auto;
    margin: 0px 10px 0px 10px;
}
.wpp{
    width: 50px;
    height: auto;
    margin: 0px 10px 0px 10px;
}

/* Responsive */
/* Mobile */
@media (max-width: 480px){
    /* header */
    .encabezado{
        align-items: center;
    }
    h1{
        font-size: 4rem;
    }
    .logo{
        width: 100px;
        height: auto;
    }
    h2{
        font-size: 2rem;
    }
    nav ul{
        padding: 0%;
    }

    /* Nosotros */
    #sobre_nosotros{
        grid-template-areas:
        "titulo_seccion"
        "panaderia"
        "presentacion"
        "enumeracion"
        "manga"
        "despedida";
        grid-template-columns: 1fr;
        grid-template-rows: 100px 200px 120px 150px 150px 160px;
        font-size: 1rem;
        margin: 20px 20px 0px 30px;
    }
    .panaderia{
        width: 80%;
    }
    .manga{
        width: 90%;
    }
    .despedida{
        font-size: 150%;
    }
    h4{
        margin-left: 10px;
    }

    /* Productos */
    .art_tortas{
        grid-template-areas:
        "titulo_torta"
        "torta"
        "texto_torta"
        "precio";
        grid-template-columns: 1fr;
        grid-template-rows: 50px 220px 150px 80px;
        font-size: 1rem;
        padding: 10px;
        justify-items: center;
    }
    .texto_cierre{
        display: none;
    }
    .torta{
        width: 70%;
    }

    /* Ubicaciones */
    .mapa{
        margin: 0px;
    }

    /* Footer */
    footer p{
        display: none;
    }
    footer{
        justify-content: space-around;
        padding: 0%
    };
}