diff --git a/wp-content/themes/apus-theme/assets/css/cta.css b/wp-content/themes/apus-theme/assets/css/cta.css index 92e5d42c..d484192f 100644 --- a/wp-content/themes/apus-theme/assets/css/cta.css +++ b/wp-content/themes/apus-theme/assets/css/cta.css @@ -1,325 +1,53 @@ /** * CTA A/B Testing Styles * - * Estilos para el Call-to-Action con diseño degradado naranja-amarillo, - * sombra prominente y efectos de hover. + * CSS EXACTO copiado del template style.css (líneas 835-865) + * Sin extras, sin !important innecesario, sin media queries complicadas * * @package APUS_Theme - * @since 1.0.0 + * @since 1.0.2 */ -/* ============================================================================ - CTA SECTION BASE - ========================================================================= */ - .cta-section { 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: 12px; padding: 2rem; - transition: all 0.3s ease; - position: relative; - overflow: hidden; } -.cta-section::before { - content: ''; - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; - background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0) 100%); - pointer-events: none; -} - -.cta-section:hover { - box-shadow: 0 12px 32px rgba(255, 133, 0, 0.4); - transform: translateY(-2px); -} - -/* ============================================================================ - CTA CONTENT - ========================================================================= */ - .cta-section h3 { color: #ffffff !important; - font-size: 1.5rem !important; - margin-bottom: 0.5rem; } .cta-section p { color: rgba(255, 255, 255, 0.95) !important; - font-size: 1rem !important; - line-height: 1.6; } -/* ============================================================================ - CTA BUTTON - ========================================================================= */ - .cta-button { - background-color: var(--color-orange-primary) !important; - color: #ffffff !important; - font-size: 1.25rem !important; + background-color: var(--color-orange-primary); + color: #ffffff; font-weight: 600; - padding: 0.75rem 2rem !important; + padding: 0.75rem 2rem; border: none; border-radius: 8px; transition: all 0.3s ease; text-decoration: none; - display: inline-flex; - align-items: center; - gap: 0.5rem; - white-space: nowrap; + display: inline-block; } .cta-button:hover { - background-color: var(--color-orange-hover) !important; - color: #ffffff !important; - transform: translateY(-2px); + background-color: var(--color-orange-hover); + color: #ffffff; } -.cta-button:active { - transform: translateY(0); -} - -.cta-button:focus { - outline: 2px solid rgba(255, 255, 255, 0.5); - outline-offset: 2px; -} - -.cta-button i { - transition: transform 0.3s ease; - font-size: 1.1rem; -} - -.cta-button:hover i { - transform: translateX(4px); -} - -/* ============================================================================ - VARIANTES A y B (por si se necesita estilos específicos) - ========================================================================= */ - -.cta-variant-a { - /* Variante A - Catálogo */ - /* Usa los estilos base */ -} - -.cta-variant-b { - /* Variante B - Membresía */ - /* Usa los estilos base */ -} - -/* ============================================================================ - RESPONSIVE - MOBILE - ========================================================================= */ - -@media (max-width: 767.98px) { +/* Responsive Mobile */ +@media (max-width: 768px) { .cta-section { - padding: 1.5rem !important; - } - - .cta-section h3 { - font-size: 1.25rem; - margin-bottom: 0.75rem; - } - - .cta-section p { - font-size: 0.9rem; - margin-bottom: 1rem !important; + padding: 1.5rem; } .cta-button { width: 100%; - justify-content: center; - padding: 0.875rem 1.25rem; - font-size: 1rem; - } - - /* Stack vertical en mobile */ - .cta-section .col-md-4 { - margin-top: 1rem !important; + margin-top: 1rem; } } - -/* ============================================================================ - RESPONSIVE - TABLET - ========================================================================= */ - -@media (min-width: 768px) and (max-width: 991.98px) { - .cta-section h3 { - font-size: 1.35rem; - } - - .cta-section p { - font-size: 0.95rem; - } - - .cta-button { - padding: 0.75rem 1.25rem; - font-size: 0.95rem; - } -} - -/* ============================================================================ - RESPONSIVE - DESKTOP LARGE - ========================================================================= */ - -@media (min-width: 1200px) { - .cta-section h3 { - font-size: 1.75rem; - } - - .cta-section p { - font-size: 1.05rem; - } - - .cta-button { - padding: 0.875rem 1.75rem; - font-size: 1.05rem; - } -} - -/* ============================================================================ - ACCESSIBILITY - ========================================================================= */ - -/* Mejoras de accesibilidad para usuarios con motion reducido */ -@media (prefers-reduced-motion: reduce) { - .cta-section, - .cta-button, - .cta-button i { - transition: none; - } - - .cta-section:hover { - transform: none; - } - - .cta-button:hover { - transform: none; - } - - .cta-button:hover i { - transform: none; - } -} - -/* Alto contraste para usuarios con necesidades especiales */ -@media (prefers-contrast: high) { - .cta-section { - border: 2px solid #FF8600; - } - - .cta-button { - border: 2px solid #FF8600 !important; - } -} - -/* ============================================================================ - DARK MODE SUPPORT (si se implementa en el futuro) - ========================================================================= */ - -@media (prefers-color-scheme: dark) { - /* Los colores del CTA se mantienen igual para visibilidad */ - .cta-section { - box-shadow: 0 8px 24px rgba(255, 133, 0, 0.4); - } -} - -/* ============================================================================ - PRINT STYLES - ========================================================================= */ - -@media print { - .cta-section { - background: #fff; - border: 2px solid #FF8600; - box-shadow: none; - page-break-inside: avoid; - } - - .cta-section h3, - .cta-section p { - color: #000 !important; - text-shadow: none; - } - - .cta-button { - border: 2px solid #FF8600 !important; - color: #FF8600 !important; - background-color: #fff !important; - } - - .cta-button i { - display: none; - } -} - -/* ============================================================================ - LOADING STATE (opcional para futuras mejoras) - ========================================================================= */ - -.cta-section.is-loading { - opacity: 0.6; - pointer-events: none; -} - -.cta-section.is-loading .cta-button { - position: relative; -} - -.cta-section.is-loading .cta-button::after { - content: ''; - position: absolute; - width: 16px; - height: 16px; - top: 50%; - right: 1rem; - margin-top: -8px; - border: 2px solid #FF8600; - border-radius: 50%; - border-top-color: transparent; - animation: cta-spinner 0.6s linear infinite; -} - -@keyframes cta-spinner { - to { - transform: rotate(360deg); - } -} - -/* ============================================================================ - ANIMATION ENTRANCE (opcional) - ========================================================================= */ - -.cta-section.fade-in-up { - animation: fadeInUp 0.6s ease-out; -} - -@keyframes fadeInUp { - from { - opacity: 0; - transform: translateY(20px); - } - to { - opacity: 1; - transform: translateY(0); - } -} - -/* ============================================================================ - RTL SUPPORT (por si se requiere en el futuro) - ========================================================================= */ - -[dir="rtl"] .cta-button i { - margin-right: 0.5rem; - margin-left: 0; - transform: scaleX(-1); -} - -[dir="rtl"] .cta-button:hover i { - transform: translateX(-4px) scaleX(-1); -} diff --git a/wp-content/themes/apus-theme/functions.php b/wp-content/themes/apus-theme/functions.php index 131118f1..3758dcdd 100644 --- a/wp-content/themes/apus-theme/functions.php +++ b/wp-content/themes/apus-theme/functions.php @@ -14,7 +14,7 @@ if (!defined('ABSPATH')) { /** * Theme Version */ -define('APUS_VERSION', '1.0.1'); +define('APUS_VERSION', '1.0.2'); /** * Theme Setup