/* Ditara — landing. Só var(--…): nenhum hex aqui (tokens.css e tokens-landing.css guardam as cores). */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 72px; }
/* monitores grandes: só a moldura e o título crescem; botões, corpo e fala mantêm o tamanho */
:root { --grade-max: 80rem; }
@media (min-width: 1920px) { :root { --grade-max: 96rem; --text-display-landing: clamp(5.25rem, 3rem + 1.6vw, 6.5rem); } }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0;
  background: var(--color-fundo);
  color: var(--color-texto);
  font-family: "Inter Variable", "Inter Fallback", var(--font-ui);
  font-size: var(--text-body);
  line-height: var(--leading-body);
  font-weight: var(--weight-regular);
  font-feature-settings: "cv11", "ss03";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  accent-color: var(--color-grafite);
  caret-color: var(--color-azul);
  scrollbar-color: var(--color-borda-forte) transparent;
}
::selection { background: var(--selection); color: var(--color-texto); }
h1, h2, h3, p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; }
a { color: var(--color-azul-texto); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
strong, b { font-weight: var(--weight-medium); }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--radius-sm); }
:focus:not(:focus-visible) { outline: none; }
[hidden] { display: none !important; }

.pular {
  position: fixed; left: 16px; top: -100px; z-index: 100;
  background: var(--color-grafite); color: var(--action-ink);
  padding: 12px 16px; border-radius: var(--radius-control);
  font-size: var(--text-label); font-weight: var(--weight-medium); text-decoration: none;
}
.pular:focus { top: 8px; }

.grade { width: 100%; max-width: var(--grade-max); margin-inline: auto; padding-inline: max(16px, env(safe-area-inset-left)) max(16px, env(safe-area-inset-right)); }
@media (min-width: 768px) { .grade { padding-inline: 32px; } }

/* ---------- tipografia ---------- */
.h2 {
  font-size: var(--text-headline-landing);
  line-height: var(--leading-headline-landing);
  letter-spacing: var(--track-headline-landing);
  font-weight: var(--weight-strong);
  text-wrap: balance;
}
.h3, dt.h3 {
  font-size: var(--text-title);
  line-height: var(--leading-title);
  letter-spacing: var(--track-title);
  font-weight: var(--weight-strong);
  margin: 0;
}
.meta { font-size: var(--text-meta); line-height: var(--leading-meta); color: var(--color-apoio); font-variant-numeric: tabular-nums; }
.sub { font-size: 1.125rem; line-height: 1.7rem; color: var(--color-apoio); max-width: 56ch; margin-top: 16px; text-wrap: pretty; }
.apoio { color: var(--color-apoio); }
.ponto { color: var(--color-azul); }
.sobretitulo {
  font-size: var(--text-caption); line-height: var(--leading-caption);
  letter-spacing: var(--track-caption); text-transform: uppercase; font-weight: var(--weight-medium);
  color: var(--color-apoio);
}

/* ---------- botões (grafite é a única cor de botão) ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: var(--hit-min); padding: 0 20px;
  border: 1px solid transparent; border-radius: var(--radius-control);
  font-size: var(--text-label); line-height: var(--leading-label); font-weight: var(--weight-medium);
  text-decoration: none; white-space: nowrap;
  transition: background-color var(--dur-feedback) var(--ease-estado), transform var(--dur-feedback) var(--ease-estado), border-color var(--dur-feedback) var(--ease-estado);
}
.btn:active { transform: scale(0.97); }
.btn svg, .btn-mini svg, .cadeado { fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.btn-primario { background: var(--color-grafite); color: var(--action-ink); }
.btn-primario:hover { background: var(--color-grafite-hover); }
.btn-secundario { background: var(--color-superficie); color: var(--color-texto); border-color: var(--border-control); }
.btn-secundario:hover { background: var(--color-superficie-2); }
.btn-secundario .meta { color: var(--color-apoio); }
.btn-grande { min-height: 48px; padding: 0 24px; font-size: var(--text-body); }
.btn-cheio { width: 100%; }
.btn[disabled] { background: var(--color-superficie-2); color: var(--color-apoio); border-color: var(--color-borda); cursor: default; transform: none; }
.btn-mini {
  display: inline-flex; align-items: center; gap: 6px; min-height: var(--hit-min); padding: 0 12px; margin-left: auto;
  border: 0; border-radius: var(--radius-control); background: transparent; color: var(--color-apoio);
  font-size: var(--text-label); font-weight: var(--weight-medium);
  transition: background-color var(--dur-feedback) var(--ease-estado), color var(--dur-feedback) var(--ease-estado);
}
.btn-mini:hover { background: var(--surface-hover); color: var(--color-texto); }

/* ---------- barra superior ---------- */
.barra {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  padding-top: env(safe-area-inset-top);
  background: color-mix(in srgb, var(--color-fundo) 94%, transparent);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-estado) var(--ease-estado);
}
.barra.rolou { border-bottom-color: var(--color-borda); }
@media (min-width: 768px) { .barra { backdrop-filter: blur(8px); } }
.barra-in { max-width: var(--grade-max); margin-inline: auto; height: var(--topbar-h); padding-inline: max(16px, env(safe-area-inset-left)) max(16px, env(safe-area-inset-right)); display: flex; align-items: center; gap: 24px; }
@media (min-width: 768px) { .barra-in { padding-inline: 32px; } }
.logo { display: inline-flex; flex: none; border-radius: var(--radius-sm); }
.logo img { height: 28px; width: auto; }
.logo-escuro { display: none !important; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .logo-claro { display: none !important; }
  :root:not([data-theme="light"]) .logo-escuro { display: block !important; }
}
.barra-nav { display: none; gap: 4px; margin-left: 16px; }
.barra-nav a {
  display: inline-flex; align-items: center; min-height: var(--hit-min); padding: 0 12px;
  color: var(--color-apoio); text-decoration: none; font-size: var(--text-label); font-weight: var(--weight-medium); border-radius: var(--radius-control);
  transition: color var(--dur-feedback) var(--ease-estado), background-color var(--dur-feedback) var(--ease-estado);
}
.barra-nav a:hover { color: var(--color-texto); background: var(--surface-hover); }
.barra-acoes { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.barra-entrar {
  display: none; align-items: center; min-height: var(--hit-min); padding: 0 12px;
  color: var(--color-texto); text-decoration: none; font-size: var(--text-label); font-weight: var(--weight-medium); border-radius: var(--radius-control);
}
.barra-entrar:hover { background: var(--surface-hover); }
@media (min-width: 640px) { .barra-entrar { display: inline-flex; } }
@media (min-width: 900px) { .barra-nav { display: flex; } }

/* ---------- hero ---------- */
.hero { padding: calc(var(--topbar-h) + 32px) 0 64px; overflow-x: clip; }
.hero-grade { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); row-gap: 24px; }
.hero-h1 {
  font-size: var(--text-display-landing); line-height: var(--leading-display-landing);
  letter-spacing: var(--track-display-landing); font-weight: var(--weight-strong);
  text-wrap: balance; max-width: 15ch;
}
.hero-h1 .ponto { color: var(--color-azul); }
.hero-sub { font-size: 1.125rem; line-height: 1.7rem; color: var(--color-apoio); max-width: 46ch; text-wrap: pretty; }
.hero-acoes { display: flex; flex-direction: column; gap: 4px; margin-top: 24px; }
.hero-acoes .btn-secundario { border-color: transparent; background: transparent; text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.hero-acoes .btn-secundario:hover { background: var(--surface-hover); }
.confianca { margin-top: 16px; max-width: 56ch; text-wrap: balance; }
.fala-texto .ponto.pop { display: inline-block; animation: ponto-pop 700ms var(--ease-chegada) both; }
@media (prefers-reduced-motion: reduce) { .fala-texto .ponto.pop { animation: none; } }
.hero-esq .fala { margin-top: 40px; }
.hero-dir { margin-top: 16px; }
.dica { margin-bottom: 12px; }
@media (min-width: 640px) {
  .hero-acoes { flex-direction: row; align-items: center; gap: 12px; }
  .hero-acoes .btn-secundario { border-color: var(--border-control); background: var(--color-superficie); text-decoration: none; }
  .hero-acoes .btn-secundario:hover { background: var(--color-superficie-2); }
}
@media (min-width: 1024px) {
  .hero { padding: calc(var(--topbar-h) + 56px) 0 96px; min-height: 100svh; }
  .hero-grade { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; row-gap: 40px; }
  .hero-h1 { grid-column: 1 / 11; grid-row: 1; max-width: 17ch; }
  .hero-esq { grid-column: 1 / 7; grid-row: 2; padding-right: 24px; }
  .hero-dir { grid-column: 7 / 13; grid-row: 2; margin-top: 0; align-self: start; }
  .hero-esq .fala { margin-top: 48px; }
}

/* ---------- fala ---------- */
.fala { position: relative; }
.fala-topo { display: flex; align-items: center; gap: 16px; margin-bottom: 8px; min-height: var(--hit-min); }
.gravador { display: inline-flex; align-items: center; gap: 10px; color: var(--color-apoio); }
.gravador .led { width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex: none; transition: background-color var(--dur-estado) var(--ease-estado); }
.gravador .onda { color: inherit; }
.gravador .onda path { transform-box: fill-box; transform-origin: center; }
.cron { font-size: var(--text-label); font-weight: var(--weight-medium); font-variant-numeric: tabular-nums; min-width: 3.2ch; }
.gravador[data-estado="gravando"] { color: var(--color-gravacao-texto); }
.gravador[data-estado="gravando"] .ponto { color: var(--color-gravacao); }
.gravador[data-estado="gravando"] .onda { color: var(--color-gravacao); }
@media (prefers-reduced-motion: no-preference) {
  .gravador[data-estado="gravando"] .onda path { animation: onda 400ms var(--ease-estado) infinite alternate; }
  .gravador[data-estado="gravando"] .onda path:nth-child(2) { animation-delay: -130ms; }
  .gravador[data-estado="gravando"] .onda path:nth-child(3) { animation-delay: -260ms; }
  .gravador[data-estado="gravando"] .onda path:nth-child(4) { animation-delay: -80ms; }
  .gravador[data-estado="gravando"] .onda path:nth-child(5) { animation-delay: -200ms; }
}
@keyframes onda { from { transform: scaleY(0.35); } to { transform: scaleY(1); } }
.rotulo { font-size: var(--text-caption); line-height: var(--leading-caption); letter-spacing: var(--track-caption); text-transform: uppercase; font-weight: var(--weight-medium); color: var(--color-apoio); }

.fala-texto {
  font-family: var(--font-fala); font-style: italic; font-weight: 400;
  font-size: var(--text-fala); line-height: var(--leading-fala);
  max-width: 34em; text-wrap: pretty; hyphens: manual;
}
.fala-texto.copia { position: absolute; margin: 0; pointer-events: none; }
.fala-texto .w { opacity: 0; }
.vicio { color: var(--color-apoio); transition: color 300ms var(--ease-estado); }
.orig {
  text-decoration: underline; text-decoration-color: var(--color-azul-selecao); text-decoration-thickness: 2px; text-underline-offset: 5px;
  box-decoration-break: clone; -webkit-box-decoration-break: clone;
  padding: 0 2px; margin: 0 -2px; border-radius: 4px;
  transition: background-color var(--dur-feedback) var(--ease-estado), color var(--dur-feedback) var(--ease-estado), opacity 240ms var(--ease-estado), text-decoration-color var(--dur-feedback) var(--ease-estado);
}
.orig.levantado { opacity: 0.22; }
.orig.lig { background: var(--color-azul-selecao); color: var(--color-azul-texto); text-decoration-color: var(--color-azul); }
.fala-texto .ponto { font-style: normal; }

/* estados do ditado (só com JS; sem JS a página já nasce no estado final) */
html[data-ditado="espera"] .hero-grade .fala-texto:not(.copia),
.hero-grade[data-fase="espera"] .fala-texto:not(.copia),
.hero-grade[data-fase="ditando"] .fala-texto:not(.copia) { opacity: 0; }
html[data-ditado="espera"] .hero-grade .trecho,
.hero-grade[data-fase="espera"] .trecho,
.hero-grade[data-fase="ditando"] .trecho,
.trecho.aguarda { opacity: 0; pointer-events: none; }
.hero-grade[data-fase="ditando"] .vicio,
.hero-grade[data-fase="espera"] .vicio,
html[data-ditado="espera"] .hero-grade .vicio { color: var(--color-texto); }
.hero-grade[data-fase="ditando"] .orig,
.hero-grade[data-fase="espera"] .orig,
html[data-ditado="espera"] .hero-grade .orig { text-decoration-color: transparent; }

/* ---------- aparte (psicologia) ---------- */
.aparte {
  all: unset; box-sizing: border-box; cursor: pointer; font: inherit; color: var(--color-apoio);
  text-decoration: line-through; text-decoration-thickness: 1px; text-decoration-color: var(--color-borda-forte);
  border-radius: 4px; padding: 0 2px; margin: 0 -2px;
  transition: background-color var(--dur-feedback) var(--ease-estado), color var(--dur-feedback) var(--ease-estado);
}
.aparte:hover, .aparte[aria-expanded="true"] { background: var(--color-azul-sutil); color: var(--color-azul-texto); }
.aparte:focus-visible { box-shadow: var(--focus-ring); }
.nota-fora { margin-top: 12px; font-size: var(--text-label); font-weight: var(--weight-medium); color: var(--color-azul-texto); font-style: normal; }
.js .nota-fora { display: none; }
.js .nota-fora.aberta { display: block; }

/* ---------- folha ---------- */
.folha {
  position: relative; width: 100%; max-width: 35rem;
  aspect-ratio: 1 / 1.414;
  border-radius: var(--radius-folha); box-shadow: var(--shadow-folha);
  padding: 28px 24px 20px;
  display: flex; flex-direction: column; gap: 20px;
  font-family: "Inter Variable", "Inter Fallback", var(--font-ui);
}
@media (min-width: 768px) { .folha { padding: 44px 44px 28px; gap: 24px; } }
.folha-cab { display: flex; flex-direction: column; gap: 4px; padding-bottom: 16px; border-bottom: 1px solid var(--color-borda); }
.folha-titulo { font-size: var(--text-headline); line-height: var(--leading-headline); letter-spacing: var(--track-headline); font-weight: var(--weight-strong); }
.folha-sec { display: flex; flex-direction: column; gap: 2px; }
.folha-sec .sobretitulo { margin-bottom: 4px; }
.folha-rodape { margin-top: auto; display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; }
.assinatura { flex: 0 1 220px; border-top: 1px solid var(--color-texto); padding-top: 6px; font-size: var(--text-caption); line-height: var(--leading-caption); letter-spacing: var(--track-caption); text-transform: uppercase; color: var(--color-apoio); }

.trecho {
  display: block; width: calc(100% + 16px); margin: 0 -8px; min-height: var(--hit-min);
  padding: 10px 8px; text-align: left; border: 0; border-radius: var(--radius-sm);
  background: transparent; color: var(--color-texto);
  font-size: var(--text-body); line-height: var(--leading-body); font-weight: var(--weight-regular);
  transition: background-color var(--dur-feedback) var(--ease-estado), color var(--dur-feedback) var(--ease-estado), opacity var(--dur-estado) var(--ease-estado);
}
.trecho:hover, .trecho.lig, .trecho[aria-pressed="true"] { background: var(--color-azul-sutil); color: var(--color-azul-texto); }
.trecho:focus-visible { box-shadow: var(--focus-ring); }
.trecho.entra { transition: opacity 150ms ease-out; }

/* conector do rastreio (só quando fala e folha estão lado a lado) */
.camada { position: absolute; inset: 0; pointer-events: none; z-index: 4; overflow: visible; }
.camada svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.conector { fill: none; stroke: var(--color-azul); stroke-width: 1.25; opacity: 0; transition: opacity var(--dur-feedback) var(--ease-estado); }
.conector.ativo { opacity: 1; }
.conector-ponta { fill: var(--color-azul); opacity: 0; transition: opacity var(--dur-feedback) var(--ease-estado); }
.conector-ponta.ativo { opacity: 1; }
.voo { position: absolute; left: 0; top: 0; margin: 0; transform-origin: 0 0; pointer-events: none; will-change: transform, opacity; }
.fala-linha { position: absolute; left: 0; white-space: pre; font-family: var(--font-fala); font-style: italic; font-weight: 400; color: var(--color-texto); }

/* ---------- seções ---------- */
.secao { padding: 72px 0; }
@media (min-width: 768px) { .secao { padding: 104px 0; } }
@media (min-width: 1024px) { .secao { padding: 128px 0; } }
.secao > .grade > .sub { margin-bottom: 0; }

/* fim do dia */
.fim-do-dia { padding: 72px 0; }
@media (min-width: 768px) { .fim-do-dia { padding: 112px 0; } }
.dia-grade { display: grid; gap: 40px; align-items: start; }
.relogio {
  font-size: var(--text-relogio); line-height: 0.82; letter-spacing: -0.05em; font-weight: var(--weight-strong);
  font-variant-numeric: tabular-nums; color: var(--color-apoio); user-select: none;
  white-space: nowrap;
}
.relogio .dois-pontos { display: inline-block; transform: translateY(-0.04em); }
@media (prefers-reduced-motion: no-preference) {
  .relogio .dois-pontos { animation: pisca 2s steps(1, end) infinite; }
}
@keyframes pisca { 50% { opacity: 0.18; } }
.dia-texto { display: grid; gap: 20px; max-width: 40rem; }
.dia-texto p { color: var(--color-apoio); font-size: 1.0625rem; line-height: 1.65rem; }
.dia-texto .h2 { margin-bottom: 4px; color: var(--color-texto); }
.fala-pull { margin: 20px 0; padding: 0; }
.fala-pull p {
  font-family: var(--font-fala); font-style: italic; font-weight: 400;
  font-size: var(--text-fala-grande); line-height: var(--leading-fala-grande);
  color: var(--color-texto); text-wrap: balance;
}
.dia-texto .dia-fecho { color: var(--color-texto); font-weight: var(--weight-medium); }
@media (min-width: 1024px) {
  .dia-grade { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 64px; }
  .relogio { position: sticky; top: 120px; }
}

/* passos */
.passos { display: grid; gap: 48px; margin-top: 56px; }
.passo { display: grid; gap: 12px; align-content: start; }
.passo-n { font-size: var(--text-display-landing); line-height: 1; letter-spacing: var(--track-display-landing); font-weight: var(--weight-strong); font-variant-numeric: tabular-nums; color: var(--color-apoio); margin-bottom: 8px; }
.passo p { max-width: 38ch; text-wrap: pretty; }
.passo .nota { margin-top: 4px; }
.passo .btn { justify-self: start; margin-top: 12px; }
@media (min-width: 768px) {
  .passos { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
  .passo + .passo { border-left: 1px solid var(--color-borda); padding-left: 32px; }
}

/* confira */
.secao-confira { background: var(--color-lateral); border-block: 1px solid var(--color-borda); }
.abas { margin-top: 40px; }
.trilho { display: flex; width: 100%; gap: 4px; padding: 4px; border-radius: var(--radius-control); background: var(--color-superficie-2); margin-bottom: 32px; max-width: 100%; overflow-x: auto; }
.trilho [role="tab"] {
  min-height: var(--hit-min); padding: 0 16px; border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--color-apoio);
  font-size: var(--text-label); font-weight: var(--weight-medium); white-space: nowrap;
  transition: background-color var(--dur-feedback) var(--ease-estado), color var(--dur-feedback) var(--ease-estado);
}
.trilho [role="tab"] { flex: 1 1 auto; padding: 0 10px; }
@media (min-width: 640px) { .trilho { display: inline-flex; width: auto; } .trilho [role="tab"] { flex: none; padding: 0 16px; } }
.trilho [role="tab"]:hover { color: var(--color-texto); }
.trilho [role="tab"][aria-selected="true"] { background: var(--color-superficie); color: var(--color-texto); box-shadow: inset 0 -2px 0 var(--color-azul), var(--shadow-1); }
.trilho [role="tab"]:focus-visible { box-shadow: var(--focus-ring); }
.js .painel-titulo { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.painel-titulo { font-size: var(--text-title); font-weight: var(--weight-strong); margin-bottom: 16px; }
.painel + .painel { margin-top: 64px; }
.js .painel + .painel { margin-top: 0; }
.demo { position: relative; display: grid; gap: 40px; align-items: start; }
.demo .fala { padding-top: 8px; }
@media (min-width: 900px) {
  .demo { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; }
}
.confira-rodape { margin-top: 48px; display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; }
.confira-rodape .btn { gap: 10px; }
.confira-rodape .btn .meta { padding-left: 10px; border-left: 1px solid var(--color-borda); }

/* para quem */
.sumario { margin-top: 48px; border-top: 1px solid var(--color-borda); }
.sumario li { display: grid; gap: 6px; padding: 24px 0; border-bottom: 1px solid var(--color-borda); }
.sumario p { text-wrap: pretty; }
@media (min-width: 900px) {
  .sumario li { grid-template-columns: minmax(0, 4fr) minmax(0, 4fr) minmax(0, 5fr); gap: 32px; align-items: baseline; padding: 28px 0; }
}
.quem-fim { margin-top: 40px; font-size: var(--text-title); line-height: var(--leading-title); letter-spacing: var(--track-title); font-weight: var(--weight-strong); }
.quem-fim a { color: var(--color-texto); text-decoration-color: var(--color-azul); text-decoration-thickness: 2px; }
.secao-sigilo + .secao-acesso, .secao-para + .secao { margin: 0; }
#para-quem .meta { margin-top: 12px; }

/* sigilo */
.secao-sigilo { background: var(--color-lateral); border-block: 1px solid var(--color-borda); }
.cadeado { display: inline-block; vertical-align: -0.1em; margin-right: 8px; width: 0.8em; height: 0.8em; color: var(--color-apoio); }
.sigilo-blocos { display: grid; gap: 32px; margin-top: 48px; }
.sigilo-blocos dd { margin-top: 8px; max-width: 46ch; text-wrap: pretty; color: var(--color-apoio); }
@media (min-width: 900px) { .sigilo-blocos { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px; } }
.limite { margin-top: 48px; max-width: 64ch; }

/* acesso */
.secao-acesso { padding: 72px 0; }
@media (min-width: 1024px) { .secao-acesso { padding: 128px 0; } }
.acesso-grade { display: grid; gap: 40px; align-items: start; }
.expectativas { margin-top: 28px; display: grid; gap: 10px; }
.expectativas li { position: relative; padding-left: 20px; max-width: 46ch; }
.expectativas li::before { content: ""; position: absolute; left: 0; top: 0.62em; width: 6px; height: 6px; border-radius: 50%; background: var(--color-azul); }
.cartao-form { background: var(--color-superficie); border-radius: var(--radius-lg); box-shadow: var(--shadow-flutuante, 0 8px 28px rgb(var(--color-sombra) / 8%)); padding: 24px; width: 100%; max-width: 30rem; }
@media (min-width: 768px) { .cartao-form { padding: 32px; } }
@media (min-width: 1024px) { .acesso-grade { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: 80px; } .cartao-form { justify-self: end; } }
.form { display: grid; gap: 16px; }
.campo { display: grid; gap: 8px; }
.campo label { font-size: var(--text-label); line-height: var(--leading-label); font-weight: var(--weight-medium); }
.opcional { color: var(--color-apoio); font-weight: var(--weight-regular); }
.campo input, .campo select, .campo textarea {
  width: 100%; min-height: var(--hit-min); padding: 10px 12px;
  background: var(--color-superficie-2); border: 1px solid var(--border-control); border-radius: var(--radius-control);
  font-size: var(--text-body); line-height: var(--leading-body);
  transition: border-color var(--dur-feedback) var(--ease-estado), background-color var(--dur-feedback) var(--ease-estado);
}
.campo textarea { resize: vertical; min-height: 88px; }
.campo select { appearance: none; padding-right: 36px; background-image: linear-gradient(45deg, transparent 50%, var(--color-apoio) 50%), linear-gradient(135deg, var(--color-apoio) 50%, transparent 50%); background-position: calc(100% - 18px) 55%, calc(100% - 13px) 55%; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; }
.campo input:focus, .campo select:focus, .campo textarea:focus { border-color: var(--color-azul); background-color: var(--color-superficie); outline: none; }
.campo input:focus-visible, .campo select:focus-visible, .campo textarea:focus-visible { box-shadow: var(--focus-ring); border-radius: var(--radius-control); }
.campo [aria-invalid="true"] { border-color: var(--color-erro); }
.erro-campo, .erro-rede { font-size: var(--text-meta); line-height: var(--leading-meta); font-weight: var(--weight-medium); color: var(--color-erro); }
.sucesso {
  font-size: var(--text-title); line-height: var(--leading-title); letter-spacing: var(--track-title); font-weight: var(--weight-strong);
  padding: 8px 0;
}
.sucesso:focus-visible { box-shadow: var(--focus-ring); }
@media (prefers-reduced-motion: no-preference) {
  .sucesso:not([hidden]) { animation: chega 420ms var(--ease-chegada) both; }
  .sucesso:not([hidden]) .ponto { display: inline-block; animation: ponto-pop 600ms var(--ease-chegada) 120ms both; }
}
@keyframes chega { from { opacity: 0; transform: translateY(6px); } }
@keyframes ponto-pop { from { transform: scale(0.2); opacity: 0; } 60% { transform: scale(1.6); } }

/* perguntas */
.faq-grade { display: grid; gap: 40px; }
@media (min-width: 1024px) { .faq-grade { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 64px; } }
.faq { border-top: 1px solid var(--color-borda); }
.faq details { border-bottom: 1px solid var(--color-borda); }
.faq summary {
  list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  min-height: 60px; padding: 14px 0; cursor: pointer;
  font-size: var(--text-title); line-height: var(--leading-title); letter-spacing: var(--track-title); font-weight: var(--weight-strong);
  border-radius: var(--radius-sm);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; flex: none; width: 8px; height: 8px;
  border-right: 1.75px solid var(--color-apoio); border-bottom: 1.75px solid var(--color-apoio);
  transform: rotate(-45deg); margin-right: 4px;
  transition: transform var(--dur-estado) var(--ease-estado);
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq summary:focus-visible { box-shadow: var(--focus-ring); }
.faq details > p { padding: 0 32px 24px 0; max-width: 60ch; color: var(--color-apoio); text-wrap: pretty; }

/* rodapé */
.rodape { padding: 72px 0 calc(32px + env(safe-area-inset-bottom)); }
.fala-fecho {
  font-family: var(--font-fala); font-style: italic; font-weight: 400;
  font-size: clamp(2.25rem, 1.2rem + 4.6vw, 5.5rem); line-height: 1.05; letter-spacing: -0.01em;
  text-wrap: balance; margin-bottom: 56px;
}
.fala-fecho .ponto { font-style: normal; }
.rodape-linha { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 32px; padding-top: 24px; border-top: 1px solid var(--color-borda); }
.rodape-desc { flex: 1 1 260px; }
.rodape-nav { display: flex; gap: 4px; flex-wrap: wrap; }
.rodape-nav a { display: inline-flex; align-items: center; min-height: var(--hit-min); padding: 0 10px; color: var(--color-texto); font-size: var(--text-label); font-weight: var(--weight-medium); border-radius: var(--radius-control); text-decoration: none; }
.rodape-nav a:hover { background: var(--surface-hover); }

/* ---------- movimento reduzido: sem deslocamento, o rastreio continua (é estado) ---------- */
@media (prefers-reduced-motion: reduce) {
  .btn:active { transform: none; }
  *, *::before, *::after { scroll-behavior: auto !important; }
  .voo { display: none; }
}

/* monitor grande: a folha ocupa a coluna direita de ponta a ponta (ao lado do título também), em vez de ficar só na segunda linha com o canto vazio */
@media (min-width: 1920px) {
  .hero-dir { grid-column: 9 / 13; grid-row: 1 / 3; align-self: center; justify-self: end; }
  .hero-h1 { grid-column: 1 / 9; }
  .hero-esq { grid-column: 1 / 9; }
  .folha { max-width: clamp(26rem, calc((100svh - 17rem) * 0.707), 40rem); }
}

/* ---------- planos ---------- */
.so-leitor { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.ciclo { display: inline-flex; gap: 4px; padding: 4px; margin-top: 32px; border-radius: var(--radius-control); background: var(--color-superficie-2); max-width: 100%; }
.ciclo button {
  min-height: var(--hit-min); padding: 0 16px; border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--color-apoio);
  font-size: var(--text-label); font-weight: var(--weight-medium);
  transition: background-color var(--dur-feedback) var(--ease-estado), color var(--dur-feedback) var(--ease-estado);
}
.ciclo button:hover { color: var(--color-texto); }
.ciclo button[aria-pressed="true"] { background: var(--color-superficie); color: var(--color-texto); box-shadow: inset 0 -2px 0 var(--color-azul), var(--shadow-1); }
.ciclo-bonus { font-size: var(--text-meta); color: var(--color-apoio); margin-left: 4px; }
.planos-grade { display: grid; gap: 16px; margin-top: 32px; }
@media (min-width: 900px) { .planos-grade { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; align-items: stretch; } }
.plano { position: relative; display: flex; flex-direction: column; gap: 8px; padding: 24px; background: var(--color-superficie); border: 1px solid var(--color-borda); border-radius: var(--radius-lg); }
.plano-rec { border-color: var(--color-azul); box-shadow: 0 0 0 1px var(--color-azul); }
.plano-selo { align-self: flex-start; padding: 2px 10px; border-radius: var(--radius-pill); background: var(--color-azul-sutil); color: var(--color-azul-texto); font-size: var(--text-meta); line-height: var(--leading-meta); font-weight: var(--weight-medium); }
.plano-preco { margin-top: 8px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; }
.plano-valor { font-size: var(--text-headline-landing); line-height: var(--leading-headline-landing); letter-spacing: var(--track-headline-landing); font-weight: var(--weight-strong); font-variant-numeric: tabular-nums; }
.plano-unidade { color: var(--color-apoio); font-size: var(--text-label); }
.plano-lista { display: grid; align-content: start; gap: 10px; margin-top: 16px; flex: 1; }
.plano-lista li { position: relative; padding-left: 20px; text-wrap: pretty; }
.plano-lista li::before { content: ""; position: absolute; left: 0; top: 0.62em; width: 6px; height: 6px; border-radius: 50%; background: var(--color-azul); }
.plano-acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-top: 24px; }
.plano-assinar { display: inline-flex; align-items: center; min-height: var(--hit-min); color: var(--color-texto); font-size: var(--text-label); font-weight: var(--weight-medium); }
.planos-regras { display: grid; gap: 8px; margin-top: 32px; max-width: 64ch; }
.planos-regras li { position: relative; padding-left: 20px; }
.planos-regras li::before { content: ""; position: absolute; left: 0; top: 0.62em; width: 6px; height: 6px; border-radius: 50%; background: var(--color-borda-forte); }
.secao-planos > .grade > .meta { margin-top: 16px; }