/* Altaz Finance — página institucional pré-piloto (Landing, arquitetura B).
   Paleta: DECISIONS.md §62.67 (consumida, nunca redefinida). Fontes: cópias de public/fonts no build.
   Sem dependências, sem JS, sem recurso externo. */

@font-face { font-family: "Spectral"; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/spectral-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Spectral"; font-style: normal; font-weight: 500; font-display: swap; src: url("/fonts/spectral-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("/fonts/inter-latin-wght-normal.woff2") format("woff2"); }

:root {
  /* §62.67 — escuro */
  --night: #0B1730;
  --night-surface: #102542;
  --night-card: #16304F;
  --night-border: #243B5A;
  --on-night: #F5F7FA;
  --on-night-2: #B7C2D0;
  --gold-night: #C6A15B;
  --gold-night-soft: #D9BE82;
  /* §62.67 — claro */
  --ivory: #F7F4EE;
  --paper: #FCFBF8;
  --ink: #1E2D3D;
  --ink-2: #637184;          /* variante acessível aprovada (texto secundário) */
  --rule: #D6D0C4;
  --rule-soft: #ECE7DD;
  --gold: #B8954A;           /* só fio e decoração no claro */
  --gold-ink: #886C32;       /* dourado como texto sobre fundo geral/superfície */
  --navy: #102542;

  --serif: "Spectral", Georgia, "Times New Roman", serif;
  --sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --wrap: 1200px;
  --gutter: clamp(20px, 5vw, 56px);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: var(--night);
  color: var(--ink);
  font: 400 16px/1.65 var(--sans);
  font-feature-settings: "kern", "liga";
  -webkit-font-smoothing: antialiased;
}
p, h1, h2, h3, dl, dd, figure, ol { margin: 0; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--gold-night); outline-offset: 3px; border-radius: 2px; }
/* §62.67 item 4: no claro o foco é azul (o dourado daria 2,35:1 sobre #FCFBF8). */
.section--ivory :focus-visible, .section--paper :focus-visible { outline-color: var(--navy); }

.wrap { width: 100%; max-width: calc(var(--wrap) + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter); }

.skip { position: absolute; left: 12px; top: -48px; z-index: 10; padding: 10px 14px; background: var(--paper); color: var(--ink); font-size: 14px; text-decoration: none; }
.skip:focus { top: 12px; }

/* ——— Marca: réplica do wordmark do app (AppShell/OnboardingBrand), sem redesenho ——— */
.wordmark { display: inline-flex; align-items: flex-start; margin: 0; font: 400 24px/1.2 var(--serif); letter-spacing: .005em; color: var(--on-night); white-space: nowrap; }
.wordmark__mark { width: .32em; height: .32em; margin: .14em 0 0 .07em; color: var(--gold-night-soft); flex: none; }
.wordmark--small { font-size: 20px; }
a.wordmark { text-decoration: none; }

/* ——— Cabeçalho ——— */
.masthead { background: var(--night); color: var(--on-night); border-bottom: 1px solid rgba(217, 190, 130, .16); }
.masthead__row { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 84px; }
.masthead__nav { display: flex; gap: clamp(18px, 3vw, 40px); }
.masthead__nav a { font-size: 13px; letter-spacing: .12em; text-transform: uppercase; text-decoration: none; color: var(--on-night-2); padding: 12px 0; }
.masthead__nav a:hover { color: var(--gold-night-soft); }

/* ——— Hero ——— */
.hero { position: relative; overflow: hidden; background: radial-gradient(120% 90% at 88% 0%, var(--night-surface) 0%, var(--night) 62%); color: var(--on-night); }
.hero__sky { position: absolute; width: min(980px, 120vw); height: auto; right: max(-260px, -22vw); top: -300px; color: var(--gold-night-soft); opacity: .09; pointer-events: none; }
.hero__grid { position: relative; padding-top: clamp(64px, 11vw, 148px); padding-bottom: clamp(72px, 11vw, 140px); }

.folio { display: flex; align-items: center; gap: 14px; font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: var(--on-night-2); }
.folio__num { color: var(--gold-night); font-variant-numeric: lining-nums; white-space: nowrap; }
.folio__rule { width: 40px; height: 1px; background: currentColor; opacity: .5; }

.hero__title { margin-top: clamp(28px, 4vw, 44px); font: 400 clamp(46px, 8.4vw, 112px)/1.02 var(--serif); letter-spacing: -.018em; }
.hero__line { display: block; }
.hero__line--accent { color: var(--gold-night-soft); padding-left: clamp(0px, 9vw, 132px); }

.scale { display: block; width: min(460px, 64%); height: 22px; margin: clamp(22px, 3vw, 34px) 0 0 clamp(0px, 9vw, 132px); color: var(--gold-night); opacity: .75; }

.hero__body { display: grid; grid-template-columns: minmax(0, 560px); gap: 18px; margin: clamp(36px, 5vw, 60px) 0 0 clamp(0px, 9vw, 132px); }
.hero__lede { font-size: clamp(17px, 1.6vw, 20px); line-height: 1.6; color: var(--on-night); }
.hero__note { font-size: 15px; color: var(--on-night-2); }

/* ——— Seções ——— */
.section { padding: clamp(80px, 11vw, 152px) 0; }
.section--ivory { background: var(--ivory); }
.section--paper { background: var(--paper); border-top: 1px solid var(--rule-soft); }
.section--night { background: var(--night-surface); color: var(--on-night); }

.eyebrow { display: flex; align-items: baseline; gap: 14px; font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-2); }
.eyebrow__num { font: 500 15px/1 var(--serif); letter-spacing: .06em; color: var(--gold-ink); }
.eyebrow--dark { color: var(--on-night-2); }
.eyebrow--dark .eyebrow__num { color: var(--gold-night); }

.display { margin-top: 22px; font: 400 clamp(32px, 4.2vw, 54px)/1.12 var(--serif); letter-spacing: -.012em; color: var(--navy); text-wrap: balance; }
.display--dark { color: var(--on-night); }

/* Visão: título à esquerda, texto em coluna estreita à direita */
.editorial { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.editorial__body { display: grid; gap: 20px; padding-top: 6px; color: var(--ink); max-width: 560px; }
.lede { font: 400 clamp(20px, 1.9vw, 24px)/1.5 var(--serif); color: var(--navy); }
.signature { padding-top: 18px; border-top: 1px solid var(--rule); font: 400 18px/1.4 var(--serif); color: var(--gold-ink); }

.triad { list-style: none; padding: 0; margin-top: clamp(64px, 8vw, 112px); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--rule); }
.triad__item { padding: 32px clamp(20px, 3vw, 40px) 8px 0; }
.triad__item + .triad__item { padding-left: clamp(20px, 3vw, 40px); border-left: 1px solid var(--rule); }
.triad__num { display: block; font: 400 13px/1 var(--sans); letter-spacing: .16em; color: var(--gold-ink); font-variant-numeric: lining-nums tabular-nums; }
.triad__title { margin: 18px 0 10px; font: 400 26px/1.2 var(--serif); color: var(--navy); }
.triad__item p { color: var(--ink-2); font-size: 15px; }

/* Essência */
.essence { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(40px, 6vw, 96px); align-items: center; }
.essence__text { display: grid; gap: 20px; color: var(--on-night-2); max-width: 580px; }
.essence__text .display { margin-bottom: 6px; }
.term { font-style: normal; font-family: var(--serif); color: var(--gold-night-soft); }
.coords { margin-top: 18px; border-top: 1px solid var(--night-border); }
.coords__row { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 16px; padding: 18px 0; border-bottom: 1px solid var(--night-border); }
.coords dt { display: flex; align-items: baseline; gap: 12px; font: 400 18px/1.3 var(--serif); color: var(--on-night); }
.coords__letter { font: 400 26px/1 var(--serif); color: var(--gold-night); width: 20px; }
.coords dd { font-size: 15px; }

.essence__figure { display: grid; gap: 16px; }
.diagram { width: 100%; height: auto; overflow: visible; }
.diagram__horizon { stroke: var(--on-night-2); stroke-width: 1; opacity: .7; }
.diagram__meridian { stroke: var(--on-night-2); stroke-width: 1; stroke-dasharray: 2 6; opacity: .55; }
.diagram__axis { stroke: var(--on-night-2); stroke-width: 1; stroke-dasharray: 2 5; opacity: .6; }
.diagram__azimuth { stroke: var(--gold-night); stroke-width: 1.2; }
.diagram__altitude { stroke: var(--gold-night-soft); stroke-width: 1.4; }
.diagram__arcmark { stroke: var(--gold-night); stroke-width: 1; }
.diagram__ticks { stroke: var(--on-night-2); stroke-width: 1; opacity: .7; }
.diagram__zenith { fill: var(--gold-night-soft); }
.diagram__point { fill: var(--on-night); }
.diagram__labels { font: 500 10px/1 var(--sans); letter-spacing: .18em; fill: var(--on-night-2); }
.diagram__label--soft { font: 400 15px/1 var(--serif); letter-spacing: 0; fill: var(--gold-night-soft); }
.essence__figure figcaption { font-size: 13px; color: var(--on-night-2); border-left: 1px solid var(--gold-night); padding-left: 14px; }

/* Situação atual e contato */
.status { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(32px, 6vw, 96px); align-items: end; }
.status__body { display: grid; gap: 28px; max-width: 560px; color: var(--ink); }
.status__contact { display: grid; gap: 8px; padding-top: 24px; border-top: 1px solid var(--rule); }
.status__label { font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-2); }
.mail { justify-self: start; font: 400 clamp(20px, 2vw, 24px)/1.4 var(--serif); color: var(--navy); text-decoration: none; background: linear-gradient(var(--gold), var(--gold)) 0 100% / 100% 1px no-repeat; padding: 6px 0 4px; overflow-wrap: anywhere; }
.mail:hover { color: var(--gold-ink); }

/* Rodapé */
.colophon { background: var(--night); color: var(--on-night-2); padding: 56px 0 48px; }
.colophon__grid { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 24px clamp(32px, 6vw, 96px); align-items: start; }
.colophon__notes { display: grid; gap: 10px; font-size: 13px; line-height: 1.6; max-width: 640px; }
.colophon__legal { font-size: 13px; white-space: nowrap; }

/* ——— Responsivo ——— */
@media (max-width: 960px) {
  .editorial, .essence, .status { grid-template-columns: minmax(0, 1fr); }
  .status { align-items: start; }
  .colophon__grid { grid-template-columns: minmax(0, 1fr); }
  .essence__figure { max-width: 520px; }
}
@media (max-width: 720px) {
  .masthead__row { min-height: 72px; }
  .masthead__nav a:not([href="#contato"]) { display: none; }
  .wordmark { font-size: 21px; }
  .hero__sky { top: -180px; right: -280px; width: 640px; }
  .triad { grid-template-columns: minmax(0, 1fr); }
  .triad__item, .triad__item + .triad__item { padding: 28px 0 24px; border-left: 0; }
  .triad__item + .triad__item { border-top: 1px solid var(--rule); }
  .coords__row { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .scale { width: 78%; }
  /* Refinamento mobile (aprovação de 28/10): texto secundário a 16px, Essência mais respirada,
     rótulos do diagrama compensando a redução do viewBox (~0,7×). */
  .triad__item p, .coords dd, .hero__note { font-size: 16px; }
  .eyebrow, .folio, .status__label { font-size: 12.5px; }
  .colophon__notes, .colophon__legal { font-size: 14px; }
  .essence { gap: 56px; }
  .essence__text { gap: 22px; }
  .coords__row { padding: 20px 0; }
  .essence__figure { margin: 0 -8px; }
  .diagram__labels { font-size: 14px; letter-spacing: .14em; }
  .diagram__label--soft { font-size: 20px; }
  .essence__figure figcaption { font-size: 14px; }
}