/* Agência de IA — landing (23/09/2026; identidade nova em 12/10/2026)
 * A identidade nova do Israel Meira (ID visual/ISRAEL MEIRA/NOVA-IDENTIDADE-2026-10.md)
 * na paleta da IMT Academy: lime #D8FF00 como a única cor herói, o verde da foto
 * só no hero, palco (preto em radial) e papel (off-white em radial) alternando.
 * Grotesca fina (Bricolage, opsz 96) + Bodoni Moda Black Italic (opsz 11) na
 * palavra-chave, faixa de cantos retos, estrela de 4 pontas, anéis, papel rasgado.
 * Lime NUNCA é fundo de dobra nem texto/fio fino sobre o papel (1,02:1) ou o verde.
 * As molas são as do Remotion (linear() com cubic-bezier de reserva).
 * Revelar à prova de falha: todo estado escondido vive só em html.anima …:not(.ok).
 */

:root {
  --lime: #D8FF00; --preto: #000; --branco: #FCFCFC; --tinta: #0A0B07;
  --verde-hero: #8EBD47;   /* medido na base da foto do hero; só no hero e no theme-color */
  --palco-base: #101010;
  --palco: radial-gradient(120% 90% at 50% 28%, #1C1C1C 0%, #101010 48%, #060606 100%);
  --papel-base: #F2F1EC;
  --papel: radial-gradient(140% 100% at 50% 46%, #F5F4F0 0%, #F2F1EC 50%, #E3E2DD 100%);
  --rasgado: #FBFBF8; --fibra: #E6E4DE;
  --cartao-palco: #141414; --campo: #151515;
  --apoio-papel: #2B2B2B; --nota-papel: #555555; --apoio-palco: #B9B9B9; --nota-palco: #9A9A9A;
  --cromo-palco: linear-gradient(172deg, #FFFFFF 0%, #D9D9D9 35%, #8E8E8E 52%, #F2F2F2 70%, #6E6E6E 100%);
  --cromo-papel: linear-gradient(172deg, #000 0%, #3C3C3C 38%, #050505 55%, #2A2A2A 78%, #000 100%);
  --f: 'Bricolage Grotesque', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --f-serif: 'Bodoni Moda', 'Bodoni 72', Didot, Georgia, serif;
  --f-esp: 'Montserrat', system-ui, sans-serif;
  --f-cond: 'Anton', Impact, 'Arial Narrow', sans-serif;
  --larg: 1180px; --gutter: 20px;
  --raio-cartao: 28px; --raio-peca: 12px;
  --dobra-y: clamp(48px, 2rem + 4vw, 120px);
  --topo-h: 64px;
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-seno: cubic-bezier(.37, 0, .63, 1);
  --mola-suave: cubic-bezier(.25, .24, .14, 1.18);
  --mola: cubic-bezier(.27, .29, .11, 1.21);
  --mola-viva: cubic-bezier(.30, .36, .11, 1.28);
  /* lidos pelo player de som, pelo cupom e pelas parcelas (compartilhados) */
  --acento: var(--lime); --acento-tx: #000; --tx-fraco: var(--apoio-palco);   /* --acento-escuro fica indefinido: parcelas/cupom/oferta caem no lime (o checkout é escuro) */
}
@supports (transition-timing-function: linear(0, 1)) {
  :root {
    --mola-suave: linear(0, 0.005 1.5%, 0.021 3%, 0.053 5%, 0.095 7%, 0.187 10.5%, 0.521 22%, 0.611 25.5%, 0.691 29%, 0.75 32%, 0.81 35.5%, 0.859 39%, 0.899 42.5%, 0.938 47%, 0.966 51.5%, 0.987 56.5%, 1.002 62.5%, 1.011 77.5%, 1.005 99.5%, 1);
    --mola: linear(0, 0.006 1.5%, 0.021 3%, 0.055 5%, 0.1 7%, 0.196 10.5%, 0.533 21.5%, 0.628 25%, 0.712 28.5%, 0.774 31.5%, 0.835 35%, 0.885 38.5%, 0.925 42%, 0.959 46%, 0.986 50.5%, 1.003 55%, 1.015 60.5%, 1.019 73.5%, 1.005 99.5%, 1);
    --mola-viva: linear(0, 0.005 1.5%, 0.027 3.5%, 0.063 5.5%, 0.109 7.5%, 0.223 11.5%, 0.572 22.5%, 0.671 26%, 0.758 29.5%, 0.822 32.5%, 0.886 36%, 0.93 39%, 0.971 42.5%, 1.005 46.5%, 1.027 50.5%, 1.042 55%, 1.048 59.5%, 1.044 68.5%, 1);
  }
}
@media (min-width: 900px) { :root { --gutter: 40px; --topo-h: 76px; } }

/* temas por dobra: os componentes leem só estas variáveis */
.dobra--palco { background: var(--palco-base); background-image: var(--palco); color: var(--branco);
  --tx: var(--branco); --tx-fraco: var(--apoio-palco); --nota: var(--nota-palco); --fio: rgba(255,255,255,.12);
  --contorno: rgba(255,255,255,.55); --fx-bg: var(--lime); --fx-tx: #000; --estrela: var(--lime); --serif-cor: var(--lime);
  --acento: var(--lime); --acento-tx: #000; --cromo: var(--cromo-palco); --foco: var(--lime); }
.dobra--papel { background: var(--papel-base); background-image: var(--papel); color: #000;
  --tx: #000; --tx-fraco: var(--apoio-papel); --nota: var(--nota-papel); --fio: rgba(0,0,0,.09);
  --contorno: rgba(0,0,0,.45); --fx-bg: #000; --fx-tx: var(--lime); --estrela: #000; --serif-cor: #000;
  --acento: #000; --acento-tx: var(--lime); --cromo: var(--cromo-papel); --foco: #000; }
.dobra--verde { background: var(--verde-hero); color: #000;
  --tx: #000; --tx-fraco: rgba(10,11,7,.86); --nota: rgba(10,11,7,.8); --fio: rgba(0,0,0,.2); --contorno: #000;
  --fx-bg: #000; --fx-tx: var(--lime); --estrela: #000; --serif-cor: #000; --acento: #000; --acento-tx: var(--lime); --foco: #000; }

/* ── base ───────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--topo-h) + 8px); scroll-padding-bottom: 104px; overflow-x: clip; }
body { margin: 0; font: 400 1.0625rem/1.5 var(--f); color: #000; background: var(--palco-base); overflow-x: clip; -webkit-font-smoothing: antialiased; letter-spacing: -.005em; }
img, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
b, strong { font-weight: 650; }
h1, h2, h3, h4, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
:focus-visible { outline: 3px solid var(--foco, var(--lime)); outline-offset: 3px; border-radius: 6px; }
.defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.sem-quebra { white-space: nowrap; }
.dobra { position: relative; padding: var(--dobra-y) 0; overflow: clip; }
.dentro { position: relative; z-index: 1; width: 100%; max-width: calc(var(--larg) + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter); }
.dentro--estreito { max-width: calc(820px + 2 * var(--gutter)); }

.grao { position: fixed; inset: 0; z-index: 90; pointer-events: none; opacity: .06;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }

/* ── tipografia da identidade ───────────────────────────────────────────── */
.esp { font: 600 clamp(.75rem, .7rem + .2vw, .8125rem)/1.6 var(--f-esp); letter-spacing: .42em; text-transform: uppercase; color: var(--tx-fraco); text-wrap: balance; }
.esp--centro { text-align: center; padding-left: .42em; }
section > .dentro > .esp:first-child, .oque__texto > .esp, .virada__cab > .esp, .como__texto > .esp, .revender__texto > .esp, .oferta__texto > .esp { margin-bottom: 18px; }
.fina { font: 250 clamp(2rem, 1.15rem + 3.6vw, 3.75rem)/1.04 var(--f); font-variation-settings: 'opsz' 96; letter-spacing: -.045em; text-wrap: balance; max-width: 20ch; color: var(--tx); }
@media (max-width: 599px) { .fina { font-weight: 300; } }
.serif { font-family: var(--f-serif); font-style: italic; font-weight: 900; font-variation-settings: 'wght' 900, 'opsz' 11; letter-spacing: -.03em; font-size: 1.12em; line-height: 1; color: var(--serif-cor); }
.misto .serif--g { display: block; margin-top: .08em; font-size: clamp(3.25rem, 1.4rem + 7.6vw, 8.5rem); letter-spacing: -.04em; white-space: nowrap; }
.lead { font-size: clamp(1.0625rem, 1rem + .35vw, 1.25rem); line-height: 1.45; letter-spacing: -.01em; color: var(--tx-fraco); max-width: 52ch; }
.nota { font-size: .875rem; line-height: 1.45; color: var(--nota); max-width: 70ch; }
.nota--centro { text-align: center; margin-left: auto; margin-right: auto; }
.num, .num-m, .numero { font-family: var(--f-serif); font-style: italic; font-weight: 900; font-variation-settings: 'wght' 900, 'opsz' 6; letter-spacing: -.05em; line-height: .9; font-variant-numeric: lining-nums; }
.anton { font: 400 clamp(2.5rem, 1.1rem + 5.8vw, 6.25rem)/.98 var(--f-cond); letter-spacing: -.005em; text-transform: uppercase; text-align: center; max-width: 16ch; margin: 0 auto; text-wrap: balance; }

/* faixa: o destaque de cantos retos (lime no palco; preta com texto lime no papel e no verde) */
.faixa { background: linear-gradient(var(--fx-bg), var(--fx-bg)) no-repeat 0 0 / 100% 100%; color: var(--fx-tx);
  -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.serif.faixa { display: inline-block; line-height: .92; padding: .04em .14em .12em .10em; color: var(--fx-tx); }
.faixa--anton { display: inline-block; line-height: .86; padding: .07em .09em .05em; margin-top: .12em; --fx-bg: var(--lime); --fx-tx: #000; rotate: -2deg; }

.estrela { fill: var(--estrela); flex: none; display: inline-block; vertical-align: top; }
.estrela--g { width: clamp(56px, 4vw + 30px, 96px); rotate: 12deg; }
.estrela--p { width: clamp(28px, 1.5vw + 20px, 44px); rotate: 6deg; }
.estrela--hero { width: clamp(30px, 2vw + 18px, 50px); rotate: 12deg; margin: -.2em 0 0 .08em; }

.asterisco { display: block; fill: var(--lime); rotate: -8deg; pointer-events: none; }

/* anéis concêntricos: divs (pulso no compositor), cortados pela borda da dobra */
.aneis { position: absolute; left: var(--ax, 50%); top: var(--ay, 50%); width: 0; height: 0; pointer-events: none; z-index: 0; --k: .5; }
@media (min-width: 600px) { .aneis { --k: .75; } } @media (min-width: 1100px) { .aneis { --k: 1; } }
.aneis i { position: absolute; left: 0; top: 0; width: calc(var(--r) * 2 * var(--k)); aspect-ratio: 1; translate: -50% -50%; border: 1.5px solid var(--fio); border-radius: 50%; }
.aneis i:nth-child(1) { --r: 250px; --n: 0; } .aneis i:nth-child(2) { --r: 372px; --n: 1; } .aneis i:nth-child(3) { --r: 500px; --n: 2; }
.aneis i:nth-child(4) { --r: 640px; --n: 3; } .aneis i:nth-child(5) { --r: 800px; --n: 4; }
.aneis--video { --ay: 560px; }
@media (min-width: 900px) { .aneis--video { --ax: 34%; --ay: 620px; } }
.aneis--pilha { --ax: 25%; --ay: 50%; }
.aneis--sim { --ay: 58%; }
.aneis--oferta { --ax: 22%; --ay: 78%; }
@media (max-width: 899px) { .aneis--pilha { --ax: 50%; --ay: 30%; } .aneis--oferta { display: none; } }

/* papel rasgado: o rasgo só em cima e embaixo; o filtro fica nos pseudos, nunca no texto */
.rasgado { position: relative; isolation: isolate; color: #111; }
.rasgado::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--rasgado); filter: url(#rasgo); box-shadow: 0 16px 22px var(--sombra-rasgo, rgba(0,0,0,.2)); }
.rasgado::after { content: ""; position: absolute; inset: -5px 0; z-index: -2; background: var(--fibra); filter: url(#rasgo); }

/* "+" quadradinho: no palco, branco com cruz preta; no papel, preto com cruz lime */
.mais { flex: none; position: relative; display: inline-block; width: 22px; height: 22px; margin-top: .12em; background: var(--branco); }
.mais::before, .mais::after { content: ""; position: absolute; left: 50%; top: 50%; width: 10px; height: 2px; translate: -50% -50%; background: #000; }
.mais::after { rotate: 90deg; }
.dobra--papel .mais { background: #000; } .dobra--papel .mais::before, .dobra--papel .mais::after { background: var(--lime); }
.dobra--papel .cartao-ag .mais { background: var(--branco); } .dobra--papel .cartao-ag .mais::before, .dobra--papel .cartao-ag .mais::after { background: #000; }
.mais-lista { display: grid; gap: 14px; }
.mais-lista li { display: flex; gap: 12px; align-items: flex-start; line-height: 1.4; }

/* pílula (links secundários) e botão cheio */
.pilula { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 0 22px; border-radius: 24px;
  border: 1.5px solid var(--contorno); color: var(--tx); font: 500 1rem/1.15 var(--f); text-decoration: none; text-align: center;
  transition: background-color .2s, color .2s, border-color .2s; }
@media (hover: hover) { .pilula:hover { background: var(--tx); color: var(--fundo-pilula, #000); border-color: var(--tx); } .dobra--papel .pilula:hover, .dobra--verde .pilula:hover { --fundo-pilula: var(--lime); } }
.ic { width: 20px; height: 20px; flex: none; }
.cta { position: relative; display: inline-flex; align-items: center; justify-content: center; min-height: 60px; padding: 0 30px; border: 0; border-radius: 999px;
  font: 600 1.0625rem/1.15 var(--f); letter-spacing: -.01em; text-decoration: none; text-align: center; cursor: pointer;
  transition: transform .2s var(--ease-out), box-shadow .3s var(--ease-out); }
.cta:active { transform: scale(.97); transition-duration: .09s; }
.cta--preto { background: #000; color: var(--lime); box-shadow: 0 14px 34px -14px rgba(0,0,0,.55); }
.cta--lime { background: var(--lime); color: #000; box-shadow: 0 0 34px rgba(216,255,0,.26); }
@media (hover: hover) { .cta--preto:hover { box-shadow: 0 18px 44px -12px rgba(0,0,0,.7), 0 0 0 3px rgba(0,0,0,.12); } .cta--lime:hover { box-shadow: 0 0 52px rgba(216,255,0,.42); } }
.cta--brilho { overflow: hidden; isolation: isolate; }
.cta--brilho::after { content: ""; position: absolute; top: 0; left: 0; width: 30%; height: 100%; z-index: -1; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent); transform: skewX(-20deg) translateX(-150%); animation: brilho 3.5s linear infinite; }
@keyframes brilho { 0% { transform: skewX(-20deg) translateX(-150%); } 71.5%, 100% { transform: skewX(-20deg) translateX(420%); } }

/* ═══ TOPO FIXO: logo + @israelmeira à esquerda, "Já comprei" discreto ═══
 * Nasce sobre o escuro do hero (logo lime, Instagram em pílula de contorno);
 * depois do hero ganha o fundo de vidro escuro. */
.topo { position: absolute; top: 0; left: 0; right: 0; z-index: 70; height: var(--topo-h); display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 0 max(16px, calc((100% - var(--larg)) / 2)); color: var(--branco); transition: background-color .3s, box-shadow .3s; }
@media (min-width: 900px) { .topo { padding: 0 max(40px, calc((100% - var(--larg)) / 2)); } }
html.js .topo { position: fixed; }
.topo__esq { display: flex; align-items: center; gap: 12px; min-width: 0; }
@media (min-width: 900px) { .topo__esq { gap: 18px; } }
.topo .logo { display: inline-flex; align-items: center; min-height: 44px; flex: none; }
.topo .logo img { height: 26px; width: auto; }
@media (min-width: 900px) { .topo .logo img { height: 30px; } }
/* o Instagram: pílula de contorno, branca; não é botão de compra (sem lime) */
.ig { display: inline-flex; align-items: center; gap: 9px; min-height: 44px; min-width: 44px; padding: 0 16px 0 13px; border-radius: 999px; text-decoration: none;
  font: 500 .95rem/1 var(--f); letter-spacing: -.005em; }
.ig b { font-weight: 650; }
.ig--topo { padding: 0; width: 44px; justify-content: center; color: var(--branco); background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.24);
  font-size: .875rem; transition: background-color .2s, color .2s, border-color .2s; }
.ig--topo .ig__tx { display: none; }
.ig--topo .ic { width: 18px; height: 18px; }
@media (min-width: 430px) { .ig--topo { width: auto; padding: 0 15px 0 12px; } .ig--topo .ig__tx { display: inline; } }
@media (hover: hover) { .ig--topo:hover { background: var(--branco); color: #000; border-color: var(--branco); } }
/* "Já comprei · Entrar": vidro escuro, legível sobre o escuro e sobre o verde da foto */
.hero__entrar { display: inline-flex; align-items: center; gap: .32em; min-height: 44px; padding: 0 16px; border-radius: 999px; flex: none;
  border: 1px solid rgba(255,255,255,.18); background: rgba(0,0,0,.42); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  font: 500 .875rem/1 var(--f); text-decoration: none; color: rgba(252,252,252,.86); white-space: nowrap; transition: color .2s, border-color .2s; }
.hero__entrar b { font-weight: 650; color: var(--branco); }
@media (hover: hover) { .hero__entrar:hover { color: var(--branco); border-color: rgba(255,255,255,.5); } }
.so-largo { display: none; }
@media (min-width: 600px) { .so-largo { display: inline; } }
.topo.topo--solido { background: rgba(8,8,8,.86); -webkit-backdrop-filter: blur(16px) saturate(140%); backdrop-filter: blur(16px) saturate(140%); box-shadow: 0 1px 0 rgba(255,255,255,.08); }
.topo :focus-visible { outline-color: var(--lime); }

/* ═══ HERO ═══════════════════════════════════════════════════════════════
 * Celular: a foto no alto (abaixo do topo), sumindo no escuro, e a coluna de
 * texto embaixo. Computador (≥ 900): a foto ocupa o hero; o escuro vem da
 * esquerda até a coluna de texto e o verde da foto vira o brilho atrás dele.
 * Ordem: título → subtítulo → botão (+ WhatsApp discreto) → 3 chips. */
.hero { position: relative; overflow: hidden; isolation: isolate; padding-top: var(--topo-h); --nota: var(--nota-palco); }
.hero__foto { display: block; position: relative; z-index: -2; }
.hero__foto img { width: 100%; height: min(94vw, 540px); object-fit: cover; object-position: 50% 18%;
  -webkit-mask-image: linear-gradient(#000 44%, rgba(0,0,0,.42) 72%, transparent 94%); mask-image: linear-gradient(#000 44%, rgba(0,0,0,.42) 72%, transparent 94%); }
.hero__texto { position: relative; z-index: 2; padding: 0 var(--gutter) 40px; margin-top: -64px; }
.hero h1 { font-size: clamp(1.75rem, 1.05rem + 3.4vw, 2.25rem); line-height: 1.04; max-width: 13em; color: var(--branco); }   /* celular: 3 linhas a partir de 375 px */
@media (min-width: 600px) { .hero h1 { font-size: clamp(2rem, 1.1rem + 4.6vw, 4rem); max-width: 15ch; } }
.hero h1 .serif { color: var(--lime); }
.estrela--hero { width: clamp(24px, 1.4vw + 16px, 40px); rotate: 12deg; margin: -.18em 0 0 .06em; }
.hero__sub { margin-top: 14px; font-size: clamp(1.0625rem, 1rem + .3vw, 1.1875rem); line-height: 1.45; letter-spacing: -.01em; color: var(--apoio-palco); max-width: 36ch; }
.hero__acao { margin-top: 24px; display: flex; flex-direction: column; align-items: stretch; gap: 6px; }
.hero__cta { gap: 10px; min-height: 56px; padding: 0 28px; }
.estrela--cta { width: 15px; fill: #000; rotate: 12deg; }
.wa--hero { min-height: 44px; padding: 0 6px; border-color: transparent; gap: 8px; font-size: .9375rem; color: #D6D6D6;
  text-decoration: underline; text-decoration-color: rgba(255,255,255,.3); text-underline-offset: .25em; }
.wa--hero .ic { width: 18px; height: 18px; color: currentColor; }
@media (hover: hover) { .wa--hero:hover { background: transparent; color: var(--branco); border-color: transparent; text-decoration-color: currentColor; } }
.hero .apoio { margin-top: 4px; font-size: .8125rem; line-height: 1.4; color: var(--nota-palco); text-align: center; }
.hero .apoio b { font-weight: 600; color: #D6D6D6; }
.hero__chips { margin: 18px 0 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 8px; }
.hero__chips li { display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px 7px 10px; border: 1px solid rgba(255,255,255,.2); border-radius: 999px;
  font: 500 .8125rem/1.1 var(--f); color: #D6D6D6; white-space: nowrap; }
.hero__chips li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,.5); flex: none; }
/* os cartões flutuantes (peças reais) e a pílula de preço: só a partir do tablet / computador */
.hero__cartoes, .hero__preco { display: none; }
.flutua { position: absolute; margin: 0; padding: 6px; border-radius: 14px; background: rgba(12,12,12,.74); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,.14); box-shadow: 0 26px 50px -20px rgba(0,0,0,.65); color: var(--branco); }
.flutua img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 9px; }
.flutua figcaption { display: flex; align-items: center; gap: 6px; padding: 8px 4px 3px; font: 600 .625rem/1 var(--f-esp); letter-spacing: .26em; text-transform: uppercase; color: #CFCFCF; }
.flutua__play { width: 0; height: 0; border-left: 7px solid #CFCFCF; border-top: 4.5px solid transparent; border-bottom: 4.5px solid transparent; }
.flutua--arte { width: 124px; rotate: 6deg; }
.flutua--motion { width: 104px; rotate: -6deg; }
.flutua--motion img { object-position: 50% 46%; }
.flutua--pedido { padding: 11px 14px 12px; border-radius: 16px 16px 16px 4px; font: 500 .875rem/1.3 var(--f); letter-spacing: -.005em; }
.flutua--pedido .esp { display: block; margin-bottom: 4px; font-size: .5625rem; letter-spacing: .3em; color: var(--apoio-palco); }
@media (min-width: 600px) and (max-width: 899px) {
  .hero__cartoes { display: block; position: absolute; left: 0; right: 0; top: var(--topo-h); height: min(94vw, 540px); z-index: 1; pointer-events: none; }
  .flutua--arte { right: 4vw; top: 9%; width: min(124px, 16vw); }
  .flutua--motion { display: none; }
  .flutua--pedido { left: 3vw; top: 8%; width: calc(31.9vw - 40px); font-size: .8125rem; }
}
@media (max-width: 599px) { .hero__cta { width: 100%; } }
@media (min-width: 600px) and (max-width: 899px) { .hero__foto img { object-position: 80% 28%; } }
@media (max-width: 359px) { .hero__cta { padding: 0 16px; font-size: .9375rem; } .estrela--cta { display: none; } .wa--hero { font-size: .8125rem; padding: 0 2px; white-space: nowrap; } .hero__sub { font-size: 1rem; } }
@media (min-width: 600px) and (max-width: 899px) { .hero__acao { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 8px 16px; } .hero .apoio { text-align: left; } }
@media (min-width: 900px) {
  .hero { --col: min(600px, 46vw); --esq: max(40px, calc((100% - var(--larg)) / 2)); --col-fim: calc(var(--esq) + var(--col));
    padding-top: 0; min-height: clamp(620px, 58vw, 860px); display: flex; align-items: center; }
  .hero__foto { position: absolute; inset: 0; }
  .hero__foto img { height: 100%; object-position: 88% 50%; -webkit-mask-image: none; mask-image: none; }
  /* o escuro da coluna de texto, que deixa o verde da foto brilhar atrás dele */
  .hero::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background: linear-gradient(90deg, rgba(7,7,7,.97) 0, rgba(7,7,7,.94) calc(var(--col-fim) - 140px), rgba(7,7,7,.55) calc(var(--col-fim) + 30px), rgba(7,7,7,0) calc(var(--col-fim) + 170px)); }
  /* a grade de painéis, sutil, só no lado escuro */
  .hero::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background-image: linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px);
    background-size: 120px 120px; background-position: var(--esq) 0;
    -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(var(--col-fim) - 200px), transparent calc(var(--col-fim) + 40px));
    mask-image: linear-gradient(90deg, #000 0, #000 calc(var(--col-fim) - 200px), transparent calc(var(--col-fim) + 40px)); }
  .hero__texto { margin: 0 0 0 var(--esq); width: var(--col); padding: calc(var(--topo-h) + 40px) 0 96px; }
  .hero h1 { font-size: clamp(2.75rem, 1.2rem + 3.1vw, 4rem); max-width: none; }
  .hero__sub { margin-top: 18px; }
  .hero__acao { margin-top: 30px; flex-direction: row; align-items: center; gap: 10px 18px; flex-wrap: wrap; }
  .hero .apoio { margin-top: 10px; text-align: left; }
  .hero__chips { margin-top: 30px; }
  .hero__cartoes { display: block; position: absolute; inset: 0; z-index: 1; pointer-events: none; --dir: max(40px, calc((100% - var(--larg)) / 2)); }
  .flutua--arte { right: calc(var(--dir) - 24px); top: 17%; }
  .flutua--motion { right: calc(var(--dir) - 30px); top: 52%; z-index: -1; }   /* abaixo da arte, longe do rosto (a 1600 encostava na mandíbula) */
  .flutua--pedido { left: calc(var(--col-fim) + 36px); top: 63%; width: max-content; max-width: 280px; }
  /* a pílula de preço no canto de baixo */
  .hero__preco { position: absolute; z-index: 3; right: max(40px, calc((100% - var(--larg)) / 2)); bottom: 32px; display: flex; align-items: center; gap: 16px;
    padding: 8px 8px 8px 22px; border-radius: 999px; background: rgba(10,10,10,.8); -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%);
    border: 1px solid rgba(255,255,255,.16); box-shadow: 0 24px 50px -20px rgba(0,0,0,.7); color: var(--branco); }
  .hero__preco p { display: flex; flex-direction: column; gap: 3px; font: 500 .8125rem/1.15 var(--f); }
  .hero__de { color: var(--nota-palco); text-decoration-thickness: 1.5px; }
  .hero__por small { font-size: .75rem; color: var(--apoio-palco); text-transform: uppercase; letter-spacing: .08em; }
  .hero__por b { font: 650 1.25rem/1 var(--f); letter-spacing: -.02em; }
  .hero__preco-cta { display: inline-flex; align-items: center; min-height: 48px; padding: 0 22px; border-radius: 999px; background: var(--lime); color: #000;
    font: 600 .9375rem/1 var(--f); text-decoration: none; transition: box-shadow .3s var(--ease-out); }
  @media (hover: hover) { .hero__preco-cta:hover { box-shadow: 0 0 30px rgba(216,255,0,.4); } }
}
@media (min-width: 900px) and (max-width: 1199px) { .flutua--motion { display: none; } }   /* menos espaço em volta dele: 2 cartões */
@media (min-width: 900px) and (max-height: 640px) { .flutua--pedido { display: none; } }

/* o bloco "Ficou na dúvida?" (fica no fim das Dúvidas) */
.duvida { margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--fio); display: grid; gap: 14px; }
.duvida p { font-size: .9375rem; line-height: 1.4; color: var(--tx-fraco); max-width: 40ch; }
.duvida b { color: var(--tx); }

/* ═══ O QUE É (papel) ════════════════════════════════════════════════════ */
.oque__grade { display: grid; grid-template-columns: minmax(0, 1fr); gap: 48px; }
.oque .lead { margin-top: 22px; }
.oque__foto { display: none; position: relative; isolation: isolate; }
.oque__foto img { border-radius: var(--raio-peca); aspect-ratio: 4 / 5; object-fit: cover; object-position: 49% 32%; filter: drop-shadow(0 26px 40px rgba(0,0,0,.18)); }
.oque__foto .asterisco { position: absolute; z-index: -1; width: clamp(150px, 18vw, 260px); left: -38%; top: 46%; }
.passos { display: grid; margin-top: 4px; }
.passo { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 18px; padding: clamp(20px, 2vw + 12px, 26px) 0; border-bottom: 1px solid var(--fio); }
.passo:last-child { border-bottom: 0; }
.passo .num { font-size: clamp(3rem, 2rem + 4vw, 5rem); min-width: .8em; color: #000; }
.passo h3 { font: 600 clamp(1.25rem, 1.1rem + .7vw, 1.625rem)/1.2 var(--f); letter-spacing: -.02em; }
.passo p { margin-top: 8px; color: var(--tx-fraco); }
.passo a { font-weight: 600; text-underline-offset: .18em; display: inline-block; padding: 12px 0; margin: -12px 0; }
.passo--cartao { margin-top: 10px; padding: clamp(22px, 3vw, 36px); border: 0; border-radius: var(--raio-cartao); background: var(--palco-base); background-image: var(--palco); color: var(--branco); }
.passo--cartao .num { color: var(--lime); }
.passo--cartao p { color: var(--apoio-palco); }
.passo--cartao :focus-visible { outline-color: var(--lime); }
.regua { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr) minmax(0, 1fr); gap: 2px; margin-top: 20px; border-radius: 14px; overflow: hidden; }
.regua__p { display: grid; align-content: center; gap: 2px; min-height: 72px; padding: 10px 12px; background: #1C1C1C; color: #9A9A9A; font-size: .8125rem; line-height: 1.25; }
.regua__p i { font-style: normal; font-size: .6875rem; letter-spacing: .2em; color: #9A9A9A; }
@media (max-width: 399px) { .regua { grid-template-columns: minmax(0, 1fr); } .regua__p { grid-template-columns: 4.8em minmax(0, 1fr); align-items: baseline; min-height: 0; padding: 10px 12px; font-size: .8125rem; } .passo--cartao { padding: 22px 18px; } .passo { gap: 12px; } }
.regua__p--off { color: #8E8E8E; }
.regua__p--off i { color: #8E8E8E; }
.regua__p--pro { background: var(--lime); color: #000; font-weight: 600; }
.regua__p--pro i { color: #000; }
@media (min-width: 900px) {
  .oque__grade { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 64px; align-items: center; }
  .oque__foto { display: block; width: min(300px, 70%); margin: 36px 0 0 18%; }
}

/* ═══ A VIRADA (palco) ═══════════════════════════════════════════════════ */
.virada__cab { text-align: center; }
.virada__cab .fina { margin: 0 auto; }
.virada__cab .esp { padding-left: .42em; }
.virada__grade { display: grid; gap: 40px; margin-top: 56px; align-items: center; }
.virada .som { --som-larg: 240px; --som-bg: var(--lime); --som-tx: #000; }
.virada .som__video { border-radius: 20px; box-shadow: 0 40px 80px -30px rgba(0,0,0,.8), 0 0 0 1px var(--fio); }
.virada .som__legenda { color: var(--apoio-palco); }
.claude { margin-top: 0; max-width: 760px; background: #141414; border: 1px solid var(--fio); border-radius: 20px; box-shadow: 0 40px 80px -40px rgba(0,0,0,.9); overflow: hidden; }
.claude__barra { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border-bottom: 1px solid var(--fio); }
.claude__barra i { width: 10px; height: 10px; border-radius: 50%; background: #3A3A3A; flex: none; }
.claude__barra .esp { margin-left: 8px; font-size: .6875rem; letter-spacing: .3em; color: var(--apoio-palco); }
.claude__barra .serif { text-transform: none; letter-spacing: 0; font-size: 1.5em; color: var(--lime); }
.claude__corpo { padding: 20px 16px 16px; display: grid; gap: 16px; }
.claude__balao { justify-self: end; max-width: 92%; background: #222; border-radius: 18px 4px 18px 18px; padding: 14px 18px; font-size: clamp(.9375rem, .9rem + .3vw, 1.1875rem); line-height: 1.5; color: var(--branco); }
.claude__balao b { color: var(--lime); font-weight: 600; }
.claude__campo { display: flex; align-items: center; justify-content: space-between; height: 52px; padding: 0 8px 0 20px; border-radius: 26px; background: #1A1A1A; border: 1px solid var(--fio); color: #6B6B6B; font-size: .95rem; }
.claude__campo i { width: 36px; height: 36px; border-radius: 50%; background: var(--lime); position: relative; }
.claude__campo i::before { content: ""; position: absolute; left: 50%; top: 50%; width: 9px; height: 9px; border-top: 2px solid #000; border-right: 2px solid #000; translate: -65% -50%; rotate: 45deg; }
.claude__pe { margin-top: 18px; color: var(--apoio-palco); max-width: 52ch; }
.claude__pe b { color: var(--branco); }
.pilula--lado { margin-top: 20px; }
@media (max-width: 899px) { .pilula--lado, .claude__campo { display: none; } }   /* no celular a barra fixa já leva à compra; o campo é só enfeite */
@media (min-width: 900px) { .virada .som { --som-larg: 360px; } .virada__grade { grid-template-columns: 5fr 7fr; gap: 64px; margin-top: 72px; } .claude__corpo { padding: 24px 22px 20px; } }

/* portfólio por categoria */
.port { margin-top: clamp(56px, 3rem + 3vw, 96px); padding-top: clamp(44px, 2.5rem + 2vw, 72px); border-top: 1px solid var(--fio); }
.port__cab { display: grid; gap: 14px; }
.port__titulo { font-size: clamp(1.875rem, 1.2rem + 2.8vw, 3.25rem); max-width: 22ch; }
.port__sub { color: var(--apoio-palco); max-width: 56ch; }
.amostra { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; margin-top: 28px; padding: 12px; border-radius: 20px; border: 1px solid var(--fio);
  background: rgba(255,255,255,.03); color: var(--apoio-palco); text-decoration: none; transition: border-color .2s, background-color .2s; }
.amostra__fotos { display: flex; gap: 6px; flex: none; }
.amostra__fotos img { width: auto; height: 72px; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 6px; box-shadow: 0 0 0 1px var(--fio); }
.amostra__tx { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; font-size: .9375rem; line-height: 1.35; }
.amostra__tx b { font-family: var(--f-serif); font-style: italic; font-weight: 900; font-variation-settings: 'wght' 900, 'opsz' 6; font-size: 1.5em; line-height: 1; color: var(--branco); }
.amostra__ver { flex-basis: 100%; margin-top: 4px; font-weight: 600; color: var(--branco); text-decoration: underline; text-underline-offset: .25em; text-decoration-color: rgba(255,255,255,.35); }
@media (hover: hover) { .amostra:hover { border-color: rgba(255,255,255,.4); background: rgba(255,255,255,.06); } }
@media (max-width: 599px) { .amostra { gap: 10px 14px; } .amostra__fotos img { height: 60px; } .amostra__fotos img:nth-child(n+5) { display: none; } .amostra__tx { font-size: .875rem; } .amostra__ver { margin-top: 0; } }
@media (min-width: 600px) and (max-width: 899px) { .amostra__fotos img:nth-child(n+7) { display: none; } }
.abas { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 28px; }
.abas[hidden] { display: none; }
.aba { display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 18px; border-radius: 24px; border: 1.5px solid var(--contorno); background: transparent; color: var(--tx);
  font: 500 1rem/1 var(--f); cursor: pointer; transition: background-color .2s, color .2s, border-color .2s; }
.aba__n { font-family: var(--f-serif); font-style: italic; font-weight: 900; font-variation-settings: 'wght' 900, 'opsz' 6; font-size: 1.2em; line-height: 1; color: var(--serif-cor); }
.aba[aria-selected="true"] { background: var(--lime); border-color: var(--lime); color: #000; font-weight: 600; }
.aba[aria-selected="true"] .aba__n { color: #000; }
@media (hover: hover) { .aba[aria-selected="false"]:hover { border-color: var(--tx); } }
.cats { margin-top: 32px; }
.cat + .cat { margin-top: 72px; }
html.js-abas .cat + .cat { margin-top: 0; }
.cat[hidden] { display: none; }
.cat:focus-visible { outline-offset: 8px; }
.cat__nome { font: 600 clamp(1.25rem, 1.1rem + .7vw, 1.625rem)/1.2 var(--f); letter-spacing: -.02em; display: flex; align-items: baseline; gap: 10px; margin-bottom: 10px; }
html.js-abas .cat__nome { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.cat__intro { color: var(--apoio-palco); max-width: 60ch; margin-bottom: 24px; }
html.js-abas .cat { animation: entra-cat .32s var(--ease-out); }
@keyframes entra-cat { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

.fileira { display: grid; grid-auto-flow: column; grid-auto-columns: min(52%, 210px); gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory;
  margin-inline: calc(var(--gutter) * -1); padding: 4px var(--gutter) 14px; scroll-padding-inline: var(--gutter); scrollbar-width: thin; }
.fileira > li { scroll-snap-align: start; }
@media (min-width: 640px) { .fileira { grid-auto-flow: row; grid-template-columns: repeat(3, minmax(0, 300px)); grid-auto-columns: auto; overflow: visible; margin-inline: 0; padding: 0; } }
@media (min-width: 1000px) { .cat--motion .fileira { grid-template-columns: repeat(3, minmax(0, 320px)); justify-content: space-between; } }
@media (min-width: 640px) { .fileira--ed { grid-template-columns: repeat(2, minmax(0, 300px)); } }
@media (min-width: 1000px) { .cat--edicao { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); column-gap: 56px; align-items: center; }
  .cat--edicao .cat__intro { font-size: clamp(1.125rem, 1rem + .5vw, 1.375rem); line-height: 1.4; margin: 0; }
  .fileira--ed { grid-template-columns: repeat(2, minmax(0, 340px)); justify-content: end; gap: 24px; } }
.vid { width: 100%; aspect-ratio: 9 / 16; object-fit: cover; border-radius: 16px; background: #111; box-shadow: 0 0 0 1px var(--fio), 0 30px 60px -30px rgba(0,0,0,.8); }
.peca__rotulo { margin-top: 14px; font-size: .6875rem; letter-spacing: .3em; color: var(--lime); }
.peca__titulo { margin-top: 6px; font-size: .9375rem; line-height: 1.35; color: var(--branco); }

.edicao { display: grid; gap: 36px; align-items: center; margin-top: clamp(64px, 3rem + 3vw, 104px); }
.edicao__titulo { font-size: clamp(1.75rem, 1.2rem + 2.4vw, 3rem); max-width: 16ch; }
.edicao__texto > p:not(.edicao__titulo):not(.edicao__bilhete) { margin-top: 18px; color: var(--apoio-palco); max-width: 46ch; }
.edicao__bilhete b { white-space: nowrap; }
.edicao__bilhete { --sombra-rasgo: rgba(0,0,0,.35); display: inline-block; margin-top: 28px; padding: 18px 26px; rotate: -3deg; font-size: 1rem; max-width: 300px; }
.par { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; max-width: 560px; }
.par__lado { position: relative; }
.par__lado .vid { border-radius: 4px; }
.par__lado--depois { margin-top: 48px; }
@media (max-width: 899px) { .par { max-width: 320px; margin: 0 auto; width: 100%; } .par__lado--depois { margin-top: 28px; } .edicao__bilhete { margin-top: 20px; padding: 14px 22px; } }
.par figcaption { margin-top: 10px; font-size: .875rem; color: var(--apoio-palco); }
.etq { position: absolute; z-index: 2; left: 10px; top: 10px; padding: 4px 8px 4px 11px; font-size: .6875rem; letter-spacing: .3em; color: #000; background: var(--branco); }
.etq--depois { background: var(--lime); rotate: -3deg; }
.estrela--par { position: absolute; right: -10px; top: -18px; z-index: 3; width: clamp(36px, 3vw + 20px, 64px); }
.edicao__texto { grid-area: texto; } .par { grid-area: par; }
.edicao { grid-template-areas: "texto" "par"; }
@media (min-width: 900px) { .edicao { grid-template-columns: 5fr 7fr; grid-template-areas: "texto par"; column-gap: 56px; align-items: center; } .par { gap: 24px; justify-self: end; width: 100%; } }

.colecao + .colecao { margin-top: 48px; }
.colecao__cab { display: grid; gap: 6px; margin-bottom: 18px; }
.colecao__nome { font: 600 clamp(1.125rem, 1rem + .5vw, 1.375rem)/1.2 var(--f); letter-spacing: -.02em; }
.colecao__nome span { font-weight: 300; color: var(--apoio-palco); }
.colecao__linha { color: var(--apoio-palco); font-size: .9375rem; }
.colecao__linha b { font-family: var(--f-serif); font-style: italic; font-weight: 900; font-variation-settings: 'wght' 900, 'opsz' 6; color: var(--lime); font-size: 1.35em; }
.mosaico { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
@media (min-width: 1000px) { .mosaico { grid-template-columns: repeat(8, 1fr); gap: 10px; } }
.mosaico--fotos { grid-template-columns: repeat(3, 1fr); }
@media (min-width: 640px) { .mosaico--fotos { grid-template-columns: repeat(5, 1fr); } }
@media (min-width: 1000px) { .mosaico--fotos { grid-template-columns: repeat(9, 1fr); } }
.arte { display: block; border-radius: 6px; overflow: hidden; background: #161616; box-shadow: 0 0 0 1px var(--fio); transition: transform .3s var(--ease-out), box-shadow .3s; }
.arte img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
.arte--mais { display: grid; place-items: center; aspect-ratio: 3 / 4; padding: 10px; text-align: center; background: #141414; color: var(--apoio-palco); font-size: .8125rem; line-height: 1.25; }
.arte--mais b { display: block; font-family: var(--f-serif); font-style: italic; font-weight: 900; font-variation-settings: 'wght' 900, 'opsz' 6; font-size: clamp(1.75rem, 1rem + 2vw, 2.75rem); line-height: 1; color: var(--lime); }
@media (hover: hover) { .arte:hover { transform: translateY(-4px) scale(1.04); box-shadow: 0 0 0 1px rgba(216,255,0,.7), 0 22px 40px -18px rgba(0,0,0,.9); position: relative; z-index: 2; } }

.sites { display: grid; gap: 14px; grid-auto-flow: column; grid-auto-columns: min(78%, 320px); overflow-x: auto; scroll-snap-type: x mandatory; margin-inline: calc(var(--gutter) * -1); padding: 4px var(--gutter) 14px; scroll-padding-inline: var(--gutter); }
.sites > li { scroll-snap-align: start; }
@media (min-width: 640px) { .sites { grid-auto-flow: row; grid-template-columns: repeat(3, 1fr); grid-auto-columns: auto; overflow: visible; margin-inline: 0; padding: 0; gap: 24px; } }
.site__barra { display: flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px; background: #1E1E1E; border-radius: 12px 12px 0 0; border: 1px solid var(--fio); border-bottom: 0; }
.site__barra i { width: 8px; height: 8px; border-radius: 50%; background: #3A3A3A; flex: none; }
.site__barra span { margin-left: 8px; font-size: .75rem; color: var(--nota-palco); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.site img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; object-position: top; border: 1px solid var(--fio); border-top: 0; border-radius: 0 0 12px 12px; }

.port__ig { margin-top: 48px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; color: var(--apoio-palco); }
.ig--port { background: var(--branco); color: #000; min-height: 52px; padding: 0 22px 0 16px; font-size: 1rem; }
.ig--port .ic { width: 22px; height: 22px; }
@media (hover: hover) { .ig--port:hover { box-shadow: 0 0 0 4px rgba(252,252,252,.18); } }

/* ═══ O PROCESSO (papel) ═════════════════════════════════════════════════ */
.trilho { display: grid; gap: 0; margin-top: 48px; position: relative; }
.estacao { position: relative; display: grid; align-content: start; min-width: 0; grid-template-columns: 88px 1fr; grid-template-rows: auto auto 1fr; column-gap: 18px; padding-bottom: 30px; }
.estacao > img, .estacao > .campanha { grid-row: 1 / span 3; width: 88px; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--raio-peca); box-shadow: 0 18px 40px -22px rgba(0,0,0,.45); background: #ddd; }
.estacao h3 { font: 600 1.25rem/1.2 var(--f); letter-spacing: -.02em; display: flex; align-items: baseline; gap: 8px; }
.estacao__n { font: 600 .75rem/1 var(--f-esp); letter-spacing: .2em; color: var(--nota-papel); }
.tempo { justify-self: start; margin: 8px 0; padding: 4px 10px; background: #000; color: var(--branco); font-weight: 600; font-size: .9375rem; line-height: 1.3; }
.estacao p:not(.tempo) { color: var(--tx-fraco); font-size: 1rem; line-height: 1.45; }
@media (max-width: 899px) {
  .estacao { padding-bottom: 34px; }
  .estacao:not(:last-child)::after { content: "vira"; position: absolute; left: 44px; bottom: 4px; translate: -50% 0; font: italic 900 1rem/1 var(--f-serif); font-variation-settings: 'wght' 900, 'opsz' 11; color: #000; background: var(--papel-base); padding: 2px 4px; }
  .estacao:not(:last-child)::before { content: ""; position: absolute; left: 43px; top: 116px; bottom: 6px; width: 2px; background: #000; }
}
.campanha { display: grid; align-content: center; min-width: 0; overflow: hidden; gap: 5px; padding: 8px; background: #000 !important; color: var(--branco); font-size: .625rem; line-height: 1.2; }
.campanha .esp { font-size: .5rem; letter-spacing: .2em; color: var(--branco); }
.campanha > span:not(.esp) { display: flex; align-items: center; gap: 4px; }
.campanha .mais { width: 10px; height: 10px; margin: 0; background: var(--branco); }
.campanha .mais::before, .campanha .mais::after { width: 6px; height: 1.5px; background: #000; }
@media (min-width: 900px) {
  .trilho { grid-template-columns: repeat(5, 1fr); column-gap: 40px; }
  .estacao { grid-template-columns: 1fr; grid-template-rows: auto; padding-bottom: 0; }
  .estacao > img, .estacao > .campanha { grid-row: auto; width: 100%; margin-bottom: 18px; }
  /* os conectores ficam na estação SEGUINTE, à esquerda dela (não estouram a caixa para a direita) */
  .estacao + .estacao::before { content: ""; position: absolute; left: -36px; top: 34%; width: 32px; height: 2px; background: #000; }
  .estacao + .estacao::after { content: "vira"; position: absolute; left: -20px; top: calc(34% - 26px); translate: -50% 0; font: italic 900 1rem/1 var(--f-serif); font-variation-settings: 'wght' 900, 'opsz' 11; color: #000; }
  .campanha { font-size: .9rem; gap: 10px; padding: 16px; }
  .campanha .esp { font-size: .6875rem; letter-spacing: .3em; }
  .campanha .mais { width: 16px; height: 16px; } .campanha .mais::before, .campanha .mais::after { width: 8px; height: 2px; }
  .campanha > span:not(.esp) { gap: 8px; }
}
.destaque { display: grid; gap: 32px; margin-top: clamp(40px, 2rem + 3vw, 96px); align-items: end; }
.destaque__foto { display: none; }   /* no celular, o número fala sozinho (página mais curta) */
.destaque__foto img { border-radius: var(--raio-peca); aspect-ratio: 4 / 5; object-fit: cover; object-position: 37% 30%; box-shadow: 0 30px 60px -30px rgba(0,0,0,.5); }
.destaque__frase { font-size: clamp(1.5rem, 1rem + 2vw, 2.5rem); line-height: 1.1; letter-spacing: -.04em; max-width: 18ch; }
.destaque__num { position: relative; display: flex; align-items: flex-end; margin: 8px 0 18px; isolation: isolate; }
.numero { font-size: clamp(8rem, 3rem + 22vw, 18rem); line-height: .86; letter-spacing: -.06em; background: var(--cromo); -webkit-background-clip: text; background-clip: text; color: transparent; padding-right: .06em; }
.chapa-dias { position: relative; z-index: 2; margin: 0 0 .25em -.15em; background: var(--lime); color: #000; font: 300 clamp(2rem, 1.2rem + 3vw, 3.5rem)/1 var(--f); letter-spacing: -.04em; padding: .04em .18em .08em; }
.asterisco--2 { position: absolute; z-index: -1; width: clamp(110px, 13vw, 200px); left: -6%; top: 52%; translate: 0 -50%; }
.destaque__dias { font-weight: 500; max-width: 46ch; }
.destaque .nota { margin-top: 10px; }
@media (min-width: 900px) { .destaque { grid-template-columns: 5fr 7fr; gap: 56px; } .destaque__foto { display: block; width: 100%; max-width: 300px; margin: 0; } }

/* ═══ SEM CARA DE IA (palco) ═════════════════════════════════════════════ */
.como__grade { display: grid; gap: 56px; align-items: center; }
.como .lead { margin-top: 22px; }
.pilha { position: relative; width: clamp(180px, 52vw, 210px); aspect-ratio: 3 / 4; --passo: 14px; margin: 0 auto calc(5 * var(--passo)) calc(50% - 105px + 2.5 * var(--passo)); }
@media (min-width: 900px) { .pilha { width: clamp(240px, 24vw, 320px); --passo: 22px; margin: 0 0 calc(5 * var(--passo)) calc(5 * var(--passo) + 10px); } }
.camada { position: absolute; inset: 0; border-radius: var(--raio-peca); transform: translate(calc(var(--i) * var(--passo) * -1), calc(var(--i) * var(--passo))); }
.c1 { --i: 5; background: #0A0A0A; } .c2 { --i: 4; } .c3 { --i: 3; } .c4 { --i: 2; } .c5 { --i: 1; } .c6 { --i: 0; }
.camada:not(.c1) { background: rgba(20,20,20,.0); }
.camada { box-shadow: 0 0 0 1px rgba(255,255,255,.18), 0 18px 30px rgba(0,0,0,.45); }
.c3, .c4, .c5, .c6 { box-shadow: 0 0 0 1px rgba(255,255,255,.18); }
.camada__aneis { position: absolute; left: 50%; top: 42%; width: 92%; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; border: 1.5px solid rgba(255,255,255,.14); box-shadow: 0 0 0 40px transparent, inset 0 0 0 46px transparent; }
.camada__aneis::before, .camada__aneis::after { content: ""; position: absolute; inset: 16%; border-radius: 50%; border: 1.5px solid rgba(255,255,255,.12); }
.camada__aneis::after { inset: 32%; }
.c2 img { width: 100%; height: 100%; border-radius: inherit; object-fit: cover; object-position: 51% 40%; opacity: .92; }
.camada__fina { position: absolute; left: 0; right: 0; top: 3%; text-align: center; font: 250 clamp(1rem, .8rem + 1vw, 1.5rem)/1 var(--f); font-variation-settings: 'opsz' 96; letter-spacing: -.04em; color: var(--branco); }
.camada__serif { position: absolute; left: 0; right: 0; top: 17%; text-align: center; font: italic 900 clamp(2.6rem, 1.6rem + 3vw, 4rem)/1 var(--f-serif); font-variation-settings: 'wght' 900, 'opsz' 11; letter-spacing: -.04em; color: var(--branco); }
.camada__estrela { position: absolute; right: 9%; top: 9%; width: 13%; fill: var(--lime); }
.camada__assina { position: absolute; left: 0; right: 0; bottom: 6%; text-align: center; font: 600 .5625rem/1 var(--f-esp); letter-spacing: .42em; text-transform: uppercase; color: var(--branco); }
.camada__rot { position: absolute; white-space: nowrap; font-size: .625rem; letter-spacing: .25em; color: var(--lime); display: none; }
@media (min-width: 900px) {
  .camada__rot { display: block; left: calc(100% + 18px + var(--i) * var(--passo)); top: calc(6% + var(--i) * 15% - var(--i) * var(--passo)); }
  .camada__rot::before { content: ""; display: inline-block; vertical-align: middle; width: 22px; height: 1px; margin-right: 8px; background: rgba(255,255,255,.3); }
}
.programas { margin-top: 30px; display: grid; }
.programas li { display: grid; gap: 6px; padding: 16px 0; border-top: 1px solid var(--fio); }
.programas li:last-child { border-bottom: 1px solid var(--fio); }
.programas b { font-weight: 600; color: var(--branco); }
.programas span { color: var(--apoio-palco); }
.confere { margin-top: 24px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; color: var(--apoio-palco); line-height: 1.4; }
.chk { display: inline-flex; align-items: center; gap: 7px; min-height: 36px; padding: 0 14px 0 11px; border-radius: 18px; border: 1.5px solid var(--contorno); color: var(--branco); font-size: .9375rem; }
.chk::before { content: ""; width: 10px; height: 6px; border-left: 2px solid var(--lime); border-bottom: 2px solid var(--lime); rotate: -45deg; translate: 0 -2px; }
@media (min-width: 900px) { .como__grade { grid-template-columns: 5fr 7fr; gap: 48px; } .como__texto { order: -1; } .aneis--pilha { --ax: 68%; } }

/* ═══ REVENDER (papel) ═══════════════════════════════════════════════════ */
.revender { padding-top: 0; }
.revender__foto { display: none; }
.revender__foto img { width: 100%; object-fit: cover; }
.revender__grade { padding-top: var(--dobra-y); }
.revender__texto .fina { max-width: 16ch; }
.abas--rev { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; padding: 4px; border: 1.5px solid var(--contorno); border-radius: 32px; }
.abas--rev .aba { justify-content: center; min-height: 56px; padding: 6px 10px; border: 0; border-radius: 28px; font-size: .9375rem; line-height: 1.15; text-align: center; color: #000; }
.abas--rev .aba[aria-selected="true"] { background: #000; color: var(--branco); }
.rev-paineis { margin-top: 26px; }
.rev + .rev { margin-top: 32px; }
html.js-abas .rev + .rev { margin-top: 0; }
.rev[hidden] { display: none; }
.rev h3 { font: 600 clamp(1.25rem, 1.1rem + .7vw, 1.625rem)/1.2 var(--f); letter-spacing: -.02em; }
.rev p { margin-top: 10px; color: var(--tx-fraco); max-width: 48ch; }
html.js-abas .rev { animation: entra-cat .24s var(--ease-out); }
.fluxo { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 18px !important; }
.fluxo span { display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; border-radius: 20px; border: 1.5px solid var(--contorno); color: #000; font-size: .9375rem; }
.fluxo span:last-child { background: #000; color: var(--branco); border-color: #000; }
.fluxo i { font-style: normal; color: #000; }
.revender .nota { margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--fio); }
@media (max-width: 419px) { .fluxo { gap: 6px; } .fluxo span { min-height: 36px; padding: 0 12px; font-size: .875rem; } }
@media (min-width: 900px) {
  .revender { padding-top: var(--dobra-y); min-height: 680px; }
  .revender__foto { display: block; position: absolute; left: 0; top: 0; bottom: 0; width: 46%; }
  .revender__foto img { height: 100%; aspect-ratio: auto; object-position: 50% 18%; }
  .revender__grade { padding-top: 0; display: grid; grid-template-columns: 1fr 1fr; }
  .revender__texto { grid-column: 2; padding-left: 24px; }
}

/* ═══ SIMULADOR (palco) ══════════════════════════════════════════════════ */
.sim__dentro { text-align: center; }
.sim__dentro > .esp { padding-left: .42em; }
.sim__dentro .fina { margin: 0 auto; }
.sim .fina .serif { color: var(--branco); }
.painel { max-width: 880px; margin: 48px auto 0; padding: clamp(24px, 4vw, 48px); background: var(--cartao-palco); border: 1px solid rgba(255,255,255,.10); border-radius: var(--raio-cartao); text-align: left; }
.sim__controles { display: grid; gap: 24px; }
.sim__controles[hidden], .sim__resultado[hidden], .cenarios[hidden] { display: none; }
@media (min-width: 640px) { .sim__controles { grid-template-columns: 1fr 1fr; gap: 40px; } }
.controle label { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; color: var(--apoio-palco); font-size: .9375rem; }
.controle output { color: var(--branco); font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; font-size: 1.0625rem; }
.controle input[type=range] { --p: 50%; -webkit-appearance: none; appearance: none; width: 100%; height: 44px; margin: 6px 0 0; background: transparent; cursor: pointer; }
.controle input[type=range]::-webkit-slider-runnable-track { height: 6px; border-radius: 3px; background: linear-gradient(90deg, var(--lime) var(--p), rgba(255,255,255,.16) var(--p)); }
.controle input[type=range]::-moz-range-track { height: 6px; border-radius: 3px; background: rgba(255,255,255,.16); }
.controle input[type=range]::-moz-range-progress { height: 6px; border-radius: 3px; background: var(--lime); }
.controle input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 28px; height: 28px; margin-top: -11px; border-radius: 50%; background: var(--lime); border: 3px solid #000; box-shadow: 0 0 0 1px var(--lime); }
.controle input[type=range]::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; background: var(--lime); border: 3px solid #000; }
.controle input[type=range]:hover::-webkit-slider-thumb, .controle input[type=range]:active::-webkit-slider-thumb { box-shadow: 0 0 0 6px rgba(216,255,0,.18); }
.controle input[type=range]:focus-visible { outline: 3px solid var(--branco); outline-offset: 6px; }
.sim__resultado { margin-top: 32px; padding-top: 28px; border-top: 1px solid var(--fio); text-align: center; }
.sim__resultado .esp { padding-left: .42em; }
.sim__mes { position: relative; display: inline-flex; align-items: center; gap: 10px; margin-top: 6px; font-family: var(--f-serif); font-style: italic; font-weight: 900; font-variation-settings: 'wght' 900, 'opsz' 6;
  font-size: clamp(3.25rem, 2rem + 6vw, 7rem); line-height: 1; letter-spacing: -.05em; color: var(--lime); font-variant-numeric: lining-nums; white-space: nowrap; }
.estrela--sim { width: clamp(26px, 2vw + 16px, 40px); }
@media (max-width: 419px) { .estrela--sim { display: none; } .sim__mes { font-size: clamp(2.5rem, 12.5vw, 3.25rem); } }
.sim__ano { font: 300 clamp(1.25rem, 1rem + 1vw, 1.75rem)/1.2 var(--f); letter-spacing: -.03em; color: var(--apoio-palco); }
.sim__ano b { color: var(--branco); font-weight: 500; }
.mes { display: grid; grid-template-columns: repeat(15, 1fr); gap: 3px; margin: 24px auto 8px; max-width: 640px; }
@media (min-width: 640px) { .mes { grid-template-columns: repeat(30, 1fr); } }
.mes i { height: 18px; border-radius: 3px; background: rgba(255,255,255,.1); transition: background-color .2s; }
.mes i.on { background: var(--lime); }
.sim__dias { color: var(--apoio-palco); font-size: .9375rem; }
.sim__dias b { color: var(--branco); }
.sim__aviso { margin-top: 18px; font-size: .875rem; line-height: 1.45; color: var(--nota-palco); text-align: center; }
.cenarios { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.cenarios th, .cenarios td { padding: 12px 8px; text-align: left; border-bottom: 1px solid var(--fio); }
.cenarios thead th { font: 600 .6875rem/1.3 var(--f-esp); letter-spacing: .2em; text-transform: uppercase; color: var(--nota-palco); }
.cenarios tbody th { font-weight: 600; }
.cenarios b { color: var(--lime); font-weight: 600; white-space: nowrap; }
@media (max-width: 599px) {
  .cenarios thead { display: none; }
  .cenarios tr { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 12px; padding: 14px 0; border-bottom: 1px solid var(--fio); }
  .cenarios th, .cenarios td { border: 0; padding: 0; }
  .cenarios tbody th { grid-column: 1 / -1; font-size: 1.0625rem; }
  .cenarios td::before { content: attr(data-rotulo) ": "; color: var(--nota-palco); font-size: .875rem; }
}
.sim .nota { margin: 22px auto 0; text-align: center; }

/* ═══ ECONOMIA: a dobra destacada (papel) ════════════════════════════════ */
.economia .esp--centro { margin-bottom: 18px; }
.economia .anton { color: #000; }
@media (min-width: 900px) { .economia .anton { max-width: 22ch; } }
.colagem { position: relative; display: grid; gap: 0; margin-top: clamp(40px, 3rem + 2vw, 72px); }
.recibo { width: min(100%, 560px); padding: clamp(28px, 4vw, 44px) clamp(20px, 3.5vw, 40px); rotate: -.5deg; }
.recibo .esp { color: var(--apoio-papel); }
.recibo__sub { color: var(--nota-papel); font-size: .9375rem; margin-bottom: 10px; }
.recibo__tab { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.recibo__tab th, .recibo__tab td { vertical-align: baseline; padding: 8px 0; border-bottom: 1px dotted rgba(0,0,0,.25); font-size: 1rem; }
.recibo__tab th { text-align: left; font-weight: 400; color: var(--apoio-papel); padding-right: 12px; }
.recibo__tab td { text-align: right; font-weight: 500; color: #000; white-space: nowrap; }
.recibo__total { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin-top: 18px; }
.recibo__total > span:first-child { font-weight: 600; }
.recibo__total .num-m { font-size: clamp(2.25rem, 1.5rem + 3vw, 3.5rem); color: #000; white-space: nowrap; }
.recibo__ano { font-weight: 500; font-size: 1rem; color: var(--apoio-papel); }
.recibo__pe { margin-top: 14px; font-size: .9375rem; line-height: 1.45; color: var(--apoio-papel); }
.cartao-ag { position: relative; margin-top: -18px; padding: 36px clamp(24px, 3vw, 36px) 32px; border-radius: var(--raio-cartao); background: var(--palco-base); background-image: var(--palco); color: var(--branco); box-shadow: 0 30px 60px rgba(0,0,0,.35); }
.cartao-ag .esp { color: var(--lime); }
.cartao-ag__preco { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; margin-top: 8px; }
.cartao-ag__preco .num-m { font-size: clamp(3rem, 2rem + 4vw, 5rem); color: var(--lime); white-space: nowrap; }
.cartao-ag__preco span { font: 300 1.5rem/1 var(--f); letter-spacing: -.03em; }
.cartao-ag__apoio { margin: 8px 0 0; color: var(--apoio-palco); }
.cartao-ag__economia { margin: 16px 0 22px; padding: 14px 16px; border-radius: 14px; background: rgba(216,255,0,.08); border: 1px solid rgba(216,255,0,.35); color: var(--branco); line-height: 1.4; }
.cartao-ag__economia b { color: var(--lime); font-weight: 650; white-space: nowrap; }
.cartao-ag .mais-lista span { color: var(--apoio-palco); } .cartao-ag .mais-lista b { color: var(--branco); }
.cartao-ag__cta { width: 100%; margin-top: 26px; }
@media (max-width: 899px) { .cartao-ag__cta { display: none; } }   /* no celular a barra fixa já leva à compra */
.cartao-ag :focus-visible { outline-color: var(--lime); }
.estrela--ag { position: absolute; right: -14px; top: -26px; fill: var(--lime); }
.economia .nota--centro { margin-top: 36px; }
@media (min-width: 900px) {
  .colagem { grid-template-columns: repeat(12, 1fr); align-items: start; }
  .recibo { grid-column: 1 / 7; grid-row: 1; rotate: -1.5deg; width: 100%; }
  .cartao-ag { grid-column: 7 / 13; grid-row: 1; margin-left: -24px; margin-top: 112px; rotate: 1deg; z-index: 2; }
}

/* ═══ CHECKOUT (palco) ═══════════════════════════════════════════════════ */
.oferta__grade { display: grid; gap: 44px; }
.oferta .fina .estrela--oferta { margin: -.1em 0 0 .1em; }
.cartao { margin-top: 28px; padding: clamp(22px, 3vw, 32px); background: var(--cartao-palco); border: 1px solid rgba(255,255,255,.10); border-radius: var(--raio-cartao); }
.cartao .esp { margin-bottom: 18px; color: var(--lime); }
.cartao .mais-lista span { color: var(--apoio-palco); } .cartao .mais-lista b { color: var(--branco); }
.oferta__texto > .nota { margin-top: 16px; }
.oferta__foto { display: none; }
@media (min-width: 900px) {
  .oferta__grade { grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; }
  .oferta__foto { display: block; width: min(320px, 70%); margin-top: 36px; }
  .oferta__foto img { border-radius: var(--raio-peca); aspect-ratio: 4 / 5; object-fit: cover; object-position: 40% 36%; box-shadow: 0 30px 60px -30px rgba(0,0,0,.8); }
}
.compra { background: var(--cartao-palco); border: 1px solid rgba(255,255,255,.1); border-radius: 36px; padding: 30px 22px; align-self: start; }
.preco { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px; }
.preco__de { font: 300 1.25rem/1 var(--f); color: var(--nota-palco); text-decoration-thickness: 2px; }
.preco__valor { display: inline-block; white-space: nowrap; font-family: var(--f-serif); font-style: italic; font-weight: 900; font-variation-settings: 'wght' 900, 'opsz' 6;
  font-size: clamp(3rem, 1.8rem + 6vw, 5.5rem); line-height: 1.02; letter-spacing: -.05em; font-variant-numeric: lining-nums; padding-right: .08em; }
.preco__valor--cromo { background: var(--cromo-palco); -webkit-background-clip: text; background-clip: text; color: transparent;
  -webkit-box-reflect: below -.14em linear-gradient(transparent 58%, rgba(0,0,0,.28)); }
.preco__valor--cromo > span { background: inherit; -webkit-background-clip: text; background-clip: text; }
.preco__nota { margin-top: 26px; color: var(--apoio-palco); }
.preco__nota b { color: var(--branco); font-weight: 600; }
.form { display: grid; gap: 14px; margin-top: 28px; }
.form label { display: grid; gap: 8px; font: 600 .75rem/1 var(--f-esp); letter-spacing: .3em; text-transform: uppercase; color: var(--apoio-palco); }
.form input[type=text], .form input[type=email], .form input[type=tel] { height: 56px; padding: 0 16px; border-radius: 14px; border: 1px solid rgba(255,255,255,.16);
  background: var(--campo); color: var(--branco); font: 400 1.0625rem var(--f); letter-spacing: 0; text-transform: none; }
.form input::placeholder { color: #6b6b6b; }
.form input:focus { outline: none; border-color: var(--lime); box-shadow: 0 0 0 3px rgba(216,255,0,.22); }
.formas { border: 0; padding: 0; margin: 6px 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.formas legend { font: 600 .75rem/1 var(--f-esp); letter-spacing: .3em; text-transform: uppercase; color: var(--apoio-palco); margin-bottom: 10px; }
.forma { position: relative; cursor: pointer; }
.forma input { position: absolute; opacity: 0; inset: 0; }
.forma span { display: grid; gap: 4px; min-height: 76px; align-content: center; padding: 12px 14px; border-radius: 14px; border: 1px solid rgba(255,255,255,.16); background: var(--campo);
  font: 400 .875rem/1.3 var(--f); letter-spacing: 0; text-transform: none; color: var(--apoio-palco); transition: border-color .2s, background .2s; }
.forma span b { font-size: 1.0625rem; color: var(--branco); font-weight: 600; }
.forma input:checked + span { border-color: var(--lime); background: rgba(216,255,0,.08); box-shadow: 0 0 0 1px var(--lime); }
.forma input:focus-visible + span { outline: 3px solid var(--lime); outline-offset: 2px; }
.forma:active span { transform: scale(.985); }
.erro { padding: 12px 14px; border-radius: 12px; background: rgba(252,88,96,.12); border: 1px solid rgba(252,88,96,.4); color: #FFB3B7; font-size: .92rem; }
.form .cta { width: 100%; margin-top: 6px; padding-inline: 14px; font-size: clamp(.95rem, 3.8vw, 1.0625rem); white-space: nowrap; }
.form .cta[disabled] { opacity: .7; cursor: wait; }
.aviso { font-size: .84rem; color: var(--nota-palco); }
.aviso--termos { margin-top: 8px; }
.aviso--termos a { color: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: .18em; display: inline-block; padding: 12px 0; margin: -12px 0; }
.produto-de { display: flex; align-items: center; gap: 12px; margin-top: 26px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.1); font: 600 .6875rem/1 var(--f-esp); letter-spacing: .3em; text-transform: uppercase; color: var(--nota-palco); }
.produto-de img { height: 24px; width: auto; }
@media (min-width: 560px) { .compra { padding: 40px 36px; } }

/* ═══ DÚVIDAS (papel) ════════════════════════════════════════════════════ */
.faq h2 { margin-bottom: 32px; }
.faq details { border-bottom: 1px solid var(--fio); }
.faq summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 56px; padding: 13px 0;
  font: 500 clamp(1.0625rem, 1rem + .4vw, 1.25rem)/1.3 var(--f); letter-spacing: -.01em; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; flex: none; width: 32px; height: 32px; background: #000
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M16 9v14M9 16h14' stroke='%23D8FF00' stroke-width='2.4'/%3E%3C/svg%3E") center / 100% no-repeat;
  transition: transform .3s var(--mola); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { padding: 0 0 22px; max-width: 62ch; color: var(--apoio-papel); line-height: 1.55; }
.faq details a { font-weight: 600; display: inline-block; padding: 12px 2px; margin: -12px 0; }
.duvida--faq { margin-top: 36px; border-top: 0; padding-top: 0; }
@media (min-width: 640px) { .duvida--faq { grid-template-columns: 1fr auto; align-items: center; } }

/* ═══ RODAPÉ (palco) ═════════════════════════════════════════════════════ */
.rodape { padding: 56px 0 120px; background: var(--palco-base); color: var(--branco); }
.rodape__grade { display: grid; gap: 22px; justify-items: start; }
.rodape .logo { display: inline-flex; align-items: center; min-height: 44px; }
.rodape .logo img { height: 30px; width: auto; }
.rodape nav { display: flex; flex-wrap: wrap; gap: 4px 22px; }
.rodape nav a { display: inline-flex; align-items: center; min-height: 44px; font: 500 .95rem/1 var(--f); text-decoration: none; color: var(--apoio-palco); }
.rodape nav a:first-child { color: var(--lime); }
.ig--rodape { border: 1.5px solid rgba(255,255,255,.55); color: var(--branco); }
@media (hover: hover) { .ig--rodape:hover { background: var(--branco); color: #000; } }
.rodape__assina { color: #8A8A8A; font-size: .6875rem; }
@media (min-width: 900px) { .rodape { padding: 64px 0; } .rodape__grade { grid-template-columns: auto 1fr auto; align-items: center; gap: 24px 40px; } .rodape nav { justify-content: center; } .rodape__assina { grid-column: 1 / -1; } }

/* ═══ BARRA FIXA (só celular) ═════════════════════════════════════════════ */
.barra { position: fixed; left: 0; right: 0; bottom: 0; z-index: 80; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); background: rgba(6,6,6,.88); -webkit-backdrop-filter: blur(18px) saturate(150%); backdrop-filter: blur(18px) saturate(150%);
  color: var(--branco); transform: translateY(110%); transition: transform .55s var(--ease-out); }
.barra.vem { transform: none; }
.barra p { font: 600 .95rem/1.15 var(--f); }
.barra small { display: block; font-size: .78rem; font-weight: 400; color: var(--nota-palco); }
.barra .barra__de { margin-bottom: 2px; }
.barra__de s { text-decoration-thickness: 1.5px; }
.barra .cta { min-height: 50px; padding: 0 26px; }
@media (min-width: 900px) { .barra { display: none; } }

/* ═══ PEÇA AMPLIADA (só com JS) ══════════════════════════════════════════ */
.amplia { padding: 0; border: 0; background: transparent; max-width: min(92vw, 640px); max-height: 92vh; overflow: visible; }
.amplia::backdrop { background: rgba(0,0,0,.86); }
.amplia img { width: auto; max-width: 100%; max-height: 82vh; border-radius: 10px; margin: 0 auto; }
.amplia__fechar { display: flex; align-items: center; gap: 8px; margin: 14px auto 0; min-height: 48px; padding: 0 22px; border-radius: 24px; border: 1.5px solid rgba(255,255,255,.55);
  background: transparent; color: var(--branco); font: 500 1rem/1 var(--f); cursor: pointer; }

/* ═══ ANIMAÇÃO — revelar à prova de falha ═════════════════════════════════
 * Nada aqui esconde nada sem html.anima (que o JS só põe depois de confirmar
 * que consegue animar). Tirar .anima mostra o estado final.                  */
html.anima .anim { transition: opacity .14s var(--ease-out) var(--d, 0ms), transform .5s var(--mola) var(--d, 0ms); }
html.anima .anim:not(.ok) { opacity: 0; transform: translateY(26px) scale(.975); }
html.anima .d1 { --d: 60ms; } html.anima .d2 { --d: 120ms; } html.anima .d3 { --d: 180ms; } html.anima .d4 { --d: 240ms; }
html.anima .d5 { --d: 300ms; } html.anima .d6 { --d: 360ms; } html.anima .d7 { --d: 420ms; }
html.anima .hero__foto img { transition: transform 1.4s var(--ease-out), opacity .4s var(--ease-out); }
html.anima .hero:not(.ok) .hero__foto img { transform: scale(1.06); opacity: .01; }
html.anima .hero .d1 { --d: 100ms; } html.anima .hero .d2 { --d: 220ms; } html.anima .hero .d3 { --d: 700ms; } html.anima .hero .d4 { --d: 900ms; } html.anima .hero .d5 { --d: 1100ms; }
/* a faixa varre da esquerda; o texto aparece depois */
html.anima .faixa { transition: background-size .26s var(--ease-out) calc(var(--d, 0ms) + 120ms), color .2s var(--ease-out) calc(var(--d, 0ms) + 240ms); }
html.anima .anim:not(.ok) .faixa { background-size: 0% 100%; color: transparent; }
html.anima .hero h1 .faixa { transition-delay: calc(var(--d, 0ms) + 500ms), calc(var(--d, 0ms) + 620ms); }
/* a serifada entra 120 ms depois da linha */
html.anima .anim .serif:not(.faixa) { display: inline-block; transition: transform .52s var(--mola-viva) calc(var(--d, 0ms) + 120ms), opacity .2s var(--ease-out) calc(var(--d, 0ms) + 120ms); }
html.anima .misto .serif--g { display: block; }
html.anima .anim:not(.ok) .serif:not(.faixa) { transform: scale(1.08); opacity: 0; }
/* estrelas giram até o ângulo final */
html.anima .anim .estrela { transition: transform .6s var(--mola-viva) calc(var(--d, 0ms) + 260ms); }
html.anima .anim:not(.ok) .estrela { transform: rotate(-20deg) scale(.6); }
/* anéis pulsando (só na tela) */
html.anima .aneis i { animation: pulsa 8s var(--ease-seno) calc(var(--n) * .5s) infinite; }
.aneis.parada i { animation-play-state: paused; }
@keyframes pulsa { 0%, 100% { opacity: .55; transform: scale(.99); } 50% { opacity: 1; transform: scale(1.01); } }
/* o trilho: as estações entram em sequência */
html.anima .trilho .estacao { transition: opacity .2s var(--ease-out), transform .5s var(--mola); }
html.anima .trilho:not(.ok) .estacao { opacity: 0; transform: translateY(20px); }
html.anima .trilho .estacao:nth-child(2) { transition-delay: 120ms; } html.anima .trilho .estacao:nth-child(3) { transition-delay: 240ms; }
html.anima .trilho .estacao:nth-child(4) { transition-delay: 360ms; } html.anima .trilho .estacao:nth-child(5) { transition-delay: 480ms; }
html.anima .trilho.anim:not(.ok) { opacity: 1; transform: none; }
/* a pilha entra montada e abre a 45° */
html.anima .pilha .camada { transition: transform 1.1s var(--mola-suave) calc(400ms + (5 - var(--i)) * 70ms); }
html.anima .pilha:not(.ok) .camada { transform: none; }
html.anima .pilha .camada__rot { transition: opacity .3s var(--ease-out) calc(1100ms + (5 - var(--i)) * 70ms); }
html.anima .pilha:not(.ok) .camada__rot { opacity: 0; }
html.anima .pilha.anim:not(.ok) { opacity: 1; transform: none; }
/* o pedido aparece palavra a palavra */
.digita-w { transition: opacity .12s linear calc(var(--i, 0) * 35ms); }
html.anima .claude:not(.digitou) .digita-w { opacity: 0; }
/* preço: soco quando pousa (depois da contagem) */
@keyframes soco { 0% { scale: 1; } 12% { scale: 1.14; } 33% { scale: .958; } 53% { scale: 1.013; } 71% { scale: .996; } 100% { scale: 1; } }
.preco__valor.soco { animation: soco .65s var(--ease-seno); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .cta--brilho::after, .preco__valor.soco, .aneis i, .cat, .rev { animation: none !important; }
  *, *::before, *::after { transition-duration: .001ms !important; transition-delay: 0ms !important; }
}