@import url('https://fonts.googleapis.com/css2?family=Lora:wght@400;600&family=Lato:wght@400;700&display=swap');

:root{
    --cor-primaria: #6B0000;
    --cor-secundaria: #4A3734;
    --cor-terciaria: #e9e2db;
    --cor-background: #F8F4F0CC;
    --cor-texto: #3D3530;

    --fonte-titulo: 'Lora', serif;
    --fonte-corpo: 'Lato', sans-serif;

}

* {
    margin: 0;
    padding: 0;
    scroll-behavior: smooth;
}

body {
    background-color: var(--cor-background);
    color: var(--cor-texto);
    font-family: var(--fonte-corpo);
    font-size: 1.2rem;
    box-sizing: border-box;
}

section {
    padding: 6.25rem 0;
}

.tituloSecao {
    font-family: var(--fonte-titulo);
    color: var(--cor-secundaria);
    text-align: center;
    font-size: 2.8rem;
    margin-bottom: 2rem;
}

.botao {
    background-color: var(--cor-primaria);
    text-decoration: none;
    color: white;
    font-weight: 700;
    padding: 1.25rem 3rem;
    border-radius: 3rem;
    transition: all 0.3s;
}

.botao:hover {
    background-color: #4e0000;
    transform: translateY(-3px);
}

/* H E A D E R */

.cabecalho {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1% 8%;
}

.cabecalho__logo {
    display: flex;
    align-items: center;
    gap: 2rem;
}

.cabecalho__logo img {
    width: 11%;
}

.cabecalho__logo a {
    text-decoration: none;
    color: var(--cor-texto);
    font-family: var(--fonte-titulo);
    font-size: 1.8rem;
    font-weight: 600;
}

.cabecalho__navegacao ul {
    list-style: none;
    display: flex;
    justify-content: space-between;
    gap: 2.5rem;
}

.cabecalho__navegacao a{
    text-decoration: none;
    color: var(--cor-texto);
    font-family: var(--fonte-corpo);
    font-weight: 700;
}

.cabecalho__navegacao a:hover {
    color: var(--cor-primaria);
}

/* M A I N */

/* Principal */

.principal {
    min-height: 50vh;
    background-image: url('./assets/imagem-back.jpeg');
    background-size: cover;
    background-position: center;

    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    flex-direction: column;
    gap: 4rem;

    color: white;
}

.principal h1 {
    font-family: var(--fonte-titulo);
    font-size: 4rem;
    padding: 0% 15%;
}

.principal p {
    font-size: 1.25rem;
    padding: 0% 15%;
}

/* Cardapio */

.secaoCardapio {
    background-color: var(--cor-terciaria);
}

.cardapio__grid {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 2rem;
    padding: 2rem;
}

.cardapio__card {
    background-color: white;
    border-radius: 1rem;
    text-align: center;
    overflow: hidden;
    width: 17.5rem;
    transition: all 0.3s;
}

.cardapio__card:hover {
    transform: translateY(-10px);
}

.cardapio__card img {
    width: 100%;
    height: 13.75rem;
    object-fit: cover;
}

.cardapio__card h3 {
    padding: 1.25rem;
    font-family: var(--fonte-titulo);
    color: var(--cor-secundaria);
}

/* História */

.secaoHistoria {
    display: flex;
    align-items: center;
    gap: 3.75rem;
    padding: 8rem;
}

.secaoHistoria img {
    width: 45%;
    border-radius: 1rem;
}

.secaoHistoria h2 {
    text-align: left;
}

/* Visite */

.secaoVisite {
    background-color: var(--cor-terciaria);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
}

.secaoVisite a {
    margin-top: 2rem;
}

/* F O O T E R */

.rodape {
    padding: 1.5rem;
    text-align: center;
    color: #7B6D64;
    border-top: 1px solid var(--cor-terciaria);
}

/* R E S P O N S I V I D A D E */
@media (max-width: 768px) {
    .cabecalho__navegacao { 
        display: none; 
    }

    main {
        width: auto;
    }
    
    .botao{
        padding: 3% 7%;
    }

    .secaoHistoria {
        flex-direction: column-reverse;
        padding: 5rem;
    }

    .secaoHistoria img{
        width: 100%;
    }

    body {
        font-size: 1rem;
    }

    .principal h1 { 
        font-size: 2.5rem; 
    }

    .tituloSecao {
        font-size: 2rem;
    }

}