/* Tati Doces e Salgados — site (etapa 1). Cores, fontes e tempos em tokens.css. */
@font-face { font-family: "Baloo 2"; src: url("../fonts/baloo2-latin-800-normal.woff2") format("woff2"); font-weight: 800; font-display: swap; }
@font-face { font-family: "DM Sans"; src: url("../fonts/dmsans-var-latin.woff2") format("woff2"); font-weight: 100 1000; font-display: swap; }

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--tati-creme); color: var(--tati-ameixa);
  font: 400 var(--t-corpo)/1.6 var(--fonte-texto); overflow-x: clip;
  --foco: var(--tati-roxo);
}
/* grão de papel, bem leve, por cima de tudo */
body::after {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 90; opacity: 0.05; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
}
main { overflow-x: clip; }
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
h1, h2, h3, p, ol, ul { margin: 0; }
ul, ol { padding: 0; list-style: none; }
:focus-visible { outline: 3px solid var(--foco); outline-offset: 4px; border-radius: 6px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.pular { position: absolute; left: 1rem; top: -4rem; z-index: 100; background: var(--tati-amarelo); padding: .75rem 1rem; border-radius: var(--raio-p); font-weight: 700; }
.pular:focus { top: 1rem; }
.ic { width: 1.25em; height: 1.25em; flex: none; }

/* tipografia comum */
.sobretitulo { font: 600 var(--t-mini)/1 var(--fonte-texto); letter-spacing: .16em; text-transform: uppercase; color: var(--tati-roxo); margin-bottom: var(--e-2); }
.titulo-2 { font: 800 var(--t-h2)/.95 var(--fonte-display); letter-spacing: -.015em; text-wrap: balance; }
.titulo-2 em { font-style: normal; color: var(--tati-roxo); }
.texto { max-width: 52ch; }

/* botões */
.botao {
  display: inline-flex; align-items: center; gap: .6em; min-height: 52px; padding: .8em 1.5em;
  font: 800 1.08rem/1 var(--fonte-display); text-decoration: none; color: var(--tati-ameixa);
  background: var(--tati-amarelo); border: 3px solid var(--tati-ameixa); border-radius: var(--raio-pilula);
  box-shadow: var(--sombra-doce); cursor: pointer;
  transition: translate var(--dur-curta) var(--curva), box-shadow var(--dur-curta) var(--curva), background-color var(--dur-curta);
}
.botao:hover { translate: 0 -2px; box-shadow: 0 8px 0 var(--tati-ameixa); background: #fff27a; }
.botao:active { translate: 0 4px; box-shadow: 0 2px 0 var(--tati-ameixa); }
.botao--linha { background: transparent; color: var(--tati-creme); border-color: var(--tati-creme); box-shadow: none; }
.botao--linha:hover { background: rgba(251, 246, 240, .12); box-shadow: none; }
.botao--linha .ic { transition: translate var(--dur-curta) var(--curva); }
.botao--linha:hover .ic { translate: 4px 0; }
.botao--escuro { background: var(--tati-ameixa); color: var(--tati-creme); box-shadow: 0 6px 0 var(--tati-magenta); }
.botao--escuro:hover { background: var(--tati-roxo-escuro); box-shadow: 0 8px 0 var(--tati-magenta); }
.botao--mini { min-height: 44px; padding: .55em 1.1em; font-size: .95rem; box-shadow: 0 4px 0 var(--tati-ameixa); }

.link-seta {
  display: inline-flex; align-items: center; gap: .45em; font: 800 1.1rem/1.2 var(--fonte-display); color: var(--tati-roxo);
  text-decoration: none; padding-block: .5rem; min-height: 44px;
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 3px no-repeat; transition: background-size var(--dur-media) var(--curva);
}
.link-seta:hover { background-size: 100% 3px; }
.link-seta .ic { transition: translate var(--dur-curta) var(--curva); }
.link-seta:hover .ic { translate: 5px 0; }

/* topo */
.topo {
  position: fixed; z-index: 50; top: 14px; left: var(--margem); right: var(--margem); max-width: var(--largura); margin-inline: auto;
  display: flex; align-items: center; gap: var(--e-3); padding: 8px 8px 8px 14px;
  background: var(--tati-creme); border: 3px solid var(--tati-ameixa); border-radius: var(--raio-pilula); box-shadow: 0 5px 0 var(--tati-ameixa);
  transition: translate var(--dur-media) var(--curva);
}
.topo.is-escondido { translate: 0 -140%; }
.topo__marca { display: flex; align-items: center; gap: .5rem; text-decoration: none; margin-right: auto; border-radius: var(--raio-pilula); }
.topo__marca img { width: 38px; }
.topo__marca span { font: 800 1.5rem/0.9 var(--fonte-display); color: var(--tati-roxo); }
.topo__marca small { display: block; font: 600 .7rem/1 var(--fonte-texto); letter-spacing: .08em; text-transform: uppercase; color: var(--tati-ameixa); }
.topo__nav { display: flex; gap: var(--e-3); }
.topo__nav a { font-weight: 600; text-decoration: none; padding: .6rem .2rem; background: linear-gradient(var(--tati-magenta), var(--tati-magenta)) 0 85% / 0 3px no-repeat; transition: background-size var(--dur-media) var(--curva); }
.topo__nav a:hover { background-size: 100% 3px; }

/* entrada do herói (no carregamento) */
.entra { display: inline-block; animation: sobe var(--dur-longa) var(--curva) both; animation-delay: calc(150ms + var(--d, 0) * var(--escalonado)); }
.linha { display: block; overflow: hidden; padding-bottom: .04em; }
.linha .entra { animation-name: sobe-linha; }
@keyframes sobe { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
@keyframes sobe-linha { from { transform: translateY(105%); } to { transform: none; } }

/* 1. herói */
.heroi {
  --foco: var(--tati-amarelo);
  position: relative; background: var(--tati-roxo); color: var(--tati-creme);
  min-height: 100svh; padding: calc(110px + var(--e-4)) var(--margem) var(--e-12);
  display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--e-4); align-items: center;
}
.heroi__texto { grid-column: 1 / 8; position: relative; z-index: 2; }
.selo-linha { font: 600 var(--t-mini)/1 var(--fonte-texto); letter-spacing: .16em; text-transform: uppercase; color: var(--tati-amarelo); margin-bottom: var(--e-3); }
.heroi__titulo { font: 800 var(--t-h1)/.86 var(--fonte-display); letter-spacing: -.025em; }
.heroi__tati {
  color: var(--tati-amarelo); position: relative; padding-right: .18em;
  text-shadow: .045em 0 0 var(--tati-magenta), -.045em 0 0 var(--tati-magenta), 0 .045em 0 var(--tati-magenta), 0 -.045em 0 var(--tati-magenta),
    .032em .032em 0 var(--tati-magenta), -.032em -.032em 0 var(--tati-magenta), .032em -.032em 0 var(--tati-magenta), -.032em .032em 0 var(--tati-magenta), 0 .11em 0 var(--tati-ameixa);
}
.heroi__coracao { position: absolute; right: -.08em; top: .02em; width: .3em; height: .3em; color: var(--tati-amarelo); rotate: 14deg; }
.risco { width: min(320px, 70%); height: auto; margin: var(--e-2) 0 var(--e-3); overflow: visible; }
.risco path { fill: none; stroke-linecap: round; stroke-dasharray: 320; stroke-dashoffset: 320; animation: desenha 1.1s var(--curva) .7s forwards; }
.risco__a { stroke: var(--tati-amarelo); stroke-width: 7; }
.risco__b { stroke: var(--tati-magenta); stroke-width: 4; animation-delay: .85s !important; }
@keyframes desenha { to { stroke-dashoffset: 0; } }
.heroi__lead { font-size: clamp(1.05rem, .95rem + .45vw, 1.3rem); max-width: 40ch; color: var(--tati-creme); }
.heroi__acoes { display: flex; flex-wrap: wrap; gap: var(--e-2); margin-top: var(--e-4); }

.heroi__palco { grid-column: 8 / 13; position: relative; justify-self: center; width: min(100%, 540px); }
.prato {
  position: relative; aspect-ratio: 1; border-radius: 50%; overflow: hidden; background: var(--tati-creme); container-type: inline-size;
  border: clamp(10px, 1.3vw, 18px) solid var(--tati-magenta); box-shadow: 0 34px 60px -28px rgba(30, 4, 38, .75);
  animation: prato-entra 1.1s var(--curva-mola) .25s both;
}
@keyframes prato-entra { from { opacity: 0; transform: scale(.86) rotate(-6deg); } to { opacity: 1; transform: none; } }
.prato__rotulo { position: absolute; inset: 15% 0 auto; text-align: center; color: var(--tati-ameixa); font: 600 max(.8rem, 4.2cqi)/1.05 var(--fonte-texto); }
.prato__rotulo b { display: block; font: 800 15cqi/.9 var(--fonte-display); color: var(--tati-roxo); letter-spacing: -.02em; }
.prato__foto { position: absolute; bottom: 0; left: -8%; width: 116%; max-width: none; animation: sobe 1.2s var(--curva) .55s both; }
.heroi__mascote {
  position: absolute; width: 34%; left: -15%; bottom: -8%; rotate: -8deg; z-index: 2;
  filter: drop-shadow(0 10px 0 rgba(58, 11, 71, .35)); animation: sobe 1s var(--curva-mola) .9s both;
}
.selo-giro { position: absolute; width: 31%; aspect-ratio: 1; right: -7%; top: -2%; z-index: 2; border-radius: 50%; background: var(--tati-amarelo); border: 3px solid var(--tati-ameixa); box-shadow: 0 6px 0 var(--tati-ameixa); animation: sobe 1s var(--curva-mola) 1.05s both; }
.selo-giro > svg:first-child { width: 100%; height: 100%; animation: gira 22s linear infinite; }
.selo-giro text { font: 800 19px var(--fonte-display); letter-spacing: 2.6px; fill: var(--tati-ameixa); }
.selo-giro__coracao { position: absolute; inset: 34%; width: 32%; height: 32%; color: var(--tati-magenta); }
@keyframes gira { to { transform: rotate(360deg); } }

/* faixa que corre */
.faixa { position: relative; z-index: 3; background: var(--tati-amarelo); border-block: 3px solid var(--tati-ameixa); rotate: -1.6deg; margin: -2.2rem -2vw 0; overflow: hidden; }
.faixa__trilho { display: flex; align-items: center; gap: 1.4rem; width: max-content; padding: .85rem 0; animation: corre 36s linear infinite; }
.faixa span { font: 800 clamp(1.2rem, 1rem + .8vw, 1.8rem)/1 var(--fonte-display); text-transform: uppercase; letter-spacing: .02em; white-space: nowrap; }
.faixa svg { width: 1.3rem; height: 1.3rem; color: var(--tati-magenta); flex: none; }
@keyframes corre { to { transform: translateX(-50%); } }

/* 2. cookies */
.cookies { padding: clamp(6rem, 4rem + 8vw, 11rem) var(--margem) clamp(5rem, 3rem + 6vw, 9rem); display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--e-4); max-width: calc(var(--largura) + 2 * var(--margem)); margin-inline: auto; align-items: start; }
.cookies__cabeca { grid-column: 1 / 6; position: sticky; top: 120px; display: grid; gap: var(--e-3); }
.cookies__cabeca .sobretitulo { margin: 0; }
.sabores { grid-column: 6 / 13; }
.sabor {
  position: relative; display: flex; align-items: center; gap: .3em; padding: .12em 0 .16em;
  font: 800 clamp(3.2rem, 1.6rem + 6vw, 7.6rem)/.95 var(--fonte-display); letter-spacing: -.03em;
  border-bottom: 3px dashed rgba(58, 11, 71, .22); transition: translate var(--dur-media) var(--curva), color var(--dur-media);
}
.sabor:hover { translate: 14px 0; color: var(--tati-roxo); }
.sabor__ponto { width: .32em; height: .32em; border-radius: 50%; background: var(--cor); border: 3px solid var(--tati-ameixa); flex: none; transition: scale var(--dur-media) var(--curva-mola); }
.sabor:hover .sabor__ponto { scale: 1.35; }
.sabor__img {
  position: absolute; right: 0; top: 50%; width: clamp(130px, 19vw, 280px); max-width: none; translate: 0 -50%; rotate: 5deg;
  border: 7px solid #fff; border-radius: var(--raio-p); box-shadow: var(--sombra-suave), 0 0 0 3px var(--tati-ameixa); z-index: 1;
  transition: rotate var(--dur-media) var(--curva-mola);
}
.sabor--foto:hover .sabor__img { rotate: -2deg; }
.cookies > .link-seta { grid-column: 6 / 13; margin-top: var(--e-3); justify-self: start; }

/* 3. cardápio */
.cardapio {
  padding: clamp(5rem, 3rem + 6vw, 9rem) var(--margem); position: relative;
  background-color: var(--tati-rosa);
  background-image: linear-gradient(90deg, rgba(248, 198, 218, .55) 50%, transparent 50%), linear-gradient(rgba(248, 198, 218, .55) 50%, transparent 50%);
  background-size: 72px 72px; border-block: 3px solid var(--tati-ameixa);
}
.cardapio > * { max-width: var(--largura); margin-inline: auto; }
.cardapio__cabeca { margin-bottom: var(--e-6); }
.cardapio__cabeca .titulo-2 { max-width: 16ch; margin: 0; }
.bento { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--e-3); }
.cartao {
  position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: var(--e-2); padding: var(--e-4);
  background: #fff; border: 3px solid var(--tati-ameixa); border-radius: var(--raio-m); box-shadow: var(--sombra-doce); overflow: hidden;
  transition: translate var(--dur-media) var(--curva), box-shadow var(--dur-media) var(--curva);
}
.cartao:hover { translate: 0 -2px; box-shadow: 0 8px 0 var(--tati-ameixa); }
.cartao h3 { font: 800 clamp(2rem, 1.5rem + 1.6vw, 3rem)/.95 var(--fonte-display); letter-spacing: -.02em; }
.cartao p { max-width: 42ch; }
.cartao__icone { width: 56px; height: 56px; color: var(--tati-magenta); }
.cartao--doces { grid-column: 1 / 8; grid-row: 1 / 3; background: var(--tati-creme); padding-bottom: 0; }
.cartao__foto { margin: auto calc(var(--e-4) * -1) 0; width: calc(100% + var(--e-4) * 2); border-top: 3px solid var(--tati-ameixa); overflow: hidden; }
.cartao__foto img { width: 100%; transition: scale var(--dur-longa) var(--curva); }
.cartao--doces:hover .cartao__foto img { scale: 1.03; }
.cartao--salgados { grid-column: 8 / 13; background: var(--tati-amarelo); }
.cartao--massas { grid-column: 8 / 13; }
.cartao--eventos { --foco: var(--tati-amarelo); grid-column: 1 / 13; background: var(--tati-roxo); color: var(--tati-creme); display: grid; grid-template-columns: auto auto 1fr auto; align-items: center; gap: var(--e-4); }
.cartao--eventos .cartao__icone { color: var(--tati-amarelo); }
.cartao--eventos .link-seta { color: var(--tati-amarelo); }
.cardapio__nota { margin-top: var(--e-4); font-weight: 600; }

/* 4. frase */
.frase { --foco: var(--tati-amarelo); position: relative; background: var(--tati-roxo); color: var(--tati-creme); padding: clamp(7rem, 4rem + 10vw, 13rem) var(--margem); overflow: hidden; }
.frase__texto { font: 800 var(--t-mega)/.88 var(--fonte-display); letter-spacing: -.035em; max-width: 11ch; margin-left: clamp(0rem, 8vw, 9rem); text-wrap: balance; }
.frase__texto .palavra { display: inline-block; }
.frase__texto .palavra--chave { color: var(--tati-amarelo); }
.frase__coracao { position: absolute; width: clamp(110px, 16vw, 230px); height: clamp(110px, 16vw, 230px); right: 7%; bottom: 14%; color: var(--tati-magenta); rotate: 12deg; }
.frase__fonte { margin: var(--e-4) 0 0 clamp(0rem, 8vw, 9rem); font-size: var(--t-mini); letter-spacing: .14em; text-transform: uppercase; color: var(--tati-amarelo); }

/* 5. como encomendar (momento de destaque) */
.encomendar { --foco: var(--tati-roxo); background: var(--tati-creme); }
.encomendar__palco { min-height: 100svh; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 6vw, 7rem); align-items: center; padding: var(--e-12) var(--margem); max-width: calc(var(--largura) + 2 * var(--margem)); margin-inline: auto; }
.encomendar__anel { position: relative; width: min(100%, 470px); justify-self: center; }
.encomendar__anel > svg:first-child { width: 100%; height: auto; rotate: -90deg; overflow: visible; }
.anel__fundo, .anel__traco { fill: none; stroke-width: 18; }
.anel__fundo { stroke: var(--tati-rosa-forte); }
.anel__traco { stroke: var(--tati-magenta); stroke-linecap: round; stroke-dasharray: 628.32; stroke-dashoffset: 0; }
.anel__numero { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.anel__numero span { font: 800 clamp(6rem, 3rem + 9vw, 11rem)/.8 var(--fonte-display); color: var(--tati-roxo); }
.anel__numero small { font: 600 var(--t-mini)/1 var(--fonte-texto); letter-spacing: .16em; text-transform: uppercase; margin-top: .6rem; }
.anel__coracao { position: absolute; width: 18%; height: 18%; left: 41%; top: -5%; color: var(--tati-amarelo); filter: drop-shadow(0 0 0 var(--tati-ameixa)) drop-shadow(0 4px 0 var(--tati-ameixa)); }
.is-cena .anel__coracao { scale: 0; transition: scale var(--dur-media) var(--curva-mola); }
.is-cena.is-fechado .anel__coracao { scale: 1; }
.encomendar__texto { display: grid; gap: var(--e-3); justify-items: start; }
.encomendar__texto .sobretitulo { margin: 0; }
.passos { display: grid; gap: var(--e-2); counter-reset: passo; margin-block: var(--e-2); }
.passo { counter-increment: passo; display: grid; grid-template-columns: 52px 1fr; column-gap: var(--e-2); align-items: start; transition: opacity var(--dur-media) var(--curva); }
.passo::before {
  content: counter(passo); grid-row: span 2; width: 52px; height: 52px; display: grid; place-content: center; border-radius: 50%;
  font: 800 1.5rem/1 var(--fonte-display); border: 3px solid var(--tati-ameixa); background: #fff; transition: background-color var(--dur-media), scale var(--dur-media) var(--curva-mola);
}
.passo b { font: 800 1.45rem/1.15 var(--fonte-display); padding-top: .2rem; }
.passo span { max-width: 44ch; }
.is-cena .passo { opacity: .45; }
.is-cena .passo.is-ativo { opacity: 1; }
.passo.is-ativo::before { background: var(--tati-amarelo); scale: 1.08; }

/* 6. prova */
.prova { position: relative; overflow: hidden; background: var(--tati-amarelo); border-block: 3px solid var(--tati-ameixa); padding: clamp(5rem, 3rem + 6vw, 9rem) var(--margem); display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--e-4); align-items: end; }
.prova::before { content: ""; position: absolute; width: clamp(320px, 46vw, 680px); aspect-ratio: 1; right: -12%; top: -30%; border-radius: 50%; border: clamp(36px, 5vw, 70px) solid var(--tati-magenta); opacity: .16; }
.prova__numero { grid-column: 1 / 8; position: relative; }
.prova__grande { font: 800 clamp(5rem, 2rem + 12vw, 15rem)/.85 var(--fonte-display); letter-spacing: -.04em; color: var(--tati-roxo); text-shadow: 0 .06em 0 var(--tati-ameixa); font-variant-numeric: tabular-nums; }
.prova__titulo { font: 800 var(--t-h3)/1.1 var(--fonte-display); max-width: 20ch; margin-top: var(--e-3); }
.prova__lado { grid-column: 8 / 13; display: grid; gap: var(--e-3); justify-items: start; position: relative; }
.prova__fonte { font-size: var(--t-mini); }

/* 7. chamada final */
.final { --foco: var(--tati-amarelo); background: var(--tati-roxo); color: var(--tati-creme); text-align: center; padding: clamp(5rem, 3rem + 7vw, 10rem) var(--margem); display: grid; justify-items: center; gap: var(--e-3); }
.final__mascote { width: clamp(130px, 14vw, 190px); filter: drop-shadow(0 10px 0 rgba(30, 4, 38, .4)); }
.final__titulo { font: 800 var(--t-h1)/.86 var(--fonte-display); letter-spacing: -.03em; }
.final__titulo span { color: var(--tati-amarelo); text-shadow: .045em 0 0 var(--tati-magenta), -.045em 0 0 var(--tati-magenta), 0 .045em 0 var(--tati-magenta), 0 -.045em 0 var(--tati-magenta), 0 .11em 0 var(--tati-ameixa); }
.final__texto { max-width: 40ch; font-size: clamp(1.05rem, .95rem + .4vw, 1.25rem); }
.final__acoes { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--e-2); margin-top: var(--e-2); }

/* rodapé */
.rodape { --foco: var(--tati-amarelo); background: var(--tati-ameixa); color: var(--tati-creme); padding: var(--e-8) var(--margem) var(--e-6); display: grid; grid-template-columns: 2fr 1fr 1.3fr; gap: var(--e-4); font-size: .95rem; }
.rodape__marca { display: flex; align-items: center; gap: var(--e-2); }
.rodape__marca img { width: 64px; }
.rodape__nome { font: 800 1.5rem/1 var(--fonte-display); color: var(--tati-amarelo); margin-bottom: .3rem; }
.rodape__rotulo { font-size: var(--t-mini); letter-spacing: .14em; text-transform: uppercase; color: var(--tati-amarelo); margin-bottom: .4rem; }
.rodape a { text-underline-offset: 3px; display: inline-block; padding-block: .3rem; }
.rodape a:hover { color: var(--tati-amarelo); }
.rodape__demo { grid-column: 1 / -1; padding-top: var(--e-3); border-top: 1px solid rgba(251, 246, 240, .2); font-size: var(--t-mini); opacity: .75; }

/* botão fixo de WhatsApp (celular) */
.zap-fixo {
  position: fixed; right: 16px; bottom: 16px; z-index: 60; width: 62px; height: 62px; display: none; place-content: center; border-radius: 50%;
  background: var(--tati-amarelo); color: var(--tati-ameixa); border: 3px solid var(--tati-ameixa); box-shadow: 0 5px 0 var(--tati-ameixa);
  transition: scale var(--dur-media) var(--curva-mola), opacity var(--dur-media);
}
.zap-fixo svg { width: 30px; height: 30px; }
.zap-fixo.is-escondido { scale: 0; opacity: 0; pointer-events: none; }

/* revelação na rolagem: visível por padrão */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    [data-revela] { animation: revela linear both; animation-timeline: view(); animation-range: entry 5% entry 65%; }
  }
}
@keyframes revela { from { opacity: 0; transform: translateY(48px); } to { opacity: 1; transform: none; } }
.js-io [data-revela] { transition: opacity .8s var(--curva), transform .8s var(--curva); }
.js-io [data-revela]:not(.is-in) { opacity: 0; transform: translateY(48px); }

/* responsivo */
@media (max-width: 1100px) {
  .topo__nav { display: none; }
  .heroi { min-height: 0; padding-bottom: var(--e-16); }
  .heroi__palco { width: 92%; }
  .cookies__cabeca { grid-column: 1 / 13; position: static; }
  .sabores, .cookies > .link-seta { grid-column: 1 / 13; }
  .prova__numero, .prova__lado { grid-column: 1 / 13; }
}
@media (max-width: 900px) {
  .zap-fixo { display: grid; }
  .cartao--doces, .cartao--salgados, .cartao--massas, .cartao--eventos { grid-column: 1 / 13; grid-row: auto; }
  .cartao--eventos { grid-template-columns: 1fr; gap: var(--e-2); justify-items: start; }
  .encomendar__palco { grid-template-columns: 1fr; min-height: 0; padding-block: var(--e-12); }
  .encomendar__anel { width: min(76%, 340px); }
  .is-cena .passo { opacity: 1; }
  .rodape { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  .heroi { min-height: 0; padding-bottom: var(--e-12); }
  .heroi__texto { grid-column: 1 / 13; }
  .heroi__palco { grid-column: 1 / 13; width: min(78%, 420px); margin-top: var(--e-4); }
}
@media (max-width: 560px) {
  .topo__marca small { display: none; }
  .heroi { padding-top: calc(96px + var(--e-2)); padding-bottom: var(--e-8); }
  .risco { margin-block: var(--e-1) var(--e-2); }
  .heroi__acoes .botao { width: 100%; justify-content: center; }
  .heroi__palco { width: 86%; }
  .sabor__img { width: 116px; right: 6px; border-width: 5px; }
  .cartao { padding: var(--e-3); }
  .cartao__foto { margin-inline: calc(var(--e-3) * -1); width: calc(100% + var(--e-3) * 2); }
  .frase__texto, .frase__fonte { margin-left: 0; }
}

/* movimento reduzido: sem parallax, giro, faixa correndo nem seção fixa */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-delay: 0ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .selo-giro > svg:first-child, .faixa__trilho { animation: none !important; }
  .risco path { stroke-dashoffset: 0; }
}