/* Mega Suco · seções depois do hero. Mecanismos de movimento vindos do acervo Cannonball (ver README). */

/* ---------- comum ---------- */
:root{--pad-trilha:clamp(16px,4vw,56px)}
.rotulo{margin:0 0 14px;font-weight:700;font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--verde-escuro)}
.rotulo--claro{color:var(--kiwi)}
h2{margin:0;font:800 clamp(36px,5vw,72px)/.98 var(--titulo);letter-spacing:-.03em;color:var(--marrom)}
.botao--p{min-height:46px;padding:0 20px;font-size:15px}
.botao--claro{background:var(--kiwi);color:var(--marrom)}
.botao--claro:hover{background:#d6f08f}
.linha-mascara{overflow:hidden;padding-bottom:.1em;margin-bottom:-.1em}

/* ---------- faixa infinita ---------- */
.faixa{background:var(--marrom);color:var(--creme);overflow:hidden;padding:22px 0;border-block:6px solid var(--verde)}
.faixa__trilho{display:flex;width:max-content;will-change:transform}
.faixa__grupo{display:flex;align-items:center;flex:none}
.faixa__grupo span{font:800 clamp(26px,3.4vw,46px)/1 var(--titulo);letter-spacing:-.02em;white-space:nowrap;padding:0 26px}
.faixa__rodela{width:clamp(38px,4vw,58px);height:clamp(38px,4vw,58px);flex:none}

/* ---------- campeões ---------- */
.campeoes{background:var(--papel);overflow:hidden}
.campeoes__palco{min-height:100svh;display:flex;flex-direction:column;justify-content:center;padding:clamp(56px,7vw,96px) 0}
.campeoes__cab{display:flex;align-items:flex-end;gap:24px;flex-wrap:wrap;padding:0 var(--pad-trilha);margin-bottom:clamp(28px,4vw,48px)}
.campeoes__cab .rotulo{flex-basis:100%;margin:0}
.campeoes__cab h2{flex:1 1 auto}
.campeoes__num{margin:0;font:800 22px/1 var(--titulo);color:var(--marrom-logo);font-variant-numeric:tabular-nums}
.campeoes__num span{color:var(--vermelho-texto);font-size:44px}
.campeoes__trilho{will-change:transform;display:flex;gap:clamp(16px,2vw,28px);width:max-content;padding:0 var(--pad-trilha)}
.campeao{width:min(880px,82vw);flex:none;display:grid;grid-template-columns:1.25fr 1fr;background:var(--creme);border-radius:28px;overflow:hidden;border:1px solid rgba(114,86,65,.12);box-shadow:0 10px 30px rgba(74,54,38,.06)}
.campeao__foto{overflow:hidden;min-height:420px}
.campeao__foto img{width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.campeao:hover .campeao__foto img{transform:scale(1.05)}
.campeao__txt{padding:clamp(22px,3vw,40px);display:flex;flex-direction:column;align-items:flex-start;gap:10px}
.campeao__n{font:800 15px/1 var(--titulo);color:var(--verde-escuro);background:rgba(136,192,53,.18);padding:6px 10px;border-radius:999px}
.campeao h3{margin:6px 0 0;font:800 clamp(30px,3.2vw,46px)/1 var(--titulo);letter-spacing:-.025em}
.campeao p{margin:0;color:#5d4634}
.campeao p.campeao__preco{font:800 28px/1 var(--titulo);color:var(--vermelho-texto);margin:auto 0 6px;padding-top:14px}

/* ---------- sabores: a rodela que abre ---------- */
.sabores{background:var(--creme-2)}
.sabores__palco{position:relative;height:100svh;min-height:620px;overflow:hidden}
/* a rodela que abre: um círculo que cresce por scale e a foto dentro com a escala inversa
   (só transform, roda no compositor; o clip-path animado repintava a foto a cada quadro) */
.sabores__circulo{position:absolute;top:50%;left:69%;width:min(62vw,96svh);aspect-ratio:1;margin:calc(min(62vw,96svh) / -2) 0 0 calc(min(62vw,96svh) / -2);border-radius:50%;overflow:hidden;will-change:transform;transform:scale(.22)}
.sabores__circulo img{width:100%;height:100%;object-fit:cover;will-change:transform;transform:scale(2.6)}
.sabores__texto{position:absolute;left:clamp(16px,5vw,80px);top:50%;transform:translateY(-50%);width:min(520px,38%);z-index:2}
.sabores__lista{list-style:none;padding:0;margin:24px 0 0;display:flex;flex-wrap:wrap;gap:8px}
.sabores__lista li{border:1.5px solid rgba(114,86,65,.35);background:var(--papel);border-radius:999px;padding:7px 14px;font-weight:600;font-size:15px}
.sabores__nota{margin:20px 0 26px;color:#5d4634}
.sabores__rodela{position:absolute;width:clamp(70px,8vw,120px);height:clamp(70px,8vw,120px);z-index:1;will-change:transform}
.sabores__rodela--a{right:4%;top:8%}
.sabores__rodela--b{right:46%;bottom:7%}

/* ---------- cardápio ---------- */
.cardapio{max-width:1360px;margin:0 auto;padding:clamp(64px,8vw,120px) clamp(16px,4vw,48px)}
.cardapio__cab{display:grid;grid-template-columns:1fr auto;align-items:end;gap:10px 32px;margin-bottom:36px}
.cardapio__cab .rotulo,.cardapio__cab h2,.cardapio__lead{grid-column:1}
.cardapio__lead{margin:14px 0 0;max-width:36em;color:#5d4634}
.abas{grid-column:2;grid-row:2 / span 2;display:flex;gap:6px;background:var(--papel);border:1px solid rgba(114,86,65,.14);padding:6px;border-radius:999px;align-self:end}
.aba{display:flex;align-items:center;gap:8px;border:0;background:none;border-radius:999px;padding:12px 18px;font:700 16px/1 var(--texto);color:var(--marrom);cursor:pointer}
.aba svg{width:22px;height:22px}
.aba.is-ativa{background:var(--marrom);color:var(--creme)}
.cardapio__grade{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:20px}
.item{display:flex;flex-direction:column;background:var(--papel);border-radius:var(--raio);overflow:hidden;border:1px solid rgba(114,86,65,.12);transition:transform .3s cubic-bezier(.2,.8,.2,1),box-shadow .3s}
.item:hover{transform:translateY(-6px);box-shadow:var(--sombra)}
.item__foto{aspect-ratio:4/3;overflow:hidden;background:var(--creme-2);border:0;padding:0;cursor:pointer;display:block;width:100%}
.item__foto img{width:100%;height:100%;object-fit:cover;transition:transform .6s}
.item:hover .item__foto img{transform:scale(1.06)}
.item__corpo{padding:18px 20px 20px;display:flex;flex-direction:column;gap:8px;flex:1}
.item h3{margin:0;font:800 23px/1.1 var(--titulo);letter-spacing:-.015em}
.item p{margin:0;font-size:15px;color:#5d4634}
.item__pe{margin-top:auto;padding-top:10px;display:flex;align-items:center;justify-content:space-between;gap:10px}
.item__preco{font:800 22px/1 var(--titulo);color:var(--vermelho-texto)}
.item__preco small{display:block;font:600 12px/1.2 var(--texto);color:var(--marrom-logo)}
.cardapio__goomer{margin:28px 0 0;text-align:center;color:#5d4634}
.cardapio__goomer a{font-weight:700}

/* ---------- montar (diálogo) ---------- */
.montar{border:0;padding:0;border-radius:26px;width:min(620px,calc(100vw - 24px));max-height:calc(100svh - 32px);background:var(--papel);color:var(--marrom);box-shadow:0 30px 80px rgba(40,25,15,.35);overflow:hidden}
.montar[open]{display:flex;flex-direction:column}
.montar::backdrop{background:rgba(40,25,15,.55);backdrop-filter:blur(3px)}
.montar__topo{position:relative;flex:none}
.montar__topo img{width:100%;height:190px;object-fit:cover}
.montar__fechar{position:absolute;top:12px;right:12px;width:42px;height:42px;border-radius:50%;border:0;background:var(--papel);color:var(--marrom);font-size:24px;line-height:1;cursor:pointer;box-shadow:0 4px 14px rgba(0,0,0,.18)}
.montar__corpo{padding:20px 22px;overflow:auto;flex:1;overscroll-behavior:contain}
.montar__corpo h2{font-size:32px}
.montar__desc{margin:8px 0 6px;color:#5d4634;font-size:15px}
.grupo{border:0;margin:18px 0 0;padding:16px 0 0;border-top:1px solid rgba(114,86,65,.14);min-width:0}
.grupo legend{display:flex;justify-content:space-between;align-items:center;gap:10px;width:100%;padding:0;margin-bottom:10px;font:800 18px/1.2 var(--titulo)}
.grupo legend small{font:600 13px/1.4 var(--texto);color:var(--marrom-logo);background:var(--creme);border-radius:999px;padding:3px 10px;white-space:nowrap}
.grupo legend small.is-obrig{background:#fde4e5;color:var(--vermelho-texto)}
.opcao{display:flex;align-items:center;gap:12px;padding:10px 4px;border-radius:12px;cursor:pointer;font-size:16px}
.opcao:hover{background:var(--creme)}
.opcao input{width:20px;height:20px;accent-color:var(--vermelho-texto);flex:none}
.opcao span{flex:1}
.opcao em{font-style:normal;font-size:14px;color:var(--marrom-logo);white-space:nowrap}
.opcao.is-cheio{opacity:.45}
.montar__obs{display:block;margin-top:18px;font-weight:700}
.montar__obs textarea{display:block;width:100%;margin-top:8px;border:1px solid rgba(114,86,65,.25);border-radius:14px;padding:10px 12px;font:16px/1.4 var(--texto);background:#fff;resize:vertical;min-height:64px;color:var(--marrom)}
.montar__pe{flex:none;display:flex;align-items:center;gap:12px;padding:14px 22px;border-top:1px solid rgba(114,86,65,.14);background:var(--papel)}
.qtd{display:flex;align-items:center;border:1.5px solid rgba(114,86,65,.3);border-radius:999px}
.qtd button{width:42px;height:42px;border:0;background:none;font-size:22px;color:var(--marrom);cursor:pointer}
.qtd output{min-width:22px;text-align:center;font-weight:700}
.montar__add{flex:1;justify-content:space-between}
.montar__aviso{margin:10px 0 0;color:var(--vermelho-texto);font-weight:600;font-size:14px;min-height:1.2em}

/* ---------- sacola ---------- */
.veu{position:fixed;inset:0;background:rgba(40,25,15,.45);z-index:70}
.veu[hidden]{display:none}
.sacola{position:fixed;top:0;right:0;bottom:0;z-index:75;width:min(440px,100vw);background:var(--papel);box-shadow:-20px 0 60px rgba(40,25,15,.25);transform:translateX(105%);transition:transform .45s cubic-bezier(.2,.8,.2,1);display:flex;flex-direction:column;visibility:hidden}
.sacola.is-aberta{transform:none;visibility:visible}
.sacola__topo{display:flex;align-items:center;justify-content:space-between;padding:18px 20px;border-bottom:1px solid rgba(114,86,65,.14)}
.sacola__topo h2{font-size:28px}
.sacola__fechar{width:42px;height:42px;border-radius:50%;border:0;background:var(--creme);font-size:24px;cursor:pointer;color:var(--marrom)}
.sacola__corpo{flex:1;overflow:auto;padding:8px 20px 20px;overscroll-behavior:contain}
.sacola__vazia{text-align:center;padding:40px 10px;color:#5d4634}
.sacola__vazia svg{width:70px;height:70px;margin:0 auto 12px;display:block}
.linha{display:grid;grid-template-columns:1fr auto;gap:4px 12px;padding:14px 0;border-bottom:1px dashed rgba(114,86,65,.25)}
.linha b{font:800 17px/1.2 var(--titulo)}
.linha small{grid-column:1;color:#6b5443;font-size:13px;line-height:1.4}
.linha__preco{font-weight:700;white-space:nowrap}
.linha__acoes{grid-column:1 / -1;display:flex;gap:14px;font-size:14px}
.linha__acoes button{border:0;background:none;padding:0;color:var(--vermelho-texto);font:600 14px var(--texto);cursor:pointer;text-decoration:underline}
.form-pedido{display:grid;gap:14px;margin-top:18px}
.form-pedido label{display:grid;gap:6px;font-weight:700;font-size:15px}
.form-pedido input[type=text],.form-pedido input[type=tel],.form-pedido textarea{border:1px solid rgba(114,86,65,.28);border-radius:12px;padding:11px 12px;font:16px var(--texto);background:#fff;color:var(--marrom)}
.form-pedido fieldset{border:0;padding:0;margin:0;display:grid;gap:6px;min-width:0}
.form-pedido legend{font-weight:700;font-size:15px;margin-bottom:6px;padding:0}
.escolhas{display:flex;flex-wrap:wrap;gap:8px}
.escolhas label{position:relative;display:flex;align-items:center;gap:6px;font-weight:600;border:1.5px solid rgba(114,86,65,.25);border-radius:999px;padding:9px 14px;cursor:pointer}
.escolhas label:has(input:checked){border-color:var(--marrom);background:var(--marrom);color:var(--creme)}
.escolhas label:has(input:focus-visible){outline:3px solid var(--laranja);outline-offset:2px}
.escolhas input{position:absolute;opacity:0;pointer-events:none}
.sacola__totais{border-top:1px solid rgba(114,86,65,.14);padding:14px 20px;background:var(--creme)}
.sacola__totais p{display:flex;justify-content:space-between;margin:2px 0;font-size:15px}
.sacola__totais p.total{font:800 22px/1.3 var(--titulo)}
.sacola__enviar{width:100%;margin-top:10px;background:#1d7a3f;color:#fff;gap:10px}
.sacola__enviar:hover{background:#166232}
.sacola__enviar svg{width:22px;height:22px}
.sacola__aviso{margin:8px 0 0;font-size:13px;color:#6b5443;text-align:center}
.barra-pedido{position:fixed;left:12px;right:12px;bottom:12px;z-index:60;display:flex;align-items:center;justify-content:space-between;border:0;border-radius:999px;background:var(--vermelho-texto);color:#fff;padding:16px 22px;font:700 16px var(--texto);box-shadow:0 12px 30px rgba(200,34,43,.35);cursor:pointer}
.barra-pedido[hidden]{display:none}
@media (min-width:961px){.barra-pedido{left:50%;right:auto;bottom:24px;width:360px;transform:translateX(-50%)}}
.tem-pedido .rp-fab{bottom:84px}
.painel-aberto .rp-fab,.painel-aberto .barra-pedido{display:none}
@media (min-width:961px){.tem-pedido .rp-fab{bottom:16px}}

/* ---------- história ---------- */
.historia{background:var(--marrom);color:var(--creme);padding:clamp(64px,8vw,120px) clamp(16px,4vw,48px)}
.historia__cab{max-width:1100px;margin:0 auto clamp(32px,5vw,64px)}
.historia h2{color:var(--creme);max-width:14em}
.historia .rotulo{color:var(--kiwi)}
.pilha{max-width:1100px;margin:0 auto;display:grid;gap:28px}
.pilha__cartao{position:sticky;top:calc(96px + var(--i,0) * 18px);will-change:transform;display:grid;grid-template-columns:1.1fr 1fr;min-height:min(460px,70svh);border-radius:30px;overflow:hidden;transform-origin:50% 0;box-shadow:0 -12px 40px rgba(0,0,0,.18)}
.pilha__cartao--1{--i:0;background:#F5454C;color:#fff}
.pilha__cartao--2{--i:1;background:#FB8D0F;color:#3a2412}
.pilha__cartao--3{--i:2;background:#88C035;color:#24360c}
.pilha__cartao--4{--i:3;background:var(--creme-2);color:var(--marrom)}
.pilha__txt{padding:clamp(24px,4vw,52px);display:flex;flex-direction:column;justify-content:center;gap:12px}
.pilha__ano{font:800 clamp(56px,8vw,110px)/.9 var(--titulo);letter-spacing:-.04em}
.pilha__txt h3{margin:0;font:800 clamp(24px,2.6vw,34px)/1.1 var(--titulo);letter-spacing:-.02em}
.pilha__txt p{margin:0;font-size:17px;line-height:1.55}
.pilha__cartao img{width:100%;height:100%;object-fit:cover}
.pilha__sombra{position:absolute;inset:0;background:#2a1d13;opacity:0;pointer-events:none;border-radius:inherit}
.numeros{max-width:1100px;margin:clamp(40px,6vw,72px) auto 0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.numeros li{border-top:2px solid rgba(197,232,114,.5);padding-top:14px}
.numeros b{display:block;font:800 clamp(40px,5vw,64px)/1 var(--titulo);color:var(--kiwi);letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.numeros span{color:rgba(255,246,223,.85);font-size:15px}

/* ---------- onde ---------- */
.onde{max-width:1360px;margin:0 auto;padding:clamp(64px,8vw,120px) clamp(16px,4vw,48px);display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(28px,5vw,72px);align-items:center}
.onde__foto{margin:0;border-radius:30px;overflow:hidden;aspect-ratio:4/5;box-shadow:var(--sombra)}
.onde__foto img{width:100%;height:100%;object-fit:cover}
.onde h2{font-size:clamp(32px,4vw,56px)}
.horario{margin:28px 0 0;border-collapse:collapse;width:100%;max-width:440px;font-size:17px}
.horario caption{text-align:left;font-weight:700;font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--verde-escuro);margin-bottom:8px}
.horario th,.horario td{padding:12px 0;border-bottom:1px solid rgba(114,86,65,.18);text-align:left}
.horario th{font-weight:600}
.horario td{text-align:right;font-weight:700}
.onde__entrega{margin:20px 0 26px;color:#5d4634}
.onde__acoes{display:flex;flex-wrap:wrap;gap:10px}

/* ---------- rodapé ---------- */
.rodape{background:var(--papel);border-top:1px solid rgba(114,86,65,.14);padding:clamp(48px,6vw,80px) clamp(16px,4vw,48px) 28px;overflow:hidden}
.rodape__colunas{max-width:1360px;margin:0 auto;display:grid;grid-template-columns:repeat(4,1fr);gap:24px;font-size:15px;color:#5d4634}
.rodape__colunas p{margin:0}
.rodape__colunas p.rodape__t{font:800 17px/1.4 var(--titulo);color:var(--marrom);margin-bottom:6px}
.rodape__marca{max-width:1360px;margin:clamp(40px,6vw,72px) auto 0}
.rodape__marca img{width:100%;height:auto}
.rodape__rodelas{display:flex;justify-content:center;gap:10px;margin-top:22px}
.rodape__rodelas svg{width:34px;height:34px}

@media (max-width:960px){
  .campeoes__palco{min-height:0}
  .campeoes__trilho{width:auto;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:16px;scrollbar-width:none}
  .campeoes__trilho::-webkit-scrollbar{display:none}
  .campeao{scroll-snap-align:center;grid-template-columns:1fr;width:min(86vw,520px)}
  .campeao__foto{min-height:0;aspect-ratio:4/3}
  .campeoes__num{display:none}
  .cardapio__cab{grid-template-columns:1fr}
  .abas{grid-column:1;grid-row:auto;justify-self:start;margin-top:18px}
  .pilha__cartao{grid-template-columns:1fr;position:relative;top:auto;min-height:0;box-shadow:none}
  .pilha__cartao img{aspect-ratio:16/10;order:-1;height:auto}
  .numeros{grid-template-columns:repeat(2,1fr)}
  .onde{grid-template-columns:1fr}
  .onde__foto{aspect-ratio:4/3}
  .rodape__colunas{grid-template-columns:repeat(2,1fr)}
  .sabores__palco{height:auto;min-height:0;display:flex;flex-direction:column;padding:56px 0}
  .sabores__circulo{position:relative;top:auto;left:auto;margin:0 auto;width:min(84vw,420px);order:-1;transform:none}
  .sabores__circulo img{transform:none}
  .sabores__texto{position:relative;left:auto;top:auto;transform:none;width:auto;padding:24px 16px 0}
  .sabores__rodela--b{display:none}
}
@media (max-width:560px){
  .montar{width:100vw;max-width:100vw;max-height:100svh;height:100svh;border-radius:0;margin:0}
  .montar__topo img{height:150px}
  .rodape__colunas{grid-template-columns:1fr}
  .pilha__txt p{font-size:16px}
}
@media (prefers-reduced-motion:reduce){
  .sabores__circulo,.sabores__circulo img{transform:none}
}
