/* ================================================================
   CORRECCIÓN CRÍTICA - VISIBILIDAD DE TEXTOS EN SECCIÓN CTA
   Problema: Texto "TRANSFORMAR" y números estadísticas no visibles
   Fecha: 8 de enero 2025
   ================================================================ */

/* 🎯 CORRECCIÓN 1: Texto "TRANSFORMAR" en CTA */
.cta-section .gradient-text {
    /* Anular el gradiente transparente que causa invisibilidad */
    background: none !important;
    -webkit-background-clip: unset !important;
    -webkit-text-fill-color: white !important;
    background-clip: unset !important;
    color: white !important;
    
    /* Agregar sombra para mejor legibilidad */
    text-shadow: 
        0 2px 4px rgba(0, 0, 0, 0.3),
        0 1px 2px rgba(0, 0, 0, 0.2);
    
    /* Mantener la animación pero visible */
    animation: none !important;
}

/* 🎯 CORRECCIÓN 2: Números de estadísticas (500+, 5+, 100%) */
.cta-stats .stat-number {
    color: white !important;
    
    /* Agregar sombra para mejor contraste */
    text-shadow: 
        0 2px 6px rgba(0, 0, 0, 0.4),
        0 1px 3px rgba(0, 0, 0, 0.3);
    
    /* Asegurar que se mantenga blanco */
    -webkit-text-fill-color: white !important;
    background: none !important;
}

/* 🎯 CORRECCIÓN 3: Etiquetas de estadísticas también en blanco */
.cta-stats .stat-label {
    color: white !important;
    
    /* Sombra sutil para legibilidad */
    text-shadow: 
        0 1px 3px rgba(0, 0, 0, 0.3),
        0 1px 2px rgba(0, 0, 0, 0.2);
}

/* 🎯 CORRECCIÓN 4: Título principal del CTA también debe estar visible */
.cta-title {
    color: white !important;
    text-shadow: 
        0 2px 4px rgba(0, 0, 0, 0.3),
        0 1px 2px rgba(0, 0, 0, 0.2);
}

/* 🎯 CORRECCIÓN 5: Descripción del CTA */
.cta-description {
    color: white !important;
    text-shadow: 
        0 1px 3px rgba(0, 0, 0, 0.2);
}

/* ================================================================
   VERIFICACIÓN DE CONTRASTE - Medidas adicionales
   ================================================================ */

/* Asegurar que TODOS los textos en .cta-section sean blancos */
.cta-section * {
    color: white !important;
}

/* Excepción para botones que tienen su propio esquema de colores */
.cta-section .btn {
    color: white !important;
}

.cta-section .btn-whatsapp {
    color: white !important;
}

/* ================================================================
   FALLBACK: Si hay más elementos con gradiente problemático
   ================================================================ */

/* Cualquier gradient-text dentro de sección con fondo rojo */
.cta-section [class*="gradient"] {
    background: none !important;
    -webkit-background-clip: unset !important;
    -webkit-text-fill-color: white !important;
    color: white !important;
}

/* ================================================================
   RESPONSIVO: Mantener visibilidad en todos los tamaños
   ================================================================ */

@media (max-width: 768px) {
    .cta-section .gradient-text {
        font-size: 2.5rem !important;
        text-shadow: 
            0 3px 6px rgba(0, 0, 0, 0.4),
            0 2px 4px rgba(0, 0, 0, 0.3);
    }
    
    .cta-stats .stat-number {
        font-size: 2.5rem !important;
        text-shadow: 
            0 2px 6px rgba(0, 0, 0, 0.5);
    }
}

/* ================================================================
   FIN DE CORRECCIONES CRÍTICAS
   ================================================================ */