/* ==========================================================
   MODELO · SITE DE UMA PÁGINA
   Cada site define as próprias cores e fontes no <style> do HTML
   (variáveis --s-...). Este arquivo é a estrutura comum.
   ========================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 76px; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--s-bg); color: var(--s-texto);
  font-family: var(--s-fonte-texto); font-size: 17px; line-height: 1.6;
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3 { margin: 0; line-height: 1.05; font-family: var(--s-fonte-titulo); font-weight: var(--s-peso-titulo, 700); text-transform: var(--s-caixa-titulo, none); letter-spacing: var(--s-espaco-titulo, -.02em); }
p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
.ic { width: 1.15em; height: 1.15em; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.s-wrap { max-width: 1120px; margin: 0 auto; padding: 0 20px; }

/* Botões */
.s-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  min-height: 50px; padding: 0 24px; border-radius: var(--s-raio-btn, 999px);
  font: 700 16px/1 var(--s-fonte-texto); text-decoration: none; cursor: pointer;
  border: 2px solid transparent; transition: transform .15s ease, filter .15s ease, background-color .15s ease;
  white-space: nowrap;
}
.s-btn .ic { width: 20px; height: 20px; }
.s-btn:hover { filter: brightness(1.08); }
.s-btn:active { transform: translateY(1px); }
.s-btn-acento { background: var(--s-acento); color: var(--s-acento-tinta); }
.s-btn-linha { border-color: var(--s-linha-forte); color: var(--s-texto); }
.s-btn-pequeno { min-height: 42px; padding: 0 18px; font-size: 15px; }

/* Topo */
.s-topo { position: sticky; top: 0; z-index: 30; background: var(--s-topo-bg, var(--s-bg)); border-bottom: 1px solid var(--s-linha); }
.s-topo-in { display: flex; align-items: center; gap: 24px; height: 70px; }
.s-marca { display: flex; flex-direction: column; text-decoration: none; line-height: 1; font-family: var(--s-fonte-titulo); }
.s-marca b { font-size: 26px; font-weight: var(--s-peso-titulo, 700); letter-spacing: var(--s-espaco-titulo, -.02em); text-transform: var(--s-caixa-titulo, none); }
.s-marca small { font-family: var(--s-fonte-texto); font-size: 11px; letter-spacing: .28em; text-transform: uppercase; color: var(--s-acento); margin-top: 4px; font-weight: 700; }
.s-nav { margin-left: auto; display: flex; gap: 26px; }
.s-nav a { text-decoration: none; font-weight: 600; font-size: 15px; color: var(--s-suave); }
.s-nav a:hover { color: var(--s-texto); }

/* Hero */
.s-hero { padding: 72px 0 80px; background: var(--s-hero-bg, transparent); position: relative; overflow: hidden; }
.s-hero-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 48px; align-items: center; }
.s-tag {
  display: inline-flex; align-items: center; gap: 8px; margin-bottom: 18px;
  font-size: 13px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--s-acento);
}
.s-tag::before { content: ""; width: 28px; height: 2px; background: currentColor; }
.s-hero h1 { font-size: clamp(48px, 7vw, 86px); }
.s-hero h1 em { font-style: normal; color: var(--s-acento); }
.s-lead { margin-top: 22px; font-size: 19px; color: var(--s-suave); max-width: 30em; }
.s-acoes { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.s-destaques { display: flex; flex-wrap: wrap; gap: 10px 22px; margin-top: 30px; font-size: 15px; color: var(--s-suave); font-weight: 600; }
.s-destaques li { display: flex; align-items: center; gap: 8px; }
.s-destaques .ic { color: var(--s-acento); }
.s-hero-arte { display: grid; place-items: center; }
.s-hero-arte svg { width: 100%; max-width: 440px; height: auto; }

/* Seções */
.s-secao { padding: 88px 0; }
.s-alt { background: var(--s-bg-2); }
.s-cabeca { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 40px; }
.s-titulo { font-size: clamp(36px, 4.6vw, 56px); }
.s-cabeca p { color: var(--s-suave); max-width: 26em; }

/* Lista de preços / cardápio */
.s-precos { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 40px; }
.s-item { display: flex; align-items: baseline; gap: 14px; padding: 18px 0; border-bottom: 1px dashed var(--s-linha-forte); }
.s-item div { flex: 1; min-width: 0; }
.s-item h3 { font-family: var(--s-fonte-texto); text-transform: none; letter-spacing: -.01em; font-size: 19px; font-weight: 700; line-height: 1.3; }
.s-item p { color: var(--s-suave); font-size: 15px; margin-top: 3px; }
.s-item b { font-family: var(--s-fonte-titulo); font-size: 24px; color: var(--s-acento); white-space: nowrap; font-weight: var(--s-peso-titulo, 700); }
.s-grupo-titulo { grid-column: 1 / -1; margin-top: 18px; font-size: 14px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--s-suave); }
.s-grupo-titulo:first-child { margin-top: 0; }

/* Sobre */
.s-sobre { display: grid; grid-template-columns: 1fr 1.1fr; gap: 56px; align-items: center; }
.s-sobre-texto p { color: var(--s-suave); font-size: 18px; margin-top: 18px; }
.s-diferenciais { display: grid; gap: 14px; }
.s-diferencial { display: flex; gap: 16px; padding: 22px; border-radius: var(--s-raio); background: var(--s-superficie); border: 1px solid var(--s-linha); }
.s-diferencial .s-icone { width: 48px; height: 48px; border-radius: calc(var(--s-raio) * .6); display: grid; place-items: center; background: var(--s-acento); color: var(--s-acento-tinta); flex: none; }
.s-diferencial .s-icone .ic { width: 24px; height: 24px; }
.s-diferencial h3 { font-family: var(--s-fonte-texto); text-transform: none; letter-spacing: -.01em; font-size: 18px; font-weight: 800; line-height: 1.3; }
.s-diferencial p { color: var(--s-suave); font-size: 15.5px; margin-top: 4px; }

/* Galeria (no trabalho real, entram as fotos do cliente) */
.s-galeria { display: grid; grid-template-columns: 2fr 1fr 1fr; grid-auto-rows: 200px; gap: 12px; }
.s-galeria figure { margin: 0; position: relative; border-radius: var(--s-raio); overflow: hidden; background: var(--s-superficie); display: grid; place-items: center; }
.s-galeria figure:first-child { grid-row: span 2; }
.s-galeria figure .ic { width: 44px; height: 44px; color: var(--s-acento); opacity: .9; stroke-width: 1.5; }
.s-galeria figcaption { position: absolute; left: 14px; bottom: 12px; font-size: 13px; font-weight: 700; color: var(--s-texto); background: rgba(0, 0, 0, .35); padding: 5px 10px; border-radius: 999px; backdrop-filter: blur(4px); }
.s-galeria-nota { margin-top: 14px; font-size: 14px; color: var(--s-suave); }

/* Onde estamos */
.s-local { display: grid; grid-template-columns: 1fr 1.2fr; gap: 28px; align-items: stretch; }
.s-cartao-info { padding: 30px; border-radius: var(--s-raio); background: var(--s-superficie); border: 1px solid var(--s-linha); display: flex; flex-direction: column; gap: 22px; }
.s-cartao-info h3 { font-family: var(--s-fonte-texto); text-transform: none; letter-spacing: -.01em; font-size: 15px; font-weight: 800; text-transform: uppercase; letter-spacing: .12em; color: var(--s-acento); margin-bottom: 8px; }
.s-horario li { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--s-linha); font-size: 16px; }
.s-horario li span:last-child { font-weight: 700; }
.s-endereco { font-size: 17px; }
.s-endereco small { display: block; color: var(--s-suave); font-size: 15px; }
.s-botoes { display: flex; flex-wrap: wrap; gap: 10px; margin-top: auto; }
.s-mapa {
  position: relative; min-height: 340px; border-radius: var(--s-raio); overflow: hidden;
  background-color: var(--s-mapa-bg, #e9e5dc);
  background-image:
    linear-gradient(var(--s-mapa-rua, #fff) 0 0), linear-gradient(var(--s-mapa-rua, #fff) 0 0),
    linear-gradient(var(--s-mapa-rua, #fff) 0 0), linear-gradient(var(--s-mapa-rua, #fff) 0 0),
    linear-gradient(var(--s-mapa-rua, #fff) 0 0),
    repeating-linear-gradient(0deg, transparent 0 46px, var(--s-mapa-linha, rgba(0,0,0,.05)) 46px 48px),
    repeating-linear-gradient(90deg, transparent 0 58px, var(--s-mapa-linha, rgba(0,0,0,.05)) 58px 60px);
  background-size: 100% 14px, 14px 100%, 100% 10px, 10px 100%, 140% 12px, auto, auto;
  background-position: 0 42%, 38% 0, 0 78%, 76% 0, -20% 20%, 0 0, 0 0;
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, repeat, repeat;
  border: 1px solid var(--s-linha);
}
.s-mapa::after { content: "Mapa ilustrativo"; position: absolute; right: 12px; bottom: 10px; font-size: 12px; font-weight: 700; color: rgba(0, 0, 0, .45); }
.s-pino { position: absolute; left: 38%; top: 42%; transform: translate(-50%, -100%); color: var(--s-acento); filter: drop-shadow(0 6px 8px rgba(0, 0, 0, .35)); }
.s-pino svg { width: 54px; height: 54px; }
.s-pino svg path { fill: currentColor; stroke: var(--s-pino-borda, #fff); stroke-width: 1.4; }
.s-pino svg circle { fill: var(--s-pino-borda, #fff); stroke: none; }

/* Chamada final */
.s-cta { padding: 84px 0; text-align: center; background: var(--s-cta-bg, var(--s-acento)); color: var(--s-cta-texto, var(--s-acento-tinta)); }
.s-cta h2 { font-size: clamp(38px, 5.4vw, 64px); }
.s-cta p { margin: 14px auto 28px; font-size: 18px; max-width: 30em; opacity: .85; }
.s-cta .s-btn { background: var(--s-cta-btn-bg, var(--s-acento-tinta)); color: var(--s-cta-btn-texto, var(--s-acento)); min-height: 56px; padding: 0 30px; font-size: 17px; }

/* Rodapé */
.s-rodape { padding: 40px 0; background: var(--s-rodape-bg, var(--s-bg)); border-top: 1px solid var(--s-linha); font-size: 14.5px; color: var(--s-suave); }
.s-rodape-in { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px; }
.s-rodape .s-marca b { font-size: 22px; color: var(--s-texto); }
.s-redes { display: flex; gap: 10px; }
.s-redes a { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--s-linha-forte); color: var(--s-texto); }
.s-redes a .ic { width: 19px; height: 19px; }
.s-credito { width: 100%; padding-top: 18px; border-top: 1px solid var(--s-linha); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; font-size: 13px; }
.s-credito a { text-decoration: none; font-weight: 700; color: var(--s-texto); }

/* Botão flutuante */
.s-wa {
  position: fixed; right: 18px; bottom: 18px; z-index: 40; width: 58px; height: 58px; border-radius: 50%;
  display: grid; place-items: center; background: #25d366; color: #fff; box-shadow: 0 10px 28px rgba(0, 0, 0, .35);
}
.s-wa .ic { width: 30px; height: 30px; }
html.captura .s-wa { display: none; }

/* Responsivo */
@media (max-width: 900px) {
  .s-nav { display: none; }
  .s-topo-in { justify-content: space-between; }
  .s-hero { padding: 44px 0 56px; }
  .s-hero-grid { grid-template-columns: 1fr; gap: 34px; }
  .s-hero-arte { order: -1; }
  .s-hero-arte svg { max-width: 300px; }
  .s-precos { grid-template-columns: 1fr; gap: 0; }
  .s-sobre, .s-local { grid-template-columns: 1fr; gap: 28px; }
  .s-cabeca { flex-direction: column; align-items: start; gap: 12px; }
  .s-galeria { grid-template-columns: 1fr 1fr; grid-auto-rows: 150px; }
  .s-galeria figure:first-child { grid-column: span 2; grid-row: span 1; }
}
@media (max-width: 560px) {
  body { font-size: 16px; }
  .s-wrap { padding: 0 18px; }
  .s-topo-in { height: 62px; }
  .s-marca b { font-size: 22px; }
  .s-hero h1 { font-size: clamp(44px, 13vw, 60px); }
  .s-lead { font-size: 17px; margin-top: 16px; }
  .s-acoes { flex-direction: column; }
  .s-acoes .s-btn { width: 100%; }
  .s-hero-arte svg { max-width: 230px; }
  .s-secao { padding: 64px 0; }
  .s-item h3 { font-size: 17.5px; }
  .s-item b { font-size: 21px; }
  .s-cartao-info { padding: 22px; }
  .s-mapa { min-height: 240px; }
  .s-botoes .s-btn { flex: 1; }
  .s-cta { padding: 64px 0; }
  .s-wa { right: 14px; bottom: 14px; width: 54px; height: 54px; }
}