/* ============================================================
   Pitaco — Comedoria de Quintal · Poço da Panela, Recife
   Paleta amostrada dos cardápios oficiais e da carta de vinhos.
   Marca decora, variante AA escreve (conferido no qa_site.py).
   ============================================================ */
:root {
  --mata: #264230;          /* verde-mata (cardápio do almoço) */
  --mata-2: #1D3424;        /* verde do rodapé / capa dos vinhos */
  --creme: #F6F1E5;         /* creme das plaquinhas */
  --branco: #FCFAF3;        /* branco-quente dos cartões */
  --salvia: #A5B080;        /* sálvia (cardápio da noite) */
  --salvia-claro: #CBD3AC;  /* sálvia p/ texto secundário no verde */
  --salvia-fundo: #EDECDC;  /* fundo suave de seção */
  --terra: #AF451E;         /* terracota oficial (decora) */
  --terra-txt: #9C3C17;     /* terracota que escreve (AA no creme) */
  --tinta: #22301F;         /* texto principal no claro */
  --tinta-suave: #4E5A47;   /* texto secundário no claro */
  --zap: #1E7A38;           /* botão WhatsApp (AA medido) */
  --zap-escuro: #14602A;
  --f-disp: "Poppins", system-ui, sans-serif;
  --f-corpo: "Karla", system-ui, sans-serif;
  --f-voz: "Fraunces", Georgia, serif;
  --larg: 1120px;
  --raio: 14px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

body {
  font-family: var(--f-corpo);
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--tinta);
  background: var(--creme);
  -webkit-font-smoothing: antialiased;
}
::selection { background: var(--terra); color: var(--creme); }

img { max-width: 100%; height: auto; display: block; }
a { color: var(--terra-txt); }
a:focus-visible, button:focus-visible, summary:focus-visible {
  outline: 3px solid var(--terra);
  outline-offset: 3px;
  border-radius: 4px;
}
.escuro a:focus-visible, .escuro summary:focus-visible { outline-color: var(--salvia); }

.pular {
  position: absolute; left: -9999px; top: 0;
  background: var(--tinta); color: var(--creme);
  padding: .6rem 1rem; z-index: 60; border-radius: 0 0 8px 0;
}
.pular:focus { left: 0; }

.miolo { max-width: var(--larg); margin: 0 auto; padding: 0 1.25rem; }
section { scroll-margin-top: 4.6rem; }
[id] { scroll-margin-top: 4.6rem; }

/* ---------- tipografia ---------- */
h1, h2, h3 { font-family: var(--f-disp); line-height: 1.12; text-wrap: balance; }
h1 { font-size: clamp(2.1rem, 5.2vw, 3.4rem); font-weight: 700; letter-spacing: -.01em; }
h2 { font-size: clamp(1.7rem, 3.6vw, 2.4rem); font-weight: 700; }
h3 { font-size: clamp(1.25rem, 2.4vw, 1.55rem); font-weight: 600; }
.voz {
  font-family: var(--f-voz); font-style: italic; font-weight: 500;
  font-size: clamp(1.25rem, 2.6vw, 1.7rem); line-height: 1.35;
}

/* plaquinha: eco da placa COMEDORIA do logo */
.plaquinha {
  display: inline-block;
  font-family: var(--f-disp); font-weight: 600;
  font-size: .78rem; letter-spacing: .22em; text-transform: uppercase;
  background: var(--terra); color: var(--creme);
  padding: .38rem .85rem .34rem; border-radius: 4px;
}
.plaquinha--verde { background: var(--mata); }

/* ---------- botões ---------- */
.bt {
  display: inline-flex; align-items: center; gap: .55rem;
  font-family: var(--f-disp); font-weight: 600; font-size: 1rem;
  padding: .85rem 1.5rem; border-radius: 999px;
  text-decoration: none; border: 2px solid transparent;
  transition: transform .15s ease, background-color .15s ease, color .15s ease;
}
.bt:active { transform: scale(.97); }
.bt--zap { background: var(--zap); color: #fff; }
.bt--zap:hover { background: var(--zap-escuro); }
.bt--linha { border-color: var(--creme); color: var(--creme); }
.bt--linha:hover { background: var(--creme); color: var(--mata); }
.bt--linha-escura { border-color: var(--mata); color: var(--mata); }
.bt--linha-escura:hover { background: var(--mata); color: var(--creme); }
.bt svg { flex: 0 0 auto; }

/* ---------- cabeçalho ---------- */
.topo {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--creme) 92%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid color-mix(in srgb, var(--mata) 14%, transparent);
}
.topo__linha {
  display: flex; align-items: center; gap: 1.4rem;
  padding: .55rem 1.25rem; max-width: var(--larg); margin: 0 auto;
}
.topo__logo img { width: auto; height: 46px; }
.topo nav { margin-left: auto; display: flex; gap: 1.15rem; }
.topo nav a {
  font-family: var(--f-disp); font-weight: 600; font-size: .92rem;
  color: var(--tinta); text-decoration: none;
}
.topo nav a:hover { color: var(--terra-txt); }
.topo .bt { padding: .55rem 1.1rem; font-size: .92rem; }
@media (max-width: 920px) {
  .topo nav { display: none; }
  .topo .bt { margin-left: auto; }
}

/* ---------- a janela (assinatura da casa) ---------- */
.janela { position: relative; display: block; width: min(100%, 460px); margin: 0 auto; }
.janela__quadro {
  position: relative; border: 10px solid var(--creme);
  border-top-width: 22px; border-radius: 6px;
  background: var(--creme);
  box-shadow: 0 24px 48px rgba(0, 0, 0, .28);
}
.janela__quadro::before {   /* travessa central (2 folhas de vidro) */
  content: ""; position: absolute; inset: 0 auto 0 calc(50% - 4px);
  width: 8px; background: var(--creme); z-index: 2;
}
.janela__quadro img { border-radius: 2px; }
.janela__aba {
  position: absolute; top: -22px; bottom: -10px; width: 17%;
  background:
    repeating-linear-gradient(180deg,
      color-mix(in srgb, var(--creme) 82%, var(--mata)) 0 9px,
      var(--creme) 9px 17px);
  border: 6px solid var(--creme); border-radius: 4px;
  box-shadow: 0 14px 26px rgba(0, 0, 0, .22);
}
.janela__aba--esq { left: -10px; transform-origin: right center;
  transform: perspective(700px) rotateY(38deg) translateX(-86%); }
.janela__aba--dir { right: -10px; transform-origin: left center;
  transform: perspective(700px) rotateY(-38deg) translateX(86%); }
.js .hero .janela__aba { transition: transform 1.1s cubic-bezier(.22, .8, .3, 1) .25s; }
.js .hero:not(.abriu) .janela__aba--esq { transform: perspective(700px) rotateY(64deg) translateX(-86%); }
.js .hero:not(.abriu) .janela__aba--dir { transform: perspective(700px) rotateY(-64deg) translateX(86%); }
/* variante para seções claras: madeira verde, como as janelas da fachada */
.janela--verde .janela__quadro,
.janela--verde .janela__quadro::before { background: var(--mata); border-color: var(--mata); }
.janela--verde .janela__aba {
  border-color: var(--mata);
  background:
    repeating-linear-gradient(180deg,
      color-mix(in srgb, var(--mata) 78%, var(--creme)) 0 9px,
      var(--mata) 9px 17px);
}
@media (max-width: 700px) {
  .janela { width: min(100%, 380px); }
  .janela__aba--esq { transform: perspective(700px) rotateY(30deg) translateX(-88%); }
  .janela__aba--dir { transform: perspective(700px) rotateY(-30deg) translateX(88%); }
}

/* ---------- hero ---------- */
.hero { background: var(--mata); color: var(--creme); overflow: hidden; position: relative; }
.hero::after {   /* ramos da carta de vinhos, bem sutis */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='210' height='210' viewBox='0 0 210 210'%3E%3Cg fill='none' stroke='%23A5B080' stroke-width='2' opacity='.14'%3E%3Cpath d='M20 60q30-28 62-8'/%3E%3Cellipse cx='34' cy='48' rx='7' ry='11' transform='rotate(-38 34 48)'/%3E%3Cellipse cx='58' cy='40' rx='7' ry='11' transform='rotate(-16 58 40)'/%3E%3Cpath d='M140 170q26-24 54-6'/%3E%3Cellipse cx='152' cy='160' rx='6' ry='10' transform='rotate(-34 152 160)'/%3E%3Ccircle cx='178' cy='58' r='4'/%3E%3Ccircle cx='60' cy='150' r='4'/%3E%3C/g%3E%3C/svg%3E");
}
.hero__grade {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: 1.2fr 1fr; gap: 3rem;
  align-items: center; padding: 4.2rem 0 4.6rem;
}
.hero h1 { margin: 1.1rem 0 .9rem; color: var(--branco); max-width: 13ch; }
.hero .voz { color: var(--salvia-claro); margin-bottom: 1.1rem; }
.hero__texto p.desc { max-width: 46ch; margin-bottom: 1.6rem; }
.hero__ctas { display: flex; flex-wrap: wrap; gap: .9rem; margin-bottom: 1.4rem; }
.hero__prova { display: flex; align-items: center; gap: .6rem; font-size: .95rem; color: var(--salvia-claro); }
.hero__prova strong { color: var(--branco); font-weight: 700; }
.hero__prova .estrela { color: #E9C46A; }
@media (max-width: 880px) {
  .hero__grade { grid-template-columns: 1fr; gap: 2.6rem; padding: 2.6rem 0 3rem; }
  .hero__ctas .bt { flex: 1 1 100%; justify-content: center; }
}

/* selos estáticos (sem letreiro rolante — regra da casa) */
.selos { background: var(--mata-2); position: relative; z-index: 1; }
.selos ul {
  list-style: none; display: flex; flex-wrap: wrap; justify-content: center;
  gap: .5rem 2.2rem; padding: .95rem 1.25rem; max-width: var(--larg); margin: 0 auto;
}
.selos li {
  font-family: var(--f-disp); font-weight: 600; font-size: .85rem;
  letter-spacing: .06em; text-transform: uppercase; color: var(--salvia-claro);
  display: flex; align-items: center; gap: .55rem;
}
.selos li::before { content: "❧"; color: var(--terra); font-size: 1rem; }

/* ---------- seções ---------- */
.secao { padding: 4.6rem 0; }
.secao--branca { background: var(--branco); }
.secao--salvia { background: var(--salvia-fundo); }
.secao__cabeca { max-width: 640px; margin-bottom: 2.6rem; }
.secao__cabeca h2 { margin: .9rem 0 .7rem; }
.secao__cabeca p:not(.plaquinha) { color: var(--tinta-suave); }
.escuro .secao__cabeca p:not(.plaquinha) { color: var(--salvia-claro); }

.revela { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
.revela.viu { opacity: 1; transform: none; }
html:not(.js) .revela { opacity: 1; transform: none; }

/* a casa */
.casa__grade { display: grid; grid-template-columns: 1.05fr .95fr; gap: 3.4rem; align-items: center; }
.casa__fotos { display: grid; grid-template-columns: 1fr 1fr; gap: 1.6rem; align-items: start; }
.casa__fotos .janela:last-child { margin-top: 2.6rem; }
.casa__texto p + p { margin-top: 1rem; }
.casa__texto .voz { color: var(--terra-txt); margin: 1.4rem 0 .2rem; }
.fatos { list-style: none; display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.6rem; }
.fatos li {
  font-family: var(--f-disp); font-weight: 600; font-size: .85rem;
  background: var(--branco); border: 1.5px solid color-mix(in srgb, var(--mata) 22%, transparent);
  color: var(--tinta); padding: .45rem .9rem; border-radius: 999px;
}
@media (max-width: 880px) {
  .casa__grade { grid-template-columns: 1fr; gap: 2.4rem; }
}

/* programação */
.escuro { background: var(--mata-2); color: var(--creme); }
.escuro h2 { color: var(--branco); }
.semana { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.3rem; }
.dia {
  background: color-mix(in srgb, var(--mata) 72%, var(--mata-2));
  border: 1px solid color-mix(in srgb, var(--salvia) 26%, transparent);
  border-radius: var(--raio); padding: 1.5rem 1.4rem 1.6rem;
}
.dia__rotulo {
  font-family: var(--f-disp); font-weight: 600; font-size: .78rem;
  letter-spacing: .2em; text-transform: uppercase; color: var(--salvia);
}
.dia h3 { color: var(--branco); margin: .55rem 0 .6rem; }
.dia p { font-size: .98rem; color: var(--salvia-claro); }
.dia .voz { font-size: 1.05rem; color: var(--creme); display: block; margin-top: .8rem; }
.programa__nota { margin-top: 1.8rem; display: flex; flex-wrap: wrap; gap: 1rem 1.6rem; align-items: center; }
.programa__nota p { font-size: .95rem; color: var(--salvia-claro); max-width: 52ch; }
@media (max-width: 1020px) { .semana { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .semana { grid-template-columns: 1fr; } }

/* ---------- cardápio ---------- */
.pilulas { display: flex; flex-wrap: wrap; gap: .6rem; margin: 0 0 2.4rem; padding: 0; list-style: none; }
.pilulas a {
  display: inline-block; font-family: var(--f-disp); font-weight: 600; font-size: .92rem;
  color: var(--mata); background: var(--branco);
  border: 1.5px solid color-mix(in srgb, var(--mata) 30%, transparent);
  padding: .5rem 1.05rem; border-radius: 999px; text-decoration: none;
}
.pilulas a:hover { background: var(--mata); color: var(--creme); }
.turno { padding: 2.2rem 0 .6rem; }
.turno__cabeca { display: flex; flex-wrap: wrap; align-items: baseline; gap: .6rem 1.2rem; margin-bottom: .5rem; }
.turno__cabeca .horario { font-family: var(--f-voz); font-style: italic; color: var(--terra-txt); font-size: 1.05rem; }
.turno > p.nota { color: var(--tinta-suave); font-size: .95rem; margin-bottom: 1.6rem; max-width: 60ch; }
.cardapio-colunas { columns: 2; column-gap: 2.8rem; }
.grupo { break-inside: avoid; margin-bottom: 2.1rem; }
.grupo h4 {
  font-family: var(--f-disp); font-weight: 700; font-size: 1.02rem;
  letter-spacing: .14em; text-transform: uppercase; color: var(--mata);
  border-bottom: 2px solid color-mix(in srgb, var(--salvia) 55%, transparent);
  padding-bottom: .45rem; margin-bottom: .9rem;
}
.grupo h4 small { font-family: var(--f-corpo); font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--tinta-suave); font-size: .85rem; }
.pratos { list-style: none; }
.prato { padding: .5rem 0; }
.prato__linha { display: flex; align-items: baseline; gap: .6rem; }
.prato__nome { font-weight: 700; }
.prato__pontos { flex: 1; border-bottom: 2px dotted color-mix(in srgb, var(--mata) 30%, transparent); transform: translateY(-4px); }
.prato__preco { font-family: var(--f-voz); font-style: italic; font-weight: 500; color: var(--terra-txt); white-space: nowrap; }
.prato__desc { font-size: .92rem; color: var(--tinta-suave); max-width: 46ch; }
.chip {
  display: inline-block; font-family: var(--f-disp); font-weight: 600;
  font-size: .68rem; letter-spacing: .08em; text-transform: uppercase;
  background: color-mix(in srgb, var(--terra) 14%, var(--branco));
  color: var(--terra-txt); border-radius: 4px; padding: .12rem .45rem;
  margin-left: .45rem; vertical-align: 2px;
}
.chip--veg { background: color-mix(in srgb, var(--salvia) 32%, var(--branco)); color: #3D5233; }
.cardapio__fotos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.6rem; margin: 2.2rem 0 .8rem; }
.cardapio__aviso { font-size: .9rem; color: var(--tinta-suave); margin-top: 1.6rem; }
.cardapio__aviso a { color: var(--terra-txt); }
@media (max-width: 800px) {
  .cardapio-colunas { columns: 1; }
  .cardapio__fotos { grid-template-columns: 1fr; }
}

/* rolha livre destaque */
.rolha {
  background: var(--mata); color: var(--creme); border-radius: var(--raio);
  padding: 1.6rem 1.8rem; margin: 1rem 0 2rem;
  display: flex; flex-wrap: wrap; gap: 1rem 2rem; align-items: center; justify-content: space-between;
}
.rolha .voz { color: var(--salvia-claro); font-size: 1.15rem; }
.rolha p { font-size: .95rem; max-width: 52ch; }

/* ---------- fotos ---------- */
.galeria { display: grid; grid-template-columns: repeat(6, 1fr); gap: 1rem; }
.galeria figure { border-radius: 10px; overflow: hidden; }
.galeria img { transition: transform .4s ease; }
.galeria a:hover img { transform: scale(1.05); }
@media (max-width: 980px) { .galeria { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 700px) {
  .galeria {
    display: flex; overflow-x: auto; scroll-snap-type: x mandatory;
    gap: .8rem; padding-bottom: .6rem; margin: 0 -1.25rem; padding-left: 1.25rem; padding-right: 1.25rem;
  }
  .galeria figure { flex: 0 0 62vw; scroll-snap-align: center; }
}

/* ---------- eventos ---------- */
.eventos__grade { display: grid; grid-template-columns: 1fr 1.1fr; gap: 3rem; align-items: center; }
.eventos__texto ul { list-style: none; margin: 1.2rem 0 1.6rem; }
.eventos__texto li { display: flex; gap: .6rem; align-items: baseline; padding: .3rem 0; }
.eventos__texto li::before { content: "❧"; color: var(--terra); }
@media (max-width: 880px) { .eventos__grade { grid-template-columns: 1fr; } }

/* ---------- onde ---------- */
.onde__grade { display: grid; grid-template-columns: 1.1fr .9fr; gap: 3rem; align-items: start; }
.onde address { font-style: normal; font-size: 1.1rem; line-height: 1.55; }
.onde address strong { font-family: var(--f-disp); }
.onde__acoes { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.4rem; }
.horarios { width: 100%; border-collapse: collapse; background: var(--branco); border-radius: var(--raio); overflow: hidden; }
.horarios caption {
  font-family: var(--f-disp); font-weight: 700; text-align: left;
  padding: 1rem 1.2rem .4rem; background: var(--branco);
}
.horarios th, .horarios td { text-align: left; padding: .55rem 1.2rem; font-size: .98rem; }
.horarios tbody tr + tr { border-top: 1px solid color-mix(in srgb, var(--mata) 10%, transparent); }
.horarios th { font-family: var(--f-disp); font-weight: 600; color: var(--mata); white-space: nowrap; }
.horarios td { color: var(--tinta); }
.horarios .fechado td, .horarios .fechado th { color: var(--tinta-suave); }
.horarios tfoot td { font-size: .85rem; color: var(--tinta-suave); padding-bottom: 1rem; }
@media (max-width: 820px) { .onde__grade { grid-template-columns: 1fr; } }

/* ---------- FAQ ---------- */
.faq { max-width: 780px; }
.faq details {
  background: var(--branco); border-radius: 12px; margin-bottom: .8rem;
  border: 1px solid color-mix(in srgb, var(--mata) 12%, transparent);
}
.faq summary {
  cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 1rem;
  font-family: var(--f-disp); font-weight: 600; padding: 1rem 1.2rem;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-size: 1.3rem; color: var(--terra-txt); line-height: 1; }
.faq details[open] summary::after { content: "–"; }
.faq details p { padding: 0 1.2rem 1.1rem; color: var(--tinta-suave); }
.faq details a { color: var(--terra-txt); }

/* ---------- rodapé ---------- */
.rodape { background: var(--mata-2); color: var(--creme); padding: 3.6rem 0 7rem; }
.rodape a { color: var(--salvia-claro); }
.rodape a:hover { color: var(--branco); }
.rodape__grade { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 2.6rem; }
.rodape__logo img { width: 200px; height: auto; }
.rodape h3 { font-size: .85rem; letter-spacing: .18em; text-transform: uppercase; color: var(--salvia); margin-bottom: .9rem; }
.rodape ul { list-style: none; }
.rodape li { padding: .22rem 0; font-size: .97rem; }
.rodape p { font-size: .97rem; }
.rodape .voz { color: var(--salvia-claro); font-size: 1.1rem; margin-top: 1rem; }
.rodape__fim {
  border-top: 1px solid color-mix(in srgb, var(--salvia) 22%, transparent);
  margin-top: 2.6rem; padding-top: 1.4rem; font-size: .85rem; color: var(--salvia-claro);
  display: flex; flex-wrap: wrap; gap: .5rem 2rem; justify-content: space-between;
}
@media (max-width: 820px) { .rodape__grade { grid-template-columns: 1fr; gap: 2rem; } }

/* barra fixa mobile */
.barra-zap {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  padding: .7rem 1rem calc(.7rem + env(safe-area-inset-bottom));
  background: color-mix(in srgb, var(--mata-2) 94%, transparent);
  backdrop-filter: blur(6px);
  transform: translateY(0); transition: transform .3s ease;
  display: none;
}
.barra-zap .bt { width: 100%; justify-content: center; }
.barra-zap.some { transform: translateY(110%); }
@media (max-width: 700px) {
  .barra-zap { display: block; }
  .rodape { padding-bottom: 3rem; }
}