/* ============================================================
   GUIA DE ESTILO — engenharia reversa do assunta.com.br
   Fonte original: Galano Grotesque (paga) -> aqui: Outfit (Google Fonts)
   Logo original: script manuscrito -> aqui: Great Vibes (Google Fonts)
   ============================================================ */
:root {
  --branco: #fff;
  --bege: #EEE8E3;        /* fundo das seções alternadas */
  --bege-2: #EBE5DE;
  --escuro: #1B1918;      /* texto do topo, menu lateral */
  --preto: #090909;       /* fundo do cardápio */
  /* ponytail: Assunta usa areia #CBA582 e verde rgba(21,130,46,.75); aqui viraram o dourado do letreiro e o verde do cardápio do Talita Cumi's */
  --tan: #C9963F;         /* dourado dos botões */
  --tan-75: rgba(201, 150, 63, .8);
  --verde: rgba(47, 75, 38, .92);    /* botão de formulário (verde do cardápio) */
  --zap: #53A451;         /* botão flutuante WhatsApp */
  --texto: #212529;
  --cinza: #707070;       /* borda dos inputs */
  --placeholder: #C2C2C2;
  --raio-caixa: 5px 35px;  /* cantos assimétricos das caixas */
  --raio-img: 35px 5px;    /* cantos assimétricos das fotos (espelhado) */
  --raio-pill: 25px;
  --sombra-caixa: 0 25px 50px rgba(0, 0, 0, .16);
  --sombra-botao: 0 15px 25px rgba(0, 0, 0, .25);
  --topo: 70px;
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { font-family: "Outfit", sans-serif; font-weight: 300; color: var(--texto); background: var(--branco); line-height: 1.5; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
ul { list-style: none; }
h1, h2, h3, h4 { font-weight: 300; line-height: 1.15; }
h1 { font-size: clamp(26px, 5vw, 40px); }
h2 { font-size: clamp(24px, 4vw, 32px); }
.container { width: min(1140px, 100% - 32px); margin-inline: auto; }
.marca { font-family: "Great Vibes", cursive; font-weight: 400; font-size: 2.8em; line-height: 1; color: #fff; }
.marca img { height: 72px; width: auto; }
.marca-hero img { height: 110px; }

/* ---------- topo (barra branca 70px) ---------- */
.topo { height: var(--topo); background: var(--branco); color: var(--escuro); font-size: .9em; position: relative; z-index: 3; }
.topo .container { display: flex; justify-content: space-between; align-items: center; height: 100%; }
.endereco b { font-weight: 500; }
.sociais { display: flex; gap: 12px; align-items: center; }
/* botão PT/ES do topo */
.idioma { display: flex; border: 1px solid var(--tan); border-radius: 14px; overflow: hidden; }
.idioma a { padding: 3px 10px; font-size: .85em; font-weight: 500; color: var(--escuro); }
.idioma a.ativo { background: var(--tan); color: #fff; }
.sociais svg { width: 30px; height: 30px; }

/* ---------- menu principal (flutua sobre o hero) ---------- */
.nav { position: absolute; top: var(--topo); left: 0; right: 0; z-index: 2; display: flex; justify-content: center; align-items: center; gap: 44px; padding: 48px 16px; }
.nav a { color: #fff; font-size: 1.2em; transition: opacity .3s; }
.nav a:hover { opacity: .75; }
.nav .marca { margin: 0 12px; }


/* ---------- hero (foto cheia) ---------- */
.hero { min-height: calc(100vh - var(--topo)); background: var(--img) center / cover no-repeat; position: relative; display: flex; align-items: center; justify-content: center; text-align: center; color: #fff; padding: 160px 16px 80px; }
.hero::before { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, .45); }
.hero > * { position: relative; }
.hero h1 { color: #fff; }
.hero h1 span { font-weight: 500; font-size: 1.2em; }
.hero.baixo { min-height: 60vh; }
.marca-hero { display: none; margin-bottom: 40px; }
.acoes { display: flex; gap: 16px; flex-wrap: wrap; justify-content: center; margin-top: 48px; }
.acoes .botao { flex: 1 1 300px; max-width: 470px; }

/* ---------- botão pílula ---------- */
.botao { display: inline-block; background: var(--tan-75); box-shadow: var(--sombra-botao); border-radius: var(--raio-pill); color: #fff; padding: 25px 0; font-size: 1.5em; text-align: center; transition: .3s; }
.botao:hover { color: var(--bege); background: rgba(203, 165, 130, .9); }

/* ---------- seções ---------- */
.secao { padding: 32px 0 64px; }
.secao-bege { background: var(--bege); }
.secao-textura { background-color: #fff; background-image: repeating-linear-gradient(45deg, rgba(0, 0, 0, .018) 0 2px, transparent 2px 14px), repeating-linear-gradient(-45deg, rgba(0, 0, 0, .018) 0 2px, transparent 2px 14px); }
.titulo-secao { text-align: center; padding: 48px 0; text-transform: lowercase; }

/* "a casa": grade 2x2 de caixas brancas */
.grade-casa { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; max-width: 960px; margin-inline: auto; position: relative; grid-auto-rows: 1fr; }
.caixa { background: #fff; border-radius: var(--raio-caixa); padding: 48px; font-size: 1.1em; }
.caixa p + p { margin-top: 20px; }
.caixa.direita { text-align: right; }
.caixa-img { border-radius: var(--raio-caixa); background: var(--img) center / cover no-repeat; min-height: 320px; }
/* placa de Marcos 5:41: caixa na proporção da foto (4:5), para o texto não ser cortado */
.caixa-img.inteira { aspect-ratio: 4 / 5; }
.grade-casa .caixa { display: flex; flex-direction: column; justify-content: center; }
.detalhe-centro { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 64px; height: 64px; border-radius: 50%; background: #fff; color: var(--tan); display: grid; place-items: center; font-family: "Great Vibes", cursive; font-size: 2em; box-shadow: var(--sombra-caixa); }

/* foto + caixa flutuante sobreposta (cardápio / eventos) */
.espaco { display: grid; grid-template-columns: repeat(12, 1fr); align-items: center; padding: 32px 0 90px; }
.espaco .img { grid-column: 1 / 7; grid-row: 1; border-radius: var(--raio-img); overflow: hidden; }
.espaco .img img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.espaco .caixa-flutuante { grid-column: 6 / 13; grid-row: 1; z-index: 2; position: relative; background: #fff; border-radius: var(--raio-caixa); box-shadow: var(--sombra-caixa); padding: 48px 48px 64px; }
.espaco.foto .caixa-flutuante { padding-bottom: 25px; } /* etiqueta sem botão */
.espaco .caixa-flutuante p + p { margin-top: 16px; }
.espaco .caixa-flutuante .botao { position: absolute; left: 50%; bottom: -35px; transform: translateX(-50%); width: 75%; font-size: 1.2em; color: var(--escuro); }
.espaco .caixa-flutuante .botao:hover { color: var(--bege); }
.espaco.invertido .img { grid-column: 7 / 13; }
.espaco.invertido .caixa-flutuante { grid-column: 1 / 8; text-align: right; }
/* variante galeria (página eventos): foto grande + etiqueta pequena */
.espaco.foto { padding: 24px 0; max-width: 900px; margin-inline: auto; }
.espaco.foto .img { grid-column: 1 / 9; }
.espaco.foto .caixa-flutuante { grid-column: 7 / 13; padding: 25px; text-align: center; }
.espaco.foto.invertido .img { grid-column: 5 / 13; }
.espaco.foto.invertido .caixa-flutuante { grid-column: 1 / 7; }
.espaco.foto h3 { font-size: 1.4em; }

/* ---------- cardápio (fundo escuro, categorias expansíveis) ---------- */
.cardapio-lista { background: var(--preto); color: #fff; padding-bottom: 48px; }
.categoria { border-bottom: 1px solid rgba(255, 255, 255, .12); }
.categoria summary { list-style: none; cursor: pointer; display: flex; align-items: center; min-height: 150px; padding: 0 32px; font-size: 2em; font-weight: 300; background-image: linear-gradient(90deg, var(--preto) 42%, rgba(9, 9, 9, .15) 100%), var(--img); background-position: left, right center; background-size: auto, 60% auto; background-repeat: no-repeat; transition: color .3s; }
.categoria summary::-webkit-details-marker { display: none; }
.categoria summary:hover { color: var(--placeholder); }
.categoria summary::before { content: ""; width: 14px; height: 14px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translate(-3px, -3px); margin-right: 22px; transition: transform .3s; flex: none; }
.categoria[open] summary::before { transform: rotate(-135deg) translate(-3px, -3px); }
.pratos { max-width: 960px; margin-inline: auto; padding: 16px 32px 40px; }
.prato { display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: start; padding: 24px 0; border-bottom: 1px solid var(--tan); }
.prato h3 { font-weight: 600; font-size: 1.3em; margin-bottom: 10px; }
.prato p { color: var(--placeholder); }
.prato .preco { font-size: 1.8em; white-space: nowrap; }
/* lista compacta (cardápio real: nome + preço, sem descrição) */
.pratos.lista { display: grid; grid-template-columns: 1fr 1fr; column-gap: 56px; }
.pratos.lista .prato { padding: 14px 0; align-items: center; }
.pratos.lista h3 { margin: 0; font-weight: 400; font-size: 1.1em; }
.pratos.lista .preco { font-size: 1.2em; }
.prato small { font-size: .7em; letter-spacing: .08em; text-transform: uppercase; color: var(--tan); margin-left: 6px; }
.nota-cardapio { max-width: 960px; margin-inline: auto; padding: 32px 32px 0; color: var(--placeholder); font-size: .95em; text-align: center; }

/* ---------- formulários (caixa branca com sombra) ---------- */
.formulario { background: #fff; box-shadow: var(--sombra-caixa); border-radius: var(--raio-caixa); padding: 40px; text-align: center; }
.formulario h3 { font-size: 1.25em; margin-bottom: 24px; }
.campos { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; text-align: left; }
.campo-largo { grid-column: 1 / -1; }
.formulario input, .formulario select, .formulario textarea { width: 100%; border: 1px solid var(--cinza); border-radius: 15px; height: 60px; padding: 0 20px; font: inherit; font-weight: 300; color: var(--texto); background: #fff; }
.formulario textarea { height: auto; padding: 16px 20px; resize: vertical; }
.formulario ::placeholder { color: var(--placeholder); }
.formulario button { margin-top: 24px; background: var(--verde); border: 0; border-radius: var(--raio-pill); color: #fff; padding: 20px 50px; font: inherit; font-weight: 500; cursor: pointer; transition: .3s; }
.formulario button:hover { background: rgba(21, 130, 46, .9); }
.duas-colunas { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: center; padding: 48px 0; }
.duas-colunas .img { border-radius: var(--raio-img); overflow: hidden; }
.duas-colunas .img img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.info p + p { margin-top: 12px; }
.info h4 { font-weight: 500; font-size: 1.2em; margin: 24px 0 6px; }
.info h4:first-child { margin-top: 0; }

/* ---------- faixa "no instagram" ---------- */
.titulo-secao p { margin-top: 8px; color: var(--tan); text-transform: none; }
.grade-insta { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; padding-bottom: 32px; }
.grade-insta a { display: block; overflow: hidden; border-radius: 20px 4px; }
.grade-insta img { width: 100%; aspect-ratio: 1; object-fit: cover; transition: transform .4s; }
.grade-insta a:hover img { transform: scale(1.06); }

/* ---------- rodapé ---------- */
footer { padding: 48px 0; }
footer .container { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
footer h4 { color: var(--escuro); font-size: 1.2em; font-weight: 500; margin-bottom: 8px; }
footer p { font-size: .9em; }
footer p + p { margin-top: 10px; }
footer b { font-weight: 500; }
footer .direita { text-align: right; }
footer .direita .sociais { justify-content: flex-end; margin-top: 12px; }
footer .creditos { grid-column: 1 / -1; text-align: center; font-size: .8em; color: var(--cinza); padding-top: 24px; }

/* ---------- WhatsApp flutuante ---------- */
.zap { position: fixed; right: 20px; bottom: 20px; width: 58px; height: 58px; border-radius: 50%; background: var(--zap); display: grid; place-items: center; box-shadow: 0 8px 20px rgba(0, 0, 0, .3); z-index: 5; transition: transform .3s; }
.zap:hover { transform: scale(1.08); }
.zap svg { width: 32px; height: 32px; }

/* ---------- responsivo ---------- */
@media (max-width: 992px) {
  /* menu sempre visível, só mais compacto */
  .nav { gap: 24px; padding: 32px 16px; }
  .nav a { font-size: 1.05em; }
  .nav .marca { margin: 0 4px; }
  .nav .marca img { height: 60px; }
  .hero { padding-top: 130px; }
}
@media (max-width: 780px) {
  /* celular: logo em cima, os 4 links numa linha embaixo */
  .nav { flex-wrap: wrap; gap: 4px 20px; padding: 16px 12px; }
  .nav .marca { order: -1; flex-basis: 100%; text-align: center; margin: 0 0 6px; }
  .nav .marca img { height: 56px; margin-inline: auto; }
  .nav a { font-size: .95em; }
  .hero { padding-top: 150px; }
  .topo { font-size: .8em; }
  .endereco b { display: block; }
  .grade-casa { grid-template-columns: 1fr; grid-auto-rows: auto; }
  .grade-casa .caixa-img { min-height: 0; aspect-ratio: 3 / 2; order: -1; }
  .grade-casa .caixa-img.inteira { aspect-ratio: 4 / 5; width: min(100%, 440px); justify-self: center; }
  .caixa { padding: 24px; font-size: 1em; text-align: left !important; }
  .detalhe-centro { display: none; }
  .espaco, .espaco.foto { grid-template-columns: 1fr; padding-bottom: 80px; }
  .espaco .img, .espaco.invertido .img, .espaco.foto .img, .espaco.foto.invertido .img { grid-column: 1; grid-row: 1; }
  .espaco .caixa-flutuante, .espaco.invertido .caixa-flutuante, .espaco.foto .caixa-flutuante, .espaco.foto.invertido .caixa-flutuante { grid-column: 1; grid-row: 2; margin: -40px 16px 0; padding: 24px 24px 56px; text-align: left; }
  .espaco.foto .caixa-flutuante { text-align: center; padding-bottom: 24px; }
  .espaco .caixa-flutuante .botao { font-size: .95em; width: 85%; }
  .categoria summary { font-size: 1.2em; min-height: 110px; padding: 0 16px; background-size: auto, 70% auto; }
  .pratos { padding: 8px 16px 24px; }
  .pratos.lista { grid-template-columns: 1fr; }
  .grade-insta { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .marca-hero img { height: 90px; }
  .prato .preco { font-size: 1.3em; }
  .campos, .duas-colunas, footer .container { grid-template-columns: 1fr; }
  .duas-colunas .img img { aspect-ratio: 4 / 3; }
  footer .direita { text-align: left; }
  footer .direita .sociais { justify-content: flex-start; }
  .formulario { padding: 24px; }
}