/* ============================================================================
   Faronte · capa de dirección de UI (inspirada en Apple / HIG)
   Se carga DESPUÉS del <style> propio de cada página → refina sin reescribir.
   - Fuentes AUTOHOSPEDADAS (adiós al CDN de Google Fonts): mismos family names.
   - Reafinado de tokens hacia HIG: marca unificada #2B4EFF, neutros fríos, sombras sutiles.
   - Iconos Lucide (ISC) en las tiles .ic, reemplazando emojis.
   Tipografías: Inter (SIL OFL) · Sora (SIL OFL). Iconos: Lucide v1.33.0 (ISC) — ver /assets/CREDITS.
   ========================================================================== */

/* --- Fuentes autohospedadas (variable, un archivo por familia) --- */
@font-face{
  font-family:'Inter';font-style:normal;font-weight:100 900;font-display:swap;
  src:url('/assets/inter-var.woff2') format('woff2');
}
@font-face{
  font-family:'Sora';font-style:normal;font-weight:100 800;font-display:swap;
  src:url('/assets/sora.woff2') format('woff2');
}

/* --- Reafinado de tokens (la página los usa vía var(); esto los redefine) --- */
:root{
  --brand:#2B4EFF; --brand-d:#1e3fd8;
  --ink:#0b1020; --muted:#5b6472; --line:#e6e9f2;
  --soft:#f6f8fc; --soft2:#eaefff;
  --grad:linear-gradient(135deg,#2B4EFF,#4d7cff);
  /* Profundidad sutil, no pesada (HIG: deference/depth) */
  --shadow:0 14px 34px -16px rgba(16,22,60,.20);
  --shadow-sm:0 4px 14px -8px rgba(16,22,60,.16);
}

/* --- Tipografía más limpia --- */
body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;letter-spacing:-.011em}
h1,h2,h3{letter-spacing:-.018em;text-wrap:balance}
h1{line-height:1.06}

/* --- Iconos: SVG Lucide dentro de las tiles .ic (antes: emoji) --- */
.ic{color:var(--brand)}
.ic>svg,.ic svg.ico,svg.ico{width:18px;height:18px;stroke:currentColor;fill:none;
  stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round;display:block}

/* --- Foco accesible visible (HIG) + respeto a reduce-motion --- */
a:focus-visible,button:focus-visible,.btn:focus-visible,[tabindex]:focus-visible{
  outline:2px solid var(--brand);outline-offset:2px;border-radius:8px}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}