/* Peixes da Terra, 3ª versão (12/11): estilo Figma. Fundo branco leite pontilhado, a informação em cartões coloridos
   com as cores da logo (laranja, amarelo, azul, verde), topo com palco em 3D, infográficos, ícones 3D de delivery
   e cada seção se montando ao rolar. Regras do Bruno no briefing (seção "3ª versão"). */

@font-face { font-family: "Bricolage"; src: url(../fontes/bricolage.woff2) format("woff2"); font-weight: 200 800; font-stretch: 75% 100%; font-display: swap; }
@font-face { font-family: "Figtree"; src: url(../fontes/figtree.woff2) format("woff2"); font-weight: 300 900; font-display: swap; }

:root {
  --leite: #fbf7ef; --ponto: rgba(35, 35, 38, .14); --branco: #ffffff;
  --tinta: #18181a; --tinta2: #3b3936; --suave: #66625b; --linha: rgba(24, 24, 26, .09);
  --laranja: #f26a1b; --laranja-claro: #ffe7d8; --amarelo: #ffc531; --amarelo-claro: #fff2c7;
  --laranja-texto: #b8470f; --azul: #1572b6; --azul-claro: #dcedfb; --verde: #23803a; --verde-claro: #dcf1e1;
  --sombra: 0 1px 2px rgba(40, 28, 12, .05), 0 22px 44px -22px rgba(40, 28, 12, .28);
  --sombra-forte: 0 2px 4px rgba(40, 28, 12, .06), 0 34px 70px -28px rgba(40, 28, 12, .38);
  --raio: 28px; --raio-p: 18px; --raio-botao: 4px;
  --t-display: "Bricolage", system-ui, sans-serif; --t-texto: "Figtree", system-ui, sans-serif;
  --ease: cubic-bezier(.16, 1, .3, 1);
  --barra: 76px;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
html { scroll-padding-top: calc(var(--barra) + 16px); color-scheme: light; accent-color: var(--laranja); caret-color: var(--laranja); }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
body {
  font: 400 17px/1.55 var(--t-texto); color: var(--tinta); -webkit-font-smoothing: antialiased;
  background-color: var(--leite);
  background-image: radial-gradient(var(--ponto) 1.2px, transparent 1.6px);
  background-size: 24px 24px;
}
img { display: block; max-width: 100%; height: auto; }
main { overflow-x: clip; }
a { color: inherit; }
h1, h2, h3, p { margin: 0; }
::selection { background: var(--laranja); color: #fff; }
:focus-visible { outline: 3px solid var(--azul); outline-offset: 3px; border-radius: 4px; }
.cartao--laranja :focus-visible, .cartao--amarelo :focus-visible { outline-color: var(--tinta); }
.cartao--azul :focus-visible, .cartao--verde :focus-visible { outline-color: #fff; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.pular { position: fixed; left: 16px; top: -60px; z-index: 50; background: var(--tinta); color: #fff; padding: 10px 14px; border-radius: 6px; font-weight: 700; text-decoration: none; }
.pular:focus { top: 12px; }
.wrap { width: min(100% - 2 * clamp(20px, 5vw, 80px), 1480px); margin-inline: auto; }

/* ---- botões: retos (canto de 4px), sem curva acentuada ---- */
.botao { display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 48px; padding: 0 22px; border-radius: var(--raio-botao); border: 2px solid transparent; font: 700 16px/1 var(--t-texto); text-decoration: none; white-space: nowrap; cursor: pointer; transition: transform .2s var(--ease), box-shadow .2s var(--ease), background-color .2s; }
.botao:hover { transform: translateY(-2px); }
.botao:active { transform: translateY(1px); }
.botao--grande { height: 58px; padding: 0 28px; font-size: 17px; }
.botao--laranja { background: var(--laranja); color: var(--tinta); box-shadow: 0 12px 24px -14px rgba(60, 30, 8, .55); }
.botao--laranja:hover { box-shadow: 0 18px 30px -14px rgba(60, 30, 8, .6); }
.botao--contorno { background: var(--branco); color: var(--tinta); border-color: var(--tinta); }
.botao--escuro { background: var(--tinta); color: #fff; }
.botao--claro { background: var(--branco); color: var(--tinta); }
.zap { width: 21px; height: 21px; fill: currentColor; flex: none; }
.link-seta { display: inline-flex; align-items: center; min-height: 44px; gap: 8px; font-weight: 700; text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 2px; text-decoration-color: var(--laranja); }
.link-seta::after { content: "→"; transition: transform .2s var(--ease); }
.link-seta:hover::after { transform: translateX(4px); }

/* ---- barra de cima ---- */
.barra { position: fixed; inset: 0 0 auto; z-index: 20; height: var(--barra); background: var(--leite); border-bottom: 1px solid transparent; transition: border-color .3s, background-color .3s; }
.barra.rolou { border-bottom-color: var(--linha); }
.barra__in { height: 100%; display: flex; align-items: center; gap: 36px; }
.barra__logo img { height: 56px; width: auto; }
.barra__nav { display: flex; gap: 6px; margin-left: auto; }
.barra__nav a { white-space: nowrap; padding: 10px 14px; border-radius: 6px; font-weight: 600; font-size: 15px; text-decoration: none; transition: background-color .2s; }
.barra__nav a:hover { background: rgba(24, 24, 26, .06); }
.barra__botao { height: 48px; font-size: 15px; }

/* ---- topo: o palco em 3D ---- */
.hero { position: relative; min-height: 100svh; padding: calc(var(--barra) + 24px) 0 clamp(0px, 2vw, 40px); display: grid; align-items: center; overflow: clip; }
.hero__grade { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); align-items: center; gap: clamp(24px, 4vw, 72px); }
.estado { display: inline-flex; align-items: center; gap: 10px; padding: 9px 16px 9px 12px; background: var(--branco); border-radius: 999px; box-shadow: var(--sombra); font-weight: 600; font-size: 15px; }
.estado i { width: 10px; height: 10px; border-radius: 50%; background: #9a958c; flex: none; }
.estado[data-aberto="sim"] i { background: #22a447; box-shadow: 0 0 0 5px rgba(34, 164, 71, .2); }
.hero h1 { margin-top: 26px; font: 800 clamp(50px, 6.3vw, 122px)/.92 var(--t-display); letter-spacing: -0.028em; }
.hero h1 .linha { display: block; }
.destaque { display: inline-block; margin-top: .16em; padding: .02em .16em .08em; background: var(--laranja); color: #fff; border-radius: .16em; transform: rotate(-2deg); box-shadow: 0 18px 30px -18px rgba(60, 30, 8, .5); }
.hero__lead { margin-top: 36px; max-width: 40ch; font-size: clamp(18px, 1.35vw, 22px); line-height: 1.5; color: var(--tinta2); }
.hero__acoes { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
.palco { position: relative; width: min(100%, 78vh); aspect-ratio: 1 / .94; justify-self: center; perspective: 1400px; }
.palco__cena { position: absolute; inset: 0; transform-style: preserve-3d; transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); }
.palco [data-prof] { position: absolute; }
.palco__disco { left: 13%; top: 10%; width: 74%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #ff8a45, var(--laranja) 55%, #d9520a); box-shadow: inset 0 -26px 60px rgba(120, 40, 0, .28), 0 50px 80px -40px rgba(200, 80, 10, .6); }
.palco__anel { left: 4%; top: 1%; width: 92%; aspect-ratio: 1; border-radius: 50%; border: 2px dashed rgba(24, 24, 26, .22); animation: gira 60s linear infinite; }
.palco__prato { left: 8%; top: 16%; width: 86%; filter: drop-shadow(0 34px 34px rgba(60, 25, 5, .38)); }
.flutua { filter: drop-shadow(0 22px 24px rgba(40, 20, 5, .28)); animation: boia 6s ease-in-out infinite; }
.flutua--moto { width: 31%; left: -6%; top: -2%; animation-delay: -1s; }
.flutua--sacola { width: 22%; right: 2%; top: -4%; animation-delay: -3s; }
.flutua--relogio { width: 18%; left: -2%; bottom: 6%; animation-delay: -2s; }
.flutua--pino { width: 17%; right: -4%; top: 38%; animation-delay: -4s; }
.etiqueta { display: flex; align-items: center; gap: 12px; padding: 10px 16px 10px 10px; background: var(--branco); border-radius: var(--raio-p); box-shadow: var(--sombra-forte); white-space: nowrap; }
.etiqueta small { display: block; font-size: 13px; font-weight: 600; color: var(--suave); line-height: 1.2; }
.etiqueta b { display: block; font: 800 clamp(16px, 1.25vw, 21px)/1.15 var(--t-display); letter-spacing: -0.01em; }
.etiqueta__ic { width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; flex: none; }
.etiqueta__ic img { width: 40px; height: 40px; }
.etiqueta__ic--azul { background: var(--azul-claro); } .etiqueta__ic--amarelo { background: var(--amarelo-claro); } .etiqueta__ic--verde { background: var(--verde-claro); }
.etiqueta--entrega { right: 4%; top: 18%; rotate: 3deg; }
.etiqueta--preco { right: 8%; bottom: 2%; rotate: -2deg; }
.etiqueta--pagamento { left: -4%; top: 52%; rotate: -3deg; }
@keyframes gira { to { transform: rotate(360deg); } }
@keyframes boia { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-14px) rotate(2deg); } }
/* estilo Figma: a palavra "em Alegrete" selecionada (moldura azul com as quatro alças) e cursores com nome no palco */
.selecao { position: absolute; inset: -2px -7px -7px; border: 2px solid #1e8bd3; border-radius: 2px; pointer-events: none; }
.selecao i { position: absolute; width: 11px; height: 11px; background: #fff; border: 2px solid #1e8bd3; border-radius: 1px; }
.selecao i:nth-child(1) { left: -7px; top: -7px; } .selecao i:nth-child(2) { right: -7px; top: -7px; }
.selecao i:nth-child(3) { left: -7px; bottom: -7px; } .selecao i:nth-child(4) { right: -7px; bottom: -7px; }
.destaque { position: relative; }
.cursor { display: flex; align-items: flex-start; pointer-events: none; animation: passeia 9s ease-in-out infinite; }
.cursor svg { width: 26px; height: 26px; filter: drop-shadow(0 3px 4px rgba(0, 0, 0, .25)); }
.cursor svg path { stroke: #fff; stroke-width: 1.6; stroke-linejoin: round; }
.cursor span { margin: 20px 0 0 -6px; padding: 5px 10px; border-radius: 4px 12px 12px 12px; color: #fff; font: 700 14px/1 var(--t-texto); white-space: nowrap; box-shadow: 0 8px 18px -8px rgba(0, 0, 0, .45); }
.cursor--azul { left: 58%; top: 46%; } .cursor--azul svg { fill: var(--azul); } .cursor--azul span { background: var(--azul); }
.cursor--verde { left: 16%; top: 30%; animation-delay: -4s; animation-duration: 11s; } .cursor--verde svg { fill: var(--verde); } .cursor--verde span { background: var(--verde); }
@keyframes passeia { 0%, 100% { transform: translate(0, 0); } 30% { transform: translate(34px, -22px); } 62% { transform: translate(-18px, 26px); } }

/* a entrada do topo: cada peça chega de longe, uma por vez */
html.js .hero__texto > :not(h1), html.js .hero h1 .linha { animation: chega 1.1s var(--ease) both; }
html.js .hero h1 .linha:nth-child(2) { animation-delay: .1s; } html.js .hero h1 .linha:nth-child(3) { animation-delay: .2s; }
html.js .hero__texto > :nth-child(3) { animation-delay: .32s; } html.js .hero__texto > :nth-child(4) { animation-delay: .42s; }
html.js .destaque { animation: carimbo .8s var(--ease) .75s both; }
html.js .selecao { animation: aparece .3s ease 1.5s both; }
html.js .cursor { animation: estoura .7s var(--ease) 1.3s both, passeia 9s ease-in-out 2s infinite; }
html.js .cursor--verde { animation: estoura .7s var(--ease) 1.5s both, passeia 11s ease-in-out 2.2s infinite; }
@keyframes carimbo { from { opacity: 0; transform: scale(1.7) rotate(-14deg); } to { opacity: 1; transform: rotate(-2deg); } }
html.js .palco__disco { animation: disco 1.2s var(--ease) .1s both; }
html.js .palco__anel { animation: aparece 1s ease .4s both, gira 60s linear 1.4s infinite; }
html.js .palco__prato { animation: prato 1.3s var(--ease) .25s both; }
html.js .flutua { animation: voa 1.1s var(--ease) both, boia 6s ease-in-out 1.2s infinite; }
html.js .flutua--moto { animation-delay: .45s, 1.5s; } html.js .flutua--sacola { animation-delay: .55s, 1.6s; } html.js .flutua--relogio { animation-delay: .65s, 1.7s; } html.js .flutua--pino { animation-delay: .75s, 1.8s; }
html.js .etiqueta { animation: estoura .8s var(--ease) both; }
html.js .etiqueta--entrega { animation-delay: .9s; } html.js .etiqueta--pagamento { animation-delay: 1s; } html.js .etiqueta--preco { animation-delay: 1.1s; }
@keyframes chega { from { opacity: 0; transform: translateY(34px); } to { opacity: 1; transform: none; } }
@keyframes disco { from { opacity: 0; transform: scale(.55); } to { opacity: 1; transform: none; } }
@keyframes prato { from { opacity: 0; transform: translateY(-80px) scale(1.12) rotate(-8deg); } to { opacity: 1; transform: none; } }
@keyframes voa { from { opacity: 0; transform: scale(.3) rotate(-20deg); } to { opacity: 1; transform: none; } }
@keyframes estoura { from { opacity: 0; transform: scale(.6) translateY(20px); } to { opacity: 1; transform: none; } }
@keyframes aparece { from { opacity: 0; } to { opacity: 1; } }

/* ---- seções e cabeçalhos: a mesma distância entre todos os assuntos ---- */
.secao { padding-block: clamp(44px, 4.5vw, 72px); }
.secao__cab { max-width: 1100px; margin-bottom: clamp(36px, 4vw, 60px); }
.secao__cab h2 { font: 800 clamp(40px, 4.4vw, 78px)/.98 var(--t-display); letter-spacing: -0.032em; }
.secao__cab p { margin-top: 16px; font-size: clamp(18px, 1.3vw, 21px); color: var(--tinta2); }
.secao__cab--lado { max-width: none; display: flex; align-items: end; justify-content: space-between; gap: 24px; flex-wrap: wrap; }

/* ---- cartões ---- */
.cartao { position: relative; background: var(--branco); border-radius: var(--raio); box-shadow: var(--sombra); padding: clamp(24px, 2.4vw, 40px); overflow: hidden; }
.cartao--laranja { background: var(--laranja); color: var(--tinta); }
.cartao--amarelo { background: var(--amarelo); color: var(--tinta); }
.cartao--azul { background: var(--azul); color: #fff; }
.cartao--verde { background: var(--verde); color: #fff; }
.cartao__3d { position: absolute; right: -2%; top: -4%; width: clamp(130px, 13vw, 210px); filter: drop-shadow(0 18px 18px rgba(0, 0, 0, .22)); transition: transform .5s var(--ease); }
.cartao:hover .cartao__3d { transform: translateY(-8px) rotate(-6deg) scale(1.04); }
.cartao__rotulo { font-weight: 700; font-size: 17px; }
.numero { margin-top: 8px; font: 800 clamp(36px, 4.4vw, 78px)/.95 var(--t-display); letter-spacing: -0.045em; max-width: 9ch; }
.numero__a { font-size: .5em; letter-spacing: -0.02em; }
.cartao__nota { margin-top: 18px; font-size: 16px; max-width: 30ch; }

/* infográfico 1: os quatro números */
.bento { display: grid; grid-template-columns: 1.15fr 1fr 1fr; grid-template-rows: auto auto; gap: clamp(14px, 1.6vw, 24px); }
.bento > .cartao { display: flex; flex-direction: column; }
.bento__a { grid-row: span 2; }
.bento__b, .bento__c { min-height: 340px; }
.bento__d { grid-column: span 2; min-height: 260px; justify-content: center; padding-right: clamp(170px, 16vw, 280px); }
/* o ícone 3D mora no canto de cima e o número fica embaixo dele, sem encostar */
.bento__b .cartao__3d, .bento__c .cartao__3d { width: clamp(108px, 8vw, 150px); right: 14px; top: 12px; }
.bento__b .numero, .bento__c .numero { margin-top: auto; padding-top: 20px; }
.bento__d .cartao__3d { width: clamp(140px, 13vw, 230px); right: 3%; top: auto; bottom: -6%; }
.bento__a .cartao__3d { position: relative; right: auto; top: auto; width: min(80%, 340px); margin: 6px auto 0; }
.porcoes { margin-top: auto; padding-top: 18px; display: grid; gap: 12px; }
.porcao { display: grid; grid-template-columns: 64px 1fr; grid-template-rows: auto auto; column-gap: 14px; row-gap: 3px; align-items: center; padding: 14px 18px; background: rgba(255, 255, 255, .3); border-radius: var(--raio-p); }
.porcao .gente { grid-row: span 2; }
.porcao b { font: 800 22px/1 var(--t-display); align-self: end; }
.porcao small { font-size: 15px; font-weight: 600; align-self: start; }
.gente { display: inline-flex; gap: 5px; align-items: end; }
.gente i { position: relative; width: 16px; height: 24px; }
.gente i::before { content: ""; position: absolute; left: 4px; top: 0; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.gente i::after { content: ""; position: absolute; left: 0; bottom: 0; width: 16px; height: 13px; border-radius: 8px 8px 3px 3px; background: currentColor; }
.faixinha { margin-top: 22px; display: flex; gap: 4px; height: 38px; }
.faixinha span { flex: 0 1 var(--w); min-width: 34px; display: grid; place-items: center; background: rgba(24, 24, 26, .14); border-radius: 6px; font-weight: 800; font-size: 13px; }
.faixinha span:first-child { background: var(--tinta); color: var(--amarelo); }
.semana { list-style: none; margin: 22px 0 0; padding: 0; display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; max-width: 360px; }
.semana li { height: 44px; display: grid; place-items: center; border-radius: 8px; background: rgba(255, 255, 255, .95); color: var(--azul); font-weight: 800; }
.semana li.fechado { color: rgba(255, 255, 255, .55); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .45); background: linear-gradient(to top right, transparent calc(50% - 1px), rgba(255, 255, 255, .75) calc(50% - 1px) calc(50% + 1px), transparent calc(50% + 1px)); }
.semana__legenda { margin-top: 12px; display: flex; gap: 18px; font-size: 14px; font-weight: 700; }
.semana__legenda span { display: inline-flex; align-items: center; gap: 8px; }
.semana__legenda span::before { content: ""; width: 14px; height: 14px; border-radius: 4px; }
.leg-hoje::before { background: #fff; outline: 3px solid var(--amarelo); outline-offset: 1px; }
.leg-fechado::before { box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .6); background: linear-gradient(to top right, transparent calc(50% - 1px), #fff calc(50% - 1px) calc(50% + 1px), transparent calc(50% + 1px)); }
.semana li.hoje { outline: 3px solid var(--amarelo); outline-offset: 2px; }
.bento__d .numero { max-width: 14ch; font-size: clamp(34px, 3.6vw, 64px); }

/* infográfico 2: como pedir, uma rota com a moto andando */
/* a estrada passa por cima dos três cartões, com uma parada no meio de cada um; a moto faz o caminho */
.rota { position: relative; padding-top: 118px; }
.rota__linha { position: absolute; left: 16.66%; right: 16.66%; top: 70px; height: 4px; background: repeating-linear-gradient(90deg, rgba(24, 24, 26, .4) 0 14px, transparent 14px 26px); }
.rota__linha::before, .rota__linha::after, .rota::before { content: ""; position: absolute; top: 50%; width: 18px; height: 18px; margin-top: -9px; border-radius: 50%; background: var(--laranja); box-shadow: 0 0 0 6px rgba(242, 106, 27, .2); }
.rota__linha::before { left: -9px; } .rota__linha::after { right: -9px; }
.rota::before { top: 72px; left: calc(50% - 9px); z-index: 1; }
.rota__moto { position: absolute; bottom: -6px; left: -48px; width: 96px; transform: scaleX(-1); animation: anda 8s cubic-bezier(.65, 0, .35, 1) infinite; }
@keyframes anda { 0% { left: -48px; opacity: 0; } 5% { opacity: 1; } 42%, 58% { left: calc(50% - 48px); } 94% { opacity: 1; } 100% { left: calc(100% - 48px); opacity: 0; } }
.passos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2vw, 32px); }
.passo { text-align: center; padding-top: 28px; }
.passo img { width: clamp(120px, 10vw, 168px); margin: 0 auto 8px; filter: drop-shadow(0 18px 18px rgba(40, 20, 5, .22)); transition: transform .5s var(--ease); }
.passo:hover img { transform: translateY(-8px) rotate(-5deg); }
.passo__n { position: absolute; left: 22px; top: 22px; width: 44px; height: 44px; border-radius: 12px; background: var(--laranja); color: var(--tinta); display: grid; place-items: center; font: 800 22px/1 var(--t-display); }
.passo h3 { font: 800 clamp(22px, 1.9vw, 30px)/1.1 var(--t-display); letter-spacing: -0.02em; }
.passo p { margin-top: 10px; color: var(--tinta2); font-size: 17px; }

/* infográfico 3: o cardápio em cartões, com a foto do prato e os bonequinhos de quanto serve */
.legenda-porcao { display: flex; gap: 14px; flex-wrap: wrap; }
.legenda-porcao > span { display: inline-flex; align-items: center; gap: 10px; padding: 10px 14px; background: var(--branco); border-radius: 999px; box-shadow: var(--sombra); font-weight: 700; font-size: 15px; }
.legenda-porcao .gente { color: var(--laranja); }
:is(.legenda-porcao, .preco) .gente { gap: 3px; }
:is(.legenda-porcao, .preco) .gente i { width: 13px; height: 20px; }
:is(.legenda-porcao, .preco) .gente i::before { left: 3px; width: 7px; height: 7px; }
:is(.legenda-porcao, .preco) .gente i::after { width: 13px; height: 11px; }
.pratos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(14px, 1.6vw, 24px); }
.prato { display: flex; flex-direction: column; padding: 0; transition: transform .35s var(--ease), box-shadow .35s var(--ease); }
.prato:hover { transform: translateY(-6px); box-shadow: var(--sombra-forte); }
.prato__foto { position: relative; aspect-ratio: 5 / 4; background: var(--tom, var(--laranja-claro)); display: grid; place-items: center; overflow: hidden; }
.prato__foto::before { content: ""; position: absolute; width: 70%; aspect-ratio: 1; border-radius: 50%; background: rgba(255, 255, 255, .55); }
.prato__foto img { position: relative; width: 78%; filter: drop-shadow(0 16px 16px rgba(60, 30, 5, .25)); transition: transform .5s var(--ease); }
.prato:hover .prato__foto img { transform: scale(1.06) rotate(-2deg); }
.prato__selo { position: absolute; left: 14px; top: 14px; padding: 6px 10px; border-radius: 6px; font: 700 13px/1 var(--t-texto); background: var(--tinta); color: #fff; }
.prato__selo--esgotado { background: #b42318; }
.prato__corpo { padding: 20px 22px 22px; display: flex; flex-direction: column; gap: 12px; flex: 1; }
.prato__nome { font: 800 clamp(22px, 1.7vw, 27px)/1.1 var(--t-display); letter-spacing: -0.02em; }
.prato__nota { margin-top: -6px; font-size: 15px; color: var(--suave); }
.precos { display: grid; gap: 8px; margin-top: auto; }
.preco { display: grid; grid-template-columns: 46px 1fr auto; align-items: center; gap: 10px; margin: 0; padding: 10px 12px; border-radius: 12px; background: var(--leite); }
.preco small { font-size: 13px; color: var(--suave); font-weight: 600; margin-left: 4px; }
.qtd { display: inline-grid; place-items: center; min-width: 34px; height: 26px; padding: 0 6px; border-radius: 6px; background: var(--laranja); color: var(--tinta); font: 800 14px/1 var(--t-display); }
.preco .gente { color: var(--laranja); }
.preco span { font-weight: 600; font-size: 15px; }
.preco > span:nth-child(2) { white-space: nowrap; }
.preco b { font: 800 22px/1 var(--t-display); letter-spacing: -0.02em; }
.prato.esgotado .prato__foto img { filter: grayscale(1) opacity(.55); }
.prato.esgotado .preco b { text-decoration: line-through; color: var(--suave); }
.sabores { display: flex; flex-wrap: wrap; gap: 6px; }
.sabores > span { padding: 5px 9px; border-radius: 6px; background: var(--leite); font-size: 14px; font-weight: 600; color: var(--tinta2); }
.sabores > span.fora { text-decoration: line-through; opacity: .6; }
.prato__icone { width: 58% !important; }
.prato--chamada { background: var(--tinta); color: #fff; justify-content: space-between; padding: clamp(24px, 2.4vw, 34px); }
.prato--chamada h3 { font: 800 clamp(28px, 2.4vw, 40px)/1 var(--t-display); letter-spacing: -0.03em; }
.prato--chamada p { margin-top: 12px; color: rgba(255, 255, 255, .8); }
.prato--chamada img { width: 58%; align-self: end; margin: 8px -8px 8px auto; }

/* infográfico 4: entrega em anéis, busca do bairro, retirada */
.entrega { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); grid-template-rows: auto auto; gap: clamp(14px, 1.6vw, 24px); }
.zonas { grid-row: span 2; }
.zonas h3, .retirada h3 { font: 800 clamp(26px, 2.2vw, 36px)/1.05 var(--t-display); letter-spacing: -0.03em; }
.zonas__grade { margin-top: 24px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px; align-items: center; }
.aneis { position: relative; aspect-ratio: 1; }
.anel { position: absolute; border-radius: 50%; border: 0; padding: 0; cursor: pointer; display: grid; place-items: start center; font: inherit; transition: transform .35s var(--ease), background-color .3s, box-shadow .3s; }
.anel span { margin-top: 5%; padding: 5px 11px; border-radius: 999px; background: var(--branco); color: var(--tinta); font: 800 15px/1 var(--t-display); box-shadow: 0 6px 14px -8px rgba(0, 0, 0, .4); }
.anel--3 { inset: 0; background: #ffe0cc; } .anel--2 { inset: 16%; background: #ffb98f; } .anel--1 { inset: 32%; background: var(--laranja); }
.anel.ativo { box-shadow: 0 0 0 4px var(--tinta); }
.anel:hover { transform: scale(1.02); }
.aneis__loja { position: absolute; left: 50%; top: 52%; width: 26%; translate: -50% -50%; filter: drop-shadow(0 12px 12px rgba(60, 20, 0, .35)); animation: boia 4s ease-in-out infinite; pointer-events: none; z-index: 2; }
.faixas { display: grid; gap: 10px; }
.faixa { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; width: 100%; padding: 14px 16px; border: 2px solid transparent; border-radius: 6px; background: var(--leite); cursor: pointer; text-align: left; font: inherit; color: inherit; transition: border-color .2s, background-color .2s, transform .2s; }
.faixa:hover { transform: translateX(4px); }
.faixa[aria-pressed="true"] { border-color: var(--tinta); background: var(--branco); }
.faixa b { font: 800 22px/1 var(--t-display); color: var(--laranja-texto); }
.faixa span { font-weight: 700; font-size: 15px; }
.faixa small { font-size: 14px; color: var(--suave); }
/* os bairros da faixa escolhida em etiquetas; os primeiros 12 e um botão para ver todos */
.faixas__nomes { margin-top: 16px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; align-content: flex-start; }
.chip { padding: 6px 10px; border: 0; border-radius: 6px; background: var(--leite); color: var(--tinta2); font: 600 14px/1.2 var(--t-texto); }
.chip--achado { background: var(--amarelo); color: var(--tinta); font-weight: 800; }
.mais, .atalho { display: inline-flex; align-items: center; min-height: 44px; padding: 0 4px; border: 0; background: none; color: var(--tinta); font: 700 15px/1 var(--t-texto); text-decoration: underline; text-decoration-color: var(--laranja); text-decoration-thickness: 2px; text-underline-offset: 5px; cursor: pointer; }
.mais--grande { min-height: 58px; padding: 0 10px; font-size: 17px; }
.canal .mais { color: #fff; text-decoration-color: var(--amarelo); }
.prato__pedir { align-self: flex-start; margin: -4px 0 -10px; }
.mais::after { content: "→"; margin-left: 6px; text-decoration: none; display: inline-block; transition: transform .2s var(--ease); }
.mais:hover::after { transform: translateX(4px); }
.atalho:hover { color: var(--laranja-texto); }
.busca { display: grid; gap: 14px; align-content: start; }
.busca__rotulo { display: flex; align-items: center; gap: 12px; font: 800 clamp(24px, 2vw, 32px)/1.1 var(--t-display); letter-spacing: -0.02em; }
.busca__rotulo img { width: 48px; height: 48px; }
.busca__campo { width: 100%; height: 58px; padding: 0 18px; border: 2px solid var(--linha); border-radius: 12px; background: var(--leite); color: var(--tinta); font: 500 18px/1 var(--t-texto); transition: border-color .2s, box-shadow .2s; }
.busca__campo:focus { outline: none; border-color: var(--laranja); box-shadow: 0 0 0 4px rgba(242, 106, 27, .18); }
.busca__campo::placeholder { color: #736e66; }
.busca__resposta { font-size: 17px; color: var(--tinta2); min-height: 1.6em; }
.busca__resposta b { font: 800 26px/1 var(--t-display); color: var(--laranja-texto); }
.retirada { display: grid; gap: 10px; align-content: start; padding-right: clamp(120px, 12vw, 180px); }
.retirada p { color: var(--tinta2); }
.retirada__3d { position: absolute; right: 4%; bottom: 4%; width: clamp(110px, 10vw, 150px); filter: drop-shadow(0 14px 14px rgba(40, 20, 5, .25)); }

/* ---- canal: o cartão grande do fim ---- */
.canal { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); align-items: center; gap: 24px; padding: clamp(32px, 4.4vw, 72px); min-height: 420px; }
.canal h2 { font: 800 clamp(38px, 4.4vw, 78px)/.98 var(--t-display); letter-spacing: -0.032em; max-width: 14ch; }
.canal p { margin-top: 16px; font-size: clamp(18px, 1.3vw, 21px); }
.canal .hero__acoes { margin-top: 28px; }
.canal__3d { width: min(100%, 380px); justify-self: center; filter: drop-shadow(0 30px 30px rgba(80, 30, 0, .35)); animation: boia 6s ease-in-out infinite; }

/* ---- rodapé ---- */
.rodape { padding: clamp(40px, 4vw, 64px) 0 32px; background: var(--branco); border-top: 1px solid var(--linha); }
.rodape__grade { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 32px; }
.rodape__marca img { height: 54px; width: auto; }
.rodape__marca p { margin-top: 14px; color: var(--tinta2); max-width: 28ch; }
.rodape h3 { font: 700 14px/1.3 var(--t-texto); color: var(--suave); margin-bottom: 10px; }
.rodape a { text-decoration: none; }
 .rodape a:hover { text-decoration: underline; }
.rodape__base { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 48px; padding-top: 20px; border-top: 1px solid var(--linha); font-size: 14px; color: var(--suave); }

/* ---- barra do celular ---- */
.barra-cel { display: none; }

/* ---- montagem ao rolar: cada bloco chega de um lado quando entra na tela e, depois, as peças de dentro se encaixam
   (ícone 3D salta, barras crescem, dias acendem, anéis abrem, títulos sobem palavra por palavra) ---- */
.pal { display: inline-block; overflow: clip; overflow-clip-margin: .14em; padding-bottom: .1em; margin-bottom: -.1em; vertical-align: top; }
.pal > span { display: inline-block; }
html.js.anima [data-monta] { opacity: 0; transform: translate(var(--dx, 0), 36px) scale(.93) rotate(var(--giro, 0deg)); transition: opacity .7s var(--ease), transform 1.05s var(--ease); transition-delay: calc(var(--i, 0) * 110ms); }
html.js.anima [data-monta].montado { opacity: 1; transform: none; }
html.js.anima [data-monta].montado.pronto { transition-delay: 0s; transition-duration: .35s; }
html.js.anima .prato.montado:hover { transform: translateY(-6px); }
html.js.anima .secao__cab[data-monta] { opacity: 1; transform: none; }
html.js.anima .secao__cab .pal > span, html.js.anima .canal .pal > span { transform: translateY(108%); transition: transform .9s var(--ease); transition-delay: calc(var(--k, 0) * 70ms); }
html.js.anima .secao__cab p { opacity: 0; transform: translateY(16px); transition: opacity .7s var(--ease) .35s, transform .7s var(--ease) .35s; }
html.js.anima .secao__cab .legenda-porcao { opacity: 0; transition: opacity .7s ease .5s; }
html.js.anima .montado .pal > span, html.js.anima .montado.canal .pal > span { transform: none; }
html.js.anima .secao__cab.montado p, html.js.anima .secao__cab.montado .legenda-porcao { opacity: 1; transform: none; }
html.js.anima .rota__linha[data-monta] { opacity: 1; transform: scaleX(0); transform-origin: left center; transition: transform 1.4s var(--ease) .2s; }
html.js.anima .rota__linha[data-monta].montado { transform: none; }
@keyframes salta { from { opacity: 0; scale: .2; rotate: -24deg; } 70% { opacity: 1; scale: 1.08; } to { opacity: 1; scale: 1; rotate: 0deg; } }
@keyframes cresce { from { scale: 0 1; } to { scale: 1 1; } }
@keyframes acende { from { opacity: 0; scale: .4; } to { opacity: 1; scale: 1; } }
@keyframes entra-lado { from { opacity: 0; translate: -30px 0; } to { opacity: 1; translate: 0 0; } }
html.js.anima [data-monta] :is(.cartao__3d, .passo > img, .retirada__3d, .canal__3d, .prato__foto img, .aneis__loja, .prato--chamada img) { opacity: 0; }
html.js.anima .montado :is(.cartao__3d, .passo > img, .retirada__3d, .prato__foto img, .prato--chamada img) { animation: salta .9s var(--ease) calc(var(--i, 0) * 110ms + .35s) both; }
html.js.anima .montado .canal__3d { animation: salta .9s var(--ease) .4s both, boia 6s ease-in-out 1.4s infinite; }
html.js.anima .montado .aneis__loja { animation: salta .8s var(--ease) 1.05s both, boia 4s ease-in-out 2s infinite; }
html.js.anima .faixinha span { transform-origin: left center; }
html.js.anima [data-monta] .faixinha span { scale: 0 1; }
html.js.anima .montado .faixinha span { animation: cresce .8s var(--ease) both; }
html.js.anima .montado .faixinha span:nth-child(1) { animation-delay: .5s; } html.js.anima .montado .faixinha span:nth-child(2) { animation-delay: .65s; } html.js.anima .montado .faixinha span:nth-child(3) { animation-delay: .8s; }
html.js.anima [data-monta] .semana li, html.js.anima [data-monta] .porcao, html.js.anima [data-monta] .anel { opacity: 0; }
html.js.anima .montado .semana li { animation: acende .5s var(--ease) both; }
html.js.anima .montado .semana li:nth-child(1) { animation-delay: .45s; } html.js.anima .montado .semana li:nth-child(2) { animation-delay: .52s; } html.js.anima .montado .semana li:nth-child(3) { animation-delay: .59s; } html.js.anima .montado .semana li:nth-child(4) { animation-delay: .66s; } html.js.anima .montado .semana li:nth-child(5) { animation-delay: .73s; } html.js.anima .montado .semana li:nth-child(6) { animation-delay: .8s; } html.js.anima .montado .semana li:nth-child(7) { animation-delay: .87s; }
html.js.anima .montado .porcao { animation: entra-lado .7s var(--ease) both; }
html.js.anima .montado .porcao:nth-child(1) { animation-delay: .55s; } html.js.anima .montado .porcao:nth-child(2) { animation-delay: .7s; }
html.js.anima .montado .anel { animation: acende .8s var(--ease) both; }
html.js.anima .montado .anel--3 { animation-delay: .3s; } html.js.anima .montado .anel--2 { animation-delay: .5s; } html.js.anima .montado .anel--1 { animation-delay: .7s; }

/* ---- larguras ---- */
@media (max-width: 1200px) {
  .pratos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .zonas__grade { grid-template-columns: 1fr; }
  .aneis { width: min(100%, 360px); justify-self: center; }
}
@media (max-width: 900px) { .barra__nav { display: none; } .barra__botao { margin-left: auto; } }
@media (max-width: 1023px) {
  .hero__grade { grid-template-columns: 1fr; }
  .hero { min-height: 0; padding-top: calc(var(--barra) + 32px); }
  .palco { width: min(100%, 620px); }
  .bento { grid-template-columns: 1fr 1fr; }
  .bento__a { grid-row: auto; grid-column: span 2; min-height: 0; }
  .bento__d { grid-column: span 2; }
  .entrega { grid-template-columns: 1fr; }
  .zonas { grid-row: auto; }
  .pratos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rodape__grade { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 760px) {
  :root { --barra: 64px; --raio: 22px; }
  .barra__nav { display: none; }
  .barra__logo img { height: 42px; }
  .barra__botao { margin-left: auto; height: 48px; padding: 0 16px; font-size: 15px; }
  .barra__botao .zap { display: none; }
  .hero h1 { font-size: clamp(44px, 12.4vw, 64px); }
  .hero__acoes .botao { width: 100%; }
  .palco { width: 100%; margin-top: 8px; }
  .etiqueta { padding: 8px 12px 8px 8px; gap: 8px; }
  .etiqueta__ic { width: 36px; height: 36px; } .etiqueta__ic img { width: 30px; height: 30px; }
  .etiqueta small { font-size: 12px; }
  .etiqueta b { font-size: 15px; }
  .etiqueta--pagamento { left: 0; }
  .bento { grid-template-columns: 1fr; }
  .bento__a, .bento__d { grid-column: auto; }
  .rota { padding-top: 0; }
  .rota__linha, .rota::before { display: none; }
  .legenda-porcao { gap: 8px; }
  .legenda-porcao > span { padding: 8px 12px; font-size: 14px; gap: 8px; }
  .bento__b, .bento__c { min-height: 0; }
  .bento__b .numero, .bento__c .numero { padding-top: 64px; }
  .bento__d { padding-right: clamp(24px, 2.4vw, 40px); padding-bottom: 150px; }
  .bento__d .cartao__3d { width: 150px; bottom: -4%; }
  .passos { grid-template-columns: 1fr; }
  .passo { text-align: left; display: grid; grid-template-columns: 96px 1fr; column-gap: 16px; align-items: center; padding: 20px; }
  .passo img { grid-row: span 2; width: 96px; margin: 0; }
  .passo p { margin-top: 4px; }
  .passo { padding-right: 60px; }
  .passo__n { left: auto; right: 16px; top: 16px; width: 36px; height: 36px; font-size: 18px; }
  .pratos { grid-template-columns: 1fr; }
  .canal { grid-template-columns: 1fr; min-height: 0; }
  .canal__3d { width: 200px; justify-self: end; margin-top: -8px; }
  .retirada { padding-right: clamp(20px, 2.4vw, 40px); padding-bottom: 150px; }
  .rodape__grade { grid-template-columns: 1fr; }
  .rodape__base { flex-direction: column; }
  .barra-cel { position: fixed; left: 16px; right: 16px; bottom: calc(14px + env(safe-area-inset-bottom)); z-index: 25; display: flex; height: 58px; font-size: 17px; translate: 0 140%; transition: translate .35s var(--ease); }
  .barra-cel.mostra { translate: 0 0; }
  .rodape { padding-bottom: 110px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  html.js.anima [data-monta] { opacity: 1; transform: none; }
}

/* atalhos da busca do bairro */
.busca__atalhos { display: flex; flex-wrap: wrap; align-items: center; column-gap: 10px; }
.busca__atalhos > span { font-size: 14px; font-weight: 600; color: var(--suave); margin-right: 4px; }

.hero__acoes .mais { padding-inline: 0; }

@media (max-width: 760px) { .rodape__base { gap: 0; } }

/* ---- 1ª rodada do crítico (12/11) ---- */
p, h3 { text-wrap: pretty; }
.cartao__nota, .retirada p, .prato--chamada p, .faixa span { text-wrap: balance; }
.busca__campo { border-radius: 8px; }
@media (min-width: 1400px) { .hero h1 { letter-spacing: -0.022em; } .secao__cab h2, .canal h2 { letter-spacing: -0.02em; } }
/* do notebook pequeno ao monitor de 1440: o peso já está na legenda do cardápio, o rótulo do preço fica só "Grande" e "Média" */
@media (min-width: 1024px) and (max-width: 1439px) { .preco small { display: none; } }
@media (max-width: 1023px) {
  .hero { padding-bottom: 48px; }
  .bento__b, .bento__c { min-height: 0; }
  .bento__b .numero, .bento__c .numero { padding-top: 64px; }
}
/* tablet: o cartão laranja em duas colunas (prato | número e porções), números grandes */
@media (min-width: 761px) and (max-width: 1023px) {
  .bento > .bento__a { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 28px; align-content: center; }
  .bento__a .cartao__3d { grid-column: 1; grid-row: 1 / span 3; width: 100%; margin: 0; align-self: center; }
  .bento__a > :not(.cartao__3d) { grid-column: 2; }
  .bento__a .porcoes { margin-top: 0; }
  .secao__cab h2 { font-size: 52px; }
  .numero { font-size: 54px; }
  .bento__d .numero { font-size: 48px; }
}
@media (max-width: 760px) {
  .aneis__loja { top: 60%; width: 22%; }
  .barra__botao { transition: opacity .25s, visibility .25s; }
  .cel-mostra .barra__botao { opacity: 0; visibility: hidden; }
}

/* ---- 2ª rodada do crítico ---- */
.secao__cab h2, .canal h2 { text-wrap: balance; }
.preco b { white-space: nowrap; }
@media (min-width: 1024px) and (max-width: 1439px) {
  .preco__ic:has(> .qtd) { display: none; }
  .preco:has(.qtd) { grid-template-columns: 1fr auto; }
}
/* cardápio em 3 colunas: o cartão Já escolheu? ocupa 2 e fecha a última linha */
@media (min-width: 1024px) and (max-width: 1200px) {
  .prato--chamada { grid-column: span 2; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-content: center; column-gap: 24px; }
  .prato--chamada > div { grid-column: 1; }
  .prato--chamada img { grid-column: 2; grid-row: 1 / span 2; width: 170px; margin: 0; align-self: center; }
  .prato--chamada .botao { grid-column: 1; justify-self: start; margin-top: 18px; }
}
@media (max-width: 1023px) { .hero { overflow-x: clip; overflow-y: visible; } }
@media (max-width: 760px) {
  .rodape p a, .rodape__base a { display: inline-flex; align-items: center; min-height: 44px; }
}
@media (max-width: 760px) { .rodape__base { align-items: flex-start; } }

/* ---- pedidos do Bruno ao ver a 3ª versão (12/11) ---- */
/* o topo um pouco mais alto na tela */
@media (min-width: 1024px) { .hero { padding-top: calc(var(--barra) + 8px); padding-bottom: clamp(40px, 6vw, 112px); } }
/* os 4 cartões do resumo: degradê suave e destaque ao passar o mouse (sobe e ganha a moldura azul do Figma) */
.bento > .cartao { transition: transform .35s var(--ease), box-shadow .35s var(--ease), outline-color .2s; outline: 2px solid transparent; outline-offset: 6px; }
.bento > .cartao:hover, html.js.anima .bento > .cartao.montado:hover { transform: translateY(-8px); box-shadow: var(--sombra-forte); outline-color: #1e8bd3; }
.bento__a { background: radial-gradient(130% 120% at 100% 0%, #ff8b47 0%, var(--laranja) 55%); }
.bento__b { background: radial-gradient(130% 120% at 100% 0%, #ffd863 0%, var(--amarelo) 55%); }
.bento__c { background: radial-gradient(130% 120% at 100% 0%, #2a8bd0 0%, var(--azul) 55%); }
.bento__d { background: radial-gradient(120% 150% at 100% 50%, #34a453 0%, var(--verde) 60%); }
/* cartão verde: o celular no meio da altura; Pix, Cartão e Dinheiro em cartõezinhos de traço fino */
.bento__d .cartao__3d { top: 50%; bottom: auto; right: 4%; translate: 0 -50%; width: clamp(140px, 12vw, 210px); }
.pagar { list-style: none; margin: 22px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; max-width: 600px; }
.pagar li { display: grid; align-content: start; gap: 4px; padding: 16px 16px 14px; border-radius: var(--raio-p); background: rgba(0, 0, 0, .13); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .3); transition: background-color .2s, transform .2s var(--ease); }
.pagar li:hover { background: rgba(0, 0, 0, .2); transform: translateY(-3px); }
.pagar svg { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; margin-bottom: 6px; }
.pagar b { font: 800 21px/1.1 var(--t-display); letter-spacing: -0.01em; }
.pagar small { font-size: 14px; font-weight: 600; line-height: 1.3; text-wrap: balance; }
html.js.anima [data-monta] .pagar li { opacity: 0; }
html.js.anima .montado .pagar li { animation: acende .6s var(--ease) both; }
html.js.anima .montado .pagar li:nth-child(1) { animation-delay: .45s; } html.js.anima .montado .pagar li:nth-child(2) { animation-delay: .57s; } html.js.anima .montado .pagar li:nth-child(3) { animation-delay: .69s; }
@media (max-width: 760px) {
  .bento__d .cartao__3d { top: auto; bottom: 14px; translate: none; width: 120px; }
  .bento__d { padding-bottom: 130px; }
  .pagar { grid-template-columns: 1fr; gap: 8px; }
  .pagar li { grid-template-columns: auto 1fr; column-gap: 12px; row-gap: 0; align-items: center; padding: 12px 14px; }
  .pagar svg { grid-row: span 2; margin: 0; }
}
@media (prefers-reduced-motion: reduce) { .bento > .cartao:hover { transform: none; } }