/* ==========================================================
   VILLA QUATTRO - ESTILOS

   ÍNDICE
   1. Cores e variáveis        (mude as cores do site aqui)
   2. Base
   3. Fotos                    (como as imagens se comportam)
   4. Menu
   5. Hero
   6. Botão
   7. Sobre
   8. Cardápio
   9. Premium
   10. Acompanhamentos
   11. Contato
   12. Rodapé
   13. Responsivo (tablet e celular)

   📷 As IMAGENS não são trocadas aqui — são trocadas no index.html
      (procure por "TROQUE AQUI"). Aqui só ajustamos como elas aparecem.
========================================================== */


/* ==========================================================
   1. CORES E VARIÁVEIS
========================================================== */

:root {
    /* cores */
    --fundo:          #11100e;
    --fundo-claro:    #151411;
    --fundo-premium:  #181612;
    --fundo-rodape:   #0d0c0a;
    --dourado:        #d8b06c;
    --texto:          #f4eee5;
    --texto-suave:    #bcb5aa;
    --texto-apagado:  #a9a198;

    /* bordas */
    --borda-dourada:  rgba(216, 176, 108, 0.2);
    --borda-suave:    rgba(255, 255, 255, 0.07);

    /* fontes */
    --fonte-titulo: 'Cormorant Garamond', serif;
    --fonte-texto:  'Montserrat', sans-serif;

    /* medidas */
    --altura-menu: 90px;
    --altura-topo: var(--altura-menu); /* menu + abas (no celular) */
    --margem-lateral: 8%;
}


/* ==========================================================
   2. BASE
========================================================== */

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

html {
    scroll-behavior: smooth;
    scroll-padding-top: var(--altura-topo); /* o menu fixo não cobre os títulos */
}

body {
    background: var(--fundo);
    color: var(--texto);
    font-family: var(--fonte-texto);
    -webkit-font-smoothing: antialiased;
}

a {
    text-decoration: none;
    color: inherit;
}

img {
    display: block;
    max-width: 100%;
}

section {
    padding: 100px var(--margem-lateral);
}

/* Títulos de seção (repetem em várias partes do site) */
.section-label,
.small-title {
    color: var(--dourado);
    font-size: 12px;
    letter-spacing: 4px;
    text-transform: uppercase;
    margin-bottom: 20px;
}

.sobre h2,
.section-header h2,
.premium h2,
.extras h2,
.contato h2 {
    font-family: var(--fonte-titulo);
    font-size: clamp(45px, 5vw, 70px);
    line-height: 1;
    font-weight: 500;
    margin-bottom: 30px;
}

.hero h1 span,
h2 span {
    color: var(--dourado);
}


/* ==========================================================
   3. FOTOS
   Toda foto do site usa o mesmo molde:

   <div class="foto" data-caminho="img/exemplo.jpg">
       <img src="img/exemplo.jpg" alt="descrição">
   </div>

   - A imagem sempre preenche o quadro sem distorcer (object-fit: cover).
   - Se o arquivo não existe, o quadro fica vazio e (no modo-edicao)
     mostra o caminho onde a foto deve ser colocada.
========================================================== */

.foto {
    position: relative;
    overflow: hidden;
    background: #1a1814;
}

.foto img {
    width: 100%;
    height: 100%;
    object-fit: cover;

    /* Para enquadrar melhor uma foto específica, mude aqui ou
       use style="object-position: center top" na própria <img> */
    object-position: center;
}

/* Aviso de foto faltando — só aparece com class="modo-edicao" no <body> */
.foto.sem-foto {
    border: 1px dashed rgba(216, 176, 108, 0.4);
}

.modo-edicao .foto.sem-foto::before {
    content: "📷 Coloque a foto aqui:\A" attr(data-caminho);
    white-space: pre-line;

    position: absolute;
    inset: 0;
    z-index: 2;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 15px;
    text-align: center;

    color: var(--dourado);
    font-size: 12px;
    line-height: 1.8;
    letter-spacing: 1px;
}


/* ==========================================================
   4. MENU
========================================================== */

.header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: var(--altura-menu);

    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 0 var(--margem-lateral);

    background: rgba(17, 16, 14, 0.92);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(216, 176, 108, 0.15);

    z-index: 1000;
}

/* 📷 LOGO do menu — para aumentar/diminuir, mude a height */
.logo img {
    height: 72px;
    width: auto;
}

.menu {
    display: flex;
    gap: 26px;
}

.menu a {
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: color 0.3s;
}

.menu a.ativo,
.menu a:hover {
    color: var(--dourado);
}

/* botão "hambúrguer" — só aparece no celular */
.menu-toggle {
    display: none;
    flex-direction: column;
    gap: 6px;

    padding: 8px;
    background: none;
    border: 0;
    cursor: pointer;
}

.menu-toggle span {
    width: 26px;
    height: 2px;
    background: var(--dourado);
    transition: 0.3s;
}

.menu-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.menu-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }


/* ==========================================================
   5. HERO (topo)
   📷 Foto: img/hero.jpg  (trocada no index.html)
========================================================== */

.hero {
    position: relative;
    display: flex;
    align-items: center;
    overflow: hidden;

    /* sem altura de tela cheia: a seção BEM-VINDO vem logo em seguida */
    padding: calc(var(--altura-topo) + 50px) var(--margem-lateral) 70px;
}

/* a foto ocupa a metade direita */
.hero-foto {
    position: absolute;
    top: 0;
    right: 0;
    width: 55%;
    height: 100%;
}

/* degradê escuro que "funde" a foto com o fundo */
.hero-foto::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(
        90deg,
        var(--fundo) 0%,
        rgba(17, 16, 14, 0.55) 40%,
        rgba(17, 16, 14, 0.1) 100%
    );
}

.hero-content {
    position: relative;
    z-index: 2;
    max-width: 700px;
}

/* 📷 LOGO do topo — para aumentar/diminuir, mude a height */
.hero-logo {
    height: 130px;
    width: auto;
    margin-bottom: 30px;
}

.hero h1 {
    font-family: var(--fonte-titulo);
    font-size: clamp(55px, 7vw, 100px);
    line-height: 0.95;
    font-weight: 500;
    margin-bottom: 30px;
}


/* ==========================================================
   6. BOTÃO
========================================================== */

.button {
    display: inline-block;
    padding: 16px 30px;

    border: 1px solid var(--dourado);
    color: var(--dourado);

    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: 2px;

    transition: 0.3s;
}

.button:hover {
    background: var(--dourado);
    color: var(--fundo);
}


/* ==========================================================
   7. SOBRE
   📷 Foto: img/sobre.jpg  (trocada no index.html)
========================================================== */

.sobre {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center;
    background: var(--fundo-claro);
}

.sobre-foto {
    height: 600px;
    border: 1px solid rgba(216, 176, 108, 0.3);
}

.sobre-content {
    max-width: 550px;
}

.sobre p:not(.section-label) {
    color: var(--texto-suave);
    line-height: 1.8;
    margin-bottom: 20px;
}


/* ==========================================================
   8. CARDÁPIO
========================================================== */

.section-header {
    text-align: center;
    max-width: 700px;
    margin: 0 auto 70px;
}

.section-header > p:last-child {
    color: var(--texto-apagado);
    line-height: 1.8;
}

.menu-item {
    padding: 18px 0;
    border-bottom: 1px solid var(--borda-suave);
}

.menu-item h4 {
    font-family: var(--fonte-titulo);
    font-size: 23px;
    font-weight: 500;
}

.menu-item p {
    margin-top: 5px;
    color: #898279;
    font-size: 12px;
    line-height: 1.5;
}


/* ==========================================================
   9. PREMIUM
   📷 Fotos: img/premium/*.jpg  (trocadas no index.html)
========================================================== */

.premium {
    background: var(--fundo-premium);
    text-align: center;
}

.premium-content {
    max-width: 700px;
    margin: 0 auto 70px;
}

.premium-content p:last-child {
    color: var(--texto-apagado);
    line-height: 1.8;
}

.premium-grid {
    max-width: 1100px;
    margin: auto;

    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 15px;
}

.premium-card {
    position: relative;
    overflow: hidden;

    min-height: 260px;
    aspect-ratio: 1 / 1;

    display: flex;
    flex-direction: column;
    justify-content: flex-end;

    text-align: left;

    border: 1px solid var(--borda-dourada);
    transition: transform 0.4s, border-color 0.4s;
}

.premium-card:hover {
    transform: translateY(-8px);
    border-color: var(--dourado);
}

/* a foto cobre o card inteiro, atrás do texto */
.premium-card .foto {
    position: absolute;
    inset: 0;
}

.premium-card .foto img {
    transition: transform 0.6s;
}

.premium-card:hover .foto img {
    transform: scale(1.06);
}

/* degradê para o texto continuar legível sobre qualquer foto */
.premium-card::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(
        to top,
        rgba(17, 16, 14, 0.92) 0%,
        rgba(17, 16, 14, 0.5) 45%,
        rgba(17, 16, 14, 0) 100%
    );
}

.premium-texto {
    position: relative;
    z-index: 2;
    padding: 25px;
}

.premium-card h3 {
    font-family: var(--fonte-titulo);
    font-size: 27px;
    line-height: 1.1;
    color: var(--texto);
}

.premium-card p {
    color: #b3aa9d;
    font-size: 11px;
    margin-top: 6px;
}


/* ==========================================================
   10. ACOMPANHAMENTOS E BEBIDAS
========================================================== */

.extras-grid {
    max-width: 900px;
    margin: auto;

    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
}

.extra-box {
    padding: 45px;
    border: 1px solid var(--borda-dourada);
}

.extra-box h3 {
    font-family: var(--fonte-titulo);
    font-size: 32px;
    color: var(--dourado);
    margin-bottom: 25px;
}

.extra-box p {
    color: #aaa298;
    font-size: 14px;
    padding: 10px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}


/* ==========================================================
   11. CONTATO
========================================================== */

.contato {
    min-height: 600px;

    display: flex;
    align-items: center;
    justify-content: center;

    text-align: center;
    background: var(--fundo-premium);
}

.contato-content {
    max-width: 700px;
}

.contato h2 {
    font-size: clamp(50px, 6vw, 80px);
}

.contato p:not(.section-label) {
    color: #aaa298;
    line-height: 1.8;
    margin-bottom: 35px;
}


/* ==========================================================
   12. RODAPÉ
========================================================== */

footer {
    padding: 60px var(--margem-lateral) 30px;
    text-align: center;
    background: var(--fundo-rodape);
    color: #777168;
}

footer a {
    transition: color 0.3s;
}

footer a:hover {
    color: var(--dourado);
}

/* 📷 LOGO do rodapé */
.footer-logo {
    height: 110px;
    width: auto;
    margin: 0 auto 20px;
}

footer p {
    font-size: 12px;
    margin: 8px 0;
}

.copyright {
    margin-top: 40px;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    font-size: 11px;
}


/* ==========================================================
   13. RESPONSIVO
========================================================== */

/* ---------- Tablet ---------- */
@media (max-width: 900px) {

    .menu {
        gap: 15px;
    }

    .menu a {
        font-size: 10px;
    }

    .sobre {
        grid-template-columns: 1fr;
        gap: 50px;
    }

    .sobre-foto {
        height: 400px;
    }

    .premium-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}


/* ---------- Celular ---------- */
@media (max-width: 600px) {

    :root {
        --altura-menu: 70px;
        --margem-lateral: 6%;
    }

    section {
        padding: 70px var(--margem-lateral);
    }

    .hero-logo {
        height: 100px;
    }

    /* hero: a foto vira fundo de tela inteira, bem escurecida */
    .hero {
        padding-bottom: 60px;
    }

    .hero-foto {
        width: 100%;
        opacity: 0.4;
    }

    .hero h1 {
        font-size: 55px;
    }

    .sobre-foto {
        height: 320px;
    }

    .premium-grid {
        grid-template-columns: 1fr;
    }

    .premium-card {
        aspect-ratio: 4 / 3;
        min-height: 0;
    }

    .extras-grid {
        grid-template-columns: 1fr;
    }

    .extra-box {
        padding: 30px;
    }
}

/* ==========================================================
   14. NOVAS PARTES
   - abas do celular
   - cardápio de crepes (Salgados e Doces)
   - cards Coffee Break / Confeitaria
========================================================== */

/* ---------- Abas fixas do celular (escondidas no computador) ---------- */
.mobile-tabs { display: none; }

.so-desktop { display: inline; }

/* ---------- Cardápio: Salgados primeiro, Doces depois ---------- */
.cardapio-nav {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin: -30px 0 60px;
}

.cardapio-nav a {
    padding: 10px 26px;
    border: 1px solid var(--borda-dourada);
    font-size: 11px;
    letter-spacing: 2px;
    text-transform: uppercase;
    transition: 0.3s;
}

.cardapio-nav a:hover {
    background: var(--dourado);
    color: var(--fundo);
}

.cardapio-container {
    max-width: 1000px;
    margin: auto;
    display: flex;
    flex-direction: column;
    gap: 80px;
}

.categoria-titulo {
    display: flex;
    align-items: baseline;
    gap: 20px;
    margin-bottom: 10px;
    padding-bottom: 15px;
    border-bottom: 1px solid rgba(216, 176, 108, 0.3);
}

.categoria-num {
    color: var(--dourado);
    font-size: 12px;
    letter-spacing: 4px;
}

.categoria-titulo h3 {
    font-family: var(--fonte-titulo);
    font-size: 40px;
    font-weight: 500;
    color: var(--dourado);
}

.categoria-itens {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 80px;
}

.menu-item {
    padding: 18px 0;
    border-bottom: 1px solid var(--borda-suave);
}

.menu-item h4 {
    font-family: var(--fonte-titulo);
    font-size: 23px;
    font-weight: 500;
}

.menu-item p {
    margin-top: 5px;
    color: #898279;
    font-size: 12px;
    line-height: 1.5;
}

/* ---------- Cards Coffee Break / Confeitaria ---------- */
.mais { background: var(--fundo-claro); }

.mais-grid {
    max-width: 1000px;
    margin: auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}

.mais-card {
    position: relative;
    display: flex;
    align-items: flex-end;
    min-height: 340px;
    overflow: hidden;
    border: 1px solid var(--borda-dourada);
    transition: transform 0.4s, border-color 0.4s;
}

.mais-card:hover { transform: translateY(-6px); border-color: var(--dourado); }

.mais-card .foto { position: absolute; inset: 0; }
.mais-card .foto img { transition: transform 0.6s; }
.mais-card:hover .foto img { transform: scale(1.05); }

.mais-card::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(17,16,14,.95) 0%, rgba(17,16,14,.55) 55%, rgba(17,16,14,.2) 100%);
}

.mais-texto { position: relative; z-index: 2; padding: 30px; }
.mais-texto h3 { font-family: var(--fonte-titulo); font-size: 38px; font-weight: 500; }
.mais-texto p { margin: 8px 0 18px; color: var(--texto-suave); font-size: 14px; line-height: 1.6; }
.mais-ver { color: var(--dourado); font-size: 11px; letter-spacing: 2px; text-transform: uppercase; }

/* ---------- Telas médias: 7 itens no menu ficam apertados ---------- */
@media (max-width: 1080px) and (min-width: 769px) {
    .menu { gap: 16px; }
    .menu a { font-size: 11px; letter-spacing: .5px; }
}

/* ---------- MOBILE (até 768px): menu hambúrguer + 3 abas fixas ---------- */
@media (max-width: 768px) {

    :root {
        --altura-menu: 70px;
        --altura-abas: 46px;
        --altura-topo: calc(var(--altura-menu) + var(--altura-abas));
    }

    .header {
        height: var(--altura-topo);
        align-items: flex-start;
    }

    .logo { height: var(--altura-menu); display: flex; align-items: center; }
    .logo img { height: 52px; }

    .menu-toggle {
        display: flex;
        justify-content: center;
        height: var(--altura-menu);
    }

    .so-desktop { display: none; }

    .menu {
        position: absolute;
        top: var(--altura-topo);
        left: 0;
        width: 100%;
        flex-direction: column;
        gap: 0;
        background: rgba(17, 16, 14, 0.98);
        border-bottom: 1px solid rgba(216, 176, 108, 0.15);
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.4s;
    }

    .menu.aberto { max-height: 400px; }

    .menu a {
        padding: 18px var(--margem-lateral);
        font-size: 12px;
        letter-spacing: 1px;
        border-top: 1px solid var(--borda-suave);
    }

    /* as 3 abas: sempre visíveis no topo */
    .mobile-tabs {
        display: flex;
        position: absolute;
        top: var(--altura-menu);
        left: 0;
        width: 100%;
        height: var(--altura-abas);
        background: #16140f;
        border-top: 1px solid var(--borda-suave);
    }

    .mobile-tabs a {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        font-size: 10.5px;
        letter-spacing: .8px;
        text-transform: uppercase;
        white-space: nowrap;
        color: var(--texto-suave);
        border-bottom: 2px solid transparent;
        transition: 0.3s;
    }

    .mobile-tabs a + a { border-left: 1px solid var(--borda-suave); }

    .mobile-tabs a.ativo {
        color: var(--dourado);
        border-bottom-color: var(--dourado);
        background: rgba(216, 176, 108, 0.07);
    }

    .categoria-itens { grid-template-columns: 1fr; }
    .categoria-titulo h3 { font-size: 32px; }
    .mais-grid { grid-template-columns: 1fr; }
    .mais-card { min-height: 280px; }
    .cardapio-nav { margin-top: -40px; }
}