/* Bowlcut: concept landing. EB Garamond no papel da Bell MT, Archivo no papel da Univers (troca registrada no DIRECAO.md). */
@font-face{font-family:'EB Garamond';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/eb-garamond-400.woff2) format('woff2')}
@font-face{font-family:'EB Garamond';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/eb-garamond-500.woff2) format('woff2')}
@font-face{font-family:'EB Garamond';font-style:italic;font-weight:400;font-display:swap;src:url(fonts/eb-garamond-400-italic.woff2) format('woff2')}
@font-face{font-family:'EB Garamond';font-style:italic;font-weight:500;font-display:swap;src:url(fonts/eb-garamond-500-italic.woff2) format('woff2')}
@font-face{font-family:'Archivo';font-style:normal;font-weight:300;font-display:swap;src:url(fonts/archivo-300.woff2) format('woff2')}
@font-face{font-family:'Archivo';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/archivo-400.woff2) format('woff2')}
@font-face{font-family:'Archivo';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/archivo-500.woff2) format('woff2')}
@font-face{font-family:'Archivo';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/archivo-700.woff2) format('woff2')}

:root{
  --ink:#243a33;          /* texto da marca, medido */
  --paper:#ffffff;        /* fundo da página na referência */
  --sky:#9cdbe7;          /* botão da marca */
  --sky-fill:#a0d9f2;     /* fundo azul medido no CSS */
  --leaf:#557430;         /* rodapé verde da referência */
  --rust:#a4571e;         /* acento pequeno, 5,9:1 no branco */
  --mist:#f1f0ec;         /* fundo de foto de produto */
  --line:#e2e2dd;
  --soft:#3f564d;         /* texto de apoio sobre branco, 7,6:1 */
  --on-ink:#d5e0da;       /* texto de apoio sobre tinta */
  --serif:'EB Garamond',Georgia,'Times New Roman',serif;
  --sans:'Archivo',system-ui,-apple-system,'Segoe UI',Arial,sans-serif;
  --ease:cubic-bezier(.23,1,.32,1);
  --max:1320px;
  --gut:clamp(20px,4.2vw,60px);
  --r:18px;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:16px;-webkit-text-size-adjust:100%;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);font-weight:400;font-size:16px;line-height:1.6;touch-action:manipulation}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
button{font:inherit;color:inherit;cursor:pointer}
h1,h2,h3,h4,p,figure,ul,ol,blockquote{margin:0}
ul,ol{padding:0;list-style:none}
::selection{background:var(--sky);color:var(--ink)}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.so-leitor{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- menu do pacote, faixa de rascunho, pular e rodapé (bloco obrigatório) ---------- */
.pular{position:absolute;left:12px;top:-60px;z-index:100;background:var(--ink);color:#fff;padding:10px 16px;border-radius:999px;font-size:14px;text-decoration:none}
.pular:focus{top:8px}
.rascunho{background:var(--ink);color:#fff;font-size:12px;line-height:1.4;text-align:center;padding:7px 16px;letter-spacing:.02em}
.pacote{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:10px var(--gut);background:#fff;border-bottom:1px solid var(--line)}
.pacote-abas{display:flex;gap:4px;flex-wrap:wrap}
.pacote-abas a{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border-radius:999px;font-size:14px;font-weight:500;text-decoration:none;color:var(--ink);transition:background-color .2s ease,color .2s ease}
.pacote-abas a[aria-current="page"]{background:var(--sky);color:var(--ink)}
.pacote-abas .curto{display:none}
.chat{display:inline-flex;align-items:center;min-height:44px;padding:0 22px;border-radius:999px;background:var(--ink);color:#fff;font-size:14px;font-weight:500;text-decoration:none;white-space:nowrap;transition:transform .16s var(--ease),background-color .2s ease}
.chat:active{transform:scale(.97)}
@media (hover:hover) and (pointer:fine){
  .pacote-abas a:hover{background:var(--mist)}
  .pacote-abas a[aria-current="page"]:hover{background:var(--sky)}
  .chat:hover{background:#18281f}
}
@media (max-width:1060px){.pacote-abas .longo{display:none}.pacote-abas .curto{display:inline}}
@media (max-width:860px){
  .pacote{flex-direction:column;align-items:stretch;padding:10px 12px}
  .pacote-abas{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
  .pacote-abas a{justify-content:center;text-align:center;padding:0 6px;font-size:13px;line-height:1.2;background:var(--mist)}
  .pacote-abas a[aria-current="page"]{background:var(--sky)}
  .chat{justify-content:center}
}
.rodape{background:var(--ink);color:#fff;padding:36px var(--gut);font-size:14px;line-height:1.6;text-align:center}
.rodape p{max-width:720px;margin:0 auto 10px}
.rodape-chat{display:inline-flex;align-items:center;min-height:44px;padding:0 24px;border-radius:999px;background:var(--sky);color:var(--ink);font-weight:500;text-decoration:none}
.rodape-fontes{color:#d5e0da;font-size:13px}
.rodape :focus-visible{outline-color:#fff}

/* ---------- tipografia: serifa de itálico fino nos títulos, grotesca leve no corpo ---------- */
h1,h2,h3,h4{font-family:var(--serif);font-weight:400;letter-spacing:.015em;line-height:1.14;text-wrap:balance}
h1{font-size:clamp(32px,4.3vw,58px)}
h2{font-size:clamp(30px,3.4vw,48px)}
h3{font-size:clamp(24px,2.3vw,32px);line-height:1.2}
h4{font-size:22px;line-height:1.2}
em{font-style:italic}
p{text-wrap:pretty}
.olho{font-family:var(--sans);font-size:11px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;line-height:1.5}
main>section{position:relative;overflow-x:clip;background-color:var(--paper)}
main>section[id]{scroll-margin-top:12px}

/* botões: pílula, raio alto, azul da marca */
.pilula,.pilula-contorno,.pilula-branca{text-decoration:none;font-weight:500;font-size:14px;line-height:1.2}
.pilula{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 24px;border-radius:42px;background:var(--sky);color:var(--ink);letter-spacing:.02em;transition:transform .16s var(--ease),background-color .2s ease}
.pilula:active{transform:scale(.97)}
.pilula-contorno{display:flex;align-items:center;justify-content:space-between;gap:14px;min-height:44px;padding:0 20px;border:1px solid var(--ink);border-radius:42px;color:var(--ink);transition:background-color .2s ease,color .2s ease,transform .16s var(--ease)}
.pilula-contorno:active{transform:scale(.98)}
.preco{white-space:nowrap;font-variant-numeric:tabular-nums}
@media (hover:hover) and (pointer:fine){
  .pilula:hover{background:#b8e6ef}
  .pilula-contorno:hover{background:var(--ink);color:#fff}
}

/* setas das faixas */
.setas{display:flex;gap:10px;flex:none}
.seta{display:inline-grid;place-items:center;width:44px;height:44px;border:1px solid var(--ink);border-radius:50%;background:transparent;color:var(--ink);transition:background-color .2s ease,color .2s ease,transform .16s var(--ease)}
.seta:active{transform:scale(.94)}
@media (hover:hover) and (pointer:fine){.seta:hover{background:var(--ink);color:#fff}}

/* faixas com rolagem lateral: sem barra pesada, foco visível */
[data-rolagem]{overflow-x:auto;overflow-y:hidden;scrollbar-width:thin;scrollbar-color:var(--ink) transparent;overscroll-behavior-x:contain}

/* ---------- revelação: o estado escondido só existe sob .com-js ---------- */
.com-js .rv{transition:opacity .9s var(--ease),transform .9s var(--ease),clip-path 1s var(--ease);transition-delay:calc(var(--i,0)*70ms)}
.com-js .rv:not(.in){opacity:0;transform:translateY(22px)}
.com-js .rv-fade:not(.in){transform:none}
.com-js .rv-wipe:not(.in){opacity:1;transform:none;clip-path:inset(0 100% 0 0)}
.com-js .rv-wipe.in{clip-path:inset(0 0 0 0)}
.com-js .abertura .p{transition:opacity 1s var(--ease),transform 1s var(--ease);transition-delay:calc(var(--i,0)*110ms + 120ms)}
.com-js .abertura:not(.in) .p{opacity:0;transform:translateY(18px)}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .com-js .rv,.com-js .abertura .p{transition:opacity .4s ease;transition-delay:0s}
  .com-js .rv:not(.in),.com-js .abertura:not(.in) .p{transform:none}
  .com-js .rv-wipe:not(.in){clip-path:none;opacity:0}
  .com-js .rv-wipe.in{clip-path:none}
}

/* ================= 1 · abertura: foto sangrada, texto à esquerda direto sobre ela ================= */
.abertura{--tilt:clamp(28px,5.5vw,84px);display:flex;flex-direction:column;min-height:clamp(700px,100svh,980px);background-color:var(--ink);color:#fff}
.abertura-texto{width:100%;max-width:calc(var(--max) + 2*var(--gut));margin-inline:auto;padding:clamp(44px,8vh,92px) var(--gut) clamp(28px,4vh,48px)}
.abertura .olho{margin-bottom:18px;color:#fff}
.abertura h1{max-width:17em;color:#fff;font-size:clamp(32px,4.5vw,66px);letter-spacing:.015em}
.abertura h1 .p{display:inline}
.abertura-linha{display:flex;flex-wrap:wrap;align-items:center;gap:18px 32px;margin-top:26px}
.abertura .tagline{font-size:clamp(16px,1.4vw,19px);font-weight:300;letter-spacing:.02em;color:#fff}
.abertura :focus-visible{outline-color:#fff}
/* a barra do logotipo corta a foto na diagonal: faixa azul de 14 px na aresta de cima, depois a foto */
.abertura-foto{position:relative;flex:1 0 auto;display:flex;min-height:clamp(380px,40vw,600px);background-color:var(--sky);clip-path:polygon(0 var(--tilt),100% 0,100% 100%,0 100%)}
.abertura-foto img{width:100%;height:100%;object-fit:cover;object-position:50% 50%;clip-path:polygon(0 calc(var(--tilt) + 14px),100% 14px,100% 100%,0 100%)}
.abertura-tres{position:absolute;left:0;right:0;bottom:0;z-index:2;display:flex;gap:12px;max-width:calc(var(--max) + 2*var(--gut));margin-inline:auto;padding:0 var(--gut) 28px}
.abertura-tres li{flex:1 1 0;min-width:0}
.pilula-branca{display:flex;align-items:center;gap:14px;min-height:64px;padding:8px 22px 8px 8px;border-radius:999px;background:#fff;color:var(--ink);transition:transform .2s var(--ease)}
.pilula-branca:active{transform:scale(.98)}
.pilula-branca img{width:48px;height:48px;border-radius:50%;object-fit:cover;flex:none}
.pilula-branca .nome{flex:1;min-width:0;font-size:15px}
@media (hover:hover) and (pointer:fine){.pilula-branca:hover{transform:translateY(-2px)}}
@media (max-width:900px){
  .abertura{min-height:0}
  .abertura-foto{flex:none;min-height:0;aspect-ratio:4/3;clip-path:polygon(0 24px,100% 0,100% 100%,0 100%)}
  .abertura-foto img{clip-path:polygon(0 36px,100% 12px,100% 100%,0 100%)}
  .abertura-tres{position:static;flex-direction:column;gap:8px;padding:28px var(--gut) 32px}
}

/* ================= 3b · uma frase sobre foto sangrada (receita do pai) ================= */
.receita-do-pai{display:grid;place-items:center;min-height:clamp(340px,28vw,420px);padding:64px var(--gut);background-color:#2b2b27;color:#fff}
.receita-do-pai .fundo,.gente .fundo,.faixa-titulo .fundo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.receita-do-pai::before,.gente::before,.faixa-titulo::before{content:"";position:absolute;inset:0;z-index:1;background-color:rgba(16,28,23,.74)}
.receita-do-pai-frase{position:relative;z-index:2;max-width:26em;text-align:center;font-family:var(--serif);font-size:clamp(24px,2.6vw,36px);line-height:1.25;letter-spacing:.015em;text-wrap:balance}

/* ================= 14b · faixa de título, como o cabeçalho de 126 px da home ================= */
.faixa-titulo{display:grid;place-items:center;min-height:clamp(150px,13vw,190px);padding:36px var(--gut);background-color:#2b2b27;color:#fff}
.faixa-titulo h2{position:relative;z-index:2;text-align:center;font-size:clamp(26px,2.9vw,40px);max-width:24em}

/* ================= 2 · declaração curta ================= */
.declaracao{padding:clamp(64px,8vw,104px) var(--gut)}
.declaracao-miolo{max-width:1100px;margin-inline:auto;text-align:center}
.declaracao h2{font-size:clamp(28px,3.6vw,50px)}
.declaracao p{margin:18px auto 0;max-width:46em;color:var(--soft);font-size:clamp(15px,1.25vw,17px);letter-spacing:.02em}

/* ================= 3 · promessa: textura verde sangrada ================= */
.promessa{display:grid;place-items:center;min-height:clamp(520px,44vw,620px);padding:80px var(--gut);background-color:#496428;color:#fff}
.promessa .fundo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.promessa::before{content:"";position:absolute;inset:0;z-index:1;background-color:rgba(18,34,18,.5)}
.promessa-texto{position:relative;z-index:2;max-width:640px;text-align:center}
.promessa .olho{margin-bottom:26px}
.promessa h2{font-size:clamp(28px,3vw,42px)}
.promessa .grande{margin-top:22px;font-size:clamp(17px,1.5vw,20px);font-weight:300;letter-spacing:.02em}
.promessa :focus-visible{outline-color:#fff}

/* ================= 4 · restaurante da família ================= */
.familia{padding:clamp(72px,8vw,112px) 0 clamp(64px,7vw,96px)}
.familia-par{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,5vw,84px);align-items:start;max-width:calc(var(--max) + 2*var(--gut));margin-inline:auto;padding-inline:var(--gut)}
.colagem{position:sticky;top:24px;max-width:1066px}
.colagem-moldura{background-color:var(--mist);padding:clamp(14px,2vw,28px);border-radius:var(--r)}
.colagem img{width:100%;height:auto}
.familia-texto{display:flex;flex-direction:column;gap:20px;max-width:34em}
.familia-texto h2{margin-bottom:6px}
.familia-texto p{color:var(--soft)}
.familia-texto .lide{font-size:clamp(18px,1.55vw,21px);font-weight:300;color:var(--ink);line-height:1.55}
.familia-texto .fecho{font-family:var(--serif);font-size:clamp(22px,2vw,28px);line-height:1.3;color:var(--ink)}
.familia-texto .pilula{align-self:flex-start;margin-top:4px}
.tira{display:flex;gap:12px;margin-top:clamp(56px,6vw,88px);padding:0 var(--gut) 14px;scroll-snap-type:x proximity}
.tira figure{flex:none;height:clamp(240px,27vw,400px);border-radius:var(--r);overflow:hidden;scroll-snap-align:start;background-color:var(--mist)}
.tira img{height:100%;width:auto;max-width:none;object-fit:cover}
@media (max-width:900px){
  .familia-par{grid-template-columns:minmax(0,1fr)}
  .colagem{position:static}
}

/* ================= 5 · a arte do stir fry ================= */
.arte{padding:clamp(56px,7vw,96px) 0 clamp(64px,7vw,96px);border-top:1px solid var(--line)}
.arte-cabeca{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;max-width:calc(var(--max) + 2*var(--gut));margin-inline:auto;padding-inline:var(--gut)}
.arte-titulo{flex:1;min-width:0;max-width:1000px}
.arte-titulo p{margin-top:20px;color:var(--soft);font-size:clamp(15px,1.25vw,17px);letter-spacing:.02em}
.faixa-alta{display:flex;gap:20px;margin-top:36px;padding:0 var(--gut) 16px;scroll-snap-type:x mandatory;scroll-padding-inline:var(--gut)}
.faixa-alta figure{flex:none;width:clamp(230px,23vw,320px);aspect-ratio:4/5;border-radius:var(--r);overflow:hidden;background-color:var(--mist);scroll-snap-align:start}
.faixa-alta img{width:100%;height:100%;object-fit:cover}
.faixa-alta .cartao-recorte img{object-fit:contain;padding:14px}
.arte-nota{max-width:calc(var(--max) + 2*var(--gut));margin:28px auto 0;padding-inline:var(--gut);font-family:var(--serif);font-style:italic;font-size:clamp(20px,1.8vw,26px);color:var(--ink)}

/* ================= 6 · tinto e branco: o comparador com a barra do logotipo ================= */
.par-vinho{padding:clamp(64px,7vw,104px) 0 clamp(56px,6vw,88px);border-top:1px solid var(--line)}
.par-vinho-texto{max-width:calc(var(--max) + 2*var(--gut));margin:0 auto clamp(32px,4vw,56px);padding-inline:var(--gut);text-align:center}
.par-vinho h2{font-size:clamp(26px,3vw,42px);max-width:30em;margin-inline:auto;text-wrap:pretty}
.duelo{--p:50;--w:.22;position:relative;height:clamp(520px,60vw,960px);overflow:hidden;background-color:#e7e5df;user-select:none;-webkit-user-select:none}
.duelo .lado{position:absolute;inset:0}
.duelo .lado img{position:absolute;top:0;height:100%;object-fit:cover}
.lado-tinto{clip-path:polygon(0 0,calc((var(--p) + 10)*1%) 0,calc((var(--p) - 10)*1%) 100%,0 100%)}
.lado-tinto img{left:0;width:calc((var(--p) + 10)*1%)}
.lado-branco{clip-path:polygon(calc((var(--p) + 10)*1%) 0,100% 0,100% 100%,calc((var(--p) - 10)*1%) 100%)}
.lado-branco img{right:0;width:calc((110 - var(--p))*1%)}
.barra-corte{position:absolute;inset:0;background-color:#fff;pointer-events:none;
  clip-path:polygon(calc((var(--p) + 10 - var(--w))*1%) 0,calc((var(--p) + 10 + var(--w))*1%) 0,calc((var(--p) - 10 + var(--w))*1%) 100%,calc((var(--p) - 10 - var(--w))*1%) 100%)}
.puxador{position:absolute;left:calc(var(--p)*1%);top:50%;width:56px;height:56px;margin:-28px 0 0 -28px;display:grid;place-items:center;border-radius:50%;background-color:#fff;color:var(--ink);box-shadow:0 2px 14px rgba(20,34,28,.22);pointer-events:none;transition:transform .2s var(--ease)}
.regua{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize;touch-action:pan-y}
.duelo:has(.regua:focus-visible) .puxador{outline:2px solid var(--ink);outline-offset:3px}
.duelo:active .puxador{transform:scale(1.08)}
.duelo-rotulos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(20px,4vw,64px);max-width:calc(var(--max) + 2*var(--gut));margin:clamp(28px,3vw,44px) auto 0;padding-inline:var(--gut)}
.rotulo{display:flex;flex-direction:column;align-items:flex-start;gap:12px;padding-top:20px;border-top:3px solid var(--rust)}
.rotulo-branco{border-top-color:var(--leaf)}
.rotulo p{color:var(--soft);max-width:30em}
.rotulo .pilula-contorno{min-width:min(100%,260px);margin-top:4px}
@media (max-width:760px){
  .duelo{--w:.5;height:clamp(480px,130vw,620px)}
  .duelo-rotulos{grid-template-columns:minmax(0,1fr)}
}

/* ================= 7 · a prateleira inteira ================= */
.prateleira{padding:clamp(64px,7vw,104px) 0 clamp(72px,8vw,112px);border-top:1px solid var(--line)}
.prateleira-cabeca,.prat-cabeca,.prat-lide,.sets,.trio{max-width:calc(var(--max) + 2*var(--gut));margin-inline:auto;padding-inline:var(--gut)}
.prateleira-seg{padding-top:clamp(48px,5vw,72px)}
.prateleira-seg>.prat-tit{margin-top:0}
.prateleira-cabeca{text-align:center}
.prateleira-cabeca p{margin-top:14px;color:var(--soft);font-size:17px}
.prat-cabeca{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-top:clamp(56px,6vw,84px);margin-bottom:26px}
.prat-tit{font-size:clamp(26px,2.6vw,36px)}
.prateleira>.prat-tit{max-width:calc(var(--max) + 2*var(--gut));margin:clamp(56px,6vw,84px) auto 26px;padding-inline:var(--gut);width:100%}
.faixa-potes{display:flex;gap:20px;padding:0 var(--gut) 16px;scroll-snap-type:x mandatory;scroll-padding-inline:var(--gut)}
.pote{flex:none;width:clamp(240px,22vw,300px);display:flex;flex-direction:column;gap:10px;scroll-snap-align:start}
.pote-foto{aspect-ratio:4/5;border-radius:var(--r);overflow:hidden;background-color:var(--mist);margin-bottom:6px}
.pote-foto img{width:100%;height:100%;object-fit:cover}
.pote p{font-size:14.5px;line-height:1.5;color:var(--soft)}
.pote .sabor{font-family:var(--serif);font-style:italic;font-size:17px;color:var(--ink);line-height:1.35}
.pote .pilula-contorno{margin-top:auto}
.pote p:last-of-type{margin-bottom:8px}
.sets{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(28px,5vw,80px);align-items:start}
.indice{border-top:1px solid var(--ink)}
.indice .item{display:grid;grid-template-columns:72px minmax(0,1fr) auto;gap:18px;align-items:center;padding:16px 4px;border-bottom:1px solid var(--line);text-decoration:none;transition:background-color .25s ease,padding .25s var(--ease)}
.indice .item img{width:72px;height:90px;object-fit:cover;border-radius:10px;background-color:var(--mist)}
.indice .nome{display:block;font-family:var(--serif);font-size:clamp(21px,1.8vw,26px);line-height:1.2}
.indice .nota{display:block;margin-top:4px;font-size:14px;line-height:1.5;color:var(--soft);max-width:34em}
.indice .preco{font-size:15px;font-weight:500}
.indice .item.on{background-color:var(--mist);padding-inline:14px}
.palco{position:sticky;top:20px}
.palco-moldura{background-color:var(--mist);border-radius:var(--r);padding:clamp(16px,2.4vw,36px);max-width:809px;margin-inline:auto}
.palco-moldura img{width:100%;max-height:640px;object-fit:contain;transition:opacity .22s ease}
.palco-moldura img.troca{opacity:0}
.palco-legenda{margin-top:14px;text-align:center;font-family:var(--serif);font-style:italic;font-size:20px}
.prat-lide{margin-bottom:28px;font-family:var(--serif);font-size:clamp(20px,2vw,28px);line-height:1.3}
.trio{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(14px,2vw,28px)}
.trio a{display:flex;flex-direction:column;gap:6px;height:100%;text-decoration:none}
.trio-foto{display:block;aspect-ratio:4/5;border-radius:var(--r);overflow:hidden;background-color:var(--mist);margin-bottom:8px}
.trio-foto img{width:100%;height:100%;object-fit:cover}
.trio li:last-child .trio-foto img{object-fit:contain;padding:12px}
.trio .nome{font-family:var(--serif);font-size:clamp(19px,1.6vw,23px);line-height:1.2}
.trio .nota{font-size:14px;line-height:1.5;color:var(--soft)}
.trio .preco{margin-top:auto;padding-top:6px;font-weight:500;font-size:15px}
@media (max-width:900px){
  .sets{grid-template-columns:minmax(0,1fr)}
  .palco{display:none}
  .indice .item{grid-template-columns:64px minmax(0,1fr)}
  .indice .item img{width:64px;height:80px}
  .indice .preco{grid-column:2}
  .trio{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* ================= 8 · misturador: o azul do botão vira bloco ================= */
.misturador{background-color:var(--sky-fill);color:var(--ink);padding:clamp(64px,7vw,104px) var(--gut)}
.misturador-par{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,5vw,84px);align-items:start;max-width:var(--max);margin-inline:auto}
.misturador-texto{display:flex;flex-direction:column;gap:18px}
.misturador h2{font-size:clamp(28px,3.2vw,44px)}
.misturador-texto>p{max-width:34em;font-size:clamp(16px,1.3vw,18px)}
.mix{margin-top:14px;padding:clamp(18px,2.2vw,28px);background-color:#fff;border-radius:var(--r);display:flex;flex-direction:column;gap:18px}
.mix-linha{display:flex;flex-wrap:wrap;gap:8px}
.mix-tam,.mix-molho,.mix-limpa{min-height:44px;padding:0 18px;border:1px solid var(--ink);border-radius:999px;background:transparent;font-size:14px;font-weight:500;transition:background-color .2s ease,color .2s ease,transform .16s var(--ease)}
.mix-tam:active,.mix-molho:active,.mix-limpa:active{transform:scale(.97)}
.mix-tam[aria-checked="true"]{background-color:var(--ink);color:#fff}
.mix-molho:disabled{opacity:.4;cursor:not-allowed}
.mix-limpa{border-color:transparent;text-decoration:underline;text-underline-offset:3px}
.mix-potes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.mix[data-size="4"] .mix-potes{grid-template-columns:repeat(4,minmax(0,1fr))}
.mix[data-size="6"] .mix-potes{grid-template-columns:repeat(3,minmax(0,1fr))}
.mix-slot[hidden]{display:none}
.mix-slot button{position:relative;display:grid;place-items:center;width:100%;aspect-ratio:4/5;padding:0;border:1px dashed var(--ink);border-radius:14px;background-color:var(--mist);overflow:hidden;transition:transform .16s var(--ease)}
.mix-slot.cheio button{border-style:solid;border-color:transparent}
.mix-slot button:disabled{cursor:default}
.mix-slot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.mix[data-size="2"] .mix-slot button{aspect-ratio:5/4}
.mix[data-size="2"] .mix-slot img{object-fit:contain}
.mix-slot button:not(:disabled):active{transform:scale(.97)}
.mix-resumo{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:6px 16px;font-size:15px}
.mix-nome{font-family:var(--serif);font-size:20px}
.mix-preco{font-size:22px;font-weight:500;font-variant-numeric:tabular-nums;white-space:nowrap}
.mix-ir{align-self:flex-start}
.misturador-palco{display:flex;align-self:stretch}
.misturador-moldura{position:relative;flex:1;min-height:420px;background-color:#fff;border-radius:var(--r);padding:clamp(16px,2vw,28px)}
.misturador-moldura img{position:absolute;inset:clamp(16px,2vw,28px);width:calc(100% - 2*clamp(16px,2vw,28px));height:calc(100% - 2*clamp(16px,2vw,28px));max-width:none;object-fit:contain}
.precos-regiao{max-width:var(--max);margin:clamp(36px,4vw,60px) auto 0;overflow-x:auto}
.precos{width:100%;min-width:520px;border-collapse:collapse;font-size:15px}
.precos caption{padding:0 0 10px;text-align:left;font-family:var(--serif);font-size:clamp(24px,2.2vw,30px)}
.precos th,.precos td{padding:11px 16px 11px 0;border-top:1px solid rgba(36,58,51,.32);text-align:left;vertical-align:top;font-weight:400}
.precos tr:last-child th,.precos tr:last-child td{border-bottom:1px solid rgba(36,58,51,.32)}
.precos th{width:14%;font-weight:500}
.precos td.v{width:22%;padding-right:0;text-align:right;font-weight:500;white-space:nowrap;font-variant-numeric:tabular-nums}
@media (max-width:900px){.misturador-par{grid-template-columns:minmax(0,1fr)}.misturador-moldura{min-height:340px}}

/* ================= 9 · Char Siu / Chili Crisp: duas metades coladas pela barra ================= */
.duas-jarras{padding:clamp(64px,7vw,104px) 0 0}
.par-cabeca{max-width:calc(var(--max) + 2*var(--gut));margin:0 auto clamp(32px,4vw,56px);padding-inline:var(--gut);text-align:center}
.par-cabeca h2{font-size:clamp(34px,5vw,72px)}
.par-cabeca .barra{display:inline-block;color:var(--rust);transform:skewX(-14deg);margin:0 .08em}
.par-cabeca p{margin:16px auto 0;max-width:36em;color:var(--soft);font-size:clamp(16px,1.35vw,19px)}
.par-metades{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:stretch}
.jarra{display:flex;flex-direction:column}
.jarra-bbq{background-color:var(--mist)}
.jarra-cc{background-color:var(--ink);color:#fff;margin-left:-56px;clip-path:polygon(56px 0,100% 0,100% 100%,0 100%)}
.jarra-foto{position:relative;flex:1 0 auto;min-height:clamp(320px,38vw,560px);overflow:hidden}
.jarra-foto img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.jarra-corpo{display:flex;flex-direction:column;gap:16px;padding:clamp(28px,3.6vw,56px) clamp(24px,4vw,64px) clamp(36px,4.4vw,72px)}
.jarra-cc .jarra-corpo{padding-left:calc(clamp(24px,4vw,64px) + 40px)}
.jarra-corpo h3{font-size:clamp(26px,2.6vw,36px)}
.jarra-corpo p{max-width:36em}
.jarra-bbq .jarra-corpo p{color:var(--soft)}
.jarra-corpo .lide{font-size:clamp(17px,1.4vw,19px);font-weight:300;line-height:1.6}
.jarra-bbq .jarra-corpo .lide{color:var(--ink)}
.jarra-corpo .forte{font-family:var(--serif);font-size:clamp(22px,2vw,28px);line-height:1.3;color:var(--ink)}
.jarra-cc :focus-visible{outline-color:#fff}
@media (max-width:900px){
  .par-metades{grid-template-columns:minmax(0,1fr)}
  .jarra-cc{margin-left:0;clip-path:none}
  .jarra-cc .jarra-corpo{padding-left:clamp(24px,4vw,64px)}
  .jarra-foto{flex:none;min-height:0;aspect-ratio:4/3}
}

/* ================= 10 · linhagem dos molhos ================= */
.linhagem{padding:clamp(64px,7vw,104px) var(--gut) clamp(64px,7vw,104px)}
.linhagem-cabeca{max-width:var(--max);margin-inline:auto;text-align:center}
.linhagem-cabeca h2{max-width:22em;margin-inline:auto}
.linhagem-cabeca p{max-width:40em;margin:18px auto 0;color:var(--soft);font-size:clamp(16px,1.3vw,18px)}
.linhagem-faixa{max-width:var(--max);margin:clamp(32px,4vw,56px) auto 0;height:clamp(220px,28vw,400px);overflow:hidden;border-radius:var(--r);background-color:#d9692b}
.linhagem-faixa img{width:100%;height:100%;object-fit:cover}
.tempo{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(18px,2.6vw,44px);max-width:var(--max);margin:clamp(36px,4vw,60px) auto 0}
.tempo li{padding-top:18px;border-top:1px solid var(--ink)}
.marco{display:block;margin-bottom:12px;font-family:var(--serif);font-size:clamp(24px,2.2vw,32px);line-height:1.1;letter-spacing:.015em}
.tempo p{font-size:14.5px;line-height:1.55;color:var(--soft)}
@media (max-width:1100px){
  .tempo{grid-template-columns:minmax(0,1fr);gap:0}
  .tempo li{display:grid;grid-template-columns:minmax(0,170px) minmax(0,1fr);gap:20px;padding:20px 0}
  .tempo .marco{margin:0}
}
@media (max-width:520px){.tempo li{grid-template-columns:minmax(0,1fr);gap:8px}}

/* ================= 11 · a cozinha: fundo tinta ================= */
.cozinha{background-color:var(--ink);color:#fff;padding:clamp(64px,7vw,104px) var(--gut)}
.cozinha-cabeca,.receitas,.tabela-regiao{max-width:var(--max);margin-inline:auto}
.cozinha-cabeca{text-align:center}
.cozinha h2{max-width:20em;margin-inline:auto;color:#fff}
.receitas{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(28px,5vw,80px);align-items:start;margin-top:clamp(32px,4vw,56px)}
.receitas-lista{border-top:1px solid rgba(255,255,255,.35)}
.receita{display:flex;flex-direction:column;gap:5px;width:100%;padding:20px 4px 20px 0;border:0;border-bottom:1px solid rgba(255,255,255,.22);border-left:3px solid transparent;background:transparent;color:#fff;text-align:left;transition:padding .25s var(--ease),border-color .25s ease,background-color .25s ease}
.receita-nome{font-family:var(--serif);font-size:clamp(23px,2vw,30px);line-height:1.15}
.receita-meta{font-size:13px;font-weight:500;letter-spacing:.04em;color:var(--sky)}
.receita-nota,.receita-ing{font-size:14.5px;line-height:1.5;color:var(--on-ink);max-width:38em}
.receita[aria-pressed="true"]{padding-left:18px;border-left-color:var(--sky);background-color:rgba(255,255,255,.06)}
@media (hover:hover) and (pointer:fine){.receita:hover{padding-left:14px}}
.receitas-palco{position:sticky;top:20px}
.receitas-moldura{border-radius:var(--r);overflow:hidden;max-width:720px;margin-inline:auto;background-color:#1b2c26}
.receitas-moldura img{width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;transition:opacity .25s ease}
.receitas-moldura img.troca{opacity:0}
.tabela-regiao{margin-top:clamp(40px,5vw,72px);overflow-x:auto}
.tabela-receitas{width:100%;min-width:680px;border-collapse:collapse;font-size:15px}
.tabela-receitas thead th{padding:0 16px 12px 0;text-align:left;font-size:12px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--on-ink);border-bottom:1px solid rgba(255,255,255,.5)}
.tabela-receitas tbody th,.tabela-receitas td{padding:16px 16px 16px 0;text-align:left;vertical-align:top;border-bottom:1px solid rgba(255,255,255,.18);font-weight:400}
.tabela-receitas tbody th{font-family:var(--serif);font-size:20px;line-height:1.2;width:34%}
.tabela-receitas td{color:var(--on-ink);line-height:1.5}
.tabela-receitas td:nth-child(2){white-space:nowrap;color:var(--sky);font-weight:500;width:20%}
.cozinha :focus-visible{outline-color:#fff}
@media (max-width:900px){
  .receitas{grid-template-columns:minmax(0,1fr)}
  .receitas-palco{position:static;order:-1}
  .receitas-moldura img{aspect-ratio:4/3}
}

/* ================= 12 · a tigela: página de revista ================= */
.tigela{padding:clamp(64px,7vw,104px) var(--gut)}
.tigela-par{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,6vw,96px);align-items:start;max-width:var(--max);margin-inline:auto}
.tigela-citacao{position:sticky;top:24px}
.tigela-citacao p{font-family:var(--serif);font-style:italic;font-size:clamp(25px,2.7vw,38px);line-height:1.22;letter-spacing:.01em;text-wrap:pretty}
.tigela-citacao p::before{content:"“"}
.tigela-citacao p::after{content:"”"}
.tigela-citacao footer{margin-top:22px;font-size:14px;font-weight:500;letter-spacing:.04em;color:var(--rust)}
.tigela-colunas{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(24px,3.4vw,52px);align-items:start}
.tigela-col{display:flex;flex-direction:column;gap:14px}
.tigela-col h3{padding-bottom:10px;border-bottom:1px solid var(--ink)}
.tigela-col h4{margin-top:8px;font-size:19px;color:var(--rust)}
.tigela-col p{font-size:15.5px;line-height:1.65;color:var(--soft)}
.tigela-col .forte{font-family:var(--serif);font-size:24px;line-height:1.25;color:var(--ink)}
@media (max-width:980px){
  .tigela-par{grid-template-columns:minmax(0,1fr)}
  .tigela-citacao{position:static}
}
@media (max-width:640px){.tigela-colunas{grid-template-columns:minmax(0,1fr)}}

/* ================= 13 · gente falando ================= */
.gente{display:grid;place-items:center;min-height:clamp(340px,28vw,420px);padding:clamp(56px,6vw,88px) var(--gut);background-color:#2b2b27;color:#fff}
.casa{padding:clamp(56px,6vw,88px) var(--gut) clamp(64px,7vw,104px)}
.gente-citacao{position:relative;z-index:2;max-width:900px;margin-inline:auto;text-align:center}
.gente-citacao .olho{margin-bottom:26px;color:#fff}
.gente blockquote p{font-family:var(--serif);font-size:clamp(23px,2.7vw,36px);line-height:1.28;letter-spacing:.01em;text-wrap:pretty}
.gente blockquote footer{margin-top:22px;font-size:14px;font-weight:500;letter-spacing:.06em;color:#fff}
.gente-fotos{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(12px,1.6vw,22px);max-width:1080px;margin:0 auto}
.gente-fotos figure img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:12px;background-color:var(--mist)}
.gente-fotos figcaption{margin-top:12px;font-family:var(--serif);font-size:13.5px;line-height:1.35;text-align:center}
@media (max-width:820px){.gente-fotos{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ================= 14 · fechamento verde ================= */
.proxima{background-color:var(--leaf);color:#fff;padding:clamp(64px,7vw,104px) var(--gut)}
.proxima-par{display:flex;flex-direction:column;align-items:center;gap:clamp(32px,4vw,56px);max-width:var(--max);margin-inline:auto}
.proxima-texto{display:flex;flex-direction:column;gap:20px;align-items:center;text-align:center}
.proxima h2{font-size:clamp(32px,4vw,56px);color:#fff}
.proxima .olho{color:#fff}
.proxima-texto>p:not(.olho){max-width:32em;font-size:clamp(16px,1.3vw,18px)}
.proxima-texto a{color:#fff}
.proxima-acoes{display:flex;flex-wrap:wrap;align-items:center;gap:14px 28px;margin-top:6px}
.proxima .pilula{color:var(--ink)}
.link-claro{font-size:15px;text-underline-offset:4px}
.proxima-acoes{justify-content:center}
.proxima-foto{width:100%;max-width:900px;border-radius:var(--r);overflow:hidden;background-color:#44601f}
.proxima-foto img{width:100%;height:auto}
.proxima :focus-visible{outline-color:#fff}

/* ---------- celular ---------- */
@media (max-width:640px){
  body{font-size:16px}
  .prat-cabeca{margin-top:48px}
  .jarra-corpo{padding:28px 22px 40px}
  .tira figure{height:230px}
}