/* comecar.css — onboarding sem conta (Rodada 1), design-system-v4/canonical/features/onboarding/.
 * Onde a spec e DECISOES-DE-IMPLEMENTACAO.md divergirem, vale o segundo.
 * Só layout/estrutura aqui — cor e tipografia vêm de design-system/colors_and_type.css
 * e dos componentes de design-system/components.css (.btn, .input, .chip-select).
 */

/* O projeto não tem um reset global de box-sizing (só componentes pontuais,
 * como .btn/.input, o setam individualmente) — sem isto, width:100% + padding
 * nos contêineres desta página somava além do viewport (achado nesta
 * verificação: .cmc-coluna ficava com 438px de largura real num viewport de
 * 390px, cortando texto). Escopado a esta página, não ao app inteiro. */
.cmc-body, .cmc-body *, .cmc-body *::before, .cmc-body *::after { box-sizing: border-box; }

body.cmc-body { margin: 0; background: var(--bg); color: var(--fg); }

.cmc-tela { display: none; }
.cmc-tela.is-ativa { display: flex; flex-direction: column; }
/* min-height desconta o cabeçalho (.cbv3-barra, 68px — decisão e), que fica
 * FORA de .cmc-tela (inserido antes de <main> por cabecalho-global-v3.js), não
 * dentro dela. A1 e R1 não têm cabeçalho — usam .cmc-sem-cabecalho para
 * recuperar os 100vh inteiros.
 *
 * SÓ DESKTOP: é o piso daquela largura (a página pode crescer além dele). No
 * mobile (<1024px) quem manda é o bloco logo abaixo — height de verdade via
 * o body-flex, nunca min-height — por isso isto precisa ficar FORA do
 * alcance do mobile: uma regra de 3 classes (.cmc-tela.cmc-sem-cabecalho.is-ativa)
 * tem mais especificidade que a nova .cmc-tela.is-ativa de 2 classes e
 * vazava min-height:100vh (o bug antigo, baseado em vh) pras telas sem
 * cabeçalho mesmo dentro do media query novo — achado revisando a cascata,
 * não só testando. */
@media (min-width: 1024px) {
  .cmc-tela.is-ativa { min-height: calc(100vh - 68px); }
  .cmc-tela.cmc-sem-cabecalho.is-ativa { min-height: 100vh; }
}

/* ── Bug real-device (Chrome Android), 2 causas achadas testando em device
 * de verdade, não só em CDP headless:
 *
 * 1. "68px" fixo pro cabeçalho estava ERRADO: .cbv3-barra tem
 *    padding-top:env(safe-area-inset-top) (notch/barra de status) — em
 *    device com esse inset > 0, o cabeçalho real passa de 68px, a soma
 *    cabeçalho+tela estoura 100dvh e o BODY (não devia) rola. Corrigido
 *    tirando a conta manual: agora o próprio body é um flex column de
 *    100dvh, .cbv3-barra e <main> são os dois filhos — o flex mede o
 *    cabeçalho de verdade sozinho, nunca erra.
 *
 * 2. position:sticky no CTA do rodapé (pra "grudar" no fim do miolo que
 *    rola) renderizava com fundo esbranquiçado/desbotado em Android real —
 *    suspeita: compositing de GPU de sticky aninhado em overflow:hidden +
 *    overflow:auto. Trocado por IRMÃO VERDADEIRO (flex-shrink:0, fora da
 *    área que rola) — mesmo padrão que .cmc-leitura-rodape (A5) já usava e
 *    nunca teve esse bug.
 *
 * Só até 1023px: no desktop não existe barra de navegador que
 * aparece/some, e isto quebraria os grids de A6/A6b (§4). ── */
@media (max-width: 1023px) {
  html { height: 100%; }
  body.cmc-body {
    display: flex; flex-direction: column;
    height: 100vh; height: 100svh; height: 100dvh;
    overflow: hidden;
  }
  .cbv3-barra { flex-shrink: 0; }
  .cmc-main { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
  .cmc-tela.is-ativa { flex: 1; min-height: 0; height: auto; overflow: hidden; }

  /* O miolo que rola de verdade (todo .cmc-coluna, em qualquer tela). */
  .cmc-coluna { flex: 1; min-height: 0; overflow-y: auto; padding-bottom: 0; }

  /* Rodapé IRMÃO de .cmc-coluna — nunca sticky, sempre fora da área que
   * rola (ver nota 2 acima). */
  .cmc-rodape-a1, .cmc-cta-par, .cmc-tela-rodape, .cmc-a6-rodape-fixo {
    flex-shrink: 0; background: var(--bg);
    padding: 10px 24px max(16px, env(safe-area-inset-bottom));
  }
  /* A6/A7 são cmc-a6-tela (fundo --hero-grad, não --bg). */
  .cmc-a6-tela .cmc-rodape-a1,
  .cmc-a6-tela .cmc-cta-par,
  .cmc-a6-tela .cmc-tela-rodape,
  .cmc-a6-tela .cmc-a6-rodape-fixo {
    background: var(--hero-grad);
  }

  /* A6b: .cmc-coluna É o cartão branco no desktop (não display:contents,
   * ver grid §4 mais abaixo) — não dá pra tirar o botão dela sem
   * reconstruir esse cartão. No mobile, o formulário inteiro (campos +
   * botão + termos) rola como uma coisa só, sem rodapé separado. */
  #tela-A6b .cmc-coluna { padding-bottom: 16px; }

  /* A7: um bloco só, centralizado quando cabe, rola normal quando não cabe
   * — sem rodapé separado (o botão é só mais um filho de .cmc-coluna). */
  .cmc-a7-tela .cmc-coluna { justify-content: center; gap: 24px; padding-bottom: 16px; }
}

/* A6 agrupa dois blocos (contas + terciários) num só rodapé, pra ficar
 * junto quando vira irmão de .cmc-coluna no mobile — o gap entre eles era
 * dado por .cmc-coluna{gap:16px}, precisa ser recriado aqui dentro. No
 * desktop (display:contents, grid §4) isto não se aplica — os netos
 * ignoram o layout do pai. */
.cmc-a6-rodape-fixo { display: flex; flex-direction: column; gap: 16px; }

/* Rodapé de 1 botão só (A2, A3b, A3c, A7 — mas A7 não usa esta classe, o
 * botão fica dentro de .cmc-coluna). */
.cmc-tela-rodape { display: flex; }

/* Colunas: mobile ocupa a largura toda; desktop vira coluna central de 440px (spec §4b). */
.cmc-coluna {
  flex: 1;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  padding: 16px 24px 24px;
  gap: 16px;
}
@media (min-width: 1024px) {
  /* flex:none (não mais flex:1 da base mobile): sem isto, .cmc-coluna
   * crescia pra preencher todo o min-height da tela (~730px) — sobrava
   * flex-grow porque o rodapé saiu dela (virou irmão) e não tinha mais o
   * .cmc-espaco{flex:1} de antes pra consumir esse espaço — e o rodapé,
   * vindo DEPOIS dessa coluna gigante, ficava empurrado pra fora do
   * viewport. Com flex:none a coluna volta a medir só o próprio conteúdo,
   * como media antes de o rodapé virar irmão (achado rodando os scripts de
   * desktop de novo depois da correção mobile). Não afeta A6/A6b/A7: nos
   * três o pai de .cmc-coluna é grid, não flex, então `flex` nela é inerte. */
  .cmc-coluna { max-width: 440px; padding-top: 40px; flex: none; }
  /* Os rodapés que viraram irmãos de .cmc-coluna no mobile (acima) também
   * existem no desktop nas telas de painel-marca (A1, A4, A4c, R1, A2, A3b,
   * A3c) — sem isto, eles ficariam largura-total em vez de alinhados com a
   * coluna de 440px acima. A6/A6b/A7 não usam estas classes de rodapé
   * (A6 some em display:contents; A6b/A7 não têm rodapé separado), então
   * esta regra não interfere nos grids deles. */
  .cmc-rodape-a1, .cmc-cta-par, .cmc-tela-rodape {
    max-width: 440px; width: 100%; margin: 0 auto;
    padding-left: 24px; padding-right: 24px; box-sizing: border-box;
  }
}

/* ── A1 / R1: abertura, sem cabeçalho de tela empilhada — só a logo ── */
.cmc-logo { height: 52px; }
.cmc-logo-img { height: 52px; display: block; }

.cmc-intro { display: flex; flex-direction: column; gap: 8px; }
.cmc-intro h1 { margin: 0; font: 600 30px/1.2 var(--font-display); color: var(--fg); }
.cmc-intro p { margin: 0; font: 400 15px/1.55 var(--font-ui); color: var(--fg-2); }

.cmc-intencoes { display: flex; flex-direction: column; gap: 10px; }
.cmc-intencao {
  min-height: 60px; border: 0; border-radius: 20px; background: var(--surface);
  box-shadow: var(--shadow-md); display: flex; align-items: center; gap: 14px;
  padding: 0 18px; text-align: left; font: 600 15.5px var(--font-ui); color: var(--fg);
  cursor: pointer;
}
.cmc-intencao:hover { background: var(--surface-hover); }
.cmc-intencao svg { width: 22px; height: 22px; color: var(--mark); flex-shrink: 0; }

.cmc-espaco { flex: 1; }

.cmc-rodape-a1 { display: flex; flex-direction: column; gap: 10px; }
.cmc-entrar {
  height: 44px; border: 0; background: transparent; font: 500 14.5px var(--font-ui);
  color: var(--fg-2); cursor: pointer;
}
.cmc-entrar strong { color: var(--primary-text); font-weight: 600; }

/* ── Cabeçalho empilhado / leitura ficam por conta de cabecalho-global-v3.js;
   aqui só reservamos espaço de <main> para o insertBefore funcionar. ── */
.cmc-main { display: flex; flex-direction: column; flex: 1; }

/* ── A2: caminhos ── */
.cmc-rotulo-intencao {
  display: inline-flex; align-items: center; gap: 6px;
  font: 700 11px var(--font-ui); letter-spacing: .11em; text-transform: uppercase; color: var(--fg-2);
}
/* SVG sem width/height cai no tamanho padrão do navegador (300×150) — sem isto, o ícone do
   rótulo de A2 sozinho já estoura a tela (achado na verificação visual desta rodada). */
.cmc-rotulo-intencao svg { width: 14px; height: 14px; flex-shrink: 0; }
.cmc-titulo-secao { margin: 0; font: 600 26px/1.25 var(--font-display); color: var(--fg); }

.cmc-caminhos { display: flex; flex-direction: column; gap: 12px; }
.cmc-caminho {
  border-radius: 20px; background: var(--surface); box-shadow: var(--shadow-md);
  padding: 18px; display: flex; gap: 14px; align-items: flex-start; text-align: left;
  border: 0; cursor: pointer; width: 100%;
}
.cmc-caminho[aria-checked="true"] { box-shadow: var(--shadow-md), inset 0 0 0 2px var(--primary-text); }
.cmc-caminho-marca {
  width: 24px; height: 24px; border-radius: 999px; flex-shrink: 0; margin-top: 1px;
  box-shadow: inset 0 0 0 1.5px var(--mark); display: grid; place-items: center;
}
.cmc-caminho[aria-checked="true"] .cmc-caminho-marca {
  background: var(--primary); color: var(--fg-on-primary); box-shadow: none;
}
.cmc-caminho-marca svg { width: 14px; height: 14px; }
.cmc-caminho-texto { display: flex; flex-direction: column; gap: 4px; }
.cmc-caminho-texto strong { font: 600 16px var(--font-ui); color: var(--fg); }
.cmc-caminho-texto span { font: 400 14px/1.5 var(--font-ui); color: var(--fg-2); }
.cmc-caminho-sugerido { font: 600 12.5px var(--font-ui); color: var(--primary-text); margin-top: 4px; }

/* ── A3a: catálogo ── */
.cmc-lista-planos { display: flex; flex-direction: column; gap: 12px; }
.cmc-plano-card {
  border-radius: 20px; background: var(--surface); box-shadow: var(--shadow-md);
  padding: 14px; display: flex; gap: 14px; align-items: center; text-align: left;
  border: 0; cursor: pointer; width: 100%;
}
.cmc-plano-card:hover { background: var(--surface-hover); }
.cmc-plano-thumb {
  width: 64px; height: 64px; border-radius: 14px; flex-shrink: 0;
  background: repeating-linear-gradient(135deg, var(--surface-2) 0 10px, var(--surface-hover) 10px 20px);
  background-size: cover; background-position: center;
}
.cmc-plano-info { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.cmc-plano-info strong { font: 600 16px var(--font-ui); color: var(--fg); }
.cmc-plano-info span { font: 400 13.5px var(--font-ui); color: var(--fg-2); }
.cmc-plano-destaque { font: 700 11px var(--font-ui); letter-spacing: .11em; text-transform: uppercase; color: var(--primary-text); }

/* ── A3b: por livro ── */
.cmc-pergunta { display: flex; flex-direction: column; gap: 12px; }
.cmc-pergunta h2 { margin: 0; font: 600 22px/1.25 var(--font-display); color: var(--fg); }
.cmc-busca-livro { width: 100%; height: 50px; }
.cmc-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.cmc-chip-livro {
  height: 44px; display: inline-flex; align-items: center; gap: 6px; padding: 0 16px;
  border-radius: 999px; background: var(--surface-2); font: 600 14px var(--font-ui);
  color: var(--fg); border: 0; cursor: pointer;
}
.cmc-chip-livro[aria-checked="true"] {
  background: var(--surface); box-shadow: inset 0 0 0 2px var(--primary-text); color: var(--primary-text);
}
.cmc-chip-livro svg { width: 14px; height: 14px; }
.cmc-estimativa { margin: 0; font: 500 14px var(--font-ui); color: var(--fg-2); font-variant-numeric: tabular-nums; }
.cmc-vazio { margin: 0; font: 400 14px var(--font-ui); color: var(--fg-2); }

/* ── A4: plano montado ── */
.cmc-hero {
  border-radius: 28px; background: var(--hero-grad); padding: 24px 22px;
  display: flex; flex-direction: column; gap: 8px;
}
.cmc-hero-overline { font: 700 11px var(--font-ui); letter-spacing: .11em; text-transform: uppercase; color: var(--hero-overline); }
.cmc-hero h2 { margin: 0; font: 600 28px/1.2 var(--font-display); color: var(--hero-fg); }
.cmc-hero p { margin: 0; font: 400 14.5px/1.55 var(--font-ui); color: var(--hero-fg-2); }
.cmc-hero-meta { font: 600 13.5px var(--font-ui); color: var(--hero-fg); font-variant-numeric: tabular-nums; }

.cmc-dia1-card {
  border-radius: 20px; background: var(--surface); box-shadow: var(--shadow-md);
  padding: 18px; display: flex; align-items: center; gap: 14px; border: 0; cursor: pointer; width: 100%; text-align: left;
}
.cmc-dia1-texto { flex: 1; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.cmc-dia1-rotulo { font: 700 11px var(--font-ui); letter-spacing: .11em; text-transform: uppercase; color: var(--primary-text); }
.cmc-dia1-titulo { font: 600 17px var(--font-ui); color: var(--fg); }
.cmc-dia1-sub { font: 400 13.5px var(--font-ui); color: var(--fg-2); }
.cmc-dia1-seta { color: var(--mark); display: grid; flex-shrink: 0; }
.cmc-dia1-seta svg { width: 20px; height: 20px; }

.cmc-proximos-dias { display: flex; flex-direction: column; padding: 0 4px; }
.cmc-proximo-dia {
  display: flex; justify-content: space-between; align-items: center; height: 44px;
  border-bottom: 1px solid var(--border);
}
.cmc-proximo-dia:last-child { border-bottom: 0; }
.cmc-proximo-dia span:first-child { font: 500 14.5px var(--font-ui); color: var(--fg); }
.cmc-proximo-dia span:last-child { font: 400 13px var(--font-ui); color: var(--fg-2); }

.cmc-link {
  height: 44px; border: 0; background: transparent; font: 600 14.5px var(--font-ui);
  color: var(--primary-text); cursor: pointer;
}
.cmc-link-fraco { color: var(--fg-2); font-weight: 500; font-size: 14px; }
/* Par de CTAs no fim de uma etapa (A4, A4c) — empilhado por padrão (mesmo
 * espaçamento de .cmc-coluna), vira "lado a lado" só no desktop (§4). */
.cmc-cta-par { display: flex; flex-direction: column; gap: 16px; }

/* ── A5 / salmo da espera: leitura sem conta ──
 * No mobile, a altura fixa vem da regra universal (.cmc-tela.is-ativa dentro
 * de @media max-width:1023px, dependurada do body-flex de 100dvh — ver
 * topo do arquivo); aqui só o corpo/rodapé específicos de leitura. O corpo
 * rola por dentro (.cmc-leitura-corpo) e o botão "Concluir"/o aviso ficam
 * sempre alcançáveis, como IRMÃOS verdadeiros do corpo (.cmc-leitura-rodape,
 * flex-shrink:0) — nunca position:sticky. */
.cmc-leitura-corpo { flex: 1; display: flex; flex-direction: column; padding: 14px 26px 0; gap: 14px; overflow-y: auto; }
/* Mesma medida do leitor logado (.leitura-wrapper, leitura.html:118, 680px) —
 * sem isto, o texto ocupava a largura toda da tela no desktop (achado nesta
 * rodada). Centralizado, com a mesma largura pro rodapé/botão do corpo. */
@media (min-width: 1024px) {
  .cmc-leitura-corpo, .cmc-leitura-rodape { max-width: 680px; margin-left: auto; margin-right: auto; width: 100%; }
}
.cmc-leitura-fonte {
  font: 700 11px var(--font-ui); letter-spacing: .11em; text-transform: uppercase; color: var(--fg-2);
  align-self: center;
}
.cmc-leitura-titulo { margin: 0 0 4px; font: 600 26px/1.25 var(--font-display); color: var(--fg); text-align: center; }
.cmc-leitura-rodape {
  flex-shrink: 0; padding: 12px 20px max(16px, env(safe-area-inset-bottom));
  display: flex; flex-direction: column; gap: 8px; background: var(--bg);
}
.cmc-leitura-carregando { padding: 40px 0; text-align: center; color: var(--fg-2); font: 400 14px var(--font-ui); }

/* ── R1 ── */
.cmc-mascote { width: 88px; height: 88px; object-fit: contain; }
.cmc-r1-card {
  border-radius: 24px; background: var(--surface); box-shadow: var(--shadow-md);
  padding: 18px; display: flex; flex-direction: column; gap: 14px;
}
.cmc-r1-topo { display: flex; justify-content: space-between; align-items: baseline; }
.cmc-r1-rotulo { font: 700 11px var(--font-ui); letter-spacing: .11em; text-transform: uppercase; color: var(--primary-text); }
.cmc-r1-tempo { font: 400 13px var(--font-ui); color: var(--fg-2); }
.cmc-r1-card > strong { font: 600 18px var(--font-ui); color: var(--fg); }
/* --mark-subtle, não --track-bg: depois da migração da escala de marca
 * (01-DECISOES.md, 21/09/2026), --track-bg só sobrevive em conquistas.html
 * (.cal-dia); todo trilho novo usa --mark-subtle (backend/tests/contrasteDS.test.js
 * pegou isto nesta rodada). */
.cmc-trilha { height: 8px; border-radius: 999px; background: var(--mark-subtle); overflow: hidden; }
.cmc-trilha > span { display: block; height: 100%; border-radius: 999px; background: var(--primary); }
.cmc-r1-nota { font: 400 13px var(--font-ui); color: var(--fg-2); }

/* ── Tela de espera única (rodada 3) — tela-espera-spec.md §1 ── */
.cmc-espera-coluna { gap: 24px; }

.cmc-espera-topo {
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px;
  padding: 28px 8px 8px;
  animation: cmcEsperaEntra 240ms var(--ease-out);
}
@keyframes cmcEsperaEntra { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) { .cmc-espera-topo { animation: none; } }
.cmc-espera-mascote-zona picture, .cmc-espera-mascote-zona img { display: block; width: 136px; height: 136px; }
#cmc-espera-titulo { margin: 0; font: 600 24px/1.25 var(--font-display); color: var(--fg); }
.cmc-espera-corpo { display: flex; flex-direction: column; gap: 4px; }
.cmc-espera-tema { margin: 0; font: italic 400 16px/1.4 var(--font-read); color: var(--fg); }
.cmc-espera-sub { margin: 0; font: 400 14px/1.5 var(--font-ui); color: var(--fg-2); }
.cmc-espera-plano-titulo { margin: 0; font: 600 16px var(--font-ui); color: var(--fg); }
.cmc-espera-acoes-topo { display: flex; flex-direction: column; gap: 10px; width: 100%; margin-top: 6px; }

/* Cartão do Salmo 23 em destaque — sempre visível, qualquer estado do topo. */
.cmc-espera-salmo-cartao {
  border-radius: 24px; background: var(--surface); box-shadow: var(--shadow-md);
  padding: 18px; display: flex; flex-direction: column; gap: 10px;
}
.cmc-espera-salmo-citacao {
  margin: 0; font: italic 400 21px/1.4 var(--font-read); color: var(--fg);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.cmc-salmo-card-acoes { display: flex; gap: 10px; }
.cmc-salmo-card-btn { flex: 1; height: 44px; padding: 0 16px; font-size: 14px; }

/* Carrossel do catálogo — 3 cartões de 156px, scroll-snap horizontal. */
.cmc-espera-secao { display: flex; flex-direction: column; gap: 12px; }
.cmc-espera-secao-cabecalho { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.cmc-espera-secao-cabecalho h2 { margin: 0; font: 600 16px var(--font-ui); color: var(--fg); }
.cmc-espera-ver-catalogo { height: auto; }
.cmc-espera-carrossel {
  display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory;
  padding: 2px 2px 6px; margin: 0 -2px;
}
.cmc-espera-carrossel-card {
  flex: 0 0 156px; scroll-snap-align: start; border: 0; cursor: pointer; text-align: left;
  background: var(--surface); border-radius: 18px; padding: 12px; box-shadow: var(--shadow-sm);
  display: flex; flex-direction: column; gap: 8px;
}
.cmc-espera-carrossel-card .cmc-plano-thumb {
  width: 100%; height: 80px; border-radius: 12px;
  background-size: cover; background-position: center;
}
.cmc-espera-carrossel-card strong { font: 600 14px var(--font-ui); color: var(--fg); }
.cmc-espera-carrossel-card span { font: 400 12.5px var(--font-ui); color: var(--fg-2); }

/* Ler em grupo · Explorar o Hagá — mesmo peso, lado a lado só no desktop (§5). */
.cmc-espera-duplo { display: flex; flex-direction: column; gap: 12px; }
.cmc-espera-card-duplo {
  display: flex; align-items: center; gap: 14px; text-decoration: none;
  background: var(--surface); border-radius: 18px; padding: 16px; box-shadow: var(--shadow-sm);
}
.cmc-espera-card-duplo-icone {
  width: 40px; height: 40px; border-radius: var(--radius-pill); background: var(--surface-2);
  color: var(--mark); display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.cmc-espera-card-duplo-icone svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 2.1; stroke-linecap: round; stroke-linejoin: round; }
.cmc-espera-card-duplo-texto { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cmc-espera-card-duplo-texto strong { font: 600 14.5px var(--font-ui); color: var(--fg); }
.cmc-espera-card-duplo-texto span { font: 400 13px var(--font-ui); color: var(--fg-2); }

/* ── Aviso fixo no rodapé do Salmo aberto (decisão 2/rodada 3: mantém o
 * mecanismo já testado, só troca o visual para ícone em círculo + título +
 * apoio — mesma linguagem do balão de nav.js e do cartão do Início). ── */
.cmc-aviso-ia {
  display: flex; align-items: center; gap: 10px; padding: 4px 2px;
}
.cmc-aviso-ia-icone {
  width: 32px; height: 32px; border-radius: var(--radius-pill); background: var(--surface-2);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.cmc-aviso-ia-icone svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.cmc-aviso-ia-icone--montando { color: var(--mark); }
.cmc-aviso-ia-icone--pronto { color: var(--success); }
.cmc-aviso-ia-icone--erro { color: var(--danger); background: var(--danger-bg); }
.cmc-aviso-ia-texto { flex: 1; min-width: 0; display: flex; flex-direction: column; text-align: left; }
.cmc-aviso-ia-texto strong { font: 600 13.5px var(--font-ui); color: var(--fg); }
.cmc-aviso-ia-texto span:empty { display: none; }
.cmc-aviso-ia-texto span { font: 400 12.5px var(--font-ui); color: var(--fg-2); }
.cmc-aviso-ia-acao {
  border: 0; background: transparent; padding: 0; cursor: pointer; flex-shrink: 0;
  font: 600 13.5px var(--font-ui); color: var(--primary-text);
}

/* Estado vazio da busca de livros / erro genérico */
.cmc-erro { margin: 0; font: 500 14px var(--font-ui); color: var(--danger, #d8415c); }

.cmc-skeleton {
  height: 52px; width: 100%; border-radius: 6px; margin-bottom: 14px;
  background: var(--surface-2);
}

/* ── A6 — Celebração + conta, tela cheia (Rodada 2 §1). Substitui a folha. ── */
.cmc-a6-tela.is-ativa { background: var(--hero-grad); }
/* Desktop: a própria tela de A6/A6b/A7 é o grid de 1000px centralizado (ver
 * @media min-width:1024px mais abaixo) — pintar --hero-grad NELA só cobre
 * esses 1000px, deixando as laterais com o --bg do body (bug achado em
 * device real, 1280/1920px). O degradê precisa estar no `body` (que é
 * sempre full-bleed) para vazar por baixo do grid centralizado inteiro.
 *
 * `background-color` + `background-image` em vez do atalho `background:` —
 * o atalho zera background-color pra `transparent`, e --hero-grad é só
 * imagem (gradiente), sem cor sólida nenhuma. Sem um background-color de
 * verdade em algum ancestral, checarContraste() (lib-cdp.mjs) não enxerga
 * gradiente e caía no branco-sobre-branco por padrão — regressão achada
 * reexecutando os scripts de desktop depois deste ajuste; --bg aqui nunca
 * aparece (o gradiente cobre 100%), é só a rede de segurança da ferramenta. */
@media (min-width: 1024px) {
  body.cmc-body:has(.cmc-a6-tela.is-ativa) {
    background-color: var(--bg);
    background-image: var(--hero-grad);
  }
}
.cmc-a6-mascote-zona { display: flex; justify-content: center; padding-top: 8px; }
.cmc-a6-mascote-img { width: 136px; height: 136px; object-fit: contain; display: block; }
/* Entrada "uma vez só" (§3): o próprio elemento nasce de novo a cada renderA6()
 * (innerHTML novo), então a animação nunca repete sozinha — não há loop por
 * cima do WebP, só esta entrada. */
@keyframes cmc-mascote-celebrando-entra {
  from { transform: translateY(28px) scale(.9); opacity: 0; }
  to   { transform: translateY(0) scale(1); opacity: 1; }
}
@keyframes cmc-mascote-parado-entra {
  from { transform: translateY(10px); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}
.cmc-a6-mascote-img[data-anim="celebrando"] { animation: cmc-mascote-celebrando-entra 600ms var(--ease-spring); }
.cmc-a6-mascote-img[data-anim="parado"] { animation: cmc-mascote-parado-entra 380ms var(--ease-out); }
@media (prefers-reduced-motion: reduce) {
  .cmc-a6-mascote-img { animation: none; }
}

.cmc-a6-conquista { display: flex; flex-direction: column; gap: 6px; text-align: center; align-items: center; }
.cmc-a6-conquista h1 { margin: 0; font: 600 32px/1.15 var(--font-display); color: var(--hero-fg); text-wrap: balance; }
.cmc-a6-conquista p { margin: 0; font: 500 14.5px var(--font-ui); color: var(--hero-fg-2); }

.cmc-a6-cartao {
  border-radius: 24px; background: var(--surface); box-shadow: var(--shadow-md);
  padding: 18px 18px 20px; display: flex; flex-direction: column; gap: 12px;
}
.cmc-a6-cartao-rotulo { font: 700 11px var(--font-ui); letter-spacing: .11em; text-transform: uppercase; color: var(--fg-2); }
.cmc-a6-ganhos { display: flex; flex-direction: column; gap: 12px; }
.cmc-a6-ganho { display: grid; grid-template-columns: 36px 1fr; gap: 12px; align-items: center; }
.cmc-a6-ganho-icone {
  width: 36px; height: 36px; border-radius: 999px; background: var(--surface-2);
  display: grid; place-items: center; flex-shrink: 0;
}
.cmc-a6-ganho-icone svg { width: 18px; height: 18px; }
.cmc-a6-ganho-icone--check svg { color: var(--success); }
.cmc-a6-ganho-icone--ofensiva svg { color: var(--ember-500); }
.cmc-a6-ganho-icone--xp svg { color: var(--primary-text); }
.cmc-a6-ganho span { font: 500 15px/1.4 var(--font-ui); color: var(--fg); }

.cmc-a6-botoes { display: flex; flex-direction: column; gap: 10px; }
.cmc-a6-btn-conta { height: 56px; gap: 12px; font: 600 16px var(--font-ui); }
.cmc-a6-btn-conta svg { width: 20px; height: 20px; flex-shrink: 0; }
.cmc-a6-btn-conta .cmc-a6-btn-icone--mark { color: var(--mark); }

.cmc-a6-terciarios { display: flex; align-items: center; justify-content: space-between; }
.cmc-a6-terciarios .cmc-link-fraco { height: 44px; display: inline-flex; align-items: center; background: transparent; border: 0; cursor: pointer; }
.cmc-a6-terciarios .cmc-entrar { height: 44px; }

/* ── A6b — Formulário de e-mail, tela empilhada própria (Rodada 2 §2) ── */
.cmc-a6b-barra { height: 68px; display: flex; align-items: center; padding: 0 12px; flex-shrink: 0; }
/* #cmc-a6b-mascote-zona/.cmc-a6b-conquista-desktop são só o espelho do
 * desktop (Rodada 2 Parte B, §4) — por ids/CLASSE PRÓPRIA, pra isolar do
 * .cmc-a6-mascote-zona/.cmc-a6-conquista "de verdade" de A6 (que precisam
 * ficar visíveis no mobile deles). Sem isto, as duas classes compartilhadas
 * herdavam `display:flex` sempre — o mobile mostrava o mascote/título de A6
 * de novo, por cima da própria tela de A6b (achado na correção do CD32,
 * 01/10/2026). */
#cmc-a6b-mascote-zona, .cmc-a6b-conquista-desktop { display: none; }
.cmc-a6b-voltar {
  width: 44px; height: 44px; border-radius: 999px; border: 0; background: transparent;
  color: var(--fg); display: grid; place-items: center; cursor: pointer; padding: 0;
}
.cmc-a6b-voltar:hover { background: var(--surface-2); }
.cmc-a6b-voltar svg { width: 22px; height: 22px; }
.cmc-a6b-voltar--desk { display: none; }

/* Campo com rótulo visível (CD32, isenção de contorno em repouso — o limite é
 * --surface-2, sem contorno --mark). O 3:1 volta no foco (--primary-text) e no
 * erro (--danger); nunca some, só troca de token. Escopo: só onboarding por
 * enquanto (design-system-v4/canonical/CANONICAL_DECISIONS.md, CD32). */
.cmc-campo { display: flex; flex-direction: column; gap: 8px; }
.cmc-campo > label { font: 600 14px var(--font-ui); color: var(--fg); }
.cmc-input {
  font-family: var(--font-ui); font-size: 16px; color: var(--fg);
  height: 56px; width: 100%; box-sizing: border-box;
  /* Repouso depende do contêiner (CD32): no mobile, A6b fica direto sobre
   * --hero-grad (.cmc-coluna é transparente ali) — --surface-2 quase some
   * nele nos dois temas (medido: ~5-7 de distância euclidiana de RGB, contra
   * ~15-19 no desktop, onde o contêiner é o cartão --surface). --surface
   * aqui é o "campo claro sobre fundo --hero-grad" da regra; o desktop
   * reverte pra --surface-2 logo abaixo, porque lá o contêiner já é
   * --surface e a regra pede o oposto. */
  background: var(--surface); border: 0; border-radius: 16px; padding: 0 16px;
  box-shadow: none;
  transition: background var(--dur-fast), box-shadow var(--dur-fast) var(--ease-out);
}
@media (min-width: 1024px) {
  .cmc-input { background: var(--surface-2); }
}
.cmc-input::placeholder { color: var(--fg-2); }
.cmc-input:focus {
  outline: 0; background: var(--surface);
  box-shadow: inset 0 0 0 2px var(--primary-text), var(--shadow-sm);
}
.cmc-input[aria-invalid="true"] {
  background: var(--danger-bg);
  box-shadow: inset 0 0 0 2px var(--danger);
}
/* Mostrar/ocultar senha: js/password-toggle.js (componente já usado em
 * cadastro.html/login.html/perfil.html/redefinir-senha.html) — cores --fg-2/--fg
 * dele, não --mark/--primary-text da spec (§2): mudar as cores é mudar o
 * componente compartilhado nas 4 outras telas, fora do escopo desta rodada
 * ("só onboarding" vale para o CAMPO em si, não justifica um segundo
 * componente de olho só para esta tela). */
.cmc-campo-erro { margin: 0; font: 500 13.5px var(--font-ui); color: var(--danger-fg, var(--danger)); }
.cmc-a6b-apoio { margin: 0; font: 400 12.5px var(--font-ui); color: var(--fg-2); }
.cmc-a6b-erro-servidor { margin: 0; font: 500 13.5px var(--font-ui); color: var(--danger-fg, var(--danger)); }
.cmc-a6b-termos { margin: 0; font: 400 12.5px/1.5 var(--font-ui); color: var(--fg-2); }

/* ── "Trocar de plano?" (folha própria, R1 → "Começar outro plano") ── */
.cmc-troca-texto { margin: 0; font: 400 15px/1.55 var(--font-ui); color: var(--fg-2); }
.cmc-troca-botoes { display: flex; flex-direction: column; gap: 8px; }

/* ── A3c/A4c — Personalizado com IA (Rodada 2 §5) ── */
.cmc-pergunta-ia { display: flex; flex-direction: column; gap: 12px; }
/* Hero mais compacto que o de A4 (sem meta/descrição) — só rótulo "N de 2" +
 * título; sem barra de progresso (sinalização 8 da spec: "duas perguntas não
 * justificam uma barra"). */
.cmc-hero--compacto { padding: 18px 20px; gap: 4px; }
.cmc-hero-titulo-ia { margin: 0; font: 600 30px/1.2 var(--font-display); color: var(--hero-fg); }

.cmc-cartao-textarea {
  border-radius: 20px; background: var(--surface); box-shadow: var(--shadow-md);
  padding: 16px; display: flex; flex-direction: column; gap: 12px;
}
.cmc-textarea-campo {
  font-family: var(--font-ui); font-size: 15px; color: var(--fg);
  background: var(--surface-2); border: 0; border-radius: 16px; padding: 14px 16px;
  min-height: 110px; resize: vertical; width: 100%; box-sizing: border-box;
  transition: background var(--dur-fast), box-shadow var(--dur-fast) var(--ease-out);
}
.cmc-textarea-campo::placeholder { color: var(--fg-2); }
.cmc-textarea-campo:focus {
  outline: 0; background: var(--surface);
  box-shadow: inset 0 0 0 2px var(--primary-text), var(--shadow-sm);
}
.cmc-privacidade-linha { display: flex; align-items: center; gap: 8px; padding: 0 2px; }
.cmc-privacidade-icone { width: 14px; height: 14px; color: var(--mark); flex-shrink: 0; }
.cmc-privacidade-linha span { font: 400 13px var(--font-ui); color: var(--fg-2); }

/* Tempo por dia: 4 cartões (role=radiogroup), não mais o segmentado genérico. */
.cmc-tempo-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.cmc-tempo-card {
  height: 64px; border-radius: 16px; border: 0; background: var(--surface); box-shadow: var(--shadow-sm);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
  cursor: pointer; color: var(--fg);
}
.cmc-tempo-card-num { font: 700 20px var(--font-display); line-height: 1; }
.cmc-tempo-card-unidade { font: 500 12px var(--font-ui); }
.cmc-tempo-card[aria-checked="true"] {
  background: var(--primary); color: var(--fg-on-primary); box-shadow: var(--shadow-glow-soft);
}

.cmc-a4c-citacao-rotulo { font: 600 11px var(--font-ui); letter-spacing: .08em; text-transform: uppercase; color: var(--hero-fg-2); margin-top: 4px; }
.cmc-a4c-citacao { margin: 0; font: italic 400 17px/1.5 var(--font-read); color: var(--hero-fg); }
.cmc-a4c-info {
  border-radius: 20px; background: var(--surface); box-shadow: var(--shadow-md);
  padding: 18px; display: flex; flex-direction: column; gap: 14px;
}
.cmc-a4c-info-rotulo { font: 700 11px var(--font-ui); letter-spacing: .11em; text-transform: uppercase; color: var(--fg-2); }
.cmc-a6-ganho-icone--neutro svg { color: var(--mark); }
.cmc-a4c-nota { margin: 0; font: 400 15px/1.5 var(--font-ui); color: var(--fg-2); }
.cmc-a4c-cta { height: 56px; font-size: 15.5px; white-space: nowrap; }

/* ════════════════════════════════════════════════════════════════════════
   DESKTOP (≥1024px) — Rodada 2 §4. Tudo aqui dentro do media query: o
   mobile (já verificado na Parte A) não pode mudar nada por causa disto.
   ════════════════════════════════════════════════════════════════════════ */

/* ── Painel de marca (5/12) + barra da etapa (72px) — A1–A4c, R1, I2–I4 ── */
.cmc-painel-marca, .cmc-barra-etapa { display: none; }

@media (min-width: 1024px) {
  body.cmc-tem-painel .cmc-painel-marca {
    display: flex; flex-direction: column; justify-content: space-between;
    position: fixed; top: 0; left: 0; bottom: 0; width: 41.6667%;
    box-sizing: border-box; padding: 40px 48px 48px;
    background: var(--hero-grad); overflow: hidden; z-index: 1;
  }
  .cmc-painel-logo { height: 52px; flex-shrink: 0; }
  .cmc-painel-logo img { height: 52px; display: block; }
  .cmc-painel-mascote-zona { flex: 1; display: flex; align-items: center; justify-content: center; min-height: 0; }
  .cmc-painel-mascote-zona img { width: 200px; height: 200px; object-fit: contain; display: block; }
  .cmc-painel-citacao { display: flex; flex-direction: column; gap: 8px; flex-shrink: 0; }
  .cmc-painel-citacao-texto { margin: 0; font: italic 400 24px/1.4 var(--font-read); color: var(--hero-fg); }
  .cmc-painel-citacao-ref { font: 700 11px var(--font-ui); letter-spacing: .11em; text-transform: uppercase; color: var(--hero-overline); }

  body.cmc-tem-painel .cmc-barra-etapa {
    display: flex; align-items: center; height: 72px;
    margin-left: 41.6667%; padding: 0 40px; background: var(--bg);
  }
  body.cmc-tem-painel .cmc-main { margin-left: 41.6667%; background: var(--bg); min-height: 100vh; }
  .cmc-barra-etapa-voltar {
    display: flex; align-items: center; gap: 6px; border: 0; background: transparent; cursor: pointer;
    font: 600 14.5px var(--font-ui); color: var(--fg-2); padding: 8px; margin-left: -8px; border-radius: var(--radius-md);
  }
  .cmc-barra-etapa-voltar:hover { background: var(--surface-2); color: var(--fg); }
  .cmc-barra-etapa-voltar svg { width: 18px; height: 18px; }
  .cmc-barra-etapa-entrar { border: 0; background: transparent; cursor: pointer; font: 500 14.5px var(--font-ui); color: var(--fg-2); }
  .cmc-barra-etapa-entrar strong { color: var(--primary-text); font-weight: 600; }

  /* Coluna da etapa: já centraliza em 440px (regra existente); o rodapé virou
   * irmão de .cmc-coluna (fora da área que rola, achado testando em device
   * real — ver nota no topo do arquivo), então precisa do próprio respiro
   * acima — "sem rodapé fixo" (§4) continua valendo: ele não gruda embaixo
   * da tela no desktop, só fica depois do conteúdo com 32px de distância. */
  body.cmc-tem-painel .cmc-rodape-a1,
  body.cmc-tem-painel .cmc-cta-par,
  body.cmc-tem-painel .cmc-tela-rodape {
    margin-top: 32px;
  }
  /* "CTAs no fim do conteúdo, lado a lado" (§4) — A4 (Ler o dia 1/Salvar) e
   * A4c (Criar conta/Plano pronto) são os dois pares que existem hoje. */
  body.cmc-tem-painel .cmc-cta-par { flex-direction: row; align-items: center; gap: 16px; flex-wrap: wrap; }
  body.cmc-tem-painel .cmc-cta-par .btn { flex: 1; }
  /* A1/R1 não têm .cmc-logo próprio mostrado no desktop — a marca já está
   * no painel da esquerda; duplicar a logo nos dois lados poluiria. */
  body.cmc-tem-painel #tela-A1 .cmc-logo,
  body.cmc-tem-painel #tela-R1 .cmc-logo { display: none; }
  /* "Já tenho conta · Entrar" já está na barra de 72px — o link duplicado
   * dentro do próprio conteúdo de A1 ficaria repetido na mesma tela. */
  body.cmc-tem-painel #cmc-a1-entrar { display: none; }
}

/* ── Leitura (A5, salmo da espera): coluna de 680px, cabeçalho em vidro ── */
.cmc-leitura-barra-desktop { display: none; }
@media (min-width: 1024px) {
  #tela-A5.is-ativa, #tela-salmo-espera.is-ativa { height: 100vh; }
  .cmc-leitura-barra-desktop {
    display: flex; justify-content: flex-end; align-items: center; flex-shrink: 0;
    height: 68px; padding: 0 40px;
    background: var(--nav-glass); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  }
  .cmc-leitura-aa-desktop {
    height: 40px; padding: 0 18px; border-radius: 999px; border: 0;
    background: var(--surface-2); color: var(--fg); font: 700 15px var(--font-ui); cursor: pointer;
  }
  .cmc-leitura-aa-desktop:hover { background: var(--surface-hover); }
  .cmc-leitura-titulo { font-size: 36px; }
  #cmc-versiculos, #cmc-salmo-versiculos { font-size: 20px; line-height: 1.8; }
  .cmc-leitura-rodape { background: var(--grad-veil); padding-top: 32px; }
}

/* ── Espera (tela-espera-spec.md §5): coluna de 600px (exceção aos 440px
 * da rodada 2, só nesta tela — item 8 das sinalizações), sem mascote no
 * topo (ele mora só no painel — "um mascote por tela"), Salmo em linha e
 * catálogo em grade de 3 em vez de carrossel. ── */
@media (min-width: 1024px) {
  body.cmc-tem-painel #tela-ia-espera .cmc-coluna { max-width: 600px; }

  #tela-ia-espera .cmc-espera-mascote-zona { display: none; }
  #tela-ia-espera .cmc-espera-topo { align-items: flex-start; text-align: left; padding: 48px 0 8px; }
  #tela-ia-espera #cmc-espera-titulo { font-size: 38px; }
  #tela-ia-espera .cmc-espera-corpo { align-items: flex-start; }
  #tela-ia-espera .cmc-espera-tema,
  #tela-ia-espera .cmc-espera-sub,
  #tela-ia-espera .cmc-espera-plano-titulo { text-align: left; }
  /* "com as ações lado a lado" — os botões do topo (pronto/erro) deixam de
   * ser btn-block (100%) e ficam numa linha, largura pelo conteúdo. Só
   * `width:auto` — `padding:0` zerava o padding vertical do .btn/.btn-lg da
   * base (design-system/components.css), deixando os dois botões do estado
   * erro ("Tentar de novo"/"Escolher um plano pronto") mais baixos que o
   * próprio texto (bug achado em device real, 1280/1920px). A altura
   * correta é a padrão de cada classe — sem override nenhum aqui. */
  #tela-ia-espera .cmc-espera-acoes-topo { flex-direction: row; width: auto; }
  #tela-ia-espera .cmc-espera-acoes-topo .btn { width: auto; }

  /* Salmo em linha: citação à esquerda (rótulo/citação/apoio empilhados numa
   * coluna), [Ler]/[Ouvir] à direita — grid porque são 4 irmãos no HTML
   * (sem um wrapper de texto à parte) e a 4ª célula (ações) precisa ocupar
   * as 3 linhas de texto de uma vez. */
  #tela-ia-espera .cmc-espera-salmo-cartao {
    display: grid; grid-template-columns: 1fr auto; align-items: center; column-gap: 28px;
  }
  #tela-ia-espera .cmc-salmo-card-acoes {
    grid-column: 2; grid-row: 1 / -1; flex-direction: row;
  }
  #tela-ia-espera .cmc-salmo-card-btn { flex: none; width: 140px; }

  /* Catálogo: grade de 3, sem rolagem lateral (§7 "descartadas": carrossel
   * no desktop não entra — 600px de coluna já mostra tudo). */
  #tela-ia-espera .cmc-espera-carrossel {
    display: grid; grid-template-columns: repeat(3, 1fr); overflow: visible; margin: 0; padding: 0;
  }
  #tela-ia-espera .cmc-espera-carrossel-card { flex: none; scroll-snap-align: none; }

  /* Ler em grupo · Explorar o Hagá lado a lado. */
  #tela-ia-espera .cmc-espera-duplo { flex-direction: row; }
  #tela-ia-espera .cmc-espera-duplo > a { flex: 1; }
}

/* ── Celebração (A6/A6b): página inteira, duas colunas (Rodada 2 §4) ──
 * Grid nomeado (não linhas numeradas): A6 e A6b têm um número diferente de
 * filhos diretos (A6b tem a barra de voltar a mais) — nomear a área evita
 * recalcular índice de linha/coluna dos dois lados toda vez que um mudar. */
.cmc-a6-logo-topo { display: none; }
@media (min-width: 1024px) {
  .cmc-a6-logo-topo { display: flex; justify-content: center; padding-top: 40px; }
  .cmc-a6-logo-topo img { height: 52px; display: block; }
  .cmc-a6-mascote-zona .cmc-a6-mascote-img { width: 240px; height: 240px; }
  .cmc-a6-conquista { text-align: left; align-items: flex-start; }
  .cmc-a6-conquista h1 { font-size: 56px; }
  .cmc-a6-tela .cmc-espaco { display: none; }

  /* .cmc-coluna É SÓ EMBALAGEM MOBILE aqui — mascote/conquista/cartão/botões/
   * terciários são NETOS de #tela-A6, não filhos diretos (.cmc-coluna está no
   * meio). grid-area só posiciona FILHO DIRETO do grid container; display:
   * contents tira .cmc-coluna do modelo de caixa (sem tirar do DOM) e deixa
   * os netos participarem do grid de #tela-A6 como se fossem filhos dela —
   * sem mexer no HTML nem no layout mobile (que não usa este bloco). */
  #tela-A6.is-ativa {
    display: grid;
    grid-template-columns: 1fr 440px;
    grid-template-rows: auto auto auto auto;
    grid-template-areas: "logo logo" "mascote cartao" "titulo cartao" "botoes cartao" "terciarios cartao";
    column-gap: 72px; row-gap: 12px;
    max-width: 1000px; width: 100%; margin: 0 auto; padding: 48px 24px 64px; box-sizing: border-box;
    min-height: 100vh;
  }
  #tela-A6 .cmc-coluna { display: contents; }
  /* O wrapper novo do rodapé fixo (mobile) também precisa ficar "invisível"
   * pro grid no desktop — senão .cmc-a6-botoes/.cmc-a6-terciarios deixam de
   * ser netos diretos do grid e as áreas nomeadas abaixo não os alcançam. */
  #tela-A6 .cmc-a6-rodape-fixo { display: contents; }
  #tela-A6 .cmc-a6-logo-topo { grid-area: logo; }
  #tela-A6 .cmc-a6-mascote-zona { grid-area: mascote; align-self: end; justify-self: center; }
  #tela-A6 .cmc-a6-conquista { grid-area: titulo; align-self: start; }
  #tela-A6 .cmc-a6-cartao {
    grid-area: cartao; align-self: center;
    border-radius: 28px; box-shadow: var(--shadow-float); padding: 28px;
    display: flex; flex-direction: column; gap: 20px;
  }
  #tela-A6 .cmc-a6-botoes { grid-area: botoes; align-self: start; }
  #tela-A6 .cmc-a6-terciarios { grid-area: terciarios; align-self: start; }

  /* Altura útil baixa (notebook com barras do navegador, ~650–790px): a
   * celebração tem que caber sem rolar e com o logo visível. Reduz o que
   * mais pesa (paddings, logo, mascote, título), sem mexer no layout. */
  @media (max-height: 820px) {
    #tela-A6.is-ativa, #tela-A6b.is-ativa { padding-top: 24px; padding-bottom: 24px; row-gap: 8px; }
    .cmc-a6-logo-topo { padding-top: 12px; }
    .cmc-a6-logo-topo img { height: 40px; }
    .cmc-a6-mascote-zona .cmc-a6-mascote-img { width: 160px; height: 160px; }
    .cmc-a6-conquista h1 { font-size: 44px; }
    #tela-A6 .cmc-a6-cartao { padding: 22px; gap: 14px; }
  }

  /* A6b: mesma composição — mascote/título à esquerda são só o espelho do
   * que A6 mostrava (JS troca o texto em irParaA6b()); o cartão vira o
   * formulário, com "voltar" na própria área do cartão, acima dele. */
  #tela-A6b.is-ativa {
    display: grid;
    grid-template-columns: 1fr 440px;
    grid-template-rows: auto auto 1fr;
    grid-template-areas: "logo logo" "mascote cartao" "titulo cartao";
    column-gap: 72px; row-gap: 12px;
    max-width: 1000px; width: 100%; margin: 0 auto; padding: 48px 24px 64px; box-sizing: border-box;
    min-height: 100vh;
  }
  #tela-A6b .cmc-a6-logo-topo { grid-area: logo; }
  #cmc-a6b-mascote-zona { display: flex; grid-area: mascote; justify-content: center; align-self: end; justify-self: center; }
  .cmc-a6b-conquista-desktop {
    display: flex; flex-direction: column; gap: 6px; text-align: left; align-items: flex-start;
    grid-area: titulo; align-self: start;
  }
  #tela-A6b .cmc-a6b-barra, #tela-A6b .cmc-coluna { grid-area: cartao; }
  #tela-A6b .cmc-a6b-barra { display: none; }
  #tela-A6b .cmc-a6b-voltar--desk { display: grid; align-self: start; margin: 0; }
  #tela-A6b .cmc-coluna {
    align-self: start; margin-top: 44px;
    display: flex; flex-direction: column; gap: 16px;
    border-radius: 28px; background: var(--surface); box-shadow: var(--shadow-float); padding: 28px;
    max-width: 440px; width: 100%;
  }
  @media (max-height: 820px) {
    #tela-A6b.is-ativa { padding-top: 24px; padding-bottom: 24px; row-gap: 8px; }
    #tela-A6b .cmc-coluna { margin-top: 24px; padding: 20px; gap: 10px; }
    #tela-A6b .cmc-intro h1 { font-size: 26px; }
    #tela-A6b .cmc-input { height: 48px; }
  }
  @media (max-height: 680px) {
    #tela-A6.is-ativa, #tela-A6b.is-ativa { padding-top: 16px; padding-bottom: 16px; row-gap: 4px; }
    .cmc-a6-logo-topo { padding-top: 8px; }
    .cmc-a6-logo-topo img { height: 34px; }
    #tela-A6b .cmc-coluna { margin-top: 12px; padding: 16px; gap: 8px; }
    #tela-A6b .cmc-campo { gap: 6px; }
    #tela-A6b .cmc-input { height: 44px; }
  }

  /* A7: mesma composição de A6, só com 1 botão em vez de 2 linhas de CTA —
   * área "cta" única em vez de "botoes"+"terciarios". */
  #tela-A7.is-ativa {
    display: grid;
    grid-template-columns: 1fr 440px;
    grid-template-rows: auto auto auto;
    grid-template-areas: "logo logo" "mascote cartao" "titulo cartao" "cta cartao";
    column-gap: 72px; row-gap: 12px;
    max-width: 1000px; width: 100%; margin: 0 auto; padding: 48px 24px 64px; box-sizing: border-box;
    min-height: 100vh;
  }
  #tela-A7 .cmc-coluna { display: contents; }
  #tela-A7 .cmc-a6-logo-topo { grid-area: logo; }
  #tela-A7 .cmc-a6-mascote-zona { grid-area: mascote; align-self: end; justify-self: center; }
  #tela-A7 .cmc-a6-conquista { grid-area: titulo; align-self: start; }
  #tela-A7 .cmc-a6-cartao {
    grid-area: cartao; align-self: center;
    border-radius: 28px; box-shadow: var(--shadow-float); padding: 28px;
    display: flex; flex-direction: column; gap: 20px;
  }
  #tela-A7 .cmc-espaco { display: none; }
  #tela-A7 .btn { grid-area: cta; align-self: start; }
}