fix(CLS): Prevenir layout shifts de AdSense y navbar móvil

- 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

@@ -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;
+    }
+}