FrankZamora 760ad792f6 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>

2025-11-08 15:58:06 -06:00

7.6 KiB

Raw Blame History

View Raw