From bc85854453b82dc42da0e8322f82307e4ff031c5 Mon Sep 17 00:00:00 2001
From: FrankZamora <prime.leads.app@gmail.com>
Date: Sat, 29 Nov 2025 14:03:28 -0600
Subject: [PATCH] =?UTF-8?q?fix(CLS):=20Prevenir=20layout=20shifts=20de=20A?=
 =?UTF-8?q?dSense=20y=20navbar=20m=C3=B3vil?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Reservar min-height para contenedores AdSense (250px en contenido)
- Navbar collapse posición absoluta en móvil para no empujar contenido
- Hero section min-height 120px

PageSpeed CLS issues addressed:
- body CLS 1.000 (desktop) → AdSense inyectaba height:auto
- navbar-collapse CLS 0.245 (móvil) → menú empujaba contenido
- hero-section CLS 0.033 → sin altura reservada

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

Co-Authored-By: Claude <noreply@anthropic.com>
---
 Assets/css/critical-bootstrap.css | 97 +++++++++++++++++++++++++++++++
 1 file changed, 97 insertions(+)

diff --git a/Assets/css/critical-bootstrap.css b/Assets/css/critical-bootstrap.css
index e5e5a536..0cb5949f 100644
--- a/Assets/css/critical-bootstrap.css
+++ b/Assets/css/critical-bootstrap.css
@@ -867,3 +867,100 @@ table.table th {
 }
 
 /* Site main ya tiene flex-grow: 1 arriba - no forzar min-height */
+
+/* ==========================================================================
+   CLS PREVENTION - AdSense Ads
+   PageSpeed Issue: body CLS 1.000 en desktop, 0.226 en móvil
+   Causa: AdSense inyecta style="height: auto !important" al main-content
+   Solución: Reservar espacio mínimo para ads antes de que se carguen
+   ========================================================================== */
+
+/* Reservar espacio para contenedores de AdSense */
+ins.adsbygoogle {
+    display: block;
+    min-height: 100px; /* Altura mínima mientras carga */
+    background: transparent;
+}
+
+/* Ads en contenido (entre párrafos) - más espacio */
+.post-content ins.adsbygoogle,
+article ins.adsbygoogle {
+    min-height: 250px;
+    margin: 1.5rem 0;
+}
+
+/* Ads en sidebar - menos espacio */
+.sidebar ins.adsbygoogle,
+.col-lg-3 ins.adsbygoogle {
+    min-height: 200px;
+}
+
+/* Prevenir que AdSense manipule el main-content */
+#main-content,
+main.site-main {
+    height: auto;
+    min-height: 0;
+}
+
+/* ==========================================================================
+   CLS PREVENTION - Navbar Collapse (Mobile)
+   PageSpeed Issue: navbar-collapse CLS 0.245 en móvil
+   Causa: Menú sin dimensiones reservadas al colapsar
+   Solución: Reservar espacio para el menú colapsado
+   ========================================================================== */
+
+/* En desktop: navbar-collapse visible con altura auto */
+@media (min-width: 992px) {
+    .navbar-collapse {
+        display: flex !important;
+        flex-basis: auto;
+    }
+}
+
+/* En móvil: cuando está colapsado, no debe afectar layout */
+@media (max-width: 991.98px) {
+    .navbar-collapse {
+        position: absolute;
+        top: 100%;
+        left: 0;
+        right: 0;
+        background: #1e3a5f; /* Navy dark - mismo que navbar */
+        z-index: 1000;
+        padding: 1rem;
+        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+    }
+
+    .navbar-collapse:not(.show) {
+        display: none;
+    }
+
+    /* Menú vertical en móvil */
+    .navbar-collapse .navbar-nav {
+        flex-direction: column;
+        width: 100%;
+    }
+
+    .navbar-collapse .nav-item {
+        width: 100%;
+    }
+
+    .navbar-collapse .nav-link {
+        padding: 0.75rem 1rem;
+        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+    }
+}
+
+/* ==========================================================================
+   CLS PREVENTION - Hero Section
+   PageSpeed Issue: hero-section CLS 0.033 en móvil
+   Solución: Altura mínima para hero
+   ========================================================================== */
+.hero-section {
+    min-height: 120px;
+}
+
+@media (max-width: 767.98px) {
+    .hero-section {
+        min-height: 100px;
+    }
+}