Fix CTA A/B Testing: Corregir selectores CSS de .apus-cta-wrapper a .cta-section

Problema diagnosticado:
- HTML en single.php usa clase .cta-section
- CSS en cta.css usaba clase .apus-cta-wrapper
- Los estilos NO se aplicaban (sin gradiente, sin box-shadow, botón blanco)

Cambios realizados en cta.css:
- Cambiar TODOS los selectores .apus-cta-wrapper → .cta-section
- Actualizar .cta-section para usar variables CSS (--color-orange-primary, --color-orange-light)
- Agregar color: #ffffff !important a h3
- Agregar color: rgba(255, 255, 255, 0.95) !important a p
- Cambiar botón de blanco a naranja (background: var(--color-orange-primary))
- Cambiar hover de botón a naranja-hover (background: var(--color-orange-hover))
- Aumentar border-radius de 0.5rem a 12px (según documentación)
- Aumentar padding de 0.75rem 1.5rem a 0.75rem 2rem en botón
- Actualizar border-radius botón de 0.375rem a 8px

Ahora los estilos coinciden con la documentación:
- Gradiente naranja de fondo
- Box shadow naranja pronunciada
- Textos blancos
- Botón naranja (no blanco)

Issue #126

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

Co-Authored-By: Claude <noreply@anthropic.com>

wp-content/themes/apus-theme/assets/css/cta.css

@@ -12,16 +12,17 @@
    CTA SECTION BASE
    ========================================================================= */
 
-.apus-cta-wrapper {
+.cta-section {
-    background: linear-gradient(135deg, #FF8600 0%, #FFB800 100%);
+    background: linear-gradient(135deg, var(--color-orange-primary) 0%, var(--color-orange-light) 100%);
     box-shadow: 0 8px 24px rgba(255, 133, 0, 0.3);
-    border-radius: 0.5rem;
+    border-radius: 12px;
+    padding: 2rem;
     transition: all 0.3s ease;
     position: relative;
     overflow: hidden;
 }
 
-.apus-cta-wrapper::before {
+.cta-section::before {
     content: '';
     position: absolute;
     top: 0;
@@ -32,7 +33,7 @@
     pointer-events: none;
 }
 
-.apus-cta-wrapper:hover {
+.cta-section:hover {
     box-shadow: 0 12px 32px rgba(255, 133, 0, 0.4);
     transform: translateY(-2px);
 }
@@ -42,15 +43,16 @@
    ========================================================================= */
 
 .cta-section h3 {
+    color: #ffffff !important;
     text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
     font-size: 1.5rem;
     margin-bottom: 0.5rem;
 }
 
 .cta-section p {
+    color: rgba(255, 255, 255, 0.95) !important;
     font-size: 1rem;
     line-height: 1.6;
-    opacity: 0.95;
 }
 
 /* ============================================================================
@@ -58,25 +60,26 @@
    ========================================================================= */
 
 .cta-button {
-    transition: all 0.3s ease;
+    background-color: var(--color-orange-primary) !important;
+    color: #ffffff !important;
     font-weight: 600;
-    padding: 0.75rem 1.5rem;
+    padding: 0.75rem 2rem;
-    border-radius: 0.375rem;
+    border: none;
-    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+    border-radius: 8px;
+    transition: all 0.3s ease;
+    text-decoration: none;
     display: inline-flex;
     align-items: center;
     gap: 0.5rem;
     white-space: nowrap;
-    background-color: #ffffff !important;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
-    color: #FF8600 !important;
-    border: none;
 }
 
 .cta-button:hover {
+    background-color: var(--color-orange-hover) !important;
+    color: #ffffff !important;
     transform: translateY(-2px);
     box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
-    background-color: #f8f9fa !important;
-    color: #FF8600 !important;
 }
 
 .cta-button:active {
@@ -117,7 +120,7 @@
    ========================================================================= */
 
 @media (max-width: 767.98px) {
-    .apus-cta-wrapper {
+    .cta-section {
         padding: 1.5rem !important;
     }
 
@@ -139,7 +142,7 @@
     }
 
     /* Stack vertical en mobile */
-    .apus-cta-wrapper .col-md-4 {
+    .cta-section .col-md-4 {
         margin-top: 1rem !important;
     }
 }
@@ -188,13 +191,13 @@
 
 /* Mejoras de accesibilidad para usuarios con motion reducido */
 @media (prefers-reduced-motion: reduce) {
-    .apus-cta-wrapper,
+    .cta-section,
     .cta-button,
     .cta-button i {
         transition: none;
     }
 
-    .apus-cta-wrapper:hover {
+    .cta-section:hover {
         transform: none;
     }
 
@@ -209,7 +212,7 @@
 
 /* Alto contraste para usuarios con necesidades especiales */
 @media (prefers-contrast: high) {
-    .apus-cta-wrapper {
+    .cta-section {
         border: 2px solid #FF8600;
     }
 
@@ -224,7 +227,7 @@
 
 @media (prefers-color-scheme: dark) {
     /* Los colores del CTA se mantienen igual para visibilidad */
-    .apus-cta-wrapper {
+    .cta-section {
         box-shadow: 0 8px 24px rgba(255, 133, 0, 0.4);
     }
 }
@@ -234,7 +237,7 @@
    ========================================================================= */
 
 @media print {
-    .apus-cta-wrapper {
+    .cta-section {
         background: #fff;
         border: 2px solid #FF8600;
         box-shadow: none;
@@ -262,16 +265,16 @@
    LOADING STATE (opcional para futuras mejoras)
    ========================================================================= */
 
-.apus-cta-wrapper.is-loading {
+.cta-section.is-loading {
     opacity: 0.6;
     pointer-events: none;
 }
 
-.apus-cta-wrapper.is-loading .cta-button {
+.cta-section.is-loading .cta-button {
     position: relative;
 }
 
-.apus-cta-wrapper.is-loading .cta-button::after {
+.cta-section.is-loading .cta-button::after {
     content: '';
     position: absolute;
     width: 16px;
@@ -295,7 +298,7 @@
    ANIMATION ENTRANCE (opcional)
    ========================================================================= */
 
-.apus-cta-wrapper.fade-in-up {
+.cta-section.fade-in-up {
     animation: fadeInUp 0.6s ease-out;
 }