roi-theme/Assets/Css/css-global-fonts.css

/**
 * Sistema de Tipografías - ROI Theme
 *
 * RESPONSABILIDAD: SOLO definición de fuentes y variables tipográficas
 * - Declaraciones @font-face (comentadas - usar Google Fonts)
 * - Variables CSS de tipografía (:root)
 * - Clases utilitarias de fuentes
 *
 * NO debe contener:
 * - Estilos de body (van en style.css)
 * - Estilos de elementos HTML (van en style.css)
 * - Variables de colores o espaciados (van en variables.css)
 *
 * @package ROI_Theme
 * @since 1.0.0
 */

/* ============================================
   SYSTEM FONTS (Por defecto - Recomendado)
   ============================================ */

:root {
    /* Stack de fuentes del sistema - Fallback */
    --font-system: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
                   Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;

    /* Fuente primaria - Poppins con fallback ajustado (Fase 4.3 PageSpeed)
       'Poppins Fallback' tiene size-adjust para reducir CLS durante font swap */
    --font-primary: 'Poppins', 'Poppins Fallback', sans-serif;

    /* Fuente para encabezados - Poppins con fallback ajustado */
    --font-headings: 'Poppins', 'Poppins Fallback', sans-serif;

    /* Fuente para código (monospace) */
    --font-mono: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono',
                 Consolas, 'Courier New', monospace;

    /* Tamaños de fuente base */
    --font-size-base: 16px;
    --line-height-base: 1.6;
}

/* ELIMINADO: body, code, pre (movidos a style.css)
 * Este archivo SOLO debe contener variables y @font-face
 * Los estilos de elementos HTML van en style.css
 */

/* ============================================
   POPPINS (Self-hosted)
   ============================================

   Fuentes Poppins alojadas localmente para:
   - Eliminar dependencia de Google Fonts
   - Mejorar rendimiento (sin requests externos)
   - Cumplimiento GDPR (sin tracking de Google)

   Pesos incluidos: 400, 500, 600, 700
   Formato: WOFF2 (mejor compresión)

   Fase 4.3 PageSpeed: Fallback con size-adjust para reducir CLS
   - size-adjust: 100.6% ajustado para coincidir mejor con Poppins
   - font-display: swap + preload = carga rapida sin salto visual
   - Preload en CriticalCSSInjector P:-2 acelera descarga de fuentes

   NOTA: El valor 100.6% fue calibrado empiricamente.
   - 106% causaba un salto visual notable (navbar se "achicaba")
   - 100.6% minimiza el CLS manteniendo legibilidad del fallback

   ============================================ */

/* Fallback font con metricas ajustadas para Poppins */
@font-face {
    font-family: 'Poppins Fallback';
    src: local('Arial'), local('Helvetica Neue'), local('Helvetica'), local('sans-serif');
    size-adjust: 100.6%;
    ascent-override: 105%;
    descent-override: 35%;
    line-gap-override: 10%;
}

@font-face {
    font-family: 'Poppins';
    src: url('../Fonts/poppins-v24-latin-regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Poppins';
    src: url('../Fonts/poppins-v24-latin-500.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Poppins';
    src: url('../Fonts/poppins-v24-latin-600.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Poppins';
    src: url('../Fonts/poppins-v24-latin-700.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* ============================================
   UTILIDADES DE FUENTES
   ============================================ */

/* Font Weight Utilities */
.font-light { font-weight: 300; }
.font-regular { font-weight: 400; }
.font-medium { font-weight: 500; }
.font-semibold { font-weight: 600; }
.font-bold { font-weight: 700; }

/* Font Family Utilities */
.font-system {
    font-family: var(--font-system) !important;
}

.font-mono {
    font-family: var(--font-mono) !important;
}

/* Font Size Utilities */
.text-xs { font-size: 0.75rem; line-height: 1.4; }     /* 12px */
.text-sm { font-size: 0.875rem; line-height: 1.5; }    /* 14px */
.text-base { font-size: 1rem; line-height: 1.6; }      /* 16px */
.text-lg { font-size: 1.125rem; line-height: 1.6; }    /* 18px */
.text-xl { font-size: 1.25rem; line-height: 1.5; }     /* 20px */
.text-2xl { font-size: 1.5rem; line-height: 1.4; }     /* 24px */
.text-3xl { font-size: 1.875rem; line-height: 1.3; }   /* 30px */
.text-4xl { font-size: 2.25rem; line-height: 1.2; }    /* 36px */
.text-5xl { font-size: 3rem; line-height: 1.1; }       /* 48px */

/* Line Height Utilities */
.leading-none { line-height: 1; }
.leading-tight { line-height: 1.25; }
.leading-snug { line-height: 1.375; }
.leading-normal { line-height: 1.5; }
.leading-relaxed { line-height: 1.625; }
.leading-loose { line-height: 2; }

/* Text Transform */
.uppercase { text-transform: uppercase; }
.lowercase { text-transform: lowercase; }
.capitalize { text-transform: capitalize; }
.normal-case { text-transform: none; }

/* Font Smoothing */
.text-smooth,
.antialiased {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.subpixel-antialiased {
    -webkit-font-smoothing: auto;
    -moz-osx-font-smoothing: auto;
}

/* ============================================
   RESPONSIVE FONT SIZES
   ============================================ */

/* Móviles (< 768px) */
@media (max-width: 767px) {
    :root {
        --font-size-base: 15px;
    }

    /* ELIMINADO: h1-h6 responsive - Template usa Bootstrap defaults */
}

/* Tablets (768px - 1024px) */
@media (min-width: 768px) and (max-width: 1024px) {
    :root {
        --font-size-base: 16px;
    }
}

/* Desktop (> 1024px) */
@media (min-width: 1025px) {
    :root {
        --font-size-base: 16px;
    }
}

/* ============================================
   PERFORMANCE NOTES
   ============================================

   System Fonts Benefits:
   ✅ 0 HTTP requests (fuentes ya en el sistema)
   ✅ 0 KB descargados (mejora LCP)
   ✅ Sin FOIT/FOUT (sin parpadeo de texto)
   ✅ Mejor Core Web Vitals
   ✅ Familiar para usuarios (fuentes nativas)

   Custom Fonts (Poppins):
   ⚠️ Requiere descarga (~30-50 KB por peso)
   ⚠️ Impacto en LCP si no se optimiza
   ✅ Branding consistente
   ✅ Diseño específico del template

   Recomendación: Mantener system fonts por defecto.
   Solo activar Poppins si el branding lo requiere.

   ============================================ */