/* ===== Fornalha do Largo — folha de estilo compartilhada ===== */

html { scroll-behavior: smooth; }
body { background-color: #F4ECDE; }
::selection { background: #B4502B; color: #F4ECDE; }

/* Rede de segurança contra overflow horizontal no mobile +
   respiro para o "notch" / barra inferior dos celulares. */
html, body { overflow-x: hidden; }
body {
  padding-bottom: env(safe-area-inset-bottom);
}

/* Variáveis de tipografia — centralizam a fonte de display.
   Display: DM Serif Display (alta-contraste, editorial, com itálico real)
   — escolhida para dar unicidade tipográfica entre as marcas (evita repetir
   Fraunces/Cormorant). O peso é único (400), então o "font-medium" das
   manchetes vem do próprio desenho encorpado da face. */
:root {
  --font-display: "DM Serif Display", "Fraunces", Georgia, serif;
}
.font-serif {
  font-family: var(--font-display) !important;
  /* DM Serif Display só tem o peso 400 (já encorpado e editorial). Forçamos
     400 para evitar "faux-bold" sintético quando o HTML pede font-medium. */
  font-weight: 400 !important;
}
/* Itálico real da face (preserva o tom do detalhe-assinatura "do Largo") */
.font-serif.italic, .font-serif .italic { font-style: italic; }

/* Scrims reais sobre foto — contraste garantido */
.scrim-prato {
  background:
    linear-gradient(105deg, rgba(33,25,21,0.92) 0%, rgba(33,25,21,0.62) 42%, rgba(33,25,21,0.18) 100%),
    linear-gradient(0deg, rgba(33,25,21,0.55) 0%, rgba(33,25,21,0) 55%);
}
.scrim-ambiente {
  background: linear-gradient(0deg, rgba(33,25,21,0.86) 4%, rgba(33,25,21,0.30) 50%, rgba(33,25,21,0.55) 100%);
}
.scrim-pagina {
  background:
    linear-gradient(0deg, rgba(33,25,21,0.86) 6%, rgba(33,25,21,0.45) 55%, rgba(33,25,21,0.62) 100%);
}

/* Foto: cor de base enquanto carrega (evita "flash" branco no mobile) */
.foto-fundo { background-color: #2B211B; }
/* Fallback quando a foto Unsplash não carrega: gradiente quente da marca
   (acionado via JS por img[data-fallback]). O scrim por cima segue legível. */
.foto-fundo.img-fallback {
  background-color: #2B211B;
  background-image:
    radial-gradient(120% 90% at 12% 100%, rgba(217,118,60,0.55) 0%, rgba(180,80,43,0.30) 38%, rgba(33,25,21,0) 72%),
    linear-gradient(150deg, #3A2A20 0%, #211915 60%);
}

/* Filete decorativo antes de eyebrow */
.filete::before {
  content: "";
  display: inline-block;
  width: 34px;
  height: 1px;
  background: currentColor;
  vertical-align: middle;
  margin-right: 14px;
  opacity: 0.6;
}

/* Reveal — transição de estado ao entrar em viewport.
   FAIL-SAFE: se o JS falhar ou não houver observer, .reveal-on garante o
   estado visível por padrão (ver <html class="reveal-on"> aplicado via script
   inline). Sem a classe, tudo fica visível — conteúdo nunca preso. */
.reveal-on .reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .8s cubic-bezier(.16,.7,.3,1), transform .8s cubic-bezier(.16,.7,.3,1);
  will-change: opacity, transform;
}
.reveal-on .reveal.vis { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal-on .reveal { opacity: 1 !important; transform: none !important; transition: none; }
}

/* Linhas do menu com dot leader */
.menu-row { border-bottom: 1px solid rgba(124,51,24,0.20); }
.menu-row:last-child { border-bottom: 0; }
.dotleader { border-bottom: 1px dotted rgba(124,51,24,0.35); }
.menu-row-dark { border-bottom: 1px solid rgba(244,236,222,0.14); }
.menu-row-dark:last-child { border-bottom: 0; }
.dotleader-dark { border-bottom: 1px dotted rgba(244,236,222,0.28); }

/* Realce de estado sutil na linha do menu (feedback de toque/hover).
   Anima só background — barato, sem reflow. */
.menu-row, .menu-row-dark {
  transition: background-color .25s ease;
  margin-inline: -0.75rem;
  padding-inline: 0.75rem;
}
@media (hover: hover) {
  .menu-row:hover { background-color: rgba(180,80,43,0.05); }
  .menu-row-dark:hover { background-color: rgba(244,236,222,0.04); }
}

a:focus-visible, button:focus-visible, summary:focus-visible {
  outline: 2px solid #D9763C;
  outline-offset: 3px;
  border-radius: 2px;
}

/* Nav — sublinhado animado no hover + estado ativo */
.nav-link { position: relative; }
.nav-link::after { content:""; position:absolute; left:0; bottom:-4px; height:1px; width:0; background:#B4502B; transition:width .35s cubic-bezier(.16,.7,.3,1); }
.nav-link:hover::after, .nav-link:focus-visible::after { width:100%; }
.nav-link.is-active { color:#F4ECDE; }
.nav-link.is-active::after { width:100%; background:#D9763C; }

/* ===== Header sticky que compacta e ganha sombra ao rolar (transição) ===== */
.site-header {
  position: fixed;
  top: 0;
  inset-inline: 0;
  z-index: 40;
  transition: background-color .3s ease, box-shadow .3s ease, backdrop-filter .3s ease;
  padding-top: env(safe-area-inset-top);
}
.site-header .header-inner { transition: padding .3s ease; }
.site-header.is-stuck {
  background-color: rgba(33,25,21,0.92);
  backdrop-filter: blur(8px);
  box-shadow: 0 1px 0 rgba(244,236,222,0.08), 0 10px 30px -18px rgba(0,0,0,0.7);
}
.site-header.is-stuck .header-inner { padding-top: .75rem; padding-bottom: .75rem; }
@media (prefers-reduced-motion: reduce) {
  .site-header, .site-header .header-inner { transition: none; }
}

/* ===== Botões — estado pressed/lift (feedback de toque) ===== */
.btn-press { transition: transform .12s ease, filter .2s ease, background-color .25s ease, color .25s ease; }
.btn-press:active { transform: translateY(1px) scale(.985); }
@media (hover: hover) {
  .btn-lift { transition: transform .25s cubic-bezier(.16,.7,.3,1), box-shadow .25s ease, background-color .25s ease, color .25s ease; }
  .btn-lift:hover { transform: translateY(-2px); box-shadow: 0 12px 24px -14px rgba(33,25,21,0.55); }
}
@media (prefers-reduced-motion: reduce) {
  .btn-press, .btn-lift { transition: background-color .2s ease, color .2s ease; }
  .btn-press:active, .btn-lift:hover { transform: none; }
}

/* ===== Menu mobile — painel deslizante com itens em cascata =====
   A11y: quando FECHADO o painel sai da árvore de acessibilidade
   (visibility:hidden) — assim os links não são focáveis por teclado/leitor,
   mesmo estando off-canvas. A animação de fechar continua funcionando porque
   visibility transiciona com delay (some só DEPOIS do slide). O atributo
   [inert] (aplicado via JS) reforça isso em navegadores que o suportam. */
#mobileMenu {
  transition: transform .42s cubic-bezier(.16,.84,.34,1), visibility 0s linear .42s;
  visibility: hidden;
}
#mobileMenu.is-open {
  visibility: visible;
  transition: transform .42s cubic-bezier(.16,.84,.34,1), visibility 0s;
}
#mobileMenu .mob-link {
  opacity: 0;
  transform: translateX(14px);
  transition: opacity .4s ease, transform .4s cubic-bezier(.16,.7,.3,1);
}
#mobileMenu.is-open .mob-link { opacity: 1; transform: none; }
#mobileMenu.is-open .mob-link:nth-child(1) { transition-delay: .08s; }
#mobileMenu.is-open .mob-link:nth-child(2) { transition-delay: .14s; }
#mobileMenu.is-open .mob-link:nth-child(3) { transition-delay: .20s; }
#mobileMenu.is-open .mob-link:nth-child(4) { transition-delay: .26s; }
#mobileMenu .mob-cta { opacity: 0; transition: opacity .4s ease .3s; }
#mobileMenu.is-open .mob-cta { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  #mobileMenu { transition: visibility 0s; }
  #mobileMenu .mob-link, #mobileMenu .mob-cta { transition: none; }
  #mobileMenu .mob-link, #mobileMenu .mob-cta { opacity: 1; transform: none; }
}

/* WhatsApp float — pulso de brasa (feedback de presença), pausável e
   respeitando safe-area. Some quando o menu mobile está aberto. */
.wa-float {
  bottom: calc(1.25rem + env(safe-area-inset-bottom));
  right: calc(1.25rem + env(safe-area-inset-right));
  transition: transform .25s cubic-bezier(.16,.7,.3,1), opacity .3s ease, visibility .3s ease;
}
.wa-float:hover { transform: scale(1.06); }
.wa-float:active { transform: scale(.96); }
body.menu-open .wa-float { opacity: 0; visibility: hidden; pointer-events: none; }
.wa-pulse { box-shadow: 0 0 0 0 rgba(37,211,102,0.5); animation: wapulse 2.6s ease-out infinite; }
@keyframes wapulse { 70% { box-shadow: 0 0 0 16px rgba(37,211,102,0); } 100% { box-shadow: 0 0 0 0 rgba(37,211,102,0); } }
@media (prefers-reduced-motion: reduce) {
  .wa-pulse { animation: none; }
  .wa-float, .wa-float:hover, .wa-float:active { transition: opacity .3s ease, visibility .3s ease; transform: none; }
}

/* ===== DETALHE-ASSINATURA: o "ponto da brasa" =====
   Marcador de fogo lento — três traços de fumaça subindo de uma brasa.
   Usado nos títulos de seção do cardápio (marca o "ponto de fogo" de cada item).
   CANON: não é loop decorativo de fundo — é scroll-linked. Só anima quando o
   título entra em viewport (.is-live, ativado pelo IntersectionObserver) e
   pausa fora da tela, poupando bateria e evitando movimento gratuito. */
.ponto-brasa {
  display: inline-flex;
  align-items: flex-end;
  gap: 3px;
  height: 14px;
  vertical-align: middle;
  margin-left: 12px;
}
.ponto-brasa span {
  display: block;
  width: 2px;
  border-radius: 2px;
  background: linear-gradient(0deg, #B4502B 0%, #D9763C 70%, rgba(217,118,60,0) 100%);
  transform-origin: bottom;
  transform: scaleY(.78);
  opacity: .6;
}
.ponto-brasa span:nth-child(1) { height: 8px; }
.ponto-brasa span:nth-child(2) { height: 14px; }
.ponto-brasa span:nth-child(3) { height: 10px; }
/* Animação só enquanto visível (scroll-linked, não loop de fundo perpétuo) */
.is-live .ponto-brasa span,
.ponto-brasa.is-live span {
  animation: brasaSobe 2.8s ease-in-out infinite;
}
.ponto-brasa span:nth-child(1) { animation-delay: 0s; }
.ponto-brasa span:nth-child(2) { animation-delay: .45s; }
.ponto-brasa span:nth-child(3) { animation-delay: .9s; }
@keyframes brasaSobe {
  0%, 100% { transform: scaleY(.7); opacity: .55; }
  50%      { transform: scaleY(1.15); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .is-live .ponto-brasa span, .ponto-brasa.is-live span { animation: none; }
  .ponto-brasa span { opacity: .85; transform: none; }
}

/* Escala de "fogo" — indicador honesto de intensidade/tempo de brasa do prato.
   whitespace-normal no <h3> deixa o nome quebrar em linha; a escala
   (inline-flex, não-quebrável) acompanha a última linha sem espremer o título
   em telas estreitas. */
.escala-fogo { display:inline-flex; gap:4px; align-items:center; flex-shrink:0; white-space:nowrap; }
.escala-fogo i { width:7px; height:7px; border-radius:50%; background:currentColor; opacity:.22; }
.escala-fogo i.on { opacity:1; }

/* ===== FAQ <details> — chevron que gira no [open] (transição de estado) ===== */
.faq-item { border-bottom: 1px solid rgba(244,236,222,0.12); }
.faq-item > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.4rem 0;
  min-height: 44px;
}
.faq-item > summary::-webkit-details-marker { display: none; }
.faq-chevron {
  flex-shrink: 0;
  margin-top: .15rem;
  color: #D9763C;
  transition: transform .3s cubic-bezier(.16,.7,.3,1);
}
.faq-item[open] .faq-chevron { transform: rotate(180deg); }
.faq-answer {
  overflow: hidden;
  color: rgba(244,236,222,0.65);
  line-height: 1.7;
  padding-bottom: 1.4rem;
  margin-top: -0.4rem;
}
/* Abertura suave do conteúdo (animação de entrada, só opacity/transform) */
.faq-item[open] .faq-answer { animation: faqReveal .32s ease both; }
@keyframes faqReveal {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .faq-chevron { transition: none; }
  .faq-item[open] .faq-answer { animation: none; }
}

/* Wordmark / logo helpers */
.logo-lockup { line-height: 1; }

/* ===== Trilho fluido — miolo generoso em telas grandes =====
   Substitui os max-w-* fixos (que boiavam em vazio @1920/2560) por um trilho
   fluido: cresce com a viewport até um teto largo, com padding lateral que
   acompanha a tela. Em 1920/2560 a composição ocupa o espaço, sem esticar
   linhas de leitura ao infinito (o conteúdo interno mantém seus próprios
   max-w para texto). */
.trilho {
  width: 100%;
  max-width: min(92vw, 88rem);   /* ~1408px de teto, fluido até lá */
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 4vw, 4rem);
}
/* Variante média para blocos que não são corpo corrido largo (timeline) */
.trilho-medio { max-width: min(92vw, 72rem); }
/* Variante estreita para leitura em coluna única (FAQ): mantém a medida de
   linha confortável mesmo em 2560 — o trilho só centraliza, não estica o texto. */
.trilho-estreito { max-width: min(92vw, 56rem); }
@media (min-width: 1536px) {
  .trilho       { max-width: min(90vw, 96rem); padding-inline: clamp(2rem, 5vw, 7rem); }
  .trilho-medio { max-width: min(90vw, 78rem); }
}

/* Full-bleed: seções de foto/cor ocupam 100vw mesmo dentro de um pai com
   trilho. O texto interno fica num sub-trilho. */
.full-bleed {
  width: 100vw;
  margin-inline: calc(50% - 50vw);
}

/* Grids do cardápio/destaques ganham coluna em telas largas (não travam em
   md/lg). Aplicado via classe utilitária para não tocar o markup de cada item. */
@media (min-width: 1280px) {
  .grid-cardapio { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 5rem; }
}
@media (min-width: 1536px) {
  .grid-cardapio { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 4.5rem; }
}

/* ===== Polish mobile ===== */

/* Rodapé do menu mobile: endereço com tracking largo NÃO pode estourar a
   largura a 360px (era a causa real do overflow horizontal mascarada pelo
   overflow-x:hidden). Damos margem à direita e deixamos quebrar. */
.menu-foot-addr {
  right: 1.5rem;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

/* WhatsApp float: no mobile, recua um pouco e respeita safe-area, para não
   encostar/cobrir o CTA final (w-full) nem links de rodapé. O respiro extra
   (pb) vem das próprias seções finais (.secao-final) abaixo. */
@media (max-width: 640px) {
  .wa-float {
    bottom: calc(0.9rem + env(safe-area-inset-bottom));
    right: calc(0.9rem + env(safe-area-inset-right));
  }
  /* Folga no rodapé (última coisa na rolagem) para o FAB de 56px + respiro
     nunca cobrir o copyright / a linha "demonstração — por Dalmasio". */
  .secao-final { padding-bottom: 6.5rem; }
}

/* Tipografia de leitura no mobile: corpo >= 15px. O Tailwind aplica text-sm
   (14px) em várias descrições/passos/notas; aqui elevamos só o corpo de
   leitura no mobile, sem mexer em rótulos/kicker (uppercase tracking).
   !important: o runtime do Tailwind CDN injeta .text-sm DEPOIS desta folha,
   então sem ele a regra de 14px venceria por ordem de cascata. */
@media (max-width: 640px) {
  .texto-leitura { font-size: 15px !important; line-height: 1.6; }
}