@import url('https://fonts.googleapis.com/css2?family=Marcellus&family=Lato:wght@300;400;700;900&display=swap');
  *, *::before, *::after { box-sizing: border-box; }
  html { -webkit-text-size-adjust: 100%; }
  body { margin: 0; font-family: 'Lato', system-ui, sans-serif; color: #1A237E; background: #FFFBF7; font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; }
  h1, h2, h3, p, blockquote, figure, ul, ol, dl, dd { margin: 0; }
  img { display: block; max-width: 100%; }
  
  :root {
    --bg: #FFFBF7; --surface: #f5f1ed; --ink: #1A237E; --muted: #6A7BCC;
    --accent: #FF7043; --accent-ink: #ffffff; --border: #E0DCD7;
    --radius: 12px; --radius-btn: 8px;
    --font-h: 'Marcellus', Georgia, serif; --font-b: 'Lato', system-ui, sans-serif;
    --col: 720px; --pad-y: 96px; --card-pad: 32px; --gap: 24px;
    /* Pesos da fonte de TÍTULO, já limitados aos que a família carrega. Antes cada regra cravava
       600/700/800/900 direto: numa família de peso único (Anton, Instrument Serif, Marcellus) o
       navegador engordava a fonte na mão (fake bold) e os títulos, preços e nomes de plano saíam
       borrados. Era a causa do "as fontes não combinam" nas identidades mais autorais. */
    --w-strong: 400;
    --w-black: 400;
    /* Fonte dos elementos que PRECISAM de peso pra funcionar: botão, preço, contador, numeradores.
       Famílias de display com peso único (Instrument Serif, Marcellus) são lindas num título e
       fracas num preço, que fica fino e some ao lado do resto. Nesses casos esses elementos usam a
       fonte de corpo, que sempre carrega 700/800. Onde a família de título tem faixa de peso, nada
       muda e o título e o preço continuam na mesma família. */
    --font-ui: var(--font-b);
    --w-ui: 800;
  }
  /* Rede de segurança contra rolagem horizontal: qualquer coisa que estoure a largura (um título
     sem ponto de quebra, uma animação de entrada, uma grade com cartão em escala) é cortada em vez
     de virar barra de rolagem. "clip" e não "hidden" porque hidden quebraria position: sticky. */
  html { overflow-x: clip; }
  body { background: var(--bg); overflow-x: clip;  }
  .b { max-width: var(--col); margin: 0 auto; padding: var(--pad-y) 24px; }
  .b-title { font-family: var(--font-h); font-size: clamp(1.817rem, 3.49vw, 2.688rem); font-weight: 400; line-height: 1.15; letter-spacing: 0.005em;  margin: 0 0 36px; color: var(--ink); text-align: left; }
  .b-prose, .b-prose-plain { color: var(--muted); font-size: 1.05rem; line-height: 1.7; }
  .b-prose p { margin: 0 0 14px; }
  /* O microcopy fica logo abaixo do botão, então segue o alinhamento do bloco: centralizado fixo,
     ele aparecia no meio da coluna embaixo de um botão alinhado à esquerda. O fechamento e o
     cabeçalho "centro" têm regra própria mais abaixo. */
  .b-microcopy { color: var(--muted); font-size: 0.875rem; text-align: left; margin: 14px 0 0; }
  .b-final-cta .b-microcopy, .b-hero.hero-centro .b-microcopy { text-align: center; }

  /* Faixas de fundo: alternam entre as seções pra quebrar a página em blocos. */
  /* Duas seções vizinhas no MESMO tom se fundem numa coluna só de texto, e o leitor perde a noção
     de que mudou de assunto. Acontece no ritmo contínuo (onde o fundo nunca troca, por definição) e
     no de blocos (onde as seções andam em pares). Nesses encontros entra um filete, que faz a
     separação que o fundo faria. No ritmo alternado a regra nunca dispara, porque lá o fundo já
     troca a cada seção. */
  .b.tone-base + .b.tone-base,
  .b.tone-tint + .b.tone-tint,
  .b.tone-accent + .b.tone-accent { border-top: 1px solid color-mix(in srgb, var(--border) 70%, transparent); }
  .b.tone-tint { background: color-mix(in srgb, #1A237E 6%, #FFFBF7); --surface: #FFFBF7; max-width: none; padding-left: max(24px, calc((100% - 720px) / 2)); padding-right: max(24px, calc((100% - 720px) / 2)); }
  /* 12% e não 9%: com 9% de uma cor de destaque clara sobre um fundo claro a faixa também
     desaparecia, e as duas faixas (suave e destaque) viravam a mesma coisa. */
  .b.tone-accent { background: color-mix(in srgb, #FF7043 12%, #FFFBF7); --surface: #FFFBF7; max-width: none; padding-left: max(24px, calc((100% - 720px) / 2)); padding-right: max(24px, calc((100% - 720px) / 2)); }
  .b.tone-ink { background: #1A237E; color: #FFFBF7; --bg: #1A237E; --ink: #FFFBF7; --muted: color-mix(in srgb, #FFFBF7 74%, #1A237E); --surface: color-mix(in srgb, #1A237E 84%, #FFFBF7); --border: color-mix(in srgb, #FFFBF7 18%, #1A237E); max-width: none; padding-left: max(24px, calc((100% - 720px) / 2)); padding-right: max(24px, calc((100% - 720px) / 2)); }

  /* padding vertical de verdade (não só min-height): sem isso, um CTA de duas linhas (texto longo
     quebrando) ficava com o texto espremido quase sem respiro em cima/baixo. A seta sempre vem
     junto do texto, pra não ficar um botão sem nenhum elemento visual além da palavra. */
  .b-cta { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 56px; padding: 15px 32px; line-height: 1.3; border-radius: var(--radius-btn); background: var(--accent); color: var(--accent-ink); font-family: var(--font-ui); font-weight: var(--w-ui); font-size: 1.05rem; text-decoration: none; text-align: center; transition: transform 0.2s ease, filter 0.2s ease; }
  .b-cta:hover { transform: translateY(-2px); filter: brightness(1.04); }
  .b-cta:hover .b-cta-arrow { transform: translateX(3px); }
  .b-cta.is-secondary { background: var(--ink); color: var(--bg); }
  .b-cta-arrow { flex-shrink: 0; transition: transform 0.2s ease; }

  /* Cabeçalho. A ordem dos elementos é decidida no HTML (ver heroHtml), e a composição aqui. A
     variante "centro" é a de sempre: tudo empilhado e centralizado, imagem entre título e
     subtítulo. As outras três existem porque o cabeçalho era o bloco mais travado da página: era o
     único com a composição cravada e um comentário dizendo que não havia variante. */
  .b-hero { padding-top: 84px; }
  /* O selo nunca passa da largura da coluna nem quebra em duas linhas desalinhadas: com um texto
     longo demais ele virava um bloco de duas linhas no celular, com o chanfro/filete cortando no
     meio da frase. O texto fica numa linha só e, se não couber, é cortado com reticências, o que
     também é um sinal visível de que a copy do selo passou do tamanho. */
  .b-kicker { display: inline-flex; align-items: center; gap: 7px; max-width: 100%; font-size: 0.74rem; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--accent); margin: 0 0 22px; background: none; border: 0; border-radius: 0; padding: 0; }
  .b-kicker > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .b-kicker .b-icon-svg { flex-shrink: 0; width: 14px; height: 14px; }
  .b-hero-title { font-family: var(--font-h); font-size: clamp(1.961rem, 4.30vw, 3.024rem); font-weight: 400; line-height: 1.15; letter-spacing: 0.005em;  margin: 0 0 24px; max-width: 720px; color: var(--ink); }
  .b-hero-sub { font-size: 1.2rem; line-height: 1.6; color: var(--muted); max-width: 640px; margin: 0 0 32px; }
  /* O mockup é a prova visual do que a pessoa está comprando e precisa de presença na primeira
     tela. O teto de 460px de altura num quadro 16:9 limitava a imagem a uns 760px de largura
     mesmo em coluna larga, e junto com a margem vazia que o próprio mockup costuma trazer ele
     acabava pequeno. Agora acompanha a largura da coluna e tem um respiro menor embaixo. */
  .b-hero-image { display: block; width: 100%; max-width: min(100%, 880px); max-height: 540px; object-fit: contain; margin: 0 0 28px; }
  .b-hero .b-cta { margin-bottom: 14px; }
  .b-image-slot { display: flex; align-items: center; justify-content: center; min-height: 200px; border: 1.5px dashed var(--border); border-radius: var(--radius); color: var(--muted); font-size: 0.875rem; margin: 0 0 36px; width: 100%; max-width: 760px; background: var(--surface); }

  /* Variante "centro": o layout antigo, byte a byte. */
  .b-hero.hero-centro { text-align: center; }
  .b-hero.hero-centro .b-hero-title, .b-hero.hero-centro .b-hero-sub,
  .b-hero.hero-centro .b-hero-image, .b-hero.hero-centro .b-image-slot { margin-left: auto; margin-right: auto; }

  /* "esquerda": mesma pilha, ancorada à esquerda. Coluna de texto mais estreita que a imagem, pra
     a linha de leitura não ficar longa demais. */
  .b-hero.hero-esquerda { text-align: left; }
  .b-hero.hero-esquerda .b-hero-title { max-width: 16ch; font-size: clamp(2.129rem, 5.64vw, 4.032rem); }
  .b-hero.hero-esquerda .b-hero-sub { max-width: 46ch; }

  /* "split": texto numa coluna, imagem na outra. No celular empilha na ordem natural, título antes
     da imagem: a headline é o principal elemento visual da primeira tela (regra do cérebro e do
     documento de referência), e com a imagem na frente o visitante via o mockup sem saber ainda o
     que a página oferece. */
  .b-hero.hero-split { text-align: left; display: grid; gap: 28px; align-items: center; }
  .b-hero.hero-split .b-hero-media { margin: 0; }
  .b-hero.hero-split .b-hero-image, .b-hero.hero-split .b-image-slot { margin: 0; max-width: 100%; max-height: 420px; }
  .b-hero.hero-split .b-hero-title { max-width: none; }
  .b-hero.hero-split .b-hero-sub { max-width: none; }

  /* "editorial": o título ocupa a primeira tela, a imagem entra menor e deslocada, e o subtítulo
     cai numa coluna estreita ao lado do botão. É a composição mais distante do padrão de template. */
  .b-hero.hero-editorial { text-align: left; }
  .b-hero.hero-editorial .b-hero-title { max-width: 20ch; font-size: clamp(2.317rem, 8.60vw, 5.645rem); line-height: 1.02; }
  .b-hero.hero-editorial .b-hero-sub { max-width: 42ch; font-size: 1.1rem; }
  .b-hero.hero-editorial .b-hero-image, .b-hero.hero-editorial .b-image-slot { max-width: 520px; margin-left: auto; }

  /* Texto com imagem: título, imagem e depois o texto. O alinhamento acompanha o do título — com
     "center" cravado aqui, uma identidade de título à esquerda saía com o corpo centralizado
     embaixo de um título alinhado à esquerda, que lê como erro de formatação. */
  .b-text-stack { text-align: left; }
  .b-text-stack .b-title { margin-bottom: 28px; }
  .b-text-image { display: block; width: 100%; max-width: 760px; margin: 0 auto 28px; border-radius: var(--radius); object-fit: cover; }
  /* A coluna de texto só é centralizada quando o bloco é centralizado: com o título à esquerda, o
     "margin: 0 auto" deixava o parágrafo recuado uns 70px em relação ao título. */
  .b-text-stack .b-prose { max-width: 680px; margin: 0; }
  .b-text-plain { text-align: center; }

  .b-checklist { list-style: none; padding: 0; margin: 0 auto; max-width: 640px; display: grid; gap: 12px; }
  .b-checklist li { display: flex; gap: 12px; align-items: flex-start; font-size: 1.05rem; color: var(--ink); }
  .b-check { flex-shrink: 0; margin-top: 4px; color: var(--accent-ink); background: var(--accent); border-radius: 50%; padding: 3px; box-sizing: content-box; width: 10px; height: 10px; }
  .b-checklist-small li { font-size: 0.95rem; }

  .b-card-grid { display: grid; gap: 16px; grid-template-columns: 1fr; }
  .b-card { background: var(--surface); border: 0; border-radius: 12px; box-shadow: 0 1px 2px color-mix(in srgb, var(--ink) 8%, transparent), 0 12px 28px -14px color-mix(in srgb, var(--ink) 22%, transparent); padding: var(--card-pad); }
  .b-card-icon { display: inline-flex; width: 44px; height: 44px; border-radius: var(--radius-btn); background: var(--accent); color: var(--accent-ink); align-items: center; justify-content: center; margin-bottom: 16px; }
  .b-card-title { font-family: var(--font-h); font-size: 1.1rem; font-weight: var(--w-strong); color: var(--ink); margin: 0 0 8px; }
  .b-card-text { color: var(--muted); font-size: 0.97rem; line-height: 1.6; margin: 0; }

  .b-proof { text-align: center; padding-top: 48px; padding-bottom: 48px; }
  .b-proof-value { font-family: var(--font-h); font-size: 4rem; font-weight: var(--w-black); line-height: 1; letter-spacing: -0.03em; color: var(--accent); margin: 0 0 12px; }
  .b-proof-label { font-size: 1.1rem; color: var(--ink); margin: 0; font-weight: 600; }

  .b-chat { display: grid; gap: 10px; max-width: 460px; margin: 0 auto; padding: 20px; background: var(--surface); border: 0; border-radius: 12px; box-shadow: 0 1px 2px color-mix(in srgb, var(--ink) 8%, transparent), 0 12px 28px -14px color-mix(in srgb, var(--ink) 22%, transparent); }
  .b-bubble { max-width: 82%; padding: 10px 14px; border-radius: 14px; font-size: 0.95rem; line-height: 1.5; color: var(--ink); }
  .b-bubble.is-them { background: var(--bg); justify-self: start; border-bottom-left-radius: 4px; }
  .b-bubble.is-me { background: var(--accent); color: var(--accent-ink); justify-self: end; border-bottom-right-radius: 4px; }
  .b-bubble-name { display: block; font-size: 0.75rem; font-weight: 700; color: var(--muted); margin-bottom: 2px; }
  .b-chat-section .b-title { margin-bottom: 28px; }

  .b-player-wrap { position: relative; margin: 0 auto; border-radius: var(--radius); overflow: hidden; background: var(--ink); }
  .b-player-wrap.is-horizontal { aspect-ratio: 16 / 9; max-width: 880px; }
  .b-player-wrap.is-vertical { aspect-ratio: 9 / 16; max-width: 380px; }
  .b-player { display: block; width: 100%; height: 100%; border: 0; }
  .b-player-wrap .b-image-slot { margin: 0; height: 100%; min-height: 0; border: 0; border-radius: 0; background: var(--ink); color: var(--bg); padding: 16px; max-width: none; text-align: center; }

  /* Planos: as duas ofertas lado a lado a partir de 560px (antes empilhavam e pareciam espremidas).
     O respiro no topo existe por causa do selo ("Mais escolhido"), que fica em position: absolute a
     -13px do cartão: sem ele, o selo subia por cima do título da seção no desktop. Nas variantes
     que levantam o cartão (escala e elevado) o selo sobe ainda mais, então o respiro acompanha. */
  .b-plan-grid { display: grid; gap: 18px; grid-template-columns: 1fr; max-width: 800px; margin: 0 auto; padding-top: 32px; }
  .b-plan-grid.is-single { max-width: 420px; }
  .b-plan { position: relative; padding: 32px 26px 28px; display: flex; flex-direction: column; min-width: 0; background: var(--surface); border: 0; border-radius: 12px; box-shadow: 0 1px 2px color-mix(in srgb, var(--ink) 8%, transparent), 0 12px 28px -14px color-mix(in srgb, var(--ink) 22%, transparent); }
  .b-plan.is-highlight { border-color: var(--accent); border-width: 2px; box-shadow: 0 2px 4px color-mix(in srgb, var(--ink) 10%, transparent), 0 26px 50px -22px color-mix(in srgb, var(--accent) 60%, transparent); }
  .b-plan.is-highlight .b-price { font-size: clamp(2.1rem, 4.8vw, 2.9rem); }
  @media (min-width: 560px) {
    /* Sai da linha de base do plano básico: o olho lê "subiu de categoria". */
    .b-plan.is-highlight { margin-top: -18px; margin-bottom: -18px; }
  }
  .b-plan.is-highlight { transition: transform 0.25s ease, box-shadow 0.25s ease; }
  .b-badge { position: absolute; top: -13px; left: 26px; background: var(--accent); color: var(--accent-ink); font-size: 0.75rem; font-weight: 700; padding: 5px 12px; border-radius: 999px; }
  .b-plan-name { font-family: var(--font-h); font-size: 1.25rem; margin: 0 0 12px; color: var(--ink); }
  .b-old-price { margin: 0; color: var(--muted); text-decoration: line-through; font-size: 0.95rem; }
  .b-price { font-family: var(--font-ui); font-size: clamp(1.9rem, 4.2vw, 2.6rem); font-weight: var(--w-ui); line-height: 1.1; margin: 4px 0; color: var(--ink); letter-spacing: -0.02em; }
  .b-installments { margin: 0 0 20px; color: var(--muted); font-size: 0.9rem; }
  .b-plan .b-checklist { margin: 0 0 24px; max-width: none; }
  .b-plan .b-cta { margin-top: auto; width: 100%; height: auto; min-height: 56px; padding: 14px 18px; line-height: 1.25; text-align: center; white-space: normal; }
  .b-hl { background: none; color: var(--accent); font-family: var(--font-b); font-style: italic; font-weight: 400; letter-spacing: 0; }
  @media (min-width: 560px) {
    .b-plan-grid:not(.is-single) { grid-template-columns: 1fr 1fr; }
  }

  /* Bônus: cartões com número, nome e preço riscado + "grátis hoje" em destaque, em vez de uma
     lista crua de texto (nome e valor não cabiam lado a lado e quebravam feio no mobile). */
  .b-bonus-list { list-style: none; padding: 0; margin: 0 auto; max-width: 640px; display: grid; gap: 12px; }
  .b-bonus-item { display: flex; gap: 16px; align-items: flex-start; padding: 18px 20px; background: var(--surface); border: 0; border-radius: 12px; box-shadow: 0 1px 2px color-mix(in srgb, var(--ink) 8%, transparent), 0 12px 28px -14px color-mix(in srgb, var(--ink) 22%, transparent); }
  .b-bonus-number { flex-shrink: 0; width: 32px; height: 32px; border-radius: 50%; background: var(--accent); color: var(--accent-ink); display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-ui); font-weight: var(--w-ui); font-size: 0.9rem; }
  .b-bonus-body { min-width: 0; flex: 1; }
  .b-bonus-name { margin: 0 0 6px; font-weight: 700; color: var(--ink); font-size: 1.02rem; line-height: 1.35; }
  .b-bonus-price { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; font-size: 0.9rem; }
  .b-bonus-price s { color: var(--muted); white-space: nowrap; }
  .b-bonus-free { color: var(--accent); font-weight: 800; text-transform: uppercase; font-size: 0.78rem; letter-spacing: 0.04em; white-space: nowrap; }
  .b-bonus-footer { text-align: center; font-weight: 700; color: var(--ink); margin: 22px 0 0; }
  /* O primeiro bônus é o principal: cartão maior, na cor de destaque, com o valor em evidência.
     A borda e o preenchimento são declarados por extenso (e não herdados da receita de cartão)
     porque com cartão "plano" não existe borda nenhuma pra tingir: o destaque virava um retângulo
     de fundo claro com um selo solto em cima, sem nada que o delimitasse. */
  .b-bonus-item:first-child { border: 2px solid var(--accent); border-radius: 12px; background: color-mix(in srgb, var(--accent) 10%, var(--surface)); padding: 26px 24px; align-items: center; box-shadow: none; }
  .b-bonus-item:first-child .b-bonus-number { width: 44px; height: 44px; font-size: 1.15rem; }
  .b-bonus-item:first-child .b-bonus-name { font-size: 1.18rem; font-family: var(--font-h); }
  .b-bonus-item:first-child .b-bonus-free { font-size: 0.86rem; }
  .b-bonus-item:first-child::after { content: "Bônus principal"; position: absolute; top: -11px; right: 18px; background: var(--accent); color: var(--accent-ink); font-size: 0.68rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; padding: 4px 10px; border-radius: 999px; }
  .b-bonus-item { position: relative; }

  .b-scarcity { max-width: 560px; }
  .b-scarcity-label { margin: 0 0 10px; text-align: center; color: var(--ink); font-size: 0.98rem; }
  .b-bar { height: 10px; background: var(--border); border-radius: 999px; overflow: hidden; }
  .b-bar span { display: block; height: 100%; background: var(--accent); border-radius: 999px; transform-origin: left center; animation: b-bar-in 1.1s cubic-bezier(0.22, 0.61, 0.36, 1) both; }
  @keyframes b-bar-in { from { transform: scaleX(0); } to { transform: scaleX(1); } }

  .b-box { padding: 36px 40px; max-width: 760px; margin: 0 auto; background: var(--surface); border: 0; border-radius: 12px; box-shadow: 0 1px 2px color-mix(in srgb, var(--ink) 8%, transparent), 0 12px 28px -14px color-mix(in srgb, var(--ink) 22%, transparent); }
  .b-guarantee .b-box { display: flex; gap: 32px; align-items: center; }
  .b-guarantee .b-title { text-align: left; margin-bottom: 10px; }
  .b-seal { flex-shrink: 0; width: 132px; height: 132px; border-radius: 50%; border: 3px solid var(--accent); display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--ink); }
  .b-seal strong { font-family: var(--font-h); font-size: 2.6rem; line-height: 1; }
  .b-seal span { font-size: 0.85rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; }
  /* Sem selo: o prazo vira um número tipográfico grande ao lado do texto, como abertura de
     matéria. Passa confiança por composição, não por carimbo. */
  .b-guarantee .b-seal { width: auto; height: auto; border: 0; border-left: 3px solid var(--accent); border-radius: 0; padding: 4px 0 4px 22px; align-items: flex-start; }
  .b-guarantee .b-seal strong { font-size: clamp(3.2rem, 7vw, 4.6rem); letter-spacing: 0.005em; color: var(--accent); }
  .b-guarantee .b-seal span { color: var(--muted); letter-spacing: 0.12em; }
  @media (max-width: 720px) {
    .b-guarantee .b-seal { border-left: 0; border-top: 3px solid var(--accent); padding: 18px 0 0; align-items: center; }
  }

  /* Faixa de aviso. A versão antiga era uma div plana sem ícone, sem movimento e sem nada feito pra
     aquela oferta, e é o primeiro elemento que o visitante vê. */
  .b-topbar { background: var(--ink); color: var(--bg); text-align: center; font-weight: 700; font-size: 0.9rem; padding: 12px 16px; letter-spacing: 0.01em; }
  .b-topbar.is-alert { background: var(--accent); color: var(--accent-ink); }
  .b-topbar.is-accent { background: var(--accent); color: var(--accent-ink); }
  .b-topbar-inner { display: inline-flex; align-items: center; justify-content: center; gap: 9px; }
  .b-topbar .b-icon-svg { flex-shrink: 0; width: 16px; height: 16px; }
  /* O ponto pulsante é o sinal de "acontecendo agora" e custa um keyframe de opacidade. */
  .b-topbar-dot { flex-shrink: 0; width: 8px; height: 8px; border-radius: 50%; background: currentColor; animation: b-pulse 1.8s ease-in-out infinite; }
  @keyframes b-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.35; transform: scale(0.72); } }
  /* Marquee: a faixa desliza continuamente.
     São dois GRUPOS idênticos, cada um com largura mínima de 100% da barra e o aviso repetido
     dentro, distribuído. Duplicar só o texto (como antes) deixava as duas cópias lado a lado com um
     vazio enorme à direita em tela larga, e a faixa parecia quebrada. Com grupos de 100%, a barra
     está sempre cheia em qualquer largura, e o translate de -50% leva o grupo 2 exatamente à
     posição do grupo 1, então a volta é imperceptível. */
  .b-topbar.is-marquee { padding: 11px 0; overflow: hidden; }
  .b-topbar-track { display: flex; width: max-content; animation: b-marquee 30s linear infinite; }
  .b-topbar-group { display: flex; align-items: center; justify-content: space-around; min-width: 100vw; flex-shrink: 0; }
  .b-topbar-group > span { display: inline-flex; align-items: center; gap: 9px; padding: 0 28px; white-space: nowrap; }
  @keyframes b-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
  .b-topbar.is-marquee:hover .b-topbar-track { animation-play-state: paused; }
  /* Relógio dentro da faixa: números tabulares pra a largura não pular a cada segundo. */
  .b-topbar-clock { font-variant-numeric: tabular-nums; font-weight: 800; background: color-mix(in srgb, currentColor 16%, transparent); padding: 2px 8px; border-radius: 4px; }

  /* Barra de compra fixa no rodapé em telas pequenas. A maioria dos compradores de low ticket está
     no celular, e a página inteira rolava sem nenhum botão à vista entre uma seção e outra. */
  .b-sticky { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; display: none; gap: 12px; align-items: center; padding: 10px 14px calc(10px + env(safe-area-inset-bottom)); background: color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter: blur(10px); border-top: 1px solid var(--border); transform: translateY(100%); transition: transform 0.3s cubic-bezier(0.22, 0.61, 0.36, 1); }
  .b-sticky.is-on { transform: none; }
  /* A coluna da esquerda nao quebra: "ACESSO HOJE" virava duas linhas e empurrava o preco pra fora. */
  .b-sticky-info { min-width: 0; flex: 0 1 auto; line-height: 1.15; }
  .b-sticky-label { display: block; font-size: 0.64rem; text-transform: uppercase; letter-spacing: 0.06em; font-weight: 700; color: var(--muted); white-space: nowrap; }
  /* line-height próprio: numa barra apertada, fonte de display (Anton, Oswald) estoura a caixa de
     linha herdada e o preço encosta na borda de baixo. */
  .b-sticky-price { display: block; font-family: var(--font-ui); font-size: 1.15rem; font-weight: var(--w-ui); line-height: 1.25; color: var(--ink); white-space: nowrap; }
  /* O botão ocupa o espaço que sobra, com teto de largura: um CTA longo ("Quero o Kit Completo
     Agora!") empurrava o preço pra fora e virava um bloco ocupando a barra inteira. O texto é
     cortado com reticências se ainda assim não couber, e o margin-left automático encosta o botão
     na borda direita, em vez de deixá-lo colado no preço com o vazio sobrando à direita. */
  .b-sticky .b-cta { min-height: 46px; padding: 11px 16px; font-size: 0.95rem; flex: 0 1 auto; max-width: 64%; min-width: 0; margin-left: auto; }
  .b-sticky .b-cta > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  @media (max-width: 720px) {
    .b-sticky { display: flex; }
    /* Espaço no fim da página pra a barra não cobrir o último botão. */
    .b-final-cta { padding-bottom: 130px; }
  }

  /* Avisos de compra. Ficam fora do fluxo e nunca cobrem o conteúdo central: no celular sobem
     acima da barra fixa, no desktop ficam no canto. */
  .b-notify { position: fixed; z-index: 35; left: 14px; bottom: 14px; width: min(360px, calc(100vw - 28px)); display: flex; gap: 11px; align-items: center; padding: 11px 14px; border-radius: 10px; background: var(--surface); border: 1px solid var(--border); box-shadow: 0 10px 34px -14px color-mix(in srgb, var(--ink) 45%, transparent); opacity: 0; transform: translateY(14px) scale(0.97); pointer-events: none; transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.22, 0.61, 0.36, 1); }
  .b-notify.is-on { opacity: 1; transform: none; }
  .b-notify-icon { flex-shrink: 0; width: 32px; height: 32px; border-radius: 50%; background: var(--accent); color: var(--accent-ink); display: inline-flex; align-items: center; justify-content: center; }
  .b-notify-icon .b-icon-svg { width: 17px; height: 17px; }
  .b-notify-text { min-width: 0; font-size: 0.86rem; line-height: 1.35; color: var(--ink); }
  .b-notify-time { display: block; font-size: 0.72rem; color: var(--muted); margin-top: 2px; }
  @media (max-width: 720px) {
    /* No celular o aviso vai pro TOPO: embaixo ele disputa espaco com a barra de compra fixa e com
       o polegar, e cobre justamente a area onde fica o botao. A largura passa a ser a da tela
       (menos a margem), porque um cartao estreito no meio da tela parece elemento solto. */
    .b-notify { top: 14px; bottom: auto; left: 14px; right: 14px; width: auto; transform: translateY(-14px) scale(0.97); }
    .b-notify.is-on { transform: none; }
  }

  .b-alert-box { max-width: 720px; border-left: 4px solid; border-radius: var(--radius-btn); padding: 20px 24px; }
  .b-alert-box.is-warning { background: var(--surface); border-color: var(--accent); }
  .b-alert-box.is-info { background: var(--surface); border-color: var(--ink); }
  .b-alert-title { margin: 0 0 6px; font-weight: 700; color: var(--ink); }
  .b-alert-body { margin: 0; color: var(--muted); line-height: 1.6; }

  /* FAQ: cartões com abertura animada. */
  .b-faq-list { max-width: 720px; margin: 0 auto; display: grid; gap: 10px; }
  .b-faq-item { background: var(--surface); border: 0; border-radius: 8px; box-shadow: 0 1px 2px color-mix(in srgb, var(--ink) 8%, transparent), 0 12px 28px -14px color-mix(in srgb, var(--ink) 22%, transparent); padding: 0 22px; transition: border-color 0.25s ease, box-shadow 0.25s ease; }
  .b-faq-item[open] { border-color: var(--accent); box-shadow: 0 8px 24px -16px var(--ink); }
  .b-faq-item summary { cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 0; font-weight: 700; color: var(--ink); font-size: 1.02rem; }
  .b-faq-item summary::-webkit-details-marker { display: none; }
  .b-faq-plus { position: relative; flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%; background: var(--bg); transition: transform 0.3s ease, background 0.3s ease; }
  .b-faq-plus::before, .b-faq-plus::after { content: ""; position: absolute; left: 50%; top: 50%; background: var(--ink); border-radius: 2px; transform: translate(-50%, -50%); }
  .b-faq-plus::before { width: 12px; height: 2px; }
  .b-faq-plus::after { width: 2px; height: 12px; transition: transform 0.3s ease; }
  .b-faq-item[open] .b-faq-plus { transform: rotate(135deg); background: var(--accent); }
  .b-faq-item[open] .b-faq-plus::before, .b-faq-item[open] .b-faq-plus::after { background: var(--accent-ink); }
  .b-faq-answer { padding: 0 0 22px; color: var(--muted); line-height: 1.7; }
  .b-faq-item[open] .b-faq-answer { animation: b-faq-in 0.38s ease both; }
  @keyframes b-faq-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

  /* Contador: painel de destaque com a data final, quatro unidades grandes e uma linha de status. */
  .b-countdown { text-align: center; }
  .b-countdown-panel { display: inline-block; width: 100%; max-width: 560px; color: var(--ink); padding: 28px 24px 26px; background: var(--surface); border: 0; border-radius: 12px; box-shadow: 0 1px 2px color-mix(in srgb, var(--ink) 8%, transparent), 0 12px 28px -14px color-mix(in srgb, var(--ink) 22%, transparent); }
  .b-countdown-tag { display: inline-block; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent-ink); background: var(--accent); padding: 6px 12px; border-radius: 999px; margin: 0 0 14px; }
  .b-countdown-label { font-family: var(--font-h); font-size: 1.15rem; color: var(--ink); margin: 0 0 22px; font-weight: var(--w-strong); }
  .b-clock { display: flex; gap: 12px; justify-content: center; align-items: flex-start; }
  .b-unit { position: relative; min-width: 72px; display: flex; flex-direction: column; align-items: center; gap: 8px; }
  .b-unit-value { display: block; width: 100%; padding: 14px 6px; background: var(--bg); color: var(--ink); border: 1px solid var(--border); border-radius: var(--radius-btn); font-family: var(--font-ui); font-size: 2rem; font-weight: var(--w-ui); font-variant-numeric: tabular-nums; line-height: 1; }
  .b-unit-label { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.1em; font-weight: 700; color: var(--muted); }
  .b-countdown.is-ended .b-countdown-panel { opacity: 0.6; }
  .b-countdown.is-ended .b-countdown-panel { opacity: 0.55; }
  .b-countdown-status { font-size: 0.85rem; color: color-mix(in srgb, var(--bg) 75%, transparent); margin: 18px 0 0; }

  /* Mídia 16:9: imagem ou espaço tracejado (quando ainda não tem imagem). */
  .b-media { display: block; width: 100%; aspect-ratio: 16 / 9; border-radius: var(--radius-btn); overflow: hidden; margin: 0 0 18px; background: var(--bg); }
  .b-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .b-media.is-empty { display: flex; align-items: center; justify-content: center; border: 1.5px dashed var(--border); color: var(--muted); font-size: 0.8rem; text-align: center; padding: 12px; }
  .b-media-wide { width: 100%; }

  /* Espaço gerando a imagem agora (uma a uma, de cima pra baixo): brilho animado em vez do
     tracejado estático de "vazio", pra dar a mesma sensação de esqueleto pulsando dos criativos. */
  .b-media.is-loading, .b-image-slot.is-loading {
    display: flex; align-items: center; justify-content: center;
    border: none; color: var(--muted); font-size: 0.8rem; font-weight: 600; text-align: center;
    background: linear-gradient(100deg, var(--surface) 30%, var(--border) 50%, var(--surface) 70%);
    background-size: 200% 100%; animation: b-shimmer 1.6s ease-in-out infinite;
  }
  .b-media.is-loading span, .b-image-slot.is-loading span { background: var(--bg); padding: 6px 12px; border-radius: 999px; }
  @keyframes b-shimmer { 0% { background-position: 150% 0; } 100% { background-position: -50% 0; } }
  @media (prefers-reduced-motion: reduce) {
    .b-media.is-loading, .b-image-slot.is-loading { animation: none; }
  }
  /* Imagem do plano: mockup de produto, quase sempre mais alto que 16:9. Com aspect-ratio 16/9 e
     object-fit: cover (a regra geral de .b-media), o topo e a base do mockup eram cortados e o kit
     aparecia pela metade. Aqui a proporção é 4:3 e a imagem é encaixada INTEIRA, sobre o fundo do
     cartão, que é como um mockup de produto precisa aparecer. */
  /* Imagem do plano: é o mockup do produto, a peça que mais convence no cartão de preço.
     O raio é o do CARTÃO (--radius) e não o do botão (--radius-btn, 70% dele), porque é a peça
     mais larga do cartão e com o raio menor o arredondamento quase não aparecia. */
  .b-plan-media { margin: -4px 0 20px; aspect-ratio: 4 / 3; border-radius: var(--radius); background: color-mix(in srgb, var(--ink) 4%, var(--bg)); }

  /* COM imagem, a caixa toma a ALTURA NATURAL da imagem, sem proporção fixa.
     Isso resolve dois problemas de uma vez. O primeiro é o corte: a imagem é pedida em 16:9 mas o
     provedor devolve o que quiser (3:2, por exemplo), e qualquer proporção cravada aqui ou corta o
     mockup ou sobra moldura. O segundo é o arredondamento, que é consequência do primeiro: com a
     caixa em 4:3 e object-fit: contain, a foto 16:9 ficava menor que a caixa, e o border-radius
     recortava a CAIXA (que o leitor não vê) enquanto a foto seguia com os cantos retos. Com a caixa
     do tamanho exato da imagem, o overflow: hidden dela arredonda a foto de verdade.
     O espaço vazio (um <div>, não um <figure>) continua com proporção fixa pra não colapsar. */
  figure.b-plan-media { aspect-ratio: auto; background: transparent; }
  figure.b-plan-media img { height: auto; object-fit: contain; border-radius: inherit; }
  .b-card .b-media { margin-bottom: 18px; }

  /* Comparação lado a lado. */
  .b-compare-grid { display: grid; gap: 18px; grid-template-columns: 1fr; max-width: 800px; margin: 0 auto; }
  .b-compare-item { margin: 0; padding: 14px; background: var(--surface); border: 0; border-radius: 12px; box-shadow: 0 1px 2px color-mix(in srgb, var(--ink) 8%, transparent), 0 12px 28px -14px color-mix(in srgb, var(--ink) 22%, transparent); }
  .b-compare-item.is-after { border-color: var(--accent); }
  .b-compare-item figcaption { padding: 0 6px 4px; }
  .b-compare-tag { display: inline-block; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; }
  .b-compare-item.is-after .b-compare-tag { color: var(--accent); }
  .b-compare-text { margin: 0; color: var(--ink); font-size: 1rem; line-height: 1.55; }
  .b-compare .b-title { margin-bottom: 28px; }
  .b-compare.is-title-below .b-title { margin-bottom: 0; margin-top: 28px; }
  @media (min-width: 560px) {
    .b-compare-grid { grid-template-columns: 1fr 1fr; }
  }

  /* Passos em cartões com imagem 16:9. */
  /* As colunas saem da mesma regra dos cartões (ver gridCols): com 3 colunas fixas, uma lista de 4
     passos fechava 3 na primeira fila e deixava 1 sozinho na segunda, que é a fila torta. */
  .b-step-grid { list-style: none; padding: 0; margin: 0 auto; display: grid; gap: 18px; grid-template-columns: 1fr; max-width: 960px; }
  .b-step-card { padding: 14px 14px 22px; background: var(--surface); border: 0; border-radius: 12px; box-shadow: 0 1px 2px color-mix(in srgb, var(--ink) 8%, transparent), 0 12px 28px -14px color-mix(in srgb, var(--ink) 22%, transparent); }
  .b-step-number { flex-shrink: 0; width: 36px; height: 36px; border-radius: 50%; background: var(--accent); color: var(--accent-ink); display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-ui); font-weight: var(--w-ui); font-size: 0.95rem; }
  .b-step-head { display: flex; gap: 12px; align-items: center; margin-bottom: 10px; }
  .b-card-head { display: flex; align-items: center; gap: 14px; margin-bottom: 10px; }
  .b-card-head .b-card-icon { margin-bottom: 0; flex-shrink: 0; }
  .b-card-head .b-card-title { margin: 0; }
  .b-step-title { font-family: var(--font-h); font-size: 1.1rem; font-weight: var(--w-strong); margin: 0; color: var(--ink); min-width: 0; }
  .b-step-text { margin: 0; color: var(--muted); font-size: 0.95rem; line-height: 1.6; }
  @media (min-width: 720px) {
    .b-step-grid.is-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .b-step-grid.is-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  }

  /* Depoimentos: cartões que nunca passam da largura disponível. */
  .b-quote-grid { display: grid; gap: 18px; grid-template-columns: 1fr; max-width: 960px; margin: 0 auto; }
  .b-quote { margin: 0; padding: var(--card-pad); display: flex; flex-direction: column; gap: 16px; min-width: 0; background: var(--surface); border: 0; border-radius: 12px; box-shadow: 0 1px 2px color-mix(in srgb, var(--ink) 8%, transparent), 0 12px 28px -14px color-mix(in srgb, var(--ink) 22%, transparent); }
  .b-quote-head { display: flex; align-items: center; gap: 12px; min-width: 0; }
  .b-quote-head > div { display: flex; flex-direction: column; min-width: 0; }
  .b-avatar { display: inline-flex; flex-shrink: 0; width: 44px; height: 44px; border-radius: 50%; background: var(--accent); color: var(--accent-ink); align-items: center; justify-content: center; font-weight: 700; font-size: 1.05rem; }
  .b-avatar-photo { display: block; object-fit: cover; background: var(--accent); }
  .b-quote-name { font-size: 0.95rem; color: var(--ink); }
  .b-quote-context { font-size: 0.82rem; color: var(--muted); }
  .b-quote blockquote { margin: 0; color: var(--ink); font-size: 1rem; line-height: 1.6; overflow-wrap: anywhere; }

  .b-author { text-align: center; }
  .b-author-name { font-family: var(--font-h); font-size: 1.2rem; font-weight: var(--w-strong); margin: 0 0 4px; color: var(--ink); }
  .b-author-role { margin: 0 0 16px; color: var(--muted); font-size: 0.95rem; }
  .b-author .b-prose-plain { max-width: 620px; margin: 0 auto; }

  .b-final-cta { text-align: center; padding-bottom: 96px; }

  /* Link de recusa (upsell e popup): discreto, mas legível e clicável. Nunca some: quem não quer a
     oferta precisa de um caminho claro pra seguir. */
  .b-decline { display: block; width: fit-content; margin: 18px auto 0; color: var(--muted); font-size: 0.9rem; text-decoration: underline; text-underline-offset: 3px; }
  .b-decline:hover { color: var(--ink); }

  /* Popup de upgrade: modal sobre a página, com a mesma identidade dela (cores, fontes, botão). */
  .b-upg { position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center; padding: 20px; }
  .b-upg[hidden] { display: none; }
  .b-upg-backdrop { position: absolute; inset: 0; background: color-mix(in srgb, #1A237E 62%, transparent); animation: b-upg-fade 0.2s ease both; }
  .b-upg-card { position: relative; width: 100%; max-width: 480px; max-height: calc(100vh - 40px); overflow-y: auto; text-align: center; padding: 34px 28px 26px; background: var(--bg); color: var(--ink); border-radius: 12px; box-shadow: 0 30px 70px -24px color-mix(in srgb, #1A237E 55%, transparent); animation: b-upg-in 0.28s cubic-bezier(0.22, 0.61, 0.36, 1) both; }
  .b-upg-x { position: absolute; top: 10px; right: 12px; width: 34px; height: 34px; border: 0; border-radius: 50%; background: transparent; color: var(--muted); font-size: 24px; line-height: 1; cursor: pointer; }
  .b-upg-x:hover { background: var(--surface); color: var(--ink); }
  .b-upg-kicker { font-size: 0.74rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); margin: 0 0 10px; }
  .b-upg-title { font-family: var(--font-h); font-size: 1.5rem; font-weight: 400; line-height: 1.2; letter-spacing: 0.005em;  margin: 0 0 10px; }
  .b-upg-body { color: var(--muted); font-size: 0.98rem; line-height: 1.55; margin: 0 0 18px; }
  .b-upg-offer { text-align: left; padding: 18px 20px; margin: 0 0 18px; background: var(--surface); border: 0; border-radius: 12px; box-shadow: 0 1px 2px color-mix(in srgb, var(--ink) 8%, transparent), 0 12px 28px -14px color-mix(in srgb, var(--ink) 22%, transparent); border-color: var(--accent); }
  .b-upg-name { font-family: var(--font-h); font-weight: var(--w-strong); font-size: 1.1rem; margin: 0 0 4px; }
  .b-upg-prices { display: flex; align-items: baseline; gap: 10px; margin: 0 0 12px; }
  .b-upg-prices s { color: var(--muted); font-size: 0.95rem; }
  .b-upg-prices strong { font-family: var(--font-ui); font-weight: var(--w-ui); font-size: 1.9rem; letter-spacing: -0.02em; color: var(--ink); }
  .b-upg-offer .b-checklist { max-width: none; gap: 8px; }
  .b-upg-cta { width: 100%; }
  .b-upg-open, .b-upg-open body { overflow: hidden; }
  @keyframes b-upg-fade { from { opacity: 0; } to { opacity: 1; } }
  @keyframes b-upg-in { from { opacity: 0; transform: translateY(14px) scale(0.98); } to { opacity: 1; transform: none; } }

  /* Checkout (prévia do order bump). O checkout de verdade fica na plataforma de pagamento; aqui é
     a prévia com a cara da página, pra o usuário ver a copy no contexto antes de colar lá. */
  .ck { max-width: 980px; margin: 0 auto; padding: 40px 24px 64px; }
  .ck-lock { display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 0.82rem; color: var(--muted); margin: 0 0 28px; }
  .ck-lock .b-icon-svg { width: 16px; height: 16px; color: var(--accent); }
  .ck-grid { display: grid; gap: 24px; grid-template-columns: 1fr; align-items: start; }
  .ck-title { font-family: var(--font-h); font-size: 1.15rem; font-weight: var(--w-strong); margin: 0 0 16px; color: var(--ink); }
  .ck-field { height: 48px; display: flex; align-items: center; padding: 0 16px; margin: 0 0 12px; border: 1px solid var(--border); border-radius: var(--radius-btn); background: var(--surface); color: var(--muted); font-size: 0.9rem; }
  .ck-row { display: grid; grid-template-columns: 1fr 120px; gap: 12px; }
  .ck-summary { padding: 24px; background: var(--surface); border: 0; border-radius: 12px; box-shadow: 0 1px 2px color-mix(in srgb, var(--ink) 8%, transparent), 0 12px 28px -14px color-mix(in srgb, var(--ink) 22%, transparent); }
  .ck-line { display: flex; justify-content: space-between; gap: 12px; font-size: 0.95rem; padding: 10px 0; border-bottom: 1px solid var(--border); color: var(--ink); }
  .ck-line strong { white-space: nowrap; }
  .ck-bump-heading { margin: 18px 0 8px; font-size: 0.74rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); }
  .ck-bump { display: flex; gap: 12px; align-items: flex-start; padding: 14px; margin: 10px 0; border: 2px dashed var(--accent); border-radius: var(--radius-btn); background: color-mix(in srgb, var(--accent) 8%, var(--bg)); }
  .ck-box { flex-shrink: 0; width: 20px; height: 20px; margin-top: 2px; border-radius: 5px; background: var(--accent); color: var(--accent-ink); display: inline-flex; align-items: center; justify-content: center; }
  .ck-box .b-check { background: none; padding: 0; margin: 0; color: var(--accent-ink); }
  .ck-bump-name { margin: 0; font-weight: 700; font-size: 0.97rem; color: var(--ink); }
  .ck-bump-price { color: var(--accent); margin-left: 6px; white-space: nowrap; }
  .ck-bump-copy { margin: 4px 0 0; font-size: 0.88rem; color: var(--muted); line-height: 1.5; }
  .ck-total { display: flex; justify-content: space-between; font-family: var(--font-ui); font-weight: var(--w-ui); font-size: 1.2rem; padding: 16px 0 6px; color: var(--ink); }
  .ck-summary .b-cta { width: 100%; margin-top: 12px; }
  .ck-note { margin: 28px auto 0; max-width: 560px; text-align: center; font-size: 0.82rem; color: var(--muted); }
  @media (min-width: 760px) { .ck-grid { grid-template-columns: 1.25fr 1fr; gap: 32px; } }

  /* Entrada das seções ao rolar. Só esconde quando o JS está ativo. */
  .js .reveal { opacity: 0; will-change: opacity, transform; }
  .js .reveal.is-in { opacity: 1; transform: none; }
  .js .reveal { transform: translateY(18px); transition: opacity 0.7s ease, transform 0.7s ease; }

  @media (max-width: 720px) {
    .b { padding: 60px 20px; }
    .b.tone-tint, .b.tone-accent, .b.tone-ink { padding-left: 20px; padding-right: 20px; }
    /* Nas páginas novas o título não encolhe pra um tamanho fixo: o clamp já cuida disso, e cravar
       1.6rem aqui anulava a escala tipográfica da identidade justamente na tela onde a maioria
       compra. Nas antigas o corte fixo volta, pra a página sair igual ao que já está publicado. */
    
    .b-hero-sub { font-size: 1.05rem; }
    .b-hero { padding-top: 49px; }
    .b-hero.hero-editorial .b-hero-title, .b-hero.hero-esquerda .b-hero-title { max-width: none; }
    .b-hero.hero-editorial .b-hero-image, .b-hero.hero-editorial .b-image-slot { margin-left: 0; }
    .b-card-grid { grid-template-columns: 1fr; }
    .b-guarantee .b-box { flex-direction: column; text-align: center; gap: 20px; padding: 28px 22px; }
    .b-guarantee .b-title { text-align: center; }
    .b-unit { min-width: 60px; }
    .b-unit-value { font-size: 1.5rem; padding: 12px 6px; }
    .b-plan { padding: 30px 20px 24px; }
    /* O destaque por escala/elevação sai no celular: o cartão maior vira overflow horizontal e a
       margem negativa encosta um plano no outro. No mobile o destaque fica só na borda e no selo. */
    .b-plan.is-highlight { transform: none; margin-top: 0; margin-bottom: 0; }
  }
  @media (min-width: 720px) {
    .b-quote-grid.is-cols-2 { grid-template-columns: 1fr 1fr; }
    .b-quote-grid.is-cols-3 { grid-template-columns: 1fr 1fr 1fr; }
    .b-card-grid.is-cols-2 { grid-template-columns: 1fr 1fr; }
    .b-card-grid.is-cols-3 { grid-template-columns: 1fr 1fr 1fr; }

    /* Desktop com composição própria, não a pilha do celular esticada (é o que o documento de
       referência pede e o que o CSS antigo não fazia: as mesmas colunas, a mesma largura e a mesma
       ordem, só com mais espaço em volta). */
    /* Texto numa coluna (título em cima, subtítulo e botão embaixo) e a imagem na outra, ocupando a
       altura das duas linhas. Sem a colocação explícita, os três grupos caíam em sequência e a
       imagem ia parar embaixo do título, na mesma coluna do texto. */
    .b-hero.hero-split { grid-template-columns: 1.05fr 0.95fr; gap: 20px 44px; align-items: center; }
    .b-hero.hero-split .b-hero-head { order: 0; grid-column: 1; grid-row: 1; align-self: end; }
    .b-hero.hero-split .b-hero-body { order: 0; grid-column: 1; grid-row: 2; align-self: start; }
    .b-hero.hero-split .b-hero-media { order: 0; grid-column: 2; grid-row: 1 / span 2; align-self: center; }
    .b-hero.hero-editorial { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 40px 48px; align-items: end; }
    .b-hero.hero-editorial .b-hero-head { grid-column: 1 / -1; }
    .b-hero.hero-editorial .b-hero-media { grid-column: 2; grid-row: 2; }
    .b-hero.hero-editorial .b-hero-body { grid-column: 1; grid-row: 2; align-self: center; }

    /* Grade assimétrica na comparação: o lado "depois" ganha mais área, porque é o estado que a
       oferta vende. Simétrico comunica que as duas opções valem o mesmo. */
    .b-compare-grid { grid-template-columns: 0.88fr 1.12fr; gap: 24px; align-items: center; }
    .b-compare-item.is-after { padding: 18px; }
  }
  @media (prefers-reduced-motion: reduce) {
    .js .reveal, .js .reveal > *, .b-cta, .b-faq-plus, .b-faq-plus::after, .b-sticky, .b-notify { transition: none; }
    .b-bar span, .b-faq-item[open] .b-faq-answer, .b-topbar-dot, .b-topbar-track, .b-upg-card, .b-upg-backdrop { animation: none; }
    /* Sem animação, o marquee vira um aviso estático e centralizado: mostra um grupo só, com uma
       repetição só, senão o texto apareceria duplicado parado na tela. */
    .b-topbar.is-marquee .b-topbar-track { width: 100%; }
    .b-topbar.is-marquee .b-topbar-group { min-width: 100%; justify-content: center; }
    .b-topbar.is-marquee .b-topbar-group:nth-child(2) { display: none; }
    .b-topbar.is-marquee .b-topbar-group > span:nth-child(n+2) { display: none; }
    .js .reveal, .js .reveal > * { opacity: 1; transform: none; filter: none; }
  }