/* base.css — tipografia base, helpers e utilitários globais */

body {
  font-family: var(--fonte-corpo);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--texto);
  background: var(--bg);
}

/* ---- Títulos ------------------------------------------------------------ */
h1,
h2,
h3 {
  font-family: var(--fonte-display);
  font-weight: var(--peso-black);
  letter-spacing: -0.02em;
  color: var(--texto);
}


/* Títulos de seção em lowercase, fiéis ao wireframe */
.titulo-secao {
  font-family: var(--fonte-display);
  font-weight: var(--peso-black);
  font-size: var(--fs-h2);
  line-height: var(--lh-snug);
  letter-spacing: -0.025em;
  text-transform: lowercase;
  color: var(--azul);
}

/* Variante de peso misto: só o <strong> fica bold (ex.: "blog e outros conteúdos") */
.titulo-secao--leve {
  font-weight: var(--peso-regular);
}
.titulo-secao--leve strong {
  font-weight: var(--peso-bold);
}

/* Mobile: título de seção maior (teste do cliente — antes caía no piso 1.8rem do clamp) */
@media (max-width: 700px) {
  .titulo-secao {
    font-size: 2.2rem;
  }
}


/* ---- Layout helpers ----------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

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

.secao {
  padding-block: var(--secao-y);
}

/* ---- Utilitários -------------------------------------------------------- */
.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: var(--space-4);
  top: -100px;
  z-index: var(--z-topo);
  background: var(--azul);
  color: #fff;
  padding: var(--space-3) var(--space-5);
  border-radius: var(--raio-pill);
  transition: top var(--dur-medio) var(--ease-suave);
}
.skip-link:focus {
  top: var(--space-4);
}

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


/* Mensagem de erro/vazio amigável (Camada 2 de proteção) */
.estado-msg {
  text-align: center;
  padding: var(--space-8) var(--gutter);
  color: var(--texto-suave);
}
.estado-msg h2 {
  color: var(--azul);
  margin-bottom: var(--space-3);
  text-transform: lowercase;
}
.estado-msg__acao {
  margin-top: var(--space-5);
}

/* Elementos revelados por scroll começam invisíveis só se o JS GSAP existir.
   Sem JS, tudo aparece normalmente (progressive enhancement). */
.js-gsap [data-reveal] {
  opacity: 0;
}