/* 
 * CHINO INTEGRAL - Estilos específicos
 * Programa profesional para adultos
 */

/* ===== COLOR DEL PROGRAMA ===== */
:root {
    --integral-color: #eb7425; /* Azul marino profesional */
    --integral-color-dark: #eb7425;
    --integral-color-light: #3B5998;
}

/* ===== HERO - COLOR AZUL MARINO PROFESIONAL ===== */
.hero-programa {
    background: linear-gradient(135deg, rgba(255, 24, 16, 0.95) 0%, rgba(30, 41, 59, 0.92) 100%) !important;
    min-height: 600px;
}

.hero-programa::before {
    background: linear-gradient(90deg, 
        rgba(228, 10, 46, 0.98) 0%, 
        rgba(211, 168, 29, 0.88) 50%, 
        rgba(156, 80, 30, 0.4) 100%
    ) !important;
}

/* Badge del hero */
.hero-programa-badge {
    background: rgba(59, 89, 152, 0.3) !important;
    border: 2px solid rgba(100, 116, 139, 0.6) !important;
    letter-spacing: 1px;
}

/* ===== BOTONES DEL HERO ===== */
.btn-programa-primary {
    background: linear-gradient(135deg, #DC2626 0%, #B91C1C 100%) !important;
    box-shadow: 0 8px 25px rgba(220, 38, 38, 0.4) !important;
}

.btn-programa-primary:hover {
    background: linear-gradient(135deg, #B91C1C 0%, #991B1B 100%) !important;
    box-shadow: 0 12px 35px rgba(220, 38, 38, 0.5) !important;
}

.btn-programa-secondary {
    background: rgba(255, 255, 255, 0.18) !important;
    border: 2px solid rgba(255, 255, 255, 0.95) !important;
    backdrop-filter: blur(12px);
}

.btn-programa-secondary:hover {
    background: var(--color-white) !important;
    color: var(--integral-color) !important;
}

/* ===== TABS - COLOR AZUL MARINO ===== */
.tab-link.active {
    color: var(--integral-color) !important;
    border-bottom-color: var(--integral-color) !important;
    background: rgba(30, 58, 138, 0.06) !important;
}

.tab-link:hover {
    color: var(--integral-color) !important;
}

/* ===== FORMULARIO - COLOR GRIS CARBÓN PROFESIONAL ===== */
.contact-form-card {
    background: linear-gradient(135deg, #374151 0%, #1F2937 100%) !important;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3) !important;
}

.contact-form-title {
    font-weight: 700;
    letter-spacing: 0.5px;
}

/* ===== ICONOS DE BENEFICIOS - PROFESIONALES Y CENTRADOS ===== */
.beneficio-icon {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.beneficio-icon span {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 100% !important;
}

/* Grupos Reducidos - Azul marino */
.beneficio-card:nth-child(1) .beneficio-icon {
    background: linear-gradient(135deg, #1E3A8A 0%, #1E293B 100%) !important;
}


/* Docentes Especializados - Dorado académico */
.beneficio-card:nth-child(2) .beneficio-icon {
    background: linear-gradient(135deg, #D97706 0%, #B45309 100%) !important;
}



/* Plataforma Q10 - Gris tecnológico */
.beneficio-card:nth-child(3) .beneficio-icon {
    background: linear-gradient(135deg, #475569 0%, #334155 100%) !important;
}

/* Material Completo - Verde profesional */
.beneficio-card:nth-child(4) .beneficio-icon {
    background: linear-gradient(135deg, #047857 0%, #065F46 100%) !important;
}


/* Práctica Oral - Azul comunicación */
.beneficio-card:nth-child(5) .beneficio-icon {
    background: linear-gradient(135deg, #0284C7 0%, #0369A1 100%) !important;
}



/* Certificación - Rojo distintivo */
.beneficio-card:nth-child(6) .beneficio-icon {
    background: linear-gradient(135deg, #DC2626 0%, #B91C1C 100%) !important;
}


/* Seguimiento - Índigo profesional */
.beneficio-card:nth-child(7) .beneficio-icon {
    background: linear-gradient(135deg, #4F46E5 0%, #4338CA 100%) !important;
}


/* ===== TARJETA DESTACADA - COLOR AZUL MARINO ===== */
.beneficio-card.beneficio-destacado {
    background: linear-gradient(135deg, rgba(30, 58, 138, 0.06) 0%, rgba(30, 41, 59, 0.06) 100%) !important;
    border-color: var(--integral-color) !important;
}

.beneficio-card::before {
    background: linear-gradient(90deg, var(--integral-color), var(--integral-color-dark)) !important;
}

.beneficio-card:hover {
    border-color: var(--integral-color) !important;
}

/* ===== METODOLOGÍA - ICONOS COLOR AZUL MARINO ===== */
.metodologia-icon {
    background: var(--integral-color) !important;
}

.metodologia-card {
    border-top: 4px solid var(--integral-color) !important;
}

/* ===== TABLA DE NIVELES - COLOR AZUL MARINO ===== */
.tabla-titulo-header {
    background: linear-gradient(135deg, #1E3A8A 0%, #1E293B 100%) !important;
}

.tabla-cursos thead {
    background: linear-gradient(135deg, #1E40AF 0%, #1E3A8A 100%) !important;
}

.tabla-cursos thead tr {
    border-bottom: 3px solid #1E3A8A !important;
}

.tabla-cursos tbody td:last-child {
    color: var(--integral-color) !important;
}

/* ===== SECCIÓN RESULTADOS - COLOR AZUL MARINO ===== */
.programa-resultados {
    background: linear-gradient(135deg, var(--integral-color) 0%, var(--integral-color-dark) 100%) !important;
}

/* ===== COSTOS Y HORARIOS - COLOR AZUL MARINO ===== */
.programa-inversion {
    background: linear-gradient(180deg, #F1F5F9 0%, var(--color-white) 100%) !important;
}

/* Precio destacado - color AZUL MARINO */
.plan-price {
    color: var(--integral-color) !important;
}

.plan-card:hover {
    border-color: var(--integral-color) !important;
}

.plan-card.destacado {
    border-color: var(--integral-color) !important;
    box-shadow: 0 10px 40px rgba(30, 58, 138, 0.15) !important;
}

.plan-badge {
    background: var(--integral-color) !important;
}

.plan-features li::before {
    color: var(--integral-color) !important;
}

.btn-plan {
    background: var(--integral-color) !important;
}

.btn-plan:hover {
    background: var(--integral-color-dark) !important;
}

/* ===== CALENDARIO - COLOR AZUL MARINO ===== */
.programa-calendario {
    background: linear-gradient(135deg, var(--integral-color) 0%, var(--integral-color-dark) 100%) !important;
}

.cupos-destacado {
    background: linear-gradient(135deg, var(--integral-color) 0%, var(--integral-color-dark) 100%) !important;
}

.calendario-tabla thead {
    background: var(--integral-color) !important;
}

.cupos-badge {
    background: var(--integral-color) !important;
}

/* ===== HIGHLIGHT BOX - COLOR AZUL MARINO ===== */
.highlight-box {
    background: linear-gradient(135deg, #F1F5F9 0%, #E2E8F0 100%) !important;
    border-left: 5px solid var(--integral-color) !important;
}

.highlight-box strong {
    color: var(--integral-color) !important;
}

/* ===== CERTIFICACIÓN - COLOR AZUL MARINO ===== */
.certificacion-benefits li::before {
    color: var(--integral-color) !important;
}

/* ===== INFO CARDS - COLOR AZUL MARINO ===== */
.info-card-icon {
    background: var(--integral-color) !important;
}

.horario-item {
    border-left: 4px solid var(--integral-color) !important;
}

.requisitos-list li::before {
    color: var(--integral-color) !important;
}

/* ===== FAQ - COLOR AZUL MARINO ===== */
.faq-item.active {
    border-color: var(--integral-color) !important;
}

.faq-question:hover {
    color: var(--integral-color) !important;
}

.faq-icon {
    color: var(--integral-color) !important;
}

/* ===== WHY CARDS - COLOR AZUL MARINO ===== */
.why-card-programa:hover {
    border-color: var(--integral-color) !important;
}

.why-card-programa.featured {
    border-color: var(--integral-color) !important;
}

.why-icon-programa {
    background: var(--integral-color) !important;
}

/* ===== INCLUYE CARDS - COLOR AZUL MARINO ===== */
.incluye-card {
    border-left: 4px solid var(--integral-color) !important;
}

/* ===== ESTILOS PROFESIONALES ADICIONALES ===== */
.section-title {
    letter-spacing: -0.5px;
}

.section-subtitle {
    font-weight: 400;
}

/* ===== RESPONSIVE - Ajustes de color en móvil ===== */
@media screen and (max-width: 767px) {
  
    
    .beneficio-icon {
        width: 70px !important;
        height: 70px !important;
    }
    
    .hero-programa {
        min-height: 450px;
    }
}

@media screen and (max-width: 480px) {
    .beneficio-icon {
        width: 60px !important;
        height: 60px !important;
    }
    
    .hero-programa {
        min-height: 400px;
    }
}

/* ===== HERO CHINO INTEGRAL — COLOR OVERRIDE ===== */

/* El hero reutiliza las clases .hero-mandarinitas pero con color integral */
.hero-integral {
    background: linear-gradient(120deg, #e4250c 0%, #a81414 45%, #eb5325 100%);
}

/* Color del horario en la card */
.hero-integral .hero-mand-hor-dia {
    color: var(--integral-color);
}

/* Color del plan popular */
.hero-integral .hero-mand-plan.popular {
    border-color: var(--integral-color);
    background: linear-gradient(180deg, #FFF7ED 0%, #fff 100%);
}

.hero-integral .hero-mand-pop-tag {
    background: linear-gradient(135deg, var(--integral-color), var(--integral-color-dark));
}

.hero-integral .hero-mand-plan-precio.naranja {
    color: var(--integral-color);
}

.hero-integral .hero-mand-hor-hora {
    background: linear-gradient(135deg, var(--integral-color), var(--integral-color-dark));
}

.hero-integral .hero-mand-btn {
    color: var(--integral-color);
}

.hero-integral .hero-mand-asesor a {
    color: var(--integral-color);
}

/* Caracteres chinos decorativos */
.hero-integral .hero-mand-chinese {
    right: 330px;
}

/* CTA final con color integral */
.pagina-curso-integral .mand-cta-final {
    background: linear-gradient(135deg, var(--integral-color), #1E3A8A);
}

.pagina-curso-integral .mand-urgencia-dot {
    background: #4ade80;
}


/* Reemplaza .hero-programa-foto por la clase real que encontraste */
.hero-mand-foto img {
    /* translateY mueve elementos verticalmente. 
       Un número positivo lo mueve HACIA ABAJO */
    transform: translateY(27px); 
}
/* =====================================================
   SEPARACIÓN PARA TABLETS (768px hasta 1024px)
   Evita que el CTA final choque con el formulario
   ===================================================== */
@media screen and (min-width: 768px) and (max-width: 1024px) {
    
    /* 1. Separamos el bloque de "Listo para potenciar..." */
    .mand-cta-final {
        margin-bottom: 5rem !important; /* Espacio generoso para que no se peguen */
        border-radius: 0 0 30px 30px !important; /* Redondeamos la base para cerrar visualmente */
        position: relative;
        z-index: 1;
    }

    /* 2. Empujamos el formulario de contacto un poco más abajo */
    .contact-section, 
    #contacto {
        margin-top: 3rem !important;
        padding-top: 2rem !important;
    }
}


/* ===== ESTADOS DE DISPONIBILIDAD ===== */
.estado-abierto {
    background: #059669 !important;
    color: white;
}

.estado-ultimos {
    background: #f08e1e !important;
    color: white;
}

.estado-completo {
    background: #DC2626 !important;
    color: white;
    text-decoration: line-through;
    opacity: 0.8;
}