/**
 * ================================================================
 * CORRECCIÓN DE TEXTOS DESCRIPTIVOS DEBJO DE BOTONES CTA
 * ================================================================
 * Este archivo corrige el tamaño y espaciado de los textos
 * descriptivos que aparecen debajo de botones de call-to-action.
 */

/* ================================================================
 * CORRECCIÓN PARA TEXTOS DESCRIPTIVOS DEBJO DE BOTONES
 * ================================================================ */

/* Texto descriptivo en final-cta */
.final-cta .cta-note {
    font-size: 0.8rem !important; /* Reducido de tamaño por defecto */
    color: var(--text-secondary) !important;
    margin-top: 0.75rem !important; /* Espaciado adecuado del botón */
    line-height: 1.4 !important;
    text-align: center !important;
    opacity: 0.9 !important;
}

/* Texto descriptivo con clase text-sm */
.text-sm.text-text-secondary.mt-4 {
    font-size: 0.8rem !important; /* Reducido de tamaño por defecto */
    color: var(--text-secondary) !important;
    margin-top: 0.75rem !important; /* Espaciado adecuado del botón */
    line-height: 1.4 !important;
    text-align: center !important;
    opacity: 0.9 !important;
}

/* ================================================================
 * RESPONSIVE ADJUSTMENTS
 * ================================================================ */

@media (max-width: 768px) {
    .final-cta .cta-note,
    .text-sm.text-text-secondary.mt-4 {
        font-size: 0.75rem !important; /* Aún más pequeño en móvil */
        margin-top: 0.5rem !important; /* Menos espaciado en móvil */
        padding: 0 1rem !important; /* Padding lateral para mejor legibilidad */
    }
}

@media (max-width: 480px) {
    .final-cta .cta-note,
    .text-sm.text-text-secondary.mt-4 {
        font-size: 0.7rem !important; /* Muy pequeño en móviles pequeños */
        margin-top: 0.5rem !important;
        padding: 0 0.5rem !important;
    }
}

/* ================================================================
 * GARANTÍAS GLOBALES
 * ================================================================ */

/* Asegurar que los textos descriptivos tengan el comportamiento correcto */
.final-cta .cta-note,
.text-sm.text-text-secondary.mt-4 {
    display: block !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    hyphens: auto !important;
    max-width: 100% !important;
}

/* Asegurar que el contenedor final-cta tenga espaciado adecuado */
.final-cta {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 0.75rem !important; /* Espaciado entre botón y texto */
}

/* ================================================================
 * CORRECCIÓN ESPECÍFICA PARA DIFERENTES CONTEXTOS
 * ================================================================ */

/* Para botones grandes */
.btn-large + .cta-note,
.btn-large + .text-sm.text-text-secondary.mt-4 {
    margin-top: 0.75rem !important;
    font-size: 0.8rem !important;
}

/* Para botones normales */
.btn + .cta-note,
.btn + .text-sm.text-text-secondary.mt-4 {
    margin-top: 0.5rem !important;
    font-size: 0.75rem !important;
}