refactor(fonts): cambiar a system fonts - CERO flash

- Eliminar @font-face de Poppins (critical-bootstrap.css, css-global-fonts.css)
- Actualizar --bs-body-font-family a system font stack
- Desactivar font preload en CriticalCSSInjector.php
- Actualizar bootstrap-subset.min.css

System fonts garantizan carga instantánea sin parpadeo.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

Assets/Css/critical-bootstrap.css

@@ -5,7 +5,7 @@
  * NO contiene CSS personalizado (ese va en critical-custom-temp.css - TIPO 3).
  *
  * Componentes Bootstrap incluidos:
- * - Fonts (@font-face Poppins)
+ * - System Fonts (CERO flash - sin @font-face externos)
  * - Variables CSS (:root)
  * - Resets (box-sizing, body)
  * - Container system
@@ -30,45 +30,29 @@
  */
 
 /* ==========================================================================
-   CRITICAL FONTS (Poppins - LCP optimization)
+   SYSTEM FONTS - CERO Flash (sin fuentes externas)
 
-   font-display: swap + preload = fuente carga rapido y siempre se muestra
+   Usa fuentes nativas del sistema operativo:
-   size-adjust: 100.6% = fallback casi identico a Poppins (minimiza CLS)
+   - macOS/iOS: -apple-system, BlinkMacSystemFont
+   - Windows: Segoe UI
+   - Android: Roboto
+   - Linux: Ubuntu/Cantarell
+   - Fallback: sans-serif
+
+   VENTAJAS:
+   - 0 KB descarga (fuentes ya instaladas)
+   - 0 flash/parpadeo (disponibles instantaneamente)
+   - Mejor rendimiento LCP/FCP
+   - Familiar para usuarios (fuentes nativas)
    ========================================================================== */
-@font-face {
-    font-family: 'Poppins Fallback';
-    src: local('Arial'), local('Helvetica Neue'), local('sans-serif');
-    size-adjust: 106%;
-    ascent-override: 105%;
-    descent-override: 35%;
-    line-gap-override: 10%;
-}
-@font-face {
-    font-family: 'Poppins';
-    src: url('/wp-content/themes/roi-theme/Assets/Fonts/poppins-v24-latin-regular.woff2') format('woff2');
-    font-weight: 400;
-    font-style: normal;
-    font-display: swap;
-}
-@font-face {
-    font-family: 'Poppins';
-    src: url('/wp-content/themes/roi-theme/Assets/Fonts/poppins-v24-latin-600.woff2') format('woff2');
-    font-weight: 600;
-    font-style: normal;
-    font-display: swap;
-}
-@font-face {
-    font-family: 'Poppins';
-    src: url('/wp-content/themes/roi-theme/Assets/Fonts/poppins-v24-latin-700.woff2') format('woff2');
-    font-weight: 700;
-    font-style: normal;
-    font-display: swap;
-}
 
 :root {
-    /* Fonts */
+    /* System Font Stack - CERO flash garantizado */
-    --font-primary: 'Poppins', 'Poppins Fallback', sans-serif;
+    --font-system: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
-    --bs-body-font-family: 'Poppins', 'Poppins Fallback', sans-serif;
+                   "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans",
+                   sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
+    --font-primary: var(--font-system);
+    --bs-body-font-family: var(--font-system);
 
     /* Theme Colors (críticos para above-the-fold) */
     --color-navy-dark: #0E2337;

Assets/Css/css-global-fonts.css

@@ -2,10 +2,12 @@
  * 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
  *
+ * NOTA: Usando SYSTEM FONTS para CERO flash/parpadeo
+ * Las fuentes del sistema están disponibles instantáneamente.
+ *
  * NO debe contener:
  * - Estilos de body (van en style.css)
  * - Estilos de elementos HTML (van en style.css)
@@ -16,20 +18,20 @@
  */
 
 /* ============================================
-   SYSTEM FONTS (Por defecto - Recomendado)
+   SYSTEM FONTS - CERO Flash
    ============================================ */
 
 :root {
-    /* Stack de fuentes del sistema - Fallback */
+    /* Stack de fuentes del sistema - disponibles instantáneamente */
     --font-system: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
-                   Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;
+                   'Helvetica Neue', Arial, 'Noto Sans', 'Liberation Sans',
+                   sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji';
 
-    /* Fuente primaria - Poppins con fallback ajustado (Fase 4.3 PageSpeed)
+    /* Fuente primaria - System fonts (CERO flash) */
-       'Poppins Fallback' tiene size-adjust para reducir CLS durante font swap */
+    --font-primary: var(--font-system);
-    --font-primary: 'Poppins', 'Poppins Fallback', sans-serif;
 
-    /* Fuente para encabezados - Poppins con fallback ajustado */
+    /* Fuente para encabezados - System fonts */
-    --font-headings: 'Poppins', 'Poppins Fallback', sans-serif;
+    --font-headings: var(--font-system);
 
     /* Fuente para código (monospace) */
     --font-mono: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono',
@@ -46,70 +48,22 @@
  */
 
 /* ============================================
-   POPPINS (Self-hosted)
+   POPPINS - DESHABILITADO
    ============================================
 
-   Fuentes Poppins alojadas localmente para:
+   Las @font-face de Poppins fueron eliminadas para
-   - Eliminar dependencia de Google Fonts
+   garantizar CERO flash/parpadeo en la carga de página.
-   - Mejorar rendimiento (sin requests externos)
-   - Cumplimiento GDPR (sin tracking de Google)
 
-   Pesos incluidos: 400, 500, 600, 700
+   El sitio ahora usa fuentes del sistema (--font-system)
-   Formato: WOFF2 (mejor compresión)
+   que están disponibles instantáneamente en todos los
+   dispositivos sin necesidad de descarga.
 
-   Fase 4.3 PageSpeed: Fallback con size-adjust para reducir CLS
+   Para reactivar Poppins en el futuro, descomentar las
-   - size-adjust: 100.6% ajustado para coincidir mejor con Poppins
+   declaraciones @font-face y actualizar las variables
-   - font-display: swap + preload = carga rapida sin salto visual
+   --font-primary y --font-headings.
-   - 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: 106%;
-    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
    ============================================ */

Public/CriticalCSS/Infrastructure/Services/CriticalCSSInjector.php

@@ -9,10 +9,11 @@ use ROITheme\Public\CriticalCSS\Domain\Contracts\CriticalCSSCacheInterface;
  * Inyecta CSS critico en wp_head
  *
  * Prioridades:
- * - P:-2 Font preload (antes de variables)
  * - P:-1 Variables CSS (antes de Bootstrap)
  * - P:2  Responsive critico (despues de Bootstrap critico)
  *
+ * NOTA: Font preload deshabilitado - usando system fonts para CERO flash
+ *
  * @package ROITheme\Public\CriticalCSS\Infrastructure\Services
  */
 final class CriticalCSSInjector
@@ -21,23 +22,11 @@ final class CriticalCSSInjector
         private readonly CriticalCSSCacheInterface $cache
     ) {}
 
-    /**
-     * Fuentes criticas para preload (pesos usados en navbar above-the-fold)
-     */
-    private const CRITICAL_FONTS = [
-        '/Assets/Fonts/poppins-v24-latin-regular.woff2',  // 400 - body text
-        '/Assets/Fonts/poppins-v24-latin-600.woff2',      // 600 - navbar brand
-        '/Assets/Fonts/poppins-v24-latin-700.woff2',      // 700 - headings
-    ];
-
     /**
      * Registra hooks de WordPress
      */
     public function register(): void
     {
-        // Font preload: P:-2 (antes de todo, incluso variables)
-        add_action('wp_head', [$this, 'preloadFonts'], -2);
-
         // Variables CSS: P:-1 (antes de CriticalBootstrapService P:0)
         add_action('wp_head', [$this, 'injectVariables'], -1);
 
@@ -49,25 +38,6 @@ final class CriticalCSSInjector
         add_action('wp_enqueue_scripts', [$this, 'dequeueInlinedCSS'], 999);
     }
 
-    /**
-     * Inyecta preload links para fuentes criticas
-     *
-     * Resuelve el problema de "font swap" donde el fallback (106% size-adjust)
-     * causa un salto visual cuando Poppins se carga.
-     * Con preload, las fuentes llegan antes del primer paint.
-     */
-    public function preloadFonts(): void
-    {
-        echo "<!-- TIPO 4: Font preload para evitar CLS -->\n";
-
-        foreach (self::CRITICAL_FONTS as $font) {
-            printf(
-                '<link rel="preload" href="%s" as="font" type="font/woff2" crossorigin>' . "\n",
-                esc_url(get_template_directory_uri() . $font)
-            );
-        }
-    }
-
     /**
      * Inyecta variables CSS criticas
      */