/* ============================================================
   STINT · base
   Reset, tipografia, grid, shell (nav e rodape), botoes, foco.
   Depende de tokens.css.
   ============================================================ */

*, *::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; scroll-behavior: auto !important;
  }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;            /* trava o scroll lateral no mobile */
}

img, svg, video { max-width: 100%; height: auto; display: block; }
h1, h2, h3, h4, p, ul, ol, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }

/* ---------- tipografia ---------- */
h1, h2, h3, .display {
  font-family: var(--font-display);
  font-weight: 800;
  line-height: var(--lh-head);
  letter-spacing: -.02em;
  text-transform: uppercase;
  text-wrap: balance;
}
h1, .fs-hero { font-size: var(--fs-hero); line-height: var(--lh-tight); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }

.lead      { font-size: var(--fs-lead); color: var(--muted); max-width: 62ch; }
.prose p   { max-width: 68ch; color: var(--muted); }
.prose p + p { margin-top: var(--sp-4); }
.small     { font-size: var(--fs-sm); }
.muted     { color: var(--muted); }
.muted-2   { color: var(--muted-2); }

/* rotulo de secao: substitui a monoespacada do mock */
.label {
  font-family: var(--font-body);
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--label, var(--muted-2));
}
.label--accent { color: var(--accent); }

/* numero grande (ex.: 01, 02) */
.numeral {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  color: var(--accent);
  line-height: 1;
}


/* ---------- link ---------- */
a { color: inherit; text-decoration: none; }
.prose a, .link {
  color: var(--text);
  text-decoration: underline;
  text-decoration-color: var(--accent-line);
  text-underline-offset: 3px;
  transition: text-decoration-color var(--dur) var(--ease);
}
.prose a:hover, .link:hover { text-decoration-color: var(--accent); }

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: var(--r-sm);
}

/* ---------- layout ---------- */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.container--narrow { max-width: var(--container-narrow); }
.container--wide { max-width: var(--container-wide); }
.section { padding-block: var(--section-y); border-bottom: 1px solid var(--border); }
.section--flat { border-bottom: 0; }
.section--surface { background: var(--surface); }
.section--card    { background: var(--card); }
.stack > * + * { margin-top: var(--sp-4); }
.stack-lg > * + * { margin-top: var(--sp-6); }

.grid { display: grid; gap: var(--sp-5); }
/* ordem crescente obrigatoria: a regra mais larga tem de vir por ultimo,
   senao a de 720px sobrescreve a de 960px e o grid de 3 sai com 2 colunas. */
@media (min-width: 720px) { .grid--2 { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (min-width: 720px) { .grid--3 { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (min-width: 960px) { .grid--3 { grid-template-columns: repeat(3, minmax(0,1fr)); } }
.grid > * { min-width: 0; }

.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--sp-6);
  box-shadow: var(--shadow);
}

/* ---------- botoes ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  font-family: var(--font-body); font-size: var(--fs-sm); font-weight: 600;
  text-transform: uppercase; letter-spacing: .08em;
  line-height: 1; padding: 16px 28px; border-radius: var(--r-sm);
  border: 1px solid transparent; cursor: pointer;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), transform var(--dur-fast) var(--ease);
}
.btn:active { transform: translateY(1px); }
.btn--primary { background: var(--accent); color: var(--on-accent); }
.btn--primary:hover { background: var(--accent-h); }
.btn--primary:active { background: var(--accent-p); }
.btn--ghost { background: transparent; color: var(--text); border-color: var(--border-2); }
.btn--ghost:hover { background: var(--surface); border-color: var(--accent-line); }
.btn--sm { padding: 10px 18px; font-size: var(--fs-sm); }

/* ---------- shell: nav ---------- */
.site-nav {
  position: sticky; top: 0; z-index: 50;
  /* solida, nao translucida: sobre pagina clara os 10% de transparencia
     lavavam a barra e ela lia mais clara que os blocos escuros.
     O fio verde no pe segue a mesma tecnica do rodape: camada de fundo,
     porque borda do CSS nao aceita gradiente. */
  background:
    linear-gradient(90deg, transparent 0%, var(--accent) 50%, transparent 100%) bottom center / 100% 2px no-repeat,
    var(--bg);
  border-bottom: 0;
}
.site-nav__inner { display: flex; align-items: center; gap: var(--sp-5); min-height: 72px; }
.site-nav__logo { display: flex; align-items: flex-start; }
.site-nav__logo img { height: 26px; width: auto; }   /* nunca stretch: ver aprendizado 09/09 */
.site-nav__spacer { flex: 1 1 auto; }
.site-nav__links { display: none; gap: var(--sp-6); align-items: center; }
.site-nav__links a {
  font-family: var(--font-body); font-size: var(--fs-label); font-weight: 500;
  text-transform: uppercase; letter-spacing: .10em; color: var(--muted);
  padding-block: 4px; border-bottom: 1px solid transparent;
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.site-nav__links a:hover { color: var(--text); border-bottom-color: var(--accent); }
@media (min-width: 860px) { .site-nav__links { display: flex; } }

/* ---------- shell: rodape ---------- */
/* var(--bg), nao var(--surface): dentro do bloco escuro o surface daria #0E0C0B
   e o rodape leria mais claro que a barra e as secoes escuras. */
/* Fio verde no topo: gradiente que acende no centro e apaga nas pontas,
   no lugar da linha neutra. Fica por cima do fundo solido. */
.site-footer {
  background:
    linear-gradient(90deg, transparent 0%, var(--accent) 50%, transparent 100%) top center / 100% 2px no-repeat,
    var(--bg);
  border-top: 0;
  padding-block: var(--sp-8) var(--sp-6);
}
.site-footer__grid { display: grid; gap: var(--sp-6); }
@media (min-width: 720px) { .site-footer__grid { grid-template-columns: 1.4fr 1fr 1fr; } }
/* Mobile: os dois menus lado a lado, em vez de um abaixo do outro (14/09).
   A marca e a descricao continuam ocupando a linha inteira em cima. */
@media (max-width: 719px) {
  .site-footer__grid { grid-template-columns: repeat(2, minmax(0,1fr));
    gap: var(--sp-6) var(--sp-5); }
  .site-footer__grid > :first-child { grid-column: 1 / -1; }
}
.site-footer h4 { font-family: var(--font-body); font-size: var(--fs-label); font-weight: 600;
  letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--muted-2); margin-bottom: var(--sp-3); }
.site-footer li + li { margin-top: var(--sp-2); }
.site-footer a { font-size: var(--fs-sm); color: var(--muted); }
.site-footer a:hover { color: var(--text); }
.site-footer__legal { margin-top: var(--sp-7); padding-top: var(--sp-5); border-top: 1px solid var(--border);
  font-size: var(--fs-sm); color: var(--muted-2); }
.site-footer__legal p + p { margin-top: var(--sp-2); }

/* ---------- utilitarios ---------- */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--accent); color: var(--on-accent); padding: 12px 18px; font-weight: 600; }
.skip-link:focus { left: var(--gutter); top: 12px; border-radius: var(--r-sm); }
.scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; }