/* ════════════════════════════════════════════════════════════════════════════
   Página de vendas do Oferta Pronta.
   Dark mode como tema, verde "Broto" como acento (o mesmo do painel), Manrope
   embutida. Seções claras só onde quebram o ritmo de propósito (explicação,
   comparação, ancoragem). Todo acabamento em CSS; o JS só revela e conta.
   ════════════════════════════════════════════════════════════════════════════ */

@font-face {
  font-family: "Manrope"; font-style: normal; font-display: swap; font-weight: 200 800;
  src: url("fontes/manrope-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: "Manrope"; font-style: normal; font-display: swap; font-weight: 200 800;
  src: url("fontes/manrope-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ── Tokens ─────────────────────────────────────────────────────────────── */
:root {
  --fonte: "Manrope", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* Escuro (tema). */
  --fundo: hsl(160 28% 4%);
  --fundo-2: hsl(160 22% 6%);
  --cartao: hsl(160 18% 8%);
  --cartao-2: hsl(160 16% 11%);
  --linha: hsl(160 14% 14%);
  --linha-2: hsl(160 12% 22%);
  --tinta: hsl(140 30% 97%);
  --corpo: hsl(150 12% 74%);
  --apagado: hsl(150 8% 56%);

  /* Acento. */
  /* Fundo de texto branco (botão, ficha ativa, selo): 31% dá 4,7:1; com 40% era 3,0:1 (05/10). */
  --verde: hsl(153 66% 31%);
  --verde-forte: hsl(158 70% 26%);
  --verde-vivo: hsl(150 72% 54%);
  --verde-claro: hsl(146 60% 88%);
  --verde-brilho: hsl(153 70% 45% / .55);
  --verde-fundo: hsl(153 50% 14% / .55);

  /* Claro (seções de contraste). */
  --c-fundo: hsl(140 22% 97%);
  --c-cartao: #fff;
  --c-afundado: hsl(140 16% 94%);
  --c-linha: hsl(140 12% 88%);
  --c-linha-2: hsl(140 10% 80%);
  --c-tinta: hsl(160 30% 9%);
  --c-corpo: hsl(160 12% 30%);
  --c-apagado: hsl(160 7% 40%);
  --c-verde: hsl(153 66% 32%);
  --c-verde-fundo: hsl(146 62% 94%);
  --c-verde-texto: hsl(153 66% 28%);   /* verde como TEXTO pequeno sobre claro (4,5:1 também sobre o verde-fundo) */

  /* Semântica (fora do verde). */
  --vermelho: hsl(4 72% 58%);
  --vermelho-fundo: hsl(4 60% 50% / .14);
  --ambar: hsl(38 92% 56%);

  /* WhatsApp (cores lisas, sem o papel de parede da Meta). */
  --wa-fundo: #0b141a;
  --wa-topo: #202c33;
  --wa-saida: #005c4b;
  --wa-tinta: #e9edef;
  --wa-apagado: #8696a0;
  --wa-link: #53bdeb;

  --raio: 14px;
  --raio-lg: 22px;
  --raio-xl: 30px;
  --suave: cubic-bezier(.2, .8, .2, 1);
  --salto: cubic-bezier(.34, 1.56, .64, 1);
  --sombra: 0 1px 2px hsl(160 40% 2% / .4), 0 20px 50px -24px hsl(160 40% 2% / .8);
  --sombra-brilho: 0 10px 30px -10px var(--verde-brilho);

  --largura: 1180px;
  --gutter: 20px;
}

/* ── Base ───────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
html.estatico { scroll-behavior: auto; }
body {
  margin: 0; font-family: var(--fonte); font-size: 16px; line-height: 1.6; color: var(--corpo);
  background: var(--fundo); -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
h1, h2, h3, h4, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
strong, b { color: var(--tinta); font-weight: 700; }
::selection { background: var(--verde); color: #fff; }
:focus-visible { outline: 2px solid var(--verde-vivo); outline-offset: 3px; border-radius: 6px; }
.oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.icone { width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }

/* Tipografia. */
.titulo-xl { font-size: clamp(2.3rem, 1.9rem + 3.3vw, 4.1rem); line-height: 1.02; letter-spacing: -.035em; font-weight: 800; color: var(--tinta); text-wrap: balance; }
.titulo { font-size: clamp(1.75rem, 1.35rem + 2vw, 2.9rem); line-height: 1.08; letter-spacing: -.03em; font-weight: 800; color: var(--tinta); text-wrap: balance; }
.titulo-md { font-size: clamp(1.25rem, 1.1rem + .8vw, 1.6rem); line-height: 1.2; letter-spacing: -.02em; font-weight: 800; color: var(--tinta); }
.rotulo {
  display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--verde-vivo);
}
.rotulo::before { content: ""; width: 18px; height: 2px; border-radius: 2px; background: currentColor; opacity: .8; }
.lead { font-size: clamp(1.05rem, 1rem + .4vw, 1.3rem); line-height: 1.55; color: var(--corpo); text-wrap: pretty; }
.marca-texto {
  background: linear-gradient(120deg, var(--verde-vivo), hsl(165 80% 62%)); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.sublinhado { position: relative; white-space: nowrap; }
.sublinhado::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: .06em; height: .28em; z-index: -1; border-radius: 4px;
  background: linear-gradient(90deg, hsl(153 66% 40% / .55), hsl(153 66% 40% / .2));
  transform: scaleX(0); transform-origin: left; transition: transform .8s var(--suave) .3s;
}
.visivel .sublinhado::after, .estatico .sublinhado::after, .sem-js .sublinhado::after { transform: scaleX(1); }

/* Layout. */
.caixa { width: 100%; max-width: var(--largura); margin: 0 auto; padding: 0 var(--gutter); }
/* O brilho, a grade e o grão das seções são absolutos e vêm antes da caixa:
   sem isto eram pintados POR CIMA do texto (título da oferta saía esverdeado). */
.secao > .caixa { position: relative; }
.secao { position: relative; padding: clamp(72px, 10vw, 128px) 0; }
.secao-cabeca { max-width: 760px; display: grid; gap: 16px; margin-bottom: clamp(36px, 5vw, 64px); }
.secao-cabeca.centro { margin-inline: auto; text-align: center; }
.secao-cabeca.centro .rotulo { justify-content: center; }
.secao-cabeca.centro .rotulo::before { display: none; }
.secao-cabeca .lead { margin-top: 4px; }

/* Seções claras. */
.clara { background: var(--c-fundo); color: var(--c-corpo); }
.clara .titulo, .clara .titulo-md, .clara .titulo-xl, .clara strong, .clara b { color: var(--c-tinta); }
.clara .lead { color: var(--c-corpo); }
.clara .rotulo { color: var(--c-verde-texto); }
.clara ::selection { background: var(--c-verde); color: #fff; }

/* Divisor suave entre escuro e claro. */
.clara::before, .clara::after { content: ""; position: absolute; left: 0; right: 0; height: 1px; background: var(--c-linha); }
.clara::before { top: 0; } .clara::after { bottom: 0; }

/* ── Botões ─────────────────────────────────────────────────────────────── */
.botao {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px; overflow: hidden;
  padding: 16px 28px; border-radius: var(--raio); font-weight: 800; font-size: 15.5px; letter-spacing: .01em; line-height: 1;
  color: #fff; background: linear-gradient(180deg, var(--verde), var(--verde-forte)); border: 1px solid hsl(153 60% 48% / .5);
  box-shadow: var(--sombra-brilho), inset 0 1px 0 hsl(0 0% 100% / .18);
  transition: transform .25s var(--suave), box-shadow .25s var(--suave), filter .25s var(--suave);
  isolation: isolate; text-align: center;
}
.botao .icone { width: 18px; height: 18px; stroke-width: 2.4; }
.botao::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(110deg, transparent 30%, hsl(0 0% 100% / .22) 50%, transparent 70%);
  transform: translateX(-120%); transition: transform .7s var(--suave);
}
.botao:hover { transform: translateY(-2px); box-shadow: 0 16px 40px -12px var(--verde-brilho), inset 0 1px 0 hsl(0 0% 100% / .22); filter: brightness(1.06); }
.botao:hover::after { transform: translateX(120%); }
.botao:active { transform: translateY(0) scale(.985); }
.botao.grande { padding: 20px 36px; font-size: 17px; border-radius: 16px; }
/* No celular o rótulo do único botão de compra fica numa linha só. */
@media (max-width: 480px) { .botao.grande { padding: 18px 12px; gap: 8px; font-size: clamp(13.5px, 4.1vw, 15.5px); white-space: nowrap; } }
.botao.cheio { width: 100%; }
.botao.fantasma {
  background: hsl(160 20% 12% / .6); border-color: var(--linha-2); color: var(--tinta); box-shadow: none; backdrop-filter: blur(8px);
}
.botao.fantasma:hover { background: hsl(160 20% 16% / .8); border-color: hsl(153 40% 40% / .6); box-shadow: 0 10px 30px -14px hsl(160 40% 2% / .8); }
.botao.fantasma::after { display: none; }
.clara .botao.fantasma { background: #fff; border-color: var(--c-linha-2); color: var(--c-tinta); }
.botao.pulsa { animation: pulsar 2.8s var(--suave) infinite; }
@keyframes pulsar {
  0%, 100% { box-shadow: 0 10px 30px -10px var(--verde-brilho), 0 0 0 0 hsl(153 70% 45% / .35); }
  60% { box-shadow: 0 10px 30px -10px var(--verde-brilho), 0 0 0 14px hsl(153 70% 45% / 0); }
}
.cta-nota { display: block; text-align: center; text-wrap: pretty; font-size: 13.5px; color: var(--apagado); }
.cta-nota .icone { display: inline-block; width: 15px; height: 15px; margin-right: 6px; vertical-align: -2px; color: var(--verde-vivo); }
.cta-nota b { color: var(--corpo); font-weight: 700; }
.clara .cta-nota { color: var(--c-apagado); } .clara .cta-nota b { color: var(--c-corpo); } .clara .cta-nota .icone { color: var(--c-verde); }

/* ── Marca (rodapé, cartão da oferta e topo do herói) ────────────────────── */
.marca { display: inline-flex; align-items: center; gap: 10px; font-weight: 800; letter-spacing: -.02em; color: var(--tinta); font-size: 17px; }
.marca img { width: 32px; height: 32px; border-radius: 10px; box-shadow: 0 6px 16px -8px var(--verde-brilho); }

/* ── Fundo com profundidade ─────────────────────────────────────────────── */
.brilho { position: absolute; border-radius: 50%; filter: blur(70px); pointer-events: none; will-change: transform; }
.grade {
  position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(hsl(150 30% 50% / .07) 1px, transparent 1px), linear-gradient(90deg, hsl(150 30% 50% / .07) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 20%, #000 20%, transparent 75%);
  mask-image: radial-gradient(ellipse 70% 60% at 50% 20%, #000 20%, transparent 75%);
}
.grao { position: absolute; inset: 0; pointer-events: none; opacity: .5; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .18 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

/* ── Herói ──────────────────────────────────────────────────────────────── */
.heroi { position: relative; overflow: hidden; padding: clamp(36px, 6vw, 88px) 0 0; isolation: isolate; }
.heroi .brilho-1 { width: 720px; height: 720px; top: -320px; left: 50%; margin-left: -620px; background: hsl(153 70% 35% / .35); animation: deriva 14s ease-in-out infinite alternate; }
.heroi .brilho-2 { width: 560px; height: 560px; top: 120px; right: -220px; background: hsl(170 70% 40% / .22); animation: deriva 18s ease-in-out infinite alternate-reverse; }
@keyframes deriva { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(40px, 30px, 0) scale(1.08); } }
.heroi .caixa { position: relative; display: grid; gap: clamp(40px, 6vw, 72px); align-items: center; }
.heroi-texto { display: grid; gap: 24px; max-width: 640px; }
/* A logo da marca (arquivo que o Ricardo trouxe): fica na própria proporção
   2:1; a altura controla o tamanho e a largura segue. */
.heroi-logo { display: block; width: auto; height: 104px; max-width: min(90vw, 320px); }
@media (max-width: 600px) { .heroi-logo { height: 80px; } }
.heroi-nota { margin: -4px auto 0; max-width: 40ch; font-size: 14px; line-height: 1.5; font-weight: 600; color: var(--corpo); text-align: center; text-wrap: balance; }
.heroi-nota .icone { display: inline-block; width: 16px; height: 16px; margin-right: 6px; vertical-align: -3px; color: var(--verde-vivo); stroke-width: 2.6; }
@media (min-width: 980px) { .heroi-nota { grid-column: 2; margin-top: -40px; } }
.heroi .titulo-xl { font-size: clamp(2.15rem, 1.5rem + 2.6vw, 3.6rem); line-height: 1.05; }
/* Na coluna do computador o título cabe em seis linhas (com sete, "Amazon." ficava sozinha). */
@media (min-width: 980px) { .heroi .titulo-xl { font-size: clamp(2.4rem, 1.2rem + 2.3vw, 3.2rem); } }
@media (min-width: 980px) { .heroi .caixa { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); } }

/* Funciona com: fita de ponta a ponta com os logos reais. Cada cartão leva a
   margem à direita (não `gap`), para a metade da fita cair exatamente no
   começo de um cartão e o laço de -50% não pular. As bordas somem por
   degradê estático por cima, não por máscara (mais barato por quadro). */
.lojas { position: relative; margin-top: clamp(56px, 8vw, 96px); padding: 30px 0 clamp(56px, 7vw, 88px); border-top: 1px solid var(--linha); }
.lojas-rotulo { text-align: center; font-size: 12px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--apagado); margin-bottom: 22px; }
.fita { position: relative; overflow: hidden; }
.fita::before, .fita::after { content: ""; position: absolute; top: 0; bottom: 0; width: min(16vw, 220px); z-index: 1; pointer-events: none; }
.fita::before { left: 0; background: linear-gradient(90deg, var(--fundo) 10%, transparent); }
.fita::after { right: 0; background: linear-gradient(270deg, var(--fundo) 10%, transparent); }
.fita-trilho { display: flex; width: max-content; padding: 6px 0; }
@media (prefers-reduced-motion: no-preference) { .js:not(.estatico) .fita-trilho { animation: fita 40s linear infinite; } }
@keyframes fita { to { transform: translate3d(-50%, 0, 0); } }
.loja-cartao {
  flex: none; display: flex; align-items: center; gap: 16px; margin-right: 18px; min-width: 272px; padding: 18px 30px 18px 18px; border-radius: 22px;
  background: linear-gradient(180deg, hsl(160 18% 11% / .92), hsl(160 20% 8% / .92)); border: 1px solid var(--linha-2);
  box-shadow: inset 0 1px 0 hsl(0 0% 100% / .05), 0 20px 40px -30px hsl(160 60% 2% / .9);
}
.loja-logo { width: 56px; height: 56px; border-radius: 15px; flex: none; }
.loja-nome { display: grid; line-height: 1.15; }
.loja-nome b { font-size: 21px; font-weight: 800; letter-spacing: -.02em; color: var(--tinta); white-space: nowrap; }
.loja-nome small { font-size: 12.5px; font-weight: 600; color: var(--apagado); margin-top: 4px; }
@media (max-width: 600px) {
  .loja-cartao { min-width: 220px; padding: 14px 22px 14px 14px; gap: 12px; margin-right: 12px; border-radius: 18px; }
  .loja-logo { width: 46px; height: 46px; border-radius: 12px; }
  .loja-nome b { font-size: 17px; }
}

/* ── Cena do herói: navegador + prévia do WhatsApp ──────────────────────── */
.cena { position: relative; perspective: 1600px; }
.navegador {
  position: relative; border-radius: var(--raio-lg); overflow: hidden; background: hsl(160 18% 10%); border: 1px solid var(--linha-2);
  box-shadow: 0 40px 90px -40px hsl(160 60% 2% / .9), 0 0 0 1px hsl(0 0% 100% / .03) inset, 0 30px 80px -50px var(--verde-brilho);
}
.navegador-barra { display: flex; align-items: center; gap: 10px; padding: 11px 14px; background: hsl(160 16% 13%); border-bottom: 1px solid var(--linha-2); }
.navegador-barra i { width: 10px; height: 10px; border-radius: 50%; background: hsl(160 10% 30%); }
.navegador-barra i:nth-child(1) { background: hsl(4 70% 58%); } .navegador-barra i:nth-child(2) { background: hsl(42 90% 56%); } .navegador-barra i:nth-child(3) { background: hsl(140 60% 48%); }
.navegador-url { margin-left: 8px; flex: 1; display: flex; align-items: center; gap: 7px; padding: 6px 12px; border-radius: 8px; background: hsl(160 18% 9%); font-size: 11.5px; color: var(--apagado); overflow: hidden; white-space: nowrap; }
.navegador-url .icone { width: 12px; height: 12px; color: var(--verde-vivo); }
.navegador-corpo { background: var(--c-fundo); color: var(--c-tinta); font-size: 12px; line-height: 1.4; }

/* Mini-painel (a casca do produto, no sistema Broto claro). */
.mini { display: grid; grid-template-columns: 148px 1fr; min-height: 400px; }
.mini-trilho { background: #fff; border-right: 1px solid var(--c-linha); padding: 14px 10px; display: none; flex-direction: column; gap: 4px; }
.mini-trilho .marca { font-size: 12.5px; gap: 7px; padding: 0 6px 14px; color: var(--c-tinta); }
.mini-trilho .marca img { width: 22px; height: 22px; border-radius: 7px; box-shadow: none; }
.mini-trilho .grupo { font-size: 9px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--c-apagado); padding: 8px 8px 4px; }
.mini-trilho a { position: relative; display: flex; align-items: center; gap: 8px; padding: 7px 8px; border-radius: 8px; font-size: 11.5px; font-weight: 600; color: var(--c-corpo); }
.mini-trilho a .icone { width: 14px; height: 14px; }
.mini-trilho a.ativa { background: var(--c-verde-fundo); color: var(--c-verde); }
.mini-trilho a.ativa::before { content: ""; position: absolute; left: -10px; top: 6px; bottom: 6px; width: 3px; border-radius: 0 3px 3px 0; background: var(--c-verde); }
.mini-palco { padding: 16px; display: grid; gap: 12px; align-content: start; }
.mini-topo .mini-titulo { display: block; font-size: 15px; font-weight: 800; letter-spacing: -.02em; color: var(--c-tinta); }
.mini-topo p { font-size: 11px; color: var(--c-apagado); }
.mini-cartao { background: #fff; border: 1px solid var(--c-linha); border-radius: 12px; padding: 12px; display: grid; gap: 9px; box-shadow: 0 1px 2px hsl(160 30% 10% / .05); }
.mini-passo { display: flex; align-items: center; gap: 8px; font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--c-apagado); }
.mini-passo b { display: grid; place-items: center; width: 18px; height: 18px; border-radius: 6px; background: var(--c-verde); color: #fff; font-size: 10px; }
.mini-campo { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: 1px solid var(--c-linha-2); border-radius: 9px; background: var(--c-afundado); font-size: 11px; color: var(--c-corpo); min-height: 34px; overflow: hidden; }
.mini-campo .icone { width: 13px; height: 13px; color: var(--c-apagado); }
.mini-campo span { white-space: nowrap; overflow: hidden; }
.mini-botao { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 8px 12px; border-radius: 8px; font-size: 11px; font-weight: 800; background: var(--c-verde); color: #fff; white-space: nowrap; }
.mini-botao.claro { background: #fff; border: 1px solid var(--c-linha-2); color: var(--c-tinta); font-weight: 700; }
.mini-botao .icone { width: 12px; height: 12px; stroke-width: 2.4; }
.mini-produto { display: grid; grid-template-columns: 54px 1fr; gap: 10px; align-items: center; }
.mini-foto { width: 54px; height: 54px; border-radius: 10px; background: linear-gradient(135deg, hsl(140 20% 92%), hsl(140 16% 84%)); display: grid; place-items: center; color: var(--c-apagado); }
.mini-foto .icone { width: 24px; height: 24px; stroke-width: 1.6; }
.mini-produto b { display: block; font-size: 11.5px; color: var(--c-tinta); line-height: 1.3; }
.mini-produto small { display: block; font-size: 10.5px; color: var(--c-apagado); margin-top: 2px; }
.mini-produto .preco { color: var(--c-verde); font-weight: 800; }
.mini-estilos { display: flex; gap: 6px; flex-wrap: wrap; }
.mini-estilos span { padding: 6px 10px; border-radius: 999px; border: 1px solid var(--c-linha-2); background: #fff; font-size: 10.5px; font-weight: 700; color: var(--c-corpo); transition: background .3s, color .3s, border-color .3s; }
.mini-estilos span.ativa { background: var(--c-tinta); color: #fff; border-color: var(--c-tinta); }
.mini-linha { display: flex; gap: 8px; align-items: center; justify-content: space-between; flex-wrap: wrap; }

/* A conversa (prévia como no WhatsApp). */
.whats { background: var(--wa-fundo); border-radius: 14px; overflow: hidden; color: var(--wa-tinta); border: 1px solid hsl(200 10% 18%); }
.whats-topo { display: flex; align-items: center; gap: 10px; padding: 9px 12px; background: var(--wa-topo); font-size: 11.5px; }
.whats-topo .avatar { width: 26px; height: 26px; border-radius: 50%; background: linear-gradient(135deg, hsl(153 66% 40%), hsl(170 60% 35%)); display: grid; place-items: center; color: #fff; }
.whats-topo .avatar .icone { width: 14px; height: 14px; }
.whats-topo b { display: block; font-weight: 700; color: var(--wa-tinta); } .whats-topo small { display: block; color: var(--wa-apagado); font-size: 10px; }
.whats-corpo { padding: 12px 10px 10px; display: grid; }
.balao { position: relative; justify-self: end; max-width: 92%; background: var(--wa-saida); border-radius: 10px 2px 10px 10px; padding: 7px 8px 6px; font-size: 11.5px; line-height: 1.45; box-shadow: 0 1px 1px hsl(0 0% 0% / .3); }
.balao .foto { aspect-ratio: 16 / 9; border-radius: 7px; margin-bottom: 7px; background: linear-gradient(135deg, hsl(200 12% 22%), hsl(200 10% 16%)); display: grid; place-items: center; color: var(--wa-apagado); }
.balao .foto .icone { width: 34px; height: 34px; stroke-width: 1.4; }
.balao p { margin: 0; color: var(--wa-tinta); white-space: pre-line; }
.balao p + p { margin-top: 6px; }
.balao s { color: hsl(0 0% 100% / .72); }
.balao .link { color: var(--wa-link); word-break: break-all; }
.balao .hora { display: flex; justify-content: flex-end; align-items: center; gap: 4px; margin-top: 4px; font-size: 9.5px; color: hsl(0 0% 100% / .6); }
.balao .hora .icone { width: 13px; height: 13px; stroke-width: 2.2; color: var(--wa-link); }
@media (min-width: 560px) { .mini-trilho { display: flex; } }
@media (max-width: 559px) { .mini { grid-template-columns: 1fr; } }

/* ── Celular do herói: notificações de venda ──────────────────────────────
   A moldura é a que o Ricardo mandou (04/10), 506×600, com a mesma geometria
   da moldura do herói do ClickSpy, medida no alfa: vidro de 31 a 474 na
   largura e 37 no topo — daí os recuos de 6,13% / 6,32% / 6,17%. A base do
   aparelho some por máscara, como o traço da própria moldura.

   As quatro notificações caem uma a uma; cada nova empurra as anteriores
   uma posição para baixo. Só `transform` e `opacity`, e cada cartão sabe a
   sua hora pela porcentagem do próprio keyframe (nada de animation-delay
   para coisas sincronizadas). O estado escrito FORA da animação é o final
   (as quatro na tela, a mais nova em cima): é o que aparece sem JS, com
   `?static` e com menos movimento. */
.celular { position: relative; width: min(100%, 440px); margin: 0 auto; -webkit-mask-image: linear-gradient(to bottom, #000 78%, transparent 99%); mask-image: linear-gradient(to bottom, #000 78%, transparent 99%); }
.celular-moldura { position: relative; z-index: 2; display: block; width: 100%; height: auto; pointer-events: none; user-select: none; }
.celular-vidro {
  position: absolute; left: 6.13%; right: 6.32%; top: 6.17%; bottom: 0; overflow: hidden; border-radius: 11% 11% 0 0 / 8% 8% 0 0;
  background: radial-gradient(120% 60% at 50% 0%, hsl(153 50% 20%), hsl(160 42% 9%) 58%, hsl(160 40% 6%));
  container-type: inline-size;
}
.celular-vidro::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(80% 40% at 50% 105%, hsl(153 70% 40% / .25), transparent 70%); }
.celular-hora { position: absolute; top: 9%; left: 0; right: 0; text-align: center; color: #fff; }
.celular-hora small { display: block; font-size: max(11px, 3.4cqi); font-weight: 600; color: hsl(0 0% 100% / .72); }
.celular-hora small::first-letter { text-transform: uppercase; }
.celular-hora b { display: block; margin-top: 2px; font-size: 17cqi; font-weight: 700; letter-spacing: -.035em; line-height: 1; color: #fff; font-variant-numeric: tabular-nums; }
.notifs { --passo: 20.5cqi; --p1: var(--passo); --p2: calc(var(--passo) * 2); --p3: calc(var(--passo) * 3); position: absolute; left: 4.5%; right: 4.5%; top: 34%; }
.notif {
  position: absolute; left: 0; right: 0; top: 0; display: flex; align-items: center; gap: 3cqi; height: 18cqi; padding: 0 3.4cqi; border-radius: 5cqi;
  background: hsl(0 0% 100% / .13); border: 1px solid hsl(0 0% 100% / .16); -webkit-backdrop-filter: blur(14px) saturate(1.4); backdrop-filter: blur(14px) saturate(1.4);
  box-shadow: 0 14px 30px -18px hsl(160 60% 2% / .95); color: #fff;
}
.notif img { width: 10.5cqi; height: 10.5cqi; border-radius: 2.8cqi; flex: none; }
.notif-txt { min-width: 0; flex: 1; display: grid; gap: .5cqi; line-height: 1.2; }
.notif-app { display: flex; justify-content: space-between; gap: 8px; font-size: max(9px, 2.8cqi); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: hsl(0 0% 100% / .6); }
.notif-titulo { font-size: max(11px, 3.6cqi); font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.notif-valor { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font-size: max(10px, 3.2cqi); color: hsl(0 0% 100% / .74); }
.notif-valor b { font-size: max(11.5px, 3.9cqi); font-weight: 800; color: var(--verde-vivo); font-variant-numeric: tabular-nums; white-space: nowrap; }
/* Estado final: a mais nova (4) em cima, a mais antiga (1) por último. */
.notif.n1 { transform: translate3d(0, var(--p3), 0); z-index: 1; }
.notif.n2 { transform: translate3d(0, var(--p2), 0); z-index: 2; }
.notif.n3 { transform: translate3d(0, var(--p1), 0); z-index: 3; }
.notif.n4 { transform: none; z-index: 4; }
/* Ciclo de 14 s: entradas aos 2, 20, 38 e 56%; cada entrada empurra as de
   baixo no mesmo trecho; tudo parado de 60 a 88%; some de 88 a 94%. */
@media (prefers-reduced-motion: no-preference) {
  .js:not(.estatico) .celular.visivel .notif { animation: 14s cubic-bezier(.2, .8, .2, 1) infinite both; }
  .js:not(.estatico) .celular.visivel .notif.n1 { animation-name: notif-1; }
  .js:not(.estatico) .celular.visivel .notif.n2 { animation-name: notif-2; }
  .js:not(.estatico) .celular.visivel .notif.n3 { animation-name: notif-3; }
  .js:not(.estatico) .celular.visivel .notif.n4 { animation-name: notif-4; }
}
@keyframes notif-1 {
  0%, 2% { opacity: 0; transform: translate3d(0, -12px, 0) scale(.96); }
  6%, 20% { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
  24%, 38% { opacity: 1; transform: translate3d(0, var(--p1), 0); }
  42%, 56% { opacity: 1; transform: translate3d(0, var(--p2), 0); }
  60%, 88% { opacity: 1; transform: translate3d(0, var(--p3), 0); }
  94%, 100% { opacity: 0; transform: translate3d(0, var(--p3), 0); }
}
@keyframes notif-2 {
  0%, 20% { opacity: 0; transform: translate3d(0, -12px, 0) scale(.96); }
  24%, 38% { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
  42%, 56% { opacity: 1; transform: translate3d(0, var(--p1), 0); }
  60%, 88% { opacity: 1; transform: translate3d(0, var(--p2), 0); }
  94%, 100% { opacity: 0; transform: translate3d(0, var(--p2), 0); }
}
@keyframes notif-3 {
  0%, 38% { opacity: 0; transform: translate3d(0, -12px, 0) scale(.96); }
  42%, 56% { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
  60%, 88% { opacity: 1; transform: translate3d(0, var(--p1), 0); }
  94%, 100% { opacity: 0; transform: translate3d(0, var(--p1), 0); }
}
@keyframes notif-4 {
  0%, 56% { opacity: 0; transform: translate3d(0, -12px, 0) scale(.96); }
  60%, 88% { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
  94%, 100% { opacity: 0; transform: translate3d(0, 0, 0); }
}

/* ── Cartões (base) ─────────────────────────────────────────────────────── */
.cartao {
  position: relative; display: grid; gap: 12px; align-content: start; padding: 26px; border-radius: var(--raio-lg);
  background: linear-gradient(180deg, var(--cartao-2), var(--cartao)); border: 1px solid var(--linha);
  transition: transform .35s var(--suave), border-color .35s, box-shadow .35s var(--suave);
}
.cartao::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .35s;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 0%), hsl(153 70% 45% / .14), transparent 60%);
}
.cartao:hover { transform: translateY(-4px); border-color: hsl(153 40% 35% / .6); box-shadow: 0 24px 50px -30px hsl(160 60% 2% / .9), 0 0 0 1px hsl(153 50% 40% / .15); }
.cartao:hover::before { opacity: 1; }
.cartao h3 { font-size: 17px; font-weight: 800; letter-spacing: -.015em; color: var(--tinta); line-height: 1.25; }
.cartao p { font-size: 14.5px; line-height: 1.55; color: var(--corpo); }
.cartao-icone {
  width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; color: var(--verde-vivo);
  background: linear-gradient(180deg, hsl(153 50% 16% / .9), hsl(153 40% 10% / .9)); border: 1px solid hsl(153 40% 30% / .5);
  box-shadow: inset 0 1px 0 hsl(0 0% 100% / .06);
}
.cartao-icone .icone { width: 22px; height: 22px; }
.clara .cartao { background: #fff; border-color: var(--c-linha); }
.clara .cartao h3 { color: var(--c-tinta); } .clara .cartao p { color: var(--c-corpo); }
.clara .cartao:hover { border-color: hsl(153 46% 70%); box-shadow: 0 24px 50px -30px hsl(160 30% 10% / .35); }
.clara .cartao::before { background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 0%), hsl(153 60% 50% / .10), transparent 60%); }
.clara .cartao-icone { color: var(--c-verde); background: var(--c-verde-fundo); border-color: hsl(148 46% 80%); }
.grade-cartoes { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }

/* ── Problema ───────────────────────────────────────────────────────────── */
.problema { position: relative; overflow: hidden; }
.problema .brilho-1 { width: 520px; height: 520px; left: -200px; bottom: -200px; background: hsl(4 70% 40% / .12); }
/* Cinco dores em grade de seis colunas: três em cima, duas largas embaixo. */
.dores { display: grid; gap: 16px; }
.dores .cartao-icone { color: hsl(10 80% 70%); background: linear-gradient(180deg, hsl(8 50% 16% / .9), hsl(8 40% 10% / .9)); border-color: hsl(8 40% 30% / .5); }
.dores .cartao:hover { border-color: hsl(8 40% 40% / .5); box-shadow: 0 24px 50px -30px hsl(160 60% 2% / .9), 0 0 0 1px hsl(8 50% 45% / .12); }
.dores .cartao::before { background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 0%), hsl(8 70% 55% / .10), transparent 60%); }
@media (min-width: 700px) { .dores { grid-template-columns: repeat(2, 1fr); } .dores .cartao:last-child { grid-column: 1 / -1; } }
@media (min-width: 1000px) { .dores { grid-template-columns: repeat(6, 1fr); } .dores .cartao { grid-column: span 2; } .dores .cartao:nth-child(n+4) { grid-column: span 3; } }
.virada { margin: clamp(40px, 5vw, 64px) auto 0; max-width: 820px; text-align: center; font-size: clamp(1.15rem, 1rem + 1vw, 1.6rem); font-weight: 700; color: var(--tinta); letter-spacing: -.01em; text-wrap: balance; }

/* ── Tudo o que vem (clara) ─────────────────────────────────────────────── */
.categoria { display: grid; gap: 16px; margin-top: 28px; }
.categoria-nome { display: flex; align-items: center; gap: 12px; font-size: 13px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--apagado); }
.categoria-nome::after { content: ""; flex: 1; height: 1px; background: var(--linha); }
.clara .categoria-nome { color: var(--c-apagado); }
.clara .categoria-nome::after { background: var(--c-linha); }
/* No celular a fileira desliza de lado: a dica fica depois do fio, na ponta. */
.categoria-nome::after { order: 1; }
.categoria-dica { order: 2; display: none; align-items: center; gap: 5px; font-size: 11px; letter-spacing: .06em; color: var(--c-verde-texto); }
.categoria-dica .icone { width: 13px; height: 13px; }
@media (max-width: 639px) { .categoria-dica { display: inline-flex; } }
/* Cartão com ilustração animada no topo (ilustracoes/<id>.html): a moldura é
   fina para a ilustração ir quase de borda a borda. */
.cartao.com-il { padding: 10px; gap: 0; grid-template-rows: auto 1fr; }
.cartao.com-il > .il { z-index: 1; }
.cartao-corpo { position: relative; display: grid; grid-template-columns: auto 1fr; gap: 8px 10px; align-content: start; align-items: center; padding: 16px 10px 12px; }
.cartao.com-il .cartao-icone { width: 32px; height: 32px; border-radius: 9px; }
.cartao.com-il .cartao-icone .icone { width: 16px; height: 16px; }
.cartao.com-il h3 { font-size: 16px; line-height: 1.2; text-wrap: balance; }
.cartao.com-il p { grid-column: 1 / -1; font-size: 14px; line-height: 1.5; text-wrap: pretty; }
/* Grade: nunca um cartão órfão. Quatro cartões: 2 colunas, depois 4. Três
   cartões: 2 + 1 deitado (ilustração ao lado do texto), depois 3. */
.categoria .grade-cartoes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 640px) and (max-width: 859px) {
  .categoria .grade-cartoes > .cartao:last-child:nth-child(odd) { grid-column: 1 / -1; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto; align-items: center; }
}
@media (min-width: 860px) { .categoria .grade-cartoes:has(> :nth-child(3):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1160px) { .categoria .grade-cartoes:has(> :nth-child(4):last-child) { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
/* Celular: cada categoria é uma fileira que desliza de lado, com a ponta do
   próximo cartão à vista. A rolagem é da fileira, não da página. */
@media (max-width: 639px) {
  .categoria .grade-cartoes {
    display: flex; gap: 12px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none;
    margin-inline: calc(var(--gutter) * -1); padding: 4px var(--gutter) 10px; scroll-padding-inline: var(--gutter);
  }
  .categoria .grade-cartoes::-webkit-scrollbar { display: none; }
  .categoria .grade-cartoes > .cartao { flex: 0 0 min(300px, 82%); scroll-snap-align: start; }
  .categoria .grade-cartoes > .cartao:hover { transform: none; }
}

.funcoes-fecho { margin-top: clamp(32px, 4vw, 48px); text-align: center; font-size: clamp(1.1rem, 1rem + .7vw, 1.4rem); font-weight: 700; color: var(--c-tinta); text-wrap: balance; }
.funcoes-fecho b { color: var(--c-verde); }

/* ── IA ─────────────────────────────────────────────────────────────────── */
.ia { position: relative; overflow: hidden; }
.ia .brilho-1 { width: 760px; height: 760px; left: 50%; margin-left: -380px; top: -420px; background: hsl(160 70% 36% / .22); }
.ia .caixa { display: grid; gap: clamp(36px, 5vw, 64px); align-items: center; }
.ia-texto { display: grid; gap: 22px; }
.ia-numeros { display: flex; gap: 12px; flex-wrap: wrap; margin: 0; }
.ia-numeros > div { flex: 1 1 200px; display: flex; flex-direction: column; justify-content: flex-start; padding: 16px 18px; border-radius: 16px; background: var(--cartao); border: 1px solid var(--linha); }
.ia-pre { flex: 0 0 100%; font-size: 12px; line-height: 1.6; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--verde-vivo); margin-bottom: 4px; }
/* Lado a lado, os dois números ficam na mesma altura: o cartão sem prefixo
   ("cerca de") reserva a linha dele. */
@media (min-width: 452px) { .ia-numeros dt:not(:has(.ia-pre)) { padding-top: 23px; } }
.ia-numeros dt { grid-row: 2; } .ia-numeros dd { grid-row: 3; }
}
.ia-numeros dt { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 8px; font-size: clamp(2rem, 1.6rem + 1.6vw, 2.6rem); font-weight: 800; letter-spacing: -.04em; color: var(--tinta); line-height: 1; font-variant-numeric: tabular-nums; }
.ia-unidade { font-size: .55em; letter-spacing: -.02em; color: var(--tinta); }
.ia-numeros dd { margin: 8px 0 0; font-size: 13.5px; line-height: 1.45; color: var(--apagado); font-weight: 600; }
.estudio { position: relative; border-radius: var(--raio-lg); background: var(--cartao); border: 1px solid var(--linha-2); padding: 20px; display: grid; gap: 16px; box-shadow: var(--sombra); }
.estudio::before { content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; pointer-events: none;
  background: linear-gradient(135deg, hsl(153 60% 45% / .5), transparent 40%, transparent 60%, hsl(170 60% 45% / .35));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
.estudio-topo { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 12px; }
.estudio-topo h3 { white-space: nowrap; }
.estudio-topo h3 { font-size: 13px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--apagado); }
.estudio-topo .pilula { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 700; color: var(--verde-claro); background: var(--verde-fundo); border: 1px solid hsl(153 50% 35% / .5); }
.estudio-topo .pilula .icone { width: 13px; height: 13px; }
.estilos { display: grid; grid-template-columns: repeat(auto-fit, minmax(88px, 1fr)); gap: 8px; }
.estilos button { display: grid; gap: 1px; justify-items: start; padding: 9px 12px; border-radius: 12px; text-align: left; color: var(--corpo); background: var(--fundo-2); border: 1px solid var(--linha-2); transition: all .25s var(--suave); }
.estilos button b { font-size: 13px; font-weight: 800; color: inherit; }
.estilos button small { font-size: 11px; font-weight: 600; opacity: .75; }
.estilos button:hover { color: var(--tinta); border-color: hsl(153 40% 40% / .6); }
.estilos button[aria-pressed="true"] { color: #fff; background: var(--verde); border-color: var(--verde); box-shadow: var(--sombra-brilho); }
.estilos button[aria-pressed="true"] b { color: #fff; }
.estilos button[aria-pressed="true"] small { opacity: 1; }
.estudio-produto { display: grid; grid-template-columns: 56px 1fr; gap: 12px; align-items: center; padding: 10px 12px; border-radius: 14px; background: var(--fundo-2); border: 1px solid var(--linha); }
.estudio-produto img { width: 56px; height: 54px; object-fit: cover; border-radius: 10px; }
.estudio-produto small { display: block; font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--apagado); }
.estudio-produto b { display: block; margin-top: 2px; font-size: 13px; line-height: 1.3; color: var(--tinta); }
.estudio-produto span { display: block; margin-top: 3px; font-size: 12.5px; color: var(--apagado); }
.estudio-produto s { text-decoration-color: var(--vermelho); }
.estudio-produto strong { color: var(--verde-vivo); }
.estudio .whats { font-size: 12px; }
.estudio .whats-corpo { padding: 14px 12px 12px; }
.balao-real { width: min(100%, 320px); max-width: 320px; padding: 4px 4px 6px; }
.balao-real .foto-real { display: block; width: 100%; height: auto; border-radius: 8px; margin-bottom: 7px; }
.balao-texto { position: relative; padding: 0 5px; }
.balao-real .hora { padding: 0 5px; }
.estudio .balao { font-size: 12.5px; }
/* Troca de estilo SEM mexer na altura: os cinco textos dividem a mesma célula
   (só o ativo aparece) e os pontinhos de "escrevendo" ficam por cima do texto.
   O estado na raiz chama `gerando` (não reutilize o nome de um filho: em 05/10
   a classe de estado igual à dos pontinhos escondia o estúdio inteiro e a
   página rolava sozinha). */
.pilha { display: grid; }
.pilha > * { grid-area: 1 / 1; visibility: hidden; opacity: 0; transition: opacity .25s; }
.pilha > .ativo { visibility: visible; opacity: 1; }
.pontos { position: absolute; left: 5px; top: 2px; display: flex; gap: 5px; align-items: center; height: 18px; opacity: 0; transition: opacity .2s; pointer-events: none; }
.pontos i { width: 7px; height: 7px; border-radius: 50%; background: hsl(0 0% 100% / .85); }
.estudio.gerando .pontos { opacity: 1; }
.estudio.gerando .pontos i { animation: ponto-escrevendo 1s ease-in-out infinite; }
.estudio.gerando .pontos i:nth-child(2) { animation-delay: .15s; } .estudio.gerando .pontos i:nth-child(3) { animation-delay: .3s; }
@keyframes ponto-escrevendo { 0%, 60%, 100% { transform: none; opacity: .5; } 30% { transform: translateY(-4px); opacity: 1; } }
.estudio.gerando .pilha > .ativo { opacity: .12; }
.estudio-rodape { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; font-size: 12.5px; color: var(--apagado); }
.estudio-rodape .botao { padding: 10px 14px; font-size: 13px; border-radius: 10px; }
.estudio-rodape .botao .icone { width: 15px; height: 15px; }
@media (min-width: 980px) { .ia .caixa { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }

/* ── Como funciona (clara): três passos ─────────────────────────────────
   Cada cartão: a ilustração animada do passo (em cima, ilustracoes/passo-*),
   o passo, e embaixo, numa faixa verde, o que o Oferta Pronta faz sozinho. */
.passos { display: grid; gap: 20px; counter-reset: passo; }
.passo {
  position: relative; display: grid; grid-template-rows: auto auto 1fr; padding: 10px; border-radius: 24px; background: #fff; border: 1px solid var(--c-linha);
  counter-increment: passo; box-shadow: 0 1px 2px hsl(160 30% 10% / .04);
  transition: transform .35s var(--suave), box-shadow .35s var(--suave), border-color .35s;
}
.passo:hover { transform: translateY(-4px); border-color: hsl(153 46% 70%); box-shadow: 0 28px 56px -32px hsl(160 30% 10% / .35); }
.passo > .il { border-radius: 16px; }
.passo-corpo { display: grid; gap: 8px; align-content: start; padding: 20px 14px 18px; }
.passo-num { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; font-weight: 800; font-size: 14px; color: #fff; background: linear-gradient(180deg, var(--c-verde), hsl(158 70% 26%)); box-shadow: 0 8px 18px -10px hsl(153 66% 28% / .7); }
.passo-num::before { content: counter(passo); }
.passo h3 { margin-top: 4px; font-size: 21px; font-weight: 800; letter-spacing: -.025em; line-height: 1.2; color: var(--c-tinta); }
.passo p { font-size: 15px; line-height: 1.55; color: var(--c-corpo); }
.passo-sozinho { align-self: end; display: grid; gap: 8px; padding: 14px; border-radius: 16px; background: var(--c-verde-fundo); border: 1px solid hsl(148 46% 84%); }
.passo-sozinho-rotulo { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--c-verde-texto); }
.passo-sozinho-rotulo .icone { width: 13px; height: 13px; }
.passo-sozinho ul { display: grid; gap: 6px; }
.passo-sozinho li { display: flex; align-items: flex-start; gap: 8px; font-size: 14px; font-weight: 600; line-height: 1.35; color: var(--c-tinta); }
.passo-sozinho li .icone { width: 16px; height: 16px; flex: none; margin-top: 1px; color: var(--c-verde); stroke-width: 2.6; }
.passos-antes { margin-top: 28px; font-size: 14.5px; line-height: 1.5; color: var(--c-apagado); text-align: center; text-wrap: balance; }
.passos-antes .icone { display: inline-block; width: 16px; height: 16px; margin-right: 6px; vertical-align: -3px; color: var(--c-verde); }
@media (min-width: 900px) {
  .passos-3 { grid-template-columns: repeat(3, 1fr); gap: 28px; }
  /* Seta entre os cartões. */
  .passos-3 .passo:not(:last-child)::after {
    content: ""; position: absolute; right: -22px; top: 80px; width: 16px; height: 16px; z-index: 2;
    border-top: 2px solid hsl(153 40% 60%); border-right: 2px solid hsl(153 40% 60%); transform: rotate(45deg);
  }
}

/* ── Antes e depois (clara) ─────────────────────────────────────────────── */
.versus { display: grid; gap: 18px; }
.lado { position: relative; display: grid; gap: 16px; align-content: start; padding: 28px; border-radius: var(--raio-xl); background: #fff; border: 1px solid var(--c-linha); overflow: hidden; }
.lado-topo { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.lado h3 { font-size: 20px; line-height: 1.2; font-weight: 800; letter-spacing: -.02em; color: var(--c-tinta); }
.lado .pilula { flex: none; white-space: nowrap; padding: 6px 12px; border-radius: 999px; font-size: 12px; font-weight: 800; letter-spacing: .04em; }
.lado.sem .pilula { color: hsl(4 70% 42%); background: hsl(4 80% 95%); }
.lado.com { border-color: hsl(153 46% 72%); background: linear-gradient(180deg, #fff, hsl(146 62% 97%)); box-shadow: 0 30px 60px -40px hsl(153 66% 28% / .45); }
.lado.com .pilula { color: #fff; background: var(--c-verde); }
.lado ol { display: grid; gap: 10px; }
.lado li { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 12px 14px; border-radius: 12px; font-size: 15px; font-weight: 600; line-height: 1.3; background: var(--c-afundado); border: 1px solid var(--c-linha); color: var(--c-corpo); }
.lado li .n { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 7px; flex: none; font-size: 12px; font-weight: 800; background: #fff; border: 1px solid var(--c-linha-2); color: var(--c-apagado); }
.lado li .icone { width: 18px; height: 18px; flex: none; margin-left: auto; }
.lado.sem li .icone { color: hsl(4 70% 52%); }
.lado.com li { background: #fff; border-color: hsl(148 46% 85%); color: var(--c-tinta); }
.lado.com li .n { background: var(--c-verde-fundo); border-color: hsl(148 46% 78%); color: var(--c-verde-texto); }
.lado.com li .icone { color: var(--c-verde); }
.lado-fecho { display: flex; align-items: center; gap: 10px; padding-top: 14px; border-top: 1px dashed var(--c-linha-2); font-size: 14px; color: var(--c-apagado); }
.lado-fecho .icone { width: 16px; height: 16px; }
.lado.com .lado-fecho { color: var(--c-verde-texto); font-weight: 700; }
@media (min-width: 900px) { .versus { grid-template-columns: 1fr 1fr; gap: 24px; } }

/* ── Por dentro: um navegador, quatro telas (abas sem JS) ───────────────────
   As abas são rádios: `#demo-N:checked ~ …` troca a tela e o item ativo do
   menu. Tela larga: abas em coluna, com descrição, ao lado do navegador.
   Celular: fichas em linha e a barra de navegação embaixo, como no produto.
   O miolo de cada tela vem de ilustracoes/demo-*.html. */
.demo { position: relative; overflow: hidden; }
.demo .brilho-1 { width: 800px; height: 600px; left: 50%; margin-left: -400px; bottom: -300px; background: hsl(153 70% 35% / .2); }
.demo-palco { position: relative; display: grid; gap: 20px; }
.demo input[type="radio"] { position: absolute; opacity: 0; pointer-events: none; }
.abas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.abas label {
  position: relative; display: flex; align-items: center; gap: 8px; padding: 8px 10px 8px 8px; border-radius: 14px; overflow: hidden; cursor: pointer;
  color: var(--corpo); background: var(--cartao); border: 1px solid var(--linha-2); transition: color .25s, background .25s, border-color .25s, box-shadow .25s;
}
.abas label:hover { color: var(--tinta); border-color: hsl(153 40% 40% / .6); }
.aba-icone { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; flex: none; color: var(--verde-vivo); background: hsl(153 50% 16% / .9); border: 1px solid hsl(153 40% 30% / .5); transition: color .25s, background .25s, border-color .25s; }
.aba-icone .icone { width: 15px; height: 15px; }
.aba-texto { display: grid; gap: 3px; min-width: 0; }
.aba-texto b { font-size: 13.5px; font-weight: 800; letter-spacing: -.01em; color: inherit; white-space: nowrap; }
.aba-texto small { display: none; font-size: 13.5px; line-height: 1.45; color: var(--apagado); }
.aba-progresso { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--verde-vivo); transform: scaleX(0); transform-origin: left; opacity: 0; }
#demo-1:checked ~ .abas label[for="demo-1"], #demo-2:checked ~ .abas label[for="demo-2"], #demo-3:checked ~ .abas label[for="demo-3"], #demo-4:checked ~ .abas label[for="demo-4"] {
  color: var(--tinta); background: linear-gradient(180deg, hsl(153 40% 14%), hsl(158 36% 10%)); border-color: hsl(153 50% 36% / .8); box-shadow: 0 14px 34px -22px var(--verde-brilho);
}
#demo-1:checked ~ .abas label[for="demo-1"] .aba-icone, #demo-2:checked ~ .abas label[for="demo-2"] .aba-icone, #demo-3:checked ~ .abas label[for="demo-3"] .aba-icone, #demo-4:checked ~ .abas label[for="demo-4"] .aba-icone { color: #fff; background: var(--verde); border-color: var(--verde); }
#demo-1:focus-visible ~ .abas label[for="demo-1"], #demo-2:focus-visible ~ .abas label[for="demo-2"], #demo-3:focus-visible ~ .abas label[for="demo-3"], #demo-4:focus-visible ~ .abas label[for="demo-4"] { outline: 2px solid var(--verde-vivo); outline-offset: 3px; }
/* Com script: a aba ativa enche a barra e passa a vez (pagina.js ouve o fim da
   animação). Para de vez no primeiro toque; pausa fora da tela e sob o ponteiro. */
@media (prefers-reduced-motion: no-preference) {
  .js:not(.estatico) .demo-palco.auto.visivel #demo-1:checked ~ .abas label[for="demo-1"] .aba-progresso, .js:not(.estatico) .demo-palco.auto.visivel #demo-2:checked ~ .abas label[for="demo-2"] .aba-progresso,
  .js:not(.estatico) .demo-palco.auto.visivel #demo-3:checked ~ .abas label[for="demo-3"] .aba-progresso, .js:not(.estatico) .demo-palco.auto.visivel #demo-4:checked ~ .abas label[for="demo-4"] .aba-progresso { opacity: 1; animation: aba-progresso 7s linear both; }
  .demo-palco.auto.pausada .aba-progresso, .demo-palco.auto:hover .aba-progresso { animation-play-state: paused !important; }
}
@keyframes aba-progresso { from { transform: scaleX(0); } to { transform: scaleX(1); } }

.demo .cena { min-width: 0; }
.demo .mini { grid-template-columns: 1fr; grid-template-rows: 1fr auto; height: 540px; min-height: 0; }
.demo .mini-palco { position: relative; display: grid; padding: 0; gap: 0; min-height: 0; overflow: hidden; }
.demo .mini-palco::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 44px; background: linear-gradient(180deg, hsl(140 20% 97% / 0), var(--c-fundo)); pointer-events: none; z-index: 3; }
.tela { grid-area: 1 / 1; min-width: 0; min-height: 0; padding: 14px 12px; display: grid; gap: 10px; align-content: start; opacity: 0; visibility: hidden; transition: opacity .3s var(--suave), visibility 0s .3s; container: tela / inline-size; }
#demo-1:checked ~ .cena .tela-1, #demo-2:checked ~ .cena .tela-2, #demo-3:checked ~ .cena .tela-3, #demo-4:checked ~ .cena .tela-4 { opacity: 1; visibility: visible; transition-delay: 0s; z-index: 1; }
/* O menu do desenho: no celular é a barra de baixo (ícone + rótulo curto). */
.demo .mini-trilho { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 0; order: 2; padding: 5px 4px 6px; border-right: 0; border-top: 1px solid var(--c-linha); }
.demo .mini-trilho .marca, .demo .mini-trilho .grupo, .demo .mini-trilho .longo { display: none; }
/* Dock do celular (painel desde 520cab0): quatro atalhos + Menu; o resto mora no menu. */
.demo .mini-trilho .fora-do-dock { display: none; }
.demo .mini-trilho a, .demo .mini-trilho label { position: relative; display: grid; justify-items: center; gap: 3px; padding: 5px 0 3px; border-radius: 8px; font-size: 9px; font-weight: 700; line-height: 1.1; color: var(--c-apagado); white-space: nowrap; }
.demo .mini-trilho label { cursor: pointer; transition: color .2s, background .2s; }
.demo .mini-trilho .icone { width: 16px; height: 16px; }
#demo-1:checked ~ .cena .mini-trilho .t1, #demo-2:checked ~ .cena .mini-trilho .t2, #demo-3:checked ~ .cena .mini-trilho .t3, #demo-4:checked ~ .cena .mini-trilho .t4 { color: var(--c-verde); background: var(--c-verde-fundo); }
@media (min-width: 720px) {
  .abas { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
  .abas label { gap: 10px; padding: 10px 14px 12px 10px; } .aba-icone { width: 32px; height: 32px; border-radius: 9px; } .aba-texto b { font-size: 14.5px; }
  .demo .mini { grid-template-columns: 150px minmax(0, 1fr); grid-template-rows: 1fr; height: 560px; }
  .demo .mini-trilho { display: flex; flex-direction: column; gap: 4px; order: 0; padding: 14px 10px; border-top: 0; border-right: 1px solid var(--c-linha); }
  .demo .mini-trilho .marca { display: flex; } .demo .mini-trilho .grupo { display: block; } .demo .mini-trilho .longo { display: inline; } .demo .mini-trilho .curto { display: none; }
  .demo .mini-trilho .fora-do-dock { display: flex; } .demo .mini-trilho .so-no-dock { display: none; }
  .demo .mini-trilho a, .demo .mini-trilho label { display: flex; align-items: center; justify-items: start; gap: 8px; padding: 7px 8px; font-size: 11.5px; font-weight: 600; color: var(--c-corpo); }
  .demo .mini-trilho label:hover { background: var(--c-afundado); color: var(--c-tinta); }
  .demo .mini-trilho .icone { width: 14px; height: 14px; }
  #demo-1:checked ~ .cena .mini-trilho .t1::before, #demo-2:checked ~ .cena .mini-trilho .t2::before, #demo-3:checked ~ .cena .mini-trilho .t3::before, #demo-4:checked ~ .cena .mini-trilho .t4::before { content: ""; position: absolute; left: -10px; top: 6px; bottom: 6px; width: 3px; border-radius: 0 3px 3px 0; background: var(--c-verde); }
  .tela { padding: 18px 18px 16px; gap: 12px; }
}
@media (min-width: 1000px) {
  .demo-palco { grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: 28px; align-items: center; }
  .abas { grid-template-columns: 1fr; }
  .abas label { align-items: flex-start; gap: 12px; padding: 16px 16px 18px; border-radius: 18px; }
  .aba-icone { width: 38px; height: 38px; border-radius: 11px; } .aba-icone .icone { width: 18px; height: 18px; }
  .aba-texto { padding-top: 1px; } .aba-texto b { font-size: 16px; }
  .aba-texto small { display: block; }
}

/* ── Bônus: Convites (clara) ───────────────────────────────────────────────
   Texto + três celulares (mockups do Ricardo). Computador: leque, o do meio na
   frente. Tablet: os três lado a lado. Celular: carrossel com scroll-snap na
   própria fileira, um celular por vez, pontos embaixo. */
.bonus { overflow: hidden; }
.bonus-grade { display: grid; gap: clamp(36px, 5vw, 56px); align-items: center; }
.bonus-texto { display: grid; gap: 18px; max-width: 600px; }
.bonus .rotulo { width: fit-content; padding: 6px 12px; border-radius: 999px; background: var(--c-verde-fundo); border: 1px solid hsl(148 46% 80%); }
.bonus .rotulo::before { display: none; }
.bonus-lista { display: grid; gap: 12px; margin-top: 4px; }
.bonus-lista li { display: grid; grid-template-columns: 34px 1fr; gap: 12px; align-items: start; font-size: 15px; line-height: 1.5; color: var(--c-corpo); }
.bonus-lista b { color: var(--c-tinta); font-weight: 700; }
.bonus-icone { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; color: var(--c-verde); background: var(--c-verde-fundo); border: 1px solid hsl(148 46% 80%); }
.bonus-icone .icone { width: 17px; height: 17px; }
.bonus-nota { display: flex; align-items: center; gap: 8px; font-size: 14.5px; font-weight: 700; color: var(--c-verde-texto); }
.bonus-nota .icone { width: 17px; height: 17px; stroke-width: 2.6; flex: none; }

.bonus-vitrine { position: relative; min-width: 0; }
.bonus-vitrine::before { content: ""; position: absolute; left: 50%; top: 52%; width: 82%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(closest-side, hsl(150 60% 60% / .35), transparent); pointer-events: none; }
.bonus-trilho { position: relative; display: flex; justify-content: center; align-items: center; }
.bonus-tela { margin: 0; flex: none; width: 210px; }
.bonus-tela img { display: block; width: 100%; height: auto; filter: drop-shadow(0 26px 34px hsl(160 30% 10% / .28)); }
.bonus-pontos { display: none; }
/* Leque (tablet e computador). */
@media (min-width: 640px) {
  .bonus-trilho { padding: 12px 0 20px; }
  .bonus-tela { position: relative; width: 210px; transition: transform .5s var(--suave); }
  .bonus-tela + .bonus-tela { margin-left: -64px; }
  .bonus-tela:nth-child(1) { transform: rotate(-8deg) scale(.88) translateY(14px); z-index: 1; }
  .bonus-tela:nth-child(2) { transform: scale(1.04); z-index: 2; }
  .bonus-tela:nth-child(3) { transform: rotate(8deg) scale(.88) translateY(14px); z-index: 1; }
  .bonus-vitrine:hover .bonus-tela:nth-child(1) { transform: rotate(-10deg) scale(.9) translate(-16px, 14px); }
  .bonus-vitrine:hover .bonus-tela:nth-child(3) { transform: rotate(10deg) scale(.9) translate(16px, 14px); }
}
@media (min-width: 980px) {
  .bonus-grade { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .bonus-tela { width: 222px; }
}
/* Celular: carrossel. A fileira vai de borda a borda e cada celular para no centro. */
@media (max-width: 639px) {
  .bonus-trilho {
    justify-content: flex-start; gap: 14px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none;
    margin-inline: calc(var(--gutter) * -1); padding: 14px calc(50% - min(31vw, 120px)) 40px;
  }
  .bonus-trilho::-webkit-scrollbar { display: none; }
  .bonus-tela { width: min(62vw, 240px); scroll-snap-align: center; }
  /* Sombra curta: a fileira rola de lado e corta em linha reta o que passar da
     caixa dela (a sombra de 34px desenhava uma faixa cinza de borda a borda). */
  .bonus-tela img { filter: drop-shadow(0 10px 14px hsl(160 30% 10% / .22)); }
  .bonus-pontos { display: flex; justify-content: center; gap: 7px; margin-top: -18px; }
  .bonus-pontos i { width: 7px; height: 7px; border-radius: 50%; background: var(--c-linha-2); transition: width .3s var(--suave), background .3s; }
  .bonus-pontos i.on { width: 22px; border-radius: 4px; background: var(--c-verde); }
}
.bonus-trilho:focus-visible { outline: 2px solid var(--c-verde); outline-offset: 4px; border-radius: 12px; }

/* ── Para quem ──────────────────────────────────────────────────────────── */
.perfis { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.perfis .cartao { padding: 22px; gap: 10px; }
.perfis .cartao h3 { font-size: 16px; }
.perfis .cartao p { font-size: 14px; }

/* ── Oferta: o único lugar com preço e botão ────────────────────────────── */
.oferta { position: relative; overflow: hidden; }
.oferta .brilho-1 { width: 900px; height: 700px; left: 50%; margin-left: -450px; top: -250px; background: hsl(153 70% 38% / .28); }
.oferta .grade { -webkit-mask-image: radial-gradient(ellipse 60% 70% at 50% 40%, #000 10%, transparent 70%); mask-image: radial-gradient(ellipse 60% 70% at 50% 40%, #000 10%, transparent 70%); }
.oferta-grade { display: grid; gap: clamp(32px, 4vw, 56px); align-items: center; }
@media (min-width: 980px) { .oferta-grade { grid-template-columns: minmax(0, .92fr) minmax(0, 1fr); } }

/* Ancoragem: o que custaria de outro jeito. */
.ancora { display: grid; gap: 18px; }
.ancora h3 { font-size: 12.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--apagado); }
.ancora ul { display: grid; gap: 12px; }
.ancora li { display: grid; grid-template-columns: 44px 1fr; gap: 14px; align-items: start; padding: 18px; border-radius: 18px; background: hsl(160 18% 8% / .8); border: 1px solid var(--linha); backdrop-filter: blur(6px); }
.ancora .cartao-icone { width: 44px; height: 44px; color: hsl(10 80% 70%); background: linear-gradient(180deg, hsl(8 50% 16% / .9), hsl(8 40% 10% / .9)); border-color: hsl(8 40% 30% / .5); }
.ancora .cartao-icone .icone { width: 20px; height: 20px; }
.ancora .custo { display: block; font-size: 11.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: hsl(10 80% 70%); }
.ancora li b { display: block; font-size: 16px; font-weight: 800; color: var(--tinta); margin-top: 3px; }
.ancora li p { font-size: 14px; color: var(--corpo); margin-top: 3px; }
.ancora-fecho { font-size: clamp(1.2rem, 1rem + .9vw, 1.55rem); font-weight: 800; letter-spacing: -.02em; line-height: 1.25; color: var(--tinta); text-wrap: balance; margin-top: 6px; }

@property --ang { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.oferta-cartao {
  position: relative; width: 100%; max-width: 560px; margin: 0 auto; padding: 2px; border-radius: var(--raio-xl); isolation: isolate;
  background: conic-gradient(from var(--ang), hsl(153 70% 45%), hsl(170 70% 50%), hsl(153 40% 30% / .2), hsl(153 70% 45%));
  box-shadow: 0 50px 100px -40px hsl(160 60% 2% / .9), 0 0 80px -20px var(--verde-brilho);
}
@media (prefers-reduced-motion: no-preference) { .js:not(.estatico) .oferta-cartao { animation: anel 7s linear infinite; } }
@keyframes anel { to { --ang: 360deg; } }
.oferta-dentro { border-radius: calc(var(--raio-xl) - 2px); background: linear-gradient(180deg, hsl(160 18% 10%), hsl(160 22% 6%)); padding: clamp(28px, 4vw, 44px) clamp(22px, 4vw, 40px); display: grid; gap: 24px; justify-items: center; text-align: center; position: relative; overflow: hidden; }
.oferta-dentro > * { position: relative; }
.oferta-dentro::before { content: ""; position: absolute; top: -110px; left: 50%; width: 440px; height: 320px; margin-left: -220px; border-radius: 50%; background: hsl(153 70% 40% / .26); filter: blur(64px); pointer-events: none; }
.oferta-topo .pilula { display: inline-flex; align-items: center; gap: 7px; padding: 7px 14px; border-radius: 999px; font-size: 12.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--verde-claro); background: var(--verde-fundo); border: 1px solid hsl(153 50% 35% / .5); }
.oferta-topo .pilula .icone { width: 15px; height: 15px; }

/* O preço, centralizado, e a ancoragem "De R$ 97 por R$ 47". */
.precos { display: grid; justify-items: center; gap: 2px; width: 100%; }
.preco-de { font-size: clamp(1.15rem, 1rem + .6vw, 1.45rem); font-weight: 700; color: var(--apagado); line-height: 1.2; transform-origin: center; }
.preco-de s { position: relative; text-decoration: none; white-space: nowrap; }
.preco-de s::after { content: ""; position: absolute; left: -1px; right: -5px; top: 52%; height: .14em; min-height: 2px; border-radius: 2px; background: var(--vermelho); transform: rotate(-4deg); transform-origin: left center; }
.preco-por-rotulo { margin-top: 10px; font-size: 13px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--corpo); }
.preco-por { display: flex; align-items: flex-start; justify-content: center; gap: 8px; line-height: .92; margin-top: 2px; }
.preco-por .moeda { font-size: clamp(1.9rem, 1.4rem + 2vw, 3rem); font-weight: 800; color: var(--verde-vivo); margin-top: .5em; }
.preco-por .valor { font-size: clamp(6.5rem, 4.6rem + 9vw, 10rem); font-weight: 800; letter-spacing: -.06em; color: var(--tinta); text-shadow: 0 0 60px hsl(153 70% 45% / .45); font-variant-numeric: tabular-nums; }
.preco-economia { display: inline-flex; align-items: center; gap: 10px; margin-top: 12px; padding: 6px 14px 6px 6px; border-radius: 999px; font-size: 14px; font-weight: 700; color: var(--tinta); background: hsl(4 60% 50% / .12); border: 1px solid hsl(4 60% 55% / .35); }
.preco-economia b { padding: 3px 9px; border-radius: 999px; font-size: 12.5px; font-weight: 800; color: #fff; background: hsl(4 72% 46%); }
.preco-nota { margin-top: 14px; font-size: 15px; line-height: 1.45; font-weight: 700; color: var(--verde-claro); text-wrap: balance; }
.preco-nota .icone { display: inline-block; width: 16px; height: 16px; margin-right: 6px; vertical-align: -3px; }

/* A sequência: só roda quando o script preparou (classe `preparado`) e o
   bloco entrou de verdade na tela (`ancorar`). ~3 s no total. */
.precos.preparado:not(.ancorar) > * { opacity: 0; }
.precos.ancorar .preco-de { animation: ancora-de 1.9s var(--suave) both; }
.precos.ancorar .preco-de s::after { animation: ancora-risco 1.9s var(--suave) both; }
.precos.ancorar .preco-por-rotulo { animation: ancora-surgir .4s var(--suave) 1.75s both; }
.precos.ancorar .preco-por { animation: ancora-preco .6s var(--salto) 1.85s both; }
.precos.ancorar .preco-por .valor { animation: ancora-brilho 1.1s ease-out 2.9s both; }
.precos.ancorar .preco-economia { animation: ancora-surgir .5s var(--salto) 3s both; }
.precos.ancorar .preco-nota { animation: ancora-surgir .5s var(--suave) 3.2s both; }
@keyframes ancora-de {
  0% { opacity: 0; transform: translateY(46px) scale(2.3); color: var(--tinta); }
  14%, 66% { opacity: 1; transform: translateY(46px) scale(2.3); color: var(--tinta); }
  100% { opacity: 1; transform: none; color: var(--apagado); }
}
@keyframes ancora-risco { 0%, 34% { transform: rotate(-4deg) scaleX(0); } 58%, 100% { transform: rotate(-4deg) scaleX(1); } }
@keyframes ancora-surgir { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes ancora-preco { from { opacity: 0; transform: translateY(18px) scale(.86); } to { opacity: 1; transform: none; } }
@keyframes ancora-brilho { 0% { text-shadow: 0 0 60px hsl(153 70% 45% / .45); } 30% { text-shadow: 0 0 90px hsl(153 80% 55% / .95), 0 0 30px hsl(153 80% 60% / .5); } 100% { text-shadow: 0 0 60px hsl(153 70% 45% / .45); } }

.conexao { display: grid; justify-items: center; gap: 10px; width: 100%; padding: 16px 18px; border-radius: 18px; background: hsl(153 50% 14% / .55); border: 1px solid hsl(153 55% 40% / .45); font-size: 14px; line-height: 1.45; color: var(--corpo); }
.conexao b { display: block; color: var(--tinta); font-size: 15.5px; }
.conexao-logos { display: flex; gap: 8px; }
.conexao-logos img { width: 34px; height: 34px; border-radius: 9px; }
.incluido { display: grid; justify-items: center; gap: 14px; width: 100%; padding-top: 22px; border-top: 1px solid var(--linha-2); }
.incluido h3 { font-size: 12px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--apagado); }
/* A lista fica centralizada como bloco, com os itens alinhados pelo tique. */
/* "O que vem" (05/10): cada item com o seu ícone, o nome em destaque e um
   detalhe curto; duas colunas quando o cartão é largo. O bônus fecha a lista
   numa faixa própria, com selo. */
.incluido-grade { display: grid; grid-template-columns: 1fr; gap: 8px; width: 100%; text-align: left; }
.incluido-grade li { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: center; gap: 11px; padding: 10px 12px; border-radius: 14px; background: hsl(160 16% 12% / .7); border: 1px solid var(--linha); }
.inc-icone { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; color: var(--verde-vivo); background: hsl(153 50% 16% / .9); border: 1px solid hsl(153 40% 30% / .5); }
.inc-icone .icone { width: 17px; height: 17px; }
.inc-texto { display: grid; gap: 1px; min-width: 0; }
.inc-texto b { font-size: 14.5px; font-weight: 800; line-height: 1.3; color: var(--tinta); }
.inc-texto small { font-size: 12.5px; line-height: 1.35; color: var(--apagado); }
.incluido-grade .bonus-item { margin-top: 4px; padding: 12px 14px; background: linear-gradient(135deg, hsl(153 50% 15%), hsl(160 30% 10%)); border-color: hsl(153 50% 38% / .7); box-shadow: 0 14px 30px -22px var(--verde-brilho); }
.bonus-item .inc-icone { color: #fff; background: var(--verde); border-color: var(--verde); }
.bonus-item .inc-texto small { color: var(--corpo); }
.inc-selo { align-self: start; padding: 3px 9px; border-radius: 999px; font-size: 10.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: hsl(160 30% 6%); background: var(--verde-vivo); }
@media (min-width: 560px) {
  .incluido-grade { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .incluido-grade .largo, .incluido-grade .bonus-item { grid-column: 1 / -1; }
}
.oferta-cta { display: grid; gap: 12px; width: 100%; padding-top: 4px; }

/* Garantia, colada no botão. */
.garantia-cartao { margin-top: clamp(28px, 4vw, 48px); display: grid; gap: 20px; align-items: center; padding: clamp(24px, 4vw, 36px); border-radius: var(--raio-xl); background: linear-gradient(135deg, hsl(160 22% 9%), hsl(160 18% 7%)); border: 1px solid var(--linha-2); position: relative; overflow: hidden; }
.garantia-cartao::before { content: ""; position: absolute; left: -100px; bottom: -160px; width: 420px; height: 420px; border-radius: 50%; background: hsl(153 70% 40% / .18); filter: blur(70px); }
.escudo { position: relative; width: 96px; height: 96px; display: grid; place-items: center; border-radius: 26px; color: var(--verde-vivo); background: radial-gradient(circle at 30% 30%, hsl(153 50% 20%), hsl(160 40% 9%)); border: 1px solid hsl(153 50% 35% / .5); box-shadow: 0 30px 60px -30px var(--verde-brilho); }
.escudo .icone { width: 46px; height: 46px; stroke-width: 1.6; }
.escudo b { position: absolute; right: -10px; bottom: -8px; padding: 5px 9px; border-radius: 10px; font-size: 12.5px; font-weight: 800; color: #fff; background: var(--verde); box-shadow: var(--sombra-brilho); }
.garantia-cartao h3 { position: relative; font-size: clamp(1.3rem, 1.1rem + 1vw, 1.8rem); font-weight: 800; letter-spacing: -.025em; color: var(--tinta); text-wrap: balance; }
.garantia-cartao p { position: relative; font-size: 15px; color: var(--corpo); margin-top: 8px; max-width: 64ch; }
@media (min-width: 760px) { .garantia-cartao { grid-template-columns: auto 1fr; gap: 32px; } }

/* ── FAQ ────────────────────────────────────────────────────────────────── */
.faq-lista { max-width: 820px; margin: 0 auto; display: grid; gap: 10px; }
.faq-lista details { border-radius: 16px; background: var(--cartao); border: 1px solid var(--linha); overflow: hidden; transition: border-color .3s; }
.faq-lista details[open] { border-color: hsl(153 40% 35% / .6); }
.faq-lista summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 20px; cursor: pointer; font-size: 16px; font-weight: 700; color: var(--tinta); }
.faq-lista summary::-webkit-details-marker { display: none; }
/* O anel de foco fica por dentro: por fora, o overflow do details cortava os quatro lados. */
.faq-lista summary:focus-visible { outline-offset: -3px; border-radius: 14px; }
.faq-lista summary .icone { width: 20px; height: 20px; flex: none; color: var(--verde-vivo); transition: transform .3s var(--suave); }
.faq-lista details[open] summary .icone { transform: rotate(45deg); }
.faq-lista .resposta { padding: 0 20px 20px; font-size: 15px; color: var(--corpo); line-height: 1.6; }
.faq-lista .resposta b { color: var(--tinta); }
@supports (interpolate-size: allow-keywords) {
  .faq-lista details::details-content { block-size: 0; overflow: hidden; transition: block-size .35s var(--suave), content-visibility .35s allow-discrete; }
  .faq-lista details[open]::details-content { block-size: auto; }
}

/* ── Fim da página: o FAQ (sem rodapé desde 04/10) ──────────────────────── */
.faq { padding-bottom: clamp(72px, 9vw, 112px); }

/* ── Revelação ao rolar ─────────────────────────────────────────────────── */
@media (prefers-reduced-motion: no-preference) {
  .js:not(.estatico) [data-revelar] { opacity: 0; transform: translate3d(0, 24px, 0); transition: opacity .7s var(--suave), transform .7s var(--suave); }
  .js:not(.estatico) [data-revelar].visivel { opacity: 1; transform: none; }
  .js:not(.estatico) [data-revelar] > [data-i], .js:not(.estatico) [data-revelar] [data-escada] > * { opacity: 0; transform: translate3d(0, 18px, 0); transition: opacity .6s var(--suave), transform .6s var(--suave); }
  .js:not(.estatico) [data-revelar].visivel > [data-i], .js:not(.estatico) [data-revelar].visivel [data-escada] > * { opacity: 1; transform: none; transition-delay: calc(var(--i, 0) * 90ms + .1s); }
  /* Parallax leve do brilho do herói. */
  .js:not(.estatico) .heroi .brilho { transform: translate3d(0, calc(var(--rolagem, 0) * .18px), 0); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}

/* Logos das lojas no lugar do ícone (cartões "Para quem"). */
.cartao-icone.logo-loja { padding: 0; background: none; border: 0; box-shadow: none; overflow: hidden; border-radius: 12px; }
.cartao-icone.logo-loja img { width: 44px; height: 44px; border-radius: 12px; }