/* Jerarquía tipográfica. Equivalente a los estilos h1/h2/h3/p de los HTML originales. */

h1, h2, h3, h4, h5, h6 {
  color: var(--color-dark);
}

h1 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(2.25rem, 5vw, var(--text-6xl));
  line-height: 1.15;
  letter-spacing: -0.02em;
}

h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.75rem, 3.5vw, var(--text-4xl));
  line-height: 1.15;
  letter-spacing: -0.015em;
}

/* En los HTML, el <em> dentro de h1/h2 se usa como acento naranja sin cursiva. */
h1 em, h2 em {
  font-style: normal;
  color: var(--color-orange);
  font-weight: 600;
}

h3 {
  font-family: var(--font-body);
  font-weight: 700;
  color: var(--color-orange);
  font-size: var(--text-xl);
  line-height: 1.3;
}

h4 {
  font-family: var(--font-body);
  font-weight: 700;
  color: var(--color-dark);
  font-size: var(--text-lg);
  line-height: 1.35;
}

p {
  color: var(--color-gray);
}

/* Punto decorativo final en titulares (clase reutilizable: .has-dot::after). */
.has-dot::after {
  content: '.';
  color: var(--color-orange);
}

/* Fondos dark: heredan letra blanca para titulares y p */
.section--dark,
.section--dark h1,
.section--dark h2,
.section--dark h4 {
  color: var(--color-white);
}
.section--dark p {
  color: rgba(255, 255, 255, 0.85);
}