/* ==========================================================================
   PÁGINA EXCLUSIVA: ADMISIÓN
   ========================================================================== */

/* 1. Migas de Pan (Breadcrumbs) */
.admision-breadcrumbs {
    font-size: var(--text-small);
    font-weight: 500;
    color: var(--color-text-muted);
    background-color: var(--color-white); /* Fondo blanco limpio */
    padding: 30px 0;    
}

.admision-breadcrumbs a {
    color: var(--color-text-muted);
    text-decoration: none;
    transition: color 0.3s ease;
}

.admision-breadcrumbs a:hover {
    color: var(--color-primary);
}

.admision-breadcrumbs .separator {
    margin: 0 10px;
    font-size: var(--text-small);
}

.admision-breadcrumbs .current {
    color: var(--color-primary); /* Rojo Kingster */
}

/* 2. Sección 1: Detalles de Aplicación */
.admision-section-details {
    padding: 20px 0 50px 0;
    background-color: var(--color-white);
}

.admision-section-title {
    font-size: var(--text-2xl);
    font-weight: 800;
    color: var(--color-text-main); /* Azul marino muy oscuro */
    margin: 0 0 20px 0;
}

/* La cuadrícula al 50/50 */
.admision-details-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 60px; /* Separación amplia entre columnas como en la captura */
}

.admision-col-izq,
.admision-col-der {
    font-size: var(--text-base);
    line-height: 1.8;
    color: var(--color-text-muted);
}

/* Reset de márgenes para párrafos dentro de ACF */
.admision-col-izq p:last-child,
.admision-col-der p:last-child {
    margin-bottom: 0;
}

/* =====================================================
   RESPONSIVE
   ===================================================== */
@media (max-width: 1024px) {
    .admision-details-grid {
        gap: 40px;
    }
    .admision-section-title {
        font-size: 28px;
    }
}

@media (max-width: 768px) {
    .admision-details-grid {
        grid-template-columns: 1fr; /* Pasa a 1 columna en móviles */
        gap: 30px;
    }
    .admision-breadcrumbs {
        padding: 20px 0;
        font-size: 14px;
    }
}

/* ==========================================================================
   Sección 2: Grid de 4 Columnas y Parallax
   ========================================================================== */

/* CONTENEDOR GLOBAL ESTÁNDAR (Corrección requerida de 1200px) */
.container {
    max-width: 1200px;
    margin: 0 auto;
    width: 100%; /* Margen de colchón para evitar que el texto pegue a los bordes antes del quiebre */
    box-sizing: border-box;
}

/* Bloque Azul Marino de Fondo */
.admision-section-columns {
    background-color: var(--color-text-main); /* El azul marino/índigo idéntico de la captura */
    padding: 90px 0;
    color: var(--color-white);
}

/* Cuadrícula de 4 columnas */
.admision-columns-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* 4 Columnas exactamente iguales */
    gap: 40px 30px; /* 40px de espacio vertical, 30px horizontal */
}

.admision-column-title {
    font-size: var(--text-lg);
    font-weight: 800;
    color: var(--color-white);
    margin: 0 0 20px 0;
    line-height: 1.3;
}

.admision-column-text {
    font-size: var(--text-base);
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.85); /* Blanco suavizado al 85% para mejorar la legibilidad */
}

.admision-column-text p {
    margin: 0 0 15px 0;
}

.admision-column-text p:last-child {
    margin-bottom: 0;
}

/* =====================================================
   MAGIA DEL EFECTO PARALLAX NATIVO
   ===================================================== */
.admision-section-parallax {
    position: relative;
    width: 100%;
    height: 480px; /* Altura controlada de la "ventana" que muestra la foto */
    background-attachment: fixed; /* Esto fija la imagen al fondo del navegador */
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
}

.parallax-overlay {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background-color: rgba(0, 0, 0, 0.03); /* Filtro casi imperceptible para unificar tonos */
}

/* =====================================================
   RESPONSIVE AVANZADO (Mobile First & Fallbacks)
   ===================================================== */
@media (max-width: 1024px) {
    .admision-columns-grid {
        /* grid-template-columns: repeat(2, 1fr); En tabletas pasa a cuadrícula de 2x2 */
        gap: 20px;
    }
    
    /* Fallback de Rendimiento Móvil: Desactivamos el fixed para evitar lag en pantallas táctiles */
    .admision-section-parallax {
        height: 360px;
        background-attachment: scroll; 
    }

    .container {
        padding: 0 20px;
    }
}

@media (max-width: 768px) {
    .admision-columns-grid {
        grid-template-columns: 1fr; /* En celulares colapsa a una sola columna vertical */
        gap: 30px;
    }
    
    .admision-section-columns {
        padding: 60px 0; /* Reducimos ligeramente los paddings para pantallas pequeñas */
    }
    
    .admision-section-parallax {
        height: 100vh;
    }
}

/* ==========================================================================
   Sección 3: Proceso de Aplicación
   ========================================================================== */

.admision-process-section {
    padding: 100px 0;
    background-color: var(--color-white);
}

.section-main-title {
    font-size: var(--text-2xl);
    font-weight: 800;
    color: var(--color-text-main); /* Azul marino */
    margin: 0 0 60px 0;
}

/* La cuadrícula principal de 3 columnas */
.process-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 60px 40px; /* Separación vertical de 60px, horizontal de 40px */
}

/* El layout de cada ítem (Flexbox para separar número y texto) */
.process-item {
    display: flex;
    align-items: flex-start;
    gap: 25px; /* Distancia entre el número y el texto */
}

/* El número gigante rojo */
.process-number {
    font-size: var(--text-3xl);
    font-weight: 800;
    color: var(--color-primary); /* Rojo Kingster */
    line-height: 0.8; /* Ajusta la altura de la caja para alinearse con el título */
    flex-shrink: 0; /* Evita que el número se aplaste si el texto es muy largo */
}

/* El contenido (Título y Párrafo) */
.process-content {
    flex-grow: 1;
}

.process-title {
    font-size: var(--text-lg);
    font-weight: 700;
    color: var(--color-text-main);
    margin: 0 0 15px 0;
    line-height: 1.3;
}

.process-text {
    font-size: var(--text-base);
    color: var(--color-text-muted);
    line-height: 1.8;
}

.process-text p {
    margin: 0 0 15px 0;
}

.process-text p:last-child {
    margin-bottom: 0;
}

/* =====================================================
   RESPONSIVE
   ===================================================== */
@media (max-width: 1024px) {
    .process-grid {
        grid-template-columns: repeat(2, 1fr); /* 2 columnas en tablet */
    }
}

@media (max-width: 768px) {
    .admision-process-section {
        padding: 70px 0;
    }
    
    .process-grid {
        grid-template-columns: 1fr; /* 1 columna en móviles */
        gap: 40px;
    }
    
    .section-main-title {
        font-size: 28px;
        margin-bottom: 40px;
    }
}


/* ==========================================================================
   Sección 4: Requisitos y Fechas (Tablas y Bullets)
   ========================================================================== */

.admision-requisitos-section {
    padding: 60px 0 100px 0;
    background-color: var(--color-white);
}

/* La línea negra delgada de arriba de la captura */
.section-divider {
    border: 0;
    border-top: 2px solid var(--color-primary);
    margin: 0 0 70px 0;
}

.requisitos-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 70px;
}

/* Títulos compartidos */
.req-title {
    font-size: var(--text-2xl);
    font-weight: 800;
    color: var(--color-text-main);
    margin: 0 0 30px 0;
}

/* --- COLUMNA IZQUIERDA --- */
.req-text {
    font-size: var(--text-base);
    color: var(--color-text-muted);
    line-height: 1.8;
    margin-bottom: 25px;
}

.req-text p {
    margin-bottom: 20px;
}

.req-custom-bullets {
    list-style: none;
    padding: 0;
    margin: 0;
}

.req-custom-bullets li {
    display: flex;
    align-items: flex-start;
    font-size: var(--text-base);
    color: var(--color-text-muted);
    line-height: 1.6;
    margin-bottom: 20px;
}

.req-custom-bullets li svg {
    width: 18px;
    height: 18px;
    margin-right: 15px;
    margin-top: 4px; /* Baja el icono sutilmente para alinearlo con el texto */
    color: var(--color-text-main);
    flex-shrink: 0;
}

/* --- COLUMNA DERECHA (TABLA) --- */
.req-table-wrap {
    width: 100%;
    overflow-x: auto; /* Permite scroll en móviles si la tabla es muy ancha */
}

.req-dates-table {
    width: 100%;
    border-collapse: collapse;
    text-align: center;
    border: 1px solid var(--color-border);
}

/* Cabecera Roja */
.req-dates-table th {
    background-color: var(--color-primary);
    color: var(--color-white);
    font-weight: 600;
    font-size: var(--text-base);
    padding: 20px 15px;
    border-left: 1px solid rgba(255,255,255,0.1);
}

.req-dates-table th:first-child {
    background-color: var(--color-primary); /* Si quieres que el primer cuadro rojo esté vacío */
    border-left: none;
}

/* Celdas del cuerpo */
.req-dates-table td {
    padding: 18px 15px;
    font-size: var(--text-base);
    color: var(--color-text-muted);
    border-left: 1px solid var(--color-white); /* Separadores blancos sutiles */
}

.req-dates-table td:first-child {
    color: color-mix(in srgb, var(--color-text-muted), 25% transparent);
}

/* Filas cebradas (Alternas gris y blanco) */
.req-dates-table tbody tr:nth-child(odd) {
    background-color: var((--color-border));
}

.req-dates-table tbody tr:nth-child(even) {
    background-color: var(--color-bg-light);
}

/* =====================================================
   RESPONSIVE
   ===================================================== */
@media (max-width: 1024px) {
    .requisitos-grid {
        /* grid-template-columns: 1fr; Colapsa a 1 columna */
        gap: 50px;
    }
}

@media (max-width: 768px) {
    .requisitos-grid {
        grid-template-columns: 1fr; /*Colapsa a 1 columna*/
    }
}

/* ==========================================================================
   Sección 5: Formulario de Contacto / Admisión
   ========================================================================== */

.admision-form-section {
    background-color: var(--color-border); /* Gris muy claro de la captura */
    padding: 100px 0;
}

.admision-form-header {
    text-align: center;
    margin-bottom: 50px;
}

.form-main-title {
    font-size: var(--text-2xl);
    font-weight: 900;
    color: var(--color-text-main);
    text-transform: uppercase;
    margin: 0 0 15px 0;
}

.form-sub-title {
    font-size: var(--text-base);
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Contenedor centralizado para el formulario */
.admision-form-container {
    max-width: 800px;
    margin: 0 auto;
}

/* Estilos internos del CF7 */
.admision-cf7-wrap .form-row {
    margin-bottom: 20px;
}

.admision-cf7-wrap input[type="text"],
.admision-cf7-wrap input[type="email"],
.admision-cf7-wrap select,
.admision-cf7-wrap textarea {
    width: 100%;
    padding: 18px 25px;
    background-color: var(--color-white);
    border: none; /* Sin borde como en el diseño */
    color: var(--color-text-muted);
    font-size: var(--text-base);
    font-family: inherit;
    box-sizing: border-box;
    outline: none;
    box-shadow: 0 5px 15px rgba(0,0,0,0.02); /* Sombra ultra suave */
    transition: box-shadow 0.3s ease;
}

.admision-cf7-wrap input:focus,
.admision-cf7-wrap select:focus,
.admision-cf7-wrap textarea:focus {
    box-shadow: 0 5px 20px rgba(0,0,0,0.06);
}

.admision-cf7-wrap textarea {
    resize: vertical;
    min-height: 150px;
}

/* Customización del Select para quitar flecha por defecto y unificar estilo */
.admision-cf7-wrap select {
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
}

/* Botón Submit */
.admision-cf7-wrap .submit-row {
    margin-top: 10px;
}

.admision-cf7-wrap input[type="submit"] {
    width: 100%;
    padding: 20px;
    background-color: var(--color-primary);
    color: var(--color-white);
    font-size: var(--text-base);
    font-weight: 800;
    text-transform: uppercase;
    border: none;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.admision-cf7-wrap input[type="submit"]:hover {
    background-color: color-mix(in srgb, var(--color-primary), 10% transparent);
}

/* Ocultar elementos auxiliares de CF7 */
.wpcf7-not-valid-tip {
    font-size: 13px;
    margin-top: 5px;
}
.wpcf7-spinner {
    display: none !important;
}

/* =====================================================
   RESPONSIVE
   ===================================================== */
@media (max-width: 768px) {
    .admision-form-section { padding: 70px 0; }
    .form-main-title { font-size: 28px; }
}