/* Hallmark · macrostructure: Narrative Workflow · tone: utilitário · anchor hue: teal (190°)
 * genre: modern-minimal, superfície escura · theme: sistema do produto (apps/web/src/theme/tokens.css)
 *   A landing é a única superfície do produto travada em escuro (data-theme="dark" no <html>).
 *   O painel e o app seguem a escolha do usuário; aqui o tema é decisão de peça de marketing.
 * nav: N-sticky edge-aligned (knobs: sticky=sim, fundo só depois de rolar, cta=solid)
 * hero: H-centered + moldura de navegador desenhada em HTML (nunca captura de tela)
 * sections: prova em números · F4 step sequence · bento 5 · pares de dados tabulares ·
 *           F3 tabular spec sheet · planos (preço declarado como indefinido) · bloco honesto
 * CTA: C2 inline form (knobs: fields=1, submit=end-of-row, helper=below)
 * enrichment: Tier-B SVG feito à mão (o ciclo) · brilho radial · sem foto e sem screenshot
 * motion: 2 primitivas (revelação por estágio, estados de foco/hover) + 1 estado (barra ao rolar)
 */

*,
*::before,
*::after { box-sizing: border-box; }

html,
body {
  margin: 0;
  padding: 0;
  overflow-x: clip; /* nunca hidden — hidden quebra position: sticky em descendentes */
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 5.5rem; /* a barra fixa não pode cobrir o título da âncora */
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  background: var(--color-paper-sunken);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--text-body);
  font-weight: var(--weight-normal);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  margin: 0;
  font-weight: var(--weight-bold);
  line-height: 1.15;
  letter-spacing: -0.02em;
  text-wrap: balance;
  overflow-wrap: anywhere; /* display longo não estoura a viewport em 320px */
  min-width: 0;
}

p { margin: 0; }
ol, ul { margin: 0; padding: 0; list-style: none; }

:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 3px;
  border-radius: var(--radius-control);
  /* o anel nunca anima — precisa aparecer no instante do foco */
}

.mono {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

.rotulo {
  font-family: var(--font-mono);
  font-size: var(--text-meta);
  font-weight: var(--weight-bold);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-ink-muted);
}

.oculto-visual {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.faixa { padding-inline: var(--page-gutter); }

.limite {
  max-width: 72rem;
  margin-inline: auto;
}

/* Brilho radial atrás do herói e do CTA. É a única cor não-token da página, e existe
   como gradiente derivado do acento — não como hex solto. */
.brilho {
  position: absolute;
  inset-inline: 0;
  top: -12rem;
  height: 42rem;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(60% 50% at 50% 30%, color-mix(in oklab, var(--color-accent) 22%, transparent) 0%, transparent 70%),
    radial-gradient(90% 60% at 50% 0%, color-mix(in oklab, var(--color-accent) 9%, transparent) 0%, transparent 65%);
  filter: blur(8px);
}

.brilho--cta {
  top: -6rem;
  height: 24rem;
  opacity: 0.75;
}

/* ============================================================
   N-sticky · barra alinhada às bordas
   No topo ela flutua; ao rolar ganha fundo e régua. O vazio entre
   marca e CTA continua sendo o desenho — os links vivem no meio.
   ============================================================ */

.nav {
  position: sticky;
  top: 0;
  z-index: 20;
  transition: background-color var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out);
  border-bottom: 1px solid transparent;
}

.nav--rolado {
  background: color-mix(in oklab, var(--color-paper-sunken) 82%, transparent);
  backdrop-filter: blur(12px);
  border-bottom-color: var(--color-rule-soft);
}

.nav__interno {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  padding-block: var(--space-md);
}

.marca {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  font-family: var(--font-mono);
  font-size: var(--text-label);
  font-weight: var(--weight-bold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-ink);
  text-decoration: none;
  flex: none;
}

.marca span { color: var(--color-accent); }

.marca__glifo {
  width: 1.25rem;
  height: 1.25rem;
  color: var(--color-accent);
  flex: none;
}

.nav__links {
  display: flex;
  gap: var(--space-lg);
  font-size: var(--text-label);
}

.nav__links a {
  color: var(--color-ink-muted);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out);
}

.nav__links a:hover { color: var(--color-ink); }

/* "Entrar" existe porque a raiz do domínio agora é ESTA página: o professor que digita só o
   host precisa de uma porta para o painel sem decorar /login. Fica ao lado do CTA do beta,
   discreto — quem já é cliente sabe onde clicar; quem não é, lê a página. */
.nav__acoes {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  flex: none;
}

.nav__entrar {
  font-size: var(--text-label);
  color: var(--color-ink-muted);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out);
}

.nav__entrar:hover { color: var(--color-ink); }

/* Abaixo de 60rem os links do meio saem: com a marca e o CTA a barra já cumpre
   a função, e um menu sanfona para quatro âncoras é peso sem retorno. */
@media (max-width: 60rem) {
  .nav__links { display: none; }
}

/* ============================================================
   Botões
   ============================================================ */

.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  min-height: 2.75rem;
  padding: 0 var(--space-lg);
  border-radius: var(--radius-control);
  font: inherit;
  font-size: var(--text-label);
  font-weight: var(--weight-bold);
  text-decoration: none;
  white-space: nowrap; /* CTA nunca quebra em duas linhas */
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out);
}

.btn-sm { min-height: 2.25rem; padding-inline: var(--space-md); }

.btn-contorno {
  background: transparent;
  color: var(--color-ink);
  border: 1px solid var(--color-rule);
}

.btn-contorno:hover { border-color: var(--color-accent); color: var(--color-accent); }
.btn-contorno:active { background: var(--color-accent-soft); }

.btn-solido {
  background: var(--color-accent);
  color: var(--color-accent-ink);
  border: 1px solid var(--color-accent);
}

.btn-solido:hover { background: color-mix(in oklab, var(--color-accent) 88%, white); }
.btn-solido:active { transform: translateY(1px); }
.btn-solido:disabled { opacity: 0.55; cursor: not-allowed; transform: none; }

/* ============================================================
   Herói centrado
   ============================================================ */

.heroi {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-lg);
  padding-block: var(--space-3xl) var(--space-2xl);
}

/* :not(.brilho) é obrigatório: sem ele esta regra vence o position:absolute do brilho
   (mesma especificidade, declarada depois) e o gradiente vira 42rem de fluxo. */
.heroi > *:not(.brilho) { position: relative; z-index: 1; }

.selo {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-xs) var(--space-md) var(--space-xs) var(--space-xs);
  border: 1px solid var(--color-rule);
  border-radius: 999px;
  background: color-mix(in oklab, var(--color-paper) 70%, transparent);
  font-size: var(--text-label);
  color: var(--color-ink-muted);
}

.selo__tag {
  font-family: var(--font-mono);
  font-size: var(--text-meta);
  font-weight: var(--weight-bold);
  letter-spacing: 0.12em;
  padding: 2px var(--space-sm);
  border-radius: 999px;
  background: var(--color-accent);
  color: var(--color-accent-ink);
}

.heroi h1 {
  font-size: var(--text-display);
  letter-spacing: -0.035em;
  max-width: 18ch;
}

.heroi h1 em {
  font-style: normal; /* cabeçalho é sempre romano — itálico em título é tell */
  color: var(--color-accent);
}

.heroi__lede {
  font-size: var(--text-subheading);
  line-height: 1.5;
  color: var(--color-ink-muted);
  max-width: 46rem;
}

.heroi__acoes {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-md);
  margin-top: var(--space-sm);
}

/* ============================================================
   Moldura de navegador com o painel desenhado em HTML
   ============================================================ */

.moldura {
  width: 100%;
  margin: var(--space-2xl) 0 0;
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-overlay);
  background: var(--color-paper);
  overflow: hidden;
  box-shadow: 0 24px 60px -20px rgba(0, 0, 0, 0.65);
  text-align: left;
}

.moldura__barra {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  border-bottom: 1px solid var(--color-rule-soft);
  background: var(--color-paper-inset);
}

.moldura__ponto {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--color-rule);
  flex: none;
}

.moldura__url {
  margin-inline: auto;
  padding: 2px var(--space-md);
  border-radius: var(--radius-control);
  background: var(--color-paper-sunken);
  color: var(--color-ink-muted);
  font-size: var(--text-meta);
  max-width: 60%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.moldura__tela {
  display: grid;
  grid-template-columns: 11rem minmax(0, 1fr);
  min-height: 20rem;
}

.moldura__legenda {
  padding: var(--space-md);
  border-top: 1px solid var(--color-rule-soft);
  background: var(--color-paper-inset);
  color: var(--color-ink-muted);
  font-size: var(--text-label);
}

.app-lado {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  padding: var(--space-md);
  border-right: 1px solid var(--color-rule-soft);
  background: var(--color-paper-inset);
}

.app-lado__marca {
  font-size: var(--text-meta);
  font-weight: var(--weight-bold);
  letter-spacing: 0.14em;
  color: var(--color-accent);
  padding-bottom: var(--space-sm);
}

.app-lado__item {
  padding: var(--space-sm);
  border-radius: var(--radius-control);
  font-size: var(--text-label);
  color: var(--color-ink-muted);
}

.app-lado__item--ativo {
  background: var(--color-accent-soft);
  color: var(--color-accent);
  font-weight: var(--weight-bold);
}

.app-corpo {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
  padding: var(--space-lg);
  min-width: 0;
}

.app-topo {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-md);
  flex-wrap: wrap;
}

.app-topo b { font-size: var(--text-heading); }
.app-topo span { font-size: var(--text-meta); color: var(--color-ink-muted); }

/* Faixa dividida por fios: a mesma decisão do painel real — quatro indicadores
   são UMA leitura ("como está a semana"), não quatro cartões soltos. */
.app-faixa {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border: 1px solid var(--color-rule-soft);
  border-radius: var(--radius-surface);
  background: var(--color-paper-inset);
  overflow: hidden;
}

.app-stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--space-md);
  border-left: 1px solid var(--color-rule-soft);
  min-width: 0;
}

.app-stat:first-child { border-left: 0; }

.app-stat__num {
  font-size: var(--text-stat);
  font-weight: var(--weight-bold);
  line-height: 1.1;
}

.app-stat__num--alerta { color: var(--color-erro); }

.app-stat__rot {
  font-size: var(--text-meta);
  color: var(--color-ink-muted);
  line-height: 1.3;
}

.app-cartao {
  border: 1px solid var(--color-rule-soft);
  border-radius: var(--radius-surface);
  background: var(--color-paper-inset);
  overflow: hidden;
}

.app-cartao__cabeca {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-md);
  flex-wrap: wrap;
  padding: var(--space-md);
  border-bottom: 1px solid var(--color-rule-soft);
}

.app-cartao__cabeca span { font-size: var(--text-meta); color: var(--color-ink-muted); }

.app-tabela {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-label);
}

.app-tabela td {
  padding: var(--space-sm) var(--space-md);
  border-bottom: 1px solid var(--color-rule-soft);
  color: var(--color-ink-muted);
}

.app-tabela tr:last-child td { border-bottom: 0; }
.app-tabela td:first-child { color: var(--color-ink); }
.app-tabela td:not(:first-child) { text-align: right; }
/* Seletor com o td junto: `.app-tabela td` (0,2,0) vence a classe sozinha (0,1,0)
   e o alerta sairia com a tinta de apoio. */
.app-tabela td.app-cel--alerta { color: var(--color-erro); }

/* ============================================================
   Faixa de provas — onde um template poria logotipos de clientes
   ============================================================ */

.provas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: var(--space-lg);
  padding-block: var(--space-2xl);
  border-block: 1px solid var(--color-rule-soft);
}

.provas > div {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  min-width: 0;
}

.provas b {
  font-size: var(--text-stat);
  font-weight: var(--weight-bold);
  color: var(--color-accent);
  line-height: 1;
}

.provas span { font-size: var(--text-label); color: var(--color-ink-muted); }

/* ============================================================
   Seções
   ============================================================ */

.secao {
  padding-block: var(--space-3xl);
  border-top: 1px solid var(--color-rule-soft);
}

.secao:first-of-type { border-top: 0; }

.secao__cabeca {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  max-width: var(--measure);
  margin-bottom: var(--space-2xl);
}

.secao__cabeca--centro {
  max-width: 44rem;
  margin-inline: auto;
  text-align: center;
}

.secao__cabeca h2 { font-size: var(--text-display-s); }
.secao__cabeca p { color: var(--color-ink-muted); }

/* ============================================================
   F4 · Sequência de estágios — o ciclo
   ============================================================ */

.funciona__topo {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: var(--space-3xl);
  align-items: center;
}

.funciona__topo .secao__cabeca { margin-bottom: 0; }

.funciona__figura { margin: 0; min-width: 0; }
.funciona__figura svg { width: 100%; height: auto; display: block; }

/* Traço e tinta do diagrama vêm dos tokens — o SVG nunca carrega cor literal. */
.diagrama__traco { stroke: var(--color-rule); }
.diagrama__no { fill: var(--color-paper); stroke: var(--color-accent); }
.diagrama__rotulo {
  fill: var(--color-ink-muted);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
}
.diagrama__numero {
  fill: var(--color-accent);
  color: var(--color-accent); /* a seta do ciclo usa currentColor */
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
}

.estagios {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xl);
  margin-top: var(--space-2xl);
}

.estagio {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
  padding-top: var(--space-lg);
  border-top: 2px solid var(--color-rule);
}

.estagio__titulo {
  display: flex;
  align-items: baseline;
  gap: var(--space-md);
  font-size: var(--text-heading);
  min-width: 0;
}

.estagio__numero {
  font-family: var(--font-mono);
  font-size: var(--text-label);
  font-weight: var(--weight-bold);
  color: var(--color-accent);
  font-variant-numeric: tabular-nums;
  flex: none;
}

.estagio__corpo {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-lg) var(--space-3xl);
  align-items: start;
  min-width: 0;
}

.estagio__detalhes {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.estagio__detalhes li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-sm);
  font-size: var(--text-label);
  color: var(--color-ink);
}

.estagio__detalhes li::before {
  content: "";
  width: 6px;
  height: 6px;
  margin-top: 0.55em;
  border-radius: 50%;
  background: var(--color-accent);
}

.estagio__nota {
  background: var(--color-paper);
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-surface);
  padding: var(--space-md);
  box-shadow: var(--shadow-raised);
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.estagio__nota b { font-weight: var(--weight-bold); }
.estagio__nota span { font-size: var(--text-label); color: var(--color-ink-muted); }

/* A volta do ciclo: o estágio 4 devolve ao 1, e isso é dito no desenho. */
.ciclo-volta {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  margin-top: var(--space-2xl);
  padding-top: var(--space-lg);
  border-top: 2px solid var(--color-accent);
  color: var(--color-accent);
  font-size: var(--text-label);
  font-weight: var(--weight-bold);
}

/* ============================================================
   Bento de recursos
   ============================================================ */

.bento {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-md);
}

.bento__cartao {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  padding: var(--space-lg);
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-overlay);
  background: var(--color-paper);
  box-shadow: var(--shadow-raised);
  min-width: 0;
  transition: border-color var(--dur-base) var(--ease-out);
}

.bento__cartao:hover { border-color: color-mix(in oklab, var(--color-accent) 55%, var(--color-rule)); }

.bento__cartao--largo { grid-column: span 2; }

.bento__cartao h3 { font-size: var(--text-subheading); }
.bento__cartao p { color: var(--color-ink-muted); font-size: var(--text-label); }

.bento__amostra {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-top: auto;
  padding-top: var(--space-md);
}

.pastilha {
  padding: var(--space-xs) var(--space-sm);
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-control);
  background: var(--color-paper-inset);
  font-family: var(--font-mono);
  font-size: var(--text-meta);
  color: var(--color-ink-muted);
}

.pastilha--alta {
  border-color: color-mix(in oklab, var(--color-erro) 60%, transparent);
  color: var(--color-erro);
}

.pastilha--media {
  border-color: color-mix(in oklab, var(--color-accent) 55%, transparent);
  color: var(--color-accent);
}

/* ============================================================
   Pares de dados tabulares
   ============================================================ */

.dados {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
  gap: var(--space-md);
}

.dados__cartao {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  padding: var(--space-lg);
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-overlay);
  background: var(--color-paper);
  box-shadow: var(--shadow-raised);
  min-width: 0;
}

.dados__cartao header { display: flex; flex-direction: column; gap: var(--space-xs); }
.dados__cartao h3 { font-size: var(--text-subheading); }
.dados__cartao header p { font-size: var(--text-label); color: var(--color-ink-muted); }

.dados__destaque {
  display: flex;
  align-items: baseline;
  gap: var(--space-md);
  flex-wrap: wrap;
  padding-bottom: var(--space-md);
  border-bottom: 1px solid var(--color-rule-soft);
}

.dados__destaque b {
  font-size: var(--text-stat);
  font-weight: var(--weight-bold);
  color: var(--color-accent);
  line-height: 1;
}

.dados__destaque span { font-size: var(--text-label); color: var(--color-ink-muted); }

.dados__tabela {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-label);
  text-align: left;
}

.dados__tabela th {
  font-family: var(--font-mono);
  font-size: var(--text-meta);
  font-weight: var(--weight-bold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-ink-muted);
  padding-bottom: var(--space-sm);
  border-bottom: 1px solid var(--color-rule);
}

.dados__tabela td {
  padding: var(--space-sm) 0;
  border-bottom: 1px solid var(--color-rule-soft);
  color: var(--color-ink-muted);
}

.dados__tabela td:first-child { color: var(--color-ink); }
.dados__tabela th:not(:first-child),
.dados__tabela td:not(:first-child) { text-align: right; }
.dados__tabela tr:last-child td { border-bottom: 0; }

/* Mesmo motivo do bloco acima: precisa do td para vencer `.dados__tabela td`. */
.dados__tabela td.cel--ok { color: var(--color-accent); font-weight: var(--weight-bold); }
.dados__tabela td.cel--alerta { color: var(--color-erro); font-weight: var(--weight-bold); }

/* ============================================================
   F3 · Ficha técnica tabular
   ============================================================ */

.ficha-rolagem { overflow-x: auto; }

.ficha {
  width: 100%;
  min-width: 34rem;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
  text-align: left;
}

.ficha caption {
  text-align: left;
  color: var(--color-ink-muted);
  font-size: var(--text-label);
  padding-bottom: var(--space-md);
}

.ficha th,
.ficha td {
  padding: var(--space-md) var(--space-md) var(--space-md) 0;
  border-bottom: 1px solid var(--color-rule-soft);
  vertical-align: top;
}

.ficha thead th {
  font-size: var(--text-meta);
  font-family: var(--font-mono);
  font-weight: var(--weight-bold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-ink-muted);
  border-bottom-color: var(--color-rule);
}

.ficha tbody th {
  font-weight: var(--weight-bold);
  width: 34%;
}

.ficha td:last-child {
  color: var(--color-ink-muted);
  font-size: var(--text-label);
}

.onde {
  font-family: var(--font-mono);
  font-size: var(--text-meta);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-ink-muted);
  white-space: nowrap;
}

/* ============================================================
   Planos — preço declarado como indefinido, de propósito
   ============================================================ */

.planos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
  gap: var(--space-md);
  align-items: start;
  max-width: 58rem;
  margin-inline: auto;
}

.plano {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  padding: var(--space-xl);
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-overlay);
  background: var(--color-paper);
  box-shadow: var(--shadow-raised);
  min-width: 0;
}

.plano--destaque {
  border-color: var(--color-accent);
  background:
    linear-gradient(180deg, color-mix(in oklab, var(--color-accent) 8%, transparent) 0%, transparent 40%),
    var(--color-paper);
}

.plano__fita {
  position: absolute;
  top: 0;
  right: var(--space-xl);
  transform: translateY(-50%);
  padding: 2px var(--space-sm);
  border-radius: 999px;
  background: var(--color-accent);
  color: var(--color-accent-ink);
  font-family: var(--font-mono);
  font-size: var(--text-meta);
  font-weight: var(--weight-bold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.plano h3 { font-size: var(--text-heading); }
.plano__quem { color: var(--color-ink-muted); font-size: var(--text-label); }

.plano__preco {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  padding-block: var(--space-sm);
  border-block: 1px solid var(--color-rule-soft);
}

.plano__preco span {
  font-size: var(--text-stat);
  font-weight: var(--weight-bold);
  line-height: 1.1;
}

.plano__preco small { font-size: var(--text-meta); color: var(--color-ink-muted); }

.plano__btn { justify-content: center; }

.plano__lista {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.plano__lista li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-sm);
  font-size: var(--text-label);
  color: var(--color-ink-muted);
}

.plano__lista li::before {
  content: "";
  width: 6px;
  height: 6px;
  margin-top: 0.55em;
  border-radius: 50%;
  background: var(--color-accent);
}

/* ============================================================
   Bloco honesto — o que ainda não existe
   ============================================================ */

.honesto {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: var(--space-lg);
}

.honesto > div {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  padding-top: var(--space-md);
  border-top: 2px solid var(--color-rule);
}

.honesto h3 { font-size: var(--text-subheading); }
.honesto p { color: var(--color-ink-muted); font-size: var(--text-label); }

/* ============================================================
   C2 · Formulário como CTA
   ============================================================ */

.beta {
  position: relative;
  overflow: hidden;
  background: var(--color-paper);
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-overlay);
  padding: clamp(var(--space-lg), 5vw, var(--space-3xl));
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-lg);
  box-shadow: var(--shadow-raised);
}

.beta > *:not(.brilho) { position: relative; z-index: 1; }

.beta__cabeca { display: flex; flex-direction: column; gap: var(--space-sm); max-width: 40rem; }
.beta__cabeca h2 { font-size: var(--text-display-s); }
.beta__cabeca p { color: var(--color-ink-muted); }

.ajuda {
  font-size: var(--text-meta);
  color: var(--color-ink-muted);
  max-width: 32rem;
}

/* ============================================================
   Ft · Colofão denso
   ============================================================ */

.rodape {
  border-top: 1px solid var(--color-rule-soft);
  padding-block: var(--space-xl) var(--space-2xl);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  font-family: var(--font-mono);
  font-size: var(--text-meta);
  line-height: 1.7;
  color: var(--color-ink-muted);
}

.rodape a { color: var(--color-ink-muted); }
.rodape a:hover { color: var(--color-accent); }

/* ============================================================
   Revelação por estágio — a única motion espacial da página
   ============================================================ */

.revela {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity var(--dur-base) var(--ease-out),
              transform var(--dur-base) var(--ease-out);
}

.revela.visivel {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
  .revela { opacity: 1; transform: none; }
}

/* ============================================================
   Responsivo — verificado em 320 / 375 / 414 / 768
   ============================================================ */

@media (max-width: 64rem) {
  .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bento__cartao--largo { grid-column: span 2; }
  /* São 2 cartões largos + 5 normais (9 células, 3 linhas cheias em 3 colunas). Em 2 colunas o
     5º normal sobraria sozinho antes do largo final — ele estica para fechar a linha. */
  .bento__cartao:nth-last-child(2) { grid-column: span 2; }
}

@media (max-width: 56rem) {
  .heroi { padding-block: var(--space-2xl); }

  .funciona__topo {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-2xl);
  }

  /* Texto primeiro: no celular ninguém entende um diagrama antes de saber do que se trata. */
  .funciona__figura { max-width: 20rem; margin-inline: auto; }

  .estagio__corpo {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-md);
  }

  .secao { padding-block: var(--space-2xl); }

  /* A moldura vira um recorte rolável: encolher o painel até caber deixaria o
     número do indicador ilegível, que é justamente o que a imagem existe para mostrar. */
  .moldura__tela {
    overflow-x: auto;
    display: block;
  }

  .app-lado { display: none; }
  .app-faixa { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* Nome e "há 12 dias" param de quebrar em duas linhas: a tabela passa a exceder
     e rola dentro do recorte, que é o comportamento que a moldura já anuncia. */
  .app-tabela td { white-space: nowrap; }
  .app-stat:nth-child(3) { border-left: 0; }
  .app-stat:nth-child(n + 3) { border-top: 1px solid var(--color-rule-soft); }
}

@media (max-width: 44rem) {
  .bento { grid-template-columns: minmax(0, 1fr); }
  .bento__cartao--largo { grid-column: span 1; }
}

@media (max-width: 30rem) {
  .heroi__acoes { width: 100%; }
  .heroi__acoes .btn { flex: 1 1 auto; justify-content: center; }
}