/* 
 * PINYIN PREMIUM - Estilos específicos
 * Entrenamiento de pronunciación y fonética
 */

/* ===== COLOR DEL PROGRAMA ===== */
:root {
    --pinyin-color: #7C3AED;         /* Violeta premium */
    --pinyin-color-dark: #5B21B6;
    --pinyin-color-light: #DDD6FE;
}

/* ===== HERO PINYIN PREMIUM ===== */
.hero-pinyin {
    background: linear-gradient(120deg, #4C1D95 0%, #6D28D9 45%, #7C3AED 100%);
}

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

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

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

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

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

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

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

/* Plan único en hero — sin la estructura de 2 columnas */
.hero-mand-planes-unico {
    display: flex;
    justify-content: center;
}

.hero-mand-plan.plan-unico {
    width: 100%;
    max-width: 100%;
    padding: 1rem;
}

/* ===== FORMULARIO ===== */
.contact-form-card {
    background: linear-gradient(135deg, #4C1D95 0%, #5B21B6 100%) !important;
    box-shadow: 0 20px 60px rgba(76, 29, 149, 0.35) !important;
}

/* ===== TABS ===== */
.tab-link.active {
    color: var(--pinyin-color) !important;
    border-bottom-color: var(--pinyin-color) !important;
    background: rgba(124, 58, 237, 0.06) !important;
}

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

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

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

/* ===== TABLA TEMARIO ===== */
.tabla-titulo-header {
    background: linear-gradient(135deg, #4C1D95 0%, #5B21B6 100%) !important;
}

.tabla-cursos thead {
    background: linear-gradient(135deg, #5B21B6 0%, #6D28D9 100%) !important;
}

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

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

/* ===== PRECIOS ===== */
.plan-price {
    color: var(--pinyin-color) !important;
}

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

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

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

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

.btn-plan {
    background: linear-gradient(135deg, var(--pinyin-color), var(--pinyin-color-dark)) !important;
}

.btn-plan:hover {
    background: linear-gradient(135deg, var(--pinyin-color-dark), #4C1D95) !important;
}

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

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

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

/* ===== SECTION PRETITLE ===== */
.pagina-curso-pinyin .section-pretitle {
    color: var(--pinyin-color);
}

/* ===== CTA FINAL ===== */
.pagina-curso-pinyin .mand-cta-final {
    background: linear-gradient(135deg, var(--pinyin-color), #4C1D95);
}

.pagina-curso-pinyin .mand-urgencia {
    background: linear-gradient(135deg, #4C1D95, #5B21B6);
}

/* ===== RUTA VISUAL 3 MESES ===== */
.pinyin-ruta-resumen {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin: 2rem 0;
    flex-wrap: wrap;
}

.pinyin-mes-bloque {
    flex: 1;
    min-width: 160px;
    background: linear-gradient(135deg, #F5F3FF, #EDE9FE);
    border: 2px solid var(--pinyin-color);
    border-radius: var(--radius-xl);
    padding: 1.25rem 1rem;
    text-align: center;
}

.pinyin-mes-num {
    display: inline-block;
    background: var(--pinyin-color);
    color: var(--color-white);
    font-size: var(--text-xs);
    font-weight: var(--font-bold);
    padding: 3px 12px;
    border-radius: var(--radius-full);
    margin-bottom: 0.5rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.pinyin-mes-nombre {
    font-size: var(--text-base);
    font-weight: var(--font-black);
    color: var(--pinyin-color-dark);
    margin-bottom: 0.25rem;
    line-height: 1.3;
}

.pinyin-mes-desc {
    font-size: var(--text-sm);
    color: var(--color-gray-500);
    line-height: 1.4;
}

/* ===== REDUCIR LETRA DE LA TABLA DE TEMARIO ===== */
.tabla-cursos tbody td[data-label="Enfoque"] {
    font-size: 16px !important; /* Puedes bajarlo a 12px si lo quieres más pequeño */
    line-height: 1.5 !important;
}

/* Opcional: Si también quieres achicar la columna izquierda (Mes 1, Mes 2) */
.tabla-cursos tbody td[data-label="Módulo"] {
    font-size: 16px !important; 
}

.pinyin-flecha {
    font-size: 1.75rem;
    color: var(--pinyin-color);
    font-weight: var(--font-bold);
    flex-shrink: 0;
}

/* ===== PLAN ÚNICO PRECIO ===== */
.pinyin-plan-unico-wrap {
    display: flex;
    justify-content: center;
    margin: 2rem 0;
}

.pinyin-plan-unico-card {
    background: var(--color-white);
    border: 2.5px solid var(--pinyin-color);
    border-radius: var(--radius-2xl);
    padding: 2.5rem 2rem;
    text-align: center;
    max-width: 480px;
    width: 100%;
    box-shadow: 0 15px 50px rgba(124, 58, 237, 0.15);
    position: relative;
}

.pinyin-plan-unico-badge {
    display: inline-block;
    background: linear-gradient(135deg, var(--pinyin-color), var(--pinyin-color-dark));
    color: var(--color-white);
    font-size: var(--text-sm);
    font-weight: var(--font-bold);
    padding: 6px 20px;
    border-radius: var(--radius-full);
    margin-bottom: 1rem;
    letter-spacing: 0.04em;
}

.pinyin-plan-unico-nombre {
    font-size: var(--text-xl);
    font-weight: var(--font-black);
    color: var(--color-dark);
    margin-bottom: 1rem;
    line-height: 1.3;
}

.pinyin-plan-unico-precio {
    font-size: 3.75rem;
    font-weight: var(--font-black);
    color: var(--pinyin-color);
    line-height: 1;
    margin-bottom: 0.25rem;
}

.pinyin-plan-currency {
    font-size: 1.75rem;
    vertical-align: top;
    margin-top: 0.5rem;
    display: inline-block;
}

.pinyin-plan-unico-sub {
    font-size: var(--text-sm);
    color: var(--color-gray-500);
    margin-bottom: 1.75rem;
}

.pinyin-plan-unico-lista {
    list-style: none;
    padding: 0;
    text-align: left;
    margin-bottom: 2rem;
}

.pinyin-plan-unico-lista li {
    padding: 0.65rem 0 0.65rem 1.75rem;
    border-bottom: 1px solid var(--color-gray-100);
    font-size: var(--text-base);
    color: var(--color-gray-700);
    position: relative;
}

.pinyin-plan-unico-lista li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: var(--pinyin-color);
    font-weight: var(--font-bold);
}

.pinyin-plan-unico-lista li:last-child {
    border-bottom: none;
}

/* ===== HIGHLIGHT BOX ===== */
.highlight-box {
    border-left: 5px solid var(--pinyin-color) !important;
}

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

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

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

/* Tablet 1024px */
@media screen and (max-width: 1024px) {
    .pinyin-ruta-resumen {
        gap: 0.75rem;
    }
    .pinyin-mes-bloque {
        min-width: 130px;
        padding: 1rem 0.75rem;
    }
}

/* Mobile 767px */
@media screen and (max-width: 767px) {
    .pinyin-ruta-resumen {
        flex-direction: column;
        align-items: stretch;
    }
    .pinyin-flecha {
        transform: rotate(90deg);
        text-align: center;
        align-self: center;
    }
    .pinyin-mes-bloque {
        width: 100%;
    }
    .pinyin-plan-unico-card {
        padding: 2rem 1.5rem;
    }
    .pinyin-plan-unico-precio {
        font-size: 3rem;
    }
}

/* Small mobile 480px */
@media screen and (max-width: 480px) {
    .pinyin-plan-unico-precio {
        font-size: 2.5rem;
    }
    .hero-mand-planes-unico .hero-mand-plan.plan-unico {
        padding: 0.75rem;
    }
}


/* Reemplaza .hero-programa-foto por la clase real que encontraste */
.hero-mand-foto {
    /* translateY mueve elementos verticalmente. 
       Un número positivo lo mueve HACIA ABAJO */
    transform: translateY(-34px); 
}

/* =====================================================
   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;
    }
}