/* ==========================================================================
   DONUT COM AMOR — CELULAR E TABLET (até 860px)

   Folha própria, escrita do zero (o style.css só vale a partir de 861px).
   Direção: padrão Apple da casa (referência: Ideal Segur). Fonte do sistema,
   branco e cinza claro alternando por seção, blocos pretos para destaque e o
   rosa da marca como único acento. Fotos dos produtos como protagonistas.

   Movimento: um único momento "cinema" — o coração 3D do logo, preso no
   topo, gira e vira donut enquanto se rola (mobile.js). O resto só tem a
   revelação curta ao rolar (classes .revelar/.visivel que o mobile.js põe)
   e o retorno de toque dos botões. Rolagem nativa, sem biblioteca.
   ========================================================================== */

:root {
  --branco: #fff;
  --cinza: #f5f5f7;
  --cinza-2: #e8e8ed;
  --linha: #d2d2d7;
  --preto: #000;
  --texto: #1d1d1f;
  --texto-2: #6e6e73;
  --texto-claro: #f5f5f7;
  --texto-claro-2: #a1a1a6;

  /* acento único: o rosa do logo, escurecido para ter contraste em texto */
  --marca: #c7307f;
  --marca-esc: #a82568;
  --marca-viva: #ff66a3;          /* só decoração (pontos, halos) */
  --marca-claro: #ff8fbd;         /* rosa legível sobre preto */
  --marca-fundo: #fde8f1;
  --zap: #15803d;
  --zap-esc: #166534;
  --dourado: #f5a524;

  --fonte: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI Variable Text",
           "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --fonte-titulo: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI Variable Display",
                  "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --margem: 20px;
  --altura-cabecalho: 56px;
  --espaco-secao: 72px;
  --raio-sm: 12px;
  --raio: 18px;
  --raio-lg: 28px;
  --sombra-cartao: 0 24px 48px -24px rgba(0, 0, 0, .22), 0 6px 16px -10px rgba(0, 0, 0, .08);
  --suave: cubic-bezier(.25, .1, .25, 1);
  --ease-saida: cubic-bezier(.16, 1, .3, 1);
  --transicao: 240ms cubic-bezier(.25, .1, .25, 1);

  /* nomes que os templates usam em estilos embutidos */
  --rosa-300: var(--marca);
  --tinta: var(--texto);
  --indigo: var(--texto);
}
@media (min-width: 600px) {
  :root { --margem: 32px; --espaco-secao: 104px; }
}

/* ------------------------------------------------------------------ base */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--altura-cabecalho) + 12px);
  color-scheme: light;
  accent-color: var(--marca);
  -webkit-tap-highlight-color: transparent;
}
html.menu-aberto { overflow: hidden; }
body {
  margin: 0;
  font-family: var(--fonte);
  font-size: 1.0625rem;
  line-height: 1.5;
  letter-spacing: -.011em;
  color: var(--texto);
  background: var(--branco);
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
main { display: block; overflow-x: clip; }
[hidden] { display: none !important; }
.sr-only {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
img, svg, video, canvas { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; letter-spacing: inherit; }
:focus-visible { outline: 2px solid var(--texto); outline-offset: 3px; border-radius: 6px; }
::selection { background: rgba(199, 48, 127, .18); }

h1, h2, h3 {
  font-family: var(--fonte-titulo);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -.022em;
  margin: 0 0 .45em;
  text-wrap: balance;
}
h1 { font-size: clamp(2.25rem, 1.5rem + 3.6vw, 3.25rem); line-height: 1.05; letter-spacing: -.028em; }
h2 { font-size: clamp(1.875rem, 1.4rem + 2.4vw, 2.75rem); }
h3 { font-size: 1.1875rem; font-weight: 600; line-height: 1.22; letter-spacing: -.016em; }
p { margin: 0 0 1em; }
address { font-style: normal; }
.centro { text-align: center; }

/* acentos de título: a palavra "candy" vai no rosa; a parte cursiva vira o
   complemento em cinza (título em dois tons, como a Apple faz) */
.candy { font-style: normal; color: var(--marca); }
.script, .script-leve, .script-titulo { font-family: inherit; font-style: normal; color: var(--texto-2); }
.num-gigante { color: var(--marca); }

/* coisas do layout do computador que não existem no celular */
.grao, .cortina, .preloader, .progresso-donut, .sabores, .cinema, .sabores-hud,
.hero-rolar, .selo, .rodape-marquee, .marquee.reverso, .depoimento[data-copia],
.entrega-video, .pagina-topo video, .linha-tempo-traco, .nav-links, .nav > .nav-status,
.mapa-alvo { display: none !important; }

/* ---------------------------------------------------------------- botões */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5em;
  min-height: 48px;
  padding: .55em 1.35em;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -.01em;
  text-align: center;
  white-space: nowrap;
  cursor: pointer;
  background: var(--marca);
  color: #fff;
  transition: background-color var(--transicao), color var(--transicao), border-color var(--transicao), transform 320ms var(--ease-saida);
}
.btn:active { transform: scale(.96); transition-duration: 80ms; }
.btn-doce { background: var(--marca); color: #fff; }
.btn-indigo { background: var(--texto); color: #fff; }
.btn-contorno { background: transparent; border-color: var(--texto); color: var(--texto); }
/* contorno: escuro nas seções claras; claro só nos blocos pretos */
.btn-contorno-claro { background: transparent; border-color: var(--texto); color: var(--texto); }
.final .btn-contorno-claro, .manifesto .btn-contorno-claro { border-color: rgba(255, 255, 255, .55); color: #fff; }
.btn-grande { min-height: 52px; padding: .65em 1.6em; font-size: 1.0625rem; }
.btn-pequeno { min-height: 36px; padding: .35em 1em; font-size: .9375rem; }
.btn-pequeno::after { content: ""; position: absolute; inset: -6px -2px; }   /* toque de 48px */
.btn.is-desativado { opacity: .38; pointer-events: none; }
.link-sub { display: inline-flex; align-items: center; min-height: 44px; color: var(--marca); font-weight: 500; }
.link-sub::after { content: "›"; margin-left: .3em; font-size: 1.3em; line-height: 1; }

/* sobretítulo curto na cor da marca */
.rotulo {
  display: block;
  margin: 0 0 .5rem;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--marca);
}

.estrelas {
  --nota: 5;
  display: inline-block;
  font-size: 1rem;
  letter-spacing: 2px;
  line-height: 1;
  background: linear-gradient(90deg, var(--dourado) calc(var(--nota) / 5 * 100%), var(--cinza-2) 0);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* ---------------------------------------------------------- cabeçalho */
/* fixo e fora do fluxo: o topo de cada página já reserva a altura dele */
body > header { position: fixed; top: 0; left: 0; right: 0; z-index: 100; }
.nav {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  height: var(--altura-cabecalho);
  padding: 0 max(var(--margem), env(safe-area-inset-right)) 0 max(var(--margem), env(safe-area-inset-left));
}
/* vidro num pseudo-elemento (no próprio .nav viraria contêiner do menu fixo);
   aparece ao rolar */
.nav::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(255, 255, 255, .8);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .08);
  opacity: 0;
  transition: opacity 420ms var(--suave);
}
.nav.rolado::before, .menu-aberto .nav::before { opacity: 1; }
.menu-aberto .nav::before { background: #fff; }
.menu-aberto .nav::before, .fraco .nav::before { -webkit-backdrop-filter: none; backdrop-filter: none; }
.fraco .nav::before { background: rgba(255, 255, 255, .96); }
.nav-logo { display: flex; align-items: center; min-height: 44px; margin-right: auto; }
.nav-logo img { width: auto; height: 34px; }
.nav-cta { min-height: 34px; padding: .3em 1em; font-size: .875rem; }
.nav-cta::after { content: ""; position: absolute; inset: -6px -2px; }
.nav-menu {
  position: relative;
  width: 44px; height: 44px;
  margin-right: -10px;
  padding: 0; border: 0;
  background: none;
  color: var(--texto);
  cursor: pointer;
}
.nav-menu span {
  position: absolute; left: 12px; right: 12px; height: 2px; border-radius: 1px;
  background: currentColor;
  transition: transform 360ms var(--ease-saida), top 360ms var(--ease-saida);
}
.nav-menu span:first-child { top: 17px; }
.nav-menu span:last-child { top: 25px; }
.nav-menu[aria-expanded="true"] span:first-child { top: 21px; transform: rotate(45deg); }
.nav-menu[aria-expanded="true"] span:last-child { top: 21px; transform: rotate(-45deg); }

/* folha do menu: tela cheia abaixo do cabeçalho */
.menu-cheio {
  position: fixed;
  top: var(--altura-cabecalho);
  left: 0; right: 0; bottom: 0;
  z-index: 99;
  display: flex;
  flex-direction: column;
  padding: 8px max(28px, env(safe-area-inset-right)) calc(28px + env(safe-area-inset-bottom)) max(28px, env(safe-area-inset-left));
  background: #fff;
  overflow-y: auto;
  overscroll-behavior: contain;
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity 220ms var(--suave), transform 220ms var(--suave);
}
.menu-cheio.aberto { opacity: 1; transform: none; transition: opacity 320ms var(--suave), transform 420ms var(--ease-saida); }
.menu-cheio ul { list-style: none; margin: 0; padding: 0; }
.menu-cheio li a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 60px;
  border-bottom: 1px solid var(--cinza-2);
  font-family: var(--fonte-titulo);
  font-size: 1.75rem;
  font-weight: 600;
  letter-spacing: -.022em;
}
.menu-cheio li a::after { content: "›"; font-size: .9em; font-weight: 400; color: var(--texto-2); }
.menu-cheio li a[aria-current="page"] { color: var(--marca); }
.menu-cheio li { opacity: 0; transform: translateY(14px); transition: opacity 160ms var(--suave), transform 160ms var(--suave); }
.menu-cheio.aberto li { opacity: 1; transform: none; transition: opacity 420ms var(--suave), transform 600ms var(--ease-saida); }
.menu-cheio.aberto li:nth-child(2) { transition-delay: 35ms; }
.menu-cheio.aberto li:nth-child(3) { transition-delay: 70ms; }
.menu-cheio.aberto li:nth-child(4) { transition-delay: 105ms; }
.menu-cheio-rodape { margin-top: auto; padding-top: 28px; color: var(--texto-2); font-size: .9375rem; }
.menu-cheio-rodape p { margin: 0 0 .35rem; }
.menu-cheio-rodape a { color: var(--marca); }

/* selo de aberto/fechado */
.nav-status {
  display: inline-flex;
  align-items: center;
  gap: .5em;
  margin: 0;
  padding: .35em .85em;
  border-radius: 999px;
  background: var(--cinza);
  color: var(--texto);
  font-size: .8125rem;
  font-weight: 500;
  white-space: nowrap;
}
.nav-status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--texto-2); }
.nav-status.aberto::before { background: #22c55e; }
.nav-status.grande { font-size: .9375rem; }

/* ----------------------------------------------------- estrutura de seção */
.folha, .pagina-topo, .final, .manifesto {
  position: relative;
  padding: var(--espaco-secao) max(var(--margem), env(safe-area-inset-right)) var(--espaco-secao) max(var(--margem), env(safe-area-inset-left));
}
.folha { background: var(--branco); color: var(--texto); }
.folha-lilas, .folha-rosa, .folha-rosa-claro, .folha-noite { background: var(--cinza); }
/* ritmo branco / cinza / preto na home */
#caneca, #visite, #delivery, #reels { background: var(--branco); }
.perguntas { background: var(--cinza); }

.secao-topo { max-width: 40rem; margin: 0 auto 36px; text-align: center; }
.secao-topo h2 { margin-bottom: .35em; }
.secao-topo > p:last-child {
  margin: 0 auto;
  max-width: 34em;
  font-size: 1.125rem;
  line-height: 1.42;
  color: var(--texto-2);
}

/* ------------------------------------------------------------------ herói
   O único "cinema" do celular: .hero-pin é a pista de rolagem; .hero-quadro
   fica preso na tela enquanto o coração 3D gira e vira donut. */
.hero { position: relative; background: var(--branco); }
.hero-pin { position: relative; height: 170svh; }
.hero-quadro {
  position: sticky;
  top: 0;
  display: flex;
  flex-direction: column;
  height: 100svh;
  min-height: 560px;
  padding: calc(var(--altura-cabecalho) + 4px) max(var(--margem), env(safe-area-inset-right)) 28px max(var(--margem), env(safe-area-inset-left));
  overflow: hidden;
}
/* o palco ocupa todo o espaço que o texto deixa livre: o donut nunca passa
   por trás do título, em tela nenhuma */
.hero-palco { position: relative; flex: 1 1 auto; min-height: 150px; margin: 0 calc(var(--margem) * -1); }
.hero-palco::before {           /* luz de estúdio atrás da peça */
  content: "";
  position: absolute;
  left: 8%; right: 8%; top: 4%; bottom: 4%;
  border-radius: 50%;
  background: radial-gradient(closest-side, #fdeaf2 0%, rgba(253, 234, 242, .55) 45%, rgba(253, 234, 242, 0) 100%);
}
.hero-palco::after {            /* sombra de apoio */
  content: "";
  position: absolute;
  left: 30%; right: 30%; bottom: 6%;
  height: 22px;
  background: radial-gradient(closest-side, rgba(0, 0, 0, .16), transparent);
}
.palco { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; opacity: 0; }
.palco-reserva { display: none; }
.sem-3d .palco, .fraco .palco, .no-js .palco { display: none; }
.sem-3d .palco-reserva, .fraco .palco-reserva, .no-js .palco-reserva {
  display: block;
  order: -1;
  flex: 1 1 auto;
  min-height: 150px;
  width: 100%;
  max-height: 46svh;
  object-fit: contain;
  padding: 8% 20%;
}
.sem-3d .hero-palco, .fraco .hero-palco, .no-js .hero-palco { display: none; }
/* sem coração 3D não há cinema: o herói rola normal em vez de ficar preso */
.sem-3d .hero-pin, .fraco .hero-pin, .no-js .hero-pin { height: auto; }
.sem-3d .hero-quadro, .fraco .hero-quadro, .no-js .hero-quadro { position: relative; height: auto; min-height: 100svh; }

.hero-conteudo { position: relative; z-index: 2; flex: none; text-align: center; }
.hero-titulo { margin: 0 0 .5rem; }
.hero-kicker {
  display: block;
  margin: 0 auto .6rem;
  font-family: var(--fonte);
  font-size: .9375rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -.01em;
  color: var(--marca);
}
.hero-slogan {
  display: block;
  font-size: clamp(2.35rem, 1.2rem + 6.2vw, 3.4rem);
  line-height: 1.03;
  letter-spacing: -.034em;
}
.hero-slogan .script { color: var(--texto); }
.hero-sub {
  max-width: 30em;
  margin: 0 auto 1.1rem;
  font-size: 1.0625rem;
  line-height: 1.42;
  color: var(--texto-2);
}
.hero-ctas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px 22px;
  margin: 0 0 14px;
}
/* no topo o botão secundário vira link com seta, como na Apple */
#inicio .btn-contorno {
  min-height: 44px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--marca);
  font-weight: 500;
}
#inicio .btn-contorno::after { content: "›"; margin-left: .3em; font-size: 1.3em; line-height: 1; transform: translateY(-.05em); }
.hero-google { display: inline-flex; align-items: center; gap: .5em; font-size: .875rem; color: var(--texto-2); }
.hero-google b { color: var(--texto); font-weight: 600; }
/* telas baixas: o texto encolhe para o donut continuar com espaço */
@media (max-height: 700px) {
  .hero-slogan { font-size: clamp(2.05rem, 1rem + 5.4vw, 2.6rem); }
  .hero-sub { font-size: 1rem; margin-bottom: .8rem; }
  .hero-google { display: none; }
}

/* fatos rápidos logo depois do herói: bento 2 x 2 */
.hero-fatos {
  list-style: none;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 0;
  padding: 8px max(var(--margem), env(safe-area-inset-right)) var(--espaco-secao) max(var(--margem), env(safe-area-inset-left));
}
.hero-fatos li {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 18px 16px;
  border-radius: var(--raio);
  background: var(--cinza);
}
.hero-fatos strong { font-family: var(--fonte-titulo); font-size: 1.0625rem; font-weight: 600; line-height: 1.25; letter-spacing: -.016em; }
.hero-fatos span { font-size: .875rem; line-height: 1.35; color: var(--texto-2); }
@media (min-width: 600px) { .hero-fatos { grid-template-columns: repeat(4, 1fr); } }

/* --------------------------------------------------------- bloco preto */
.manifesto { background: var(--preto); color: var(--texto-claro); text-align: center; }
.manifesto-titulo {
  max-width: 12em;
  margin: 0 auto .5em;
  font-size: clamp(2.5rem, 1.4rem + 5.6vw, 3.75rem);
  line-height: 1.02;
  letter-spacing: -.038em;
}
.manifesto .candy { color: var(--marca-claro); }
.manifesto-texto { max-width: 30em; margin: 0 auto; font-size: 1.1875rem; line-height: 1.45; color: var(--texto-claro-2); }

/* --------------------------------------------------- cartões de produto */
.queridinhos { padding-left: 0; padding-right: 0; }
.queridinhos .secao-topo { padding: 0 var(--margem); }
.trilho-h {
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--margem);
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.trilho-h::-webkit-scrollbar { display: none; }
.trilho-h-conteudo { display: flex; gap: 14px; width: max-content; padding: 4px var(--margem) 8px; }
.card-produto {
  display: flex;
  flex-direction: column;
  width: min(78vw, 320px);
  padding: 12px 12px 18px;
  border-radius: var(--raio-lg);
  background: var(--cinza);
  color: var(--texto);
  scroll-snap-align: start;
}
.card-produto-foto { position: relative; overflow: hidden; aspect-ratio: 4 / 3; border-radius: var(--raio); background: var(--cinza-2); }
.card-produto-foto img { width: 100%; height: 100%; object-fit: cover; }
.etiqueta {
  position: absolute; top: 10px; left: 10px;
  padding: .25em .7em;
  border-radius: 999px;
  background: rgba(255, 255, 255, .92);
  color: var(--texto-2);
  font-size: .75rem;
  font-weight: 600;
  text-decoration: line-through;
}
.card-produto h3 { margin: 16px 6px 6px; }
.card-produto > p { margin: 0 6px; font-size: .9375rem; line-height: 1.4; color: var(--texto-2); }
.card-produto > p:not(.card-produto-preco) {
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.card-produto-preco { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: auto 6px 0 !important; padding-top: 16px; }
.preco { font-family: var(--fonte-titulo); font-size: 1.25rem; font-weight: 700; letter-spacing: -.02em; color: var(--texto); }
.a-partir { font-size: .6em; font-weight: 500; color: var(--texto-2); }
.card-ver-tudo {
  justify-content: space-between;
  min-height: 100%;
  padding: 26px;
  background: var(--texto);
  color: #fff;
  font-family: var(--fonte-titulo);
  font-size: 1.625rem;
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -.022em;
}
.card-ver-tudo i { align-self: flex-end; font-style: normal; font-size: 2.5rem; font-weight: 400; color: var(--marca-claro); }

/* ------------------------------------------------------ mini donut (CSS) */
.mini {
  --cob: #ff66a3; --g1: #fff; --g2: #ffd23f; --g3: #3ec1f3;
  position: relative;
  flex: none;
  width: 40px; height: 40px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, transparent 0 19%, rgba(0, 0, 0, .18) 20% 23%, transparent 24%),
    radial-gradient(circle at 50% 50%, transparent 0 21%, var(--cob) 22% 63%, #d99a55 64% 71%, #c07d3c 72% 72.5%, transparent 73%);
}
.mini::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  background:
    radial-gradient(3px 1.6px at 30% 26%, var(--g1) 98%, transparent), radial-gradient(1.6px 3px at 70% 30%, var(--g2) 98%, transparent),
    radial-gradient(3px 1.6px at 76% 62%, var(--g3) 98%, transparent), radial-gradient(1.6px 3px at 30% 70%, var(--g1) 98%, transparent),
    radial-gradient(3px 1.6px at 52% 82%, var(--g2) 98%, transparent), radial-gradient(1.6px 3px at 18% 48%, var(--g3) 98%, transparent);
}
.mini-glaze::after, .mini-cacau::after { background: none; }

/* ------------------------------------------------------------------ combo */
.combo { display: grid; gap: 28px; text-align: center; }
.combo h2 { margin-bottom: .2em; }
.combo-preco { margin: 0 0 .5rem; font-family: var(--fonte-titulo); font-size: 1.5rem; font-weight: 700; letter-spacing: -.02em; }
.combo-preco s { margin-right: .35em; font-size: .7em; font-weight: 500; color: var(--texto-2); }
.combo-preco strong { color: var(--marca); }
.combo-texto > p:not(.rotulo):not(.combo-preco) { max-width: 30em; margin: 0 auto; color: var(--texto-2); }
.combo-opcoes { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 22px; }
.combo-opcao {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 56px;
  padding: 8px 12px 8px 8px;
  border: 0;
  border-radius: var(--raio);
  background: #fff;
  font-size: .9375rem;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  box-shadow: 0 1px 0 rgba(0, 0, 0, .04);
  transition: transform 320ms var(--ease-saida);
}
.combo-opcao:active { transform: scale(.96); transition-duration: 80ms; }
.combo-opcao:last-child:nth-child(odd) { grid-column: 1 / -1; justify-content: center; }
.combo-caixa-area { display: flex; flex-direction: column; align-items: center; }
.combo-caixa {
  position: relative;
  width: min(100%, 340px);
  aspect-ratio: 1;
  padding: 14px;
  border-radius: var(--raio-lg);
  background: #fff;
  box-shadow: var(--sombra-cartao);
  perspective: 900px;
}
.combo-slots { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); gap: 10px; height: 100%; }
.combo-slot {
  display: grid;
  place-items: center;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  border: 1.5px dashed var(--linha);
  border-radius: var(--raio);
  background: var(--cinza);
  cursor: pointer;
}
.combo-slot.cheio { border-style: solid; border-color: transparent; }
.combo-slot .mini { width: auto; height: 72%; max-width: 72%; aspect-ratio: 1; }
.combo-slot .mini.caiu { animation: cair-slot 520ms var(--ease-saida); }
@keyframes cair-slot { from { transform: translateY(-40%) scale(.6); opacity: 0; } }
.combo-tampa {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  border-radius: var(--raio-lg);
  background: #414684;
  transform-origin: top center;
  transform: rotateX(-100deg);
  opacity: 0;
  pointer-events: none;
  transition: transform 700ms var(--ease-saida), opacity 300ms var(--suave);
}
.combo-tampa img { width: 64%; }
.combo-caixa.fechada .combo-tampa { transform: none; opacity: 1; pointer-events: auto; cursor: pointer; }
.combo-status { margin: 18px 0 14px; font-weight: 600; }
.combo-pedir { width: min(100%, 340px); }

/* ------------------------------------------------------------ bolo de caneca */
.caneca-grade { display: grid; gap: 22px; max-width: 640px; margin: 0 auto; }
/* a prévia fica presa embaixo do cabeçalho enquanto se escolhem as camadas */
.caneca-visual {
  position: sticky;
  top: var(--altura-cabecalho);
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin: 0 calc(var(--margem) * -1);
  padding: 10px var(--margem);
  background: #fff;
  box-shadow: 0 10px 20px -18px rgba(0, 0, 0, .35);
}
.caneca-svg { width: auto; height: min(30svh, 230px); overflow: visible; }
.caneca-sombra { fill: rgba(0, 0, 0, .08); }
.caneca-alca { fill: none; stroke: #fdf8f1; stroke-width: 34; stroke-linecap: round; }
.caneca-corpo { fill: #fdf8f1; stroke: #e6ddd0; stroke-width: 3; }
.caneca-janela { stroke: rgba(0, 0, 0, .14); stroke-width: 3; stroke-dasharray: 8 8; }
.caneca-boca { fill: #fdf8f1; stroke: #e6ddd0; stroke-width: 3; }
.caneca-topo { fill: #efe6d6; transition: fill .5s; }
.caneca-escrita { font-family: var(--fonte-titulo); font-weight: 800; font-size: 26px; fill: #d9a93b; letter-spacing: 1px; }
.caneca-vela { opacity: 0; transition: opacity .4s; }
.caneca-vela.acesa { opacity: 1; }
.caneca-vela .chama { transform-box: fill-box; transform-origin: 50% 100%; }
/* SVG animado não é composto: redesenha a página a cada quadro. Por isso a
   chama e as luzinhas só se mexem com a caneca na tela (e a vela acesa). */
.caneca.em-tela .caneca-vela.acesa .chama { animation: chama .5s ease-in-out infinite alternate; }
@keyframes chama { to { transform: scale(.9, 1.1) rotate(3deg); } }
.caneca.em-tela .caneca-luzes circle { animation: brilha 1.4s ease-in-out infinite alternate; }
@keyframes brilha { from { opacity: .35; } }
.camada-caindo { animation: cair-camada 900ms cubic-bezier(.34, 1.36, .64, 1); }
@keyframes cair-camada { from { transform: translateY(-420px); } }
.caneca-total { display: flex; flex-direction: column; align-items: flex-start; }
.caneca-total span { font-size: .8125rem; color: var(--texto-2); }
.caneca-total strong { font-family: var(--fonte-titulo); font-size: 1.75rem; font-weight: 700; letter-spacing: -.02em; line-height: 1.15; }
.caneca-total small { max-width: 11em; font-size: .75rem; line-height: 1.3; color: var(--texto-2); }
.caneca-form { display: grid; gap: 12px; }
.caneca-grupo { margin: 0; padding: 16px; border: 0; border-radius: var(--raio); background: var(--cinza); }
.caneca-grupo legend {
  float: left;
  width: 100%;
  margin-bottom: 12px;
  font-family: var(--fonte-titulo);
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: -.016em;
}
.caneca-grupo legend small { font-family: var(--fonte); font-weight: 500; color: var(--texto-2); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; clear: both; }
.chip { position: relative; }
.chip input { position: absolute; opacity: 0; pointer-events: none; }
.chip span {
  display: inline-flex;
  align-items: center;
  gap: .45em;
  min-height: 40px;
  padding: .4em .95em;
  border-radius: 999px;
  background: #fff;
  font-size: .9375rem;
  font-weight: 500;
  cursor: pointer;
  box-shadow: inset 0 0 0 1px var(--cinza-2);
  transition: background-color var(--transicao), color var(--transicao), box-shadow var(--transicao);
}
.chip span i { width: 14px; height: 14px; border-radius: 50%; background: var(--c, #ccc); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12); }
.chip span small { font-size: .8125rem; color: var(--texto-2); }
.chip input:checked + span { background: var(--texto); color: #fff; box-shadow: none; }
.chip input:checked + span small { color: rgba(255, 255, 255, .7); }
.chip input:focus-visible + span { outline: 2px solid var(--texto); outline-offset: 2px; }
.campo {
  width: 100%;
  min-height: 48px;
  padding: .7em 1em;
  border: 1px solid var(--linha);
  border-radius: var(--raio-sm);
  background: #fff;
  font-size: 1.0625rem;
  clear: both;
}
.campo:focus { outline: none; border-color: var(--texto); box-shadow: 0 0 0 4px rgba(29, 29, 31, .08); }
.caneca-aviso { margin: 4px 0 0; font-size: .875rem; color: var(--texto-2); }
.caneca-form > .btn { width: 100%; margin-top: 6px; }
.caneca-fotos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; max-width: 640px; margin: 28px auto 0; }
.caneca-fotos img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--raio-sm); }

/* -------------------------------------------------------------- história */
.linha-tempo-area { max-width: 640px; margin: 0 auto; }
.linha-tempo { list-style: none; margin: 0; padding: 0 0 0 22px; border-left: 2px solid var(--linha); }
.marco { position: relative; padding: 0 0 28px 18px; }
.marco::before {
  content: "";
  position: absolute; left: -31px; top: 4px;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--marca);
  box-shadow: 0 0 0 4px var(--cinza);
}
.marco-ano { font-family: var(--fonte-titulo); font-size: .9375rem; font-weight: 700; color: var(--marca); }
.marco h3 { margin: .15em 0 .3em; }
.marco p { margin: 0; color: var(--texto-2); font-size: 1rem; }
.numeros { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; max-width: 640px; margin: 28px auto 32px; }
.numero { padding: 20px 16px; border-radius: var(--raio); background: #fff; }
.numero-valor { margin: 0; font-family: var(--fonte-titulo); font-size: 2.25rem; font-weight: 700; line-height: 1; letter-spacing: -.03em; color: var(--texto); }
.numero-rotulo { margin: .45em 0 0; font-size: .875rem; line-height: 1.35; color: var(--texto-2); }
.numeros--claro .numero { background: var(--cinza); }

/* ------------------------------------------------------ vídeos (câmera lenta) */
.reels { padding-left: 0; padding-right: 0; }
.reels .secao-topo { padding: 0 var(--margem); }
.reels-grade {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--margem);
  padding: 0 var(--margem) 4px;
  scrollbar-width: none;
}
.reels-grade::-webkit-scrollbar { display: none; }
.reel { flex: none; width: min(62vw, 260px); margin: 0; scroll-snap-align: start; }
.reel video { width: 100%; height: auto; aspect-ratio: 9 / 16; object-fit: cover; border-radius: var(--raio-lg); background: var(--cinza); }
.reel figcaption { margin-top: 10px; font-size: .9375rem; font-weight: 500; color: var(--texto-2); text-align: center; }
.reels-cta { margin: 28px var(--margem) 0; color: var(--texto-2); }
.reels-cta .btn { margin-top: 14px; }

/* ------------------------------------------------------------- avaliações */
.amor { padding-left: 0; padding-right: 0; }
.amor-topo { padding: 0 var(--margem); margin-bottom: 28px; text-align: center; }
.nota-grande { margin: 0; font-family: var(--fonte-titulo); font-size: 4.5rem; font-weight: 700; line-height: 1; letter-spacing: -.04em; }
.amor-topo .estrelas { margin: 10px 0 14px; font-size: 1.375rem; }
.amor-topo h2 { margin-bottom: .25em; }
.amor-topo p { margin: 0; color: var(--texto-2); }
.marquee {
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--margem);
  scrollbar-width: none;
}
.marquee::-webkit-scrollbar { display: none; }
.marquee-trilho { display: flex; gap: 12px; width: max-content; padding: 0 var(--margem) 4px; }
.depoimento {
  width: min(82vw, 340px);
  margin: 0;
  padding: 20px;
  border-radius: var(--raio);
  background: #fff;
  scroll-snap-align: start;
}
.depoimento p { margin: 0 0 14px; font-size: 1.0625rem; line-height: 1.45; }
.depoimento footer { display: flex; align-items: center; gap: .5em; font-size: .875rem; color: var(--texto-2); }
.depoimento cite { font-style: normal; font-weight: 600; color: var(--texto); }

/* -------------------------------------------------------------- delivery */
.entrega-conteudo { max-width: 640px; margin: 0 auto; }
.entrega-conteudo > .rotulo, .entrega-conteudo > h2 { text-align: center; }
.busca-rotulo { display: block; margin: 8px 0 8px; font-weight: 600; }
.busca-bairro .campo { background: var(--cinza); border-color: transparent; }
.busca-bairro .campo:focus { background: #fff; border-color: var(--texto); }
.bairro-resultado { min-height: 3em; margin: 12px 0; color: var(--texto-2); }
.bairro-resultado b { color: var(--texto); }
.bairro-resultado a { color: var(--marca); text-decoration: underline; }
.bairros-chips { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 26px; padding: 0; }
.bairros-chips button {
  min-height: 36px;
  padding: .3em .85em;
  border: 0;
  border-radius: 999px;
  background: var(--cinza);
  font-size: .875rem;
  font-weight: 500;
  cursor: pointer;
}
.bairros-chips button.ativo { background: var(--texto); color: #fff; }
.entrega-infos { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 0 0 26px; padding: 0; }
.entrega-infos li { display: flex; flex-direction: column; gap: 3px; padding: 16px; border-radius: var(--raio); background: var(--cinza); }
.entrega-infos strong { font-family: var(--fonte-titulo); font-weight: 600; letter-spacing: -.016em; }
.entrega-infos span { font-size: .875rem; color: var(--texto-2); }
.entrega-ctas { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.entrega-ctas .btn-grande { grid-column: 1 / -1; }
.entrega-ctas .btn-contorno-claro { border-color: var(--texto); color: var(--texto); }
.nota-rodape { margin: 16px 0 0; font-size: .8125rem; color: var(--texto-2); text-align: center; }
.taxas { margin: 0 0 26px; }
.taxas summary { min-height: 44px; display: flex; align-items: center; color: var(--marca); font-weight: 500; cursor: pointer; }
.tabela-taxas { width: 100%; border-collapse: collapse; }
.tabela-taxas th, .tabela-taxas td { padding: 10px 0; border-bottom: 1px solid var(--cinza-2); text-align: left; font-weight: 400; }
.tabela-taxas td { text-align: right; color: var(--texto-2); }

/* ------------------------------------------------------------ perguntas */
.faq { max-width: 640px; margin: 0 auto; border-radius: var(--raio); background: #fff; overflow: hidden; }
.faq-item + .faq-item { border-top: 1px solid var(--cinza-2); }
.faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 60px;
  padding: 14px 18px;
  list-style: none;
  cursor: pointer;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary h3 { margin: 0; font-size: 1.0625rem; line-height: 1.3; }
.faq-item summary i { position: relative; flex: none; width: 14px; height: 14px; }
.faq-item summary i::before, .faq-item summary i::after {
  content: ""; position: absolute; left: 0; right: 0; top: 6px; height: 2px; border-radius: 1px;
  background: var(--texto-2);
  transition: transform 320ms var(--ease-saida);
}
.faq-item summary i::after { transform: rotate(90deg); }
.faq-item[open] summary i::after { transform: rotate(0); }
.faq-resposta { padding: 0 18px 18px; color: var(--texto-2); }
.faq-resposta p { margin: 0; }

/* --------------------------------------------------------- mapa e visita */
.visite { display: grid; gap: 28px; }
.mapa {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  border-radius: var(--raio-lg);
  background: var(--cinza-2);
  isolation: isolate;
}
.mapa iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; pointer-events: none; }
.mapa-pino {
  position: absolute; left: 50%; top: 50%;
  width: 60px;
  transform: translate(-50%, -92%);
  filter: drop-shadow(0 6px 8px rgba(0, 0, 0, .25));
}
.mapa-pino img { width: 60px; height: 60px; }
.mapa-link { position: absolute; inset: 0; display: flex; align-items: flex-end; justify-content: center; padding-bottom: 16px; }
.mapa-link .btn { min-height: 40px; font-size: .9375rem; background: rgba(255, 255, 255, .95); color: var(--texto); box-shadow: 0 6px 18px -8px rgba(0, 0, 0, .35); }
.visite-info h2 { margin-bottom: .5em; }
.visite-endereco { margin: 0 0 .3em; font-family: var(--fonte-titulo); font-size: 1.25rem; font-weight: 600; line-height: 1.3; letter-spacing: -.016em; }
.visite-ref { color: var(--texto-2); }
.tabela-horas { width: 100%; margin: 18px 0 22px; border-collapse: collapse; }
.tabela-horas th, .tabela-horas td { padding: 12px 0; border-bottom: 1px solid var(--cinza-2); text-align: left; font-weight: 400; }
.tabela-horas td { text-align: right; color: var(--texto-2); }
.tabela-horas tr.hoje th, .tabela-horas tr.hoje td { color: var(--texto); font-weight: 600; }
.tabela-horas tr.hoje th::after { content: " · hoje"; font-weight: 400; color: var(--marca); }
.visite-ctas { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.visite-ctas .btn { padding-inline: .8em; }

/* ---------------------------------------------------------- chamada final */
.final { background: var(--preto); color: var(--texto-claro); text-align: center; }
.final-coracao { display: block; width: 116px; margin: 0 auto 20px; }
.final-titulo { max-width: 12em; margin: 0 auto .35em; font-size: clamp(2.25rem, 1.3rem + 5vw, 3.25rem); line-height: 1.04; letter-spacing: -.034em; }
.final .candy { color: var(--marca-claro); }
.final .script { color: var(--texto-claro-2); }
.final > p { color: var(--texto-claro-2); font-size: 1.125rem; }
.final .hero-ctas { flex-direction: column; align-items: stretch; max-width: 340px; margin: 26px auto 0; }

/* ---------------------------------------------------------------- rodapé */
.rodape {
  padding: 44px max(var(--margem), env(safe-area-inset-right)) calc(28px + env(safe-area-inset-bottom)) max(var(--margem), env(safe-area-inset-left));
  background: var(--cinza);
  color: var(--texto-2);
  font-size: .875rem;
}
.rodape-grade { display: grid; gap: 28px; }
.rodape-marca img { width: 150px; height: auto; }
.rodape-marca p { margin: 12px 0 16px; max-width: 28em; }
.rodape-bloco h2 { margin: 0 0 .6em; font-family: var(--fonte); font-size: .75rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--texto); }
.rodape-bloco p { margin: 0 0 .4em; }
.rodape-bloco ul { list-style: none; margin: 0; padding: 0; }
.rodape-bloco li a, .rodape-bloco p a { display: inline-flex; align-items: center; min-height: 36px; color: var(--texto); }
.rodape-horas { margin: 0; }
.rodape-horas div { display: flex; justify-content: space-between; padding: 6px 0; border-bottom: 1px solid var(--cinza-2); }
.rodape-horas dt { color: var(--texto); }
.rodape-horas dd { margin: 0; }
.rodape-base { display: grid; gap: 6px; margin-top: 28px; padding-top: 18px; border-top: 1px solid var(--linha); font-size: .75rem; }
.rodape-base p { margin: 0; }
.rodape-base a { text-decoration: underline; text-underline-offset: 2px; }
@media (min-width: 600px) { .rodape-grade { grid-template-columns: 1fr 1fr; } }

/* ------------------------------------------------ WhatsApp flutuante */
.barra-pedido {
  position: fixed;
  right: max(16px, env(safe-area-inset-right));
  bottom: calc(16px + env(safe-area-inset-bottom));
  z-index: 90;
  opacity: 0;
  transform: translateY(12px) scale(.9);
  pointer-events: none;
  transition: opacity 300ms var(--suave), transform 420ms var(--ease-saida);
}
.barra-pedido.visivel { opacity: 1; transform: none; pointer-events: auto; }
.barra-pedido .btn { display: none; }
.btn-redondo {
  display: grid;
  place-items: center;
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--zap);
  color: #fff;
  box-shadow: 0 10px 24px -8px rgba(0, 0, 0, .35);
}
.btn-redondo:active { transform: scale(.94); }
.menu-aberto .barra-pedido { opacity: 0; pointer-events: none; }

/* ------------------------------------------------------- páginas internas */
.pagina-topo { padding-top: calc(var(--altura-cabecalho) + 28px); padding-bottom: 40px; background: var(--branco); text-align: center; }
.pagina-topo--curta { padding-bottom: 24px; }
.migalhas { margin-bottom: 14px; font-size: .8125rem; color: var(--texto-2); }
.migalhas a { color: var(--marca); }
.pagina-topo h1 { max-width: 12em; margin-inline: auto; }
.pagina-topo > p { max-width: 30em; margin: 0 auto; font-size: 1.125rem; line-height: 1.42; color: var(--texto-2); }
.pagina-topo .hero-ctas { margin-top: 24px; }
.pagina-topo .btn-contorno-claro { border-color: var(--texto); color: var(--texto); }
/* a primeira folha das páginas internas vem logo abaixo do topo */
.pagina-topo + .folha { padding-top: 24px; }

.cardapio-abas {
  position: sticky;
  top: var(--altura-cabecalho);
  z-index: 20;
  display: flex;
  gap: 8px;
  margin: 0 calc(var(--margem) * -1) 28px;
  padding: 10px var(--margem);
  overflow-x: auto;
  scrollbar-width: none;
  background: rgba(255, 255, 255, .94);
  box-shadow: inset 0 -1px 0 var(--cinza-2);
}
.cardapio-abas::-webkit-scrollbar { display: none; }
.cardapio-abas a {
  flex: none;
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  padding: 0 14px;
  border-radius: 999px;
  background: var(--cinza);
  font-size: .875rem;
  font-weight: 500;
  white-space: nowrap;
}
.cardapio-abas a.ativo { background: var(--texto); color: #fff; }
.cat { margin: 0 auto 48px; max-width: 900px; scroll-margin-top: calc(var(--altura-cabecalho) + 64px); }
.cat-topo { margin-bottom: 18px; }
.cat-topo h2 { margin-bottom: .15em; font-size: 1.75rem; }
.cat-topo p { margin: 0; color: var(--texto-2); }
.itens { display: grid; gap: 14px; }
.itens .card-produto { width: auto; }
@media (min-width: 600px) { .itens { grid-template-columns: 1fr 1fr; } }
.lista-simples { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--cinza-2); }
.lista-simples li { display: flex; justify-content: space-between; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--cinza-2); }
.lista-simples li span:last-child { white-space: nowrap; font-weight: 600; }
.item-desc { display: block; margin-top: 2px; font-size: .875rem; color: var(--texto-2); }
.lista-simples--apos { margin-top: 24px; }
.cardapio-fim { margin-top: 28px; }
.fonte { font-size: .8125rem; color: var(--texto-2); }

.texto-longo { max-width: 38em; margin: 0 auto; font-size: 1.0625rem; line-height: 1.6; }
.texto-longo h2 { margin: 1.6em 0 .5em; font-size: 1.75rem; }
.texto-longo blockquote { margin: 1.6em 0; padding: 22px; border-radius: var(--raio); background: var(--cinza); font-family: var(--fonte-titulo); font-size: 1.25rem; font-weight: 600; line-height: 1.35; letter-spacing: -.016em; }
.texto-longo blockquote small { display: block; margin-top: 8px; font-family: var(--fonte); font-size: .8125rem; font-weight: 400; color: var(--texto-2); }

/* contato: canais em cartões */
.canais-grade { list-style: none; display: grid; gap: 10px; max-width: 900px; margin: 0 auto; padding: 0; }
@media (min-width: 600px) { .canais-grade { grid-template-columns: 1fr 1fr; } }
.canal {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  column-gap: 14px;
  align-items: center;
  padding: 16px;
  border-radius: var(--raio);
  background: var(--cinza);
  color: var(--texto);
}
.canal-icone { grid-row: 1 / 3; display: grid; place-items: center; width: 44px; height: 44px; border-radius: var(--raio-sm); background: #fff; color: var(--marca); }
.canal-icone svg { width: 22px; height: 22px; }
.canal strong { font-family: var(--fonte-titulo); font-size: 1.0625rem; font-weight: 600; letter-spacing: -.016em; }
.canal > span:last-child { font-size: .875rem; color: var(--texto-2); }
.canal-destaque { background: var(--zap); color: #fff; }
.canal-destaque .canal-icone { background: rgba(255, 255, 255, .18); color: #fff; }
.canal-destaque > span:last-child { color: rgba(255, 255, 255, .85); }

/* 404 */
.pagina-erro { display: grid; place-items: center; min-height: 80svh; padding: calc(var(--altura-cabecalho) + 32px) var(--margem) 64px; text-align: center; }
.pagina-erro img { width: 120px; margin: 0 auto 12px; }
.pagina-erro h1 { font-size: 4.5rem; }
.pagina-erro .hero-sub { margin: 0 auto 18px; }

/* ================================================================ MOVIMENTO
   Revelação curta ao rolar: as classes só existem se o mobile.js as pôs
   (sem JavaScript tudo aparece). Só transform e opacity. */
/* translateY (2D): translate3d criava uma camada de composição para cada
   elemento ainda escondido (eram ~100) */
.revelar { opacity: 0; transform: translateY(28px); transition: none; }
.revelar.visivel { opacity: 1; transform: none; transition: opacity 450ms var(--suave), transform 650ms var(--ease-saida); }
.secao-topo.revelar { opacity: 1; transform: none; }
.secao-topo.revelar > * { opacity: 0; transform: translateY(18px); }
.secao-topo.revelar.visivel > * { opacity: 1; transform: none; transition: opacity 500ms var(--suave), transform 700ms var(--ease-saida); }
.secao-topo.revelar.visivel > :nth-child(2) { transition-delay: 70ms; }
.secao-topo.revelar.visivel > :nth-child(n+3) { transition-delay: 140ms; }

/* entrada leve do topo das páginas (CSS puro); o título fica firme */
@keyframes surgir { from { opacity: 0; transform: translateY(16px); } }
@keyframes levitar { to { translate: 0 -8px; } }
@media (prefers-reduced-motion: no-preference) {
  .hero-kicker, .hero-ctas, .hero-google, .pagina-topo .hero-ctas, .migalhas { animation: surgir 460ms var(--ease-saida) backwards; }
  .hero-ctas { animation-delay: 80ms; }
  .hero-google { animation-delay: 140ms; }
  .final.em-tela .final-coracao, .pagina-erro img { animation: levitar 3s ease-in-out infinite alternate; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .revelar, .secao-topo.revelar > * { opacity: 1; transform: none; }
  .hero-pin { height: auto; }
  .hero-quadro { position: relative; height: auto; min-height: 100svh; }
}