/* Visão do Campo — cadastro, escolha do plano, retorno do pagamento e o painel "Assinatura".
   Os tokens são os de `estilo.css`: cores (papel, superficie, tinta, verde, fogo…), raios `--r-s` (campos, chips,
   cartões pequenos), `--r-m` (cartões, resumo, diálogos) e `--r-full` (botões, pílulas), a altura de botão e de
   alvo `--alvo` (40 no ponteiro fino, 48 no toque e abaixo de 900 px) e a escala `--t-*` (12/14/16/20).
   Só duas coisas fogem deles de propósito: o campo de texto de 56 (a altura do campo do Material 3) e os dois
   títulos de página (28/36 e 24/32, que a escala do produto não tem).
   Sem degradê, sem sombra pesada, sem emoji: o que separa as coisas é linha. Tudo mora sob `.cad-*` e `.ass-*`;
   nada aqui altera a tela do produto. */

.cad-fundo, .ass-fundo {
  --cad-contorno: #8A938A;          /* o mesmo contorno de campo da landing (3,3:1 sobre branco) */
  --cad-selecionado: #D6EADC; --cad-sobre-selecionado: #0F3D26; --cad-verde-escuro: #17593A;
  --cad-info: #E9F1F9; --cad-erro-texto: #7E1F10; --cad-ambar-texto: #5E3D05;
}

.cad-so { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ------------------------------------------------------------ a página */
.cad-fundo { position: fixed; inset: 0; z-index: 2000; overflow-y: auto; background: var(--papel); color: var(--tinta); font: 400 var(--t-title-m)/24px var(--ui); -webkit-font-smoothing: antialiased; }
.cad-topo { position: sticky; top: 0; z-index: 4; display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 64px; padding: 0 24px; background: var(--superficie); border-bottom: 1px solid var(--linha); }
.cad-topo-acoes { display: flex; align-items: center; gap: 4px; }
.cad-corpo { max-width: 1040px; margin: 0 auto; padding: 32px 24px 64px; }
.cad-corpo.estreito { max-width: 592px; }
.cad-uma { display: block; }
.cad-grade { display: grid; grid-template-columns: minmax(0, 1fr) 336px; gap: 32px; align-items: start; }

.cad-link { display: inline-flex; align-items: center; min-height: var(--alvo); padding: 0 8px; border: 0; border-radius: var(--r-s); background: none; color: var(--verde); font: 600 var(--t-body-m)/20px var(--ui); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.cad-link:hover { color: var(--cad-verde-escuro); }
.cad-link-topo { color: var(--tinta); text-decoration: none; padding: 0 12px; border-radius: var(--r-s); min-width: 48px; justify-content: center; }
.cad-fundo a.cad-link-topo { color: var(--tinta); text-decoration: none; }
.cad-link-topo:hover, .cad-fundo a.cad-link-topo:hover { background: var(--cinza-claro); color: var(--tinta); }
.cad-fundo :focus-visible, .ass-fundo :focus-visible { outline: 3px solid var(--verde); outline-offset: 2px; }
.cad-fundo .cad-titulo:focus-visible, .ass-fundo .ass-titulo:focus-visible { outline: none; }   /* título focado por código para o leitor de tela: não é controle */
.cad-fundo a, .ass-fundo a { color: var(--verde); text-decoration: underline; text-underline-offset: 3px; }   /* link no meio do texto: o verde sozinho quase não se distingue da tinta */
.cad-fundo a:hover, .ass-fundo a:hover { color: var(--cad-verde-escuro); }

/* ------------------------------------------------------------ suporte (WhatsApp) */
.cad-numero { font: 500 var(--t-body-m)/20px var(--mono); color: var(--tinta-2); white-space: nowrap; }
.cad-rodape { display: flex; flex-wrap: wrap; align-items: center; gap: 0 4px; margin-top: 48px; padding-top: 16px; border-top: 1px solid var(--linha); font: 400 var(--t-body-m)/20px var(--ui); color: var(--tinta-2); }
.cad-rodape .cad-link { padding-left: 0; }   /* quando desce de linha, o ícone alinha com o texto de cima */
.cad-suporte-bloco { margin: 24px 0 0; padding: 16px; border: 1px solid var(--linha-forte); border-radius: var(--r-s); background: var(--superficie); max-width: 60ch; }
.cad-suporte-bloco .cad-texto { margin-bottom: 12px; }
.cad-suporte-linha { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; }

/* ------------------------------------------------------------ indicador de passos */
.cad-passos { display: flex; align-items: center; gap: 12px; list-style: none; margin: 0 0 32px; padding: 0; }
.cad-passo { display: flex; align-items: center; gap: 8px; font: 500 var(--t-body-m)/20px var(--ui); color: var(--tinta-2); }
.cad-passo + .cad-passo::before { content: ''; width: 32px; height: 1px; margin-right: 4px; background: var(--linha-forte); }
.cad-passo-marca { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 28px; height: 28px; border-radius: 50%; border: 1.5px solid var(--cad-contorno); font: 600 14px/1 var(--mono); color: var(--tinta-2); background: var(--superficie); }
.cad-passo.atual { color: var(--tinta); font-weight: 600; }
.cad-passo.atual .cad-passo-marca { background: var(--verde); border-color: var(--verde); color: #fff; }
.cad-passo.feito .cad-passo-marca { background: var(--verde-claro); border-color: var(--verde); color: var(--verde); }

/* ------------------------------------------------------------ títulos e texto */
.cad-titulo { margin: 0 0 8px; font: 600 28px/36px var(--ui); letter-spacing: -0.02em; outline: none; }
.cad-sub { margin: 0 0 24px; font: 400 var(--t-title-m)/24px var(--ui); color: var(--tinta-2); }
.cad-texto { margin: 0 0 16px; max-width: 60ch; font: 400 var(--t-title-m)/24px var(--ui); color: var(--tinta); }
.cad-texto-destaque { padding: 12px 16px; border-radius: var(--r-s); background: var(--verde-claro); color: var(--cad-sobre-selecionado); }

/* ------------------------------------------------------------ campos (outlined, rótulo em cima) */
.cad-form { display: flex; flex-direction: column; gap: 20px; }
.cad-campo { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
fieldset.cad-campo { margin: 0; padding: 0; border: 0; }
.cad-rotulo { padding: 0; font: 500 var(--t-body-m)/20px var(--ui); color: var(--tinta); }
.cad-opcional { font-weight: 400; color: var(--tinta-2); }
.cad-entrada { display: block; width: 100%; height: 48px; padding: 0 16px; border: 1px solid var(--cad-contorno); border-radius: var(--r-s); background: #fff; color: var(--tinta); font: 400 var(--t-title-m)/24px var(--ui); }
.cad-entrada:hover { border-color: var(--tinta-2); }
.cad-entrada:focus-visible { outline: 2px solid var(--verde); outline-offset: 0; border-color: var(--verde); }
.cad-entrada[aria-invalid="true"] { border-color: var(--fogo); box-shadow: inset 0 0 0 1px var(--fogo); }
.cad-entrada-linha { position: relative; display: flex; align-items: stretch; gap: 8px; }
.cad-entrada-linha > .cad-entrada { flex: 1 1 auto; min-width: 0; }
.cad-entrada-linha:has(> .cad-icone-botao) > .cad-entrada { padding-right: 56px; }
.cad-entrada-linha > .cad-icone-botao { position: absolute; right: 4px; top: 4px; }
.cad-cupom .cad-entrada-linha > .cad-botao { flex: none; }
.cad-apoio { margin: 0; font: 400 var(--t-body-m)/20px var(--ui); color: var(--tinta-2); }
.cad-erro-campo { display: flex; align-items: flex-start; gap: 8px; margin: 0; font: 400 var(--t-body-m)/20px var(--ui); color: var(--erro); }
.cad-erro-campo svg { flex: none; margin-top: 2px; }
.cad-erro-campo .cad-link { min-height: 48px; padding: 0 8px; margin: -14px 0; }   /* alvo de 48 sem engordar a linha do erro */
.cad-erro-campo[hidden] { display: none; }

.cad-icone-botao { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 48px; height: 48px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--tinta-2); cursor: pointer; }
.cad-icone-botao:hover { background: var(--cinza-claro); color: var(--tinta); }

/* "Você é": filter chips do Material, com o visto na escolhida (cor nunca vem sozinha) */
.cad-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.cad-chip-item { position: relative; display: flex; }
.cad-chip { display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 20px; border: 1px solid var(--cad-contorno); border-radius: var(--r-s); background: var(--superficie); font: 500 var(--t-body-m)/20px var(--ui); color: var(--tinta); cursor: pointer; }
.cad-chip-marca { display: none; color: var(--cad-sobre-selecionado); }
.cad-chip-item:hover .cad-chip { background: var(--cinza-claro); border-color: var(--tinta-2); }
.cad-radio-oculto:checked + .cad-chip { background: var(--cad-selecionado); border-color: var(--cad-selecionado); color: var(--cad-sobre-selecionado); font-weight: 600; }
.cad-radio-oculto:checked + .cad-chip .cad-chip-marca { display: inline-flex; }
.cad-chip-item .cad-radio-oculto:focus-visible + .cad-chip { outline: 3px solid var(--verde); outline-offset: 2px; }
.cad-radio-oculto[aria-invalid="true"] + .cad-chip { border-color: var(--fogo); }

.cad-forca { display: flex; align-items: center; gap: 12px; min-height: 20px; }
.cad-forca-barras { display: flex; gap: 4px; }
.cad-forca-barras i { width: 32px; height: 4px; border-radius: 2px; background: var(--linha-forte); }
.cad-forca[data-nivel="0"] .cad-forca-barras i:nth-child(-n+1), .cad-forca[data-nivel="1"] .cad-forca-barras i:nth-child(-n+1) { background: var(--fogo); }
.cad-forca[data-nivel="2"] .cad-forca-barras i:nth-child(-n+2) { background: #A56A0A; }
.cad-forca[data-nivel="3"] .cad-forca-barras i { background: var(--verde); }
.cad-forca-texto { font: 500 var(--t-body-m)/20px var(--ui); color: var(--tinta-2); }

/* consentimento: a linha toda é o alvo de toque */
.cad-consentimento-linha { display: flex; align-items: flex-start; gap: 12px; padding: 12px 0; font: 400 var(--t-body-m)/20px var(--ui); color: var(--tinta); cursor: pointer; }
.cad-caixa { flex: none; width: 24px; height: 24px; margin: 0; accent-color: var(--verde); cursor: pointer; }
.cad-consentimento-linha > span { padding-top: 2px; }

.cad-erro-form { display: flex; align-items: flex-start; gap: 12px; margin: 0 0 16px; padding: 12px 16px; border-radius: var(--r-s); background: var(--superficie); border: 1px solid var(--linha-forte); color: var(--tinta); font: 400 var(--t-body-m)/20px var(--ui); outline: none; }
.cad-erro-form > svg { color: var(--erro); }
.cad-erro-form[hidden] { display: none; }
.cad-erro-form svg { flex: none; margin-top: 0; }
.cad-aviso { display: flex; align-items: flex-start; gap: 12px; margin: 0 0 20px; padding: 12px 16px; border-radius: var(--r-s); background: var(--superficie); border: 1px solid var(--linha-forte); color: var(--tinta); font: 400 var(--t-body-m)/20px var(--ui); outline: none; }
.cad-aviso svg { flex: none; color: var(--azul); }
.cad-aviso.erro svg { color: var(--erro); }
/* (sucesso: a mesma superfície neutra; só o ícone é verde) */
.cad-aviso.ok { color: var(--tinta); }
.cad-aviso.ok svg { color: var(--verde); }

/* ------------------------------------------------------------ botões */
.cad-acoes { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; }
.cad-acoes-centro { justify-content: center; margin-top: 24px; }
.cad-acoes-voltar { margin-top: 24px; }
.cad-botao { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: var(--alvo); padding: 0 24px; border: 1px solid var(--verde); border-radius: var(--r-s); background: var(--verde); color: #fff; font: 600 var(--t-body-m)/20px var(--ui); text-decoration: none; cursor: pointer; transition: background .15s, border-color .15s; }   /* 14/600 como todo botão do produto (era 16: dois tamanhos no mesmo diálogo) */
.cad-botao svg { flex: none; }
.cad-botao:hover { background: var(--cad-verde-escuro); border-color: var(--cad-verde-escuro); }
.cad-botao:disabled { opacity: .6; cursor: default; }
.cad-fundo a.cad-botao, .ass-fundo a.cad-botao { color: #fff; text-decoration: none; }
.cad-botao-sec, .cad-fundo a.cad-botao-sec, .ass-fundo a.cad-botao-sec { background: transparent; color: var(--tinta); border-color: var(--cad-contorno); text-decoration: none; }
.cad-botao-sec:hover, .cad-fundo a.cad-botao-sec:hover, .ass-fundo a.cad-botao-sec:hover { background: var(--cinza-claro); border-color: var(--tinta-2); color: var(--tinta); }
.cad-botao-ambar { background: var(--cad-ambar-texto); border-color: var(--cad-ambar-texto); }
.cad-botao-ambar:hover { background: #46300A; border-color: #46300A; }
.cad-botao-cheio { width: 100%; }
.cad-form .cad-acoes .cad-botao { min-width: 160px; }

/* ------------------------------------------------------------ passo 1 com a conta já criada */
.cad-dados { margin: 0 0 24px; border: 1px solid var(--linha-forte); border-radius: var(--r-s); background: var(--superficie); }
.cad-dados > div { display: flex; justify-content: space-between; gap: 16px; padding: 12px 16px; border-top: 1px solid var(--linha); }
.cad-dados > div:first-child { border-top: 0; }
.cad-dados dt { color: var(--tinta-2); font: 500 var(--t-body-m)/24px var(--ui); }
.cad-dados dd { margin: 0; font: 500 var(--t-title-m)/24px var(--ui); text-align: right; overflow-wrap: anywhere; }

/* ------------------------------------------------------------ passo 2: cobrança e planos */
.cad-grupo { margin: 0 0 24px; padding: 0; border: 0; min-width: 0; }
.cad-legenda { padding: 0; margin-bottom: 8px; font: 500 var(--t-body-m)/20px var(--ui); color: var(--tinta); }
.cad-radio-oculto { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; z-index: 1; }

/* botão segmentado do Material 3: dois lados, o escolhido leva o visto (nunca só cor) */
.cad-seg { display: inline-flex; border: 1px solid var(--cad-contorno); border-radius: var(--r-s); overflow: hidden; max-width: 100%; }
.cad-seg-item { position: relative; display: flex; }
.cad-seg-item + .cad-seg-item { border-left: 1px solid var(--cad-contorno); }
.cad-seg-rotulo { display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 24px; font: 500 var(--t-body-m)/20px var(--ui); color: var(--tinta); background: var(--superficie); }
.cad-seg-marca { display: none; color: var(--cad-sobre-selecionado); }
.cad-radio-oculto:checked + .cad-seg-rotulo { background: var(--cad-selecionado); color: var(--cad-sobre-selecionado); font-weight: 600; }
.cad-radio-oculto:checked + .cad-seg-rotulo .cad-seg-marca { display: inline-flex; }
.cad-seg-item:hover .cad-seg-rotulo { background: var(--cinza-claro); }
.cad-seg-item:hover .cad-radio-oculto:checked + .cad-seg-rotulo { background: var(--cad-selecionado); }
.cad-radio-oculto:focus-visible + .cad-seg-rotulo { outline: 3px solid var(--verde); outline-offset: -3px; }
.cad-grupo > .cad-apoio { margin-top: 8px; }

.cad-planos { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
/* quatro planos: 2 × 2, nunca 3 + 1 com um cartão órfão na segunda linha (revisão de design, 2026-10-04) */
@media (min-width: 561px) { .cad-planos:has(> :nth-child(4):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.cad-plano-item { position: relative; display: flex; }
.cad-plano { display: flex; flex-direction: column; gap: 4px; width: 100%; padding: 16px; border: 1px solid var(--cad-contorno); border-radius: var(--r-s); background: var(--superficie); cursor: pointer; }
.cad-plano-item:hover .cad-plano { border-color: var(--tinta-2); }
.cad-plano-topo { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.cad-plano-nome { font: 600 var(--t-title-m)/24px var(--ui); }
.cad-plano-marca { display: none; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; background: var(--verde); color: #fff; }
.cad-plano-ha { font: 400 var(--t-body-m)/20px var(--ui); color: var(--tinta-2); }
.cad-plano-preco { margin-top: 12px; font: 400 var(--t-body-m)/20px var(--ui); color: var(--tinta-2); }
.cad-plano-preco b { font: 600 24px/32px var(--ui); letter-spacing: -0.01em; color: var(--tinta); font-variant-numeric: tabular-nums; }
.cad-plano-nota { margin-top: 4px; font: 400 var(--t-body-m)/20px var(--ui); color: var(--tinta-2); }
.cad-radio-oculto:checked + .cad-plano { border: 2px solid var(--verde); padding: 15px; background: #F2F8F4; }
.cad-radio-oculto:checked + .cad-plano .cad-plano-marca { display: inline-flex; }
.cad-radio-oculto:focus-visible + .cad-plano { outline: 3px solid var(--verde); outline-offset: 2px; }

.cad-acima { margin: -8px 0 24px; font: 400 var(--t-body-m)/20px var(--ui); color: var(--tinta-2); }

.cad-cupom { margin-bottom: 8px; max-width: 480px; }
.cad-cupom-ok { display: flex; align-items: center; gap: 8px; padding: 12px 16px; border-radius: var(--r-s); background: var(--verde-claro); color: var(--cad-sobre-selecionado); font: 400 var(--t-body-m)/20px var(--ui); }
.cad-cupom-ok svg { flex: none; margin-top: 0; color: var(--verde); }
.cad-cupom-ok > span { flex: 1 1 auto; }
.cad-cupom-ok .cad-link { min-height: 48px; margin: -14px -8px -14px 0; }

/* teste grátis: o cartão diz o que importa, na ordem em que a pessoa pergunta — quantos dias, quanto paga hoje, quando começa a cobrança */
.cad-trial { padding: 16px; border-radius: var(--r-s); background: var(--verde-claro); color: var(--cad-sobre-selecionado); }
.cad-trial p { margin: 0; }
.cad-trial-nome { font: 500 var(--t-body-m)/20px var(--ui); }
.cad-trial-dias { margin-top: 4px; font: 600 28px/36px var(--ui); letter-spacing: -0.02em; color: var(--cad-sobre-selecionado); }
.cad-trial-hoje { margin-top: 4px; font: 600 var(--t-title-m)/24px var(--ui); }
.cad-trial-depois { margin-top: 4px; font: 400 var(--t-body-m)/20px var(--ui); }
.cad-trial .cad-link { margin: 4px 0 -8px -8px; color: var(--cad-sobre-selecionado); }

.cad-esqueleto { display: flex; flex-direction: column; gap: 12px; }
.cad-esqueleto i { display: block; height: 72px; border-radius: var(--r-s); background: var(--cinza-claro); animation: cad-pulso 1.4s ease-in-out infinite; }
@keyframes cad-pulso { 50% { opacity: .55; } }

/* ------------------------------------------------------------ resumo do pedido */
.cad-resumo { position: sticky; top: 88px; padding: 24px; border: 1px solid var(--linha-forte); border-radius: var(--r-s); background: var(--superficie); }
.cad-resumo-titulo { margin: 0 0 12px; font: 600 var(--t-title-m)/24px var(--ui); }
.cad-resumo-lista { margin: 0; }
.cad-resumo-linha, .cad-resumo-total, .cad-resumo-depois { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 8px 0; }
.cad-resumo-linha dt, .cad-resumo-depois dt { font: 400 var(--t-body-m)/20px var(--ui); color: var(--tinta-2); }
.cad-resumo-linha dd, .cad-resumo-depois dd { margin: 0; font: 500 var(--t-body-m)/20px var(--ui); text-align: right; overflow-wrap: anywhere; }
.cad-resumo-total { margin-top: 8px; padding: 16px 0 12px; border-top: 1px solid var(--linha); }
.cad-resumo-total + .cad-resumo-depois { padding: 0 0 20px; }
.cad-resumo-total:last-child { padding-bottom: 20px; }
.cad-resumo-total dt { font: 600 var(--t-title-m)/24px var(--ui); }
.cad-resumo-total dd { margin: 0; text-align: right; font: 400 var(--t-body-m)/20px var(--ui); color: var(--tinta-2); font-variant-numeric: tabular-nums; }
.cad-resumo-total dd b { font: 600 28px/36px var(--ui); letter-spacing: -0.02em; color: var(--tinta); }
.cad-resumo-total dd s { display: block; font-size: var(--t-body-m); color: var(--tinta-2); }

/* ------------------------------------------------------------ retorno do pagamento */
.cad-confirmacao { max-width: 480px; margin: 48px auto 0; text-align: center; display: flex; flex-direction: column; align-items: center; }
.cad-confirmacao .cad-titulo { margin-bottom: 12px; }
.cad-confirmacao .cad-texto { margin-bottom: 8px; }
.cad-giro { width: 48px; height: 48px; margin-bottom: 24px; border-radius: 50%; border: 4px solid var(--verde-claro); border-top-color: var(--verde); animation: cad-gira .9s linear infinite; }
@keyframes cad-gira { to { transform: rotate(360deg); } }
.cad-selo { display: flex; align-items: center; justify-content: center; width: 64px; height: 64px; margin-bottom: 24px; border-radius: 50%; background: var(--verde-claro); color: var(--verde); }

/* ------------------------------------------------------------ painel "Assinatura" */
.ass-fundo { position: fixed; inset: 0; z-index: 2000; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(16, 24, 20, 0.6); font-family: var(--ui); }
.ass-fundo-2 { z-index: 2100; background: rgba(16, 24, 20, 0.5); }
.ass-painel { display: flex; flex-direction: column; width: min(560px, 100%); max-height: calc(100dvh - 32px); overflow-y: auto; border-radius: var(--r-m); background: var(--superficie); color: var(--tinta); }
.ass-confirma { width: min(440px, 100%); }
.ass-cab { display: flex; align-items: center; gap: 8px; padding: 16px 8px 8px 24px;
  position: sticky; top: 0; z-index: 2; background: var(--superficie); border-bottom: 1px solid var(--linha); }   /* o painel rola inteiro: sem isto o título e o × sumiam no celular (como o de Meus dados, `.md-cab`) */
.ass-cab .cad-icone-botao[hidden] { display: none; }
.ass-cab .cad-icone-botao:first-child:not([hidden]) { margin-left: -16px; }
.ass-titulo { flex: 1 1 auto; margin: 0; font: 600 24px/32px var(--ui); letter-spacing: -0.01em; outline: none; }
.ass-conf-titulo { padding: 24px 24px 0; font-size: var(--t-headline-s); line-height: 28px; }
.ass-conf-corpo { padding: 12px 24px 0; }
.ass-conf-corpo .cad-texto { margin-bottom: 8px; font-size: var(--t-body-m); line-height: 20px; color: var(--tinta-2); }
.ass-confirma > .cad-erro-form { margin: 12px 24px 0; }
.ass-corpo { padding: 8px 24px 8px; }
.ass-corpo .cad-aviso { margin: 0 0 16px; }
.ass-corpo .cad-erro-form { margin: 0 0 16px; }
.ass-subtitulo { margin: 0; font: 600 var(--t-title-m)/24px var(--ui); }
.ass-lista { margin: 0; border-top: 1px solid var(--linha); }
.ass-linha { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 48px; padding: 8px 0; border-bottom: 1px solid var(--linha); }
.ass-linha dt { font: 400 var(--t-body-m)/20px var(--ui); color: var(--tinta-2); }
.ass-linha dd { margin: 0; font: 500 var(--t-title-m)/24px var(--ui); text-align: right; }
.ass-pilula { display: inline-flex; align-items: center; min-height: 24px; padding: 0 8px; border-radius: var(--r-xs); font: 600 12px/16px var(--ui); }   /* a mesma etiqueta dos avisos e das opções */
.ass-pilula.ok { background: var(--verde-claro); color: var(--cad-sobre-selecionado); }
.ass-pilula.aviso, .ass-pilula.atencao { background: var(--ambar-claro); color: var(--ambar); }
.ass-pilula.erro, .ass-pilula.falha { background: var(--fogo-claro); color: var(--cad-erro-texto); }
.ass-uso { padding: 20px 0 8px; }
.ass-uso-topo { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 8px; }
.ass-uso-valor { font: 500 var(--t-title-m)/24px var(--ui); font-variant-numeric: tabular-nums; text-align: right; }
.ass-barra { height: 8px; border-radius: 4px; background: var(--cinza-claro); overflow: hidden; }
.ass-barra i { display: block; height: 100%; border-radius: 4px; background: var(--verde); }
.ass-barra.acima i { background: #A56A0A; }
.ass-apoio { margin: 8px 0 0; font: 400 var(--t-body-m)/20px var(--ui); color: var(--tinta-2); }
.ass-alerta { display: flex; align-items: flex-start; gap: 12px; margin: 12px 0 0; padding: 12px 16px; border-radius: var(--r-s); background: var(--ambar-claro); color: var(--cad-ambar-texto); font: 500 var(--t-body-m)/20px var(--ui); }
.ass-alerta svg { flex: none; color: var(--ambar); }
.ass-alerta p { margin: 0 0 12px; }
.ass-areas { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 16px 0 0; }
.ass-areas > div { padding: 12px 16px; border: 1px solid var(--linha-forte); border-radius: var(--r-s); }
.ass-areas dt { font: 400 var(--t-body-m)/20px var(--ui); color: var(--tinta-2); }
.ass-areas dd { margin: 0; font: 600 20px/28px var(--ui); font-variant-numeric: tabular-nums; }
.ass-uso + .ass-areas { margin-top: 8px; }
.ass-subtitulo + .ass-props { margin-top: 8px; }
.ass-areas ~ .ass-subtitulo { margin-top: 20px; }
.ass-props { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--linha); }
.ass-props li { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; min-height: 40px; padding: 8px 0; border-bottom: 1px solid var(--linha); font: 400 var(--t-body-m)/20px var(--ui); }
.ass-prop-nome { font-weight: 500; overflow-wrap: anywhere; }
.ass-prop-ha { color: var(--tinta-2); font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.ass-mudar { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--linha); }
.ass-mudar > .ass-subtitulo { margin-top: 20px; }
.ass-acoes { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.ass-pe { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 8px; padding: 16px 24px 24px; }

/* ------------------------------------------------------------ telas estreitas (o ponto de troca do produto é 900 px) */
@media (max-width: 900px) {
  .cad-grade { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .cad-corpo { padding-bottom: 136px; }
  /* o resumo vira a barra de baixo: o total à esquerda, o botão à direita, sempre à mão */
  .cad-resumo { position: fixed; left: 0; right: 0; bottom: 0; top: auto; z-index: 5; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 16px;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); border: 0; border-top: 1px solid var(--linha-forte); border-radius: 0; }
  .cad-resumo-titulo, .cad-resumo-linha { display: none; }
  .cad-resumo-total, .cad-resumo-total + .cad-resumo-depois, .cad-resumo-total:last-child { margin: 0; padding: 0; border: 0; }
  .cad-resumo-total, .cad-resumo-depois { flex-direction: column; align-items: flex-start; gap: 0; }
  .cad-resumo-total dt { font: 400 var(--t-body-m)/20px var(--ui); color: var(--tinta-2); }
  .cad-resumo-total dd, .cad-resumo-depois dd { text-align: left; }
  .cad-resumo-total dd b { font-size: 24px; line-height: 32px; }
  .cad-resumo-total dd s { display: inline; margin-right: 8px; }
  .cad-resumo-depois dt { display: none; }
  .cad-resumo-depois dd { font: 400 var(--t-body-s)/16px var(--ui); color: var(--tinta-2); }
  .cad-botao-cheio { width: auto; }
}
@media (max-width: 560px) {
  .cad-topo { padding: 0 8px 0 16px; }
  .cad-corpo { padding: 24px 16px 136px; }
  .cad-corpo.estreito { padding-bottom: 48px; }
  .cad-titulo { font-size: 24px; line-height: 32px; }
  .cad-passos { gap: 8px; margin-bottom: 24px; }
  .cad-passo:not(.atual) .cad-passo-nome { display: none; }
  .cad-passo + .cad-passo::before { width: 16px; margin-right: 0; }
  .cad-planos { grid-template-columns: minmax(0, 1fr); }
  .cad-seg { display: flex; width: 100%; }
  .cad-seg-item { flex: 1 1 0; }
  .cad-seg-rotulo { justify-content: center; width: 100%; padding: 0 12px; }
  .cad-chips { display: grid; grid-template-columns: 1fr 1fr; }
  .cad-chip { width: 100%; justify-content: center; padding: 0 12px; }
  .cad-form .cad-acoes .cad-botao { width: 100%; }
  .cad-acoes-centro .cad-botao { width: 100%; }
  .cad-dados > div { flex-direction: column; gap: 0; }
  .cad-dados dd { text-align: left; }
  .cad-cupom .cad-entrada-linha { flex-direction: column; }
  .cad-cupom .cad-entrada-linha > .cad-botao { width: 100%; }
  .cad-suporte-linha .cad-botao { width: 100%; }
  .cad-link-topo { padding: 0 8px; }
  .ass-fundo { align-items: flex-end; padding: 0; }
  .ass-fundo-2 { align-items: center; padding: 16px; }
  .ass-painel { width: 100%; max-height: 92dvh; border-radius: var(--r-m) var(--r-m) 0 0; }
  .ass-confirma { border-radius: var(--r-m); }
  .ass-pe .cad-botao, .ass-acoes .cad-botao { flex: 1 1 100%; }
  .ass-areas { grid-template-columns: 1fr 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .cad-giro { animation: none; border-top-color: var(--verde); border-right-color: var(--verde); }
  .cad-esqueleto i { animation: none; }
  .cad-botao { transition: none; }
}

/* forma de pagamento: a opção indisponível fica visível e apagada, com o motivo logo abaixo */
.cad-plano-item.desabilitada .cad-plano { opacity: .55; cursor: not-allowed; background: var(--cinza-claro); }
.cad-plano-item.desabilitada .cad-radio-oculto { cursor: not-allowed; }
.cad-grupo > .cad-aviso { margin: 12px 0 0; }
.cad-formas { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.ass-alerta.vencido { background: var(--fogo-claro); color: var(--cad-erro-texto); }
.ass-alerta.vencido svg { color: var(--fogo); }
.ass-alerta p { margin: 0; }
.ass-corpo > .ass-alerta { margin: 0 0 12px; }
.ass-erro-renovar { margin: 12px 0 0; }

/* ------------------------------------------------------------ aviso de pagamento pendente (topo do produto, tela de bloqueio e painel) */
.cad-pend { --cad-contorno: #8A938A; --cad-verde-escuro: #17593A; --cad-ambar-texto: #5E3D05; --cad-erro-texto: #7E1F10; display: flex; align-items: flex-start; gap: 12px; padding: 12px 16px; border-radius: var(--r-s); font: 500 var(--t-body-m)/20px var(--ui); color: var(--tinta); }
.cad-pend.ambar { background: var(--superficie); border: 1px solid var(--linha-forte); color: var(--tinta); }
.cad-pend.ambar > svg { color: var(--ambar); }
.cad-pend.vermelha { background: var(--superficie); border: 1px solid var(--linha-forte); color: var(--tinta); }
.cad-pend.vermelha > svg { color: var(--fogo); }
.cad-pend.azul { background: var(--superficie); border: 1px solid var(--linha-forte); color: var(--tinta); }
.cad-pend.azul > svg { color: var(--azul); }
.cad-pend > svg { flex: none; margin-top: 0; }
.cad-pend-corpo { flex: 1 1 auto; min-width: 0; }
.cad-pend-texto { margin: 0; }
.cad-pend-acoes { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.cad-pend-erro { margin: 12px 0 0; }
.cad-pend .cad-icone-botao { margin: -8px -8px -8px 0; color: inherit; }
.cad-pend .cad-icone-botao:hover { background: rgba(0, 0, 0, .06); color: inherit; }
.cad-pend .cad-botao, .cad-pend a.cad-botao { min-height: var(--alvo); padding: 0 16px; font-size: var(--t-body-m); }
.cad-pend a.cad-botao-sec, .cad-fundo .cad-pend a.cad-botao-sec { color: var(--tinta); background: var(--superficie); }
/* no topo do produto ocupa a largura toda, sem canto, e só tem a linha de baixo */
.cad-pend.topo { flex: none; align-items: center; min-height: 48px; padding: 4px 8px 4px 16px; border-radius: 0; border-width: 0 0 1px; border-style: solid; border-color: var(--linha-forte); background: var(--superficie-2); }
/* a faixa do topo é um banner do M3: uma linha, a ação em botão de TEXTO (não um segundo contorno que
   engorda a faixa) e o × no canto (dono, 2026-10-04: "faixa azul do e-mail ocupando altura demais") */
.cad-pend.topo .cad-botao-sec { min-height: var(--alvo); border-color: transparent; background: none; color: var(--verde); padding: 0 12px; }
.cad-pend.topo .cad-botao-sec:hover { background: var(--verde-claro); }
.cad-pend.topo .cad-icone-botao { margin: 0; }
.cad-pend.topo .cad-pend-corpo { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.cad-pend.topo .cad-pend-acoes { margin-top: 0; }
.cad-pend.topo .cad-pend-erro { flex: 1 1 100%; margin: 4px 0 0; }
.cad-fundo .cad-pend { margin: 0 0 20px; }
.ass-corpo .cad-pend { margin: 0 0 12px; }
@media (max-width: 900px) {
  /* no celular/tablet o texto quebra, mas a ação continua NA MESMA faixa, como botão de texto (não uma
     segunda linha com um botão grande em pílula — dono, 2026-10-04) */
  .cad-pend.topo { align-items: center; padding: 4px 4px 4px 16px; }
  .cad-pend.topo .cad-pend-corpo { gap: 0 8px; }
}
@media (max-width: 560px) {
  .cad-pend-acoes .cad-botao { flex: 1 1 100%; }
}
.cad-pend a.cad-botao { color: #fff; text-decoration: none; }
.cad-pend a.cad-botao-sec { color: var(--tinta); }
.cad-pend :focus-visible { outline: 3px solid var(--verde); outline-offset: 2px; }
.cad-dica-pix { display: flex; flex-wrap: wrap; align-items: center; gap: 0 4px; margin-top: 12px; }
.cad-dica-pix .cad-link { padding: 0 4px; }
/* no celular o aviso do topo gasta pouco da tela: os dois botões lado a lado, sem o ícone do WhatsApp */
@media (max-width: 560px) {
  .cad-pend.topo .cad-pend-acoes { flex-wrap: nowrap; margin-left: -8px; }
  .cad-pend.topo .cad-pend-acoes .cad-botao { flex: 0 0 auto; padding: 0 12px; }
  .cad-pend.topo .cad-pend-acoes .cad-botao svg { display: none; }
}
.cad-pend-acoes { align-items: stretch; }

/* ------------------------------------------------------------ v4: só cartão no autoatendimento; painel "Assinatura" por seções */
/* a forma única do passo 3: já vem marcada, não é escolha. O visto fica à vista (cor nunca vem sozinha) */
.cad-plano-fixo { border: 2px solid var(--verde); padding: 15px; background: #F2F8F4; cursor: default; }
.cad-plano-fixo .cad-plano-marca { display: inline-flex; }
.cad-comercial { max-width: 60ch; }
.cad-comercial .cad-texto { margin-bottom: 12px; font-size: var(--t-body-m); line-height: 20px; }

.ass-secao { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--linha); }
.ass-secao > .ass-subtitulo { margin-bottom: 8px; }
.ass-topo { padding: 16px 0 4px; }
.ass-topo-linha { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ass-topo-nome { margin: 0; font: 600 20px/28px var(--ui); }
.ass-topo-valor { margin: 8px 0 0; font: 400 var(--t-body-m)/20px var(--ui); color: var(--tinta-2); }
.ass-topo-valor b { font: 600 28px/36px var(--ui); letter-spacing: -0.02em; color: var(--tinta); font-variant-numeric: tabular-nums; }
.ass-topo-data { margin: 8px 0 0; font: 500 var(--t-title-m)/24px var(--ui); }
.ass-topo-ha { margin: 2px 0 0; font: 400 var(--t-body-m)/20px var(--ui); color: var(--tinta-2); }
.ass-pilula.neutro { background: var(--cinza-claro); color: var(--tinta); }
.ass-topo + .ass-alerta, .ass-topo + .cad-pend { margin-top: 12px; }

.ass-forma-atual { margin: 0; font: 500 var(--t-title-m)/24px var(--ui); }
.ass-comercial { margin-top: 12px; }
.ass-comercial .ass-apoio { margin-top: 0; }

/* histórico: uma lista de duas linhas por pagamento — a mesma peça serve de tabela na tela larga e de cartão no celular */
.ass-hist { list-style: none; margin: 0 0 4px; padding: 0; border-top: 1px solid var(--linha); }
.ass-hist-item { display: flex; flex-direction: column; gap: 4px; padding: 12px 0; border-bottom: 1px solid var(--linha); }
.ass-hist-linha { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.ass-hist-desc { font: 500 var(--t-title-m)/24px var(--ui); overflow-wrap: anywhere; }
.ass-hist-valor { font: 600 var(--t-title-m)/24px var(--ui); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ass-hist-meta { align-items: center; justify-content: flex-start; flex-wrap: wrap; gap: 4px 12px; font: 400 var(--t-body-m)/20px var(--ui); color: var(--tinta-2); }
.ass-hist-data { font-variant-numeric: tabular-nums; }
.ass-hist-links { display: inline-flex; flex-wrap: wrap; gap: 0 4px; margin-left: auto; }
.ass-hist-link { display: inline-flex; align-items: center; min-height: 48px; padding: 0 8px; margin: -12px 0; }
.ass-hist-esq i { height: 56px; }
.ass-secao > .ass-acoes, #ass-hist-caixa > .ass-acoes { margin-top: 12px; }
#ass-hist-caixa > .cad-erro-form { align-items: center; flex-wrap: wrap; }
#ass-hist-caixa > .cad-erro-form .cad-link { margin-left: auto; }

/* cancelar: discreto, no fim; o diálogo pergunta o motivo sem obrigar */
.ass-cancelar { border-top: 1px solid var(--linha); }
.ass-cancelar-botao { margin-left: -8px; color: var(--cad-erro-texto); }
.ass-cancelar-botao:hover { color: var(--fogo); }
.ass-canc-form { padding-top: 16px; }
.ass-canc-form .cad-grupo { margin-bottom: 16px; }
.ass-opcao { display: flex; align-items: center; gap: 12px; min-height: 48px; }
.ass-opcao label { flex: 1 1 auto; display: flex; align-items: center; min-height: 48px; font: 400 var(--t-title-m)/24px var(--ui); cursor: pointer; }
.ass-canc-texto { height: auto; min-height: 88px; padding: 12px 16px; resize: vertical; }
.ass-alerta .cad-botao { margin-top: 0; }
.ass-alerta .cad-erro-form { margin: 12px 0 0; }
@media (max-width: 560px) {
  .ass-hist-links { margin-left: 0; flex: 1 1 100%; }
  .ass-topo-valor b { font-size: 24px; line-height: 32px; }
}

/* ------------------------------------------------------------ "Continuar com o Google" (google.js)
   Desde 2026-10-04. O bloco é o mesmo no login e no cadastro: `.gc-*` é de google.js, `.cad-google*` do
   passo 1 do cadastro. O botão de verdade é um iframe do Google (40 px de altura, o maior que ele desenha);
   o lugar dele reserva 48 px para o leiaute não pular quando ele chega e para o alvo ficar inteiro. */
.gc-bloco { display: flex; flex-direction: column; gap: 8px; width: 100%; }
.gc-lugar { display: flex; align-items: center; justify-content: center; min-height: 48px; width: 100%; max-width: 400px; margin: 0 auto; }
.gc-lugar > div { margin: 0 auto; }
/* a FORMA do botão enquanto o script chega: pílula contornada, o "G" e uma linha de texto que pulsa */
.gc-esqueleto { display: flex; align-items: center; gap: 12px; width: 100%; max-width: 400px; height: 40px; padding: 0 12px; border: 1px solid var(--linha-forte); border-radius: var(--r-xs); background: var(--superficie); }
.gc-esqueleto-g { flex: none; width: 18px; height: 18px; border-radius: 50%; background: var(--linha-forte); }
.gc-esqueleto-linha { flex: 1; max-width: 180px; height: 10px; margin: 0 auto; border-radius: 5px; background: var(--linha-forte); animation: gc-pulso 1.2s ease-in-out infinite; }
@keyframes gc-pulso { 50% { opacity: .45; } }
@media (prefers-reduced-motion: reduce) { .gc-esqueleto-linha { animation: none; } }
/* o recado quando o Google não abre ou não carrega: texto de apoio do Material, sem caixa colorida */
.gc-aviso { display: flex; flex-direction: column; gap: 4px; max-width: 400px; margin: 0 auto; width: 100%; }
.gc-aviso[hidden] { display: none; }
.gc-aviso-texto { margin: 0; font: 400 var(--t-body-m, 14px)/20px var(--ui); color: var(--tinta-2); text-align: center; }
.gc-aviso-acoes { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 8px; }
.gc-acao { min-height: 48px; padding: 0 12px; border: 0; border-radius: var(--r-s); background: none; color: var(--verde); font: 600 var(--t-body-m, 14px)/20px var(--ui); cursor: pointer; }
.gc-acao:hover { background: var(--cinza-claro); }
.gc-acao:focus-visible { outline: 3px solid var(--verde); outline-offset: 2px; }
/* o recado que sobrevive ao fechamento do cadastro ("Você já tem conta: entramos com o Google") — snackbar */
.gc-recado { position: fixed; left: 50%; bottom: 24px; z-index: 3000; transform: translateX(-50%); max-width: min(560px, calc(100vw - 32px)); padding: 14px 16px; border-radius: var(--r-s); background: #2F3330; color: #F1F1EC; font: 400 var(--t-body-m, 14px)/20px var(--ui); box-shadow: 0 3px 8px rgba(0, 0, 0, .25); transition: opacity .3s; }
.gc-recado.saindo { opacity: 0; }

.cad-google { display: flex; flex-direction: column; gap: 20px; margin: 0 0 24px; }
.cad-divisor { display: flex; align-items: center; gap: 16px; font: 400 var(--t-body-m, 14px)/20px var(--ui); color: var(--tinta-2); }
.cad-divisor::before, .cad-divisor::after { content: ''; flex: 1; height: 1px; background: var(--linha); }
/* "Falta pouco": os dados do Google à vista, sem edição, e o "Não é você?" logo embaixo */
.cad-google-conta { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; margin: 0 0 24px; }
.cad-google-conta .cad-dados { margin: 0; width: 100%; }
.cad-google-conta .cad-link { margin-left: -8px; min-height: 48px; }
.cad-google-denovo { display: flex; flex-direction: column; gap: 12px; margin: 0 0 24px; outline: none; }
.cad-google-denovo-texto { margin: 0; font: 500 var(--t-body-m, 14px)/20px var(--ui); color: var(--fogo); }
@media (max-width: 480px) {
  .gc-recado { bottom: 16px; }
}

/* link com ícone: o ícone separado do texto; no meio da frase, sem o recuo de botão (o "." vinha solto depois do link) */
.cad-link { gap: 4px; }
.cad-acima .cad-link { display: inline; padding: 0; min-height: 0; }   /* link no meio da frase: alvo do texto (exceção do WCAG para link em texto) */
.cad-acima .cad-link svg { vertical-align: -4px; margin-right: 4px; }

/* ------------------------------------------------------------ os avisos de conta de quem está barrado (402)
   Quem está sem assinatura não chega ao sino do produto: os avisos de CONTA não lidos aparecem no topo da escolha do
   plano. Cartão de superfície com linha, como o resto do assistente (nada de caixa colorida): a cor fica no ícone. */
.cad-avisos-conta { margin: 0 0 20px; }
.cad-avisos-titulo { margin: 0 0 8px; font: 600 var(--t-body-m)/20px var(--ui); color: var(--tinta-2); }
.cad-avisos-lista { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; }
.cad-aviso-conta { display: flex; align-items: flex-start; gap: 12px; padding: 12px 16px; border: 1px solid var(--linha-forte); border-radius: var(--r-s); background: var(--superficie); color: var(--tinta); }
.cad-aviso-conta > svg { flex: none; color: var(--azul); }
.cad-aviso-conta.alerta > svg { color: var(--fogo); }
.cad-aviso-conta-corpo { flex: 1 1 auto; min-width: 0; }
.cad-aviso-conta-titulo { margin: 0; font: 600 var(--t-body-m)/20px var(--ui); overflow-wrap: anywhere; }
.cad-aviso-conta-texto { margin: 4px 0 0; font: 400 var(--t-body-m)/20px var(--ui); color: var(--tinta-2); overflow-wrap: anywhere; }
.cad-aviso-conta-acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 8px; }
.cad-fundo a.cad-aviso-acao { min-height: var(--alvo); padding: 0 16px; color: var(--tinta); background: var(--superficie); text-decoration: none; }
.cad-aviso-conta-acoes .cad-link { padding: 0 8px; }
.cad-avisos-erro { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 12px 16px; border: 1px solid var(--linha-forte); border-radius: var(--r-s); background: var(--superficie); font: 400 var(--t-body-m)/20px var(--ui); }
.cad-avisos-erro > svg { flex: none; color: var(--azul); }
.cad-avisos-esqueleto { display: flex; flex-direction: column; gap: 8px; }
.cad-avisos-esqueleto i { display: block; height: 64px; border-radius: var(--r-s); background: var(--cinza-claro); animation: cad-pulso 1.4s ease-in-out infinite; }
@media (max-width: 560px) {
  .cad-aviso-conta { padding: 12px; }
  .cad-aviso-conta-acoes { flex-direction: column; align-items: stretch; }
  .cad-fundo a.cad-aviso-acao { justify-content: center; }
}
@media (prefers-reduced-motion: reduce) { .cad-avisos-esqueleto i { animation: none; } }

/* ZOOM DE 200 % NO CELULAR (QA, G-07/BUG-17): a 390 px com zoom de 200 % a página tem ~195 px de largura, e o
   cabeçalho (a marca + "Pedir ajuda" + "Já tenho conta") e a fila de passos passavam 74 px da tela. Aqui eles
   quebram linha em vez de empurrar a largura (WCAG 1.4.10, reflow). */
@media (max-width: 320px) {
  .cad-topo { flex-wrap: wrap; height: auto; min-height: 56px; padding: 4px 8px; gap: 0 8px; }
  .cad-topo-acoes { flex-wrap: wrap; min-width: 0; }
  .cad-passos { flex-wrap: wrap; row-gap: 8px; }
  .cad-passo + .cad-passo::before { width: 8px; }
  .cad-corpo { padding-left: 12px; padding-right: 12px; }
  .cad-fundo { overflow-x: hidden; }
}

/* B12 (QA final): com pouca ALTURA (celular deitado, zoom de 200 % no notebook) a faixa do e-mail fica numa linha só,
   com a frase cortada (inteira para o leitor de tela), a ação e o × à vista — em duas linhas ela comia o mapa */
@media (max-height: 520px) {
  .cad-pend.topo { min-height: 48px; padding-top: 0; padding-bottom: 0; }
  .cad-pend.topo .cad-pend-corpo { flex-wrap: nowrap; min-width: 0; flex: 1 1 auto; }
  .cad-pend.topo .cad-pend-texto { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .cad-pend.topo .cad-pend-acoes { flex: none; }
}
/* B13 (QA final): a linha do aceite (a frase inteira marca a caixa) com 48 px de alvo; os links dos termos embaixo */
.cad-consentimento-linha { min-height: 48px; box-sizing: border-box; }
.cad-consentimento-linha + .cad-apoio { margin: -4px 0 0 36px; }

/* A CAPA "Carregando sua conta…" (QA final, M7): o FUNDO cobre na hora (é ele que impede o mapa de piscar); o texto e a
   forma entram depois de 400 ms — quem tem resposta rápida não vê nada piscar. Centrada, coluna estreita */
#capa-da-conta { display: flex; align-items: center; justify-content: center; }
#capa-da-conta .cad-corpo { width: min(400px, 100%); padding: 24px; animation: capa-entra .2s ease-out .4s both; }
#capa-da-conta .cad-sub { margin: 0 0 16px; text-align: center; color: var(--tinta-2); }
#capa-da-conta .cad-esqueleto i { height: 48px; }
@keyframes capa-entra { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { #capa-da-conta .cad-corpo { animation: none; } }