/* Finance Planer — base: fontes, reset, tipografia, grade, botões, campos, utilitários e movimento.
   Vale para a landing, para o sistema e para dentro do aparelho do tour (Shadow DOM).
   Regra: nada de style="" no HTML. Variáveis por elemento entram por data-vars (ver comum/js/modelo.js). */

/* 1. Fontes (hospedadas no site; subconjunto latino) */
@font-face {
  font-family: "Geist";
  src: url("../fonts/geist-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Geist Mono";
  src: url("../fonts/geist-mono-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
/* Reserva com métricas próximas da Geist, para a troca de fonte não empurrar o layout */
@font-face {
  font-family: "Geist reserva";
  src: local("Arial"), local("Helvetica Neue"), local("Roboto");
  size-adjust: 101%;
  ascent-override: 93%;
  descent-override: 23%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Geist Mono reserva";
  src: local("Consolas"), local("Menlo"), local("Roboto Mono");
  size-adjust: 108%;
  ascent-override: 90%;
  descent-override: 22%;
  line-gap-override: 0%;
}

/* 2. Reset (com :where, para nunca vencer uma classe) */
*, *::before, *::after { box-sizing: border-box; }
:where(html) {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  overflow-x: clip;
}
:where(body) {
  margin: 0;
  min-height: 100vh;
  min-height: 100svh;
  background: var(--fundo);
  color: var(--texto);
  font-family: var(--fonte);
  font-size: var(--t-corpo);
  line-height: 1.55;
  font-weight: 400;
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
:where(h1, h2, h3, h4, p, figure, blockquote, dl, dd) { margin: 0; }
:where(ul, ol) { margin: 0; padding: 0; list-style: none; }
:where(img, svg, video, canvas) { display: block; max-width: 100%; }
:where(img, video) { height: auto; }
:where(button, input, select, textarea) { font: inherit; color: inherit; letter-spacing: inherit; }
:where(button) { background: none; border: 0; padding: 0; cursor: pointer; }
:where(a) { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .18em; }
:where(table) { border-collapse: collapse; }
:where([hidden]) { display: none !important; }
:where(summary) { cursor: pointer; list-style: none; }
:where(summary)::-webkit-details-marker { display: none; }

/* 3. Tipografia */
.t-display, .t-h2, .t-h3 {
  font-weight: 500;
  letter-spacing: -.045em;
  text-wrap: balance;
}
.t-display { font-size: var(--t-display); line-height: .92; letter-spacing: -.05em; }
.t-h2 { font-size: var(--t-h2); line-height: .96; }
.t-h3 { font-size: var(--t-h3); line-height: 1.1; letter-spacing: -.03em; }
.t-h4 { font-size: var(--t-h4); line-height: 1.25; font-weight: 500; letter-spacing: -.015em; }
.t-lead { font-size: var(--t-lead); line-height: 1.45; letter-spacing: -.01em; color: var(--texto-2); text-wrap: pretty; }
.t-pequeno { font-size: var(--t-pequeno); line-height: 1.5; }
.t-rotulo {
  font-family: var(--fonte-mono);
  font-size: var(--t-rotulo);
  line-height: 1.2;
  font-weight: 500;
  letter-spacing: .02em;
  text-transform: uppercase;
}
.t-numero {
  font-size: var(--t-numero);
  line-height: 1;
  font-weight: 500;
  letter-spacing: -.04em;
}
.num, .t-numero { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }
.cor-2 { color: var(--texto-2); }
.cor-3 { color: var(--texto-3); }

/* 4. Grade */
.contido {
  width: 100%;
  max-width: calc(var(--largura) + 2 * var(--calha));
  margin-inline: auto;
  padding-inline: var(--calha);
}
.secao { padding-block: var(--secao); }
.pilha { display: flex; flex-direction: column; gap: var(--e-4); }
.linha-div { border: 0; border-top: 1px solid var(--linha); margin: 0; }

/* 5. Botões: retângulo de canto pequeno, rótulo em mono caixa-alta */
.botao {
  --botao-fundo: transparent;
  --botao-texto: var(--texto);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--e-3);
  min-height: 52px;
  padding: 0 var(--e-5);
  border-radius: var(--r-sm);
  border: 1px solid transparent;
  background: var(--botao-fundo);
  color: var(--botao-texto);
  font-family: var(--fonte-mono);
  font-size: var(--t-botao);
  font-weight: 500;
  letter-spacing: .02em;
  line-height: 1.1;
  text-transform: uppercase;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: background-color var(--dur-1) var(--curva), color var(--dur-1) var(--curva),
    border-color var(--dur-1) var(--curva), transform var(--dur-1) var(--curva);
}
.botao:active { transform: scale(.98); }
.botao[disabled], .botao[aria-disabled="true"] { opacity: .4; pointer-events: none; }
.botao--primario { --botao-fundo: var(--inverso); --botao-texto: var(--inverso-texto); }
.botao--secundario { border-color: var(--borda); }
.botao--fantasma { min-height: var(--toque); padding-inline: var(--e-3); }
.botao--pequeno { min-height: var(--toque); padding-inline: var(--e-4); }
.botao--largo { width: 100%; }
.botao__icone { width: 18px; height: 18px; flex: none; transition: transform var(--dur-1) var(--curva); }
@media (hover: hover) {
  .botao--primario:hover { --botao-fundo: color-mix(in srgb, var(--inverso) 86%, var(--fundo)); }
  .botao--secundario:hover, .botao--fantasma:hover { --botao-fundo: color-mix(in srgb, var(--texto) 8%, transparent); }
  .botao:hover .botao__icone { transform: translateX(3px); }
}

/* 6. Campos */
.campo { display: flex; flex-direction: column; gap: var(--e-2); }
.campo__rotulo { font-size: var(--t-pequeno); font-weight: 500; color: var(--texto-2); }
.campo__entrada {
  width: 100%;
  min-height: 56px;
  padding: 0 var(--e-4);
  border-radius: var(--r-sm);
  border: 1px solid var(--borda);
  background: var(--superficie);
  color: var(--texto);
  font-size: 1.125rem;            /* >= 16 px: o iPhone não dá zoom */
  font-variant-numeric: tabular-nums;
  transition: border-color var(--dur-1) var(--curva), box-shadow var(--dur-1) var(--curva);
}
.campo__entrada::placeholder { color: var(--texto-3); }
.campo__entrada:hover { border-color: var(--texto-2); }
.campo__entrada:focus-visible { outline: none; border-color: var(--texto); box-shadow: 0 0 0 1px var(--texto); }
.campo__entrada[aria-invalid="true"] { border-color: var(--gasto-texto); box-shadow: 0 0 0 1px var(--gasto-texto); }
.campo__ajuda { font-size: var(--t-pequeno); color: var(--texto-3); }
.campo__erro { font-size: var(--t-pequeno); color: var(--gasto-texto); }

/* 7. Foco, utilitários */
:where(a, button, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--texto);
  outline-offset: 3px;
  border-radius: 4px;
}
.vh {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.pular {
  position: absolute; left: var(--e-4); top: var(--e-4); z-index: 100;
  padding: var(--e-3) var(--e-4);
  background: var(--inverso); color: var(--inverso-texto);
  border-radius: var(--r-sm);
  transform: translateY(-200%);
}
.pular:focus-visible { transform: none; }
.icone { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.caixa { background: var(--superficie); border-radius: var(--r-md); border: 1px solid var(--linha); }
.reservado {
  border: 1px dashed var(--borda);
  border-radius: var(--r-md);
  padding: var(--e-5);
  color: var(--texto-3);
  font-family: var(--fonte-mono);
  font-size: var(--t-pequeno);
}

/* 8. Revelação ao rolar. Só esconde quando o JS confirmou que está pronto (classe .js no <html>). */
.js [data-revelar] {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity var(--dur-3) var(--curva), transform var(--dur-3) var(--curva);
  transition-delay: calc(var(--i, 0) * 60ms);
}
.js [data-revelar].visivel { opacity: 1; transform: none; }

/* 9. Movimento reduzido: conteúdo aparece direto, sem deslocamento */
@media (prefers-reduced-motion: reduce) {
  :where(html) { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    transition-delay: 0s !important;
  }
  .js [data-revelar] { opacity: 1; transform: none; }
}

@media (forced-colors: active) {
  .botao { border: 1px solid ButtonText; }
}