/* Grupo De Origem — landing institucional
   Tokens do grupo-origem-design-system (cacau, mel, creme, tinta). Cor sempre chapada, sem degradê.
   Cada [data-scene] recebe --p (0 → 1) do main.js conforme a rolagem; o CSS faz o resto. */

@font-face { font-family: "Jost"; font-weight: 500; font-style: normal; font-display: swap; src: url("/assets/fonts/jost-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Jost"; font-weight: 600; font-style: normal; font-display: swap; src: url("/assets/fonts/jost-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Jost"; font-weight: 700; font-style: normal; font-display: swap; src: url("/assets/fonts/jost-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Figtree"; font-weight: 400; font-style: normal; font-display: swap; src: url("/assets/fonts/figtree-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Figtree"; font-weight: 600; font-style: normal; font-display: swap; src: url("/assets/fonts/figtree-latin-600-normal.woff2") format("woff2"); }

:root {
  --cacau: #4F381C;
  --cacau-fundo: #3B2912;
  --mel: #F7C384;
  --mel-claro: #FDF0DE;
  --creme: #FAF6F0;
  --areia: #EBE3D8;
  --terra: #6B5A46;
  --tinta: #1B1309;
  --laranja: #DF6A2D;
  --pomodoro: #8A2A1E;
  --foco: #B5651D;
  --casa: var(--mel);            /* cor de destaque da casa (a Forneria troca) */

  --font-display: "Jost", "Avenir Next", "Century Gothic", sans-serif;
  --font-texto: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;

  --gutter: clamp(20px, 5vw, 72px);
  --max: 1200px;
  --bar-h: 68px;
  --ease: cubic-bezier(.3, .7, .4, 1);
  --vh: 100vh;
  --p: 0;
  --sp: 0;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--creme);
  color: var(--tinta);
  font-family: var(--font-texto);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3, p, ul, ol, dl, dd { margin: 0; }
ul, ol { padding: 0; list-style: none; }
:focus-visible { outline: 2px solid var(--foco); outline-offset: 2px; border-radius: 4px; }
.em-cacau :focus-visible, .em-tinta :focus-visible { outline-color: var(--mel); }

.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip-link { position: fixed; left: 12px; top: -60px; z-index: 100; padding: 10px 16px; background: var(--mel); color: var(--tinta); border-radius: 999px; font-weight: 600; text-decoration: none; }
.skip-link:focus { top: 12px; }

.wrap { width: min(100% - 2 * var(--gutter), var(--max)); margin-inline: auto; }

/* ---------- Tipografia ---------- */
.rotulo {
  font-family: var(--font-display);
  font-size: 12px;
  line-height: 16px;
  font-weight: 600;
  letter-spacing: .26em;
  text-transform: uppercase;
}
.rotulo--barra { display: inline-flex; align-items: center; gap: 12px; }
.rotulo--barra::before { content: ""; width: 34px; height: 6px; background: linear-gradient(90deg, var(--mel) 50%, currentColor 50%); }
/* Sobre o mel, a metade mel da barra vira creme (como no negativo da marca) */
.em-mel .rotulo--barra::before { background: linear-gradient(90deg, var(--creme) 50%, var(--cacau) 50%); }
.titulo {
  font-family: var(--font-display);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .02em;
  line-height: 1.02;
  font-size: clamp(34px, 5.4vw, 76px);
  text-wrap: balance;
}
.titulo--md { font-size: clamp(28px, 3.6vw, 48px); line-height: 1.06; }
.texto-lg { font-size: clamp(18px, 1.5vw, 21px); line-height: 1.5; max-width: 34em; text-wrap: pretty; }
.italiano { font-family: var(--font-display); font-weight: 500; font-style: normal; letter-spacing: .3em; text-transform: lowercase; font-size: 13px; }

/* ---------- Botões (pílula, rótulo em caixa alta, como o .to-btn do design system) ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 0 26px;
  border: 2px solid var(--cacau); border-radius: 999px;
  background: var(--cacau); color: #fff;
  font-family: var(--font-display); font-size: 13px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; text-decoration: none; white-space: nowrap;
  cursor: pointer;
  transition: background-color .15s, color .15s, border-color .15s, transform .2s var(--ease);
}
.btn:active { transform: scale(.98); }
.btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s var(--ease); }
.btn:hover svg { transform: translateX(3px); }
.btn:hover { background: var(--tinta); border-color: var(--tinta); }
.btn--mel { background: var(--mel); border-color: var(--mel); color: var(--tinta); }
.btn--mel:hover { background: #fff; border-color: #fff; color: var(--tinta); }
.btn--contorno { background: transparent; color: var(--tinta); border-color: var(--tinta); }
.btn--contorno:hover { background: var(--tinta); color: var(--creme); }
.em-cacau .btn--contorno, .em-tinta .btn--contorno { color: var(--creme); border-color: var(--creme); }
.em-cacau .btn--contorno:hover, .em-tinta .btn--contorno:hover { background: var(--creme); color: var(--tinta); border-color: var(--creme); }
.btn--sm { min-height: 38px; padding: 0 18px; font-size: 12px; }
.acoes { display: flex; flex-wrap: wrap; gap: 12px; }

.link-seta { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-display); font-size: 13px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; text-decoration: none; padding: 6px 0; border-bottom: 2px solid currentColor; }
.link-seta svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s var(--ease); }
.link-seta:hover svg { transform: translateX(4px); }

/* ---------- Fundos ---------- */
.em-cacau { background: var(--cacau); color: var(--creme); }
.em-mel { background: var(--mel); color: var(--tinta); }
.em-mel-claro { background: var(--mel-claro); color: var(--tinta); }
.em-creme { background: var(--creme); color: var(--tinta); }
.em-tinta { background: var(--tinta); color: var(--creme); }
/* Padrão de cruzes da marca (brand/padroes), em mel bem baixo sobre o cacau */
.cruzes { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='192'%3E%3Cpath d='M15 48h18M24 39v18M63 144h18M72 135v18' fill='none' stroke='%23F7C384' stroke-opacity='.16' stroke-width='1.6'/%3E%3C/svg%3E"); }

/* ---------- Barra de progresso (a barra mel da marca) e topo ---------- */
.progress { position: fixed; inset: 0 0 auto 0; height: 3px; z-index: 60; pointer-events: none; }
.progress__bar { display: block; height: 100%; background: var(--mel); transform-origin: 0 50%; transform: scaleX(var(--sp)); }
body[data-bar="mel"] .progress__bar { background: var(--cacau); }

.topbar { position: fixed; inset: 0 0 auto 0; z-index: 50; height: var(--bar-h); color: var(--creme); background: var(--cacau); transition: background-color .25s, color .25s; }
.topbar__inner { height: 100%; display: flex; align-items: center; gap: 28px; width: min(100% - 2 * var(--gutter), 1320px); margin-inline: auto; }
.brand { position: relative; display: block; height: 34px; aspect-ratio: 781 / 186; flex: none; }
.brand img { position: absolute; inset: 0; width: 100%; height: 100%; transition: opacity .25s; }
.brand .brand__tinta { opacity: 0; }
.topbar__nav { display: flex; gap: 26px; margin-left: auto; }
.topbar__nav a { font-family: var(--font-display); font-size: 12px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; text-decoration: none; padding: 8px 0; border-bottom: 2px solid transparent; transition: border-color .15s; }
.topbar__nav a:hover, .topbar__nav a.is-active { border-color: currentColor; }
.topbar__actions { display: flex; align-items: center; gap: 12px; }
.topbar .btn { background: var(--mel); border-color: var(--mel); color: var(--tinta); }
.topbar .btn:hover { background: #fff; border-color: #fff; }
.topbar__menu { display: none; margin-left: auto; width: 44px; height: 44px; border: 0; background: none; color: inherit; cursor: pointer; padding: 0; }
.topbar__menu span { display: block; width: 24px; height: 2px; margin: 6px auto; background: currentColor; transition: transform .2s var(--ease); }
.topbar__menu[aria-expanded="true"] span:first-child { transform: translateY(4px) rotate(45deg); }
.topbar__menu[aria-expanded="true"] span:last-child { transform: translateY(-4px) rotate(-45deg); }

body[data-bar="mel"] .topbar { background: var(--mel); color: var(--tinta); }
body[data-bar="creme"] .topbar { background: var(--creme); color: var(--tinta); }
body[data-bar="mel-claro"] .topbar { background: var(--mel-claro); color: var(--tinta); }
body[data-bar="tinta"] .topbar { background: var(--tinta); }
body:is([data-bar="mel"], [data-bar="creme"], [data-bar="mel-claro"]) .brand .brand__tinta { opacity: 1; }
body:is([data-bar="mel"], [data-bar="creme"], [data-bar="mel-claro"]) .brand .brand__negativo { opacity: 0; }
body:is([data-bar="mel"], [data-bar="creme"], [data-bar="mel-claro"]) .topbar .btn { background: var(--cacau); border-color: var(--cacau); color: #fff; }
body:is([data-bar="mel"], [data-bar="creme"], [data-bar="mel-claro"]) .topbar .btn:hover { background: var(--tinta); border-color: var(--tinta); }

.menu-mobile { position: fixed; inset: var(--bar-h) 0 0 0; z-index: 49; display: flex; flex-direction: column; gap: 4px; padding: 24px var(--gutter) 32px; background: var(--cacau); color: var(--creme); overflow: auto; }
.menu-mobile[hidden] { display: none; }
.menu-mobile a:not(.btn) { font-family: var(--font-display); font-weight: 600; font-size: 26px; letter-spacing: .04em; text-transform: uppercase; text-decoration: none; padding: 14px 0; border-bottom: 1px solid rgba(250, 246, 240, .18); }
.menu-mobile .btn { margin-top: 24px; }

/* ---------- Cenas fixas ---------- */
.scene { position: relative; height: calc(var(--len, 2) * var(--vh)); }
.stage { position: sticky; top: 0; height: var(--vh); overflow: hidden; }

/* 01 · Abertura: a barra da marca (mel + creme) sobe do rodapé e toma a tela */
.hero { background: var(--mel); } /* a emenda com a seção seguinte nunca mostra o cacau */
.hero .stage { display: grid; place-items: center; padding: calc(var(--bar-h) + 24px) var(--gutter) 64px; }
.hero__content {
  position: relative; z-index: 1;
  display: grid; justify-items: center; gap: clamp(18px, 3vh, 34px); text-align: center;
  transform: translate3d(0, calc(var(--p) * -22vh), 0);
  opacity: calc(1 - var(--p) * 1.9);
}
.hero__logo { width: clamp(220px, 30vw, 430px); aspect-ratio: 618 / 328; }
.hero__logo--h { aspect-ratio: 781 / 186; width: clamp(260px, 40vw, 560px); }
.hero h1 { font-size: clamp(30px, 4.6vw, 64px); max-width: 17em; }
.hero .texto-lg { color: rgba(250, 246, 240, .82); max-width: 30em; }
.hero__lugares { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 22px; color: var(--mel); }
.hero__lugares li + li::before { content: ""; display: inline-block; width: 5px; height: 5px; margin-right: 22px; border-radius: 50%; background: currentColor; vertical-align: middle; }
.hero .acoes { justify-content: center; }
.hero__wipe {
  --w: clamp(0, calc((var(--p) - .08) * 1.2), 1);
  position: absolute; inset: auto 0 0 0; z-index: 2;
  height: calc(12px + (100% - 12px) * var(--w));
  display: flex; pointer-events: none;
}
.hero__wipe i:first-child { width: calc(50% + 50% * var(--w)); background: var(--mel); }
.hero__wipe i:last-child { flex: 1; background: var(--creme); }
.hero__dica { position: absolute; left: 50%; bottom: 34px; z-index: 1; transform: translateX(-50%); color: rgba(250, 246, 240, .6); opacity: calc(1 - var(--p) * 8); }

/* A entrada da abertura (só uma vez, ao carregar) */
.js .hero__content > * { animation: subir .7s var(--ease) both; animation-delay: calc(var(--d, 0) * 90ms + 120ms); }
@keyframes subir { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

/* 02 · Manifesto: o texto acende palavra por palavra */
.manifesto .stage { display: grid; place-items: center; padding: var(--bar-h) var(--gutter) 40px; }
.manifesto__inner { display: grid; gap: 28px; max-width: 1040px; }
.manifesto__texto { font-family: var(--font-display); font-weight: 500; font-size: clamp(26px, 4.1vw, 58px); line-height: 1.14; letter-spacing: .005em; text-wrap: pretty; }
.js .manifesto__texto .w { opacity: calc(.16 + .84 * clamp(0, calc(var(--p) * (var(--n) + 6) - var(--i)), 1)); }
.manifesto__texto .w--grad { color: var(--cacau); font-weight: 700; }

/* Faixa de pratos: anda só com a rolagem (nada de loop parado) */
.marquees { padding: clamp(36px, 6vw, 72px) 0; overflow: hidden; border-block: 1px solid var(--areia); }
.marquee ul { display: flex; width: max-content; will-change: transform; }
.marquee li { display: flex; align-items: center; font-family: var(--font-display); font-weight: 600; font-size: clamp(30px, 5vw, 68px); line-height: 1.2; letter-spacing: .02em; text-transform: uppercase; white-space: nowrap; color: var(--cacau); }
.marquee li::after { content: ""; width: .7em; height: .14em; margin: 0 .5em; background: linear-gradient(90deg, var(--mel) 50%, var(--cacau) 50%); }
.marquee + .marquee li { color: transparent; -webkit-text-stroke: 1.4px var(--terra); }

/* 03 · As casas: trilho horizontal */
.track .stage { display: flex; align-items: center; padding-top: var(--bar-h); }
.track__rail { display: flex; align-items: stretch; gap: clamp(16px, 2vw, 28px); padding-inline: max(var(--gutter), calc((100vw - var(--max)) / 2)); transform: translate3d(calc(var(--p) * -1 * var(--shift, 0px)), 0, 0); will-change: transform; }
.track__intro { flex: none; width: min(80vw, 400px); display: grid; align-content: center; gap: 22px; padding-right: 24px; }
.casa {
  flex: none; width: min(84vw, 620px); min-height: min(66vh, 600px);
  display: grid; grid-template-rows: auto 1fr auto; gap: 28px;
  padding: clamp(24px, 3vw, 44px); border-radius: 28px; text-decoration: none;
  transition: transform .25s var(--ease);
}
a.casa:hover { transform: translateY(-4px); }
.casa__topo { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.casa__num { font-family: var(--font-display); font-weight: 600; font-size: 14px; letter-spacing: .2em; }
.casa__logo { align-self: center; width: min(100%, 330px); aspect-ratio: 618 / 328; }
.casa__pe { display: grid; gap: 16px; }
.casa__pe p { max-width: 30em; }
.casa__lugares { display: flex; flex-wrap: wrap; gap: 8px; }
.pilula { display: inline-flex; align-items: center; min-height: 30px; padding: 0 14px; border-radius: 999px; border: 1.5px solid currentColor; font-family: var(--font-display); font-size: 12px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; white-space: nowrap; }
.casa--trattoria { background: var(--cacau); color: var(--creme); }
.casa--forneria { background: var(--laranja); color: var(--tinta); }
.casa--cozinha { background: var(--mel-claro); color: var(--tinta); border: 1.5px solid var(--mel); }

/* Números ("sem pressa") */
.numeros { padding: clamp(72px, 11vw, 150px) 0; }
.numeros__topo { display: grid; gap: 20px; margin-bottom: clamp(40px, 6vw, 80px); max-width: 780px; }
.numeros__grade { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 3vw, 44px); }
.numero { display: grid; gap: 10px; padding-top: 22px; border-top: 6px solid var(--cacau); }
.numero strong { font-family: var(--font-display); font-weight: 700; font-size: clamp(64px, 10vw, 148px); line-height: .9; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.numero strong small { font-size: .3em; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; margin-left: .25em; }
.numero h3 { font-family: var(--font-display); font-weight: 600; font-size: 20px; letter-spacing: .06em; text-transform: uppercase; }
.numero p { color: var(--cacau); max-width: 24em; }

/* Cardápio em passos (a seção ativa troca conforme a rolagem) */
.steps .stage { display: grid; align-items: center; padding: calc(var(--bar-h) + 16px) 0 32px; }
.steps__grade { display: grid; grid-template-columns: minmax(260px, 5fr) 7fr; gap: clamp(28px, 5vw, 88px); align-items: center; }
.steps__lado { display: grid; gap: 26px; }
.steps__lista { display: grid; }
.steps__lista li { position: relative; padding: 9px 0 9px 26px; font-family: var(--font-display); font-weight: 600; font-size: clamp(20px, 2.1vw, 30px); letter-spacing: .04em; text-transform: uppercase; color: rgba(27, 19, 9, .32); transition: color .25s, padding .25s var(--ease); }
.steps__lista li::before { content: ""; position: absolute; left: 0; top: 50%; width: 0; height: 6px; margin-top: -3px; background: linear-gradient(90deg, var(--mel) 50%, var(--cacau) 50%); transition: width .25s var(--ease); }
.steps__lista li.is-active { color: var(--tinta); padding-left: 52px; }
.steps__lista li.is-active::before { width: 38px; }
.steps__paineis { position: relative; min-height: min(70vh, 600px); }
.carta { position: absolute; inset: 0; display: grid; grid-template-rows: auto 1fr; gap: 22px; padding: clamp(24px, 3vw, 44px); background: #fff; border: 1px solid var(--areia); border-radius: 24px; opacity: 0; transform: translateY(18px); transition: opacity .3s, transform .35s var(--ease); pointer-events: none; }
.carta.is-active { opacity: 1; transform: none; pointer-events: auto; }
.carta__topo { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding-bottom: 18px; border-bottom: 1px solid var(--areia); }
.carta__topo h3 { font-family: var(--font-display); font-weight: 700; font-size: clamp(24px, 2.6vw, 36px); letter-spacing: .03em; text-transform: uppercase; }
.carta__topo span { color: var(--terra); }
.carta dl { display: grid; align-content: space-evenly; gap: 16px; }
.carta dt { font-family: var(--font-display); font-weight: 600; font-size: clamp(17px, 1.5vw, 21px); letter-spacing: .02em; }
.carta dd { color: var(--terra); font-size: 16px; line-height: 1.45; max-width: 46em; }

/* Blocos de texto (Forneria) */
.blocos { padding: clamp(72px, 10vw, 140px) 0; }
.blocos__topo { display: grid; gap: 20px; max-width: 760px; margin-bottom: clamp(36px, 5vw, 64px); }
.blocos__grade { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 2vw, 28px); }
.bloco { display: grid; align-content: start; gap: 14px; padding: clamp(22px, 2.6vw, 36px); border-radius: 24px; background: #fff; border: 1px solid var(--areia); }
.bloco__num { font-family: var(--font-display); font-weight: 700; font-size: 44px; line-height: 1; color: var(--casa); }
.bloco h3 { font-family: var(--font-display); font-weight: 600; font-size: 22px; letter-spacing: .05em; text-transform: uppercase; }
.bloco p { color: var(--terra); }

/* Onde estamos */
.onde { padding: clamp(72px, 10vw, 140px) 0; }
.onde__topo { display: grid; gap: 20px; margin-bottom: clamp(32px, 5vw, 64px); max-width: 760px; }
.unidades { display: grid; }
.unidade { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 20px clamp(24px, 4vw, 64px); align-items: center; padding: clamp(26px, 3.4vw, 44px) 0; border-top: 1px solid rgba(250, 246, 240, .22); }
.unidade:last-child { border-bottom: 1px solid rgba(250, 246, 240, .22); }
.em-creme .unidade, .em-mel-claro .unidade { border-color: var(--areia); }
.unidade__nome { display: grid; gap: 8px; }
.unidade__nome h3 { font-family: var(--font-display); font-weight: 600; font-size: clamp(30px, 4vw, 56px); line-height: 1; letter-spacing: .02em; text-transform: uppercase; }
.unidade__nome .rotulo { color: var(--mel); }
.em-creme .unidade__nome .rotulo, .em-mel-claro .unidade__nome .rotulo { color: var(--cacau); }
.unidade__corpo { display: grid; gap: 16px; }
.unidade__info { display: grid; gap: 4px; opacity: .86; }

/* Convite (time) e fecho */
.convite { padding: clamp(72px, 10vw, 140px) 0; }
.convite__grade { display: grid; grid-template-columns: 1fr auto; gap: 32px clamp(32px, 6vw, 96px); align-items: end; }
.convite__texto { display: grid; gap: 22px; }
.final { padding: clamp(84px, 12vw, 170px) 0; text-align: center; }
.final__inner { display: grid; justify-items: center; gap: 26px; }
.final .acoes { justify-content: center; }
.final .texto-lg { opacity: .84; }

/* Rodapé */
.footer { padding: clamp(48px, 6vw, 80px) 0 32px; }
.footer__grade { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 40px clamp(24px, 5vw, 80px); }
.footer__logo { width: 190px; aspect-ratio: 781 / 186; margin-bottom: 18px; }
.footer p { color: rgba(250, 246, 240, .7); max-width: 26em; }
.footer h2 { color: var(--mel); margin-bottom: 16px; }
.footer li + li { margin-top: 10px; }
.footer a { text-decoration: none; border-bottom: 1px solid transparent; transition: border-color .15s; }
.footer a:hover { border-color: currentColor; }
.footer__base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; margin-top: clamp(36px, 5vw, 64px); padding-top: 22px; border-top: 1px solid rgba(250, 246, 240, .18); font-size: 14px; color: rgba(250, 246, 240, .6); }

/* Revelação simples das seções sem cena fixa */
.js .io { opacity: 0; transform: translateY(22px); transition: opacity .6s, transform .6s var(--ease); transition-delay: calc(var(--d, 0) * 80ms); }
.js .io.in { opacity: 1; transform: none; }

/* A Forneria troca a cor de destaque */
[data-casa="forneria"] { --casa: var(--laranja); }
[data-casa="forneria"] .hero__lugares { color: var(--mel); }
[data-casa="forneria"] .numero { border-top-color: var(--laranja); }

/* ---------- Telas menores ---------- */
@media (max-width: 980px) {
  .topbar__nav, .topbar__actions { display: none; }
  .topbar__menu { display: block; }
}
@media (max-width: 860px) {
  body { font-size: 16px; }
  /* Trilho e passos deixam de ser cenas fixas: viram blocos empilhados */
  .scene.track, .scene.steps { height: auto; }
  .track .stage, .steps .stage { position: static; height: auto; overflow: visible; }
  .track .stage { padding: 72px 0; }
  .track__rail { flex-direction: column; transform: none; padding-inline: var(--gutter); }
  .track__intro, .casa { width: 100%; }
  .casa { min-height: 0; }
  .casa__logo { width: min(70%, 260px); margin-block: 12px; }
  .steps .stage { padding: 72px 0; }
  .steps__grade { grid-template-columns: 1fr; }
  .steps__lista { display: none; }
  .steps__paineis { min-height: 0; display: grid; gap: 16px; }
  .carta { position: static; opacity: 1; transform: none; pointer-events: auto; }
  .numeros__grade, .blocos__grade { grid-template-columns: 1fr; }
  .unidade { grid-template-columns: 1fr; }
  .convite__grade { grid-template-columns: 1fr; }
  .footer__grade { grid-template-columns: 1fr; }
  .hero__dica { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; }
  .js .io { opacity: 1; transform: none; }
  .hero__content { transform: none; }
}