/* =========================================================
   Supermercado Bandeirantes — landing em cenas
   Creme = o começo (passado) · Verde = a estrutura de hoje
   Laranja = preço baixo e ação (só no que se clica)

   Sem JS, com movimento reduzido ou internet fraca, tudo aqui
   aparece no estado final, em fluxo normal. As regras com .m
   (adicionada pelo main.js) ligam as cenas presas na tela.
   ========================================================= */

/* Fontes hospedadas junto com o site (subconjunto latino, com todos os acentos do português). */
@font-face {
  font-family: "Bricolage Grotesque";
  font-style: normal;
  font-weight: 400 800;
  font-stretch: 75% 100%;
  font-display: swap;
  src: url("../fonts/bricolage-grotesque-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Fraunces";
  font-style: italic;
  font-weight: 400 600;
  font-display: swap;
  src: url("../fonts/fraunces-italic-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --arroz: #F4EDE0;
  --papel: #FBF7EE;
  --palha: #CDB387;
  --palha-e: #A88A5A;
  --madeira: #B98A55;
  --verde: #124216;
  --verde-e: #0A2E0E;
  --verde-c: #1E5B25;
  --folha: #2F7A36;
  --laranja: #EF4F1D;
  --tinta: #101411;
  --linha: #13301A;

  --fg: var(--tinta);
  --muted: #48504A;
  --k: var(--verde);
  --kn: #B23A0E;

  --f-disp: "Bricolage Grotesque", "Arial Black", "Segoe UI Black", system-ui, sans-serif;
  --f-txt: "Bricolage Grotesque", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --f-serif: "Fraunces", Georgia, "Times New Roman", serif;

  --gut: clamp(16px, 5vw, 72px);
  --hdr: 68px;
  --max: 1320px;
}

@media (max-width: 760px) {
  :root { --hdr: 60px; }
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
html, body { overflow-x: clip; }
body {
  margin: 0;
  background: var(--arroz);
  color: var(--fg);
  font: 400 1.0625rem/1.6 var(--f-txt);
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; height: auto; }
svg { display: block; }
a { color: inherit; }
h1, h2, h3, p, blockquote, figure, ul, ol, dl, dd, address { margin: 0; }
ul, ol { padding: 0; list-style: none; }
address { font-style: normal; }
button { font: inherit; }
.sr {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.defs { position: absolute; width: 0; height: 0; overflow: hidden; }
:focus-visible { outline: 3px solid var(--laranja); outline-offset: 3px; border-radius: 6px; }
.skip {
  position: fixed; left: 12px; top: -80px; z-index: 200;
  background: var(--laranja); color: var(--tinta); padding: 12px 18px;
  border-radius: 12px; font-weight: 700; text-decoration: none;
}
.skip:focus { top: 12px; }

/* seções do "presente" (verde) */
.hero, .cultura, .hoje, .contam, .visite, .rodape {
  --fg: var(--arroz);
  --muted: rgba(244, 237, 224, .8);
  --k: var(--arroz);
  --kn: var(--laranja);
  color: var(--fg);
}

/* ---------- tipografia ---------- */
.kicker {
  display: flex; align-items: center; gap: .75em;
  font: 700 .8125rem/1.2 var(--f-txt);
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--k);
}
.kicker::before { content: ""; flex: none; width: 28px; height: 2px; background: var(--laranja); }
.kicker__n { color: var(--kn); }
.kicker--claro { --k: var(--arroz); --kn: var(--laranja); }

.t2 {
  font-family: var(--f-disp); font-weight: 800; font-stretch: 82%;
  font-size: clamp(2.1rem, 5vw, 4.6rem); line-height: .98; letter-spacing: -.02em;
  margin-top: .45em; text-wrap: balance;
}
.t2--m { font-size: clamp(1.9rem, 4vw, 3.5rem); }
.t3 {
  font-family: var(--f-disp); font-weight: 800; font-stretch: 82%;
  font-size: clamp(2rem, 4.4vw, 3.8rem); line-height: 1; letter-spacing: -.02em;
  margin-top: .4em; text-wrap: balance;
}
.lead { font-size: clamp(1.1rem, 1.6vw, 1.35rem); line-height: 1.5; color: var(--muted); max-width: 38ch; }

@media (max-width: 760px) {
  .t2 { font-size: clamp(1.8rem, 7.6vw, 2.5rem); }
  .t2--m { font-size: clamp(1.65rem, 6.8vw, 2.2rem); }
}

/* ---------- botões ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55em;
  min-height: 48px; padding: .85em 1.35em; border-radius: 999px; border: 0;
  font: 700 1rem/1.1 var(--f-txt); letter-spacing: .01em; text-decoration: none;
  cursor: pointer; transition: background-color .2s, transform .2s, color .2s;
}
.btn:active { transform: scale(.97); }
.btn--oferta { background: var(--laranja); color: var(--tinta); }
.btn--oferta:hover { background: #FF6A38; }
.btn--linha { background: transparent; color: var(--verde); box-shadow: inset 0 0 0 2px currentColor; }
.btn--linha:hover { background: rgba(18, 66, 22, .08); }
.btn--sm { min-height: 40px; padding: .6em 1.05em; font-size: .85rem; letter-spacing: .1em; text-transform: uppercase; }

/* ---------- topo ---------- */
.topo {
  position: fixed; inset: 0 0 auto; z-index: 50; height: var(--hdr);
  display: flex; align-items: center; gap: clamp(12px, 2vw, 28px);
  padding-inline: var(--gut); color: var(--arroz);
  transition: background-color .35s, box-shadow .35s;
}
.topo.is-solido { background: var(--verde-e); box-shadow: 0 1px 0 rgba(244, 237, 224, .08); }
.marca { display: flex; align-items: center; gap: 10px; text-decoration: none; margin-right: auto; }
.marca img { width: 46px; height: 46px; }
.marca__txt { display: grid; font: 700 .66rem/1.1 var(--f-txt); letter-spacing: .16em; text-transform: uppercase; }
.marca__txt b { font-weight: 800; font-size: .98rem; letter-spacing: .05em; }
.nav { display: flex; gap: clamp(16px, 2.2vw, 30px); }
.nav a { font-weight: 600; font-size: .95rem; text-decoration: none; text-underline-offset: 7px; }
.nav a:hover { text-decoration: underline; text-decoration-color: var(--laranja); text-decoration-thickness: 2px; }
.progresso { display: flex; align-items: center; gap: 10px; }
.progresso svg { width: 22px; height: 28px; overflow: visible; }
#pg-fill { fill: var(--palha); }
.pg-line { fill: none; stroke: currentColor; stroke-width: 8; stroke-linejoin: round; }
.pg-neck { fill: currentColor; }
.progresso__cap { display: flex; gap: 8px; font: 700 .74rem/1 var(--f-txt); letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; }
.progresso__cap b { color: var(--laranja); font-variant-numeric: tabular-nums; }
.menu-btn { display: none; }

@media (max-width: 1080px) {
  .progresso__cap span { display: none; }
}
@media (max-width: 900px) {
  .nav {
    position: fixed; inset: var(--hdr) 0 auto; display: grid; gap: 0;
    background: var(--verde-e); padding: 4px var(--gut) 24px;
    transform: translateY(-110%); visibility: hidden;
    transition: transform .35s cubic-bezier(.3, .7, .2, 1), visibility 0s .35s;
    box-shadow: 0 20px 40px rgba(0, 0, 0, .25);
  }
  .nav.is-aberto { transform: none; visibility: visible; transition-delay: 0s; }
  .nav a { padding: 16px 0; border-bottom: 1px solid rgba(244, 237, 224, .12); font-size: 1.15rem; }
  .topo.menu-aberto { background: var(--verde-e); }
  .menu-btn {
    display: grid; place-content: center; gap: 6px; width: 44px; height: 44px;
    border: 0; border-radius: 12px; background: rgba(244, 237, 224, .1); color: inherit; cursor: pointer;
  }
  .menu-btn span { display: block; width: 20px; height: 2px; background: currentColor; transition: transform .25s; }
  .menu-btn[aria-expanded="true"] span:first-child { transform: translateY(4px) rotate(45deg); }
  .menu-btn[aria-expanded="true"] span:last-child { transform: translateY(-4px) rotate(-45deg); }
}
@media (max-width: 460px) {
  .marca__txt { display: none; }
  .marca img { width: 42px; height: 42px; }
  .topo { gap: 10px; }
}

/* ---------- carregamento ---------- */
.loader { display: none; }
.intro .loader {
  display: flex; position: fixed; inset: 0; z-index: 100;
  align-items: center; justify-content: center;
  animation: ld-seguranca .01s 5s forwards;
}
@keyframes ld-seguranca { to { opacity: 0; visibility: hidden; } }
.loader::before {
  content: ""; position: absolute; inset: 0; background: var(--arroz);
  transition: transform .85s cubic-bezier(.75, 0, .2, 1);
}
.loader.is-saindo::before { transform: translateY(-100%); }
.loader__box { position: relative; display: grid; justify-items: center; gap: 12px; }
.loader__sack { width: clamp(118px, 15vw, 164px); height: auto; overflow: visible; transform-origin: 0 0; }
.loader.is-saindo .loader__sack { transition: transform .85s cubic-bezier(.75, 0, .2, 1); }
.ld-bg { fill: var(--papel); }
.ld-line {
  fill: none; stroke: var(--linha); stroke-width: 3; stroke-linejoin: round;
  stroke-dasharray: 1; stroke-dashoffset: 1;
  animation: ld-traco .9s cubic-bezier(.6, 0, .2, 1) .05s forwards;
}
@keyframes ld-traco { to { stroke-dashoffset: 0; } }
.ld-neck { opacity: 0; transform: translateY(-28px); transition: transform .45s cubic-bezier(.3, 1.6, .5, 1), opacity .2s; }
.ld-label { opacity: 0; transform: scale(1.6); transform-origin: 60px 97px; transition: transform .4s cubic-bezier(.3, 1.5, .5, 1) .12s, opacity .2s .12s; }
.loader.is-cheio .ld-neck, .loader.is-cheio .ld-label { opacity: 1; transform: none; }
.loader__num {
  font: 800 clamp(2.8rem, 6vw, 4.4rem)/1 var(--f-disp); font-stretch: 75%;
  color: var(--verde); font-variant-numeric: tabular-nums; min-width: 3ch; text-align: center;
}
.loader__cap { font: 700 .72rem/1 var(--f-txt); letter-spacing: .2em; text-transform: uppercase; color: var(--verde); }
.loader__num, .loader__cap, .loader__cai { transition: opacity .3s; }
.loader.is-cheio .loader__cai, .loader.is-saindo .loader__num, .loader.is-saindo .loader__cap { opacity: 0; }
.loader__cai { position: absolute; top: -64px; left: 50%; width: 40px; height: 90px; margin-left: -20px; }
.loader__cai i {
  position: absolute; left: 50%; top: 0; width: 6px; height: 11px; margin-left: -3px;
  border-radius: 50%; background: var(--palha-e); opacity: 0;
  animation: ld-cai 1.1s cubic-bezier(.5, 0, 1, 1) infinite;
}
.loader__cai i:nth-child(2) { left: 30%; animation-delay: .18s; }
.loader__cai i:nth-child(3) { left: 70%; animation-delay: .36s; }
.loader__cai i:nth-child(4) { left: 42%; animation-delay: .54s; }
.loader__cai i:nth-child(5) { left: 60%; animation-delay: .72s; }
.loader__cai i:nth-child(6) { left: 50%; animation-delay: .9s; }
@keyframes ld-cai {
  0% { transform: translateY(0) rotate(0); opacity: 0; }
  20% { opacity: 1; }
  100% { transform: translateY(96px) rotate(160deg); opacity: 0; }
}
.trava { overflow: hidden; }

/* ---------- início ---------- */
.hero {
  position: relative; z-index: 3; isolation: isolate;
  min-height: 100vh; min-height: 100svh;
  display: flex; align-items: flex-end; background: var(--verde-e);
}
.hero__bg { position: absolute; inset: 0; overflow: hidden; z-index: -2; }
.hero__bg img { width: 100%; height: 100%; object-fit: cover; transform-origin: 50% 35%; }
.hero__veu {
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(90deg, rgba(5, 30, 9, .94) 0%, rgba(5, 30, 9, .8) 46%, rgba(5, 30, 9, .35) 100%),
    linear-gradient(0deg, rgba(3, 20, 6, .88) 0%, rgba(3, 20, 6, 0) 48%);
}
.hero__in {
  width: 100%; max-width: var(--max); margin: 0 auto;
  padding: calc(var(--hdr) + 7vh) var(--gut) clamp(64px, 10vh, 110px);
}
.hero__t {
  font-family: var(--f-disp); font-weight: 800; font-stretch: 78%;
  font-size: clamp(2.8rem, 7.2vw, 7.2rem); line-height: .9; letter-spacing: -.028em;
  max-width: 11ch; margin: .32em 0 .36em; text-wrap: balance;
}
.hero__t em { font-style: normal; color: var(--laranja); }
.hero__sub { font-size: clamp(1.05rem, 1.5vw, 1.3rem); max-width: 42ch; color: var(--muted); }
.atalhos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: clamp(24px, 4.5vh, 44px); max-width: min(780px, calc(100% - 210px)); }
.atalhos a {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px;
  height: 100%; padding: 14px 16px; border-radius: 18px; text-decoration: none;
  background: rgba(244, 237, 224, .08); border: 1px solid rgba(244, 237, 224, .2);
  transition: background-color .2s, transform .2s;
}
.atalhos a:hover { background: rgba(244, 237, 224, .16); transform: translateY(-2px); }
.atalhos li:first-child a { background: var(--laranja); border-color: transparent; color: var(--tinta); }
.atalhos li:first-child a:hover { background: #FF6A38; }
.atalhos__n { font: 800 .8rem/1 var(--f-txt); opacity: .7; }
.atalhos__t { display: grid; gap: 3px; min-width: 0; }
.atalhos__t b { font-size: 1.02rem; line-height: 1.2; }
.atalhos__t small { font-size: .82rem; line-height: 1.3; opacity: .82; }
.atalhos__s { font-weight: 700; }
.hero__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 22px; margin-top: 22px; font-size: .92rem; color: var(--muted); }
.hero__desce {
  display: inline-flex; gap: .6em; margin-top: 22px;
  font: 700 .78rem/1 var(--f-txt); letter-spacing: .16em; text-transform: uppercase;
  text-decoration: none; color: var(--arroz);
}
.hero__desce span { color: var(--laranja); }
.hero__selo {
  position: absolute; top: calc(var(--hdr) + 5vh); right: var(--gut);
  width: clamp(96px, 12vw, 176px); transform: rotate(6deg);
  filter: drop-shadow(0 10px 18px rgba(0, 0, 0, .35));
}
.hero__in { position: relative; z-index: 2; }
.hero__sack {
  position: absolute; z-index: 1; right: calc(var(--gut) + 5vw); bottom: 13vh;
  width: clamp(120px, 12.5vw, 210px);
}
.hero__tilt { transform-origin: 50% 58%; }
.hero__idle { transform-origin: 50% 100%; }
.hero__sack svg { width: 100%; height: auto; overflow: visible; filter: drop-shadow(0 16px 18px rgba(0, 0, 0, .3)); }
.pour { display: none; }
.m .pour {
  display: block; position: absolute; left: 50%; top: 62%;
  width: 44px; margin-left: -22px; height: min(62vh, 560px);
  pointer-events: none; clip-path: inset(0 0 100% 0);
  -webkit-mask: linear-gradient(#000 55%, transparent); mask: linear-gradient(#000 55%, transparent);
}
.pour i {
  position: absolute; top: 0; left: calc(50% + var(--x)); width: 6px; height: 11px; margin-left: -3px;
  border-radius: 50%; background: var(--papel); box-shadow: 0 0 0 1.5px var(--palha-e);
  animation: cai 1.44s linear infinite; animation-delay: var(--d); animation-play-state: paused;
}
.pour.is-on i { animation-play-state: running; }
@keyframes cai {
  from { transform: translateY(-12px) rotate(0); }
  to { transform: translateY(min(62vh, 560px)) rotate(220deg); }
}
.m .hero__idle { animation: balanca 3.4s ease-in-out infinite; }
@keyframes balanca {
  0%, 100% { transform: rotate(-2deg); }
  50% { transform: rotate(2.5deg) translateY(-3px); }
}
.lock .hero__sack { visibility: hidden; }

.agora {
  display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px;
  border-radius: 999px; background: rgba(244, 237, 224, .12);
  font: 700 .8rem/1.2 var(--f-txt); color: var(--arroz); white-space: nowrap;
}
.agora::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--laranja); }
.agora.is-aberto::before { background: #6BDB7B; box-shadow: 0 0 0 4px rgba(107, 219, 123, .2); }

@media (max-width: 900px) {
  .atalhos { grid-template-columns: 1fr; max-width: 460px; }
}
@media (max-width: 760px) {
  .hero__in { padding: calc(var(--hdr) + 5vh) var(--gut) 72px; }
  .hero .kicker { max-width: calc(100% - 92px); }
  .hero__t { font-size: clamp(2.5rem, 11.5vw, 3.6rem); max-width: min(11ch, calc(100% - 78px)); }
  .hero__selo { top: auto; bottom: 22px; width: 78px; }
  .hero__sack { top: calc(var(--hdr) + 4vh); bottom: auto; right: var(--gut); width: 78px; }
  .atalhos { max-width: none; }
  .atalhos a { padding: 12px 14px; }
  .hero__desce { margin-top: 18px; }
}

/* ---------- cenas presas (só com movimento) ---------- */
.cena { position: relative; }
.m .cena { height: calc(var(--len, 3) * 100vh); }
.m .cena > .stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.cena--mapa { --len: 3.4; }
.cena--prateleira { --len: 3.6; }
.cena--rua { --len: 3.6; }
.cena--traj { --len: 5.6; }
.cena--perto { --len: 2.9; }
.cena--cartas { --len: 3.3; }
.cena--cupons { --len: 3.8; }

/* ---------- 01 · mapa ---------- */
.historia { position: relative; z-index: 1; background: var(--arroz); }
.cena--mapa .stage {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: center;
  gap: clamp(24px, 4vw, 72px); max-width: 1440px; margin: 0 auto;
  padding: clamp(96px, 16vh, 180px) var(--gut) clamp(40px, 8vh, 96px);
}
.m .cena--mapa .stage { max-width: none; padding: calc(var(--hdr) + 3vh) max(var(--gut), calc((100vw - 1400px) / 2)) 4vh; }
.beats { display: grid; gap: 1em; margin-top: clamp(18px, 3vh, 32px); }
.beat { font-size: clamp(1.1rem, 1.6vw, 1.4rem); line-height: 1.5; color: var(--muted); max-width: 34ch; }
.m .beat { grid-area: 1 / 1; }
.beat__b { transition: opacity .45s, color .45s; }
.m .beat__b:not(.on) { opacity: .3; }
.beat__b.on, html:not(.m) .beat__b { color: var(--verde); font-weight: 600; }
.mapa { width: 100%; height: auto; }
.m .mapa-arte svg { width: 100%; height: 100%; max-height: 80vh; }
.mp-papel { fill: #EFE4CE; stroke: var(--linha); stroke-width: 2.5; }
.mp-ruas { fill: none; stroke: #FBF7EE; stroke-width: 14; stroke-linecap: round; }
.mp-quadras rect { fill: #E6D8BB; }
.mp-zona { fill: rgba(205, 179, 135, .38); stroke: var(--palha-e); stroke-width: 2.5; stroke-dasharray: 8 7; }
.mp-zona--centro { fill: rgba(30, 91, 37, .08); stroke: var(--verde-c); }
.mp-rot { font: 800 23px var(--f-disp); font-stretch: 85%; fill: var(--verde); text-anchor: middle; }
.mp-fabrica rect, .mp-fabrica path { fill: var(--papel); stroke: var(--linha); stroke-width: 2.5; stroke-linejoin: round; }
.mp-fabrica .mp-porta, .mp-porta { fill: var(--verde); }
.mp-casa { fill: var(--papel); stroke: var(--linha); stroke-width: 2.5; stroke-linejoin: round; }
.mp-pedido { transform-box: fill-box; transform-origin: 50% 100%; }
.mp-pedido path { fill: var(--laranja); stroke: var(--linha); stroke-width: 2; }
.mp-pedido ellipse { fill: var(--papel); }
.mp-venda { transform-box: fill-box; transform-origin: 50% 100%; }
.v-parede { fill: var(--papel); stroke: var(--linha); stroke-width: 2.5; }
.v-toldo { fill: url(#listras); stroke: var(--linha); stroke-width: 2.5; stroke-linejoin: round; }
.v-franja { fill: var(--verde-c); stroke: var(--linha); stroke-width: 2; }
.v-placa { fill: var(--verde); stroke: var(--linha); stroke-width: 2; }
.v-placa-t { font: 800 10.5px var(--f-txt); fill: var(--arroz); text-anchor: middle; letter-spacing: .06em; }
.v-janela { fill: #CFE3D0; stroke: var(--linha); stroke-width: 2; }
.v-porta { fill: var(--verde); stroke: var(--linha); stroke-width: 2; }
.mp-rota-base { fill: none; stroke: rgba(168, 138, 90, .45); stroke-width: 5; stroke-linecap: round; stroke-dasharray: 2 10; }
.mp-rota { fill: none; stroke: var(--laranja); stroke-width: 8; stroke-linecap: round; stroke-dasharray: 0 13; }

@media (max-width: 820px) {
  .cena--mapa .stage { grid-template-columns: 1fr; }
  .m .cena--mapa .stage {
    grid-template-rows: minmax(0, 1fr) auto; align-items: end; gap: 8px;
    padding: calc(var(--hdr) + 6px) var(--gut) max(20px, 3vh);
  }
  .m .mapa-arte { grid-row: 1; align-self: stretch; min-height: 0; }
  .m .mapa-arte svg { max-height: none; }
  .m .mapa-txt { grid-row: 2; }
  .beat { font-size: 1.05rem; }
}

/* ---------- 01 · prateleira ---------- */
.cena--prateleira .stage {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: clamp(16px, 3.5vh, 40px); padding: clamp(40px, 8vh, 96px) var(--gut) clamp(64px, 12vh, 140px); text-align: center;
}
.m .cena--prateleira .stage { padding: calc(var(--hdr) + 4vh) var(--gut) 5vh; }
.frase {
  font-family: var(--f-disp); font-weight: 750; font-stretch: 84%;
  font-size: clamp(1.6rem, 3.5vw, 3.1rem); line-height: 1.1; letter-spacing: -.015em;
  max-width: 24ch; text-wrap: balance;
}
.frase span { transition: opacity .35s, color .35s, background-size .5s; }
.frase .k { color: var(--verde); background: linear-gradient(rgba(205, 179, 135, .6), rgba(205, 179, 135, .6)) 0 88% / 100% .32em no-repeat; }
.m .frase span:not(.on) { opacity: .16; }
.m .frase .k:not(.on) { background-size: 0 .32em; }
.prat-arte { width: min(100%, 1000px); }
.prat-arte svg { width: 100%; height: auto; max-height: 58vh; overflow: hidden; }
.prat-lado { opacity: 0; }
.sonho {
  font-family: var(--f-serif); font-style: italic; font-weight: 500;
  font-size: clamp(2.3rem, 6vw, 5.6rem); line-height: 1; color: var(--verde);
  max-width: 16ch; text-wrap: balance;
}
.sonho__aspas { display: block; font-size: 1.6em; line-height: .6; color: var(--laranja); }
.m .sonho { position: absolute; left: 0; right: 0; top: calc(var(--hdr) + 3vh); margin: 0 auto; padding-inline: var(--gut); opacity: 0; }
.p-fundo { fill: #E6D9BF; }
.p-poste { fill: #9C7446; }
.p-tabua { fill: var(--madeira); stroke: #8A6337; stroke-width: 2; }
.p-chao { stroke: var(--linha); stroke-width: 3; opacity: .35; }
.p-feijao { fill: #7A3B1E; stroke: var(--linha); stroke-width: 2.5; }
.p-dobra { fill: none; stroke: rgba(0, 0, 0, .25); stroke-width: 2; }
.p-rot { fill: var(--papel); }
.p-txt { font: 800 13px var(--f-txt); text-anchor: middle; fill: var(--verde); letter-spacing: .04em; }
.p-txt--feijao { fill: #7A3B1E; }
.p-txt--oleo { fill: #7A4E00; font-size: 12px; }
.p-txt--claro { fill: var(--papel); font-size: 12px; }
.p-tampa { fill: var(--laranja); stroke: var(--linha); stroke-width: 2; }
.p-oleo { fill: #F2B632; stroke: var(--linha); stroke-width: 2.5; stroke-linejoin: round; }
.p-farinha { fill: var(--papel); stroke: var(--linha); stroke-width: 2.5; stroke-linejoin: round; }
.p-faixa { fill: var(--verde); }
.p-item { stroke: var(--linha); stroke-width: 2.5; stroke-linejoin: round; }
.p-risco { fill: none; stroke: rgba(0, 0, 0, .25); stroke-width: 2; }
.p-cx { fill: #C9A574; stroke: var(--linha); stroke-width: 2.5; }
.p-fita { stroke: #E8D6AE; stroke-width: 12; }

@media (max-width: 760px) {
  .frase { font-size: clamp(1.45rem, 6.4vw, 1.9rem); }
  .prat-arte svg { max-height: 44svh; }
}

/* ---------- 02 · a rua ---------- */
.antes { position: relative; z-index: 1; background: var(--arroz); }
.cena--rua .stage { --calcada: 15vh; background: var(--arroz); }
.rua-track { display: grid; gap: 28px; max-width: var(--max); margin: 0 auto; padding: clamp(40px, 8vh, 96px) var(--gut) clamp(64px, 12vh, 140px); }
.rua-foto img { width: 100%; border-radius: 18px; }
.rua-foto--antiga img { filter: sepia(.72) saturate(.85) contrast(.96); }
.rua-foto figcaption {
  margin-top: 12px; max-width: 34ch;
  font: italic 500 1.15rem/1.35 var(--f-serif); color: var(--verde);
}
.rua-foto .tag {
  position: absolute; top: 16px; left: 16px; margin: 0; padding: 6px 14px; border-radius: 999px;
  background: var(--verde); color: var(--arroz);
  font: 800 .78rem/1.2 var(--f-txt); letter-spacing: .16em; text-transform: uppercase;
}
.rua-foto--nova { position: relative; }
.rua-faixa, .rua-sack { display: none; }
.m .rua-track {
  position: absolute; top: 0; bottom: 0; left: 0; width: max-content; max-width: none; margin: 0;
  display: flex; align-items: flex-end; gap: clamp(28px, 4vw, 64px);
  padding: calc(var(--hdr) + 4vh) 10vw calc(var(--calcada) + 3vh) 6vw;
  background:
    linear-gradient(to top, #D9CCB3 var(--calcada), #B7A688 var(--calcada), #B7A688 calc(var(--calcada) + 6px), transparent calc(var(--calcada) + 6px));
}
.m .rua-intro { flex: none; align-self: center; width: min(80vw, 540px); margin-right: 4vw; }
.m .rua-foto { flex: none; position: relative; height: min(52vh, 560px); }
.m .rua-foto .tag { top: 16px; left: 16px; width: auto; margin: 0; font-size: .78rem; }
.m .rua-foto img { width: auto; height: 100%; }
.m .rua-foto figcaption { position: absolute; left: 0; bottom: 100%; margin: 0 0 12px; width: min(100%, 440px); font-size: 1.05rem; }
.m .rua-faixa {
  display: block; flex: none; align-self: stretch; position: relative;
  width: clamp(240px, 28vw, 420px);
  margin: calc(-1 * (var(--hdr) + 4vh)) 0 calc(-1 * (var(--calcada) + 3vh));
}
.rua-faixa svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.rf-asfalto { fill: #3A403C; }
.rf-linha { stroke: #F2C230; stroke-width: 4; stroke-dasharray: 18 14; }
.rf-zebra path { fill: #F4F1EA; }
.m .rua-sack {
  display: block; position: absolute; z-index: 3; left: 12vw; bottom: calc(var(--calcada) * .28);
  width: clamp(66px, 7vw, 116px);
}
.rua-sack svg { width: 100%; height: auto; overflow: visible; filter: drop-shadow(0 10px 10px rgba(0, 0, 0, .25)); }

@media (min-width: 761px) {
  .rua-track { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rua-intro { grid-column: 1 / -1; max-width: 720px; }
  .rua-foto--nova { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
  .cena--rua .stage { --calcada: 13vh; }
  .m .rua-foto { height: 34svh; }
  .m .rua-intro { width: 82vw; }
  .m .rua-intro .lead { font-size: 1.05rem; }
  .m .rua-foto figcaption { width: 80vw; font-size: .98rem; }
  .m .rua-sack { left: 7vw; }
  .m .rua-faixa { width: 200px; }
}

/* ---------- 03 · trajetória ---------- */
.traj { position: relative; z-index: 1; }
.cena--traj .stage {
  --fg: var(--arroz); --muted: rgba(244, 237, 224, .82); --k: var(--arroz); --kn: var(--laranja);
  background: var(--verde); color: var(--fg);
  padding: clamp(80px, 14vh, 160px) var(--gut) clamp(64px, 12vh, 140px);
}
.traj-cab, .traj-passos, .traj-arte { max-width: var(--max); margin-inline: auto; }
.traj-arte { margin-top: 32px; }
.traj-arte svg { width: 100%; height: auto; }
.traj-passos { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 24px; margin-top: 32px; }
.passo__n { display: block; font: 800 clamp(3rem, 6vw, 5.5rem)/.85 var(--f-disp); font-stretch: 75%; color: var(--laranja); }
.passo h3 { font: 800 clamp(1.5rem, 2.6vw, 2.4rem)/1 var(--f-disp); font-stretch: 84%; margin-top: .3em; }
.passo p { font-size: clamp(1.02rem, 1.3vw, 1.2rem); color: var(--muted); max-width: 30ch; margin-top: .5em; }
.traj-trilho { display: none; }
.m .cena--traj .stage {
  --fg: var(--tinta); --muted: #363D38; --k: var(--verde); --kn: #B23A0E;
  background: var(--arroz); max-width: none;
  display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 2vh clamp(24px, 4vw, 64px);
  padding: calc(var(--hdr) + 3vh) max(var(--gut), calc((100vw - 1400px) / 2)) 3.5vh;
  transition: color .5s;
}
.m .cena--traj .stage.is-escuro { --fg: var(--arroz); --muted: rgba(244, 237, 224, .82); --k: var(--arroz); --kn: var(--laranja); }
.m .traj-cab { grid-column: 1 / -1; max-width: 900px; margin: 0; }
.m .traj-passos { grid-column: 1; grid-row: 2; align-self: center; display: grid; margin: 0; }
.m .passo { grid-area: 1 / 1; }
.m .traj-arte { grid-column: 2; grid-row: 2; align-self: stretch; min-height: 0; margin: 0; max-width: none; }
.m .traj-arte svg { height: 100%; overflow: visible; }
.m .traj-trilho {
  grid-column: 1 / -1; grid-row: 3; position: relative;
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); padding-top: 22px;
}
.traj-trilho li { position: relative; font: 700 .76rem/1.2 var(--f-txt); letter-spacing: .1em; text-transform: uppercase; opacity: .4; transition: opacity .3s; }
.traj-trilho li::before { content: ""; position: absolute; top: -27px; left: 0; width: 12px; height: 12px; border-radius: 50%; background: currentColor; }
.traj-trilho li.on { opacity: 1; }
.traj-trilho li.on::before { background: var(--laranja); }
.traj-trilho .traj-trilho__barra { position: absolute; top: 0; left: 0; right: 0; height: 2px; opacity: 1; background: rgba(128, 128, 110, .35); }
.traj-trilho__barra::before { display: none; }
.traj-trilho__barra i { position: absolute; inset: 0; background: var(--laranja); transform-origin: 0 50%; transform: scaleX(0); }
.tj-estrelas circle { fill: var(--arroz); }
.tj-estrelas--cel { display: none; }
@media (max-width: 820px) { .m .tj-estrelas--cel { display: inline; } }
.tj-sol { fill: var(--laranja); }
.tj-poste { fill: #8A6337; }
.tj-toldo { fill: url(#listras); stroke: var(--linha); stroke-width: 3; stroke-linejoin: round; }
.tj-franja { fill: var(--verde-c); stroke: var(--linha); stroke-width: 2.5; }
.tj-balcao { fill: var(--madeira); stroke: var(--linha); stroke-width: 3; }
.tj-risco { fill: none; stroke: rgba(0, 0, 0, .25); stroke-width: 2.5; }
.tj-placa { fill: var(--verde); stroke: var(--linha); stroke-width: 3; }
.tj-placa-t { font: 800 17px var(--f-txt); fill: var(--arroz); text-anchor: middle; letter-spacing: .08em; }
.tj-parede { fill: var(--papel); stroke: var(--linha); stroke-width: 3; }
.tj-letreiro { fill: var(--verde); stroke: var(--linha); stroke-width: 3; }
.tj-letreiro-t { font: 800 22px var(--f-txt); fill: var(--arroz); text-anchor: middle; letter-spacing: .1em; }
.tj-janela { fill: #CFE3D0; stroke: var(--linha); stroke-width: 2.5; }
.tj-prod rect { fill: var(--laranja); }
.tj-prod rect:nth-child(2n) { fill: #F2B632; }
.tj-prod rect:nth-child(3n) { fill: #2F6FAE; }
.tj-porta { fill: var(--verde); stroke: var(--linha); stroke-width: 2.5; }
.tj-mac { fill: var(--palha); }
.tj-andaime { fill: none; stroke: #8A6337; stroke-width: 4; stroke-linecap: round; }
.tj-letreiro2 { fill: var(--papel); stroke: var(--linha); stroke-width: 3; }
.tj-verm { font: 800 20px var(--f-txt); fill: #C21F24; text-anchor: middle; letter-spacing: .06em; }
.tj-laje { fill: #DCD3C3; stroke: var(--linha); stroke-width: 2; }
.tj-grade { fill: none; stroke: var(--linha); stroke-width: 2; }
.tj-laranja { fill: var(--laranja); }
.tj-verde { fill: var(--verde-c); }
.tj-monitor { fill: #26302A; }
.tj-tela { fill: #7FD3A0; }
.tj-pe { stroke: #26302A; stroke-width: 4; fill: none; }
.tj-trelica { fill: none; stroke: var(--folha); stroke-width: 3.5; stroke-linejoin: round; }
.tj-pilar { fill: #6F7A72; }
.tj-fachada { fill: #ECE8DF; stroke: var(--linha); stroke-width: 3; }
.tj-fach-t { font: 800 18px var(--f-txt); fill: var(--verde); text-anchor: middle; letter-spacing: .12em; }
.tj-vidro { fill: #B9CFC6; stroke: var(--linha); stroke-width: 3; }
.tj-caixilho { stroke: var(--linha); stroke-width: 2.5; }
.tj-tag rect { fill: var(--laranja); }
.tj-tag text { font: 800 16px var(--f-txt); fill: var(--tinta); text-anchor: middle; }
.tj-luz { fill: #FBE3A0; }
.pe--v { fill: var(--verde-c); }
.pe--l { fill: var(--laranja); }
.pe--p { fill: var(--palha); }
.pe--c { fill: var(--papel); }
.tj-chao { fill: #0A2E0E; transition: fill .6s; }
.m .tj-chao { fill: #CDB387; }
.m .is-escuro .tj-chao { fill: #0A2E0E; }
.tj-linha { stroke: var(--linha); stroke-width: 3; }

@media (max-width: 820px) {
  .m .cena--traj .stage {
    grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr) auto auto;
    gap: 10px; padding: calc(var(--hdr) + 10px) var(--gut) 18px;
  }
  .m .traj-arte { grid-column: 1; grid-row: 2; }
  .m .traj-passos { grid-row: 3; }
  .m .traj-trilho { grid-row: 4; padding-top: 16px; }
  .m .passo { display: grid; grid-template-columns: auto 1fr; column-gap: 12px; align-items: end; }
  .m .passo__n { grid-row: 1 / 3; font-size: 3.4rem; }
  .m .passo h3 { font-size: 1.4rem; margin: 0; }
  .m .passo p { grid-column: 1 / -1; font-size: 1rem; margin-top: 6px; min-height: 3em; }
  .traj-trilho li span { display: none; }
  .traj-trilho li::before { top: -21px; }
}

/* ---------- 04 · cultura ---------- */
.cultura { position: relative; z-index: 1; background: var(--verde); }
.faixa-gente { overflow: hidden; background: var(--laranja); color: var(--tinta); padding: .5em 0; }
.faixa-gente__in {
  display: block; width: max-content; white-space: nowrap;
  font: 800 clamp(1.6rem, 4vw, 3.4rem)/1.1 var(--f-disp); font-stretch: 78%; text-transform: uppercase; letter-spacing: -.01em;
}
.faixa-gente__in b { font-size: .5em; vertical-align: middle; margin: 0 .5em; color: var(--verde); }
.cena--perto .stage {
  position: relative; display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 16px;
  max-width: var(--max); margin: 0 auto; padding: clamp(80px, 14vh, 160px) var(--gut) 0;
}
.perto-k, .perto-t { grid-column: 1 / -1; }
.perto-t { display: grid; gap: .1em; margin-bottom: 24px; }
.perto-t__a { font: 800 clamp(2.4rem, 7vw, 6rem)/.92 var(--f-disp); font-stretch: 76%; letter-spacing: -.03em; text-transform: uppercase; }
.perto-t__b { font: italic 500 clamp(2.2rem, 6vw, 5rem)/1 var(--f-serif); color: var(--laranja); }
.perto-grande, .perto-card { position: relative; overflow: hidden; border-radius: 22px; }
.perto-grande img, .perto-card img { width: 100%; height: 100%; object-fit: cover; }
.perto-grande { grid-row: 3; }
.perto-card { grid-row: 3; aspect-ratio: 3 / 4; }
.m .cena--perto .stage { display: block; max-width: none; padding: 0; background: var(--verde-e); }
.m .perto-grande, .m .perto-card { position: absolute; inset: 0; border-radius: 0; aspect-ratio: auto; }
.m .perto-grande img { transform-origin: 50% 60%; }
.m .perto-grande::after { content: ""; position: absolute; inset: 0; background: rgba(5, 30, 9, .5); }
.m .perto-card { clip-path: inset(50% 50% round 24px); }
.m .perto-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(5, 30, 9, .88) 0%, rgba(5, 30, 9, .1) 55%); }
.m .perto-card img { object-position: 50% 62%; }
.m .perto-k { position: absolute; z-index: 3; top: calc(var(--hdr) + 3vh); left: var(--gut); }
.m .perto-t { position: absolute; z-index: 2; inset: 0; display: grid; place-items: center; margin: 0; padding: var(--hdr) var(--gut) 0; pointer-events: none; }
.m .perto-t__a, .m .perto-t__b { grid-area: 1 / 1; text-align: center; }
.m .perto-t__a { font-size: clamp(3rem, 11vw, 11rem); max-width: 9ch; line-height: .84; }
.m .perto-t__b { align-self: end; margin-bottom: 11vh; max-width: 14ch; color: var(--arroz); font-size: clamp(2.4rem, 6.6vw, 6.4rem); }

.gente {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 96px); align-items: center;
  max-width: var(--max); margin: 0 auto; padding: clamp(80px, 16vh, 180px) var(--gut);
}
.gente__txt { display: grid; gap: 1em; }
.gente__txt p:not(.lead) { color: var(--muted); max-width: 44ch; font-size: 1.08rem; }
.gente__grade { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: clamp(4px, .7vw, 10px); max-width: 440px; }
.gente__grade i {
  aspect-ratio: 20 / 26; background: var(--arroz);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 26'%3E%3Ccircle cx='10' cy='6' r='5.5'/%3E%3Cpath d='M1 26v-6a9 9 0 0 1 18 0v6z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 26'%3E%3Ccircle cx='10' cy='6' r='5.5'/%3E%3Cpath d='M1 26v-6a9 9 0 0 1 18 0v6z'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: background-color .3s;
}
.gente__grade i:nth-child(9n+4) { background: var(--laranja); }
.gente__grade i:nth-child(11n+7) { background: var(--palha); }
.m .gente__grade i:not(.on) { background: rgba(244, 237, 224, .13); }
.gente__cont { margin-top: 24px; display: grid; gap: 6px; font-size: 1.1rem; color: var(--muted); max-width: 26ch; }
.gente__cont b { font: 800 clamp(4.2rem, 10vw, 8.6rem)/.85 var(--f-disp); font-stretch: 75%; color: var(--arroz); font-variant-numeric: tabular-nums; }
.gente__mais { color: var(--laranja); transition: opacity .3s; }

@media (max-width: 760px) {
  .cena--perto .stage { grid-template-columns: 1fr; }
  .perto-grande, .perto-card { grid-row: auto; }
  .gente { grid-template-columns: 1fr; }
  .m .perto-t__b { margin-bottom: 9vh; }
}

/* ---------- 05 · hoje ---------- */
.hoje { position: relative; z-index: 1; background: var(--verde); scroll-margin-top: 0; }
.hoje__intro {
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 20px 64px; align-items: end;
  max-width: var(--max); margin: 0 auto; padding: clamp(80px, 14vh, 160px) var(--gut) clamp(32px, 6vh, 64px);
}
.hoje__intro .kicker { grid-column: 1 / -1; }
.hoje__intro .t2 { margin: 0; }
.cena--cartas .stage {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px;
  max-width: var(--max); margin: 0 auto; padding: 0 var(--gut);
}
.carta { position: relative; overflow: hidden; border-radius: 24px; aspect-ratio: 4 / 5; background: var(--verde-e); isolation: isolate; }
.carta img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1; }
.carta::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgba(5, 30, 9, .9) 0%, rgba(5, 30, 9, 0) 60%); }
.carta__sombra { position: absolute; inset: 0; z-index: 2; background: #051E09; opacity: var(--sombra, 0); pointer-events: none; }
.carta__n { position: absolute; top: clamp(16px, 3vh, 32px); left: clamp(18px, 3vw, 44px); font: 700 .8rem/1 var(--f-txt); letter-spacing: .16em; }
.carta__t {
  position: absolute; left: clamp(18px, 3vw, 44px); right: clamp(18px, 3vw, 44px); bottom: clamp(18px, 4vh, 48px);
  font: 800 clamp(1.8rem, 3vw, 3rem)/.92 var(--f-disp); font-stretch: 78%; text-transform: uppercase; letter-spacing: -.02em;
}
.m .cena--cartas .stage { display: block; max-width: none; padding: 0; }
.m .carta { position: absolute; inset: calc(var(--hdr) + 2vh) var(--gut) 4vh; aspect-ratio: auto; transform-origin: 50% 0; }
.m .carta__t { font-size: clamp(2.2rem, 7vw, 7rem); max-width: 12ch; }

@media (max-width: 760px) {
  .hoje__intro { grid-template-columns: 1fr; }
  .cena--cartas .stage { grid-template-columns: 1fr; }
  .carta { aspect-ratio: 4 / 3; }
  .m .carta { inset: calc(var(--hdr) + 12px) var(--gut) 20px; }
}

/* ---------- interativo ---------- */
.monte { max-width: var(--max); margin: 0 auto; padding: clamp(80px, 14vh, 160px) var(--gut) clamp(80px, 14vh, 160px); }
.monte__cab { max-width: 760px; margin-bottom: clamp(24px, 4vh, 40px); }
.monte__ajuda { color: var(--muted); font-size: 1.1rem; margin-top: 14px; max-width: 54ch; }
.monte__grid {
  --fg: var(--tinta); --muted: #48504A;
  display: grid; grid-template-columns: minmax(0, 11fr) minmax(0, 10fr); grid-template-rows: auto 1fr;
  column-gap: clamp(24px, 4vw, 56px); align-items: start;
  background: var(--papel); color: var(--tinta); border-radius: 28px; padding: clamp(16px, 3vw, 40px);
}
.monte__escolha { display: contents; }
.monte__planta { grid-column: 1; grid-row: 1 / 3; }
.itens { grid-column: 2; grid-row: 1; }
.resumo { grid-column: 2; grid-row: 2; }
.planta { width: 100%; height: auto; }
.pl-muro { fill: #EFE6D2; stroke: var(--linha); stroke-width: 2.5; }
.pl-setor rect { fill: var(--papel); stroke: var(--linha); stroke-width: 2; transition: fill .35s; }
.pl-setor > text { font: 700 16px var(--f-txt); fill: var(--tinta); text-anchor: middle; transition: fill .35s; }
.pl-setor.on rect { fill: var(--verde); }
.pl-setor.on > text { fill: var(--arroz); }
.pl-setor.pulsa rect { animation: pulsa .7s ease-out; }
@keyframes pulsa { 0% { fill: var(--laranja); } 100% { fill: var(--verde); } }
.pl-cont { opacity: 0; transition: opacity .3s; }
.pl-setor.on .pl-cont { opacity: 1; }
.pl-cont circle { fill: var(--laranja); stroke: var(--linha); stroke-width: 1.5; }
.pl-cont text { font: 800 12px var(--f-txt); fill: var(--tinta); text-anchor: middle; }
.pl-entrada { fill: var(--palha); }
.pl-caixas { fill: var(--tinta); }
.pl-estac { fill: #DCCFB6; }
.pl-rot { font: 700 13px var(--f-txt); fill: var(--tinta); text-anchor: middle; letter-spacing: .04em; }
.pl-rot--claro { fill: var(--arroz); }
.pl-rota { fill: none; stroke: var(--laranja); stroke-width: 6.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 0 11; }
#pl-rota-m.anima { transition: stroke-dashoffset 1.1s cubic-bezier(.5, 0, .2, 1); }
.itens { display: flex; flex-wrap: wrap; gap: 8px; }
.item {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 16px 8px 10px;
  border-radius: 999px; border: 1.5px solid rgba(19, 48, 26, .22); background: #fff; color: var(--tinta);
  font: 600 .98rem/1 var(--f-txt); cursor: pointer; transition: background-color .2s, border-color .2s, color .2s, transform .15s;
}
.item::before {
  content: "+"; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%;
  background: var(--arroz); color: var(--verde); font-weight: 800;
}
.item:hover { border-color: var(--verde); }
.item:active { transform: scale(.96); }
.item[aria-pressed="true"] { background: var(--verde); border-color: var(--verde); color: var(--arroz); }
.item[aria-pressed="true"]::before { content: "✓"; background: var(--laranja); color: var(--tinta); }
.item.is-fixo { cursor: default; }
.resumo { margin-top: 24px; padding-top: 20px; border-top: 1.5px dashed rgba(19, 48, 26, .25); }
.resumo__nums { display: flex; flex-wrap: wrap; gap: 6px 20px; font-size: .95rem; color: var(--muted); }
.resumo__nums b { font: 800 1.7rem/1 var(--f-disp); font-stretch: 80%; color: var(--verde); margin-right: 3px; font-variant-numeric: tabular-nums; }
.resumo__msg { min-height: 2.7em; margin-top: 12px; font: italic 500 clamp(1.2rem, 2vw, 1.5rem)/1.3 var(--f-serif); color: var(--verde); }
.resumo__cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }

@media (max-width: 900px) {
  .monte__grid { display: block; }
  /* No celular a planta acompanha a lista (só a lista), para ver o setor acender a cada toque. */
  .monte__escolha { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .monte__planta, .itens, .resumo { grid-column: auto; grid-row: auto; }
  .monte__planta {
    position: sticky; top: calc(var(--hdr) + 8px); z-index: 2;
    margin: calc(-1 * clamp(16px, 3vw, 40px)) calc(-1 * clamp(16px, 3vw, 40px)) 0;
    padding: clamp(16px, 3vw, 40px) clamp(16px, 3vw, 40px) 12px;
    background: var(--papel); border-radius: 28px 28px 0 0;
    box-shadow: 0 10px 14px -12px rgba(16, 20, 17, .35);
  }
  .planta { max-width: 460px; margin: 0 auto; }
  .item { min-height: 42px; font-size: .94rem; }
}

/* ---------- 06 · cupons ---------- */
.contam { position: relative; z-index: 1; background: var(--verde); }
.cena--cupons .stage { max-width: var(--max); margin: 0 auto; padding: clamp(40px, 8vh, 96px) var(--gut) clamp(80px, 14vh, 160px); }
.cupons { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 24px; margin-top: 40px; align-items: start; }
.caixa-reg { display: none; }
.cupom-w { filter: drop-shadow(0 18px 22px rgba(0, 0, 0, .3)); }
.cupom {
  --zz: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / 14px 100%;
  -webkit-mask: var(--zz); mask: var(--zz);
  background: var(--papel); color: var(--tinta); padding: 24px 24px 34px;
}
.cupom__loja {
  padding-bottom: 14px; border-bottom: 1.5px dashed #C9BFAE; text-align: center;
  font: 700 .7rem/1.4 ui-monospace, "Cascadia Mono", "Courier New", monospace; letter-spacing: .08em; text-transform: uppercase; color: #5E645F;
}
.cupom__estrelas { margin: 16px 0 10px; font-size: 1.35rem; letter-spacing: 4px; color: var(--laranja); }
.cupom__estrelas span { display: inline-block; transition: color .25s, transform .3s cubic-bezier(.3, 1.6, .5, 1); }
.m .cupom__estrelas span:not(.on) { color: #DDD5C6; transform: scale(.7); }
.cupom blockquote p { font: italic 500 1.2rem/1.4 var(--f-serif); }
.cupom__nome { margin-top: 18px; padding-top: 14px; border-top: 1.5px dashed #C9BFAE; font-weight: 800; }
.cupom__fonte { margin-top: 2px; font: 700 .68rem/1.3 ui-monospace, "Cascadia Mono", "Courier New", monospace; letter-spacing: .1em; text-transform: uppercase; color: #5E645F; }
.m .cena--cupons .stage {
  max-width: none; display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: calc(var(--hdr) + 3vh) var(--gut) 2vh;
}
.m .cupons-cab { max-width: 820px; }
.m .cupons-cab .kicker { justify-content: center; }
.m .cupons-cab .kicker::after { content: ""; flex: none; width: 28px; height: 2px; background: var(--laranja); }
.m .caixa-reg {
  display: block; position: relative; z-index: 2; flex: none;
  width: min(400px, 88vw); height: 30px; margin-top: 3.2vh; border-radius: 15px;
  background: #06170A; box-shadow: inset 0 -3px 0 rgba(255, 255, 255, .07), 0 10px 20px rgba(0, 0, 0, .25);
}
.caixa-reg__fenda { position: absolute; left: 22px; right: 22px; bottom: 7px; height: 4px; border-radius: 2px; background: #000; }
.caixa-reg__led { position: absolute; right: 12px; top: 7px; width: 7px; height: 7px; border-radius: 50%; background: #6BDB7B; }
.m .cupons { position: relative; display: block; flex: 1; width: min(330px, 80vw); margin-top: -14px; text-align: left; }
.m .cupom-w { position: absolute; left: 0; right: 0; top: 0; transform-origin: 50% 0; }

@media (max-width: 760px) {
  .cupom { padding: 20px 20px 30px; }
  .cupom blockquote p { font-size: 1.08rem; }
  .m .cupons-cab .t2 { font-size: 1.6rem; }
}

/* ---------- 07 · onde estamos ---------- */
.visite { position: relative; z-index: 1; background: var(--verde-e); }
.visite__in {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px;
  max-width: var(--max); margin: 0 auto; padding: clamp(80px, 14vh, 160px) var(--gut);
}
.visite__txt { grid-column: 1 / 8; grid-row: 1; display: grid; gap: 20px; justify-items: start; align-content: start; }
.visite__txt .t2 { margin: 0; }
.visite__arte { grid-column: 8 / 13; grid-row: 1 / 3; align-self: center; }
.visite__cartao, .visite__ofertas { border-radius: 24px; padding: clamp(22px, 2.6vw, 34px); }
.visite__cartao { grid-column: 1 / 5; grid-row: 2; background: rgba(244, 237, 224, .06); border: 1px solid rgba(244, 237, 224, .16); }
.visite__ofertas { grid-column: 5 / 8; grid-row: 2; background: var(--laranja); color: var(--tinta); display: grid; gap: 14px; align-content: start; }
.cartao__nome, .ofertas__t { font: 800 .82rem/1.2 var(--f-txt); letter-spacing: .14em; text-transform: uppercase; }
.visite__cartao address { margin-top: 10px; font-size: 1.1rem; line-height: 1.5; }
.visite__cartao dl { display: grid; gap: 16px; margin: 22px 0 0; }
.visite__cartao dt { font: 700 .74rem/1.2 var(--f-txt); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.visite__cartao dd { margin-top: 4px; font-size: 1.05rem; line-height: 1.45; }
.visite__cartao dd a { text-decoration-color: var(--laranja); text-underline-offset: 4px; text-decoration-thickness: 2px; }
.visite__cartao .agora { margin-top: 8px; }
.visite__ofertas .btn--oferta { background: var(--tinta); color: var(--arroz); justify-self: start; }
.visite__ofertas .btn--oferta:hover { background: #26302A; }
.sacola { width: 100%; max-width: 420px; height: auto; margin: 0 auto; }
.sc-sacola { fill: #C9A574; stroke: var(--linha); stroke-width: 3; stroke-linejoin: round; }
.sc-dobra { fill: #B38E5C; stroke: var(--linha); stroke-width: 3; stroke-linejoin: round; }
.sc-alca { fill: none; stroke: #7A5A32; stroke-width: 9; stroke-linecap: round; }
.sc-alca--f { stroke: #8C6A3E; }
.sc-pao { fill: #D9A05B; stroke: var(--linha); stroke-width: 3; }
.sc-pao-r { fill: none; stroke: #A8702F; stroke-width: 4; stroke-linecap: round; }
.sc-folha { fill: #3F8A3A; stroke: var(--linha); stroke-width: 3; }
.sc-folha--b { fill: #5DA54D; }
.sc-talo { fill: none; stroke: #2B6B2A; stroke-width: 3; }

@media (max-width: 900px) {
  .visite__in { grid-template-columns: 1fr; }
  .visite__txt, .visite__arte, .visite__cartao, .visite__ofertas { grid-column: 1; grid-row: auto; }
  .visite__arte { max-width: 300px; justify-self: center; width: 100%; }
}

/* ---------- rodapé ---------- */
.rodape { position: relative; z-index: 1; background: #061D09; }
.rodape__in { max-width: var(--max); margin: 0 auto; padding: clamp(72px, 12vh, 140px) var(--gut) 36px; }
.rodape__t { font: 800 clamp(2.3rem, 6.2vw, 6rem)/.92 var(--f-disp); font-stretch: 78%; letter-spacing: -.025em; text-wrap: balance; }
.rodape__t em { font-family: var(--f-serif); font-weight: 500; font-stretch: normal; color: var(--laranja); letter-spacing: -.01em; }
.rodape__cols { display: grid; grid-template-columns: 1fr 1fr auto; gap: 32px; margin-top: 56px; padding-top: 36px; border-top: 1px solid rgba(244, 237, 224, .14); }
.rodape__h { font: 700 .76rem/1.2 var(--f-txt); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.rodape ul { display: grid; gap: 10px; margin-top: 14px; }
.rodape ul a { text-decoration: none; }
.rodape ul a:hover { text-decoration: underline; text-decoration-color: var(--laranja); text-underline-offset: 4px; }
.rodape__logo { width: 116px; height: 116px; }
.rodape__base { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 12px 32px; margin-top: 48px; font-size: .86rem; color: rgba(244, 237, 224, .62); }
.rodape details summary { cursor: pointer; }
.rodape details p { max-width: 62ch; margin-top: 8px; }

@media (max-width: 760px) {
  .rodape__cols { grid-template-columns: 1fr; }
}

/* ---------- movimento reduzido (reforço) ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  html { scroll-behavior: auto !important; }
}
.m { scroll-behavior: smooth; }