/* Cardápio digital da Pizzaria e Churrascaria do Costelinha.
   Base clara, como o cardápio impresso; escuro só onde há brasa. */

:root {
  --papel: #faf6ef;
  --papel-2: #f3ece0;
  --vermelho: #c1272d;
  --vermelho-vivo: #e0313b;
  --brasa: #ff7a18;
  --tinta: #2b2320;
  --tinta-escura: #1a1310;
  --secundario: #6b615b;
  --linha: #e3dacc;
  --verde: #3e6b4a;

  --serif: "Cormorant Garamond", Georgia, serif;
  --sans: "Jost", system-ui, sans-serif;

  --limite: 1080px;
  --raio: 14px;
  --barra: 62px;
}

* { box-sizing: border-box; }

/* display: flex/grid nas regras abaixo venceria o [hidden] do navegador. */
[hidden] { display: none !important; }

html { scroll-behavior: smooth; scroll-padding-top: 12px; }

body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font-family: var(--sans);
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
  padding-bottom: var(--barra);
}

h1, h2, h3 { font-family: var(--serif); font-weight: 600; margin: 0; line-height: 1.1; }
p { margin: 0; line-height: 1.6; }
a { color: inherit; }
img { max-width: 100%; display: block; }

.limite { width: 100%; max-width: var(--limite); margin: 0 auto; padding: 0 20px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.pular {
  position: absolute; left: -999px;
  background: var(--vermelho); color: #fff; padding: 12px 18px; z-index: 100;
}
.pular:focus { left: 12px; top: 12px; }

:focus-visible { outline: 3px solid var(--brasa); outline-offset: 2px; }

/* ---------- hero com brasa ---------- */

.topo {
  position: relative;
  background: var(--tinta-escura);
  color: #f6f1e7;
  overflow: hidden;
  padding-bottom: 46px;
}

.brasa { position: absolute; inset: 0; pointer-events: none; z-index: 0; }

/* A fachada da casa, ao fundo — a mesma foto que aparece lá embaixo em
   "onde a gente está". Ela não preenche o topo inteiro: fica na faixa de
   baixo, como um horizonte, e se dissolve no escuro antes de chegar na
   logo. É o que dá a sensação de estar vendo a casa de longe, à noite, com
   as fagulhas subindo dela. Desfocada a ponto de virar luz e volume — dá
   para sentir que é um prédio, não dá para ler a placa. */
.brasa-foto {
  position: absolute; left: 50%; bottom: 0;
  width: 128%; height: 58%;
  transform: translateX(-50%);
  object-fit: cover; object-position: center 38%;
  filter: blur(13px) brightness(.72) saturate(1.12);
  opacity: .95;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 48%);
          mask-image: linear-gradient(to bottom, transparent 0%, #000 48%);
  z-index: 0;
}

/* Véu sobre a fachada: é ele que segura a legibilidade do texto claro.
   Mais fechado em cima, mais aberto embaixo, para a casa aparecer. */
.brasa::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(to bottom, rgba(26,19,16,.9) 0%, rgba(26,19,16,.5) 42%,
                               rgba(42,21,9,.3) 72%, rgba(42,21,9,.42) 100%),
    radial-gradient(120% 90% at 50% 105%, rgba(90,31,10,.35) 0%, transparent 62%);
  z-index: 1;
}

.brasa-luz {
  position: absolute; left: 50%; bottom: -30%;
  width: 130%; aspect-ratio: 1; transform: translateX(-50%);
  background: radial-gradient(circle, rgba(255,122,24,.45) 0%, rgba(255,122,24,.12) 38%, transparent 68%);
  animation: pulsar 4.5s ease-in-out infinite;
  z-index: 2;
}

@keyframes pulsar { 0%, 100% { opacity: .75; } 50% { opacity: 1; } }

.fagulha {
  position: absolute; bottom: -12px;
  width: 3px; height: 3px; border-radius: 50%;
  background: var(--brasa);
  box-shadow: 0 0 6px 1px rgba(255,122,24,.8);
  animation: subir 7s linear infinite;
  z-index: 2;
}

.fagulha:nth-child(2) { left: 12%; animation-delay: 0s; }
.fagulha:nth-child(3) { left: 28%; animation-delay: 1.4s; }
.fagulha:nth-child(4) { left: 46%; animation-delay: 2.8s; }
.fagulha:nth-child(5) { left: 67%; animation-delay: .7s; }
.fagulha:nth-child(6) { left: 81%; animation-delay: 3.6s; }
.fagulha:nth-child(7) { left: 93%; animation-delay: 2.1s; }

@keyframes subir {
  0%   { transform: translateY(0) scale(1); opacity: 0; }
  10%  { opacity: 1; }
  100% { transform: translateY(-78vh) scale(.3); opacity: 0; }
}

.nav-topo {
  position: relative;
  display: flex; gap: 22px; justify-content: center; flex-wrap: wrap;
  padding: 18px 20px 0;
  font-size: .78rem; letter-spacing: .18em; text-transform: uppercase;
}

.nav-topo a {
  display: inline-flex; align-items: center;
  min-height: 44px; padding: 6px 4px;
  text-decoration: none; opacity: .82;
}
.nav-topo a:hover { opacity: 1; color: var(--brasa); }

.hero { position: relative; text-align: center; padding: 26px 20px 0; }
.hero-marca { margin: 0; line-height: 0; }
.hero-logo { width: min(210px, 52vw); height: auto; margin: 0 auto 14px; }

/* Sem frase de efeito no topo: a logo e o jeito da casa falar. */
.hero-slogan {
  font-family: var(--serif); font-style: italic; font-weight: 600;
  font-size: clamp(1.7rem, 6vw, 2.5rem); line-height: 1.15;
  color: var(--brasa); margin: 0 auto 26px;
}

/* Avaliação no Google, logo abaixo dos botões. */
.avaliar {
  display: inline-flex; align-items: center; justify-content: center;
  flex-wrap: wrap; gap: 4px 8px;
  margin-top: 18px; padding: 6px 4px;
  color: #f2ece2; font-size: .88rem; letter-spacing: .02em; text-decoration: none;
}
.avaliar-estrelas { color: #f5b301; letter-spacing: .12em; }
.avaliar-texto { border-bottom: 1px solid rgba(242,236,226,.35); padding-bottom: 1px; }
a.avaliar[href]:hover .avaliar-texto { border-color: currentColor; }
.avaliar-pendente { opacity: .62; cursor: default; }
.avaliar-aviso { font-size: .72rem; letter-spacing: .04em; color: #a89c8c; }
.avaliar .avaliar-aviso { width: 100%; }
.botao-avaliar .avaliar-aviso { margin-left: 8px; }

.hero-acoes { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }

/* ---------- botões ---------- */

.botao {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 46px; padding: 12px 22px;
  border: 1px solid currentColor; border-radius: 999px;
  font-family: var(--sans); font-size: .9rem; font-weight: 500;
  letter-spacing: .04em; text-decoration: none;
  transition: background .2s, color .2s, transform .12s;
}

.botao:active { transform: translateY(1px); }
.botao-cheio { background: var(--vermelho); border-color: var(--vermelho); color: #fff; }
.botao-cheio:hover { background: var(--vermelho-vivo); border-color: var(--vermelho-vivo); }
/* Verde do WhatsApp um tom abaixo: branco sobre ele passa de 4,5:1. */
.botao-zap { background: #0f7a40; border-color: #0f7a40; color: #fff; }
.botao-zap:hover { background: #0c6634; }
.botao-bloco { display: flex; width: 100%; margin-top: 14px; }

/* ---------- destaques ---------- */

.faixa-destaques { background: var(--papel-2); border-bottom: 1px solid var(--linha); }
.destaques { display: grid; gap: 22px; padding-block: 26px; grid-template-columns: 1fr; }

.destaque {
  padding: 4px 0 4px 18px; text-decoration: none; display: block;
  border-left: 2px solid var(--vermelho);
}

.destaque b {
  display: block; font-family: var(--serif); font-weight: 600;
  font-size: 1.3rem; margin-bottom: 4px;
}

.destaque span { font-size: .92rem; color: var(--secundario); }
.destaque em { display: block; font-style: normal; color: var(--vermelho); font-weight: 600; margin-top: 8px; }

/* ---------- seções ---------- */

.secao { padding: 46px 0; }
.secao-clara { background: var(--papel-2); }
.secao-escura { background: var(--tinta-escura); color: #f2ece2; }
.secao-escura .nota, .secao-escura .chamada { color: #bdb2a4; }
/* No fundo escuro o vermelho da marca não se lê no corpo pequeno: brasa. */
.secao-escura .olho { color: var(--brasa); }

.olho {
  font-size: .75rem; letter-spacing: .22em; text-transform: uppercase;
  color: var(--vermelho); margin-bottom: 8px;
}

.secao h2 { font-size: clamp(2rem, 6vw, 3rem); margin-bottom: 10px; letter-spacing: -.01em; }
.chamada { color: var(--secundario); max-width: 52ch; margin-bottom: 22px; }

/* ---------- ferramentas do cardápio ---------- */

.ferramentas { margin: 22px 0 14px; display: grid; gap: 12px; }

.busca input {
  width: 100%; min-height: 48px; padding: 12px 18px;
  border: 1px solid var(--linha); border-radius: 999px;
  background: #fff; font-family: inherit; font-size: 1rem; color: inherit;
}

.filtros, .abas { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; }
.filtros::-webkit-scrollbar, .abas::-webkit-scrollbar { display: none; }

.chip, .aba {
  flex: 0 0 auto; min-height: 40px; padding: 8px 16px;
  border: 1px solid var(--linha); border-radius: 999px;
  background: #fff; color: var(--secundario);
  font-family: inherit; font-size: .86rem; font-weight: 500; cursor: pointer;
  white-space: nowrap;
}

.chip[aria-pressed="true"] { background: var(--verde); border-color: var(--verde); color: #fff; }
.aba[aria-selected="true"] { background: var(--vermelho); border-color: var(--vermelho); color: #fff; }

.abas { margin-bottom: 20px; }

/* ---------- lista do cardápio ---------- */

.grupo-cardapio + .grupo-cardapio { margin-top: 44px; }

.grupo-cabeca {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 14px; flex-wrap: wrap;
  padding-bottom: 8px; margin-bottom: 14px; border-bottom: 1px solid var(--linha);
}

.grupo-cabeca h3 { font-size: 1.7rem; letter-spacing: .01em; }
.grupo-faixa { font-size: .88rem; font-weight: 500; color: var(--vermelho); }
.grupo-nota { font-size: .86rem; color: var(--secundario); margin-bottom: 12px; }

.lista-cardapio { display: grid; gap: 10px; }
.cartoes { display: grid; gap: 0 32px; grid-template-columns: 1fr; }

.cartao {
  display: flex; gap: 14px; align-items: flex-start;
  background: none; border: 0; border-bottom: 1px solid var(--linha);
  padding: 15px 0 16px; width: 100%; text-align: left;
  font-family: inherit; color: inherit; cursor: pointer;
  transition: padding-left .18s ease;
}

button.cartao:hover { padding-left: 8px; }
button.cartao:hover .cartao-nome { color: var(--vermelho); }
.cartao-texto { flex: 1 1 auto; min-width: 0; }

.cartao-nome { font-family: var(--serif); font-weight: 600; font-size: 1.3rem; line-height: 1.2; letter-spacing: .01em; transition: color .18s; }
.cartao-desc { font-size: .92rem; line-height: 1.45; color: var(--secundario); margin-top: 5px; max-width: 46ch; }

.cartao-precos {
  margin-top: 9px; display: flex; gap: 12px; flex-wrap: wrap;
  font-size: .82rem; font-weight: 400; color: var(--secundario);
}

.cartao-precos b { color: var(--tinta); font-weight: 600; }

.cartao-precos b { font-weight: 600; }
.cartao-preco-unico { font-size: 1rem; font-weight: 600; white-space: nowrap; }

.selo {
  display: inline-block; margin-left: 8px; padding: 2px 8px;
  border-radius: 999px; font-size: .68rem; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; vertical-align: 2px;
}

.selo-vegetariana { background: #e6efe7; color: var(--verde); }
.selo-picante, .selo-novidade { background: #fbe9e9; color: var(--vermelho); }
.selo-mais-pedida { background: #fdf1d9; color: #8a5f08; }

.vazio { text-align: center; color: var(--secundario); padding: 30px 0; }
.pendencia { margin-top: 16px; font-size: .84rem; color: var(--secundario); }

/* ---------- montador ---------- */

.montador-grade { display: grid; gap: 26px; grid-template-columns: 1fr; }

.pizza-palco {
  aspect-ratio: 1; max-width: 340px; margin: 0 auto;
  filter: drop-shadow(0 18px 26px rgba(0,0,0,.45));
  transition: transform .25s ease-out;
}

.pizza-palco svg { width: 100%; height: auto; display: block; }

/* Prévia em foto: a própria foto do sabor, numa janela 4:3. No meio a meio
   cada metade ganha o nome do sabor, embaixo. */
.pizza-palco.com-foto {
  position: relative; aspect-ratio: 4 / 3; max-width: 520px;
  filter: none; border-radius: var(--raio); overflow: hidden;
  background: #120d0b; box-shadow: 0 18px 40px rgba(0,0,0,.45);
}
.previa {
  position: absolute; inset: 0; width: 100%; height: 100%; display: block;
  opacity: 0; transition: opacity .35s ease;
}
.previa.ativa { opacity: 1; }
.previa-lado {
  position: absolute; bottom: 10px; max-width: 46%;
  padding: 5px 11px; border-radius: 999px;
  background: rgba(18,12,9,.74); color: #f6f1e7;
  font-size: .76rem; letter-spacing: .03em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  opacity: 0; transition: opacity .25s;
}
.previa-esq { left: 10px; }
.previa-dir { right: 10px; }
.meio-a-meio .previa-lado { opacity: 1; }
.pizza-legenda { text-align: center; margin-top: 12px; font-size: .9rem; color: #bdb2a4; }

.campo { border: 0; padding: 0; margin: 0 0 20px; }
.campo legend {
  padding: 0; margin-bottom: 10px;
  font-size: .75rem; letter-spacing: .18em; text-transform: uppercase; color: var(--brasa);
}

.opcoes { display: flex; gap: 8px; flex-wrap: wrap; }
.opcoes-linha { margin-bottom: 12px; }

.opcao {
  min-height: 44px; padding: 10px 16px;
  border: 1px solid rgba(255,255,255,.28); border-radius: 999px;
  background: transparent; color: inherit;
  font-family: inherit; font-size: .9rem; cursor: pointer;
}

.opcao[aria-pressed="true"] { background: var(--brasa); border-color: var(--brasa); color: #1a1310; font-weight: 600; }

.select {
  width: 100%; min-height: 48px; margin-bottom: 10px; padding: 12px 14px;
  border: 1px solid rgba(255,255,255,.28); border-radius: 10px;
  background: rgba(255,255,255,.06); color: inherit;
  font-family: inherit; font-size: 1rem;
}

.select option { color: #2b2320; }
.nota { font-size: .84rem; }

.resumo { border-top: 1px solid rgba(255,255,255,.2); padding-top: 16px; }
.resumo-linha { font-size: .92rem; color: #cfc4b6; min-height: 1.6em; }

.resumo-total {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-top: 10px; font-size: .9rem; letter-spacing: .14em; text-transform: uppercase;
}

.resumo-total strong {
  font-family: var(--serif); font-size: 2.1rem; letter-spacing: 0;
  text-transform: none; color: var(--brasa);
}

/* ---------- serviços e história ---------- */

.cartao-servico { padding: 24px 0 4px; margin-top: 10px; border-top: 1px solid var(--linha); }
.secao-escura .cartao-servico { border-top-color: rgba(255,255,255,.16); }
.cartao-servico h3 { font-size: 1.5rem; margin-bottom: 6px; }

.visite address { font-style: normal; font-size: 1.15rem; line-height: 1.6; margin: 14px 0 6px; }
.visite .telefone { font-family: var(--serif); font-size: 1.9rem; font-weight: 600; }
.visite .horario { margin: 4px 0 0; font-size: 1rem; color: var(--secundario); }
.visite .telefone a { text-decoration: none; color: var(--vermelho); }
.visite-acoes { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 20px; }

/* ---------- rodapé e barra ---------- */

.rodape {
  background: var(--tinta-escura); color: #bdb2a4;
  padding: 34px 0 40px; text-align: center; font-size: .9rem;
}

.rodape-nome { font-family: var(--serif); font-size: 1.3rem; color: #f2ece2; margin-bottom: 8px; }
.rodape a { color: var(--brasa); }

.nav-baixo {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
  display: grid; grid-template-columns: repeat(6, 1fr);
  background: rgba(26,19,16,.96);
  backdrop-filter: blur(10px);
  border-top: 1px solid rgba(255,255,255,.12);
  padding-bottom: env(safe-area-inset-bottom);
}

.nav-baixo a {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 9px 2px; min-height: var(--barra);
  color: #d8cec1; text-decoration: none;
  font-size: .64rem; letter-spacing: .03em; white-space: nowrap;
}

.nav-baixo span { font-size: 1.05rem; line-height: 1; }
.nav-baixo a:hover { color: var(--brasa); }

/* ---------- telas maiores ---------- */

/* O desfoque é em px absolutos: no desktop a foto é renderizada bem maior,
   então precisa de mais blur para ficar igualmente ilegível. */
@media (min-width: 900px) {
  .brasa-foto { filter: blur(26px) brightness(.72) saturate(1.12); width: 112%; }
}

@media (min-width: 620px) {
  .destaques { grid-template-columns: repeat(3, 1fr); }
  .cartoes { grid-template-columns: repeat(2, 1fr); }
  .ferramentas { grid-template-columns: 1fr auto; align-items: center; }
}

@media (min-width: 900px) {
  body { padding-bottom: 0; }
  .nav-baixo { display: none; }
  .secao { padding: 68px 0; }
  .montador-grade { grid-template-columns: 1fr 1fr; align-items: start; gap: 44px; }
  .pizza-palco, .pizza-palco.com-foto { max-width: 100%; position: sticky; top: 28px; }
  .cartoes { grid-template-columns: repeat(3, 1fr); }
}

/* ---------- movimento reduzido ---------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .brasa-luz, .fagulha { animation: none; }
  .fagulha { opacity: 0; }
  .pizza-palco { transition: none; transform: none !important; }
  * { transition-duration: .01ms !important; }
}


/* ---------- fotos dos itens ---------- */

/* Miniatura do item no cardápio. Sem arquivo na pasta, fica um campo de cor
   do tamanho certo: reserva o lugar da foto sem parecer defeito. */
.cartao-foto {
  position: relative; flex: 0 0 auto; width: 58px; height: 58px; margin-top: 3px;
  border-radius: 8px; overflow: hidden; background: var(--papel-2);
}

.cartao-foto img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  opacity: 1; transition: opacity .35s ease;
}

.sem-foto img { opacity: 0; }
.cartao-foto.sem-foto { background: linear-gradient(150deg, var(--papel-2), #e9dfcd); }
.secao-clara .cartao-foto.sem-foto { background: linear-gradient(150deg, #efe6d6, #e4d9c4); }


@media (min-width: 620px) { .cartao-foto { width: 66px; height: 66px; } }
@media (min-width: 900px) { .cartao-foto { width: 72px; height: 72px; } }

/* O texto da história, na voz da casa: a primeira frase abre maior, e o
   "seja bem-vindo" fecha em itálico, na cor da brasa. */
.historia-texto { max-width: 62ch; margin: 20px 0 0; }
.historia-texto p { margin: 0 0 14px; font-size: 1.02rem; line-height: 1.7; color: #e6ddd0; }
.historia-texto p:first-child {
  font-family: var(--serif); font-size: 1.4rem; line-height: 1.45; color: #f6f1e7;
}
.historia-texto .historia-fecho {
  margin-top: 8px; font-family: var(--serif); font-style: italic; font-size: 1.35rem; color: var(--brasa);
}

/* Linha do tempo da casa: como começou, como cresceu, como está hoje. Uma
   por linha no celular; as três lado a lado no computador, no tamanho em
   que a foto (736 px) ainda fica nítida. */
.linha-do-tempo {
  list-style: none; padding: 0; margin: 28px 0 8px;
  display: grid; gap: 24px; grid-template-columns: 1fr;
  counter-reset: fase;
}
.fase { margin: 0; counter-increment: fase; }
.fase img {
  width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover;
  display: block; border-radius: 10px;
}
.fase-rotulo {
  margin: 10px 0 0;
  font-size: .75rem; letter-spacing: .18em; text-transform: uppercase; color: var(--brasa);
}
.fase-rotulo::before { content: counter(fase, decimal-leading-zero) " · "; color: #a89c8c; }
@media (min-width: 760px) { .linha-do-tempo { grid-template-columns: repeat(3, 1fr); gap: 20px; } }

/* Foto de serviço: largura da coluna, altura pela proporção da foto. */
.foto-servico { margin: 0; }

.foto-servico img {
  width: 100%; max-width: 360px; height: auto;
  display: block; border-radius: var(--raio);
}

/* Faixas de preço de um serviço.

   Duas colunas no desktop para as faixas ficarem lado a lado e a comparação
   ser imediata; empilhadas no celular. A faixa em destaque é a que a casa
   quer que a pessoa alcance, então ela é a que tem cor. */
.condicoes {
  display: grid; gap: 12px; grid-template-columns: 1fr;
  margin: 20px 0 0;
}

.condicao {
  border: 1px solid var(--linha); border-radius: var(--raio);
  padding: 16px 18px; background: var(--papel-2);
}

.condicao-forte {
  border-color: var(--verde);
  background: color-mix(in srgb, var(--verde) 7%, var(--papel));
}

.condicao-gatilho {
  margin: 0; font-size: .86rem; line-height: 1.4;
  color: var(--secundario); text-wrap: balance;
}

.condicao-preco {
  margin: 6px 0 0; font-family: var(--serif);
  font-size: 1.7rem; font-weight: 600; line-height: 1.1;
}

.condicao-forte .condicao-preco { color: var(--verde); }

.condicao-inclui {
  margin: 10px 0 0; padding: 0; list-style: none;
  font-size: .9rem; line-height: 1.6;
}

.condicao-inclui li { padding-left: 15px; position: relative; }
.condicao-inclui li::before {
  content: "•"; position: absolute; left: 2px; color: var(--secundario);
}

/* Avisos operacionais: o que a pessoa tem que levar, o que dá para pedir. */
.avisos-servico {
  margin: 14px 0 0; padding: 0; list-style: none;
  font-size: .85rem; line-height: 1.6; color: var(--secundario);
}

.avisos-servico li { padding-left: 18px; position: relative; }
.avisos-servico li::before {
  content: "!"; position: absolute; left: 4px;
  font-weight: 700; color: var(--brasa);
}

/* Resposta de preço enquanto a pessoa digita quantas pessoas são. */
.tarifa-viva {
  margin: 0 0 16px; padding: 12px 14px; border-radius: 10px;
  font-size: .9rem; line-height: 1.5;
  border: 1px solid var(--linha); background: var(--papel-2);
}

.tarifa-cortesia {
  border-color: var(--verde);
  background: color-mix(in srgb, var(--verde) 8%, var(--papel));
  color: var(--verde);
}

.tarifa-paga { color: var(--tinta); }

/* Estilos de mesa — na peça da casa isso estava escrito dentro da imagem. */
.estilos-mesa { margin: 22px 0 0; }

.estilos-mesa dt {
  font-family: var(--serif); font-size: 1.15rem; font-weight: 600;
  margin-top: 14px;
}

.estilos-mesa dd { margin: 3px 0 0; font-size: .9rem; color: var(--secundario); }

.galeria-mesas {
  display: grid; gap: 10px; grid-template-columns: repeat(2, 1fr);
  margin-top: 20px;
}

.galeria-mesas img {
  width: 100%; aspect-ratio: 4 / 5; object-fit: cover;
  border-radius: 10px; display: block;
}

/* O .opcao nasceu na seção escura, onde o laranja da brasa funciona. Na
   seção clara ele destoa — aqui o selecionado usa o vermelho da marca. */
.reserva .opcao {
  border-color: var(--linha);
  background: #fff;
  color: var(--secundario);
}

.reserva .opcao[aria-pressed="true"] {
  background: var(--vermelho);
  border-color: var(--vermelho);
  color: #fff;
}

/* Reserva da mesa. */
.reserva {
  margin-top: 26px; padding-top: 22px;
  border-top: 1px solid var(--linha);
}

.reserva-titulo { font-family: var(--serif); font-size: 1.4rem; font-weight: 600; margin: 0; }
.reserva-nota { margin: 6px 0 16px; font-size: .88rem; color: var(--secundario); }

.campo-reserva { display: block; margin-bottom: 14px; border: 0; padding: 0; }

.campo-reserva > span,
.campo-reserva > legend {
  display: block; margin-bottom: 6px; padding: 0;
  font-size: .82rem; letter-spacing: .04em; color: var(--secundario);
}

.campo-reserva input {
  width: 100%; min-height: 48px; padding: 12px 14px;
  border: 1px solid var(--linha); border-radius: 10px;
  background: #fff; color: var(--tinta);
  font-family: inherit; font-size: 1rem;
}

.campo-reserva input:focus-visible { outline: 2px solid var(--vermelho); outline-offset: 1px; }

.reserva-dupla { display: grid; gap: 12px; grid-template-columns: 1fr 1fr; }

.reserva-erro {
  margin: 0 0 12px; padding: 10px 12px;
  border-radius: 8px; background: #fbeaea;
  font-size: .86rem; color: var(--vermelho);
}

@media (min-width: 620px) {
  .galeria-mesas { grid-template-columns: repeat(3, 1fr); }
  .condicoes { grid-template-columns: repeat(2, 1fr); }
}

/* Item vendido em mais de um tamanho: as opções no próprio cartão. */
.medidas { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 9px; }

.medida {
  padding: 6px 12px; min-height: 34px;
  border: 1px solid var(--linha); border-radius: 999px;
  background: #fff; color: var(--secundario);
  font-family: inherit; font-size: .8rem; font-weight: 500; cursor: pointer;
  white-space: nowrap;
}

.medida[aria-pressed="true"] {
  background: var(--vermelho); border-color: var(--vermelho);
  color: #fff; font-weight: 600;
}

/* Espeto misto: as duas carnes escolhidas dentro do próprio cartão. */
.misto-escolha { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.misto-campo { flex: 1 1 130px; min-width: 0; }

/* O .select base é da seção escura. O misto mora no cardápio claro,
   então inverte borda, fundo e texto para não sumir. */
.select-curto {
  width: 100%; margin: 0; padding: 8px 10px;
  min-height: 40px; font-size: .86rem;
  border: 1px solid var(--linha); border-radius: 8px;
  background: #fff; color: var(--tinta);
}

.select-curto:focus-visible { outline: 2px solid var(--vermelho); outline-offset: 1px; }

/* Bandeira do país do vinho, no mesmo lugar em toda a adega. */
.bandeira {
  width: 21px; height: 14px; margin-right: 9px;
  vertical-align: 1px; border-radius: 2px;
}

/* Sabor ou marca dentro do cartão: refri, suco, creme, cerveja, drink. */
.escolha-rotulo {
  margin: 10px 0 6px;
  font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: var(--secundario);
}
.escolhas { display: flex; gap: 6px; flex-wrap: wrap; }
.escolha {
  padding: 5px 11px; min-height: 32px;
  border: 1px solid var(--linha); border-radius: 999px;
  background: #fff; color: var(--tinta);
  font-family: inherit; font-size: .78rem; cursor: pointer;
}
.escolha[aria-pressed="true"] {
  background: var(--tinta); border-color: var(--tinta); color: #fff; font-weight: 600;
}
.escolha-aviso { margin: 6px 0 0; font-size: .78rem; font-weight: 500; color: var(--vermelho); }
.escolha-pendente { margin: 8px 0 0; font-size: .76rem; color: #a89c8c; }
.familia-borda { margin-top: 14px; }

/* O que a casa confirmou num serviço (brinquedoteca): pares curtos. */
.destaques-servico {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 18px;
  margin: 18px 0 0;
}
.destaque-servico dt {
  font-size: .7rem; letter-spacing: .16em; text-transform: uppercase; color: var(--secundario);
}
.destaque-servico dd { margin: 2px 0 0; font-family: var(--serif); font-size: 1.25rem; font-weight: 600; }
.destaque-servico.pendente dd { font-family: var(--sans); font-size: .85rem; font-weight: 400; color: #a89c8c; }
@media (min-width: 620px) { .destaques-servico { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Rodízio: dias e horário, o valor por idade e o que entra. Sempre em duas
   colunas: ao lado da foto a coluna de texto é estreita demais para quatro. */
.rodizio-grade {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 18px;
  margin: 16px 0 0;
}
.rodizio-grade .destaque-servico { border-top: 1px solid var(--linha); padding-top: 8px; }
.rodizio-valores .destaque-servico dd { color: var(--vermelho); }
.rodizio-valores .destaque-servico.gratis dd { color: var(--verde); }
.rodizio-rotulo {
  margin: 28px 0 0; font-size: .74rem; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase; color: var(--tinta);
}
.rodizio-inclui {
  margin: 10px 0 0; padding: 0; list-style: none; columns: 2; column-gap: 18px;
  font-size: .98rem; line-height: 1.75;
}
.rodizio-inclui li { padding-left: 15px; position: relative; break-inside: avoid; }
.monte-titulo {
  margin: 16px 0 0; font-size: .7rem; font-weight: 500; letter-spacing: .14em;
  text-transform: uppercase; color: var(--vermelho);
}
.monte-titulo + .rodizio-inclui { margin-top: 4px; }
.monte-linha { margin: 4px 0 0; font-family: var(--serif); font-size: 1.15rem; font-weight: 600; }
@media (min-width: 900px) { .monte-longa { columns: 3; } }
.rodizio-inclui li::before { content: "•"; position: absolute; left: 2px; color: var(--vermelho); }

/* ---------- carrinho ---------- */

/* Só quem tem o botão + guarda espaço para ele. */
.cartao { position: relative; }
.cartao-com-add { padding-right: 52px; }

.cartao-add {
  position: absolute; right: 0; top: 50%; transform: translateY(-50%);
  width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid var(--linha); background: transparent;
  color: var(--vermelho); font-size: 1.35rem; line-height: 1; cursor: pointer;
  display: grid; place-items: center;
}

.cartao-add:hover { background: var(--vermelho); border-color: var(--vermelho); color: #fff; }

.bolha-carrinho {
  position: fixed; left: 50%; bottom: calc(var(--barra) + 14px); z-index: 60;
  transform: translateX(-50%);
  display: flex; align-items: center; gap: 12px;
  min-height: 52px; padding: 10px 20px;
  border: 0; border-radius: 999px;
  background: var(--vermelho); color: #fff;
  font-family: var(--sans); font-size: .95rem; font-weight: 500;
  white-space: nowrap;
  box-shadow: 0 10px 26px rgba(0,0,0,.3); cursor: pointer;
}

.bolha-conta {
  display: grid; place-items: center;
  min-width: 26px; height: 26px; padding: 0 7px;
  border-radius: 999px; background: rgba(255,255,255,.22);
  font-size: .85rem; font-weight: 600;
}

.bolha-total { font-weight: 600; }

.gaveta { position: fixed; inset: 0; z-index: 90; }
.gaveta-fundo { position: absolute; inset: 0; background: rgba(20,12,8,.62); }

.gaveta-painel {
  position: absolute; right: 0; bottom: 0; left: 0;
  max-height: 86vh; display: flex; flex-direction: column;
  background: var(--papel); border-radius: 22px 22px 0 0;
  padding-bottom: env(safe-area-inset-bottom);
}

.gaveta-topo {
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px 22px 12px; border-bottom: 1px solid var(--linha);
}

.gaveta-topo h2 { font-size: 1.5rem; }

.gaveta-fechar {
  width: 42px; height: 42px; border-radius: 50%;
  border: 1px solid var(--linha); background: transparent;
  color: var(--secundario); font-size: 1rem; cursor: pointer;
}

.gaveta-itens { flex: 1 1 auto; overflow-y: auto; padding: 8px 22px; }

.gaveta-item {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--linha);
}

.gaveta-item-nome { font-family: var(--serif); font-weight: 600; font-size: 1.1rem; }
.gaveta-item-desc { font-size: .85rem; color: var(--secundario); margin-top: 2px; }
.gaveta-item-lado { text-align: right; flex: 0 0 auto; }
.gaveta-item-preco { display: block; font-weight: 600; }

.gaveta-tirar {
  margin-top: 6px; padding: 0; border: 0; background: none;
  color: var(--secundario); font-family: inherit; font-size: .8rem;
  text-decoration: underline; cursor: pointer;
}

.gaveta-pe { padding: 16px 22px 22px; border-top: 1px solid var(--linha); }
.gaveta-pe .resumo-total { color: var(--secundario); }
.gaveta-pe .resumo-total strong { color: var(--vermelho); }

.link-limpar {
  display: block; width: 100%; margin-top: 12px; padding: 8px;
  border: 0; background: none; color: var(--secundario);
  font-family: inherit; font-size: .85rem; text-decoration: underline; cursor: pointer;
}

.nav-baixo button {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 9px 4px; min-height: var(--barra);
  border: 0; background: none; color: #d8cec1;
  font-family: inherit; font-size: .68rem; letter-spacing: .06em; cursor: pointer;
}

.botao:disabled, .cartao-add:disabled { opacity: .45; cursor: not-allowed; }

@media (min-width: 900px) {
  .bolha-carrinho { bottom: 24px; right: 24px; left: auto; transform: none; }
  .gaveta-painel {
    top: 0; left: auto; width: min(440px, 100%);
    max-height: none; border-radius: 0;
  }
}


/* ---------- fotos ---------- */

.foto { width: 100%; height: auto; display: block; border-radius: 2px; }

.foto-larga { margin: 22px 0 8px; }

.legenda-foto {
  margin-top: 8px; font-size: .82rem; letter-spacing: .04em; color: var(--secundario);
}

/* Espaço de foto ainda não fornecida: um campo de cor, não uma caixa tracejada. */
.foto-espaco {
  width: 100%; aspect-ratio: 4 / 3;
  background: linear-gradient(150deg, var(--papel-2), #e9dfcd);
  display: flex; align-items: flex-end; padding: 14px;
  font-size: .8rem; letter-spacing: .05em; color: #a89c8c;
}

.secao-escura .foto-espaco {
  background: linear-gradient(150deg, rgba(255,255,255,.07), rgba(255,255,255,.03));
  color: #8e8377;
}

.servico-grade { display: grid; gap: 22px; grid-template-columns: 1fr; align-items: start; }

.retratos { display: grid; gap: 16px; grid-template-columns: repeat(3, 1fr); margin: 24px 0 10px; }
.retrato { aspect-ratio: 1; border-radius: 50%; }
.retrato-nome {
  margin-top: 10px; text-align: center;
  font-family: var(--serif); font-size: 1.05rem; font-weight: 600;
}

/* ---------- iFood ---------- */

.canais { display: grid; gap: 14px; grid-template-columns: 1fr; margin-top: 22px; }

.canal {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 16px 0; border-top: 1px solid var(--linha); text-decoration: none;
}

.canal b { font-family: var(--serif); font-size: 1.2rem; font-weight: 600; display: block; }
.canal span { font-size: .88rem; color: var(--secundario); }
.canal-acao { font-size: .88rem; font-weight: 500; color: var(--vermelho); white-space: nowrap; }
.canal-pendente .canal-acao { color: #a89c8c; }

@media (min-width: 620px) {
  .servico-grade { grid-template-columns: 1.15fr .85fr; gap: 32px; }
  .canais { grid-template-columns: repeat(3, 1fr); }
  .canal { border-top: 2px solid var(--vermelho); flex-direction: column; align-items: flex-start; gap: 6px; }
}

.sub-titulo {
  margin: 34px 0 4px;
  font-family: var(--serif); font-size: 1.5rem; font-weight: 600;
}

/* Pedido da pizza família: borda, até 4 sabores e o botão de pedir. No
   celular a foto vem antes do pedido: é ela que vende a pizza. */
@media (max-width: 619px) { #familia .servico-grade > :last-child { order: -1; } }
/* Pedido da pizza família: borda, até 4 sabores e o botão de pedir. */
.pedido-familia { margin-top: 18px; }
.sabores-familia { margin: 18px 0 0; }
.sabores-grade { display: grid; gap: 0 12px; grid-template-columns: 1fr 1fr; }

.campo-reserva select {
  width: 100%; min-height: 48px; padding: 12px 14px;
  border: 1px solid var(--linha); border-radius: 10px;
  background: #fff; color: var(--tinta);
  font-family: inherit; font-size: 1rem;
}
.campo-reserva select:focus-visible { outline: 2px solid var(--vermelho); outline-offset: 1px; }