/* ==========================================================================
   Base — reset, tipografia e utilitários.
   ========================================================================== */

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-md);
  line-height: 1.5;
  color: var(--text-1);
  background: var(--surface-0);
  -webkit-font-smoothing: antialiased;
}

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

/* O atributo hidden ganha sempre a componentes com display próprio */
[hidden] { display: none !important; }

h1, h2, h3, h4 { margin: 0; line-height: 1.2; font-weight: 700; }
h1, h2, h3 { font-family: var(--font-display); letter-spacing: -0.01em; }
h1 { font-size: var(--fs-2xl); font-weight: 800; letter-spacing: -0.02em; color: var(--color-heading); }
h2 { font-size: var(--fs-xl); }
h3 { font-size: var(--fs-lg); }
h4 { font-size: var(--fs-md); }
p { margin: 0; }

::selection { background: rgba(40, 90, 255, 0.18); }

/* Pequeno rótulo em maiúsculas acima de títulos */
.eyebrow { font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--te-red); }

/* Texto com o gradiente da marca */
.grad-text {
  background: var(--te-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Entrada suave dos blocos de conteúdo */
@keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.rise > * { animation: rise 0.5s var(--ease) both; }
.rise > *:nth-child(2) { animation-delay: 0.05s; }
.rise > *:nth-child(3) { animation-delay: 0.1s; }
.rise > *:nth-child(4) { animation-delay: 0.15s; }
.rise > *:nth-child(5) { animation-delay: 0.2s; }
.rise > *:nth-child(n+6) { animation-delay: 0.25s; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

a { color: var(--te-blue); text-decoration: none; }
a:hover { text-decoration: underline; }

/* Logótipo oficial e faixa multicolor da marca */
.brand-logo { display: block; height: 40px; width: auto; }
.brand-stripe { height: 4px; background: var(--te-gradient); }

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

:focus-visible {
  outline: 2px solid var(--te-blue);
  outline-offset: 2px;
}

/* Utilitários */
.muted { color: var(--text-2); }
.subtle { color: var(--text-3); font-size: var(--fs-sm); }
.mono { font-family: var(--font-mono); }
.stack > * + * { margin-top: var(--space-4); }
.stack-sm > * + * { margin-top: var(--space-2); }
.row { display: flex; align-items: center; gap: var(--space-3); }
.row-between { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.wrap { flex-wrap: wrap; }
.grow { flex: 1; }
.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;
}

/* Marcador de conteúdo ainda por desenhar */
.placeholder {
  display: grid;
  place-items: center;
  min-height: 120px;
  padding: var(--space-4);
  border: 1.5px dashed var(--border-strong);
  border-radius: var(--radius-md);
  color: var(--text-3);
  font-size: var(--fs-sm);
  text-align: center;
  background: var(--surface-2);
}