/* 
 * SECUNDARIA POWER - Estilos específicos
 * Overrides y personalizaciones para adolescentes
 */

/* ===== COLOR DEL PROGRAMA ===== */
:root {
    --secundaria-color: #3B82F6; /* Azul moderno */
    --secundaria-color-dark: #2563EB;
    --secundaria-color-light: #60A5FA;
}

/* ===== HERO - COLOR AZUL ===== */
.hero-programa {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.95) 0%, rgba(37, 99, 235, 0.92) 100%) !important;
    min-height: 600px;
}

.hero-programa::before {
    background: linear-gradient(90deg, 
        rgba(59, 130, 246, 0.98) 0%, 
        rgba(59, 130, 246, 0.85) 50%, 
        rgba(59, 130, 246, 0.4) 100%
    ) !important;
}

/* Badge del hero */
.hero-programa-badge {
    background: rgba(55, 41, 134, 0.3) !important;
    border: 2px solid rgba(123, 148, 177, 0.5) !important;
}

/* ===== BOTONES DEL HERO ===== */
.btn-programa-primary {
    background: linear-gradient(135deg, #F97316 0%, #EA580C 100%) !important;
    box-shadow: 0 8px 25px rgba(249, 115, 22, 0.5) !important;
}

.btn-programa-primary:hover {
    background: linear-gradient(135deg, #EA580C 0%, #C2410C 100%) !important;
    box-shadow: 0 12px 35px rgba(249, 115, 22, 0.6) !important;
}

.btn-programa-secondary {
    background: rgba(255, 255, 255, 0.2) !important;
    border: 2px solid rgba(255, 255, 255, 0.9) !important;
}

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

/* ===== TABS - COLOR AZUL ===== */
.tab-link.active {
    color: var(--secundaria-color) !important;
    border-bottom-color: var(--secundaria-color) !important;
    background: rgba(59, 130, 246, 0.05) !important;
}

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

/* ===== FORMULARIO - COLOR GRIS OSCURO MODERNO (UNISEX) ===== */
.contact-form-card {
    background: linear-gradient(135deg, #e44242 0%, #1643a3 100%) !important;
}

/* ===== ICONOS DE BENEFICIOS - CENTRADOS Y PARA ADOLESCENTES ===== */
.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 */
.beneficio-card:nth-child(1) .beneficio-icon {
    background: linear-gradient(135deg, #3B82F6 0%, #2563EB 100%) !important;
}

/* Docentes Especializados */
.beneficio-card:nth-child(2) .beneficio-icon {
    background: linear-gradient(135deg, #8B5CF6 0%, #7C3AED 100%) !important;
}


/* Plataforma Q10 */
.beneficio-card:nth-child(3) .beneficio-icon {
    background: linear-gradient(135deg, #06B6D4 0%, #0891B2 100%) !important;
}


/* Material Completo */
.beneficio-card:nth-child(4) .beneficio-icon {
    background: linear-gradient(135deg, #10B981 0%, #059669 100%) !important;
}


/* Práctica Oral */
.beneficio-card:nth-child(5) .beneficio-icon {
    background: linear-gradient(135deg, #F59E0B 0%, #D97706 100%) !important;
}

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


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

/* ===== TARJETA DESTACADA - COLOR AZUL ===== */
.beneficio-card.beneficio-destacado {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.05) 0%, rgba(37, 99, 235, 0.05) 100%) !important;
    border-color: var(--secundaria-color) !important;
}

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

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

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

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

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

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

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

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

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

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

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

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

.plan-card.destacado {
    border-color: var(--secundaria-color) !important;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* ===== RESPONSIVE - Ajustes de color en móvil ===== */
@media screen and (max-width: 767px) {
    .hero-programa::before {
        background: linear-gradient(90deg, 
            rgba(59, 130, 246, 0.98) 0%, 
            rgba(59, 130, 246, 0.95) 70%, 
            rgba(59, 130, 246, 0.7) 100%
        ) !important;
    }
    
    .beneficio-icon {
        width: 70px !important;
        height: 70px !important;
    }
}

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

/* ===== HERO SECUNDARIA POWER — COLOR OVERRIDE ===== */

.hero-secundaria {
    background: linear-gradient(120deg, #1E40AF 0%, #2563EB 45%, #3B82F6 100%);
}

.hero-secundaria .hero-mand-hor-dia {
    color: var(--secundaria-color);
}

.hero-secundaria .hero-mand-plan.popular {
    border-color: var(--secundaria-color);
    background: linear-gradient(180deg, #EFF6FF 0%, #fff 100%);
}

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

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

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

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

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

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

.pagina-curso-secundaria .mand-urgencia {
    background: linear-gradient(135deg, #1E3A8A, #1E40AF);
}