/* =====================================================================
   Vektor 2026 · base (tokens, fontes, tipografia, formas)
   Fonte de verdade: Manual de marca Vektor v1.1 (Pop Suave, símbolo Dobra)
   Regra de contraste conferida por script em 10/10/2026:
   creme/cobalto 6.7 · tinta/verde 9.3 · tinta/creme 16.4 · suave/creme 8.9
   Verde-água sobre cobalto = 3.8: só símbolo e grafismo, nunca texto.
   ===================================================================== */

@font-face { font-family: "Unbounded"; font-weight: 800; font-style: normal; font-display: swap; src: url("fontes/unbounded-latin-800-normal.woff2") format("woff2"); }
@font-face { font-family: "Manrope"; font-weight: 400; font-style: normal; font-display: swap; src: url("fontes/manrope-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Manrope"; font-weight: 700; font-style: normal; font-display: swap; src: url("fontes/manrope-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Manrope"; font-weight: 800; font-style: normal; font-display: swap; src: url("fontes/manrope-latin-800-normal.woff2") format("woff2"); }

:root {
  /* cores do manual */
  --cobalto: #2D46D6;
  --verde: #2DD4BF;
  --tinta: #10183A;
  --creme: #FFF8EE;
  --pessego: #FFB4A2;
  --papel: #FFFFFF;
  --suave: #3E4566;
  --linha: #E4D9C6;

  /* fontes */
  --f-display: "Unbounded", "Arial Black", system-ui, sans-serif;
  --f-texto: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* escala do manual (tela), fluida no celular */
  --t-display: clamp(1.9rem, 1rem + 4.4vw, 4rem);     /* 64 / 60 */
  --t-titulo: clamp(1.6rem, 1.1rem + 2.2vw, 2.5rem);   /* 40 / 44 */
  --t-sub: clamp(1.2rem, 1rem + .8vw, 1.5rem);          /* 24 / 30 */
  --t-corpo: 1.0625rem;                                 /* 17 / 26 */
  --t-rotulo: .8125rem;                                 /* 13 / 16 */

  /* espaço em escala de 8 */
  --e1: 8px; --e2: 16px; --e3: 24px; --e4: 40px; --e5: 64px; --e6: 104px;

  /* a pílula: cantos do manual */
  --r1: 12px; --r2: 20px; --r3: 32px; --pilula: 999px;

  --largura: 1180px;
  --medida: 62ch;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } }

body {
  margin: 0;
  background: var(--creme);
  color: var(--tinta);
  font: 400 var(--t-corpo)/1.53 var(--f-texto);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg, video { display: block; max-width: 100%; height: auto; }
a { color: var(--cobalto); text-underline-offset: .18em; }
:focus-visible { outline: 3px solid var(--cobalto); outline-offset: 3px; border-radius: 6px; }
.faixa-cobalto :focus-visible, .faixa-tinta :focus-visible { outline-color: var(--verde); }

/* ---------- tipografia ---------- */
h1, h2, h3 { margin: 0; font-weight: 800; letter-spacing: -.01em; text-wrap: balance; }
.t-display { font: 800 var(--t-display)/.94 var(--f-display); letter-spacing: -.025em; }
.t-titulo  { font: 800 var(--t-titulo)/1.1 var(--f-display); letter-spacing: -.02em; }
.t-sub     { font: 800 var(--t-sub)/1.25 var(--f-display); letter-spacing: -.01em; }
.t-rotulo  { font: 700 var(--t-rotulo)/1.23 var(--f-texto); letter-spacing: .06em; text-transform: uppercase; }
p { margin: 0 0 1em; max-width: var(--medida); }

/* palavra que não pode quebrar (ex.: Raio-X) */
.nq { white-space: nowrap; }

/* D3 · título em duas partes: 1ª frase em Unbounded, 2ª em Manrope 800 com marca-texto.
   Texto da copy intacto; só muda a fonte de cada parte. */
.tit-2 { display: block; margin-top: .28em; font-family: var(--f-texto); font-weight: 800; font-size: .74em; line-height: 1.34; letter-spacing: -.015em; }

/* D2 · marca-texto verde-água (tinta por cima, contraste 9.3) */
.marca {
  color: var(--tinta);
  background: var(--verde);
  border-radius: .32em;
  padding: .02em .22em .06em;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}

/* ---------- forma: pílula ---------- */
.pilula {
  display: inline-flex; align-items: center; gap: .5em;
  padding: .5em 1em; border-radius: var(--pilula);
  font: 700 var(--t-rotulo)/1.2 var(--f-texto); letter-spacing: .04em;
}
.pilula-verde { background: var(--verde); color: var(--tinta); }
.pilula-creme { background: var(--creme); color: var(--tinta); }
.pilula-cobalto { background: var(--cobalto); color: var(--creme); }

/* ---------- faixas (alternância do manual) ---------- */
.faixa-creme   { background: var(--creme); color: var(--tinta); }
.faixa-papel   { background: var(--papel); color: var(--tinta); }
.faixa-cobalto { background: var(--cobalto); color: var(--creme); }
.faixa-verde   { background: var(--verde); color: var(--tinta); }
.faixa-tinta   { background: var(--tinta); color: var(--creme); }
.faixa-cobalto a, .faixa-tinta a { color: var(--creme); }
.faixa-verde a { color: var(--tinta); }

.wrap { width: min(100% - 2 * var(--e2), var(--largura)); margin-inline: auto; }
@media (min-width: 720px) { .wrap { width: min(100% - 2 * var(--e4), var(--largura)); } }

.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }