From 760ad792f655f9b3c694e868c0b5c99c018a4ce2 Mon Sep 17 00:00:00 2001 From: FrankZamora Date: Sat, 8 Nov 2025 15:58:06 -0600 Subject: [PATCH] Fix CTA: Agregar !important para sobrescribir Bootstrap - Issue #126 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit PROBLEMA: Bootstrap estaba sobrescribiendo los estilos de cta.css: - .btn-lg (Bootstrap) sobrescribía font-size y padding del botón - .h4 (Bootstrap) sobrescribía font-size del h3 DIAGNÓSTICO CON CHROME DEVTOOLS MCP: Comparación Template vs Staging: ┌──────────────────┬─────────────┬─────────────┬────────────┐ │ Propiedad │ Template │ Staging │ Esperado │ ├──────────────────┼─────────────┼─────────────┼────────────┤ │ Button fontSize │ 20px │ 16.8px ❌ │ 20px │ │ Button padding │ 12px 32px │ 14px 28px❌ │ 12px 32px │ │ h3 fontSize │ 24px │ 28px ❌ │ 24px │ │ p fontSize │ 16px │ 16.8px ❌ │ 16px │ └──────────────────┴─────────────┴─────────────┴────────────┘ CAUSA: - cta.css se carga DESPUÉS de Bootstrap ✓ - PERO Bootstrap usa clases (.btn-lg, .h4) que tienen mayor especificidad - Template HTML usa las mismas clases, pero el CSS está en style.css SOLUCIÓN: Agregar !important a propiedades que Bootstrap sobrescribe: 1. .cta-section h3: - font-size: 1.5rem !important; (24px) 2. .cta-section p: - font-size: 1rem !important; (16px) 3. .cta-button: - font-size: 1.25rem !important; (20px) ← NUEVO - padding: 0.75rem 2rem !important; (12px 32px) RESULTADO: Estilos ahora coinciden EXACTAMENTE con el template: - h3: 24px ✓ - p: 16px ✓ - Button: 20px, padding 12px 32px ✓ 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude --- wp-content/themes/apus-theme/assets/css/cta.css | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/wp-content/themes/apus-theme/assets/css/cta.css b/wp-content/themes/apus-theme/assets/css/cta.css index f195b97e..92e5d42c 100644 --- a/wp-content/themes/apus-theme/assets/css/cta.css +++ b/wp-content/themes/apus-theme/assets/css/cta.css @@ -44,13 +44,13 @@ .cta-section h3 { color: #ffffff !important; - font-size: 1.5rem; + font-size: 1.5rem !important; margin-bottom: 0.5rem; } .cta-section p { color: rgba(255, 255, 255, 0.95) !important; - font-size: 1rem; + font-size: 1rem !important; line-height: 1.6; } @@ -61,8 +61,9 @@ .cta-button { background-color: var(--color-orange-primary) !important; color: #ffffff !important; + font-size: 1.25rem !important; font-weight: 600; - padding: 0.75rem 2rem; + padding: 0.75rem 2rem !important; border: none; border-radius: 8px; transition: all 0.3s ease;