/* ============================================
   FUENTES LOCALES OPTIMIZADAS
   ============================================
   
   Estrategia de carga:
   - font-display: swap → Muestra fuente del sistema primero, cambia cuando carga
   - Formato WOFF2 → 30% más ligero que TTF
   - Preload en HTML → Carga prioritaria de fuentes críticas
   
   ============================================ */

/* Noto Sans - Regular (400) */
@font-face {
  font-family: 'Noto Sans';
  src: url('../fonts/NotoSans-Regular.woff2') format('woff2'),
       url('../fonts/Noto_Sans/NotoSans-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap; /* Minimiza flash - muestra fallback hasta que cargue */
}

/* Noto Serif Display - Thin (100) */
@font-face {
  font-family: 'Noto Serif Display';
  src: url('../fonts/NotoSerifDisplay-Thin.woff2') format('woff2'),
       url('../fonts/Noto_Serif_Display/NotoSerifDisplay-Thin.ttf') format('truetype');
  font-weight: 100;
  font-style: normal;
  font-display: swap; /* Minimiza flash - muestra fallback hasta que cargue */
}

/* ============================================
   FONT-DISPLAY: Opciones y Comportamiento
   ============================================
   
   swap (RECOMENDADO):
   - Muestra fuente del sistema inmediatamente
   - Cambia a custom cuando carga
   - Flash mínimo (imperceptible si es rápida)
   - ✅ Mejor para UX y SEO
   
   optional (ALTERNATIVA):
   - Si no está en caché, usa fuente del sistema
   - Sin cambio posterior = sin flash
   - ✅ Mejor para performance extrema
   
   block (NO RECOMENDADO):
   - Espera hasta 3s a que cargue
   - Texto invisible mientras tanto
   - ❌ Malo para SEO y UX
   
   fallback (COMPROMISO):
   - Espera 100ms, luego muestra fallback
   - Cambia si carga en 3s
   - ⚠️ Puede causar flash visible
   
   ============================================ */

/* ============================================
   APLICACIÓN DE FUENTES
   ============================================ */

/* Fuente principal para textos */
body,
p,
div,
span,
a,
li,
td,
th,
input,
textarea,
select,
button {
  font-family: 'Noto Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

/* Fuente decorativa para títulos */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: 'Noto Serif Display', Georgia, 'Times New Roman', serif;
}

/* ============================================
   FALLBACK FONTS EXPLICADAS
   ============================================
   
   Cadena de fallback:
   1. 'Noto Sans' → Tu fuente custom
   2. -apple-system → iOS/macOS nativo
   3. BlinkMacSystemFont → macOS Chrome
   4. 'Segoe UI' → Windows nativo
   5. Roboto → Android nativo
   6. 'Helvetica Neue' → macOS/iOS antiguo
   7. Arial → Universal fallback
   8. sans-serif → Genérico del navegador
   
   ============================================ */