/* ============================================== */
/* === TEMA SaaS: AUTOMATIZACIÓN MULTI-RUBRO ==== */
/* ============================================== */

:root {
    --primary-color: #0f172a !important;
    /* Azul Pizarra Oscuro (Moderno y Tecnológico) */
    --secondary-color: #f8fafc !important;
    /* Blanco Roto (Contraste limpio) */
    --accent-color: #f97316 !important;
    /* Naranja Vibrante (Acción y Agilidad) */
    --text-color: #94a3b8 !important;
    /* Gris Azulado Claro (Lectura cómoda) */
}

/* --- Ajuste de opacidad en la capa del video --- */
.hero-overlay {
    background-color: rgba(15, 23, 42, 0.85) !important;
}

/* --- Micro-interacciones SaaS para Retención (UX) --- */
.pricing-plan {
    transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease !important;
}

.pricing-plan:hover {
    box-shadow: 0 10px 25px rgba(249, 115, 22, 0.15) !important;
    /* Resplandor naranja sutil */
}

.feature-item {
    transition: transform 0.3s ease, box-shadow 0.3s ease !important;
    background-color: rgba(255, 255, 255, 0.03) !important;
    /* Efecto más limpio */
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.feature-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.4) !important;
    border-color: rgba(249, 115, 22, 0.3);
}

.subscribe-form input[type="email"],
.subscribe-form input[type="number"],
.subscribe-form input[type="text"],
.subscribe-form input[type="tel"] {
    background-color: #1e293b !important;
    /* Fondo de inputs adaptado al nuevo Azul */
    border: 1px solid #334155 !important;
}

.subscribe-form input:focus {
    outline: none;
    border-color: var(--accent-color) !important;
}

/* --- Corrección del color hover (verde a naranja oscuro) para todos los botones --- */
.cta-button:hover,
.subscribe-form button:hover,
.back-to-top-btn:hover,
.cta-button-login:hover {
    background-color: #ea580c !important;
    /* Un tono naranja más intenso y elegante para el clic */
}

/* --- Ajuste responsivo para 4 planes (Plan Premium) --- */
.pricing-table {
    gap: 15px !important;
    /* Reducimos ligeramente la separación para optimizar espacio */
}

.pricing-plan {
    width: 23% !important;
    /* Permite 4 tarjetas en fila en escritorio */
    min-width: 250px !important;
    /* Evita que se encojan demasiado en pantallas medianas */
    padding: 20px !important;
}

/* En tablets (992px), forzamos 2 columnas de 2 tarjetas */
@media (max-width: 992px) {
    .pricing-plan {
        width: 45% !important;
    }
}

/* En móviles (576px), forzamos 1 sola columna como ya estaba configurado */
@media (max-width: 576px) {
    .pricing-plan {
        width: 90% !important;
    }
}

/* --- Corrección de separación vertical en modo responsivo (Tablets y Móviles) --- */
@media (max-width: 992px) {
    .pricing-table {
        /* Aumentamos la separación vertical para que las insignias no choquen con la tarjeta superior */
        row-gap: 45px !important;
    }
}

/* --- Corrección de alineación y espacios uniformes en Escritorio --- */
@media (min-width: 993px) {
    .pricing-table {
        align-items: stretch !important;
        /* Fuerza a que todas las tarjetas se nivelen perfectamente */
        margin-top: 20px !important;
        /* Evita que las insignias superiores choquen con el texto de arriba */
    }

    .pricing-plan.recommended {
        transform: none !important;
        /* Anula el aumento de tamaño para que encaje simétricamente con las otras 3 */
    }

    .pricing-plan:hover,
    .pricing-plan.recommended:hover {
        transform: translateY(-5px) !important;
        /* Aplica el efecto de elevación al pasar el mouse de forma idéntica a todas */
    }
}

/* ============================================== */
/* === ESTANDARIZACIÓN VISUAL Y ESPACIADOS ====== */
/* ============================================== */

/* 1. Centrado perfecto del texto descriptivo en la sección de Planes */
.pricing-section>p {
    margin-top: 15px !important;
    /* Respiro hacia el título superior */
    margin-bottom: 40px !important;
    /* Respiro hacia las tarjetas inferiores */
}

/* Quitamos el margen superior de la caja de planes para que el párrafo dictamine el centro exacto */
@media (min-width: 993px) {
    .pricing-table {
        margin-top: 0 !important;
    }
}

/* 2. Mayor respiro debajo de la línea divisoria de los Títulos Principales */
.section-title {
    margin-bottom: 50px !important;
    /* Antes era 30px, esto le da más elegancia al diseño */
}

/* 3. Separación adecuada para los pequeños subtítulos (Ventajas y Clientes) */
.section-subtitle {
    margin-bottom: 15px !important;
    /* Antes era 5px, se veía muy apretado contra el título grande */
}

/* 4. Armonización de la cuadrícula de Características */
.features-grid {
    gap: 30px !important;
    /* Uniformiza el espacio vertical y horizontal para que respiren las tarjetas */
}

/* --- ESTILO DE SCROLLBAR SUTIL Y ELEGANTE --- */
#modalPremium .modal-content::-webkit-scrollbar {
    width: 4px;
    /* Más delgada para mayor elegancia */
}

#modalPremium .modal-content::-webkit-scrollbar-track {
    background: transparent;
    /* El riel de fondo invisible */
}

#modalPremium .modal-content::-webkit-scrollbar-thumb {
    background-color: rgba(249, 115, 22, 0.3);
    /* Naranja con solo 30% de opacidad */
    border-radius: 10px;
    /* Bordes bien redondeados */
}

#modalPremium .modal-content::-webkit-scrollbar-thumb:hover {
    background-color: rgba(249, 115, 22, 0.6);
    /* Sube un poco la opacidad si el usuario la toca */
}

/* --- SCROLL INTELIGENTE Y ESPACIADOS DEL MODAL PREMIUM --- */
#modalPremium .modal-content {
    max-height: 85vh;
    /* Ocupa máximo el 85% del alto de la pantalla visual */
    overflow-y: auto;
    /* Activa el scroll vertical */
    -webkit-overflow-scrolling: touch;
    /* Activa el scroll suave en celulares */
    padding-right: 25px;
    /* Evita que el texto choque con la barra de scroll */
}

/* Ajustar la 'X' para que no choque con la barra de scroll */
#modalPremium .modal-close {
    right: 20px;
    top: 15px;
    z-index: 100;
}

/* --- ESTANDARIZACIÓN DE BOTONES EN LOS PLANES --- */
.pricing-plan .cta-button {
    height: 48px !important;
    /* Fija la altura exacta para todos */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 20px !important;
    box-sizing: border-box !important;
    font-size: 1rem !important;
    /* Mismo tamaño de letra */
    line-height: 1 !important;
}