@font-face {
  font-family: "Handelson Three";
  src: url("../../fonts/HandelsonThree.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-headings);
  font-weight: var(--font-weight-medium);
  color: var(--color-text);
}

/* h1 y h2 comparten el mismo peso; h3-h6 son más ligeros para marcar la jerarquía */
h1,
h2 {
  font-weight: var(--font-weight-semibold);
}

h1 { font-size: clamp(3.2rem, 7vw, 4.8rem); line-height: 1.15; }
h2 { font-size: clamp(2.8rem, 6vw, 4rem);   line-height: 1.2; }
h3 { font-size: 3.2rem; line-height: 1.25; }
h4 { font-size: 2.8rem; line-height: 1.3; }
h5 { font-size: 2.4rem; line-height: 1.35; }
h6 { font-size: 2rem;   line-height: 1.4; }

strong,
b {
  font-weight: var(--font-weight-semibold);
}

/* Párrafos */
.text-lead {
  font-size: 1.8rem;
  font-weight: var(--font-weight-medium);
  line-height: 1.5;
}

.text-small {
  font-size: 1.4rem;
  line-height: 1.5;
}

/* Cejilla decorativa */
.tagline {
  font-family: var(--font-tagline);
  font-size: 2.2rem;
  font-weight: var(--font-weight-regular);
  line-height: 1.2;
  color: var(--color-primary);
}

/* Variantes hero */
.title-display {
  font-size: clamp(3.2rem, 7vw, 6.4rem);
  font-weight: var(--font-weight-semibold);
  line-height: 1.1;
}

.title-editorial {
  font-size: clamp(3rem, 5.5vw, 5.2rem);
  font-weight: var(--font-weight-semibold);
  line-height: 1.15;
}

/* Eyebrow: cejilla en mayúsculas sobre los títulos de sección */
.eyebrow {
  font-size: 1.2rem;
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.1em;
  line-height: 1.4;
  text-transform: uppercase;
  color: var(--color-primary);
}

/* Párrafos en gris; sobre fondos oscuros heredan el color del contenedor */
p {
  font-size: 2rem;
  font-weight: var(--font-weight-regular);
  color: var(--color-text-muted);
}

/* Los párrafos dentro de bloques que ya fijan su tamaño (hero, acordeón, barra inferior del footer) lo heredan */
.text-lead p,
.text-small p,
.accordion__answer p,
.site-footer__bottom p {
  font-size: inherit;
}

.section--dark p,
.hero p,
.topbar p {
  color: inherit;
}