/* e4.css | início público "/" e página "/assinar" (E4). Origem: protótipo do Kauan (telas-e4/e4.css), só a parte de produção.
   Carrega depois do e2.css. Sem estilo inline (CSP). */

/* ---------- início público "/" ---------- */
.ini { flex: 1; display: flex; flex-direction: column; min-height: inherit; }
.ini__topo { display: flex; align-items: center; padding: var(--sp-4) var(--gutter) var(--sp-2); }
.ini__cols { flex: 1; width: 100%; max-width: 480px; margin: 0 auto; padding: var(--sp-5) var(--gutter) var(--sp-7); display: flex; flex-direction: column; gap: var(--sp-7); }
.ini__msg { display: flex; flex-direction: column; gap: var(--sp-3); }
.ini__msg .marca, .ini__msg .farlink { display: none; }
.ini__msg h1 { font-size: 2rem; }
.ini__msg .lead { color: var(--ink-2); font-size: var(--fs-18); }
.ini__acao { display: flex; flex-direction: column; gap: var(--sp-4); }
.ini__acao .nota { text-align: center; }
.ini__acao .chip { align-self: center; }
@container pub (min-width: 600px) {
  .ini__cols { padding: var(--sp-8); margin-top: var(--sp-7); margin-bottom: var(--sp-7); flex: 0 0 auto; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-xl); box-shadow: var(--shadow-1); }
}
@container pub (min-width: 880px) {
  .ini__topo { display: none; }
  .ini__cols { flex: 1; max-width: none; margin: 0; padding: 0; background: none; border: 0; border-radius: 0; box-shadow: none; flex-direction: row; gap: 0; }
  .ini__msg { flex: 0 0 50%; justify-content: center; background: var(--side-bg); color: var(--side-ink); padding: var(--sp-9) var(--sp-9) var(--sp-7); gap: var(--sp-4); }
  .ini__msg .marca { display: inline-flex; color: #fff; margin-bottom: var(--sp-9); }
  .ini__msg .marca small { color: var(--side-ink-2); }
  .ini__msg .logo-mini { background: var(--fl-gradient); color: var(--on-brand); width: 44px; height: 44px; }
  .ini__msg h1 { font-size: 2.75rem; color: #fff; max-width: 16ch; }
  .ini__msg .lead { color: var(--side-ink-2); max-width: 32ch; }
  .ini__msg .farlink { display: inline-flex; margin-top: var(--sp-9); color: var(--side-ink-2); }
  .ini__msg .farlink__logo { color: #fff; }
  .ini__acao { flex: 1; justify-content: center; align-items: stretch; max-width: 440px; margin: 0 auto; padding: var(--sp-8) var(--sp-6); }
  .so-estreito { display: none !important; }
}

/* ---------- "/assinar" provisória (casca logada da E2: .topo + .logada__main) ---------- */
.bloq__main { align-items: center; }
.bloq { width: 100%; max-width: 560px; margin: 0 auto; }
.bloq .lead { max-width: 40ch; }
.bloq__acoes { gap: var(--sp-3); }
.bloq__acoes .btn-link { align-self: center; }
.estado .vazio__ic--priv { background: var(--priv-bg); color: var(--priv-ink); box-shadow: inset 0 0 0 2px var(--priv-line); }

/* ---------- aviso "grátis por N dias" ao lado de "Criar conta" (/entrar, /cadastrar e /) ---------- */
.chamada .chip { align-self: center; }

/* ---------- bloco "Confira seu e-mail" (E5 17.6b, 4.1; verifique.js). Só tokens já medidos na E2: nenhuma cor nova, nenhum ícone novo ---------- */
.verifique { display: flex; flex-direction: column; gap: var(--sp-4); width: 100%; }
.verifique__corpo { display: flex; flex-direction: column; gap: var(--sp-3); width: 100%; min-width: 0; }
.estado .verifique__corpo { text-align: center; }
.verifique__resultados { display: flex; flex-direction: column; gap: var(--sp-3); width: 100%; }
.banner__acoes > .verifique__corpo { flex: 1 1 100%; text-align: left; }
.verifique__frase, .verifique__apoio { overflow-wrap: anywhere; }
.verifique__apoio { color: var(--ink-2); font-size: var(--fs-14); }
.verifique__em { font-weight: 800; overflow-wrap: anywhere; }
.verifique__de { font-weight: 800; overflow-wrap: anywhere; user-select: all; -webkit-user-select: all; }
.verifique__dicas { text-align: left; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-3); }
.verifique__titulo { font: 800 var(--fs-18)/var(--lh-tight) var(--font-display); }
.verifique__prov { font: 800 var(--fs-16)/var(--lh-tight) var(--font-display); }
.verifique__passos { margin: 0; padding-left: 1.25rem; display: flex; flex-direction: column; gap: var(--sp-2); font: 400 var(--fs-16)/var(--lh-body) var(--font-body); }
/* display:flex tira o <summary> do modo list-item e a seta do navegador some (QA M6 c): fica list-item, com a altura de toque feita por padding. */
details.verifique__dicas > summary { display: list-item; list-style-position: inside; padding-block: calc((var(--tap) - 1.5em) / 2); min-height: var(--tap); box-sizing: border-box; cursor: pointer; }
.verifique__botao { margin-top: var(--sp-1); }
.verifique__espera { min-height: 1.5em; color: var(--ink-2); font-variant-numeric: tabular-nums; text-align: center; }
.verifique__num { font-weight: 800; font-variant-numeric: tabular-nums; }
.verifique__aviso:empty { display: none; }
.verifique__aviso > .banner { margin: 0; text-align: left; }
.verifique__suporte { color: var(--ink-2); font-size: var(--fs-14); text-align: center; }
.verifique__mail { font-weight: 800; overflow-wrap: anywhere; }
.banner__acoes .verifique__espera { text-align: left; }

/* ---------- Termos e Política (L1-1): texto longo, coluna legível. Só variáveis já existentes ---------- */
body[data-pagina="termos"] .pub__main, body[data-pagina="privacidade"] .pub__main { max-width: 720px; }
.doc { max-width: 70ch; display: flex; flex-direction: column; gap: var(--sp-3); overflow-wrap: anywhere; }
.doc h1 { font-size: var(--fs-28); }
.doc h2 { margin-top: var(--sp-5); font-size: var(--fs-20); }
.doc p, .doc li { line-height: var(--lh-body); }
.doc p { margin: 0; }
.doc ul { margin: 0; padding-left: 1.25rem; display: flex; flex-direction: column; gap: var(--sp-2); }
.doc strong { font-weight: 800; }
.doc code { font: 500 0.9em/1.4 var(--font-mono); background: var(--surface-2); border-radius: var(--r-sm); padding: 1px 6px; overflow-wrap: anywhere; }