/*
  CAMADA DE PRODUTO — ESPelho
  ---------------------------------------------------------------------------
  Esta folha não substitui o design system existente nem a lógica das telas.
  Ela transforma os seus tokens em uma gramática visual comum entre produto,
  compra, método e páginas de serviço. Mantida separada para que a migração
  seja reversível e não altere o motor de correção ou o checkout.
*/

:root {
  --esp-canvas: #fbfcff;
  --esp-canvas-tint: #f3f5ff;
  --esp-paper: #ffffff;
  --esp-paper-reading: #fffefd;
  --esp-ink: #202638;
  --esp-muted: #6f7990;
  --esp-line: #dfe4f0;
  --esp-periwinkle: #7d8de1;
  --esp-periwinkle-soft: #eef0ff;
  --esp-lime: #b9ef60;
  --esp-lime-ink: #56801b;
  --esp-navy: #1d2746;
  --esp-navy-2: #26345d;
  --esp-danger: #c84c5b;
  /* 12/08 — leveza. As duas sombras eram de cena (22px/55px de espalhamento):
     cada cartão flutuava alto e a soma delas dava à tela um cinza que nenhuma
     cor da paleta explica. Agora a borda faz o recorte e a sombra só separa
     branco de branco. */
  --esp-shadow: 0 1px 3px rgba(44, 54, 92, .06);
  --esp-shadow-soft: 0 6px 18px rgba(44, 54, 92, .07);
  --esp-display: Manrope, Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  --esp-ui: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  --esp-micro: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

  /* Escala fechada da plataforma: seis tamanhos, três pesos. O marketing mantém
     sua própria régua; estes tokens governam somente a casa logada. */
  --esp-type-caption: .75rem;
  --esp-type-support: .875rem;
  --esp-type-body: 1rem;
  --esp-type-subhead: 1.25rem;
  --esp-type-heading: 1.75rem;
  --esp-type-display: 2.5rem;
  --esp-weight-regular: 400;
  --esp-weight-medium: 600;
  --esp-weight-bold: 700;

  /* Mesma estrutura tipográfica da landing: Manrope conduz títulos, Inter
     conduz a interface e a monoespaçada identifica micro-rótulos técnicos. */
  --esp-title: var(--esp-display);
  --esp-title-weight: var(--esp-weight-bold);
  --esp-title-tracking: -.032em;

  /* Ponte para o token do design-system: o app.css só pode usar tokens que o
     design-system.css define (há teste para isso, e é o que impede o app de
     depender de um arquivo de tema que nem toda página carrega). Lá
     --font-display é Inter; aqui ele vira Manrope, sem o app.css saber. */
  --font-display: var(--esp-display);
  --font-body: var(--esp-ui);

  /* Mesma ponte para a superfície escura: no design-system ela é o quase-preto
     "sério jovem"; aqui vira o azul-marinho da plataforma, e o CSS que a usa não
     precisa saber de nenhum dos dois. */
  --surface-dark: var(--esp-navy);
  --surface-dark-soft: #b9c2f0;
}

/* ── Superfícies compartilhadas ───────────────────────────────────────── */
body.passe-body,
body.mt-body,
html.esp-corrigir-page body {
  color: var(--esp-ink);
  background:
    radial-gradient(66rem 42rem at 50% -18rem, rgba(154, 168, 241, .21), transparent 61%),
    linear-gradient(180deg, var(--esp-canvas) 0%, #f8f9ff 46%, var(--esp-canvas) 100%);
}

/* A casa logada sai do lavado de gradiente. As páginas de venda e de leitura
   seguem com ele — lá o gradiente é cenário de uma tela só, que a pessoa abre
   e fecha. Na área logada ela passa horas, e ali o gradiente vira exatamente o
   custo que ele parecia não ter: todo cartão translúcido por cima dele deixa
   de ser branco, e a página inteira ganha um cinza sem origem na paleta. */
body.app-body {
  color: var(--esp-ink);
  background: #f6f7fb;
}

.app-body .esp-icone {
  display: inline-block;
  width: 1em;
  height: 1em;
  vertical-align: -.14em;
}

body.app-body,
html.esp-corrigir-page body,
body.mt-body,
body.passe-body,
body.priv-body {
  font-family: var(--esp-ui);
}

.app-body h1,
.app-body h2,
.app-body h3,
.passe-body h1,
.passe-body h2,
.mt-body h1,
.mt-body h2,
html.esp-corrigir-page .esp-full-title,
html.esp-corrigir-page .esp-h1,
body.priv-body h1,
body.priv-body h2 {
  font-family: var(--esp-display);
}

::selection { background: rgba(125, 141, 225, .24); color: var(--esp-ink); }

/* ── Casa do aluno: shell, preparação, simulados e casos ──────────────── */
.app-body {
  --bg-warm: var(--esp-canvas);
  --surface: var(--esp-paper);
  --surface-2: #f5f7ff;
  --fg: var(--esp-ink);
  --fg-soft: var(--esp-muted);
  --preto: var(--esp-ink);
  --cinza-texto: var(--esp-muted);
  --cinza-claro: #9aa3b7;
  --borda: var(--esp-line);
  --accent: var(--esp-periwinkle);
  --accent-strong: #6071ca;
  --accent-soft: var(--esp-periwinkle-soft);
  --accent-ring: rgba(125, 141, 225, .31);
  --success: var(--esp-lime-ink);
  --success-soft: #f1fadf;
}

.app-sidebar {
  width: 252px;
  padding: 20px 15px;
  background: #fff;
  border-right-color: #e6e9f2;
  box-shadow: none;
}
.app-sidebar-logo {
  font-family: var(--esp-display);
  font-size: 1.45rem;
  letter-spacing: -.055em;
  padding: 8px 13px 28px;
}
.app-sidebar-logo span { color: var(--esp-periwinkle); }
.app-nav { gap: 6px; }
.app-nav-item {
  border-radius: 13px;
  color: #68738a;
  font-size: .92rem;
  padding: 11px 12px;
}
.app-nav-item:hover { background: #f2f4ff; color: var(--esp-ink); }
.app-nav-item.active {
  color: #5467c7;
  background: linear-gradient(100deg, #eef0ff, #f6f7ff);
  box-shadow: inset 0 0 0 1px rgba(125, 141, 225, .15);
}
.app-user {
  border-color: var(--esp-line);
  background: rgba(247, 249, 255, .9);
  border-radius: 15px;
}
.app-user-avatar { background: var(--esp-navy); }
.app-user-entrar { color: #5c6dc9; border-color: var(--esp-line); }
.app-main { padding: 42px 48px 72px; }
.app-view { max-width: 980px; }

.app-greet { margin-bottom: 30px; }
.app-view-kicker {
  display: inline-block;
  margin-bottom: 8px;
  color: var(--esp-lime-ink);
  font-family: var(--esp-micro);
  font-size: .69rem;
  font-weight: 800;
  letter-spacing: .14em;
}
.app-greet h1 {
  font-family: var(--esp-title, var(--esp-display));
  font-weight: var(--esp-title-weight, 800);
  font-size: clamp(2rem, 3.1vw, 2.65rem);
  line-height: 1.1;
  letter-spacing: var(--esp-title-tracking, -.032em);
}
.app-greet p { max-width: 63ch; font-size: 1rem; line-height: 1.65; color: var(--esp-muted); }

/* Uma única superfície de peso alto para a decisão do dia. */
.app-task {
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 24px;
  padding: 31px 34px;
  background:
    radial-gradient(30rem 18rem at 97% 0%, rgba(125, 141, 225, .34), transparent 66%),
    linear-gradient(135deg, #1b243f, #232e51);
  box-shadow: 0 24px 54px rgba(29, 39, 70, .22);
}
.app-task-kicker { color: #cbd4ff; }
.app-task-title { font-family: var(--esp-display); font-size: 1.65rem; letter-spacing: -.045em; }
.app-task-desc { color: #d8deef; }
.app-task-cta { background: var(--esp-lime); color: #24311a; box-shadow: none; }
.app-task-cta:hover { background: #ccf67f; box-shadow: 0 12px 26px rgba(8,12,28,.24); }

.app-daily,
.app-panel,
.app-stat,
.app-acervo-item,
.app-drill-caso,
.app-drill-opcao,
.app-drill-fb {
  border-color: var(--esp-line);
  box-shadow: none;
}
.app-daily { background: #fff; border-left-color: var(--esp-periwinkle); border-radius: 18px; }
.app-daily:hover { border-color: #cdd5fb; box-shadow: var(--esp-shadow-soft); }
.app-daily-kicker, .app-daily-cta { color: #5e70cc; }
.app-panel { background: #fff; border-radius: 18px; padding: 25px 27px; }
.app-panel-head h2 { font-family: var(--esp-display); letter-spacing: -.015em; }
.app-stat { background: #fff; border-radius: 18px; }
.app-stat-value { color: var(--esp-ink); }
.app-plano-fase, .app-drill-tag { color: #5d70cb; background: var(--esp-periwinkle-soft); }
.app-plano-task { border-color: var(--esp-line); border-radius: 13px; background: #fff; }
.app-plano-task:hover { background: #f7f8ff; border-color: #d0d8fa; }
.app-sim-card { background: #fff; }
.app-sim-facts > div { background: #f6f7fb; }

/* ── Evolução: dados com prioridade, não um mosaico de cartões ────────── */
.ma-in-shell .app-main { background: transparent; }
.ma-head { margin-bottom: 26px; }
.ma-eyebrow,
.h16-progress-kicker {
  color: var(--esp-lime-ink);
  font-family: var(--esp-micro);
  font-size: .69rem;
  letter-spacing: .14em;
}
.ma-title { font-family: var(--esp-title, var(--esp-display)); font-weight: var(--esp-title-weight, 800); font-size: clamp(2rem, 3.4vw, 2.65rem); letter-spacing: var(--esp-title-tracking, -.034em); }
.ma-sub { color: var(--esp-muted); max-width: 60ch; line-height: 1.6; }
.ma-passe-badge { background: #f1fadf; color: var(--esp-lime-ink); border: 1px solid #d9ecaf; }
.ma-cards { gap: 12px; margin-bottom: 20px; }
.ma-card { background: #fff; border-color: var(--esp-line); border-radius: 18px; padding: 19px 20px; }
.ma-card:hover { transform: translateY(-2px); box-shadow: var(--esp-shadow-soft); }
.ma-card-value.accent { color: #6476d2; }
.ma-foco {
  border: 1px solid #dfe5ff;
  border-left: 0;
  border-radius: 18px;
  padding: 22px 24px;
  background: #f2f4ff;
  box-shadow: none;
}
.ma-foco::before { content: "PRÓXIMO FOCO"; color: var(--esp-lime-ink); font-family: var(--esp-micro); font-size: .64rem; font-weight: 800; letter-spacing: .12em; }
.ma-foco-icon { color: #6376d0; }
.ma-foco-copy strong { font-family: var(--esp-display); letter-spacing: -.015em; }
.ma-foco-cta { background: var(--esp-navy); border-radius: 999px; }
.ma-foco-cta:hover { background: #28365e; box-shadow: 0 6px 16px rgba(29,39,70,.18); }
.ma-panel { background: #fff; border-color: var(--esp-line); border-radius: 18px; }
.ma-panel-head h2 { font-family: var(--esp-display); letter-spacing: -.018em; }
.ma-panel-cta { color: #5f70cb; border-color: #d7dfff; }
.ma-panel-cta:hover { background: var(--esp-periwinkle-soft); }
.ma-area-row--foco { background: #f0f2ff; }
.ma-crit-foco { background: #6678d4; }
.ma-area-track { background: #edf0fa; border: 0; }
.ma-upsell { background: linear-gradient(125deg, #1e294a, #2a3968); border: 1px solid rgba(255,255,255,.12); border-radius: 22px; }
.ma-upsell .pz-btn-primary { background: var(--esp-lime); color: #28321d; }

/* ── Sala de treino e resultado ───────────────────────────────────────── */
html.esp-corrigir-page {
  background: var(--esp-canvas);
}
html.esp-corrigir-page .esp-root {
  min-height: 100vh;
  padding: 54px 28px 84px;
  color: var(--esp-ink);
  background:
    radial-gradient(48rem 32rem at 50% -20rem, rgba(143,158,239,.22), transparent 65%),
    linear-gradient(180deg, #fbfcff, #f7f8ff 53%, #fbfcff);
}
html.esp-corrigir-page .esp-intro-card {
  max-width: 860px;
  gap: 0;
  padding: 0 0 23px;
  margin-bottom: 22px;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--esp-line);
  border-radius: 0;
  box-shadow: none;
}
html.esp-corrigir-page .esp-intro-img { display: none; }
html.esp-corrigir-page .esp-app-intro::before {
  content: "SESSÃO DE TREINO";
  display: block;
  margin-bottom: 9px;
  color: var(--esp-lime-ink);
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .13em;
}
html.esp-corrigir-page .esp-full-kicker { display: none; }
html.esp-corrigir-page .esp-full-title {
  color: var(--esp-ink);
  font-size: clamp(2rem, 4vw, 2.8rem);
  letter-spacing: -.06em;
  line-height: 1.04;
}
html.esp-corrigir-page .esp-app-intro p:last-child { color: var(--esp-muted); line-height: 1.65; }
html.esp-corrigir-page .esp-wrap {
  max-width: 860px;
  padding: 30px;
  border: 1px solid var(--esp-line);
  border-radius: 23px;
  background: rgba(255,255,255,.92);
  box-shadow: var(--esp-shadow);
}
html.esp-corrigir-page .esp-mode-switch { background: #f0f2fa; border: 1px solid #e1e5f2; border-radius: 12px; }
html.esp-corrigir-page .esp-tg { color: var(--esp-muted); border-radius: 9px; }
html.esp-corrigir-page .esp-tg.on { color: #586bc9; background: #fff; box-shadow: 0 4px 14px rgba(61,75,130,.10); }
/* 26/08 — o botao ATIVO do alternador perdia o anel de foco no teclado. O anel
   generico (.esp-root :is(button):focus-visible, styles.css) e box-shadow e vale
   (0,2,1); a regra do estado ligado, logo acima, tambem e box-shadow e vale
   (0,3,1) — entao ela sobrescrevia o anel e quem navega por Tab ficava sem saber
   onde estava. So o ativo falhava; o inativo, sem sombra propria, mantinha o
   anel. Aqui as duas sombras convivem: a do estado e o anel na mesma
   declaracao. */
html.esp-corrigir-page .esp-tg.on:focus-visible { box-shadow: 0 4px 14px rgba(61,75,130,.10), 0 0 0 3px rgba(72,111,196,.32); }
html.esp-corrigir-page .esp-label { color: var(--esp-lime-ink); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; }
html.esp-corrigir-page .esp-select,
html.esp-corrigir-page .esp-ta,
html.esp-corrigir-page .esp-input,
html.esp-corrigir-page .esp-drop {
  color: var(--esp-ink);
  border-color: var(--esp-line);
  background: #fff;
  border-radius: 14px;
}
html.esp-corrigir-page .esp-select:focus,
html.esp-corrigir-page .esp-ta:focus,
html.esp-corrigir-page .esp-input:focus { border-color: #9ba9eb; box-shadow: 0 0 0 4px rgba(125,141,225,.17); }
html.esp-corrigir-page .esp-drop { background: #fafbff; border-color: #cbd4f2; }
html.esp-corrigir-page .esp-drop:hover { border-color: #7d8de1; color: #586bc9; }
html.esp-corrigir-page .esp-btn { background: var(--esp-navy); border-radius: 999px; box-shadow: 0 12px 28px rgba(29,39,70,.18); }
html.esp-corrigir-page .esp-btn:hover:not(:disabled) { background: #2a3968; }
html.esp-corrigir-page .esp-espbox { border-left-color: var(--esp-lime); background: #fbfcff; border-color: #e2e6f3; }

/* A leitura de resultado ganha superfície de documento e hierarquia de evidência. */
html.esp-corrigir-page .esp-result-shell,
html.esp-corrigir-page .esp-exam-shell {
  border-color: #dce2f2;
  border-radius: 24px;
  background:
    radial-gradient(30rem 24rem at 100% 0%, rgba(185,239,96,.18), transparent 66%),
    linear-gradient(145deg, #fff, #f9faff);
  box-shadow: var(--esp-shadow);
}
html.esp-corrigir-page .esp-result-done { color: var(--esp-navy); }
html.esp-corrigir-page .esp-result-done span { background: var(--esp-lime); color: #32431b; }
html.esp-corrigir-page .esp-result-link { color: #5d70cb; }
html.esp-corrigir-page .esp-score-number strong { font-family: var(--esp-display); color: var(--esp-navy); }
html.esp-corrigir-page .esp-score-icon,
html.esp-corrigir-page .esp-section-head > span,
html.esp-corrigir-page .esp-plan-head > span,
html.esp-corrigir-page .esp-mirror-head > span { background: #eef0ff; color: #6376d0; }
html.esp-corrigir-page .esp-preview-insight { border-color: #e3e7f3; }
html.esp-corrigir-page .esp-result-disclaimer { background: #f7f9ff; }

/* ── Passe: decisão de compra, não uma segunda landing ────────────────── */
.passe-body {
  --bg-warm: var(--esp-canvas);
  --bg2: #f5f7ff;
  --preto: var(--esp-ink);
  --cinza-texto: var(--esp-muted);
  --borda: var(--esp-line);
  --azul-destaque: var(--esp-periwinkle);
  --azul-pill: var(--esp-periwinkle-soft);
  --lilas-fundo: #f3f5ff;
}
.passe-body .header { padding-top: 18px; }
.passe-body .header-pill {
  max-width: 960px;
  background: rgba(255,255,255,.83);
  border: 1px solid rgba(255,255,255,.92);
  box-shadow: 0 16px 34px rgba(45,55,94,.09);
  backdrop-filter: blur(18px);
}
.passe-body .logo { font-family: var(--esp-display); letter-spacing: -.055em; }
.passe-body .logo-dot { color: var(--esp-periwinkle); }
.passe-body .pz-hero { padding-top: 145px; }
.passe-body .pz-hero::before {
  background: radial-gradient(52% 57% at 50% -12%, rgba(125,141,225,.24), transparent 74%);
}
.passe-body .pz-eyebrow,
.passe-body .pz-kicker { color: var(--esp-lime-ink); background: transparent; padding: 0; }
.passe-body .pz-eyebrow::before,
.passe-body .pz-kicker:not(.pz-kicker-light)::before {
  content: ""; display: inline-block; width: 7px; height: 7px; margin: 0 7px 1px 0;
  background: var(--esp-lime); border-radius: 50%; box-shadow: 0 0 0 4px rgba(185,239,96,.18);
}
.passe-body .pz-h1,
.passe-body .pz-h2 { font-family: var(--esp-display); letter-spacing: -.06em; }
.passe-body .pz-h1 { max-width: 16ch; }
.passe-body .pz-hl { color: var(--esp-periwinkle); }
.passe-body .pz-btn-primary { background: var(--esp-navy); box-shadow: 0 12px 28px rgba(29,39,70,.17); }
.passe-body .pz-btn-primary:hover { background: #2a3968; }
.passe-body .pz-btn-ghost { background: rgba(255,255,255,.72); border-color: var(--esp-line); }
.passe-body .pz-trust { background: rgba(244,246,255,.72); border-color: var(--esp-line); }
.passe-body .pz-trust-num { font-family: var(--esp-display); letter-spacing: -.025em; }
.passe-body .pz-section-alt { background: linear-gradient(105deg, #f1f3ff, #fbfcff 62%); }
.passe-body .pz-step { border-color: var(--esp-line); border-radius: 20px; box-shadow: none; }
.passe-body .pz-step:hover { border-color: #cdd6fa; box-shadow: var(--esp-shadow-soft); }
.passe-body .pz-step-n { color: #4f62bd; background: var(--esp-periwinkle-soft); }
.passe-body .pz-why-card { border-color: #dce3f5; background: #fbfcff; box-shadow: var(--esp-shadow); }
.passe-body .pz-proof .pz-quote { background: #f7f8ff; border-color: var(--esp-line); }
.passe-body .pz-buy { background: radial-gradient(42rem 22rem at 50% 0%, rgba(125,141,225,.3), transparent 68%), var(--esp-navy); }
.passe-body .pz-buy .pz-kicker { color: #dce4ff; }
.passe-body .pz-price-card { border: 1px solid rgba(255,255,255,.7); border-radius: 25px; box-shadow: 0 32px 70px rgba(7,12,29,.31); }
.passe-body .pz-price-tag { color: var(--esp-lime-ink); background: #f1fadf; }
.passe-body .pz-price-list li::before { color: #33461c; background: var(--esp-lime); }
.passe-body .pz-buy-form .pz-btn-primary { background: var(--esp-lime); color: #26321a; }
.passe-body .pz-buy-form .pz-btn-primary:hover { background: #ccf67f; }
.passe-body .pz-final { background: linear-gradient(125deg, #202a4b, #33457d); }
/* 26/08 — o botao de compra do bloco final estava INVISIVEL: contraste 1,03.
   A passe.css:203 pede `.pz-final .pz-btn-primary { background:#fff; color:var(--preto) }`,
   mas `.passe-body .pz-btn-primary` (linha 388 deste arquivo) tem a MESMA
   especificidade (0,2,0) e carrega depois, entao o fundo navy vencia. O `color`
   de la sobrevivia sem disputa — resultado: quase-preto #202638 sobre navy
   #1D2746, no ultimo ponto de conversao da pagina de compra.

   E exatamente a doenca ja corrigida na /repescagem logo abaixo. O comentario
   daquela correcao dizia "o mesmo que a /passe ja faz no bloco final dela" —
   assumiu que passe.css dava conta, e o empate de ordem desmentia. (0,3,0)
   resolve os dois lados sem !important. */
.passe-body .pz-final .pz-btn-primary { background: #fff; color: var(--esp-navy); box-shadow: 0 12px 30px rgba(8,14,32,.34); }
.passe-body .pz-final .pz-btn-primary:hover { background: #fff; color: var(--esp-navy); }

/* ── Método: documento auditável ─────────────────────────────────────── */
.mt-body {
  --bg-warm: var(--esp-canvas);
  --surface: var(--esp-paper-reading);
  --surface-2: #f4f6ff;
  --fg: var(--esp-ink);
  --fg-soft: var(--esp-muted);
  --borda: var(--esp-line);
  --accent: var(--esp-periwinkle);
  --accent-strong: #5e70cb;
  --accent-soft: var(--esp-periwinkle-soft);
  --approve: var(--esp-lime-ink);
}
.mt-top { max-width: 1000px; padding: 22px 30px; }
.mt-logo { font-family: var(--esp-display); letter-spacing: -.055em; }
.mt-logo span { color: var(--esp-periwinkle); }
.mt-main { max-width: 820px; padding-top: 56px; }
.mt-hero {
  margin: 0 -32px;
  padding: 46px 32px 42px;
  border: 1px solid #e0e5f3;
  border-radius: 24px;
  background: radial-gradient(28rem 19rem at 88% 0%, rgba(185,239,96,.16), transparent 68%), #fbfcff;
}
.mt-hero .ds-eyebrow { color: var(--esp-lime-ink); }
.mt-hero h1 { font-family: var(--esp-display); letter-spacing: -.06em; }
.mt-proof { margin: 42px 0 0; }
.mt-proof-head { display: grid; gap: 4px; margin-bottom: 14px; }
.mt-proof-head .ds-eyebrow { color: var(--esp-lime-ink); }
.mt-proof-head strong { font-family: var(--esp-display); font-size: 1.25rem; letter-spacing: -.035em; }
.mt-proof-head small, .mt-proof-foot { color: var(--esp-muted); font-size: .82rem; }
.mt-proof-sheet {
  overflow: hidden;
  border: 1px solid #d8e0f4;
  border-radius: 21px;
  background: linear-gradient(145deg, #f8f9ff, #fff 66%, #f7fce8);
  box-shadow: var(--esp-shadow-soft);
}
.mt-proof-bar {
  display: flex;
  align-items: center;
  gap: 5px;
  min-height: 42px;
  padding: 0 17px;
  border-bottom: 1px solid #dde4f4;
  color: #7e8aa8;
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: .58rem;
  letter-spacing: .09em;
  text-transform: uppercase;
}
.mt-proof-bar > span { width: 6px; height: 6px; background: #d1d8ea; border-radius: 50%; }
.mt-proof-bar b { margin: 0 auto; font-weight: 500; }
.mt-proof-bar em { color: var(--esp-lime-ink); font-style: normal; }
.mt-proof-bar em::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 4px; border-radius: 50%; background: var(--esp-lime); }
.mt-proof-body { position: relative; padding: 27px; }
.mt-proof-case small,
.mt-proof-reading small,
.mt-proof-reading aside small { display: block; color: #7e8aa8; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: .6rem; letter-spacing: .08em; }
.mt-proof-case strong { display: block; margin-top: 5px; color: var(--esp-navy); font-family: var(--esp-display); font-size: 1.18rem; letter-spacing: -.04em; }
.mt-proof-score { position: absolute; top: 26px; right: 27px; display: flex; align-items: baseline; gap: 4px; padding: 8px 10px; border: 1px solid #d7e8ac; border-radius: 10px; background: #f5fbe7; color: var(--esp-lime-ink); }
.mt-proof-score b { font-family: var(--esp-display); font-size: 1.6rem; letter-spacing: -.055em; }
.mt-proof-score span { font-size: .62rem; font-weight: 700; }
.mt-proof-reading { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(180px, .8fr); gap: 15px; margin-top: 22px; }
.mt-proof-reading > div,
.mt-proof-reading aside { border: 1px solid #dce3f4; border-radius: 15px; background: rgba(255,255,255,.83); padding: 16px; }
.mt-proof-reading p { max-width: none; margin: 9px 0 0; color: #65718c; font-size: .76rem; line-height: 1.56; }
.mt-proof-reading mark { color: #5668c5; background: #e9eaff; border-radius: 3px; padding: 1px 3px; }
.mt-proof-reading mark.is-focus { color: #5a3d83; background: #f0dcff; }
.mt-proof-reading aside { background: linear-gradient(145deg, #fff, #f9fdeb); }
.mt-proof-reading aside strong { display: block; margin-top: 8px; color: var(--esp-navy); font-family: var(--esp-display); font-size: .9rem; letter-spacing: -.025em; }
.mt-proof-reading aside > b { display: block; margin-top: 7px; color: #6174db; font-family: var(--esp-display); font-size: 1.5rem; letter-spacing: -.05em; }
.mt-proof-reading aside > b span { color: #77839e; font-family: var(--esp-ui); font-size: .64rem; letter-spacing: 0; }
.mt-proof-reading aside p { color: #74805f; }
.mt-proof-tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; margin-top: 13px; }
.mt-proof-tabs span { display: grid; gap: 2px; place-items: center; min-height: 44px; border: 1px solid #dde4f3; border-radius: 10px; color: #71809f; font-size: .62rem; font-weight: 700; }
.mt-proof-tabs span b { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: .55rem; }
.mt-proof-tabs .is-active { border-color: #91a1f0; box-shadow: inset 0 0 0 2px #dbe1ff; color: #596dcd; background: #f8f9ff; }
.mt-proof-foot { margin-top: 10px; text-align: center; }
.mt-sec { padding: 50px 0; }
.mt-sec h2 { font-family: var(--esp-display); letter-spacing: -.04em; }
.mt-card { border-color: var(--esp-line); border-radius: 18px; background: #fff; }
.mt-card--forte { border-color: #c9d2fb; box-shadow: var(--esp-shadow-soft); }
.mt-status { border-color: #dae4bd; border-left-color: var(--esp-lime); background: #fbfdf5; }
.mt-cta { padding-top: 62px; }
.mt-cta h2 { font-family: var(--esp-display); letter-spacing: -.045em; }
.mt-cta .ds-btn--primary { color: #fff; background: var(--esp-navy); border-radius: 999px; }
.mt-foot { max-width: 820px; }

/* ── Repescagem: página de serviço, não de impulso ────────────────────── */
.rp-body .rp-article { padding-top: 136px; }
.rp-body .rp-article .pz-container { max-width: 770px; }
.rp-body .rp-h1,
.rp-body .rp-article h2 { font-family: var(--esp-display); letter-spacing: -.05em; color: var(--esp-ink); }
.rp-body .rp-h1 { font-size: clamp(2.1rem, 4.6vw, 3.4rem); line-height: 1.06; }
.rp-body .rp-lead,
.rp-body .rp-article p,
.rp-body .rp-list li,
.rp-body .rp-tl-desc { color: #626d83; }
.rp-body .rp-tldr {
  border: 1px solid #dce4f5;
  background: linear-gradient(130deg, #f4f6ff, #fbfcff);
  border-radius: 20px;
}
.rp-body .rp-tldr h2,
.rp-body .rp-tl-date,
.rp-body .rp-oab-link { color: #5f70cb !important; }
.rp-body .rp-cta-inline { border-color: #dbe4bd; background: #fbfdf5; border-radius: 19px; }
.rp-body .rp-cta-block { background: radial-gradient(32rem 18rem at 50% 0%, rgba(125,141,225,.31), transparent 72%), var(--esp-navy); border-radius: 24px; }
/* O bloco acima é escuro, mas a regra da linha 493 pinta TODO h2 do artigo com
   --esp-ink. Resultado até 05/08: o título do último CTA da /repescagem saía
   quase-preto (#202638) sobre navy (#1d2746) — invisível na prática, e é o último
   ponto de conversão da página. A classe .pz-h2-light do HTML não dava conta: um
   seletor de classe só (0,1,0) perde para .rp-body .rp-article h2 (0,2,1). */
.rp-body .rp-cta-block h2 { color: #fff; }

/* 06/08 — o resto do bloco escuro tinha a MESMA doença do h2 acima, e ninguém tinha
   olhado além do título. Os dois botões, que são o último ponto de conversão das três
   páginas .rp-body (/repescagem, e os dois guias):

   • O ghost saía com contraste 1.00 — literalmente invisível. repescagem.css pede
     `background: transparent; color: #fff` no bloco escuro (0,2,0), mas
     `.passe-body .pz-btn-ghost` daqui também é (0,2,0) e este arquivo carrega DEPOIS.
     Empate de especificidade decide pela ordem: o fundo branco-72% deste arquivo
     vencia e o color:#fff de lá sobrevivia. Texto branco em pílula branca.
   • O primary ficava navy sobre navy: `.passe-body .pz-btn-primary` pinta o fundo de
     --esp-navy, que é exatamente a cor do bloco. O texto era legível, mas o botão
     não existia — lia como link. No escuro o primary tem de inverter, que é o mesmo
     que a /passe já faz no bloco final dela (.pz-final .pz-btn-primary em passe.css).
   • O kicker vinha com a tinta lima de fundo claro (3.14) mesmo com .pz-kicker-light
     no HTML: classe só (0,1,0) contra .passe-body .pz-kicker (0,2,0).

   Tudo escopado em (0,3,0) para vencer os dois lados sem !important e sem tocar em
   como esses botões se comportam no resto do site. */
.rp-body .rp-cta-block .pz-btn-primary { background: #fff; color: var(--esp-navy); box-shadow: 0 12px 30px rgba(8,14,32,.34); }
.rp-body .rp-cta-block .pz-btn-primary:hover { background: #fff; color: var(--esp-navy); }
.rp-body .rp-cta-block .pz-btn-ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,.42); }
.rp-body .rp-cta-block .pz-btn-ghost:hover { background: rgba(255,255,255,.10); border-color: #fff; color: #fff; }
.rp-body .rp-cta-block .pz-kicker { color: #cdd8f5; }

/* A .rp-note é o aviso de "conteúdo informativo, não é orientação jurídica" das três
   páginas editoriais. Ficava em 4.36 — abaixo de AA, em itálico e corpo menor, ou seja,
   o texto mais difícil de ler da página é justamente a ressalva que existe para ser
   lida. Escurecido só aqui (a token --cinza-texto continua servindo o resto do site);
   agora 5.10 no branco e 4.97 sobre o bege do CTA inline. */
.rp-body .rp-note { color: #646e86 !important; }

/* ── Entrada e privacidade ────────────────────────────────────────────── */
.app-gate {
  background:
    linear-gradient(90deg, rgba(93,113,214,.13) 1px, transparent 1px) 0 0 / 80px 100%,
    linear-gradient(180deg, #f7f8fd 0%, #f1f4fb 100%);
}
.app-gate-card::before { content: none; }
.app-gate-card h1 { font-family: var(--esp-display); font-size: var(--esp-type-heading); letter-spacing: var(--esp-title-tracking); }
.app-gate-btn { background: var(--esp-navy); }
.app-gate-btn:hover { background: #2b3967; }

body.priv-body {
  --font: var(--esp-ui);
  --bg-warm: var(--esp-canvas);
  --surface: var(--esp-paper-reading);
  --fg: var(--esp-ink);
  --fg-soft: var(--esp-muted);
  --borda: var(--esp-line);
  --accent: var(--esp-periwinkle);
  --accent-strong: #5e70cb;
  background: radial-gradient(40rem 30rem at 50% -13rem, rgba(125,141,225,.17), transparent 66%), var(--esp-canvas);
}
body.priv-body .priv-wrap { max-width: 780px; padding-top: 30px; }
body.priv-body .priv-logo { font-family: var(--esp-display); letter-spacing: -.055em; }
body.priv-body .priv-logo span { color: var(--esp-periwinkle); }
body.priv-body .priv-card { border-color: var(--esp-line); border-radius: 22px; padding: 34px 36px; box-shadow: var(--esp-shadow-soft); }
body.priv-body h1 { font-size: clamp(2rem, 4vw, 2.55rem); letter-spacing: -.055em; }
body.priv-body h2 { font-size: 1.15rem; letter-spacing: -.025em; padding-top: 5px; }

/* ── Navegação de páginas públicas ────────────────────────────────────── */
/* 26/08 — aqui havia `border-radius: 999px` na .header-pill da /passe e da
   /repescagem, e ele NUNCA fez diferença fechado: com 62px de altura o
   navegador satura o raio em metade do lado, ou seja 31px — o mesmo que os
   44px da regra base entregam (saturam em 30px). Mas o cabeçalho cresce para
   ~232px quando o menu mobile abre, e aí os 999px saturam em 116px: o menu
   inteiro virava uma elipse por cima do texto do hero. A home nunca teve o
   problema porque não carrega este arquivo.

   Removido em vez de condicionado ao estado aberto: fechado ele é no-op, então
   não há aparência a preservar. */

/* ── Responsividade e redução de movimento ────────────────────────────── */
@media (max-width: 820px) {
  .app-main { padding: 28px 18px calc(88px + env(safe-area-inset-bottom)); }
  .app-sidebar { width: auto; }
  /* A navegação fixa precisa ser uma superfície opaca: o conteúdo fica atrás
     dela durante a rolagem e não deve aparecer por transparência/blur. */
  .app-bottombar { background: #fafaf8; border-color: var(--esp-line); backdrop-filter: none; }
  .app-bottombar .app-nav-item.active { color: #596ccb; }
  .app-task { padding: 25px 23px; border-radius: 21px; }
  .app-task-title { font-size: 1.45rem; }
  .ma-title { font-size: 2.1rem; }
  .ma-foco { align-items: flex-start; }
  html.esp-corrigir-page .esp-root { padding: 32px 16px 82px; }
  html.esp-corrigir-page .esp-wrap { padding: 21px 17px; border-radius: 20px; }
  html.esp-corrigir-page .esp-intro-card { margin-bottom: 18px; padding-bottom: 19px; }
  html.esp-corrigir-page .esp-full-title { font-size: 2rem; }
  .passe-body .pz-hero { padding-top: 121px; }
  .mt-main { padding: 34px 20px 72px; }
  .mt-hero { margin: 0; padding: 31px 23px; border-radius: 20px; }
  .mt-proof-body { padding: 20px 15px; }
  .mt-proof-score { top: 19px; right: 15px; }
  .mt-proof-reading { grid-template-columns: 1fr; }
  .mt-top { padding: 20px; }
  .rp-body .rp-article { padding-top: 112px; }
  body.priv-body .priv-card { padding: 28px 23px; }
}

@media (max-width: 560px) {
  .app-greet h1 { font-size: 2rem; }
  .app-task-copy { min-width: 0; }
  .app-task-cta { width: 100%; justify-content: center; }
  .ma-cards { grid-template-columns: 1fr 1fr; }
  .ma-card:last-child:nth-child(odd) { grid-column: span 2; }
  .ma-panel { padding: 20px 17px; }
  .passe-body .pz-h1 { font-size: 2.45rem; }
  .passe-body .pz-section { padding: 62px 0; }
  .passe-body .pz-buy { border-radius: 0; }
  .rp-body .rp-h1 { font-size: 2.35rem; }
}

@media (prefers-reduced-motion: reduce) {
  .app-task,
  .app-task-cta,
  .app-daily,
  .app-panel,
  .app-step,
  .ma-card,
  .pz-step,
  .pz-btn,
  .esp-btn { transition: none !important; }
}