/* Baunim · Street Food & Coffee · Gleba Palhano, Londrina */

:root {
  --azul: #18228c;
  --azul-700: #111a70;
  --azul-900: #0b1150;
  --azul-400: #3247c8;
  --amarelo: #f9b917;
  --amarelo-700: #b98200;
  --mostarda: #c39b3b;
  --marrom: #4c281a;
  --marrom-900: #2e160d;
  --creme: #fbf1dc;
  --papel: #fffdf7;
  --tinta: #1b1f4a;

  --ff-display: 'Londrina Solid', 'Arial Narrow', Impact, sans-serif;
  --ff-contorno: 'Londrina Outline', 'Londrina Solid', Impact, sans-serif;
  --ff-letreiro: 'Leckerli One', 'Brush Script MT', cursive;
  --ff-texto: 'Figtree', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  --margem: clamp(20px, 5vw, 48px);
  --miolo: min(1180px, 100% - var(--margem) * 2);
  --topo-h: 68px;
  --ease: cubic-bezier(.2, .8, .2, 1);
  --foco: var(--azul-900);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--topo-h) + 16px); -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--creme); color: var(--tinta); font-family: var(--ff-texto); font-size: 1.0625rem; line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: clip; }
img, svg, iframe { display: block; max-width: 100%; }
img { height: auto; }
h1, h2, h3, h4, p, ul, dl, dd, figure, blockquote { margin: 0; }
ul { padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
:focus-visible { outline: 3px solid var(--foco); outline-offset: 3px; border-radius: 6px; }

.miolo { width: var(--miolo); margin-inline: auto; }
.i { width: 1.2em; height: 1.2em; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.pular { position: absolute; left: 12px; top: -60px; z-index: 400; padding: 10px 16px; border-radius: 10px; background: var(--azul); color: var(--creme); font-weight: 800; transition: top .2s; }
.pular:focus { top: 12px; }

/* ---------- Botões ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55em;
  padding: .8em 1.3em; border: 2px solid transparent; border-radius: 999px;
  font-weight: 800; font-size: 1rem; line-height: 1.1; white-space: nowrap; cursor: pointer;
  transition: translate .2s var(--ease), box-shadow .2s var(--ease), background-color .2s, color .2s;
}
.btn--lg { padding: .95em 1.5em; font-size: 1.06rem; }
.btn--sm { padding: .62em 1em; font-size: .92rem; }
.btn--azul { background: var(--azul); color: var(--creme); box-shadow: 0 5px 0 var(--azul-900); }
.btn--amarelo { background: var(--amarelo); color: var(--azul); box-shadow: 0 5px 0 var(--amarelo-700); }
.btn--contorno { border-color: currentColor; color: var(--azul); }
.btn--azul:hover, .btn--amarelo:hover { translate: 0 -2px; }
.btn--azul:hover { box-shadow: 0 7px 0 var(--azul-900); }
.btn--amarelo:hover { box-shadow: 0 7px 0 var(--amarelo-700); }
.btn--azul:active, .btn--amarelo:active { translate: 0 4px; box-shadow: 0 1px 0 var(--azul-900); }
.btn--contorno:hover { background: var(--azul); border-color: var(--azul); color: var(--creme); }
.i-seta { transition: translate .25s var(--ease); }
.btn:hover .i-seta { translate: 4px 0; }

/* ---------- Títulos ---------- */
.olho { display: inline-flex; align-items: center; gap: .7em; font-size: .8rem; font-weight: 800; letter-spacing: .2em; line-height: 1.3; text-transform: uppercase; }
/* um quadradinho de xadrez antes de cada chamada */
.olho::before { content: ''; width: 16px; height: 16px; flex: none; background: conic-gradient(currentColor 25%, transparent 0 50%, currentColor 0 75%, transparent 0); }
.titulo { font-family: var(--ff-display); font-weight: 900; font-size: clamp(2.6rem, 6.4vw, 5rem); line-height: .94; letter-spacing: .005em; text-transform: uppercase; text-wrap: balance; }
.titulo em { display: inline-block; margin: 0 .06em; font-family: var(--ff-letreiro); font-size: .84em; font-style: normal; font-weight: 400; line-height: 1; text-transform: none; rotate: -3deg; }
.cabeca { display: grid; justify-items: start; gap: 14px; }
.cabeca--centro { justify-items: center; text-align: center; }
.cabeca__texto { max-width: 34em; font-size: 1.1rem; }

/* ---------- Abertura: a janelinha do trailer levanta ---------- */
.abertura { position: fixed; inset: 0; z-index: 300; perspective: 260vh; perspective-origin: 50% 0; pointer-events: none; animation: aberturaFim 0s linear 2.7s forwards; }
.abertura__painel {
  position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: clamp(12px, 2vw, 20px);
  background: repeating-linear-gradient(90deg, var(--azul) 0 56px, #1b27a0 56px 112px);
  border-bottom: 14px solid var(--amarelo);
  transform-origin: 50% 0; backface-visibility: hidden;
  animation: janelinha 1s cubic-bezier(.7, 0, .3, 1) 1.7s forwards;
}
.abertura__painel img { width: clamp(220px, 46vw, 480px); clip-path: inset(-25% 100% -25% -25%); animation: escreve 1s cubic-bezier(.6, 0, .2, 1) .2s forwards; }
.abertura__painel span { padding-left: .5em; color: var(--creme); font-size: clamp(.78rem, 1.6vw, 1.05rem); font-weight: 800; letter-spacing: .5em; text-transform: uppercase; opacity: 0; animation: surge .6s var(--ease) 1s forwards; }
.sem-abertura .abertura { display: none; }

/* ---------- Topo ---------- */
.topo { position: fixed; left: 0; right: 0; top: 0; z-index: 60; background: rgba(251, 241, 220, .94); -webkit-backdrop-filter: saturate(1.3) blur(12px); backdrop-filter: saturate(1.3) blur(12px); border-bottom: 2px solid var(--azul); }
.topo--auto { transform: translateY(-110%); transition: transform .45s var(--ease); }
.topo--auto.aparece, .topo--auto:focus-within { transform: none; }
.topo__linha { display: flex; align-items: center; gap: 18px; width: var(--miolo); height: var(--topo-h); margin-inline: auto; }
.marca img { width: auto; height: 34px; }
.abas { display: flex; align-items: center; gap: 2px; margin-left: auto; }
.abas__link { padding: 8px 13px; border-radius: 999px; color: var(--azul); font-size: .96rem; font-weight: 700; white-space: nowrap; transition: background-color .2s, color .2s; }
.abas__link:hover { background: rgba(24, 34, 140, .1); }
.abas__link.ativa { background: var(--azul); color: var(--creme); }
.topo__acao { box-shadow: 0 4px 0 var(--azul-900); }

/* ---------- Capa ---------- */
.capa {
  --u: min(1vw, 1.7vh);
  position: relative; overflow: hidden;
  height: 100vh; height: 100svh; min-height: 540px;
  background: var(--mostarda); color: var(--azul);
}
.capa picture { display: contents; }
.capa__cena { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 70% 55%; animation: cenaEntra 1.4s var(--ease) both; }
/* o copo entra junto com a cena, depois fica flutuando; o mouse dá um leve deslocamento de profundidade */
.capa__copo { transform: translate3d(calc(var(--mx, 0) * 16px), calc(var(--my, 0) * 10px), 0); animation: cenaEntra 1.4s var(--ease) both, flutua 5.5s ease-in-out 1.4s infinite; will-change: translate; }
.capa__conteudo {
  position: relative; z-index: 1; height: 67%;
  display: flex; flex-direction: column; justify-content: center; align-items: flex-start;
  width: min(56%, 920px); padding: calc(var(--u) * 3) 0 0 7vw;
}
.capa__conteudo > * { animation: sobe .9s var(--ease) both; }
.capa__conteudo > :nth-child(2) { animation-delay: .1s; }
.capa__conteudo > :nth-child(3) { animation-delay: .2s; }
.capa__conteudo > :nth-child(4) { animation-delay: .3s; }

.capa__marca { display: inline-flex; flex-direction: column; align-items: flex-start; }
.capa__marca img { width: calc(var(--u) * 17); min-width: 150px; }
.capa__marca span { margin-top: calc(var(--u) * .7); padding-left: .3em; color: var(--azul-700); font-family: var(--ff-texto); font-size: max(.66rem, calc(var(--u) * .95)); font-weight: 800; letter-spacing: .42em; line-height: 1.2; text-transform: uppercase; }

.capa__frase { display: flex; flex-direction: column; align-items: flex-start; margin-top: calc(var(--u) * 2); font-family: var(--ff-display); font-weight: 900; font-size: max(2rem, calc(var(--u) * 4.9)); line-height: .92; text-transform: uppercase; }
.capa__frase span { white-space: nowrap; }
.capa__frase em { margin: .02em 0 0 .16em; padding-bottom: .1em; color: var(--marrom); font-family: var(--ff-letreiro); font-size: 1.24em; font-style: normal; font-weight: 400; line-height: 1; text-transform: none; rotate: -4deg; background: linear-gradient(var(--marrom), var(--marrom)) 8% 100% / 84% .07em no-repeat; }
.pinca { display: inline-block; margin-left: .04em; font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', sans-serif; font-size: .72em; font-style: normal; rotate: -10deg; translate: 0 -.06em; }

.capa__apoio { max-width: 30em; margin-top: calc(var(--u) * 1.6); font-size: max(.98rem, calc(var(--u) * 1.22)); font-weight: 600; line-height: 1.45; }
.capa__botoes { display: flex; flex-wrap: wrap; gap: 12px; margin-top: calc(var(--u) * 2.2); }
.capa__botoes .btn { font-size: max(1.06rem, calc(var(--u) * 1.15)); }

/* os três destaques ficam numa plaquinha, apoiada no piso */
.capa__fatos {
  position: absolute; left: 7vw; bottom: max(22px, 4.5vh); z-index: 2;
  display: flex; padding: 10px 4px; border: 2px solid var(--azul); border-radius: 18px;
  background: var(--papel); box-shadow: 0 5px 0 var(--azul);
  animation: sobe .9s var(--ease) .45s both;
}
.capa__fatos li { display: flex; align-items: center; gap: .7em; padding: 2px 18px; font-size: .74rem; font-weight: 800; letter-spacing: .07em; line-height: 1.25; text-transform: uppercase; white-space: nowrap; }
.capa__fatos li + li { border-left: 2px dotted rgba(24, 34, 140, .4); }
.capa__fatos .i { width: 26px; height: 26px; stroke-width: 1.7; }

.capa__descer { position: absolute; left: 50%; bottom: max(22px, 4.5vh); z-index: 2; display: grid; place-items: center; width: 48px; height: 48px; margin-left: -24px; border: 2px solid var(--azul); border-radius: 50%; background: var(--papel); color: var(--azul); box-shadow: 0 4px 0 var(--azul); animation: cutuca 2.4s ease-in-out infinite; }

/* ---------- Xadrez (faixas entre as seções) ---------- */
.xadrez { --t: 20px; height: calc(var(--t) * 2); background: conic-gradient(var(--a) 25%, var(--b) 0 50%, var(--a) 0 75%, var(--b) 0) 50% 0 / calc(var(--t) * 2) calc(var(--t) * 2); }
.xadrez--azul-creme { --a: var(--azul); --b: var(--creme); }
.xadrez--amarelo-azul { --a: var(--amarelo); --b: var(--azul-900); }

/* ---------- Vitrine: produtos flutuando sobre pedestais ---------- */
.vitrine { --foco: var(--amarelo); position: relative; overflow: hidden; padding: clamp(72px, 10vw, 128px) 0 clamp(64px, 8vw, 104px); background: radial-gradient(90% 60% at 50% 38%, #2434b4 0%, var(--azul) 62%); color: var(--creme); }
.vitrine .miolo { position: relative; z-index: 2; }
.vitrine .titulo em, .historia .titulo em { color: var(--amarelo); }
.vitrine .olho, .historia .olho { color: var(--amarelo); }
/* a palavra gigante em contorno, de marca d'água */
.vitrine__fundo { position: absolute; left: 50%; top: clamp(150px, 20vw, 250px); z-index: 0; translate: -50% 0; color: var(--creme); font-family: var(--ff-contorno); font-size: clamp(7rem, 25vw, 23rem); line-height: .8; text-transform: uppercase; white-space: nowrap; opacity: .1; pointer-events: none; user-select: none; }
/* o piso xadrez em perspectiva, eco do cenário da capa */
.vitrine__piso { position: absolute; left: -40%; right: -40%; bottom: 0; z-index: 1; height: 70%; background: conic-gradient(#202eb0 25%, #141d80 0 50%, #202eb0 0 75%, #141d80 0) 50% 0 / 150px 150px; transform: perspective(620px) rotateX(63deg); transform-origin: 50% 100%; -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 34%); mask-image: linear-gradient(to bottom, transparent 0, #000 34%); pointer-events: none; }

.palcos { display: grid; grid-template-columns: 1fr 1.22fr 1fr; align-items: end; gap: clamp(14px, 3vw, 44px); max-width: 1060px; margin: clamp(26px, 4vw, 54px) auto 0; }
.palco { display: grid; justify-items: center; }
.palco__cena { display: grid; justify-items: center; align-items: end; width: 100%; }
.palco--lado { --ped: var(--amarelo); }
.palco--meio { --ped: var(--creme); }
.palco__produto { position: relative; z-index: 2; grid-area: 1 / 1; margin-bottom: 3%; filter: drop-shadow(0 20px 18px rgba(3, 6, 45, .5)); animation: boia 5.6s ease-in-out infinite; }
.palco--meio .palco__produto { animation-delay: -1.8s; }
.palco:last-child .palco__produto { animation-delay: -3.4s; }
.palco__produto--bauru { width: 88%; }
.palco__produto--latte { width: 56%; }
/* sem recorte: a foto vira um adesivo redondo */
.palco__produto--adesivo { width: 62%; aspect-ratio: 1; border: 8px solid var(--papel); border-radius: 50%; object-fit: cover; rotate: 6deg; filter: drop-shadow(0 20px 16px rgba(3, 6, 45, .55)); }
.palco__pedestal { grid-area: 2 / 1; width: 76%; height: auto; aspect-ratio: 300 / 122; color: var(--ped); filter: drop-shadow(0 16px 14px rgba(3, 6, 45, .45)); }
.palco__sombra { grid-area: 2 / 1; align-self: start; z-index: 1; width: 40%; aspect-ratio: 5 / 1; margin-top: 4.6%; border-radius: 50%; background: radial-gradient(closest-side, rgba(20, 14, 30, .5), transparent); animation: sombra 5.6s ease-in-out infinite; }
.palco--meio .palco__sombra { animation-delay: -1.8s; }
.palco:last-child .palco__sombra { animation-delay: -3.4s; }

.etiqueta { position: relative; z-index: 3; width: min(100%, 300px); margin-top: 16px; padding: 14px 18px 17px; border-radius: 18px; background: var(--papel); color: var(--azul); text-align: center; box-shadow: 0 5px 0 var(--azul-900), 0 22px 30px -16px rgba(0, 0, 0, .55); }
.palco:nth-child(1) .etiqueta { rotate: -1.6deg; }
.palco:nth-child(3) .etiqueta { rotate: 1.4deg; }
.etiqueta h3 { font-family: var(--ff-display); font-size: clamp(1.5rem, 2.6vw, 2rem); font-weight: 900; line-height: 1; text-transform: uppercase; }
.etiqueta p { margin-top: 6px; color: var(--tinta); font-size: .95rem; line-height: 1.4; }

.vitrine__nota { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px 22px; margin-top: clamp(34px, 5vw, 60px); font-weight: 600; text-align: center; }

/* grãos de café caindo devagar */
.graos { position: absolute; inset: 0; z-index: 1; overflow: hidden; pointer-events: none; }
.graos svg { position: absolute; top: -50px; left: var(--x); width: var(--s); height: calc(var(--s) * 1.34); color: var(--c); opacity: var(--o); rotate: var(--rot); animation: cai var(--t) linear var(--atraso) infinite; }

/* trilho: no celular os itens ficam lado a lado e rolam na horizontal */
.trilho__apoio { display: none; }

/* ---------- O café ---------- */
.cafe { position: relative; overflow: hidden; padding: clamp(72px, 9vw, 120px) 0; background: var(--creme); }
.cafe::before { content: ''; position: absolute; right: -90px; top: -90px; width: 260px; height: 260px; background: conic-gradient(#f3e2bd 25%, transparent 0 50%, #f3e2bd 0 75%, transparent 0) 0 0 / 65px 65px; rotate: 12deg; }
.cafe__grade { position: relative; display: grid; grid-template-columns: 1.02fr 1fr; align-items: center; gap: clamp(32px, 6vw, 84px); }
.cafe .titulo, .ecobag .titulo, .final .titulo, .recado .titulo { color: var(--azul); }
.cafe .titulo em, .ecobag .titulo em, .final .titulo em, .recado .titulo em { color: var(--marrom); }
.cafe .olho, .ecobag .olho { color: var(--azul); }

.bilhetes { display: grid; gap: 18px; margin-top: 34px; }
.bilhete { position: relative; display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 2px 16px; padding: 16px 22px 16px 20px; border-radius: 16px 26px 16px 16px; background: var(--papel); color: var(--azul); box-shadow: 0 16px 28px -18px rgba(76, 40, 26, .55), 0 1px 0 rgba(76, 40, 26, .12); rotate: var(--r, 0deg); }
.bilhete:nth-child(2) { margin-left: clamp(0px, 4vw, 44px); }
.bilhete__icone { grid-row: span 2; width: 46px; height: 46px; padding: 10px; border-radius: 50%; background: var(--amarelo); stroke-width: 1.8; }
.bilhete h3 { font-family: var(--ff-display); font-size: 1.45rem; font-weight: 900; line-height: 1.05; text-transform: uppercase; }
.bilhete p { color: var(--tinta); font-size: .98rem; line-height: 1.4; }
.tachinha { position: absolute; left: 50%; top: -17px; z-index: 2; width: 38px; height: 38px; margin-left: -19px; }
.bilhete .tachinha { left: auto; right: 18px; margin: 0; }
.tachinha--azul { color: var(--azul-400); }
.tachinha--amarela { color: var(--amarelo); }

/* fotos com fita, como no mural do Instagram deles */
.foto { position: relative; padding: 7px; background: var(--papel); box-shadow: 0 22px 36px -18px rgba(46, 22, 13, .6), 0 2px 5px rgba(46, 22, 13, .12); rotate: var(--r, 0deg); }
.foto img { width: 100%; height: 100%; object-fit: cover; }
.foto::before { content: ''; position: absolute; left: 50%; top: -13px; z-index: 2; width: 92px; height: 27px; margin-left: -46px; background: rgba(249, 185, 23, .9); clip-path: polygon(3% 0, 97% 0, 100% 22%, 97% 44%, 100% 66%, 97% 88%, 100% 100%, 3% 100%, 0 80%, 3% 58%, 0 36%, 3% 14%); rotate: -3deg; }
.foto--fita-azul::before { background: rgba(50, 71, 200, .88); rotate: 4deg; }

.cafe__fotos { position: relative; aspect-ratio: 1 / 1.04; }
.cafe__fotos .foto { position: absolute; }
.foto--a { left: 0; top: 8%; width: 45%; z-index: 1; }
.foto--b { right: 0; top: 0; width: 53%; }
.foto--c { left: 24%; bottom: 0; width: 46%; z-index: 2; }
.cafe__brilho { position: absolute; color: var(--amarelo); animation: pisca 3.4s ease-in-out infinite; }
.cafe__brilho--1 { left: 2%; bottom: 10%; width: 46px; height: 46px; }
.cafe__brilho--2 { right: 4%; bottom: 20%; width: 28px; height: 28px; color: var(--azul); animation-delay: -1.6s; }

/* ---------- Quiches ---------- */
.quiches { position: relative; overflow: hidden; padding: clamp(72px, 9vw, 120px) 0; background: var(--amarelo); }
/* o fundo de frases repetidas é o do próprio post deles */
.padrao { position: absolute; inset: -10px -8%; display: flex; flex-direction: column; justify-content: space-between; overflow: hidden; color: #e19f00; font-family: var(--ff-display); font-size: clamp(1rem, 1.5vw, 1.25rem); font-weight: 400; letter-spacing: .06em; line-height: 1.7; text-transform: uppercase; white-space: nowrap; pointer-events: none; user-select: none; }
.padrao span { display: block; animation: deriva 46s ease-in-out infinite alternate; }
.padrao span:nth-child(even) { animation-direction: alternate-reverse; margin-left: -9em; }
.quiches__grade { position: relative; display: grid; grid-template-columns: minmax(0, .72fr) minmax(0, 1.28fr); align-items: center; gap: clamp(24px, 5vw, 72px); }
.foto--quiche { justify-self: end; width: min(100%, 370px); }

.recado { --fundo: var(--amarelo); position: relative; display: grid; justify-items: start; gap: 16px; padding: clamp(30px, 4.4vw, 52px) clamp(22px, 4.4vw, 54px) clamp(30px, 4.4vw, 50px); border-radius: 30px 30px 60px 30px; background: var(--papel); color: var(--tinta); box-shadow: 0 30px 50px -28px rgba(46, 22, 13, .7), 0 2px 0 rgba(46, 22, 13, .08); rotate: 1deg; }
/* cantinho dobrado */
.recado::after { content: ''; position: absolute; right: 0; bottom: 0; width: 58px; height: 58px; border-radius: 30px 0 0 0; background: linear-gradient(135deg, #fff 0 46%, #e2dccd 50%, var(--fundo) 51%); box-shadow: -6px -6px 12px -8px rgba(46, 22, 13, .5); }
.recado .tachinha { top: -19px; width: 44px; height: 44px; margin-left: -22px; }
.recado__grito { color: var(--azul); font-family: var(--ff-display); font-size: clamp(1.15rem, 2.2vw, 1.5rem); font-weight: 400; letter-spacing: .03em; line-height: 1.1; text-transform: uppercase; }
.titulo--recado { font-size: clamp(2.3rem, 5vw, 4rem); }
.recado__texto { max-width: 32em; }
.sabores { display: flex; flex-wrap: wrap; gap: 8px; }
.sabores li { padding: .36em .9em .3em; border-radius: 999px; background: var(--amarelo); color: var(--azul); font-family: var(--ff-display); font-size: 1.16rem; font-weight: 400; letter-spacing: .03em; line-height: 1.2; text-transform: uppercase; }
.valores { display: grid; gap: 6px; width: min(100%, 460px); }
.valores div { display: flex; align-items: baseline; gap: 10px; color: var(--azul); }
.valores dt { font-weight: 700; }
.valores div::after { content: ''; order: 1; flex: 1; min-width: 20px; border-bottom: 3px dotted rgba(24, 34, 140, .4); translate: 0 -.25em; }
.valores dd { order: 2; font-family: var(--ff-display); font-size: 1.9rem; font-weight: 900; line-height: 1; white-space: nowrap; }
.valores small { font-family: var(--ff-texto); font-size: .82rem; font-weight: 700; }
.recado__datas { display: flex; flex-wrap: wrap; gap: 8px 22px; color: var(--azul); font-weight: 600; }
.recado__datas > span { display: inline-flex; align-items: center; gap: .5em; }
.recado__mini { max-width: 36em; font-size: .93rem; line-height: 1.5; }
[hidden] { display: none !important; }

/* ---------- História ---------- */
.historia { --foco: var(--amarelo); position: relative; overflow: hidden; padding: clamp(76px, 10vw, 132px) 0; background: radial-gradient(80% 70% at 22% 40%, #5d3423 0%, var(--marrom) 60%); color: var(--creme); }
.historia__fundo { position: absolute; right: -2vw; bottom: -5vw; color: var(--creme); font-family: var(--ff-contorno); font-size: clamp(8rem, 30vw, 28rem); line-height: .8; text-transform: uppercase; white-space: nowrap; opacity: .09; pointer-events: none; user-select: none; }
.historia__grade { position: relative; z-index: 2; display: grid; grid-template-columns: 1fr 1.05fr; align-items: center; gap: clamp(32px, 6vw, 88px); }
.historia__fotos { position: relative; aspect-ratio: 1 / 1.1; }
.historia__fotos .foto { position: absolute; }
.foto--rua { left: 0; top: 0; width: 54%; }
.foto--balcao { right: 0; bottom: 4%; z-index: 2; width: 66%; }
.foto--chuva { right: 4%; top: 3%; width: 33%; }
.historia__texto { display: grid; gap: 22px; }
.historia__texto > p { max-width: 34em; }
.citacao { position: relative; padding: 4px 0 4px 26px; border-left: 5px solid var(--amarelo); }
.citacao p { font-size: clamp(1.25rem, 2.3vw, 1.6rem); font-weight: 700; line-height: 1.35; text-wrap: balance; }
.citacao footer { margin-top: 12px; color: var(--amarelo); font-size: .8rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
.historia__fim { color: var(--amarelo); font-family: var(--ff-letreiro); font-size: clamp(1.5rem, 3vw, 2.1rem); line-height: 1.2; }
.historia__fim span { white-space: nowrap; font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', sans-serif; font-size: .7em; }

/* ---------- Ecobag ---------- */
.ecobag { position: relative; overflow: hidden; padding: clamp(72px, 9vw, 120px) 0; background: var(--creme); }
.ecobag__grade { display: grid; grid-template-columns: 1.05fr .95fr; align-items: center; gap: clamp(32px, 6vw, 84px); }
.ecobag__texto { display: grid; justify-items: start; gap: 24px; }
.ecobag__mini { font-size: .95rem; font-weight: 600; opacity: .85; }
.ecobag__fotos { position: relative; padding: 0 8% 9% 12%; }
.foto--ecobag img { aspect-ratio: 4 / 5; }
/* a estampa, como um adesivo colado por cima */
.selo { position: absolute; left: 0; bottom: 0; z-index: 2; width: 38%; padding: 6px; border-radius: 14px; background: var(--papel); box-shadow: 0 5px 0 var(--azul), 0 20px 30px -16px rgba(46, 22, 13, .6); rotate: -7deg; }
.selo img { border-radius: 9px; }

/* ---------- Onde fica ---------- */
.onde { --foco: var(--amarelo); position: relative; padding: clamp(76px, 10vw, 128px) 0; background: repeating-linear-gradient(90deg, var(--azul) 0 56px, #1b27a0 56px 112px); }
.onde__grade { display: grid; grid-template-columns: 1fr 1.05fr; align-items: center; gap: clamp(28px, 5vw, 64px); }
.recado--onde { --fundo: #1a2598; --foco: var(--azul-900); rotate: -1.2deg; }
.olho--azul { color: var(--azul); }
.dados { display: grid; gap: 16px; }
.dados li { display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: start; }
.dados .i { width: 44px; height: 44px; padding: 10px; border-radius: 50%; background: var(--amarelo); color: var(--azul); }
.dados strong { display: block; color: var(--azul); font-size: 1.12rem; line-height: 1.3; }
.dados span { display: block; margin-top: 2px; font-size: .96rem; line-height: 1.45; }
.aviso { padding: 14px 18px; border-radius: 16px; background: #e9ecfb; color: var(--azul); font-size: .96rem; line-height: 1.5; }
.aviso strong { display: block; font-weight: 800; }
.recado__botoes { display: flex; flex-wrap: wrap; gap: 12px; }
/* o mapa aparece dentro de uma "janelinha" */
.mapa { overflow: hidden; aspect-ratio: 4 / 3.5; border: 8px solid var(--creme); border-radius: 34px; background: #dfe3f5; box-shadow: 0 8px 0 var(--azul-900), 0 34px 50px -26px rgba(0, 0, 0, .7); rotate: 1.2deg; }
.mapa iframe { width: 100%; height: 100%; border: 0; }

/* ---------- Chamada final ---------- */
.final { padding: clamp(64px, 8vw, 104px) 0; background: var(--creme); }
.final__cartao { position: relative; overflow: hidden; display: grid; grid-template-columns: 1.2fr .8fr; align-items: center; gap: 20px; min-height: 400px; padding: clamp(34px, 5vw, 68px); border: 3px solid var(--azul); border-radius: 40px; background: radial-gradient(70% 90% at 74% 40%, #ffd04f 0%, var(--amarelo) 60%); color: var(--azul); box-shadow: 0 10px 0 var(--azul); }
.final__piso { position: absolute; left: -30%; right: -30%; bottom: 0; height: 46%; background: conic-gradient(#fbe7ae 25%, #f3ad00 0 50%, #fbe7ae 0 75%, #f3ad00 0) 50% 0 / 130px 130px; transform: perspective(520px) rotateX(64deg); transform-origin: 50% 100%; -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 60%); mask-image: linear-gradient(to bottom, transparent 0, #000 60%); }
.final__texto { position: relative; z-index: 2; display: grid; justify-items: start; gap: 18px; }
.final__texto p { max-width: 26em; font-size: 1.12rem; font-weight: 600; }
.final__botoes { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 6px; }
.final__palco { --ped: var(--azul); position: relative; z-index: 2; display: grid; justify-items: center; align-items: end; }
.final__copo { position: relative; z-index: 2; grid-area: 1 / 1; width: min(62%, 230px); margin-bottom: 3%; filter: drop-shadow(0 22px 16px rgba(76, 40, 26, .4)); animation: boia 5.6s ease-in-out infinite; }
.final__palco .palco__pedestal { width: min(86%, 320px); filter: drop-shadow(0 16px 12px rgba(76, 40, 26, .35)); }

/* ---------- Rodapé ---------- */
.rodape { --foco: var(--amarelo); padding: clamp(48px, 6vw, 76px) 0 28px; background: var(--azul-900); color: rgba(251, 241, 220, .82); font-size: .98rem; }
.rodape__grade { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 36px; }
.rodape__marca img { width: 210px; }
.rodape__marca span { display: block; margin-top: 10px; padding-left: .2em; color: var(--creme); font-size: .72rem; font-weight: 800; letter-spacing: .42em; text-transform: uppercase; }
.rodape__marca p { margin-top: 20px; color: var(--amarelo); font-family: var(--ff-letreiro); font-size: 1.3rem; }
.rodape__marca p span { display: inline; margin: 0; padding: 0; font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', sans-serif; font-size: .8em; letter-spacing: 0; }
.rodape__col { display: grid; align-content: start; justify-items: start; gap: 8px; }
.rodape__col h2 { margin-bottom: 4px; color: var(--amarelo); font-family: var(--ff-display); font-size: 1.35rem; font-weight: 900; letter-spacing: .03em; text-transform: uppercase; }
.rodape__col a { display: inline-flex; align-items: center; gap: .5em; color: var(--creme); transition: color .2s; }
.rodape__col a:hover { color: var(--amarelo); }
.rodape__fim { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; margin-top: 40px; padding-top: 22px; border-top: 1px solid rgba(251, 241, 220, .18); font-size: .86rem; }

/* ---------- Botão flutuante do Instagram ---------- */
.flutuante { position: fixed; right: max(16px, env(safe-area-inset-right)); bottom: max(16px, env(safe-area-inset-bottom)); z-index: 50; display: grid; place-items: center; width: 58px; height: 58px; border: 2px solid var(--creme); border-radius: 50%; background: var(--azul); color: var(--creme); box-shadow: 0 5px 0 var(--azul-900), 0 16px 26px -10px rgba(0, 0, 0, .5); opacity: 0; visibility: hidden; transform: translateY(14px) scale(.9); transition: opacity .3s, transform .35s var(--ease), visibility .3s; }
.flutuante.aparece { opacity: 1; visibility: visible; transform: none; }
.flutuante .i { width: 28px; height: 28px; }
.flutuante:hover { background: var(--azul-400); }

/* ---------- Movimento ---------- */
.js .revela { opacity: 0; transform: translateY(24px); transition: opacity .7s var(--ease), transform .7s var(--ease); transition-delay: var(--d, 0ms); }
.js .revela.entrou { opacity: 1; transform: none; }

@keyframes cenaEntra { from { opacity: 0; scale: 1.06; } to { opacity: 1; scale: 1; } }
@keyframes sobe { from { opacity: 0; translate: 0 26px; } to { opacity: 1; translate: 0 0; } }
@keyframes flutua { 0%, 100% { translate: 0 0; } 50% { translate: 0 -2.4vh; } }
@keyframes boia { 0%, 100% { translate: 0 0; } 50% { translate: 0 -14px; } }
@keyframes sombra { 0%, 100% { scale: 1; opacity: 1; } 50% { scale: .8; opacity: .6; } }
@keyframes cutuca { 0%, 100% { translate: 0 0; } 50% { translate: 0 7px; } }
@keyframes cai { from { translate: 0 0; rotate: var(--rot); } to { translate: var(--dx) var(--h, 120vh); rotate: calc(var(--rot) + var(--giro)); } }
@keyframes deriva { from { translate: 0 0; } to { translate: -7% 0; } }
@keyframes pisca { 0%, 100% { scale: 1; opacity: 1; } 50% { scale: .7; opacity: .55; } }
@keyframes escreve { to { clip-path: inset(-25% -25% -25% -25%); } }
@keyframes surge { from { opacity: 0; letter-spacing: .3em; } to { opacity: 1; letter-spacing: .5em; } }
@keyframes janelinha { 60% { filter: brightness(.82); } to { transform: rotateX(94deg); filter: brightness(.7); } }
@keyframes aberturaFim { to { visibility: hidden; } }

/* a abertura segura a entrada da capa */
html:not(.sem-abertura) .abertura ~ main .capa__cena { animation-delay: 1.75s; }
html:not(.sem-abertura) .abertura ~ main .capa__copo { animation-delay: 1.75s, 3.15s; }
html:not(.sem-abertura) .abertura ~ main .capa__conteudo > :nth-child(1) { animation-delay: 2.1s; }
html:not(.sem-abertura) .abertura ~ main .capa__conteudo > :nth-child(2) { animation-delay: 2.2s; }
html:not(.sem-abertura) .abertura ~ main .capa__conteudo > :nth-child(3) { animation-delay: 2.3s; }
html:not(.sem-abertura) .abertura ~ main .capa__conteudo > :nth-child(4) { animation-delay: 2.4s; }
html:not(.sem-abertura) .abertura ~ main .capa__fatos { animation-delay: 2.55s; }

/* ---------- Telas menores ---------- */
@media (max-width: 1180px) {
  .capa__descer { display: none; }
}

@media (max-width: 1080px) {
  .abas__link { padding: 8px 9px; font-size: .92rem; }
  .so-largo { display: none; }
}

@media (max-width: 900px) {
  :root { --topo-h: 104px; }
  .topo__linha { flex-wrap: wrap; gap: 0 12px; height: auto; padding-top: 9px; }
  .marca img { height: 30px; }
  .topo__acao { margin-left: auto; }
  /* sem botão de menu: as abas ficam sempre à mostra e rolam para o lado */
  .abas { order: 3; width: calc(100% + var(--margem) * 2); margin: 6px calc(var(--margem) * -1) 0; padding: 2px var(--margem) 9px; overflow-x: auto; scrollbar-width: none; }
  .abas::-webkit-scrollbar { display: none; }
  .cafe__grade, .historia__grade, .ecobag__grade, .onde__grade { grid-template-columns: minmax(0, 1fr); }
  .cafe__fotos { width: min(100%, 520px); margin-inline: auto; }
  .historia__fotos { width: min(100%, 520px); margin-inline: auto; }
  .ecobag__fotos { width: min(100%, 440px); margin-inline: auto; }
  .quiches__grade { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .foto--quiche { justify-self: center; z-index: 2; width: min(58%, 260px); margin-bottom: -46px; }
  .recado { padding-top: clamp(58px, 12vw, 80px); }
  .recado--onde { padding-top: clamp(36px, 7vw, 52px); }
  .rodape__grade { grid-template-columns: 1fr 1fr; }
  .rodape__marca { grid-column: 1 / -1; }
}

/* capa em pé (celular e tablet em pé): texto em cima, cena embaixo com o topo esfumado */
@media (max-aspect-ratio: 5/4), (max-width: 760px) {
  .capa { --u: min(1.9vw, .95vh); min-height: 600px; }
  .capa__cena {
    top: 28%; bottom: auto; height: 80%;
    object-position: 50% 40%;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 15%);
    mask-image: linear-gradient(to bottom, transparent 0, #000 15%);
  }
  .capa__copo { -webkit-mask-image: none; mask-image: none; transform: none; }
  .capa__conteudo { height: auto; width: 100%; align-items: center; text-align: center; padding: max(34px, 5.5vh) 18px 0; }
  .capa__marca { align-items: center; }
  .capa__marca img { width: calc(var(--u) * 24); }
  .capa__marca span { padding-left: .42em; font-size: max(.62rem, calc(var(--u) * 1.4)); }
  .capa__frase { align-items: center; margin-top: calc(var(--u) * 2.6); font-size: max(1.9rem, calc(var(--u) * 6.8)); }
  .capa__frase em { margin-left: 0; }
  .capa__apoio { display: none; }
  .capa__botoes { justify-content: center; gap: 10px; margin-top: calc(var(--u) * 2.8); }
  .capa__botoes .btn { padding: .8em 1.05em; font-size: .95rem; }
  .capa__fatos { left: 12px; right: 12px; bottom: 12px; justify-content: space-around; padding: 8px 2px; border-radius: 16px; }
  .capa__fatos li { gap: .5em; padding: 0 6px; font-size: .64rem; letter-spacing: .04em; }
  .capa__fatos .i { width: 22px; height: 22px; }
  .capa__descer { display: none; }
}

@media (max-width: 760px) {
  body { font-size: 1rem; }
  .titulo { font-size: clamp(2.4rem, 11.5vw, 3.4rem); }
  .cabeca__texto { font-size: 1.02rem; }

  .trilho { display: flex; grid-template-columns: none; align-items: stretch; gap: 14px; max-width: none; margin-inline: calc(var(--margem) * -1); padding: 26px 12vw 20px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .trilho::-webkit-scrollbar { display: none; }
  .trilho > * { flex: 0 0 76vw; scroll-snap-align: center; }
  .trilho__apoio { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 2px; color: var(--creme); font-size: .72rem; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; }
  .trilho__barra { position: relative; width: 84px; height: 5px; overflow: hidden; border-radius: 5px; background: rgba(251, 241, 220, .25); }
  .trilho__barra i { position: absolute; left: 0; top: 0; width: 34%; height: 100%; border-radius: 5px; background: var(--amarelo); translate: var(--p, 0) 0; }
  .trilho__dica::after { content: ' →'; }

  .palcos { margin-top: 6px; }
  .palco { align-content: end; }
  .palco__cena { margin-top: auto; }
  .palco__produto--latte { width: 50%; }
  .palco__produto--bauru { width: 84%; }
  .palco .etiqueta { rotate: none; }
  .vitrine__piso { height: 62%; background-size: 110px 110px; }
  .vitrine, .cafe, .quiches, .historia, .ecobag, .onde { padding-block: 60px; }
  .final { padding-block: 52px; }
  .vitrine__nota { flex-direction: column; margin-top: 30px; }

  .bilhete:nth-child(2) { margin-left: 0; }
  .bilhete { padding: 14px 16px; gap: 2px 13px; }
  .bilhete__icone { width: 42px; height: 42px; }

  /* as fotos do trailer viram um trilho, todas com a mesma altura */
  .historia__fotos { aspect-ratio: auto; width: auto; margin-inline: calc(var(--margem) * -1); padding: 30px 9vw 24px; align-items: center; }
  .historia__fotos .foto { position: relative; inset: auto; flex: 0 0 auto; width: auto; height: 320px; }
  .historia__fotos .foto img { width: auto; height: 100%; }
  .historia__grade { gap: 0; }
  .historia__texto { margin-top: 34px; }

  .valores dd { font-size: 1.6rem; }
  .sabores li { font-size: 1.04rem; }
  .recado { rotate: none; border-radius: 26px 26px 54px 26px; padding-bottom: 66px; }
  .quiches .recado .tachinha { display: none; }
  .recado--onde { rotate: none; }
  .recado__botoes .btn, .final__botoes .btn { flex: 1 1 100%; }
  .recado .btn, .ecobag .btn, .final .btn { max-width: 100%; white-space: normal; text-align: center; }
  .recado > .btn { justify-self: stretch; }
  .mapa { rotate: none; aspect-ratio: 1 / 1.05; border-radius: 28px; }

  .final__cartao { grid-template-columns: 1fr; gap: 0; padding: 34px 22px 0; border-radius: 30px; text-align: center; }
  .final__texto { justify-items: center; }
  .final__botoes { justify-content: center; width: 100%; }
  .final__palco { margin-top: 30px; padding-bottom: 26px; }
  .final__copo { width: min(44%, 170px); }
  .final__palco .palco__pedestal { width: min(62%, 250px); }
  .final__piso { height: 34%; background-size: 100px 100px; }

  .rodape__grade { grid-template-columns: 1fr; gap: 30px; }
  .rodape__fim { flex-direction: column; padding-right: 70px; }
}

/* tablet em pé: a cena desce um pouco para o copo não encostar nos botões */
@media (min-width: 600px) and (max-aspect-ratio: 5/4) {
  .capa__cena { top: 31%; }
}

/* celular baixinho: menos espaço em cima e a cena mais para baixo */
@media (max-width: 760px) and (max-height: 700px) {
  .capa__conteudo { padding-top: 26px; }
  .capa__cena { top: 35%; height: 76%; }
}

@media (max-width: 380px) {
  .capa__botoes { flex-wrap: nowrap; gap: 8px; }
  .capa__botoes .btn { gap: .4em; padding: .72em .78em; font-size: .84rem; }
  .capa__fatos li { font-size: .58rem; }
  .capa__fatos .i { width: 19px; height: 19px; }
  .abas__link { padding: 8px 8px; font-size: .88rem; }
}

/* telas baixas e largas (notebook pequeno): a plaquinha encolhe para não brigar com o texto */
@media (min-aspect-ratio: 5/4) and (max-height: 620px) {
  .capa__fatos { padding: 7px 2px; }
  .capa__fatos li { padding: 0 13px; font-size: .66rem; }
  .capa__fatos .i { width: 22px; height: 22px; }
  .capa__descer { display: none; }
}

/* ---------- Preço na etiqueta da vitrine ---------- */
.etiqueta__preco { position: absolute; right: -10px; top: -17px; padding: .26em .68em .2em; border: 2px solid var(--azul); border-radius: 999px; background: var(--amarelo); color: var(--azul); font-family: var(--ff-display); font-size: 1.34rem; font-weight: 900; line-height: 1.1; white-space: nowrap; box-shadow: 0 3px 0 var(--azul); rotate: 7deg; }
.etiqueta__preco--texto { padding: .52em .85em; font-family: var(--ff-texto); font-size: .68rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }

/* ---------- Página do cardápio ---------- */
.pagina-cardapio { padding-top: var(--topo-h); }
.abas__link--volta { display: inline-flex; align-items: center; gap: .4em; color: var(--marrom); }
.abas__link--volta .i { width: 1.05em; height: 1.05em; }

/* capa pequena: o mesmo cenário do início, em faixa */
.cardapio-capa { position: relative; overflow: hidden; background: radial-gradient(60% 100% at 80% 30%, #d6b04e 0%, var(--mostarda) 64%); color: var(--azul); }
.cardapio-capa__piso { position: absolute; left: -40%; right: -40%; bottom: 0; height: 46%; background: conic-gradient(#e0d9c0 25%, #e3c56b 0 50%, #e0d9c0 0 75%, #e3c56b 0) 50% 0 / 130px 130px; transform: perspective(520px) rotateX(64deg); transform-origin: 50% 100%; }
.cardapio-capa .miolo { position: relative; z-index: 2; display: grid; grid-template-columns: 1.35fr .65fr; align-items: center; gap: 24px; min-height: clamp(320px, 36vw, 430px); padding-block: clamp(34px, 5vw, 60px); }
.cardapio-capa .titulo em { color: var(--marrom); }
.cardapio-capa .cabeca__texto { font-weight: 600; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.chips li { padding: .5em .95em; border: 2px solid var(--azul); border-radius: 999px; background: var(--papel); font-size: .8rem; font-weight: 800; letter-spacing: .04em; box-shadow: 0 3px 0 var(--azul); }
.cardapio-capa__palco { --ped: #34509a; display: grid; justify-items: center; align-items: end; align-self: end; }
.cardapio-capa__palco .final__copo { width: min(58%, 190px); }
.cardapio-capa__palco .palco__pedestal { width: min(84%, 270px); filter: drop-shadow(0 16px 12px rgba(76, 40, 26, .35)); }

/* cada categoria é uma faixa de cor */
.categoria { --borda: var(--azul); position: relative; padding: clamp(46px, 6vw, 78px) 0 clamp(42px, 5.5vw, 70px); }
.categoria--creme { background: var(--creme); }
.categoria--amarelo { background: var(--amarelo); }
.categoria--mostarda { background: var(--mostarda); }
.categoria--marrom { --borda: var(--marrom-900); --foco: var(--amarelo); background: radial-gradient(80% 70% at 78% 30%, #5d3423 0%, var(--marrom) 60%); color: var(--creme); }
.categoria--azul { --foco: var(--amarelo); overflow: hidden; background: radial-gradient(90% 80% at 70% 40%, #2434b4 0%, var(--azul) 62%); color: var(--creme); }
.categoria .olho, .categoria .titulo { color: var(--azul); }
.categoria .titulo em { color: var(--marrom); }
.categoria--marrom .olho, .categoria--azul .olho { color: var(--amarelo); }
.categoria--marrom .titulo, .categoria--azul .titulo { color: var(--creme); }
.categoria--azul .titulo em { color: var(--amarelo); }
.titulo--cat { font-size: clamp(2.5rem, 5.8vw, 4.2rem); }
.categoria__cabeca { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; }
.categoria__enfeite { flex: none; width: clamp(92px, 12vw, 150px); margin: -8px clamp(4px, 2vw, 28px) -6px 0; padding: 5px; }
.categoria__enfeite::before { top: -10px; width: 64px; height: 20px; margin-left: -32px; }

.grupo { margin-top: clamp(20px, 3vw, 32px); }
.grupo__cabeca { display: flex; align-items: center; gap: 6px 14px; min-height: 44px; }
.grupo__cabeca h3 { font-family: var(--ff-display); font-size: clamp(1.3rem, 2.4vw, 1.6rem); font-weight: 400; letter-spacing: .03em; line-height: 1.1; text-transform: uppercase; }
.grupo__conta { font-size: .74rem; font-weight: 800; letter-spacing: .14em; opacity: .72; text-transform: uppercase; white-space: nowrap; }
.grupo__setas { display: none; gap: 8px; margin-left: auto; }
.js .grupo.rola .grupo__setas { display: flex; }
.seta { display: grid; place-items: center; width: 42px; height: 42px; padding: 0; border: 2px solid currentColor; border-radius: 50%; background: transparent; color: inherit; cursor: pointer; transition: background-color .2s, color .2s, opacity .2s; }
.seta:disabled { opacity: .28; cursor: default; }
.seta:not(:disabled):hover { background: var(--azul); border-color: var(--azul); color: var(--creme); }
.categoria--marrom .seta:not(:disabled):hover { background: var(--amarelo); border-color: var(--amarelo); color: var(--marrom); }

/* fileira: os cartões ficam lado a lado e rolam na horizontal, parando um a um */
.fileira { display: flex; gap: 16px; margin: -10px calc(var(--margem) * -1) 0; padding: 30px var(--margem) 14px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: var(--margem); scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.fileira::-webkit-scrollbar { display: none; }
.fileira > .item { flex: 0 0 calc((100% - 48px) / 4); scroll-snap-align: start; }

/* cartão do produto: uma plaquinha de preço */
.item { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 16px 18px 18px; border: 2px solid var(--borda); border-radius: 20px; background: var(--papel); color: var(--tinta); box-shadow: 0 5px 0 var(--borda); }
.item__topo { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 50px; }
.item__selo { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--amarelo); color: var(--azul); }
.item__selo .i { width: 27px; height: 27px; stroke-width: 1.7; }
.categoria--amarelo .item__selo { background: var(--azul); color: var(--amarelo); }
/* quem tem foto recortada ganha o produto "saindo" da plaquinha */
.item__foto { width: auto; height: 80px; margin: -30px 0 -2px -4px; filter: drop-shadow(0 8px 7px rgba(46, 22, 13, .32)); rotate: -7deg; }
.preco { color: var(--azul); font-family: var(--ff-display); font-size: 2.1rem; font-weight: 900; line-height: 1; white-space: nowrap; }
.preco small, .item__precos small { margin-right: .24em; font-family: var(--ff-texto); font-size: .4em; font-weight: 800; vertical-align: .95em; }
.item__nome { margin-top: 4px; color: var(--azul); font-family: var(--ff-display); font-size: 1.42rem; font-weight: 900; line-height: 1.05; text-transform: uppercase; }
.item__desc { font-size: .93rem; line-height: 1.42; }
.item__precos { display: grid; gap: 4px; margin-top: 4px; }
.item__precos div { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding-top: 5px; border-top: 2px dotted rgba(24, 34, 140, .3); color: var(--azul); }
.item__precos dt { font-size: .78rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
.item__precos dd { font-family: var(--ff-display); font-size: 1.6rem; font-weight: 900; line-height: 1; }
.item__notas { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; padding-top: 8px; }
.item__notas li { display: inline-flex; align-items: center; padding: .34em .72em; border-radius: 999px; background: #e9ecfb; color: var(--azul); font-size: .68rem; font-weight: 800; letter-spacing: .07em; line-height: 1.2; text-transform: uppercase; }
.item__ponto::before, .ponto::before { content: ''; flex: none; display: inline-block; width: .72em; height: .72em; margin-right: .5em; border-radius: 50%; background: var(--azul); }
.ponto { font-weight: 800; white-space: nowrap; }
.categoria__aviso { max-width: 720px; margin-top: clamp(20px, 3vw, 30px); border: 2px solid var(--azul); background: var(--papel); }

.fileira__apoio { display: none; align-items: center; justify-content: center; gap: 14px; margin-top: 2px; font-size: .7rem; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; }
.fileira__barra { position: relative; width: 84px; height: 5px; overflow: hidden; border-radius: 5px; background: rgba(24, 34, 140, .2); }
.fileira__barra i { position: absolute; left: 0; top: 0; width: var(--w, 34%); height: 100%; border-radius: 5px; background: var(--azul); translate: var(--p, 0) 0; }
.categoria--marrom .fileira__barra { background: rgba(251, 241, 220, .25); }
.categoria--marrom .fileira__barra i { background: var(--amarelo); }
.fileira__dica::after { content: ' →'; }

.doces__grade { position: relative; z-index: 2; display: grid; grid-template-columns: 1.2fr .8fr; align-items: center; gap: clamp(24px, 5vw, 64px); }
.doces__grade .cabeca { gap: 18px; }
.doces__palco { justify-self: center; width: min(100%, 340px); }

.fecho { padding: clamp(52px, 7vw, 88px) 0; background: var(--creme); text-align: center; }
.fecho .miolo { display: grid; justify-items: center; gap: 14px; }
.fecho .titulo { color: var(--azul); }
.fecho .titulo em { color: var(--marrom); }
.fecho p { font-weight: 600; }
.fecho__botoes { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 8px; }

@media (max-width: 1100px) {
  .fileira > .item { flex-basis: calc((100% - 32px) / 3); }
}

@media (max-width: 900px) {
  .fileira > .item { flex-basis: calc((100% - 16px) / 2.25); }
  .doces__grade { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 760px) {
  .etiqueta__preco { right: -6px; }
  .cardapio-capa .miolo { grid-template-columns: minmax(0, 1fr) 104px; align-items: end; gap: 10px; min-height: 0; padding-block: 30px 26px; }
  .cardapio-capa .cabeca__texto { font-size: .98rem; }
  .cardapio-capa__palco .final__copo { width: 66%; }
  .cardapio-capa__palco .palco__pedestal { width: 100%; }
  .chips li { padding: .44em .8em; font-size: .72rem; }
  .categoria { padding-block: 44px 40px; }
  .categoria__enfeite { width: 88px; margin-right: 6px; }
  .fileira { gap: 12px; }
  .fileira > .item { flex-basis: 74vw; padding: 14px 16px 16px; }
  .item__nome { font-size: 1.3rem; }
  .preco { font-size: 1.9rem; }
  /* no celular a fileira anda com o dedo: saem as setas e entra a barrinha */
  .js .grupo.rola .grupo__setas { display: none; }
  .js .grupo.rola .fileira__apoio { display: flex; }
  .doces__palco { width: min(78%, 280px); }
  .fecho__botoes .btn { flex: 1 1 100%; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; }
  .abertura { display: none; }
  .js .revela { opacity: 1; transform: none; }
  .graos svg { top: var(--y); }
  .abertura__painel img { clip-path: none; }
}