/* =============================================================================
   Tipografía — Hanken Grotesk self-hosted + jerarquía del manual
   ========================================================================== */

/* === @font-face === */

/* Light 300 */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('../../fonts/hanken-grotesk-light.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('../../fonts/hanken-grotesk-light-ext.woff2') format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Medium 500 */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../../fonts/hanken-grotesk-medium.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../../fonts/hanken-grotesk-medium-ext.woff2') format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Bold 700 */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../../fonts/hanken-grotesk-bold.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../../fonts/hanken-grotesk-bold-ext.woff2') format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* === Defaults === */
body {
  font-size: var(--fs-p-m);
  line-height: var(--lh-p-m);
  font-weight: var(--fw-medium);
  letter-spacing: 0;
  color: var(--color-text);
}

/* === Jerarquía editorial mapeada a HTML estándar ===
   El cliente escribe h1-h6 normales en Gutenberg; aquí los pintamos
   con la escala del manual. Las clases utilitarias .h-xxl, .p-xl... permiten
   forzar un tamaño cuando hace falta sin tocar la semántica. */

h1, .h-xxl {
  font-size: clamp(2rem, 5vw, var(--fs-h-xxl));
  line-height: var(--lh-h-xxl);
  font-weight: var(--fw-bold);
  letter-spacing: -0.01em;
}

h2, .h-xl {
  font-size: clamp(1.875rem, 4vw, var(--fs-h-xl));
  line-height: var(--lh-h-xl);
  font-weight: var(--fw-bold);
  letter-spacing: -0.01em;
}

h3, .h-l {
  font-size: clamp(1.5rem, 3vw, var(--fs-h-l));
  line-height: var(--lh-h-l);
  font-weight: var(--fw-bold);
}

h4, .h-m {
  font-size: var(--fs-h-m);
  line-height: var(--lh-h-m);
  font-weight: var(--fw-bold);
}

h5, .h-s {
  font-size: var(--fs-h-s);
  line-height: var(--lh-h-s);
  font-weight: var(--fw-bold);
}

h6, .h-t {
  font-size: var(--fs-h-t);
  line-height: var(--lh-h-t);
  font-weight: var(--fw-bold);
}

.p-xl { font-size: var(--fs-p-xl); line-height: var(--lh-p-xl); }
.p-l  { font-size: var(--fs-p-l);  line-height: var(--lh-p-l);  }
.p-m  { font-size: var(--fs-p-m);  line-height: var(--lh-p-m);  }
.p-s  { font-size: var(--fs-p-s);  line-height: var(--lh-p-s);  }
.p-t  { font-size: var(--fs-p-t);  line-height: var(--lh-p-t);  }

.fw-light  { font-weight: var(--fw-light);  }
.fw-medium { font-weight: var(--fw-medium); }
.fw-bold   { font-weight: var(--fw-bold);   }

p { margin-block-end: 0; }
p + p { margin-block-start: 1em; }

a { transition: color var(--t-fast); }
a:hover { color: var(--color-burgundy); }

strong { font-weight: var(--fw-bold); }

::selection { background: var(--color-pink-medium); color: var(--color-text); }