Fix CTA: Agregar !important para sobrescribir Bootstrap - Issue #126

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 <noreply@anthropic.com>
This commit is contained in:
FrankZamora
2025-11-08 15:58:06 -06:00
parent b353b5eb04
commit 760ad792f6

View File

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