/* HK UI · base: fuentes autoalojadas, reset, tipografía, foco y preferencias de accesibilidad */

/* ---------- fuentes (subconjunto latín, woff2, plan §4.3) ---------- */
@font-face {
  font-family: 'Red Rose';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('../fonts/red-rose-latin-var.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+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Gruppo';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/gruppo-latin.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+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/inter-latin-var.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+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* respaldos con métricas ajustadas: el texto ocupa casi lo mismo antes y después de cargar la fuente (CLS 0) */
@font-face {
  font-family: 'Inter Fallback';
  src: local('Arial'), local('Helvetica');
  size-adjust: 107.12%;
  ascent-override: 90.44%;
  descent-override: 22.52%;
  line-gap-override: 0%;
}
@font-face {
  font-family: 'Red Rose Fallback';
  src: local('Avenir Next'), local('Helvetica Neue'), local('Arial');
  size-adjust: 99%;
  ascent-override: 93%;
  descent-override: 25%;
  line-gap-override: 0%;
}
@font-face {
  font-family: 'Gruppo Fallback';
  src: local('Avenir Next'), local('Helvetica Neue'), local('Arial');
  size-adjust: 111%;
  ascent-override: 90%;
  descent-override: 22%;
  line-gap-override: 0%;
}

/* ---------- reset mínimo ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  scrollbar-width: thin;
  scrollbar-color: var(--border-strong) transparent;
}
body {
  min-height: 100dvh;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--text-md);
  line-height: var(--lh-md);
  font-weight: 400;
  font-feature-settings: 'cv11', 'ss03', 'calt';
  overflow-x: clip;
}
img, picture, video, canvas, svg { display: block; max-width: 100%; }
input, button, textarea, select { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }
a { color: var(--link); text-decoration: none; text-underline-offset: .18em; transition: color var(--dur-micro) ease; }
a:hover { color: var(--link-hover); text-decoration: underline; }
p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; }
p { max-width: 72ch; }
ul[role='list'], ol[role='list'] { list-style: none; padding: 0; }
hr { border: 0; border-top: 1px solid var(--border); }
::selection { background: var(--accent-soft); color: var(--text); }

/* ---------- tipografía (plan §4.3): Red Rose es la voz, Gruppo la navegación, Inter lo demás ---------- */
h1, h2, h3, .t-display {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -.012em;
  color: var(--text);
}
h1 { font-size: var(--text-3xl); line-height: var(--lh-3xl); }
h2 { font-size: var(--text-2xl); line-height: var(--lh-2xl); }
h3 { font-size: var(--text-xl); line-height: var(--lh-xl); }
.t-kpi {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-5xl);
  line-height: var(--lh-5xl);
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}
.t-nav {
  font-family: var(--font-nav);
  font-weight: 400;
  font-size: 1.0625rem;
  letter-spacing: .02em;
  color: var(--text);
  opacity: 1;
}
.t-label { font-size: var(--text-xs); line-height: var(--lh-xs); font-weight: 500; color: var(--text-muted); }
.t-help { font-size: var(--text-2xs); line-height: var(--lh-2xs); color: var(--text-muted); }
.t-muted { color: var(--text-muted); }
.t-small { font-size: var(--text-sm); line-height: var(--lh-sm); }
.tnum { font-variant-numeric: tabular-nums; }
.t-mono { font-family: var(--font-mono); font-size: .8125rem; }

/* ---------- iconos: sprite propio, 24 px, trazo 1.5, currentColor (plan §4.4) ---------- */
.hk-icon {
  inline-size: 24px;
  block-size: 24px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  vertical-align: middle;
}
.hk-icon--sm { inline-size: 20px; block-size: 20px; }
.hk-icon--xs { inline-size: 16px; block-size: 16px; stroke-width: 1.75; }
.hk-icon--lg { inline-size: 32px; block-size: 32px; stroke-width: 1.25; }

/* ---------- foco visible en todo (anillo cobre, 2 px + 2 px de separación) ---------- */
:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
  border-radius: 6px;
}

/* ---------- barras de desplazamiento: siempre delgadas y discretas ---------- */
* { scrollbar-width: thin; }
:root { scrollbar-color: var(--border-strong) transparent; }
::-webkit-scrollbar { inline-size: 6px; block-size: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 999px; }
::-webkit-scrollbar-corner { background: transparent; }

/* ---------- accesibilidad: movimiento y transparencia reducidos ---------- */
:root { --motion-scale: 1; }
@media (prefers-reduced-motion: reduce) {
  :root {
    --motion-scale: 0;
    --dur-micro: 0ms; --dur-enter: 120ms; --dur-exit: 120ms; --dur-module: 120ms; --dur-orchestration: 0ms; --dur-stagger: 0ms;
  }
  html { scroll-behavior: auto; }
}
@media (prefers-reduced-transparency: reduce) {
  :root { --glass-bg: var(--glass-solid); --glass-blur: 0px; }
}
@supports not (backdrop-filter: blur(1px)) {
  :root { --glass-bg: var(--glass-solid); }
}
@media (hover: none) { :root { --hover-enabled: 0; } }

/* ---------- utilidades ---------- */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link { min-block-size: 44px; display: inline-flex; align-items: center;
  position: absolute; left: var(--space-4); top: var(--space-4); z-index: 100;
  padding: var(--space-2) var(--space-4);
  background: var(--accent); color: var(--accent-text);
  border-radius: var(--radius-control);
  transform: translateY(-200%);
  transition: transform var(--dur-micro) var(--ease-enter);
}
.skip-link:focus-visible { transform: translateY(0); }
.stack > * + * { margin-top: var(--space-4); }
.hk-defs { position: absolute; inline-size: 0; block-size: 0; overflow: hidden; }