fix(js): implement google official css for unfilled adsense slots

Remove eager loading, revert to Intersection Observer with 600px
rootMargin. Use google css: ins[data-ad-status=unfilled]{display:none}

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

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

Assets/Js/adsense-loader.js

@@ -18,10 +18,15 @@
 
     /**
      * Configuracion por defecto, sobrescrita por window.roiAdsenseConfig
+     *
+     * rootMargin: 600px precarga slots 600px antes de entrar al viewport.
+     * Esto da tiempo suficiente para que AdSense cargue el anuncio antes
+     * de que el usuario llegue al slot, evitando layout shift.
+     * Basado en best practices: https://support.google.com/adsense/answer/10762946
      */
     var DEFAULT_CONFIG = {
         lazyEnabled: true,
-        rootMargin: '200px 0px',
+        rootMargin: '600px 0px',
         fillTimeout: 5000,
         debug: false
     };
@@ -593,33 +598,19 @@
         });
     }
 
-    // =========================================================================
-    // EAGER LOADING (ACTIVACION INMEDIATA)
-    // =========================================================================
-
-    /**
-     * Activa todos los slots inmediatamente sin esperar viewport.
-     * Los slots inician colapsados (CSS) y solo se expanden si reciben anuncio.
-     * Esto evita layout shift porque el usuario nunca ve espacios vacios.
-     */
-    function activateAllSlotsEagerly() {
-        var slots = document.querySelectorAll('.roi-ad-slot[data-ad-lazy="true"]');
-        debugLog('Activando ' + slots.length + ' slots de manera eager');
-
-        slots.forEach(function(slot, index) {
-            // Pequeño delay escalonado para no saturar AdSense
-            setTimeout(function() {
-                activateSlot(slot);
-            }, index * 100); // 100ms entre cada slot
-        });
-    }
-
     // =========================================================================
     // INICIALIZACION
     // =========================================================================
 
     /**
      * Inicializa el sistema
+     *
+     * ESTRATEGIA v2.2 (basada en documentacion oficial de Google):
+     * - Los slots NO estan ocultos inicialmente (Google puede no ejecutar requests para slots ocultos)
+     * - Usamos Intersection Observer con rootMargin grande (600px) para precargar
+     * - Google automaticamente oculta slots unfilled via CSS: ins[data-ad-status="unfilled"]
+     * - Nuestro CSS colapsa el contenedor .roi-ad-slot cuando el ins tiene unfilled
+     * - Esto funciona MEJOR que eager loading porque no satura AdSense con requests simultaneos
      */
     function init() {
         // Siempre configurar listener para ads dinamicos
@@ -632,8 +623,8 @@
             return;
         }
 
-        debugLog('Inicializando AdSense Lazy Loader v2.1 (Eager Mode)');
-        debugLog('Config: lazyEnabled=' + CONFIG.lazyEnabled + ', fillTimeout=' + CONFIG.fillTimeout);
+        debugLog('Inicializando AdSense Lazy Loader v2.2 (IO + Google Official CSS)');
+        debugLog('Config: lazyEnabled=' + CONFIG.lazyEnabled + ', rootMargin=' + CONFIG.rootMargin + ', fillTimeout=' + CONFIG.fillTimeout);
 
         // Decidir modo de operacion
         if (!CONFIG.lazyEnabled) {
@@ -642,20 +633,26 @@
             return;
         }
 
-        // NUEVA ESTRATEGIA: Eager loading
-        // En lugar de esperar a que los slots entren al viewport (lo cual causa
-        // layout shift cuando se ocultan slots vacios), activamos todos los slots
-        // inmediatamente. Los slots inician colapsados via CSS y solo se expanden
-        // cuando AdSense confirma que tienen anuncio (filled).
-        // Esto elimina completamente el layout shift.
-        debugLog('Usando modo eager: activar todos los slots inmediatamente');
+        // Verificar soporte para Intersection Observer
+        if (!hasIntersectionObserverSupport()) {
+            debugLog('Sin soporte IO, usando modo legacy', 'warn');
+            initLegacyMode();
+            return;
+        }
 
-        // Esperar a que el DOM este listo
+        // Inicializar Intersection Observer
+        if (!initIntersectionObserver()) {
+            debugLog('Fallo inicializando IO, usando modo legacy', 'warn');
+            initLegacyMode();
+            return;
+        }
+
+        // Esperar a que el DOM este listo y observar slots
         if (document.readyState === 'interactive' || document.readyState === 'complete') {
-            activateAllSlotsEagerly();
+            observeAllSlots();
         } else {
             document.addEventListener('DOMContentLoaded', function() {
-                activateAllSlotsEagerly();
+                observeAllSlots();
             });
         }
     }