/* base.css — reset, tipografia, utilitarios. Editado apenas pelo chat ESTRUTURA. */

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

html { scroll-behavior: smooth; }

body {
  background: var(--fundo);
  color: var(--texto);
  font-family: var(--fonte);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, picture, svg, canvas, video { display: block; max-width: 100%; }
button, input, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; }

a { color: var(--azul-claro); text-decoration: none; transition: color var(--transicao); }
a:hover { color: var(--ciano); }

h1, h2, h3 { line-height: 1.1; font-weight: 700; letter-spacing: -.02em; }
h1 { font-size: clamp(2.4rem, 6.5vw, 4.6rem); }
h2 { font-size: clamp(1.9rem, 4.2vw, 3rem); }
h3 { font-size: clamp(1.1rem, 2vw, 1.35rem); }

code, .mono { font-family: var(--fonte-mono); }

:focus-visible {
  outline: 2px solid var(--ciano);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ---- utilitarios ---- */

.container { width: min(100% - 2.5rem, var(--largura)); margin-inline: auto; }

/* padding-block era clamp(4rem, 10vw, 8rem): em tela grande dava 128px em cima
   e embaixo, ~256px de vazio entre uma secao e outra. */
.secao { padding-block: clamp(2.4rem, 4.4vw, 3.6rem); position: relative; }

.rotulo {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--fonte-mono); font-size: .78rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--ciano);
  border: 1px solid var(--borda-viva); border-radius: 100px;
  padding: .3rem .85rem; background: rgba(34, 211, 238, .06);
}
.rotulo::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--ciano); box-shadow: var(--brilho-ciano);
  animation: pulsar 2s ease-in-out infinite;
}

.texto-suave { color: var(--texto-suave); }
.destaque { color: var(--ciano); }

/* botoes */
.btn {
  display: inline-flex; align-items: center; gap: .6rem;
  padding: .85rem 1.6rem; border-radius: 100px; font-weight: 600;
  transition: transform var(--transicao), box-shadow var(--transicao),
              background var(--transicao), border-color var(--transicao);
  position: relative; overflow: hidden; white-space: nowrap;
}
.btn--principal {
  background: linear-gradient(120deg, var(--azul), var(--ciano));
  color: #04070f; box-shadow: var(--brilho-azul);
}
.btn--principal:hover { transform: translateY(-2px) scale(1.02); box-shadow: 0 0 55px rgba(47,125,255,.6); color: #04070f; }
.btn--fantasma { border: 1px solid var(--borda-viva); color: var(--texto); }
.btn--fantasma:hover { border-color: var(--ciano); background: rgba(34,211,238,.07); color: var(--texto); transform: translateY(-2px); }

/* revelacao no scroll */
.revelar { opacity: 0; transform: translateY(28px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.3,1); }
.revelar.visivel { opacity: 1; transform: none; }

@keyframes pulsar {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: .35; transform: scale(.7); }
}

/* acessibilidade: quem pediu menos movimento, recebe menos movimento */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .revelar { opacity: 1; transform: none; }
}