@charset "utf-8";
/* =============================================================
   SOTTILE'S PIZZARIA — sistema visual
   Mobile-first. Sem framework, sem dependencia externa.

   Direcao de arte: as fotos do ensaio sao quentes (madeira, ambar,
   fundo escuro). Entao o site e escuro por padrao e abre clareiras
   creme para respirar. A comida e a unica fonte de cor saturada.

   Ordem: 1 fontes · 2 tokens · 3 base · 4 tipografia · 5 movimento
          6 botoes · 7 cabecalho · 8 hero · 9 secoes da home
          10 cardapio · 11 rodape · 12 cta fixo · 13 breakpoints
   ============================================================= */

/* ---------- 1. FONTES (self-hosted, sem request a terceiros) ---------- */
@font-face{font-family:Bungee;font-style:normal;font-weight:400;font-display:swap;
  src:url(../fonts/bungee-400-latin.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Bungee;font-style:normal;font-weight:400;font-display:swap;
  src:url(../fonts/bungee-400-latin-ext.woff2) format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:Poppins;font-style:normal;font-weight:400;font-display:swap;
  src:url(../fonts/poppins-400-latin.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Poppins;font-style:normal;font-weight:400;font-display:swap;
  src:url(../fonts/poppins-400-latin-ext.woff2) format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:Poppins;font-style:normal;font-weight:600;font-display:swap;
  src:url(../fonts/poppins-600-latin.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Poppins;font-style:normal;font-weight:600;font-display:swap;
  src:url(../fonts/poppins-600-latin-ext.woff2) format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:Poppins;font-style:normal;font-weight:800;font-display:swap;
  src:url(../fonts/poppins-800-latin.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Poppins;font-style:normal;font-weight:800;font-display:swap;
  src:url(../fonts/poppins-800-latin-ext.woff2) format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

/* ---------- 2. TOKENS ---------- */
:root{
  /* noite — o palco */
  --noite:#044704;      /* cor de fundo da marca */
  --noite-2:#055405;    /* superficie elevada: rodape, numeros, menu */
  --noite-3:#076307;    /* topo do degrade do hero */

  /* marca */
  --verde:#226D2C;
  --verde-cl:#4FA85C;
  --brasa:#F03B25;
  --brasa-esc:#C92B18;
  --brasa-cl:#FF7A5A;
  --ambar:#F2B25C;

  /* claros */
  --creme:#FBF6EC;
  --areia:#F0E6D4;
  --tinta:#141210;
  --cinza:#6B645C;
  --cinza-cl:#9AA79A;

  /* faixas de preco do cardapio */
  --c-amarelo:#F2C300; --c-verde:#1E9E3E; --c-vermelho:#E0281B;
  --c-azul:#17A5C4;    --c-laranja:#F08519; --c-branco:#FFFFFF; --c-roxo:#8E3FA8;

  /* tipografia */
  --display:Bungee,"Arial Black",system-ui,sans-serif;
  --texto:Poppins,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;

  /* medidas */
  --env:1240px;
  --gut:clamp(1.15rem,5vw,3rem);
  --r:16px;
  --r-g:24px;
  --r-x:34px;
  --topo-h:64px;
  --barra-h:0px;

  /* movimento — uma linguagem so para o site inteiro */
  --e-out:cubic-bezier(.16,1,.3,1);      /* entradas: rapido e assenta */
  --e-io:cubic-bezier(.76,0,.24,1);      /* transicoes simetricas */
  --e-suave:cubic-bezier(.33,1,.68,1);   /* hover e microinteracao */
  --t-s:.42s;
  --t-m:.8s;
  --t-l:1.15s;
}

/* ---------- 3. BASE ---------- */
*,*::before,*::after{box-sizing:border-box}
/* regra de seguranca: um seletor de classe com `display` venceria o [hidden]
   do navegador — e um overlay invisivel engoliria os cliques da pagina */
[hidden]{display:none!important}

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--topo-h) + 16px);
  background:var(--noite);
}
body{
  margin:0;
  background:var(--noite);
  color:var(--creme);
  font:400 1rem/1.65 var(--texto);
  letter-spacing:-.006em;
  /* clip nao cria contexto de rolagem: position:sticky continua funcionando
     (overflow:hidden quebraria os cabecalhos grudados do cardapio) */
  overflow-x:clip;
  padding-bottom:var(--barra-h);
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
/* o navegador da <figure> uma margem lateral de 40px por padrao — sem isto,
   toda figura sangrada nasce deslocada e estoura a largura da pagina */
figure{margin:0}
a{color:inherit}
h1,h2,h3,h4{margin:0;font-weight:400;letter-spacing:-.02em;text-wrap:balance}
p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
button{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--ambar);outline-offset:3px;border-radius:6px}
::selection{background:var(--brasa);color:#fff}

.env{width:100%;max-width:var(--env);margin-inline:auto;padding-inline:var(--gut)}
.env--estreito{max-width:900px}
.vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.pular{position:absolute;left:-9999px;top:0;z-index:99;background:var(--brasa);color:#fff;padding:.8rem 1.2rem;border-radius:0 0 12px 0}
.pular:focus{left:0}

/* clareiras claras dentro do site escuro */
.claro{background:var(--creme);color:var(--tinta)}
.claro .sub{color:var(--cinza)}

/* ---------- 4. TIPOGRAFIA ---------- */
.olho{
  font:600 .7rem/1 var(--texto);
  letter-spacing:.24em;text-transform:uppercase;
  color:var(--ambar);
  display:flex;align-items:center;
  margin-bottom:1.4rem;
}
.claro .olho{color:var(--brasa)}

.tit{
  font-family:var(--display);
  font-size:clamp(2.1rem,7.4vw,4.2rem);
  line-height:.95;letter-spacing:-.03em;
}
.tit--x{font-size:clamp(2.6rem,10vw,6.4rem);line-height:.9;letter-spacing:-.04em}
.tit em{font-style:normal;color:var(--brasa)}
.tit .grifo{color:var(--ambar)}
.claro .tit{color:var(--tinta)}
.claro .tit .grifo{color:var(--verde)}

.sub{
  margin-top:1.3rem;max-width:54ch;
  font-size:1.0625rem;line-height:1.7;
  color:#B9C8B7;
}

/* frase-manifesto: fonte de texto em corpo grande pesa menos que a display
   e deixa a leitura longa confortavel */
.frase{
  font:600 clamp(1.35rem,3.6vw,2.35rem)/1.32 var(--texto);
  letter-spacing:-.028em;text-wrap:balance;
}

/* ---------- 5. MOVIMENTO ---------- */
/* --------- 5.1 revelacao no scroll ---------
   Um unico IntersectionObserver marca .is-in. Cada primitiva descreve so o
   estado inicial; o estado final e sempre "sem transform". Tudo em transform
   e opacity (ou clip-path), nunca em propriedade que cause layout. */
@media (scripting:enabled){
  [data-rv]{
    opacity:0;
    transition:
      opacity var(--t-m) var(--e-out) var(--atraso,0s),
      transform var(--t-m) var(--e-out) var(--atraso,0s);
  }
  [data-rv="sobe"]{transform:translateY(28px)}
  [data-rv="desce"]{transform:translateY(-24px)}
  [data-rv="esq"]{transform:translateX(-34px)}
  [data-rv="dir"]{transform:translateX(34px)}
  [data-rv="escala"]{transform:scale(.94)}
  /* ATENCAO: a mascara vai na IMAGEM, nunca no elemento observado.
     O IntersectionObserver leva o clip-path do proprio alvo em conta: um
     elemento recortado a zero e reportado como fora de tela, nunca recebe
     .is-in e fica invisivel para sempre. Recortando o filho, o observador
     continua enxergando a caixa. */
  [data-rv="mascara"]{opacity:1}
  [data-rv="mascara"] > img{
    clip-path:inset(0 0 100% 0);
    transition:clip-path var(--t-l) var(--e-out) var(--atraso,0s),
               transform 1.4s var(--e-out) var(--atraso,0s);
  }
  [data-rv="mascara"].is-in > img{clip-path:inset(0 0 0 0)}

  /* Cada primitiva desfaz SO o que ela mesma aplicou. Um `transform:none`
     geral aqui apagaria transforms legitimos do layout — a rotacao de um
     cartao, o deslocamento de um elemento sangrado — e o item sumiria da tela
     no instante em que fosse revelado. */
  [data-rv].is-in{opacity:1}
  [data-rv="sobe"].is-in,
  [data-rv="desce"].is-in,
  [data-rv="esq"].is-in,
  [data-rv="dir"].is-in,
  [data-rv="escala"].is-in{transform:none}
}
/* atraso em cascata: o indice vem do HTML (--i) e nao do JS */
[style*="--i"]{--atraso:calc(var(--i) * .085s)}

/* linhas de titulo reveladas por mascara: o <i> sobe por tras da borda.
   O deslocamento inicial fica DENTRO do guard de scripting — sem JavaScript
   ninguem adiciona .is-in, e o titulo ficaria empurrado para fora do
   overflow:hidden, ou seja, invisivel. */
.ln{display:block;overflow:hidden;padding-bottom:.06em}
.ln > i{display:block;font-style:inherit}
@media (scripting:enabled){
  .ln > i{
    transform:translateY(115%);
    transition:transform var(--t-l) var(--e-out) var(--atraso,0s);
  }
  .is-in .ln > i,.ln.is-in > i{transform:none}
}
.ln:nth-child(1) > i{--atraso:.02s}
.ln:nth-child(2) > i{--atraso:.11s}
.ln:nth-child(3) > i{--atraso:.2s}
.ln:nth-child(4) > i{--atraso:.29s}

/* imagem revelada por mascara + o proprio quadro dando um zoom-out lento:
   cria profundidade sem mexer no layout */
.moldura{position:relative;overflow:hidden;border-radius:var(--r-g);background:var(--noite-2)}
.moldura > img{width:100%;height:100%;object-fit:cover;display:block}
@media (scripting:enabled){
  .moldura[data-rv="mascara"] > img{
    transform:scale(1.14);
    transition:transform 1.4s var(--e-out) var(--atraso,0s);
  }
  .moldura[data-rv="mascara"].is-in > img{transform:scale(1)}
}

/* parallax: o JS so escreve --par (-1 a 1). A conta fica no CSS. */
[data-par]{transform:translate3d(0,calc(var(--par,0) * var(--par-y,42px)),0)}
[data-par="lento"]{--par-y:26px}
[data-par="medio"]{--par-y:52px}
[data-par="forte"]{--par-y:84px}

/* --------- 5.3 faixas que correm ---------
   O CSS anima por padrao para o site continuar vivo sem JavaScript. Quando o
   JS entra, ele zera esta animacao e assume o trilho para reagir ao scroll. */
.faixa__trilho,.insta__trilho{animation:desliza var(--dur,34s) linear infinite}
.insta__trilho{--dur:48s}
@keyframes desliza{to{transform:translate3d(-50%,0,0)}}
@media (hover:hover){
  .faixa:hover .faixa__trilho,.insta__fita:hover .insta__trilho{animation-play-state:paused}
}

/* --------- 5.4 profundidade pelo ponteiro ---------
   O JS escreve --px/--py (-1 a 1) e o CSS decide o quanto cada camada anda. */
[data-ponteiro]{
  transform:translate3d(calc(var(--px,0) * 10px),calc(var(--py,0) * 10px),0);
  transition:transform .8s var(--e-suave);
}
[data-ponteiro] .hero__fatia{
  transform:rotate(4deg) translate3d(calc(var(--px,0) * -22px),calc(var(--py,0) * -16px),0);
  transition:transform 1s var(--e-suave);
}

/* --------- 5.2 cortina de transicao entre paginas ---------
   Regra de seguranca: o estado PADRAO e fora da tela, e a abertura e uma
   animacao CSS pura. Assim, se o JavaScript falhar, travar ou nem carregar,
   a cortina sai sozinha — nunca existe o risco de a pagina ficar preta.
   O JS so cuida da SAIDA, quando a pessoa navega para a outra pagina. */
.cortina{
  position:fixed;inset:0;z-index:200;
  background:var(--noite-2);
  pointer-events:none;
  transform:translateY(-101%);
  display:grid;place-items:center;
  animation:cortina-abre .9s var(--e-io) both;
}
.cortina__marca{width:96px;animation:marca-some .45s linear both}
@keyframes cortina-abre{
  0%{transform:translateY(0)}
  100%{transform:translateY(-101%)}
}
@keyframes marca-some{
  0%,40%{opacity:.92}
  100%{opacity:0}
}
/* saida: desce de volta antes de trocar de pagina */
.cortina.is-fechando{
  animation:none;
  transform:translateY(0);
  transition:transform .55s var(--e-io);
}

/* ---------- 6. BOTOES E MICROINTERACOES ---------- */
.btn{
  --bg:var(--brasa); --fg:#fff;
  position:relative;isolation:isolate;
  display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  min-height:54px;padding:.95rem 1.75rem;
  background:var(--bg);color:var(--fg);
  border:none;border-radius:999px;
  font:600 1rem/1.15 var(--texto);letter-spacing:-.012em;
  text-decoration:none;cursor:pointer;overflow:hidden;
  transition:transform var(--t-s) var(--e-suave),box-shadow var(--t-s) var(--e-suave);
}
/* brilho que varre o botao no hover — o preenchimento cresce do centro */
.btn::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:var(--bg-hover,rgba(255,255,255,.16));
  transform:scaleY(0);transform-origin:bottom;
  transition:transform var(--t-s) var(--e-io);
}
.btn > *{position:relative;z-index:1}
.btn:active{transform:scale(.975)}
.btn .ico{width:21px;height:21px;fill:currentColor;flex:none}
.btn--g{min-height:60px;padding:1.05rem 2rem;font-size:1.05rem}
.btn--bloco{display:flex;width:100%}
.btn--zap{--bg:var(--brasa);--bg-hover:var(--brasa-esc)}
.btn--ambar{--bg:var(--ambar);--fg:var(--noite);--bg-hover:#FFC978}
.btn--creme{--bg:var(--creme);--fg:var(--noite);--bg-hover:#fff}
.btn--verde{--bg:var(--verde);--fg:#fff;--bg-hover:var(--verde-cl)}
.btn--vidro{
  --bg:rgba(251,246,236,.07);--fg:var(--creme);--bg-hover:rgba(251,246,236,.16);
  box-shadow:inset 0 0 0 1.5px rgba(251,246,236,.34);
}
.btn--linha{--bg:transparent;--fg:var(--verde);--bg-hover:rgba(34,109,44,.09);box-shadow:inset 0 0 0 2px rgba(34,109,44,.34)}
.btn--linha-claro{--bg:transparent;--fg:var(--creme);--bg-hover:rgba(251,246,236,.12);box-shadow:inset 0 0 0 1.5px rgba(251,246,236,.36)}

@media (hover:hover){
  .btn:hover{transform:translateY(-3px);box-shadow:0 14px 30px -14px rgba(0,0,0,.7)}
  .btn:hover::before{transform:scaleY(1)}
}

/* link com sublinhado que corre da esquerda */
.link{
  display:inline-flex;align-items:center;gap:.5rem;
  min-height:44px;
  font:600 .95rem/1 var(--texto);color:var(--ambar);
  text-decoration:none;position:relative;
}
.link::after{content:"→";transition:transform var(--t-s) var(--e-suave)}
.link > span{position:relative}
.link > span::after{
  content:"";position:absolute;left:0;right:0;bottom:-4px;height:1.5px;
  background:currentColor;transform:scaleX(0);transform-origin:right;
  transition:transform var(--t-s) var(--e-io);
}
@media (hover:hover){
  .link:hover::after{transform:translateX(6px)}
  .link:hover > span::after{transform:scaleX(1);transform-origin:left}
}
.claro .link{color:var(--verde)}

/* ---------- 7. CABECALHO ---------- */
/* O cabecalho fica SEMPRE na tela depois que a pessoa rola. Ja tentamos
   escondê-lo ao descer para ganhar area util, mas o vai-e-vem incomoda mais
   do que os 78px que economiza — e o botao de pedido precisa estar sempre
   a um toque. */
.topo{
  position:fixed;inset:0 0 auto;z-index:50;
  padding-top:env(safe-area-inset-top);
  transition:background-color var(--t-s) var(--e-suave),
             box-shadow var(--t-s) var(--e-suave);
}
/* O texto do cabecalho e sempre creme, e ele passa por cima de secoes claras
   e escuras. Uma barra muito translucida vira um cinza turvo sobre o creme e
   derruba o contraste — entao a opacidade fica alta o bastante para o fundo
   ser sempre escuro, com o blur so dando profundidade. */
.topo.is-fixo{background:rgba(4,71,4,.95);box-shadow:0 1px 0 rgba(251,246,236,.1)}
@supports (backdrop-filter:blur(8px)){
  .topo.is-fixo{background:rgba(4,71,4,.86);backdrop-filter:blur(16px) saturate(1.3)}
}

.topo__barra{
  width:100%;max-width:var(--env);margin-inline:auto;
  padding-inline:var(--gut);
  height:var(--topo-h);
  display:flex;align-items:center;gap:.7rem;
}
.topo__logo{flex:none;line-height:0;transition:transform var(--t-s) var(--e-suave)}
.topo__logo img{width:106px;height:auto}
@media (hover:hover){.topo__logo:hover{transform:scale(1.04)}}
.topo__links{display:none}
.topo__cta{margin-left:auto;min-height:44px;padding:.55rem 1.15rem;font-size:.9rem}
.topo__cta .ico{width:18px;height:18px}

.topo__menu{
  flex:none;width:46px;height:46px;margin-right:calc(var(--gut) * -.3);
  display:grid;place-content:center;gap:6px;
  background:none;border:0;cursor:pointer;
}
.topo__menu span{
  display:block;width:24px;height:2px;background:var(--creme);border-radius:2px;
  transition:transform var(--t-s) var(--e-io),opacity var(--t-s) var(--e-io);
}
.topo__menu[aria-expanded="true"] span:first-child{transform:translateY(4px) rotate(45deg)}
.topo__menu[aria-expanded="true"] span:last-child{transform:translateY(-4px) rotate(-45deg)}

/* linha de progresso da leitura */
.topo__progresso{
  position:absolute;left:0;bottom:0;height:2px;width:100%;
  background:linear-gradient(90deg,var(--brasa),var(--ambar));
  transform:scaleX(var(--lido,0));transform-origin:left;
  opacity:0;transition:opacity var(--t-s) var(--e-suave);
}
.topo.is-fixo .topo__progresso{opacity:1}

/* menu overlay (celular) */
.mmenu{
  position:fixed;inset:0;z-index:45;
  background:var(--noite-2);
  padding:calc(var(--topo-h) + env(safe-area-inset-top) + 2.4rem) var(--gut) calc(2rem + env(safe-area-inset-bottom));
  display:flex;flex-direction:column;justify-content:space-between;gap:2rem;
  opacity:0;
  transition:opacity .34s var(--e-io);
  overflow-y:auto;
}
.mmenu::after{
  content:"";position:absolute;inset:auto -30% -30% -30%;height:60%;z-index:-1;
  background:radial-gradient(50% 100% at 50% 100%,rgba(240,59,37,.3),transparent 70%);
}
.mmenu.is-on{opacity:1}
.mmenu__nav a{
  display:flex;align-items:baseline;gap:1rem;
  padding:.6rem 0;
  font-family:var(--display);font-size:clamp(1.8rem,8.6vw,2.6rem);line-height:1.12;
  color:var(--creme);text-decoration:none;
  opacity:0;transform:translateY(24px);
  transition:opacity .5s var(--e-out),transform .5s var(--e-out),color var(--t-s) var(--e-suave);
}
.mmenu.is-on .mmenu__nav a{opacity:1;transform:none}
.mmenu.is-on .mmenu__nav a:nth-child(1){transition-delay:.1s}
.mmenu.is-on .mmenu__nav a:nth-child(2){transition-delay:.16s}
.mmenu.is-on .mmenu__nav a:nth-child(3){transition-delay:.22s}
.mmenu.is-on .mmenu__nav a:nth-child(4){transition-delay:.28s}
.mmenu.is-on .mmenu__nav a:nth-child(5){transition-delay:.34s}
.mmenu.is-on .mmenu__nav a:nth-child(6){transition-delay:.4s}
.mmenu__nav a i{font:600 .7rem/1 var(--texto);font-style:normal;color:var(--brasa);letter-spacing:.12em}
@media (hover:hover){.mmenu__nav a:hover{color:var(--ambar)}}
.mmenu__pe p{margin-top:1rem;font-size:.85rem;color:var(--cinza-cl);text-align:center}

/* ---------- 8. HERO ---------- */
.hero{
  position:relative;isolation:isolate;
  min-height:100svh;
  padding:calc(var(--topo-h) + env(safe-area-inset-top) + 1.6rem) 0 1.6rem;
  display:flex;flex-direction:column;justify-content:center;
  overflow:hidden;
}
.hero__fundo{
  position:absolute;inset:-10% 0 0;z-index:-2;
  background:
    radial-gradient(80% 55% at 78% 16%,rgba(242,178,92,.2) 0%,transparent 62%),
    radial-gradient(90% 60% at 20% 90%,rgba(240,59,37,.16) 0%,transparent 60%),
    linear-gradient(170deg,var(--noite-3) 0%,var(--noite) 58%,#022D02 100%);
}
/* trama de pontos que some para baixo: textura sem custo de imagem */
.hero__fundo::after{
  content:"";position:absolute;inset:0;
  background-image:radial-gradient(rgba(251,246,236,.14) 1px,transparent 1px);
  background-size:18px 18px;opacity:.55;
  mask-image:linear-gradient(180deg,#000 0%,transparent 74%);
}
.hero__grade{
  width:100%;max-width:var(--env);margin-inline:auto;padding-inline:var(--gut);
  display:grid;
}
.hero__olho{
  font:600 .68rem/1 var(--texto);letter-spacing:.26em;text-transform:uppercase;
  color:var(--ambar);margin-bottom:1.1rem;
}
/* o teto do clamp existe para as tres linhas caberem inteiras na coluna:
   acima de ~4.6rem "MAIS FAMOSA" quebra sozinho e a revelacao por mascara
   (uma linha por vez) perde o sentido */
.hero__titulo{
  font-family:var(--display);
  font-size:clamp(2.5rem,10.4vw,4.6rem);
  line-height:.94;letter-spacing:-.04em;
}
.hero__titulo .grifo{color:var(--ambar)}
.hero__titulo em{font-style:normal;color:var(--brasa)}

/* palco da pizza: o disco e o cartao da fatia se sobrepoem */
/* O anel de texto e 18% maior que o disco. Entao o palco nunca pode ocupar a
   largura inteira: 84% deixa a folga exata para o selo girar sem ser cortado
   pela borda da tela. */
.hero__palco{
  position:relative;
  width:min(84%,300px);
  margin:1.1rem auto .3rem;
  aspect-ratio:1;
}
.hero__disco{position:absolute;inset:0}
.hero__disco img{
  width:100%;height:100%;border-radius:50%;object-fit:cover;
  box-shadow:0 40px 80px -30px rgba(0,0,0,.95),0 0 0 1px rgba(251,246,236,.08);
}
/* giro continuo lentissimo: a pizza "assa" enquanto a pagina esta parada */
/* 36s da uma volta: em 3 segundos de olhada a pizza anda 30 graus, o bastante
   para o padrao das rodelas de tomate mudar de lugar e a rotacao ser notada.
   Em 68s eram 16 graus, e numa forma quase simetrica isso passa batido. */
.hero__disco{animation:girar 36s linear infinite}
/* o anel de texto precisa correr POR FORA da borda da pizza. A caixa do selo
   e 18% maior que o disco e o raio do caminho e 46% dela: 54% do disco, ou
   seja, sempre fora dos 50% onde a foto termina. */
.hero__selo{position:absolute;inset:-9%;animation:girar 30s linear infinite reverse}
.hero__selo svg{width:100%;height:100%;overflow:visible}
.hero__selo text{
  font:600 5.2px/1 var(--texto);letter-spacing:.34em;
  fill:rgba(251,246,236,.42);text-transform:uppercase;
}
@keyframes girar{to{transform:rotate(360deg)}}

/* cartao da fatia, deslocado para fora do disco */
.hero__fatia{
  position:absolute;right:-6%;bottom:-4%;
  width:44%;aspect-ratio:1;
  border-radius:22px;overflow:hidden;
  box-shadow:0 30px 60px -22px rgba(0,0,0,.9);
  border:3px solid rgba(251,246,236,.9);
  transform:rotate(4deg);
}
.hero__fatia img{width:100%;height:100%;object-fit:cover}

.hero__texto{margin-top:1.1rem;font-size:1rem;line-height:1.7;color:#B9C8B7;max-width:44ch}
.hero__acoes{display:grid;gap:.6rem;margin-top:1.2rem}
.hero__acoes .btn{width:100%}

.hero__provas{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:.6rem;margin-top:1.9rem;
  border-top:1px solid rgba(251,246,236,.14);padding-top:1.1rem;
}
.hero__provas li{font-size:.7rem;line-height:1.34;color:var(--cinza-cl)}
.hero__provas b{
  display:block;font-family:var(--display);font-size:1.1rem;
  color:var(--creme);letter-spacing:-.02em;
}
.hero__provas b .estrela{color:var(--ambar);font-size:.85em}

/* seta de rolagem */
.hero__rolar{
  display:none;
  position:absolute;left:50%;bottom:1.2rem;transform:translateX(-50%);
  font:600 .62rem/1 var(--texto);letter-spacing:.2em;text-transform:uppercase;
  color:var(--cinza-cl);text-decoration:none;
  align-items:center;gap:.6rem;flex-direction:column;
}
.hero__rolar::after{
  content:"";width:1px;height:38px;
  background:linear-gradient(var(--ambar),transparent);
  animation:descer 2.4s var(--e-io) infinite;
}
@keyframes descer{
  0%{transform:scaleY(0);transform-origin:top}
  45%{transform:scaleY(1);transform-origin:top}
  55%{transform:scaleY(1);transform-origin:bottom}
  100%{transform:scaleY(0);transform-origin:bottom}
}

/* ---------- 9. SECOES DA HOME ---------- */

/* --------- 9.1 faixa cinetica --------- */
.faixa{
  background:var(--brasa);color:var(--creme);
  padding:.85rem 0;overflow:hidden;
  border-block:1px solid rgba(4,71,4,.35);
}
.faixa__trilho{display:flex;width:max-content;will-change:transform}
.faixa__trilho span{
  font-family:var(--display);font-size:1rem;letter-spacing:.01em;
  white-space:nowrap;padding-right:.7rem;
}
.faixa__trilho i{font-style:normal;opacity:.5;padding-inline:.5rem;font-size:.7em;vertical-align:middle}

/* --------- 9.2 manifesto --------- */
.manif{padding:5rem 0 0;position:relative}
.manif__frase{margin-top:1.6rem;max-width:22ch}
.manif__frase .grifo{color:var(--ambar)}
.manif__apoio{margin-top:2rem;display:grid;gap:1.1rem;max-width:60ch}
.manif__apoio p{color:#A9BCA8;font-size:1.02rem;line-height:1.75}
/* sangra de borda a borda sem truque de margem negativa: a figura ja e filha
   direta da <section>, entao 100% aqui e a largura da janela */
.manif__macro{
  margin-top:3rem;width:100%;
  aspect-ratio:16/9;max-height:70vh;
  border-radius:0;
}
.manif__macro::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(4,71,4,.5) 0%,transparent 30%,rgba(4,71,4,.75) 100%);
}
.manif__legenda{
  position:absolute;left:var(--gut);right:var(--gut);bottom:1.4rem;z-index:2;
  font:600 .72rem/1.5 var(--texto);letter-spacing:.16em;text-transform:uppercase;
  color:rgba(251,246,236,.86);
}

/* --------- 9.3 assinaturas (grade assimetrica) --------- */
.assina{padding:4.4rem 0 4rem;position:relative}
.assina__topo{display:grid;gap:1.2rem}
.assina__grade{
  margin-top:2.6rem;
  display:grid;grid-template-columns:repeat(2,1fr);
  gap:.7rem;
}
.assina__f{position:relative}
.assina__f img{width:100%;height:100%;object-fit:cover}
/* ritmo: alturas diferentes e um deslocamento vertical em duas celulas */
.assina__f--1{aspect-ratio:3/4}
.assina__f--2{aspect-ratio:1;margin-top:2.2rem}
.assina__f--3{aspect-ratio:4/3;grid-column:1 / -1}
.assina__f--4{aspect-ratio:1}
.assina__f--5{aspect-ratio:3/4;margin-top:-1.4rem}
.assina__f--6{aspect-ratio:4/3;grid-column:1 / -1}
.assina__cap{
  position:absolute;left:0;bottom:0;right:0;z-index:2;
  padding:2.4rem .95rem .9rem;
  background:linear-gradient(transparent,rgba(4,71,4,.86));
  font:600 .68rem/1.3 var(--texto);letter-spacing:.14em;text-transform:uppercase;
  color:rgba(251,246,236,.92);
  transform:translateY(6px);opacity:0;
  transition:transform var(--t-m) var(--e-out),opacity var(--t-m) var(--e-out);
}
.assina__f.is-in .assina__cap{transform:none;opacity:1}
@media (hover:hover){
  .assina__f img{transition:transform 1s var(--e-suave)}
  .assina__f:hover img{transform:scale(1.06)}
}
.assina__pe{margin-top:2.4rem;display:grid;gap:1rem;justify-items:start}

/* --------- 9.4 modalidades --------- */
.modos{padding:4.6rem 0 4.4rem}
.modos__lista{margin-top:2.6rem;display:grid;gap:1.6rem}
.modo{
  display:grid;gap:1.1rem;
  padding-top:1.6rem;
  border-top:1px solid rgba(20,18,16,.14);
  position:relative;
}
.modo__foto{aspect-ratio:1;border-radius:var(--r-g);overflow:hidden;order:-1}
.modo__foto img{width:100%;height:100%;object-fit:cover}
.modo__num{
  font:600 .68rem/1 var(--texto);letter-spacing:.2em;color:var(--brasa);
  margin-bottom:.7rem;display:block;
}
.modo h3{font-family:var(--display);font-size:1.7rem;line-height:1;color:var(--tinta)}
.modo__linha{
  margin:.6rem 0 .9rem;
  font:600 .72rem/1.4 var(--texto);letter-spacing:.08em;text-transform:uppercase;
  color:var(--verde);
}
.modo__corpo > p:last-of-type{font-size:.99rem;color:var(--cinza);line-height:1.7}
.modo b{font-weight:600;color:var(--verde)}
@media (hover:hover){
  .modo__foto img{transition:transform 1s var(--e-suave)}
  .modo:hover .modo__foto img{transform:scale(1.05)}
}

/* --------- 9.5 numeros --------- */
.nums{padding:3.4rem 0;background:var(--noite-2)}
.nums__grade{display:grid;grid-template-columns:repeat(2,1fr);gap:1.8rem 1rem}
.nums__item b{
  display:block;font-family:var(--display);
  font-size:clamp(2rem,7vw,3.4rem);line-height:1;letter-spacing:-.035em;
  color:var(--ambar);
  font-variant-numeric:tabular-nums;
}
.nums__item span{
  display:block;margin-top:.6rem;
  font-size:.85rem;line-height:1.45;color:var(--cinza-cl);max-width:20ch;
}

/* --------- 9.6 ambiente --------- */
.amb{position:relative;padding:4.6rem 0 4.2rem;overflow:hidden}
.amb__galeria{
  display:flex;gap:.8rem;margin-top:2.2rem;
  overflow-x:auto;scroll-snap-type:x mandatory;
  scroll-padding-inline-start:var(--gut);
  padding:0 var(--gut) 1.2rem;
  scrollbar-width:none;overscroll-behavior-x:contain;
}
.amb__galeria::-webkit-scrollbar{display:none}
.amb__f{
  flex:0 0 auto;width:min(80vw,440px);scroll-snap-align:start;
  margin:0;position:relative;
}
.amb__f .moldura{aspect-ratio:3/2}
.amb__f figcaption{
  margin-top:.8rem;
  font:600 .7rem/1 var(--texto);letter-spacing:.16em;text-transform:uppercase;
  color:var(--ambar);
}
.amb__f--alta{width:min(86vw,520px)}
.amb__pe{margin-top:1.6rem;display:grid;gap:1.2rem}
.amb__pe p{color:#A9BCA8;max-width:44ch}
.amb__pe .btn{justify-self:start}

/* --------- 9.7 chamada do cardapio --------- */
.chamada{position:relative;overflow:hidden;isolation:isolate}
.chamada__fundo{position:absolute;inset:0;z-index:-1}
.chamada__fundo img{width:100%;height:100%;object-fit:cover}
/* dois veus: o horizontal protege o texto, que fica a esquerda, e deixa a
   pizza aparecer a direita; o vertical costura a secao com as vizinhas */
.chamada__fundo::after{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(90deg,rgba(4,71,4,.94) 0%,rgba(4,71,4,.86) 34%,rgba(4,71,4,.42) 78%,rgba(4,71,4,.3) 100%),
    linear-gradient(180deg,rgba(4,71,4,.86),rgba(4,71,4,.4) 45%,rgba(4,71,4,.94));
}
.chamada__env{
  position:relative;padding-block:5.5rem;
  display:grid;gap:1.4rem;justify-items:start;
}
.chamada .tit{max-width:14ch}

/* --------- 9.8 unidades --------- */
.unid{padding:4.6rem 0 4.2rem}
.unid__grade{margin-top:2.4rem;display:grid;gap:1rem}
.loja{
  background:#fff;border:1px solid rgba(20,18,16,.08);
  border-radius:var(--r-g);padding:1.7rem 1.5rem;
  box-shadow:0 2px 12px -8px rgba(20,18,16,.24);
  transition:transform var(--t-m) var(--e-suave),box-shadow var(--t-m) var(--e-suave);
}
@media (hover:hover){
  .loja:hover{transform:translateY(-6px);box-shadow:0 26px 44px -26px rgba(20,18,16,.5)}
}
.loja__tag{
  display:inline-block;margin-bottom:.7rem;
  font:600 .6rem/1 var(--texto);letter-spacing:.16em;text-transform:uppercase;
  color:var(--verde);background:rgba(34,109,44,.1);
  padding:.42rem .68rem;border-radius:999px;
}
.loja h3{font-family:var(--display);font-size:1.9rem;line-height:1;color:var(--tinta)}
.loja__end{margin-top:.8rem;font-size:.98rem;color:var(--cinza);line-height:1.6}
.loja__pontos{margin-top:1.1rem;display:grid;gap:.45rem}
.loja__pontos li{position:relative;padding-left:1.4rem;font-size:.92rem;color:var(--cinza)}
.loja__pontos li::before{
  content:"";position:absolute;left:0;top:.55em;
  width:7px;height:7px;border-radius:50%;background:var(--brasa);
}
.loja__hora{
  margin-top:1.2rem;padding-top:1.1rem;border-top:1px solid rgba(20,18,16,.1);
  font-size:.92rem;color:var(--cinza);line-height:1.75;
}
.loja__hora b{font-weight:600;color:var(--verde)}
.loja__acoes{margin-top:1.3rem;display:grid;gap:.6rem}
.loja__tel{margin-top:.9rem;text-align:center;font-size:.9rem;color:var(--cinza)}
.loja__tel a{
  display:inline-block;padding:.6rem .3rem;font-weight:600;color:var(--verde);
  text-decoration:underline;text-decoration-color:rgba(34,109,44,.36);text-underline-offset:3px;
  transition:text-decoration-color var(--t-s) var(--e-suave);
}
@media (hover:hover){.loja__tel a:hover{text-decoration-color:var(--verde)}}

/* --------- 9.9 pedir + faq --------- */
.pedir{position:relative;overflow:hidden;padding:5rem 0 4.4rem}
.pedir::before{
  content:"";position:absolute;inset:auto -20% -45% -20%;height:70%;
  background:radial-gradient(50% 100% at 50% 100%,rgba(240,59,37,.26),transparent 68%);
  pointer-events:none;
}
.pedir__env{position:relative}
.pedir__txt{margin-top:1.4rem;font-size:1.06rem;color:#B9C8B7;max-width:48ch;line-height:1.75}
.pedir__botoes{margin-top:2rem;display:grid;gap:.75rem}
.contatos{margin-top:2.6rem}
.contatos__tit{
  font:600 .7rem/1 var(--texto);letter-spacing:.18em;text-transform:uppercase;
  color:var(--cinza-cl);margin-bottom:1rem;
}
.contatos__grade{display:grid;gap:.75rem}
.contato{
  background:rgba(251,246,236,.05);
  border:1px solid rgba(251,246,236,.13);
  border-radius:var(--r);padding:1.2rem 1.3rem;
  transition:background-color var(--t-s) var(--e-suave),border-color var(--t-s) var(--e-suave);
}
@media (hover:hover){.contato:hover{background:rgba(251,246,236,.09);border-color:rgba(242,178,92,.4)}}
.contato h3{font-family:var(--display);font-size:1.15rem;color:var(--ambar);margin-bottom:.5rem}
.contato a{display:flex;align-items:center;gap:.55rem;min-height:44px;font-size:.95rem;color:var(--creme);text-decoration:none}
.contato a b{font:600 .62rem/1 var(--texto);letter-spacing:.12em;text-transform:uppercase;color:var(--cinza-cl);min-width:5.6em}
@media (hover:hover){.contato a:hover{color:#fff}.contato a:hover b{color:var(--ambar)}}

.faq{margin-top:3rem;border-top:1px solid rgba(251,246,236,.14)}
.faq li{border-bottom:1px solid rgba(251,246,236,.14)}
.faq summary{
  list-style:none;cursor:pointer;
  padding:1.2rem 2.4rem 1.2rem 0;position:relative;
  font:600 1rem/1.45 var(--texto);color:var(--creme);
  transition:color var(--t-s) var(--e-suave);
}
.faq summary::-webkit-details-marker{display:none}
@media (hover:hover){.faq summary:hover{color:var(--ambar)}}
.faq summary::after{
  content:"";position:absolute;right:.5rem;top:1.5rem;
  width:10px;height:10px;border-right:2px solid var(--ambar);border-bottom:2px solid var(--ambar);
  transform:rotate(45deg);transition:transform var(--t-s) var(--e-io);
}
.faq details[open] summary::after{transform:rotate(-135deg)}
.faq p{padding:0 0 1.3rem;font-size:.96rem;color:#A9BCA8;line-height:1.7;max-width:60ch}

/* --------- 9.10 instagram --------- */
.insta{padding:4.4rem 0 4.6rem;overflow:hidden}
.insta__topo{display:flex;align-items:center;gap:.95rem;margin-bottom:1.8rem}
.insta__ava{width:62px;height:62px;border-radius:50%;flex:none;box-shadow:0 0 0 3px var(--creme),0 0 0 5.5px var(--brasa)}
.insta__arroba{font-family:var(--display);font-size:1.1rem;color:var(--tinta);letter-spacing:-.02em}
.insta__meta{font-size:.85rem;color:var(--cinza)}
.insta__meta b{font-weight:600;color:var(--tinta)}
.insta__fita{
  margin:2.2rem 0 2rem;width:100%;
  overflow:hidden;padding-block:1.1rem;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
}
.insta__trilho{display:flex;gap:.8rem;width:max-content;will-change:transform}
.insta__trilho img{
  width:140px;height:140px;flex:none;object-fit:cover;
  border:5px solid #fff;border-radius:6px;
  box-shadow:0 10px 24px -14px rgba(20,18,16,.7);
  transition:transform var(--t-m) var(--e-suave);
}
.insta__trilho img:nth-child(3n+1){transform:rotate(-2.4deg)}
.insta__trilho img:nth-child(3n+2){transform:rotate(1.8deg) translateY(9px)}
.insta__trilho img:nth-child(3n+3){transform:rotate(-.8deg) translateY(-5px)}
@media (hover:hover){
  .insta__trilho img:hover{transform:rotate(0) scale(1.08);z-index:2;position:relative}
}
.insta .btn{width:100%}

/* ---------- 10. PAGINA DO CARDAPIO ---------- */
.mhero{
  position:relative;isolation:isolate;overflow:hidden;
  padding:calc(var(--topo-h) + env(safe-area-inset-top) + 3.4rem) 0 3rem;
}
.mhero__fundo{position:absolute;inset:0;z-index:-1}
.mhero__fundo img{width:100%;height:100%;object-fit:cover}
.mhero__fundo::after{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(90deg,rgba(4,71,4,.92) 0%,rgba(4,71,4,.8) 45%,rgba(4,71,4,.5) 100%),
    linear-gradient(180deg,rgba(4,71,4,.8),rgba(4,71,4,.55) 45%,var(--noite));
}
.mhero__meta{
  margin-top:2rem;display:flex;flex-wrap:wrap;gap:.5rem;
}
.mhero__meta li{
  font:600 .7rem/1 var(--texto);letter-spacing:.1em;text-transform:uppercase;
  color:var(--creme);background:rgba(251,246,236,.1);
  border:1px solid rgba(251,246,236,.18);
  padding:.6rem .85rem;border-radius:999px;
}

/* barra de controle grudada */
.filtro{
  position:sticky;top:calc(var(--topo-h) + env(safe-area-inset-top));
  z-index:20;
  margin-inline:calc(var(--gut) * -1);
  padding:.9rem var(--gut) 1rem;
  background:linear-gradient(var(--noite) 82%,rgba(4,71,4,0));
}
@supports (backdrop-filter:blur(8px)){
  /* opaco o bastante para os cartoes nao aparecerem como fantasma atras dos
     chips enquanto a lista rola por baixo */
  .filtro{background:rgba(4,71,4,.94);backdrop-filter:blur(14px)}
}
.filtro__busca{
  display:flex;align-items:center;gap:.7rem;
  background:rgba(251,246,236,.07);
  border:1.5px solid rgba(251,246,236,.18);
  border-radius:999px;padding:.1rem 1.05rem;min-height:52px;
  transition:border-color var(--t-s) var(--e-suave),background-color var(--t-s) var(--e-suave);
}
.filtro__busca:focus-within{border-color:var(--ambar);background:rgba(251,246,236,.1)}
.filtro__busca svg{width:19px;height:19px;fill:var(--cinza-cl);flex:none}
.filtro__busca input{
  flex:1;min-width:0;border:0;background:none;outline:none;
  font:400 1rem/1 var(--texto);color:var(--creme);padding:.95rem 0;
}
.filtro__busca input::placeholder{color:var(--cinza-cl)}
.filtro__busca input::-webkit-search-cancel-button{filter:grayscale(1) invert(1);opacity:.6}

.filtro__chips{
  display:flex;gap:.5rem;margin-top:.7rem;
  overflow-x:auto;scrollbar-width:none;padding-bottom:.2rem;
}
.filtro__chips::-webkit-scrollbar{display:none}
.chip{
  flex:none;min-height:42px;padding:.55rem 1.1rem;
  background:transparent;border:1.5px solid rgba(251,246,236,.2);border-radius:999px;
  font:600 .875rem/1 var(--texto);color:var(--creme);cursor:pointer;
  transition:background-color var(--t-s) var(--e-suave),color var(--t-s) var(--e-suave),
             border-color var(--t-s) var(--e-suave),transform var(--t-s) var(--e-suave);
}
@media (hover:hover){.chip:hover{border-color:var(--ambar);transform:translateY(-2px)}}
.chip.is-on{background:var(--ambar);border-color:var(--ambar);color:var(--noite)}
.filtro__vazio{margin:1.6rem 0;color:var(--cinza-cl);font-size:.98rem}

.grupo{margin-top:3rem;scroll-margin-top:calc(var(--topo-h) + 120px)}
.grupo[hidden]{display:none}
.grupo__cab{
  display:flex;align-items:flex-end;justify-content:space-between;gap:1rem;
  padding-bottom:.8rem;border-bottom:1px solid rgba(251,246,236,.18);
}
.grupo__tit{font-family:var(--display);font-size:clamp(1.5rem,5vw,2.2rem);color:var(--creme);line-height:1}
.grupo__conta{font:600 .7rem/1 var(--texto);letter-spacing:.14em;text-transform:uppercase;color:var(--cinza-cl);white-space:nowrap}
.grupo__nota{margin-top:.9rem;font-size:.9rem;color:var(--cinza-cl);max-width:56ch}

.itens{margin-top:1.4rem;display:grid;gap:.55rem}
.item{
  display:grid;grid-template-columns:auto 1fr;column-gap:.85rem;
  align-content:start;
  padding:1rem 1.1rem;
  background:rgba(251,246,236,.035);
  border:1px solid rgba(251,246,236,.08);
  border-radius:var(--r);
  transition:background-color var(--t-s) var(--e-suave),border-color var(--t-s) var(--e-suave),
             transform var(--t-s) var(--e-suave);
}
.item[hidden]{display:none}
@media (hover:hover){
  .item:hover{background:rgba(251,246,236,.075);border-color:rgba(242,178,92,.36);transform:translateY(-3px)}
}
.item b{
  grid-column:2;
  font:600 1.03rem/1.3 var(--texto);color:var(--creme);letter-spacing:-.014em;
  display:flex;flex-wrap:wrap;align-items:baseline;gap:.5rem;
}
.item span{grid-column:2;margin-top:.2rem;font-size:.89rem;color:var(--cinza-cl);line-height:1.55}
.item .dot{grid-column:1;grid-row:1 / span 2;margin-top:.45rem}
.item--casa b::after{
  content:"da casa";
  font:600 .58rem/1 var(--texto);letter-spacing:.1em;text-transform:uppercase;
  background:var(--brasa);color:#fff;padding:.32rem .48rem;border-radius:4px;
}
.itens--preco .item{grid-template-columns:1fr}
.itens--preco .item b,.itens--preco .item span{grid-column:1}

/* --------- sabor com foto ---------
   Só os sabores com foto CONFIRMADA recebem data-foto (ver SABORES em
   tools/build-destaques.js). Quem nao tem foto continua sendo um item comum,
   sem seta e sem clique — melhor nao abrir nada do que abrir a foto errada. */
.item[data-foto]{cursor:pointer;padding-right:2.8rem}
.item[data-foto]::after{
  content:"";position:absolute;right:1.15rem;top:1.4rem;
  width:8px;height:8px;
  border-right:2px solid var(--ambar);border-bottom:2px solid var(--ambar);
  transform:rotate(45deg);
  transition:transform var(--t-s) var(--e-io);
}
.item[data-foto].is-aberto::after{transform:rotate(-135deg)}
/* 0fr -> 1fr anima a altura sem precisar saber o tamanho da imagem */
.item__foto{
  grid-column:1 / -1;
  display:grid;grid-template-rows:0fr;margin-top:0;
  transition:grid-template-rows var(--t-m) var(--e-io),margin-top var(--t-m) var(--e-io);
}
.item.is-aberto .item__foto{grid-template-rows:1fr;margin-top:.9rem}
.item__foto > span{overflow:hidden;border-radius:12px;display:block}
.item__foto img{
  width:100%;aspect-ratio:1;object-fit:cover;display:block;
  transform:scale(1.06);
  transition:transform 1s var(--e-out);
}
.item.is-aberto .item__foto img{transform:scale(1)}
.preco{
  font:600 .85rem/1 var(--texto);font-style:normal;color:var(--ambar);
  background:rgba(242,178,92,.14);padding:.34rem .55rem;border-radius:6px;
}

/* ladrilho de foto dentro da grade do cardapio: quebra a monotonia da lista */
.ladrilho{
  position:relative;overflow:hidden;border-radius:var(--r);
  min-height:190px;grid-row:span 2;
}
.ladrilho img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}
.ladrilho span{
  position:absolute;left:0;right:0;bottom:0;z-index:2;
  padding:2.2rem .9rem .85rem;
  background:linear-gradient(transparent,rgba(4,71,4,.88));
  font:600 .64rem/1.35 var(--texto);letter-spacing:.13em;text-transform:uppercase;
  color:rgba(251,246,236,.92);
}
@media (hover:hover){
  .ladrilho img{transition:transform 1.1s var(--e-suave)}
  .ladrilho:hover img{transform:scale(1.07)}
}

.ver-mais{
  display:block;width:100%;margin-top:1.4rem;
  min-height:52px;padding:.9rem 1.3rem;
  background:transparent;border:1.5px dashed rgba(242,178,92,.45);border-radius:999px;
  font:600 .95rem/1 var(--texto);color:var(--ambar);cursor:pointer;
  transition:background-color var(--t-s) var(--e-suave),border-color var(--t-s) var(--e-suave);
}
.ver-mais[hidden]{display:none}
@media (hover:hover){.ver-mais:hover{background:rgba(242,178,92,.1);border-color:var(--ambar)}}

.dot{
  width:11px;height:11px;border-radius:50%;flex:none;display:inline-block;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.28),0 0 0 2px rgba(251,246,236,.12);
}
.dot--amarelo{background:var(--c-amarelo)}
.dot--verde{background:var(--c-verde)}
.dot--vermelho{background:var(--c-vermelho)}
.dot--azul{background:var(--c-azul)}
.dot--laranja{background:var(--c-laranja)}
.dot--branco{background:var(--c-branco)}
.dot--roxo{background:var(--c-roxo)}

/* tabela de precos */
.precos{
  margin-top:3rem;background:rgba(251,246,236,.04);
  border:1px solid rgba(251,246,236,.12);
  border-radius:var(--r-g);overflow:hidden;
}
.precos summary{
  padding:1.25rem 3.2rem 1.25rem 1.4rem;cursor:pointer;list-style:none;
  display:grid;gap:.25rem;min-height:60px;align-content:center;position:relative;
}
.precos summary::-webkit-details-marker{display:none}
.precos summary::after{
  content:"";position:absolute;right:1.5rem;top:50%;
  width:11px;height:11px;margin-top:-8px;
  border-right:2px solid var(--ambar);border-bottom:2px solid var(--ambar);
  transform:rotate(45deg);transition:transform var(--t-s) var(--e-io);
}
.precos[open] summary::after{transform:rotate(-135deg);margin-top:-3px}
.precos summary b{font:600 1.02rem/1.3 var(--texto);color:var(--creme)}
.precos summary span{font-size:.86rem;color:var(--cinza-cl)}
.precos__rolo{overflow-x:auto;padding:0 1.4rem;-webkit-overflow-scrolling:touch}
.precos table{border-collapse:collapse;width:100%;min-width:540px;font-size:.86rem}
.precos th,.precos td{padding:.7rem .5rem;text-align:right;white-space:nowrap;color:var(--creme)}
.precos thead th{
  font:600 .7rem/1.3 var(--texto);text-transform:uppercase;letter-spacing:.06em;
  color:var(--ambar);border-bottom:1px solid rgba(242,178,92,.3);text-align:right;
}
.precos thead th small{font-weight:400;letter-spacing:0;text-transform:none;color:var(--cinza-cl)}
.precos tbody th{text-align:left;font:600 .86rem/1 var(--texto);display:flex;align-items:center;gap:.6rem}
.precos tbody tr{border-bottom:1px solid rgba(251,246,236,.08)}
.precos tbody tr:last-child{border:0}
.precos__obs{padding:1rem 1.4rem 1.3rem;font-size:.82rem;color:var(--cinza-cl);line-height:1.6}

.menu__cta{
  margin-top:3.4rem;padding:2.2rem 1.5rem;
  background:linear-gradient(150deg,var(--noite-3),var(--noite-2));
  border:1px solid rgba(242,178,92,.22);
  border-radius:var(--r-x);
  display:grid;gap:1.2rem;place-items:center;text-align:center;
}
.menu__cta p{font-family:var(--display);font-size:1.35rem;color:var(--creme);line-height:1.2}
.menu__cta .btn{width:100%}

/* ---------- 11. RODAPE ---------- */
.rodape{background:var(--noite-2);color:#A9BCA8;padding:4rem 0 2.6rem;position:relative;overflow:hidden}
.rodape__logo{width:150px;height:auto}
.rodape__bordao{
  margin-top:1.3rem;
  font-family:var(--display);font-size:1.45rem;line-height:1.14;color:var(--creme);
  letter-spacing:-.025em;max-width:14ch;
}
.rodape__cols{margin-top:2.8rem;display:grid;gap:2rem}
.rodape__cols h2{
  font:600 .68rem/1 var(--texto);letter-spacing:.18em;text-transform:uppercase;
  color:var(--ambar);margin-bottom:.9rem;
}
.rodape__cols p{font-size:.92rem;line-height:1.6;margin-bottom:.8rem}
.rodape__cols b{font-weight:600;color:var(--creme)}
/* sublinhado por text-decoration (e nao border-bottom): num link de duas linhas
   a borda ficaria pendurada so embaixo do bloco inteiro */
.rodape__cols a{
  display:inline-block;padding-block:.55rem;
  text-decoration:underline;text-decoration-color:rgba(169,188,168,.36);text-underline-offset:3px;
  transition:color var(--t-s) var(--e-suave),text-decoration-color var(--t-s) var(--e-suave);
}
@media (hover:hover){.rodape__cols a:hover{color:var(--ambar);text-decoration-color:var(--ambar)}}
.rodape__legal{margin-top:1.8rem;font-size:.78rem;color:#6E856D;line-height:1.6;max-width:62ch}

/* ---------- 12. CTA FIXO (celular) ---------- */
.barra-zap{
  position:fixed;left:0;right:0;bottom:0;z-index:40;
  padding:.6rem var(--gut) calc(.6rem + env(safe-area-inset-bottom));
  background:linear-gradient(rgba(4,71,4,0),rgba(4,71,4,.78) 45%);
  transform:translateY(130%);
  transition:transform var(--t-m) var(--e-out);
  pointer-events:none;
}
.barra-zap.is-on{transform:none;pointer-events:auto}
.barra-zap__btn{
  display:flex;align-items:center;justify-content:center;gap:.6rem;
  width:100%;min-height:56px;
  background:var(--brasa);color:#fff;
  border-radius:999px;text-decoration:none;
  font:600 1.03rem/1 var(--texto);
  box-shadow:0 12px 30px -10px rgba(0,0,0,.7),0 0 0 3px rgba(251,246,236,.18);
  transition:transform var(--t-s) var(--e-suave);
}
.barra-zap__btn:active{transform:scale(.97)}
.barra-zap__btn .ico{width:22px;height:22px;fill:currentColor}

/* ---------- MOVIMENTO REDUZIDO ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important;
  }
  [data-rv]{opacity:1!important;transform:none!important;clip-path:none!important}
  .ln > i{transform:none!important}
  .moldura[data-rv="mascara"] > img{transform:none!important}
  [data-par]{transform:none!important}
  .hero__selo,.hero__rolar::after{display:none}
  .hero__disco{animation:none}
  .assina__cap{opacity:1;transform:none}
  .cortina{display:none}
  .mmenu__nav a{opacity:1;transform:none}
}

/* ---------- 13. BREAKPOINTS ---------- */

/* telas muito estreitas (320px) */
@media (max-width:359px){
  :root{--gut:1rem}
  .hero__provas{grid-template-columns:1fr;gap:.6rem}
  .hero__provas li{display:flex;align-items:baseline;gap:.5rem}
  .hero__provas b{display:inline}
  .btn{font-size:.95rem;padding-inline:1.3rem}
  .hero__fatia{width:48%;right:-4%}
}

/* ≥600px */
@media (min-width:600px){
  .hero__acoes{grid-auto-flow:column;grid-auto-columns:max-content}
  .hero__acoes .btn{width:auto}
  .assina__grade{grid-template-columns:repeat(3,1fr);gap:.9rem}
  .assina__f--3{grid-column:auto}
  .assina__f--6{grid-column:auto}
  .nums__grade{grid-template-columns:repeat(4,1fr)}
  .unid__grade{grid-template-columns:1fr 1fr}
  .loja__acoes{grid-auto-flow:column;grid-auto-columns:1fr}
  /* um botao de 1240px de largura nao parece botao */
  .pedir__botoes{grid-template-columns:1.3fr 1fr;max-width:760px}
  .contatos__grade{grid-template-columns:1fr 1fr}
  .rodape__cols{grid-template-columns:repeat(3,1fr)}
  .menu__cta{grid-auto-flow:column;justify-content:space-between;place-items:center;padding:2rem 2.4rem;text-align:left}
  .menu__cta .btn{width:auto}
  .insta .btn{width:auto}
  .amb__pe{grid-template-columns:1fr auto;align-items:center}
  .itens{grid-template-columns:repeat(2,1fr)}
  .modo{grid-template-columns:200px 1fr;gap:1.8rem;align-items:center}
  .modo__foto{order:0}
}

/* ≥900px — desktop */
@media (min-width:900px){
  :root{--topo-h:78px}
  .topo__menu{display:none}
  .topo__links{
    display:flex;gap:2rem;margin-left:2.6rem;
    font:600 .9rem/1 var(--texto);
  }
  .topo__links a{
    display:inline-flex;align-items:center;min-height:44px;
    text-decoration:none;color:var(--creme);opacity:.82;
    position:relative;transition:opacity var(--t-s) var(--e-suave);
  }
  .topo__links a::after{
    content:"";position:absolute;left:0;right:0;bottom:.35rem;height:1.5px;
    background:var(--ambar);transform:scaleX(0);transform-origin:right;
    transition:transform var(--t-s) var(--e-io);
  }
  .topo__links a:hover,.topo__links a[aria-current]{opacity:1}
  .topo__links a:hover::after,.topo__links a[aria-current]::after{transform:scaleX(1);transform-origin:left}
  .topo__logo img{width:128px}
  .mmenu{display:none!important}

  .hero{padding-block:calc(var(--topo-h) + 2rem) 2.6rem}
  .hero__grade{
    grid-template-columns:minmax(0,1.16fr) minmax(0,.84fr);
    grid-template-areas:
      "olho  palco"
      "tit   palco"
      "txt   palco"
      "acoes palco"
      "prova prova";
    column-gap:3rem;align-items:center;
  }
  .hero__olho{grid-area:olho;align-self:end}
  .hero__titulo{grid-area:tit}
  .hero__texto{grid-area:txt;margin-top:1.6rem}
  .hero__acoes{grid-area:acoes;margin-top:1.8rem}
  .hero__provas{grid-area:prova;margin-top:2.6rem;max-width:680px}
  .hero__provas li{font-size:.78rem}
  .hero__provas b{font-size:1.4rem}
  .hero__palco{grid-area:palco;width:100%;max-width:430px;margin:0 0 0 auto}
  .hero__rolar{display:flex}

  .faixa__trilho span{font-size:1.25rem}
  .faixa{padding:1rem 0}

  .manif,.assina,.modos,.amb,.unid,.pedir,.insta{padding-block:7rem}
  .manif{padding-bottom:0}
  .manif__frase{margin-top:2rem;max-width:20ch}
  .manif__apoio{margin-top:2.6rem;grid-template-columns:1fr 1fr;gap:2.4rem;max-width:none}
  .manif__macro{margin-top:5rem;aspect-ratio:21/9}
  .manif__legenda{bottom:2rem}

  .assina__topo{grid-template-columns:1fr auto;align-items:end;gap:2rem}
  .assina__grade{margin-top:3.4rem;gap:1.1rem}
  .assina__f--2{margin-top:4rem}
  .assina__f--5{margin-top:-3rem}
  .assina__pe{margin-top:3.4rem;grid-template-columns:1fr auto;align-items:center;justify-items:start}

  .modos__lista{margin-top:3.6rem;gap:2.6rem}
  .modo{grid-template-columns:280px 1fr;gap:2.6rem;padding-top:2.4rem}
  .modo h3{font-size:2.1rem}
  .modo__corpo{max-width:64ch}

  .nums{padding-block:4.6rem}
  .nums__grade{gap:2rem}

  .amb__galeria{padding-inline:max(var(--gut),calc(50vw - var(--env)/2 + var(--gut)))}
  .amb__f{width:min(40vw,430px)}
  .amb__f--alta{width:min(48vw,540px)}

  .chamada__env{padding-block:9rem}
  .chamada .tit{max-width:16ch}

  .pedir .faq{margin-top:4rem}
  .insta__fita{margin-block:3rem 2.6rem}
  .insta__trilho img{width:186px;height:186px}
  .insta__ava{width:78px;height:78px}
  .insta__arroba{font-size:1.35rem}

  .rodape{padding-block:5rem 2.8rem}
  .rodape__bordao{font-size:2rem}

  .barra-zap{display:none}

  /* cardapio */
  .mhero{padding-block:calc(var(--topo-h) + 6rem) 4.4rem}
  .itens{grid-template-columns:repeat(3,1fr);gap:.7rem}
  .filtro__busca{max-width:520px}
  .ver-mais{max-width:360px;margin-inline:auto}
  .grupo{margin-top:4.4rem}
}

/* ≥1200px — respiro extra */
@media (min-width:1200px){
  .hero__titulo{letter-spacing:-.045em}
  .assina__grade{gap:1.4rem}
  .itens{gap:.8rem}
}