/* Valariss — reset, tipografia e primitivas de layout. */

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

* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + var(--s-6));
}

body {
  font-family: var(--font);
  font-size: var(--fs-body);
  line-height: 1.7;
  font-variation-settings: 'ROND' 0;          /* §3.1 — terminais retos */
  color: var(--text-muted);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;                          /* §10 — nunca rolagem horizontal */
}

img, svg, video { display: block; max-width: 100%; }
img { height: auto; }

button, input, textarea, select { font: inherit; color: inherit; }

/* §3.2 — a família não tem itálico. Nunca sintetizar. */
i, em, cite, address, dfn { font-style: normal; }

/* ---------- Tipografia ---------- */

h1, h2, h3, h4 {
  color: var(--text);
  font-weight: 600;
  text-wrap: balance;
}

.display-1 { font-size: var(--fs-display-1); line-height: 1.03; letter-spacing: -0.035em; max-width: 16ch; }
.display-2 { font-size: var(--fs-display-2); line-height: 1.06; letter-spacing: -0.03em;  max-width: 16ch; }
.h2        { font-size: var(--fs-h2);        line-height: 1.10; letter-spacing: -0.025em; max-width: 20ch; }
.h3        { font-size: var(--fs-h3);        line-height: 1.25; letter-spacing: -0.015em; }
.h4        { font-size: var(--fs-h4);        line-height: 1.40; letter-spacing: -0.01em; }

/* Oração de ênfase da headline (§3.2) — substitui o itálico, que não existe. */
.em { color: var(--accent); }

.lead {
  font-size: var(--fs-lead);
  line-height: 1.6;
  color: var(--text-muted);
  max-width: 56ch;
}

.body    { max-width: 68ch; }
.body + .body { margin-top: var(--s-5); }
.body-sm { font-size: var(--fs-body-sm); line-height: 1.6; }

.caption {
  font-size: var(--fs-caption);
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.01em;
  color: var(--text-muted);
}

/* Eyebrow: filete de 24px + caixa-alta com tracking largo (§0, §3.3) */
.eyebrow {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
}
.eyebrow::before {
  content: '';
  width: 24px;
  height: 1px;
  background: currentColor;
  flex: none;
}

.stat {
  display: block;
  font-size: var(--fs-stat);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  font-variation-settings: 'ROND' 0, 'wght' 250, 'wdth' 90;  /* §3.3 */
}

a { color: var(--accent); text-underline-offset: 3px; }
a:hover { text-decoration: underline; }

/* ---------- Layout ---------- */

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container--narrow { max-width: var(--container-narrow); }

.section { padding-block: var(--section-y); }
.section--sm { padding-block: var(--section-y-sm); }
.section--surface { background: var(--surface); }

/* Par com .hero--tight, que fica em components.css junto das regras do hero.
   Ver a nota lá. */
.section--attached { padding-top: var(--s-10); }

/* Ritmo interno fixo de seção (§4.3) */
.section__head { max-width: 56ch; }
.section__head .eyebrow + * { margin-top: var(--s-5); }
.section__head .h2 + .lead  { margin-top: var(--s-6); }
.section__head + *          { margin-top: var(--s-12); }

@media (min-width: 1024px) {
  .section__head + * { margin-top: var(--s-16); }
}

.grid { display: grid; gap: var(--s-6); }
@media (min-width: 1024px) { .grid { gap: var(--s-8); } }
.grid--2 { grid-template-columns: 1fr; }
.grid--3 { grid-template-columns: 1fr; }
/* 4 colunas: só para grades de rótulo curto com número par de itens,
   como os 8 valores em /sobre — a 3 colunas sobraria uma fileira de dois. */
.grid--4 { grid-template-columns: 1fr; }

@media (min-width: 768px) {
  .grid--2 { grid-template-columns: repeat(2, 1fr); }
  .grid--3 { grid-template-columns: repeat(2, 1fr); }
  .grid--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .grid--3 { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1200px) {
  .grid--4 { grid-template-columns: repeat(4, 1fr); }
}

/* ---------- Acessibilidade ---------- */

:focus-visible {
  outline: 2px solid var(--accent-soft);
  outline-offset: 3px;
  border-radius: var(--r-xs);
}

.skip-link {
  position: absolute;
  left: var(--s-4);
  top: var(--s-4);
  z-index: 100;
  padding: var(--s-3) var(--s-5);
  background: var(--surface-2);
  border: 1px solid var(--accent-line);
  border-radius: var(--r-md);
  color: var(--text);
  text-decoration: none;
  transform: translateY(-200%);
}
.skip-link:focus { transform: translateY(0); }

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

/* ---------- Revelação ao rolar (§10.2) ---------- */

.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity var(--t-enter) var(--ease-out), transform var(--t-enter) var(--ease-out);
}
.reveal.is-visible { opacity: 1; transform: none; }

/* Sem JS, nada pode ficar preso em opacity:0. */
.no-js .reveal { opacity: 1; transform: none; }

/* §10.4 — com movimento reduzido os elementos nascem visíveis. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}