/* Estilos base de tipografía, encabezados y elementos comunes de contenido */

body {
  font-family: var(--font-texto);
  font-size: var(--fs-300);
  color: var(--color-texto);
  background-color: var(--color-bg);
}

h1,
h2,
h3,
h4 {
  font-family: var(--font-titulos);
  font-weight: 700;
  line-height: var(--lh-ajustado);
  color: var(--color-texto);
}

h1 {
  font-size: var(--fs-display);
  letter-spacing: var(--tracking-display);
  text-wrap: balance;
}

h2 {
  font-size: var(--fs-titulo);
  letter-spacing: var(--tracking-titulo);
  text-wrap: balance;
}

h3 {
  font-size: var(--fs-subtitulo);
  letter-spacing: var(--tracking-titulo);
}

h4 {
  font-size: var(--fs-400);
}

p {
  line-height: var(--lh-relajado);
  color: var(--color-texto-suave);
}

strong {
  color: var(--color-texto);
  font-weight: 700;
}


/* Evita que el header fijo tape el destino al navegar a anclas internas (#id) */
[id] {
  scroll-margin-top: calc(var(--header-height-mobile) + var(--space-3));
}

@media (min-width: 1024px) {
  [id] {
    scroll-margin-top: calc(var(--header-height) + var(--space-3));
  }
}

/* Estado de foco visible y consistente para navegación por teclado */
:focus-visible {
  outline: 3px solid var(--color-azul);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

::selection {
  background-color: var(--color-dorado);
  color: var(--color-guindo-dark);
}