/* ==========================================================================
   base.css — tipografia, texto e utilitários
   ========================================================================== */

body {
  background-color: var(--nexa-branco);
  color: var(--nexa-texto);
  font-family: var(--fonte-base);
  font-size: var(--texto-corpo);
  font-weight: var(--peso-normal);
  line-height: var(--altura-linha-corpo);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

/* --------------------------------------------------------------------------
   Títulos
   -------------------------------------------------------------------------- */

h1, h2, h3, h4, h5, h6 {
  font-family: var(--fonte-base);
  line-height: var(--altura-linha-titulo);
  text-wrap: balance;
}

.titulo-hero {
  font-size: var(--texto-hero);
  font-weight: var(--peso-medio);
  color: var(--nexa-preto);
  letter-spacing: -0.015em;
}

.titulo-secao {
  font-size: var(--texto-secao);
  font-weight: var(--peso-forte);
  letter-spacing: -0.015em;
}

.titulo-card {
  font-size: var(--texto-card);
  font-weight: var(--peso-forte);
  color: var(--nexa-texto);
}

/* --------------------------------------------------------------------------
   Texto corrido
   -------------------------------------------------------------------------- */

.lead {
  font-size: var(--texto-lead);
  font-weight: var(--peso-leve);
  line-height: 26px;
  color: var(--nexa-preto);
}

@media (max-width: 767px) {
  .lead { line-height: 20px; }
}

.texto p + p {
  margin-top: var(--esp-4);
}

.texto a {
  color: var(--nexa-azul-destaque);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  transition: color var(--transicao);
}

.texto a:hover {
  color: var(--nexa-ciano-escuro);
}

.texto ul,
.texto ol {
  margin: var(--esp-4) 0;
  padding-left: 1.4em;
}

.texto li + li {
  margin-top: var(--esp-2);
}

.texto strong,
.texto b {
  font-weight: var(--peso-semi);
}

/* --------------------------------------------------------------------------
   Destaques inline dentro de títulos
   Reproduz o custom CSS do Elementor: .azul e .verde
   -------------------------------------------------------------------------- */

.azul  { color: var(--nexa-azul-destaque); }
.verde { color: var(--nexa-verde-destaque); }

/* --------------------------------------------------------------------------
   Utilitários
   -------------------------------------------------------------------------- */

.centro        { text-align: center; }
.justificado   { text-align: justify; }
.esquerda      { text-align: left; }

.medida        { max-width: var(--largura-leitura); }
.medida-centro { max-width: var(--largura-leitura); margin-inline: auto; }

/* Esconde visualmente mantendo para leitores de tela */
.so-leitor {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Link "pular para o conteúdo" */
.pular {
  position: absolute;
  left: var(--esp-4);
  top: var(--esp-4);
  z-index: 999;
  padding: var(--esp-3) var(--esp-5);
  background: var(--nexa-texto);
  color: var(--nexa-branco);
  border-radius: var(--raio-pilula);
  font-weight: var(--peso-semi);
  transform: translateY(-200%);
  transition: transform var(--transicao);
}

.pular:focus {
  transform: translateY(0);
}

@media (max-width: 767px) {
  .justificado-mobile { text-align: justify; }
  .centro-mobile      { text-align: center; }
}