/* ========================================================
   1. IMPORTACIÓN DE FUENTES EXCLUSIVAS Y OPTIMIZADAS
   ======================================================== */
@import url('https://fonts.googleapis.com/css?family=Montserrat:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i');
@import url('https://fonts.googleapis.com/css?family=Great+Vibes');
@import url('https://fonts.googleapis.com/css?family=Roboto:100,100i,300,300i,400,400i,500,500i,700,700i,900,900i');

* { 
    margin: 0; 
    padding: 0; 
    box-sizing: border-box; 
    /* Roboto será la fuente base para todo el sitio, asegurando una lectura suave */
    font-family: 'Roboto', sans-serif; 
}

/* ========================================================
   2. ASIGNACIÓN ESTRATÉGICA DE TIPOGRAFÍAS
   ======================================================== */

/* Todos los títulos usarán Montserrat para denotar fuerza y liderazgo */
h1, h2, h3, h4, .section-title, .section-main-title {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    letter-spacing: 0.5px;
}

.h-subtitle {
    font-size: 28px;
    color: #d5a129;
    font-weight: 700;
    letter-spacing: 3px;
    margin-bottom: 8px;
}

/* Aplicación del toque elegante en el Banner Intermedio de Inscripciones */
.mid-announcement-banner h2 {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
}

.mid-announcement-banner p {
    /* Usamos Great Vibes aquí para que "Inscripciones Abiertas" luzca como una firma elegante */
    font-family: 'Montserrat', sans-serif;
    font-size: 42px; /* Las letras cursivas necesitan más tamaño para lucir */
    color: var(--primary-blue);
    margin-top: 10px;
    font-weight: normal;
    text-transform: none; /* Evita que se fuerce a mayúsculas */
}

/* Los textos explicativos se quedan con Roboto en un grosor ligero muy elegante */
.split-text p, .contact-wrapper p, .info-column p {
    font-family: 'Roboto', sans-serif;
    font-weight: 300;
    line-height: 1.6;
}



/* ==========================================
   1. VARIABLES, RESETEO Y CONFIGURACIÓN BASE
   ========================================== */
:root {
    --primary-blue: #272f43;
    --gold: #d5a129;
    --light-bg: #f5f6f8;
    --header-bg: #fcfdfe; /* Color claro para que resalte el logo azul */
    --white: #ffffff;
    --text-dark: #22262f;
}

* { 
    margin: 0; 
    padding: 0; 
    box-sizing: border-box; 
    font-family: 'Segoe UI', Arial, sans-serif; 
}

/* ========================================================
   FIX DEFINITIVO DE ROTACIÓN Y AJUSTE DE ALTURA PARA SAFARI/IPAD
   ======================================================== */
html, body {
    /* Evita que el viewport se estire de más elásticamente al girar */
    height: -webkit-fill-available; 
    overflow-x: hidden;
    scroll-behavior: smooth;
}

/* Forzamos a que el carrusel use aceleración por hardware del iPad */
.slider-track {
    transform: translate3d(0, 0, 0);
    -webkit-transform: translate3d(0, 0, 0);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

/* Elimina el parpadeo blanco nativo de iOS durante la rotación */
@media (max-width: 1024px) {
    body {
        animation: fixRotation 0.1s ease;
    }
}

@keyframes fixRotation {
    from { opacity: 0.99; }
    to { opacity: 1; }
}


/* ==========================================
   2. CABECERA, MENÚ LATERAL Y PLATAFORMA
   ========================================== */
.main-header {
    background-color: var(--header-bg); 
    padding: 12px 5%;
    display: flex; 
    justify-content: space-between; 
    align-items: center;
    position: sticky; 
    top: 0; 
    z-index: 100; 
    border-bottom: 4px solid var(--gold);
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}

.logo img { 
    height: 70px; 
    display: block; 
}

.menu-toggle { 
    background: none; 
    border: none; 
    color: var(--primary-blue); 
    font-size: 32px; 
    cursor: pointer; 
}

.side-menu {
    position: fixed; 
    top: 0; 
    left: -310px; 
    width: 300px; 
    height: 100%;
    
    /* EFECTO TRANSPARENTE CON DESENFOQUE */
    background-color: rgba(39, 47, 67, 0.85); /* SUSTITUIR: Pon aquí tu color azul primario en formato RGBA */
    backdrop-filter: blur(12px); /* Desenfoca el fondo de la página web detrás del menú */
    -webkit-backdrop-filter: blur(12px); /* Compatibilidad obligatoria para iPhone / Safari */
    
    z-index: 1000;
    transition: 0.4s ease-in-out; 
    padding: 40px 20px;
    box-shadow: 5px 0 15px rgba(0,0,0,0.3); 
    border-right: 5px solid var(--gold);
}

.side-menu.active { 
    left: 0; 
}

.close-btn { 
    background: none; 
    border: none; 
    color: var(--white); 
    font-size: 35px; 
    position: absolute; 
    top: 15px; 
    right: 20px; 
    cursor: pointer; 
}

.menu-links { 
    margin-top: 60px; 
    display: flex; 
    flex-direction: column; 
    gap: 22px; 
}

.menu-links a { 
    color: var(--white); 
    text-decoration: none; 
    font-size: 18px; 
    font-weight: 500; 
    padding-bottom: 3px; 
    border-bottom: 2px solid transparent; 
    transition: 0.3s; 
}

.menu-links a:hover { 
    color: var(--gold); 
    padding-left: 8px; 
}

.menu-plataforma-link { 
    margin-top: 20px; 
    background-color: var(--gold); 
    color: var(--primary-blue) !important; 
    text-align: center; 
    padding: 12px !important; 
    border-radius: 5px; 
    font-weight: bold; 
}

/* Nuevos estilos para el submenú vertical */
.submenu-container {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.submenu-trigger {
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
}

/* Oculto por defecto */
.submenu-items {
    display: none; 
    flex-direction: column;
    gap: 15px;
    padding-left: 20px;
    margin-top: 15px;
    border-left: 2px solid var(--gold);
}

/* Clase para mostrar el submenú mediante JS */
.submenu-items.open {
    display: flex;
}

/* Ajuste visual para los enlaces internos del submenú */
.submenu-items a {
    font-size: 16px;
    font-weight: 400;
}

/* ==========================================
   3. SLIDER RESPONSIVO (SIN RECORTES VERTICALES - ANCHO Y ALTO COMPLETO)
   ========================================== */
.hero-slider {
    width: 100%;
    aspect-ratio: 1920 / 827; 
    max-height: 700px; 
    position: relative; 
    overflow: hidden; 
    display: flex; 
    align-items: flex-end; 
    justify-content: center;
    background-color: var(--primary-blue);
    
    /* CORRECCIÓN PARA IPAD: Aísla el renderizado del carrusel */
    contain: paint; 
}

/* Tira para 6 imágenes = 600% del ancho total */
.slider-track {
    display: flex;
    width: 600%; 
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    animation: slideAnimation6 24s infinite ease-in-out;
}

.slide-img {
    width: 100%; 
    height: 100%;
    /* FORCE CORRECTION: Fuerza a la imagen a abarcar el 100% del ancho y 100% del alto */
    /* Esto garantiza que no se pierda ni un solo píxel arriba o abajo */
    background-size: 100% 100%; 
    background-position: center center; 
    background-repeat: no-repeat;
}

/* Animación de transición lateral para las 6 fotos */
@keyframes slideAnimation6 {
    0%, 12.5% { left: 0%; }
    16.6%, 29.1% { left: -100%; }
    33.3%, 45.8% { left: -200%; }
    50%, 62.5% { left: -300%; }
    66.6%, 79.1% { left: -400%; }
    83.3%, 95.8% { left: -500%; }
    100% { left: 0%; }
}

/* Contenedor de los 6 indicadores inferiores */
.hero-slider .slider-indicators { 
    display: flex !important; 
    gap: 12px !important; 
    margin-bottom: 3% !important; 
    z-index: 20 !important; 
    position: absolute;
    bottom: 0;
}

.hero-slider .slider-indicators .indicator { 
    display: inline-block !important;
    width: 12px !important; 
    height: 12px !important; 
    border-radius: 50% !important; 
    background-color: rgba(255, 255, 255, 0.4) !important; 
    border: 1px solid rgba(0, 0, 0, 0.3) !important;
    transition: 0.3s; 
}

/* Sincronización individual exacta de los 6 círculos */
.hero-slider .slider-indicators .indicator:nth-child(1) { animation: activeInd1 24s infinite !important; }
.hero-slider .slider-indicators .indicator:nth-child(2) { animation: activeInd2 24s infinite !important; }
.hero-slider .slider-indicators .indicator:nth-child(3) { animation: activeInd3 24s infinite !important; }
.hero-slider .slider-indicators .indicator:nth-child(4) { animation: activeInd4 24s infinite !important; }
.hero-slider .slider-indicators .indicator:nth-child(5) { animation: activeInd5 24s infinite !important; }
.hero-slider .slider-indicators .indicator:nth-child(6) { animation: activeInd6 24s infinite !important; }

@keyframes activeInd1 {
    0%, 12.5%, 96%, 100% { background-color: var(--gold) !important; transform: scale(1.2); }
    13.5%, 95.9% { background-color: rgba(255,255,255,0.4) !important; transform: scale(1); }
}
@keyframes activeInd2 {
    16.6%, 29.1% { background-color: var(--gold) !important; transform: scale(1.2); }
    0%, 15.6%, 30.1%, 100% { background-color: rgba(255,255,255,0.4) !important; transform: scale(1); }
}
@keyframes activeInd3 {
    33.3%, 45.8% { background-color: var(--gold) !important; transform: scale(1.2); }
    0%, 32.3%, 46.8%, 100% { background-color: rgba(255,255,255,0.4) !important; transform: scale(1); }
}
@keyframes activeInd4 {
    50%, 62.5% { background-color: var(--gold) !important; transform: scale(1.2); }
    0%, 48.9%, 63.5%, 100% { background-color: rgba(255,255,255,0.4) !important; transform: scale(1); }
}
@keyframes activeInd5 {
    66.6%, 79.1% { background-color: var(--gold) !important; transform: scale(1.2); }
    0%, 65.5%, 80.1%, 100% { background-color: rgba(255,255,255,0.4) !important; transform: scale(1); }
}
@keyframes activeInd6 {
    83.3%, 95.8% { background-color: var(--gold) !important; transform: scale(1.2); }
    0%, 82.3%, 96.8% { background-color: rgba(255,255,255,0.4) !important; transform: scale(1); }
}

/* ========================================================
   CORRECCIÓN DE DESBORDAMIENTO CRÍTICO PARA IPAD / TABLETAS
   ======================================================== */
@media (max-width: 1024px) {
    .hero-slider {
        /* Rompe la proporción elástica que causa el desborde al girar */
        aspect-ratio: auto !important; 
        /* Fija una altura visual perfecta y cómoda para el iPad en vertical */
        height: 320px !important; 
        max-height: none !important;
    }
    
    .slide-img {
        /* Cambia a cover para que la foto se estire uniformemente y rellene los 320px */
        background-size: cover !important;
        background-position: center center !important;
    }
}

@media (max-width: 576px) {
    .hero-slider {
        /* Altura proporcional compacta ideal para pantallas de teléfonos celulares */
        height: 200px !important; 
    }
}


/* ==========================================
   4. NUESTROS TALLERES (MÁS LARGAS A LO ALTO Y EN MAYÚSCULAS)
   ========================================== */
.grid-container-4 {
    display: flex;
    flex-wrap: wrap;
    gap: 25px;
    justify-content: center; 
    max-width: 1220px;
    margin: 0 auto;
    padding: 10px 0;
}

.card-taller {
    background-color: var(--light-bg); 
    color: var(--primary-blue); 
    /* Aumentado de 35px a 55px (arriba y abajo) para hacer las tarjetas visiblemente más largas */
    padding: 55px 20px; 
    text-align: center; 
    border-radius: 8px; 
    cursor: pointer; 
    transition: 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    border-bottom: 5px solid var(--primary-blue); 
    
    flex: 0 1 calc(25% - 20px); 
    min-width: 250px; 
    max-width: 280px;
}

/* Fuerza a que los nombres de los talleres (h3) salgan en MAYÚSCULAS */
.card-taller h3 {
    text-transform: uppercase;
    font-size: 16px;
    letter-spacing: 1px;
}

.icon-wrapper { 
    height: 70px; 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    margin-bottom: 25px; /* Más separación del icono al texto largo */
}

.default-block { display: block; }
.default-none { display: none; }

/* Intercambio de imágenes azul/blanco en hover */
.card-taller:hover {
    background-color: var(--primary-blue); 
    color: var(--white); 
    border-bottom-color: var(--gold); 
    transform: translateY(-6px);
}
.card-taller:hover .default-block { display: none; }
.card-taller:hover .default-none { display: block; }

/* ==========================================
   TÍTULOS GENERALES EN MAYÚSCULAS
   ========================================== */
/* Fuerza a que TODOS los títulos y etiquetas principales de la página salgan en MAYÚSCULAS */
.section-title, .section-main-title, .split-text h2, .contact-form h3, .maps-section h3, .info-column h3 {
    text-transform: uppercase;
    letter-spacing: 1.5px;
}

/* ==========================================
   ADAPTACIÓN RESPONSIVA
   ========================================== */
@media(max-width: 992px) {
    .card-taller {
        flex: 0 1 calc(33.33% - 20px);
        padding: 45px 20px; /* Un poco más compactas en tabletas */
    }
}
@media(max-width: 576px) {
    .card-taller {
        flex: 0 1 100%;
        max-width: 100%;
        padding: 40px 20px;
    }
}

/* ==========================================
   ADAPTACIÓN RESPONSIVA PARA PANTALLAS CHICAS
   ========================================== */

/* En tabletas acomoda bloques de 2 o 3 según el espacio, manteniéndolas en el centro */
@media(max-width: 992px) {
    .card-taller {
        flex: 0 1 calc(33.33% - 20px);
    }
}

/* En teléfonos celulares toma el ancho total de forma limpia */
@media(max-width: 576px) {
    .card-taller {
        flex: 0 1 100%;
        max-width: 100%;
    }
}

/* 1. Aseguramos que la píldora tenga una posición de referencia fija */
.pildora-posicion span.pildora-animada {
    position: relative;
    z-index: 1; /* Mantiene el texto por encima del efecto */
}

/* 2. Creamos la onda expansiva por detrás sin alterar el tamaño físico */
.pildora-posicion span.pildora-animada::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 50px; /* Misma curvatura de tu píldora */
    background-color: rgba(213, 161, 41, 0.3); /* Color dorado translúcido */
    z-index: -1; /* Se posiciona atrás del texto */
    animation: ondaExpansiva 2.5s infinite ease-out;
}

/* 3. Animación de la onda: se expande y se desvanece (Efecto Radar) */
@keyframes ondaExpansiva {
    0% {
        transform: scaleX(1) scaleY(1);
        opacity: 1;
    }
    100% {
        transform: scaleX(1.12) scaleY(1.35); /* Se expande hacia afuera sin mover las cards */
        opacity: 0; /* Se vuelve invisible al final del viaje */
    }
}

/* MODALES Fondo oscuro que cubre toda la pantalla */
.custom-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* Fondo negro transparente */
    display: none; /* Oculto por defecto */
    justify-content: center;
    align-items: flex-start; /* CAMBIO: Alinea arriba para permitir scroll general en pantallas chicas */
    z-index: 2000; /* Por encima de todo, incluso de la barra de menú */
    padding: 40px 20px; /* CAMBIO: Más espacio arriba y abajo para que el modal respire */
    box-sizing: border-box;
    overflow-y: auto; /* NUEVO: Permite deslizar toda la pantalla si el texto es muy largo */
}

/* Caja blanca interna del modal */
.custom-modal-content {
    background-color: #fff;
    width: 100%;
    max-width: 500px; /* Mantiene la proporción compacta y elegante que te gustó */
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 15px 30px rgba(0,0,0,0.2);
    animation: aparecerModal 0.3s ease-out;
}

/* Encabezado */
.custom-modal-header {
    background-color: #272f43;
    padding: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.custom-close-btn {
    background: none;
    border: none;
    color: white;
    font-size: 32px;
    cursor: pointer;
    line-height: 1;
}

/* Contenido intermedio */
.custom-modal-body {
    padding: 20px 25px;
    max-height: none; /* ELIMINADO: Quita el límite del 70% de altura */
    overflow-y: visible; /* CAMBIO: Elimina el scroll interno, el texto sale completo */
}

/* NUEVO: Hace que la imagen dentro del cuerpo sea 100% responsiva y fluida */
.custom-modal-body img {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important; /* La altura se calcula sola sin deformar ni recortar */
    display: block;
    margin: 0 auto 20px;
    border-radius: 8px;
}

/* Pie de página */
.custom-modal-footer {
    padding: 15px 25px 25px;
    display: flex;
    justify-content: flex-end;
}

.custom-btn-cerrar {
    background-color: #272f43;
    color: white;
    border: none;
    border-radius: 6px;
    padding: 8px 20px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.2s;
}

.custom-btn-cerrar:hover {
    background-color: #1a2233;
}

/* Animación de entrada suave */
@keyframes aparecerModal {
    from { transform: translateY(-30px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}



/* ==========================================
   SECCIÓN FORMACIÓN MEXICA - SOLUCIÓN INFERIOR
   ========================================== */

.formacion-section {
    padding: 80px 4%;
    background-color: #f8f9fa;
    display: flex;
    justify-content: center;
    align-items: center;
}

.formacion-wrapper {
    /* CAMBIO CLAVE: Usamos Grid para asegurar simetría total arriba y abajo */
    display: grid;
    grid-template-columns: 1.2fr 0.8fr; /* Mantiene tus proporciones de ancho originales */
    max-width: 1200px;
    width: 100%;
    gap: 50px;
    align-items: stretch; /* Fuerza a que midan idéntico de alto */
}

.formacion-left {
    /* Ya no necesita flex, se controla por el Grid padre */
}

.formacion-right {
    display: flex;
    justify-content: center;
    align-items: stretch; /* Estira el contenedor interno al alto total */
}

/* ==========================================
   DISEÑO DE LA TARJETA E HISTORIAL DE TÍTULOS
   ========================================== */
.main-card-calmecac {
    background-color: #ffffff;
    border-radius: 20px;
    padding: 45px;
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.03);
    border: 1px solid rgba(0, 0, 0, 0.02);
    height: 100%; /* Ocupa el 100% del alto calculado por el Grid */
    box-sizing: border-box;
}

.card-main-highlight-title {
    font-size: 26px !important;
    font-weight: 800 !important;
    color: #262e41 !important;
    text-align: left;
    line-height: 1.3;
    margin: 0 0 15px 0 !important;
    letter-spacing: 0.5px;
}

.card-title-divider {
    background-color: #d5a129;
    width: 50px;
    height: 3px;
    margin: 0 0 35px 0;
    border-radius: 2px;
}

/* Bloques de Contenido */
.text-block-item {
    margin-bottom: 35px;
    text-align: left;
}

.block-header {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 12px;
}

.block-icon {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 16px;
    flex-shrink: 0;
}

.bg-blue-icon {
    background-color: #f0f4f8;
    color: #262e41;
}

.bg-gold-icon {
    background-color: #fffbeb;
    color: #d5a129;
}

.text-block-item h2 {
    font-size: 18px !important;
    font-weight: 800 !important;
    color: #262e41 !important;
    margin: 0 !important;
}

.text-block-item h2.gold-title {
    color: #d5a129 !important;
}

.text-block-item p {
    font-size: 15px;
    line-height: 1.65;
    color: #5a6578;
    margin: 0;
    padding-left: 51px;
    text-align: justify; 
}

.text-block-item p strong {
    color: #262e41;
    font-weight: 700;
}

/* ==========================================
   BOTÓN AZUL INSTITUCIONAL
   ========================================== */
.card-action-box {
    padding-left: 51px;
    margin-top: 25px;
    text-align: left;
}

.btn-institucional-formacion {
    background-color: #262e41 !important; 
    color: #ffffff !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    padding: 14px 35px !important;
    border-radius: 10px !important; 
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center;
    gap: 10px;
    border: 2px solid transparent !important;
    box-shadow: 0 6px 15px rgba(38, 46, 65, 0.15) !important;
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, transform 0.2s ease !important;
    cursor: pointer !important;
}

.btn-institucional-formacion:hover {
    background-color: #d5a129 !important; 
    color: #ffffff !important;
    border-color: #d5a129 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 20px rgba(213, 161, 41, 0.25) !important;
}

/* ==========================================
   IMAGEN SIN DESFASE INFERIOR
   ========================================== */
.split-image { 
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: stretch; /* Estira la envoltura */
}

.split-image img { 
    width: 100% !important;
    height: 100% !important; /* Mide exactamente la altura que dicte la tarjeta */
    object-fit: cover; /* CORTA EL EXCESO INFERIOR: Evita que desborde abajo */
    border-radius: 16px !important; 
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.12), 0 4px 12px rgba(0, 0, 0, 0.06) !important; 
    transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1), box-shadow 0.4s ease !important;
}

.split-image img:hover {
    transform: translateY(-5px) scale(1.02) !important; 
    box-shadow: 0 18px 35px rgba(0, 0, 0, 0.16), 0 6px 15px rgba(0, 0, 0, 0.08) !important; 
}

/* ==========================================
   RESPONSIVE DESIGN ACTUALIZADO (MÓVILES Y IPADS)
   ========================================== */

/* 1. Ajustes para Tablets / iPad en Horizontal (max-width: 1024px) */
@media (max-width: 1024px) {
    .formacion-wrapper {
        gap: 30px; 
    }
    
    .split-image img {
        object-fit: contain !important; 
    }
}

/* 2. Ajustes para Tablets en Vertical / iPad Vertical (max-width: 992px) */
@media (max-width: 992px) {
    .formacion-wrapper {
        grid-template-columns: 1fr; 
        gap: 40px;
        justify-items: center; 
    }
    
    /* AJUSTE: Tarjeta blanca ampliada a 600px de ancho máximo */
    .formacion-left {
        width: 100%;
        max-width: 600px !important; 
        margin: 0 auto;
    }

    .main-card-calmecac {
        padding: 45px 35px; /* Más espacio interno acorde al nuevo ancho */
    }
    
    /* MANTIENE: Título principal centrado */
    .card-main-highlight-title {
        text-align: center !important;
        font-size: 26px !important;
    }

    /* MANTIENE: Línea dorada centrada */
    .card-title-divider {
        margin: 0 auto 35px auto !important;
    }

    /* AJUSTE: Títulos de los bloques e iconos alineados a la IZQUIERDA */
    .block-header {
        justify-content: flex-start !important;
    }

    /* Texto justificado con un ligero margen izquierdo para respetar el espacio del icono */
    .text-block-item p {
        text-align: justify !important;
        padding-left: 51px; 
    }
    
    /* MANTIENE: Botón de acción centrado al final de la tarjeta */
    .card-action-box {
        padding-left: 0;
        text-align: center !important;
    }
    
    /* AJUSTE: El contenedor derecho se expande al mismo tamaño de 600px */
    .formacion-right {
        width: 100%;
        max-width: 600px !important;
    }

    .split-image {
        width: 100%;
    }

    .split-image img {
        height: auto !important; 
        width: 100% !important; /* AJUSTE: La imagen se expande por completo para llenar los 600px */
        max-width: 100% !important; 
        margin: 0 auto; 
    }
}

/* 3. Ajustes específicos para Celulares / iPhones (max-width: 576px) */
@media (max-width: 576px) {
    .formacion-left,
    .formacion-right {
        max-width: 100% !important; /* En celulares vuelve al flujo normal de pantalla completa */
    }

    .main-card-calmecac {
        padding: 30px 20px; 
    }

    .card-main-highlight-title {
        font-size: 24px !important; 
    }

    .card-title-divider {
        margin: 0 auto 25px auto !important;
    }

    /* En celulares muy pequeños los títulos e iconos se vuelven a centrar para un mejor equilibrio */
    .block-header {
        justify-content: center !important;
    }

    .text-block-item p {
        text-align: justify !important; 
        padding-left: 0;
    }

    .split-image img {
        transform: none !important; 
    }
    
    .split-image img:hover {
        transform: none !important; 
    }
}



/* ==========================================
   6. MULTIMEDIA, PLATAFORMAS FLOTANTES Y GALERÍA
   ========================================== */
/* 1. Estilo de la Sección General (Mantiene tus nombres originales) */
.video-section {
    padding: 60px 20px;       /* Da un espacio elegante arriba y abajo de la sección */
    background-color: #fff;   /* O el color de fondo actual de tu página */
    text-align: center;       /* Asegura que el título y el video queden perfectamente centrados */
}

/* 3. Contenedor del Video Ajustado (Corto Verticalmente en PC) */
.video-container { 
    width: 100%; 
    max-width: 700px; 
    margin: 0 auto; 
    position: relative; 
    padding-bottom: 30%; /* Mantiene la altura recortada y estilizada que te gustó */
    height: 0; 
    overflow: hidden; 
    
    /* NUEVO: Configuración del borde blanco */
    border: 8px solid #ffffff; /* Crea el marco blanco de 5 píxeles de grosor */
    box-sizing: content-box;   /* Evita que el borde "engulla" espacio del video y mantiene la proporción intacta */
    
    border-radius: 12px; /* Aumentado un poco para que la curva del borde se vea suave y moderna */
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15); /* Sombra un poco más profunda para que el marco blanco resalte del fondo */
}

.video-container iframe { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    border: none;
}

/* Ajustes para Celulares */
@media (max-width: 576px) {
    .video-container {
        padding-bottom: 80% !important; /* Formato estándar en móviles */
        border: 3px solid #ffffff; /* Un borde un poco más delgado en pantallas chicas para que no sature */
    }
}

@media(max-width: 992px) {
     .video-container {
         max-width: 550px; 
        padding-bottom: 50%; /* Formato estándar en móviles */
        border: 3px solid #ffffff; /* Un borde un poco más delgado en pantallas chicas para que no sature */
    }
}

/* Dispositivos con tamaño de iPad en orientación horizontal */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) {
  .video-container {
    padding-bottom: 40%;
  }
}


/* ========================================================
   7. MANEJO DE PLATAFORMAS DIGITALES (ANIMACIÓN FLOTANTE 3D)
   ======================================================== */
.platforms-logos.alternative-three { 
    max-width: 1000px; 
    margin: 0 auto; 
    display: flex; 
    justify-content: center; 
    align-items: center;
    gap: 40px; 
    flex-wrap: wrap;
    padding: 20px 0;
}

/* Contenedor de cada logotipo con sombra dinámica */
.platform-card-animated { 
    background: var(--white); 
    
    /* 1. Definir un tamaño fijo igual para todas las cajas */
    width: 280px; 
    height: 180px; 
    
    /* 2. Centrado absoluto (horizontal y vertical) de la imagen */
    display: flex;
    justify-content: center;
    align-items: center;
    
    /* Eliminamos padding lateral fijo para que no deforme el tamaño */
    padding: 20px; 
    border-radius: 12px; 
    box-shadow: 0 10px 20px rgba(38, 46, 65, 0.08); 
    transition: box-shadow 0.4s ease, transform 0.4s ease;
    
    /* Configuración de la animación base (4 segundos por ciclo) */
    animation: floatPlatform 4s ease-in-out infinite; 
    box-sizing: border-box; /* Asegura que el padding no altere las medidas fijas */
}



/* Desfase de tiempos para que no floten al mismo tiempo (efecto orgánico) */
.platform-card-animated:nth-child(2) { 
    animation-delay: 0.6s; 
    animation-duration: 4.5s;
}

.platform-card-animated:nth-child(3) { 
    animation-delay: 1.2s; 
    animation-duration: 5s;
}

/* Tamaño de las imágenes de las plataformas */
.platform-card-animated img { 
    /* 3. Ajuste inteligente para que no se deformen ni desborden */
    max-width: 100%; 
    max-height: 100%;
    object-fit: contain; 
    display: block; 
    transition: transform 0.3s ease;
}


/* Efecto Hover: Cuando pasas el mouse, se detiene la animación y resalta */
.platform-card-animated:hover {
    animation-play-state: paused;
    transform: translateY(-12px) scale(1.03) !important;
    box-shadow: 0 15px 30px rgba(213, 161, 41, 0.25); /* Sombra con destello dorado */
}

/* Efecto espejo en la imagen al hacer hover */
.platform-card-animated:hover img {
    transform: scale(1.02);
}

/* Línea de tiempo matemática para el efecto levitante */
@keyframes floatPlatform { 
    0%, 100% { 
        transform: translateY(0); 
        box-shadow: 0 10px 20px rgba(38, 46, 65, 0.08);
    } 
    50% { 
        transform: translateY(-15px); 
        /* La sombra se hace más suave y grande cuando la tarjeta sube */
        box-shadow: 0 22px 35px rgba(38, 46, 65, 0.15);
    } 
}

/* Responsivo para celulares */
@media(max-width: 768px) {
    .platforms-logos.alternative-three { 
        flex-direction: column; 
        gap: 25px;
    }
    .platform-card-animated {
        width: 100%;
        max-width: 280px;
        padding: 20px;
        /* Reducimos el movimiento en móvil para evitar saltos raros de pantalla */
        animation: floatPlatformMobile 4s ease-in-out infinite;
    }
    .platform-card-animated:nth-child(2) { animation-delay: 0.5s; }
    .platform-card-animated:nth-child(3) { animation-delay: 1s; }
}

@keyframes floatPlatformMobile {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}

/* ========================================================
   SECCIÓN DE INTRODUCCIÓN
   ======================================================== */
.gallery-section-wrapper {
    padding: 60px 20px;
    background-color: #f8fafc; 
}

.gallery-intro-banner { 
    text-align: center; 
    margin-bottom: 40px;
}

.gallery-subtitle {
    font-size: 13px;
    color: var(--primary-blue);
    font-weight: 700;
    letter-spacing: 3px;
    margin-bottom: 8px;
}

.gallery-intro-banner h2 { 
    font-size: 32px; 
    color: #1e293b; 
    font-weight: 800;
    letter-spacing: -0.5px;
    text-transform: none; 
}

.title-divider {
    width: 50px;
    height: 3px;
    background-color: var(--primary-blue);
    margin: 15px auto 0;
    border-radius: 2px;
}

/* ========================================================
   CUADRÍCULA Y TARJETAS RECTANGULARES VERTICALES
   ======================================================== */
.gallery-grid { 
    display: grid; 
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); 
    gap: 24px; 
    max-width: 1200px;
    margin: 0 auto;
}

.gallery-item {
    position: relative;
    height: 420px; /* Estilo rectangular vertical */
    border-radius: 12px; 
    overflow: hidden; 
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05); 
    cursor: pointer;
    background-color: #000;
}

.gallery-item img { 
    width: 100%; 
    height: 100%; 
    object-fit: cover; 
    transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1); 
}

/* ========================================================
   EFECTO CORTINA (Baja desde arriba en un color diferente)
   ======================================================== */
.gallery-overlay {
    position: absolute;
    top: -100%; /* Totalmente oculta arriba por defecto */
    left: 0;
    width: 100%;
    height: 100%;
    
    /* CAMBIA ESTE COLOR: Aquí pones el color de tu cortina (Ej: Un naranja/coral vibrante o azul oscuro) */
    background-color: rgba(213, 161, 41, 0.9); /* Rojo/Coral moderno semitransparente */
    
    display: flex;
    flex-direction: column;
    justify-content: center; /* Centra el contenido verticalmente para el impacto visual */
    align-items: center;     /* Centra el contenido horizontalmente */
    padding: 30px;
    box-sizing: border-box;
    
    /* Curva de aceleración premium para la caída */
    transition: top 0.5s cubic-bezier(0.76, 0, 0.24, 1); 
}

/* Elementos dentro de la cortina (Texto) */
.gallery-tag {
    color: rgba(255, 255, 255, 0.8);
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 8px;
    transform: scale(0.8);
    opacity: 0;
    transition: transform 0.4s ease 0.2s, opacity 0.4s ease 0.2s; /* Aparece con retraso */
}

.gallery-overlay h3 {
    color: #ffffff;
    font-size: 26px;
    font-weight: 800;
    letter-spacing: 1px;
    margin: 0;
    transform: scale(0.8);
    opacity: 0;
    transition: transform 0.4s ease 0.2s, opacity 0.4s ease 0.2s; /* Aparece con retraso */
}

/* ========================================================
   EFECTOS HOVER (Activación)
   ======================================================== */

/* La cortina baja a su posición */
.gallery-item:hover .gallery-overlay {
    top: 0;
}

/* Los textos se escalan a su tamaño real y aparecen */
.gallery-item:hover .gallery-tag,
.gallery-item:hover .gallery-overlay h3 {
    transform: scale(1);
    opacity: 1;
}

/* La imagen del fondo hace un ligero zoom hacia atrás o adelante */
.gallery-item:hover img {
    transform: scale(1.08);
}

/* ========================================================
   RESPONSIVO PARA IPAD HORIZONTAL
   ======================================================== */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) {
    .gallery-grid { 
        grid-template-columns: repeat(4, 1fr); 
        gap: 16px; 
    }
    .gallery-item {
        height: 450px; 
    }
}

/* 2. NUEVO: iPad en orientación VERTICAL (Portrait) - Fuerza 2 columnas */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) {
    .gallery-grid { 
        grid-template-columns: repeat(2, 1fr) !important; /* Fuerza el diseño a 2 bloques */
        gap: 16px; 
    }
    .gallery-item {
        height: 380px; /* Reducido un poco para que no quede estirado al ser solo 2 columnas */
    }
}


/* ==========================================
   BANNER DE LA MASCOTA (CHIMALLI INTEGRADO Y GRANDE)
   ========================================== */
.mascot-banner { 
    background-color: var(--primary-blue); 
    color: var(--white); 
    padding: 60px 5%; 
    border-top: 4px solid var(--gold); 
    position: relative;
    overflow: hidden;
}

.mascot-container { 
    max-width: 1000px; /* Ampliado un poco para dar espacio a la mascota más grande */
    margin: 0 auto; 
    display: flex; 
    align-items: center; 
    gap: 50px; /* Más espacio de separación */
    flex-wrap: wrap; 
    justify-content: center; 
}

/* Imagen de la Mascota - Ahora más grande y sin fondo blanco */
.mascot-img { 
    width: 240px; /* Tamaño mucho más grande e imponente */
    height: auto;  /* Permite que mantenga su proporción original sin distorsionarse */
    object-fit: contain; 
    
    /* Eliminamos el círculo blanco y sus márgenes internos */
    border-radius: 0% !important; 
    background: transparent !important; 
    padding: 0px !important; 
    
    /* Sombra suave directa a la silueta (si la imagen es PNG transparente, se adaptará genial) */
    filter: drop-shadow(0 10px 15px rgba(0, 0, 0, 0.3)); 
    
    /* Mantiene el efecto de flotación suave */
    animation: flotarMascota 4s ease-in-out infinite; 
}

/* Bloque de Texto */
.mascot-text {
    flex: 1;
    min-width: 300px; 
}

.mascot-text h2 { 
    color: var(--gold); 
    font-size: 2.2rem; /* Título ligeramente más grande acorde al nuevo diseño */
    margin-bottom: 12px; 
    font-weight: 700;
}

.mascot-text p {
    font-size: 1.15rem;
    line-height: 1.6;
    margin-bottom: 24px; 
    color: rgba(255, 255, 255, 0.95); 
}

/* Botón de Inscripción */
.mascot-banner .btn-primary {
    display: inline-block;
    transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}
.mascot-banner .btn-primary:hover {
    transform: translateY(-3px) scale(1.03); 
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
}

/* KEYFRAMES: Efecto de flotación suave */
@keyframes flotarMascota {
    0% { transform: translateY(0px); }
    50% { transform: translateY(-12px); } /* Flota un poquito más alto por su nuevo tamaño */
    100% { transform: translateY(0px); }
}

/* ==========================================
   Ajuste Responsivo para Celulares
   ========================================== */
@media (max-width: 768px) {
    .mascot-container {
        flex-direction: column; 
        text-align: center;    
        gap: 30px;
    }
    .mascot-img {
        width: 190px; /* En móviles se reduce un poco para que no sature la pantalla */
    }
    .mascot-text {
        text-align: center;
    }
}
/* ==========================================
   7. FORMULARIO, DIRECTORIO, CONTADOR Y CIERRE
   ========================================== */

.contacto-section {
    text-align: center; 
    padding: 80px 4% !important; 
    background-color: #f8f9fa; 
}

.contact-main-title {
    color: #262e41 !important; 
    font-size: 32px !important; 
    font-weight: 800 !important; 
    margin: 0 auto 15px !important;
}

.contact-title-divider {
    background-color: #d5a129 !important; 
    width: 60px !important; 
    height: 3px !important; 
    margin: 0 auto 40px !important; 
    border-radius: 2px !important;
}

.contact-wrapper { 
    display: flex; 
    max-width: 1200px;
    margin: 0 auto;
    gap: 50px; 
    flex-wrap: wrap; 
    align-items: stretch; /* Estira ambas columnas para igualar el alto vertical */
}

.contact-form-container { 
    flex: 12; /* Ajuste sutil de proporciones */
    min-width: 320px; 
    text-align: left; 
}

.maps-section {
    flex: 12;
    min-width: 320px; 
    text-align: left;
    display: flex;
    flex-direction: column; /* Hace que el mapa ocupe todo el alto disponible verticalmente */
}

.contact-form-container h3,
.maps-section h3 {
    font-size: 22px;
    font-weight: 800;
    color: #262e41;
    margin-top: 0;
    margin-bottom: 25px;
    letter-spacing: 0.5px;
}

/* Tarjeta blanca del Formulario */
.contact-form {
    background-color: #ffffff;
    border-radius: 20px;
    padding: 40px;
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.03);
    border: 1px solid rgba(0, 0, 0, 0.02);
    box-sizing: border-box;
}

.contact-form input, 
.contact-form textarea { 
    width: 100%; 
    padding: 14px; 
    margin-bottom: 18px; 
    border: 1px solid #e2e8f0; 
    border-radius: 8px; 
    background-color: #f8fafc;
    font-size: 15px;
    color: #262e41;
    box-sizing: border-box;
}

.contact-form input:focus, 
.contact-form textarea:focus {
    outline: none;
    border-color: #262e41;
    background-color: #ffffff;
}

.btn-submit-contacto {
    width: 100%; 
    background-color: #262e41 !important; 
    color: #ffffff !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    padding: 14px 35px !important;
    border-radius: 5px !important; /* Mantiene tu estilo de 5px */
    border: 2px solid transparent !important;
    cursor: pointer;
    box-shadow: 0 6px 15px rgba(38, 46, 65, 0.15) !important;
    transition: background-color 0.3s ease, border-color 0.3s ease, transform 0.2s ease !important;
}

.btn-submit-contacto:hover {
    background-color: #d5a129 !important; 
    border-color: #d5a129 !important;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(213, 161, 41, 0.25) !important;
}

/* ==========================================
   DISEÑO DE LA BARRA DE BOTONES DEL MAPA
   ========================================== */
.maps-nav {
    display: flex;
    gap: 8px;
    margin-bottom: 18px;
    flex-wrap: wrap; /* Fluido en móviles */
}

.btn-map-tab {
    background-color: #e2e8f0;
    color: #4a5568;
    border: none;
    padding: 10px 18px;
    font-size: 14px;
    font-weight: 700;
    border-radius: 5px; /* Sincronizado a 5px rectangular */
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.btn-map-tab:hover {
    background-color: #cbd5e1;
    color: #262e41;
}

/* Estado activo del botón: Pasa a color Azul con texto blanco/dorado corporativo */
.btn-map-tab.active {
    background-color: #262e41;
    color: #ffffff;
    box-shadow: 0 4px 10px rgba(38, 46, 65, 0.15);
}

/* ==========================================
   ESTILO DEL CONTENEDOR DE UN SOLO MAPA
   ========================================== */
.single-map-container {
    flex: 1; /* Esto succiona mecánicamente todo el alto restante de la columna izquierda */
    width: 100%;
    min-height: 320px; /* Seguro para que en móvil tenga buen tamaño táctil */
}

.single-map-container iframe {
    width: 100%;
    height: 100%; /* Copia de forma milimétrica la altura calculada */
    border: 0;
    border-radius: 20px; /* Combina con el diseño curvo de tu formulario */
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.03);
    display: block;
    background: #e2e8f0;
    transition: opacity 0.3s ease; /* Efecto fade para el cambio por JS */
}

/* Ajustes para móviles */
@media (max-width: 992px) {
    .contact-wrapper {
        flex-direction: column;
        gap: 40px;
    }
    .single-map-container {
        height: 380px; /* Tamaño estático fijo para que se use bien en tablets/celulares */
    }
}

/* ==========================================
   Ajustes específicos para Celulares / iPhones (max-width: 576px)
   ========================================== */
@media (max-width: 576px) {
    
    /* ... (Aquí mantienes tus otros estilos de celular para el título y texto) ... */

    /* SOLUCIÓN: Desactiva el salto de línea y fuerza la fila horizontal */
    .maps-nav {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important; /* Evita que los botones se bajen a una segunda fila */
        gap: 5px !important;          /* Reduce la separación para ganar espacio */
        width: 100% !important;
    }

    /* SOLUCIÓN: Fuerza a los 4 botones a medir exactamente lo mismo y encogerse */
    .btn-map-tab {
        flex: 1 !important;           /* Se reparten el ancho de la pantalla en partes iguales */
        padding: 10px 4px !important; /* Reduce el relleno interno lateral al mínimo */
        font-size: 11px !important;   /* Hace la tipografía compacta para que quepa la palabra completa */
        text-align: center !important;
        white-space: nowrap !important; /* Evita que el texto del botón se divida en dos renglones */
    }
}


/* ==========================================
   PIE DE PÁGINA: DETALLES DE CONTACTO OPTIMIZADOS
   ========================================== */
/* ==========================================
   PIE DE PÁGINA: DETALLES DE CONTACTO OPTIMIZADOS
   ========================================== */
.footer-info-details { 
    background-color: #1e2433; /* Azul oscuro */
    color: #ffffff; 
    padding: 60px 4%; 
    border-top: 1px solid #2e374d; 
    display: flex;
    justify-content: center;
}

.footer-info-wrapper {
    display: flex;
    max-width: 1200px;
    width: 100%;
    gap: 50px;
    justify-content: space-between;
    flex-wrap: wrap;
}

.info-column { 
    flex: 1; 
    min-width: 290px; 
    text-align: left;
}

/* Títulos de las Columnas */
.info-column h3 { 
    color: #d5a129; /* Dorado */
    margin: 0 0 20px 0; 
    font-size: 17px; 
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Cajas destacadas de Teléfonos */
.phone-highlight-box {
    background-color: rgba(255, 255, 255, 0.04);
    border-left: 3px solid #d5a129; /* Borde dorado */
    padding: 10px 14px;
    border-radius: 4px;
    font-size: 14.5px;
    font-weight: 600;
    color: #ffffff;
    margin: 0 0 22px 0;
}
.phone-highlight-box.secure-phone {
    border-left-color: #3b82f6; /* Un color azul claro distintivo para diferenciar secundaria */
}
.phone-highlight-box a {
    color: #ffffff;
    text-decoration: none;
    font-weight: 700;
    transition: color 0.2s ease;
}
.phone-highlight-box a:hover {
    color: #d5a129;
}

/* Sub-bloques de planteles */
.campus-sub-item {
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.campus-sub-item:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

/* Etiquetas sutiles de niveles */
.campus-badge {
    display: inline-block;
    background-color: rgba(255, 255, 255, 0.08);
    color: #cbd5e1;
    font-size: 10.5px;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 4px;
    text-transform: uppercase;
    margin-bottom: 6px;
    letter-spacing: 0.5px;
}
.campus-badge.badge-secundaria {
    background-color: rgba(59, 130, 246, 0.15);
    color: #60a5fa;
}

/* Líneas de dirección */
.info-item { 
    font-size: 13.5px; 
    color: #cbd5e1; 
    margin: 0; 
    line-height: 1.4;
    display: flex;
    align-items: flex-start;
    gap: 8px;
}
.info-item i {
    color: #94a3b8;
    font-size: 13px;
    margin-top: 2px;
    flex-shrink: 0;
}

/* ==========================================
   COLUMNA DE ATENCIÓN Y REDES SOCIALES
   ========================================== */
.attention-column {
    display: flex;
    flex-direction: column;
    gap: 25px;
}

.info-label {
    font-size: 11.5px;
    font-weight: 700;
    text-transform: uppercase;
    color: #94a3b8;
    margin: 0 0 8px 0;
}

.email-link {
    color: #ffffff;
    text-decoration: none;
    font-size: 14.5px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    transition: color 0.2s ease;
}
.email-link i { color: #d5a129; }
.email-link:hover { color: #d5a129; }

/* Iconos de Redes Sociales (Sincronizados a 5px) */
.social-icons-row {
    display: flex;
    gap: 12px;
}
.icon-soc {
    width: 42px;
    height: 42px;
    border-radius: 5px; /* Tu estilo de 5px rectangular sutil */
    display: flex;
    justify-content: center;
    align-items: center;
    color: #ffffff;
    font-size: 18px;
    text-decoration: none;
    transition: transform 0.2s ease;
}
.fb-icon { background-color: #1877f2; }
.yt-icon { background-color: #ff0000; }
.icon-soc:hover { transform: translateY(-3px); }

/* ==========================================
   RESPONSIVE DESIGN FOR MOBILE
   ========================================== */
@media (max-width: 992px) {
    .footer-info-wrapper {
        flex-direction: column;
        gap: 40px;
    }
    .info-column {
        width: 100%;
        text-align: center;
    }
    .info-column h3, .phone-highlight-box, .info-item, .social-icons-row {
        justify-content: center;
    }
    .info-item {
        text-align: center;
    }
}


/* Barra final de Derechos y Contador */
.bottom-copyright-bar { 
    background-color: var(--primary-blue); 
    color: #94a3b8; 
    padding: 25px 5%; 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    flex-wrap: wrap; 
    gap: 20px; 
}

.visitor-counter-box { 
    background-color: #1a1f2c; 
    padding: 8px 15px; 
    border-radius: 4px; 
    border: 1px solid var(--gold); 
    display: flex; 
    align-items: center; 
    gap: 10px; 
}

.counter-label { 
    font-size: 13px; 
    color: var(--white); 
    text-transform: uppercase; 
}

.counter-number { 
    color: var(--gold); 
    font-family: monospace; 
    font-size: 18px; 
    font-weight: bold; 
    letter-spacing: 2px; 
}

.copy-text { 
    font-size: 14px; 
}

/* Modales y Utilidades */
.section-padding { padding: 60px 5%; }
.bg-light { background-color: var(--light-bg); }
.btn-primary { background-color: var(--gold); color: var(--primary-blue); padding: 12px 25px; border-radius: 10px; text-decoration: none; font-weight: bold; transition: 0.3s; }
.btn-secondary { background-color: var(--primary-blue); color: var(--white); padding: 12px 30px; border: none; border-radius: 5px; text-decoration: none; font-weight: bold; cursor: pointer; transition: 0.3s; }
.btn-secondary:hover { background-color: var(--gold); color: var(--primary-blue); }

.modal { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); z-index: 2000; justify-content: center; align-items: center; }
.modal-content { background: var(--white); padding: 40px; border-radius: 8px; max-width: 450px; width: 90%; position: relative; text-align: center; }
.close-modal { position: absolute; top: 15px; right: 20px; font-size: 28px; cursor: pointer; }

/* Reglas Adaptables para Celulares */
@media(max-width: 768px) {
    .maps-grid, .footer-info-details, .bottom-copyright-bar { flex-direction: column; text-align: center; }
    .platforms-logos.alternative-three { flex-direction: column; align-items: center; }
    .social-networks { align-items: center; }
}


/* ==========================================
   BOTONES FLOTANTES (CHATBOT Y WHATSAPP)
   ========================================== */
   
   /* --- BLINDAJE PARA EL CONTENEDOR FLOTANTE --- */
.contenedor-flotante {
    position: fixed !important;
    
    /* Coordenadas fijas explícitas para evitar que se mueva al girar */
    bottom: 25px !important;    
    right: 25px !important;     
    top: auto !important;
    left: auto !important;
    
    /* Dimensiones fijas para que el contenedor no se colapse al rotar */
    width: 60px !important;
    height: auto !important;
    
    display: flex !important;
    flex-direction: column !important; 
    gap: 14px !important;       
    align-items: center !important;
    justify-content: flex-end !important;
    
    /* Capa de profundidad con aislamiento para Safari */
    z-index: 99999999 !important; 
    -webkit-transform: translate3d(0, 0, 0) !important; /* Fuerza la aceleración por hardware en iPad */
    transform: translate3d(0, 0, 0) !important;
}

/* Estilos base premium para tus dos primeros botones flotantes */
.btn-flotante {
    width: 72px !important;
    height: 72px !important;
    border-radius: 50% !important; /* Completamente redondos */
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    color: #ffffff !important;
    cursor: pointer !important;
    border: none !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.25) !important;
    transition: all 0.3s ease !important;
    text-decoration: none !important;
    
    /* Evita que Safari altere las dimensiones al rotar */
    flex-shrink: 0 !important; 
}

/* Color personalizado para tu chatbot (Azul Institucional) */
.btn-chatbot {
    background-color: #0d6efd !important; /* Azul */
    font-size: 35px !important; 
}
.btn-chatbot:hover {
    background-color: #0d6efd !important;
    transform: translateY(-3px);
}

/* Color oficial de WhatsApp */
.btn-whatsapp {
    background-color: #25d366 !important;
    font-size: 45px !important; 
}
.btn-whatsapp:hover {
    transform: scale(1.08);
    box-shadow: 0 6px 20px rgba(37, 211, 102, 0.4) !important;
}


/* Estilos Base para ambos botones */
.btn-flotante {
    width: 72px !important;  
    height: 72px !important;
    border-radius: 50% !important; 
    color: #ffffff !important;
    cursor: pointer !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    box-shadow: 0 8px 22px rgba(0,0,0,0.3) !important;
    transition: background-color 0.2s ease, transform 0.2s ease !important;
    text-decoration: none !important;
}

/* Efecto al pasar el mouse por encima (Hover) */
.btn-flotante:hover {
    transform: scale(1.08) !important;
}

/* --- CONFIGURACIÓN BASE DEL BOTÓN DE SUBIR --- */
.btn-subir-controlado {
    width: 40px !important; 
    height: 40px !important;
    border-radius: 10px !important; 
    background-color: #262e41 !important; /* Azul Institucional */
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    font-size: 16px !important;
    font-weight: bold !important;
    cursor: pointer !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    margin-top: 10px !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.35) !important;
    
    /* ESTADO INICIAL SEGURO: Apagado e invisible */
    opacity: 0 !important;
    visibility: hidden !important;
    transform: scale(0.8) translateY(0) !important;
    
    /* Transición suave para todos los movimientos */
    transition: opacity 0.3s ease, visibility 0.3s ease, background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease !important;
}

/* CLASE ACTIVA: Muestra el botón cuando el usuario baja la página */
.btn-subir-controlado.mostrar-btt {
    opacity: 1 !important;
    visibility: visible !important;
    transform: scale(1) translateY(0) !important;
}

/* SOLUCIÓN AL BLOQUEO DE TRANSICIÓN: Combinamos el estado visible con el Hover */
.btn-subir-controlado.mostrar-btt:hover {
    background-color: #d5a129 !important; /* Dorado del colegio */
    
    /* BLINDAJE: Le ganamos al !important previo forzando la escala y la elevación juntas */
    transform: scale(1) translateY(-6px) !important; 
    
    /* Intensificamos la sombra para dar el efecto real de flotado */
    box-shadow: 0 10px 25px rgba(0,0,0,0.45) !important; 
}


/* ==========================================
   Ajustes para Pantallas Móviles (Celulares)
   ========================================== */
@media (max-width: 767px) {
    .contenedor-flotante {
        bottom: 15px !important; 
        right: 15px !important;  
        gap: 10px !important;    
    }
    .btn-flotante {
        width: 54px !important;  
        height: 54px !important; 
    }
    .btn-chatbot {
        font-size: 24px !important; 
    }
    .btn-whatsapp {
        font-size: 32px !important; 
    }
}

/* Capa de fondo del modal REFORZADA */
.modal-inscripcion-overlay {
    display: none !important; /* El JS se encargará de cambiarlo */
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    background: rgba(0, 0, 0, 0.75) !important; /* Fondo un poco más oscuro para contrastar */
    backdrop-filter: blur(5px) !important;
    z-index: 99999999 !important; /* Capa ultra alta para ganarle a menús y sliders */
    justify-content: center !important;
    align-items: center !important;
    padding: 15px !important;
}


/* Tarjeta del modal */
.modal-inscripcion-content {
    background: #ffffff;
    width: 100%;
    max-width: 500px;
    border-radius: 16px;
    padding: 30px;
    position: relative;
    box-shadow: 0 15px 35px rgba(0,0,0,0.2);
    animation: modalEntrada 0.4s ease forwards;
}

@keyframes modalEntrada {
    from { transform: translateY(-30px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

/* Botón cerrar */
.modal-cerrar-btn {
    position: absolute;
    top: 15px; right: 20px;
    background: none; border: none;
    font-size: 28px; color: #999;
    cursor: pointer;
}
.modal-cerrar-btn:hover { color: #333; }

/* Indicadores de pasos */
.pasos-indicador-container {
    display: flex; align-items: center; justify-content: center; margin: 25px 0;
}
.paso-circulo {
    width: 32px; height: 32px; border-radius: 50%;
    background: #e0e0e0; color: #666; font-weight: 700;
    display: flex; align-items: center; justify-content: center; font-size: 14px;
}
.paso-circulo.activo { background: #d5a129; color: #fff; }
.paso-linea { flex-grow: 1; height: 2px; background: #e0e0e0; max-width: 60px; margin: 0 8px; }

/* Entradas de texto e inputs modernos */
.paso-formulario-bloque { display: none; }
.paso-formulario-bloque.activo { display: block; }
.paso-titulo { font-size: 16px; color: #444; margin-bottom: 15px; font-weight: 600; }

.input-grupo-moderno { margin-bottom: 18px; display: flex; flex-direction: column; }
.input-grupo-moderno label { font-size: 12px; color: #888; margin-bottom: 4px; font-weight: 600; }
.input-grupo-moderno input, .input-grupo-moderno select {
    width: 100%; padding: 12px 14px;
    border: 1px solid #ccc; border-radius: 8px;
    font-size: 15px; background: #fafafa; outline: none; transition: border 0.3s;
}
.input-grupo-moderno input:focus, .input-grupo-moderno select:focus {
    border-color: #d5a129; background: #fff;
}
.input-grupo-flex { display: flex; gap: 12px; }
.w-50 { width: 50%; }

/* Botonera footer modal */
.modal-botones-footer { display: flex; justify-content: flex-end; gap: 10px; margin-top: 25px; }
.btn-siguiente-modal, .btn-enviar-modal {
    background: #262e41; color: #fff; border: none; padding: 12px 24px;
    border-radius: 8px; font-weight: 600; cursor: pointer; font-size: 14px;
}
.btn-enviar-modal { background: #0d6efd; } /* Verde éxito para enviar */
.btn-regresar-modal {
    background: #f0f0f0; color: #555; border: none; padding: 12px 24px;
    border-radius: 8px; font-weight: 600; cursor: pointer; font-size: 14px;
}

/* --- ESTILOS DE LA PÁGINA NOSOTROS --- */
.nosotros-hero-premium {
    /* Tu color institucional exacto aplicado con un degradado sutil para dar volumen */
    background: linear-gradient(135deg, #262e41 0%, #1a202d 100%);
    height: 320px; /* Una altura balanceada y elegante */
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    position: relative;
    overflow: hidden;
    
    /* CORTE SOLICITADO: Completamente plano, recto y tradicional */
    border-bottom: 4px solid #d5a129; /* Añadimos una fina línea dorada en la base para amarrar el diseño escolar */
}

/* Sutil textura de fondo integrada */
.nosotros-hero-premium::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0; left: 0;
    background-image: radial-gradient(circle, rgba(213, 161, 41, 0.04) 1px, transparent 1px);
    background-size: 20px 20px; /* Puntitos dorados ultra finos que dan textura premium */
}

.nosotros-hero-content {
    position: relative;
    z-index: 5;
    max-width: 850px;
    padding: 0 20px;
}

/* Título imponente y simétrico */
.nosotros-hero-content h1 {
    font-size: 44px;
    color: #ffffff;
    margin: 0 0 12px 0;
    text-transform: uppercase;
    letter-spacing: 3px; /* Espaciado de letras elegante y limpio */
    font-weight: 800;
}

/* Subtítulo nítido de alta legibilidad */
.nosotros-hero-content p {
    font-size: 18px;
    color: #e2e8f0; /* Tono gris claro que descansa la vista sobre el fondo oscuro */
    opacity: 0.95;
    margin: 0;
    font-weight: 400;
    line-height: 1.5;
}

/* --- ADAPTACIÓN RESPONSIVA (MÓVILES) --- */
@media (max-width: 768px) {
    .nosotros-hero-premium {
        height: 240px;
    }
    .nosotros-hero-content h1 {
        font-size: 32px;
        letter-spacing: 2px;
    }
    .nosotros-hero-content p {
        font-size: 15px;
    }
}

/* Contenedor general */
.container-nosotros {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Hero Banner Superior */
.nosotros-hero {
    background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url('https://unsplash.com') no-repeat center center/cover;
    height: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #ffffff;
}
.nosotros-hero-content h1 {
    font-size: 42px;
    margin: 0 0 10px 0;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: 700;
}
.nosotros-hero-content p {
    font-size: 18px;
    opacity: 0.9;
    margin: 0;
}

/* Sección Quiénes Somos */
.nosotros-quienes {
    padding: 80px 0;
    background: #ffffff;
}
.nosotros-quienes .container-nosotros {
    display: flex;
    align-items: center;
    gap: 50px;
}
.quienes-texto {
    flex: 1;
}
.subtitulo-dorado {
    color: #d5a129;
    font-size: 14px;
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 2px;
    display: block;
    margin-bottom: 5px;
}
.quienes-texto h2 {
    font-size: 36px;
    color: #333333;
    margin: 0 0 20px 0;
    font-weight: 700;
}
.quienes-texto p {
    font-size: 16px;
    color: #666666;
    line-height: 1.7;
    margin-bottom: 15px;
}
.quienes-imagen {
    flex: 1;
}
.quienes-imagen img {
    width: 100%;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    object-fit: cover;
    height: 380px;
}
/* --- SECCIÓN QUIÉNES SOMOS VERSIÓN PREMIUM --- */
.nosotros-quienes-premium {
    padding: 100px 0;
    background: #ffffff;
    position: relative;
}

.container-nosotros-p {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 25px;
    display: flex;
    align-items: center;
    gap: 70px; /* Mayor separación para dar una sensación de amplitud */
}

/* Columna de Texto Editorial */
.quienes-texto-p {
    flex: 1.1; /* Le damos ligeramente más espacio al texto */
}

.subtitulo-premium {
    color: #d5a129;
    font-size: 20px;
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 3px; /* Letras más separadas estilo marca de lujo */
    display: block;
    margin-bottom: 12px;
}

.titulo-premium {
    font-size: 44px; /* Título más grande e imponente */
    color: #1a1a1a;
    margin: 0 0 30px 0;
    font-weight: 800;
    position: relative;
}

/* Primer párrafo: Estilo lead/introductorio de revista */
.quienes-texto-p .parrafo-destacado {
    font-size: 20px;
   
    line-height: 1.7;
    margin-bottom: 25px;
    
}

/* Segundo párrafo: Texto base muy limpio */
.quienes-texto-p .parrafo-secundario {
    font-size: 16px;
   
    line-height: 1.8;
    margin: 0;
}

/* Columna de Composición Gráfica */
.quienes-grafico-p {
    flex: 0.9;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Marco de la Imagen con Sombra Premium de profundidad */
.marco-imagen-premium {
    width: 100%;
    height: 440px;
    border-radius: 24px; /* Bordes curvados premium */
    overflow: hidden;
    box-shadow: 0 25px 55px rgba(213, 161, 41, 0.15); /* Sombra suave con tinte dorado */
}

.marco-imagen-premium img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
}

/* Efecto de zoom elegante en la foto al interactuar con la sección */
.quienes-grafico-p:hover .marco-imagen-premium img {
    transform: scale(1.04);
}

/* Tarjeta de Acreditación Flotante Asimétrica */
.tarjeta-insignia-flotante {
    position: absolute;
    bottom: -25px;
    left: -30px; /* Sobresale de la foto rompiendo la estructura aburrida */
    background: #ffffff;
    padding: 20px 25px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    gap: 15px;
    box-shadow: 0 15px 35px rgba(0,0,0,0.08);
    border-left: 5px solid #d5a129; /* Línea de acento dorado del colegio */
    animation: flotarInsignia 4s ease-in-out infinite; /* Movimiento flotante continuo */
}

.insignia-icono {
    font-size: 26px;
    color: #d5a129;
}

.insignia-info h4 {
    margin: 0 0 2px 0;
    font-size: 14px;
    color: #777777;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.insignia-info p {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    color: #222222;
}

/* Animación de balanceo para la tarjeta flotante */
@keyframes flotarInsignia {
    0% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
    100% { transform: translateY(0); }
}

/* --- RESPONSIVO PREMIUM (MÓVILES) --- */
@media (max-width: 991px) {
    .container-nosotros-p {
        flex-direction: column;
        gap: 50px;
        padding: 0 20px;
    }
    .titulo-premium {
        font-size: 34px;
    }
 
    .tarjeta-insignia-flotante {
        left: 20px;
        bottom: -20px;
    }
}

/* --- CENTRADO EXCLUSIVO PARA IPAD VERTICAL Y CELULARES --- */
@media (max-width: 991px) {
    .quienes-texto-p .subtitulo-premium,
    .quienes-texto-p .titulo-premium {
        text-align: center !important; /* Fuerza el centrado horizontal */
        display: block !important;     /* Asegura que se comporten como bloques completos */
        width: 100% !important;
    }
    
    /* Ajuste estético opcional: centra el posible adorno o margen inferior en móvil */
    .titulo-premium {
        margin-left: auto !important;
        margin-right: auto !important;
    }
}

/* Sección Pilares (Misión, Visión, Valores) */
.nosotros-pilares {
    padding: 80px 0;
    background: #f8f9fa;
}
.pilares-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}
.pilar-card {
    background: #ffffff;
    padding: 40px 30px;
    border-radius: 12px;
    text-align: center;
    box-shadow: 0 5px 20px rgba(0,0,0,0.05);
    transition: all 0.3s ease;
    border-top: 4px solid transparent;
}
.pilar-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 30px rgba(0,0,0,0.12);
    border-top-color: #d5a129; /* Línea dorada superior en hover */
}
.pilar-icono {
    font-size: 40px;
    color: #d5a129;
    margin-bottom: 20px;
}
.pilar-card h3 {
    font-size: 22px;
    color: #333333;
    margin: 0 0 15px 0;
    font-weight: 600;
}
.pilar-card p {
    font-size: 15px;
    color: #666666;
    line-height: 1.6;
    margin: 0;
}

/* --- ADAPTACIÓN RESPONSIVA (MÓVILES) --- */
@media (max-width: 991px) {
    .nosotros-quienes .container-nosotros {
        flex-direction: column;
        gap: 35px;
    }
    .quienes-imagen img {
        height: 280px;
    }
    .pilares-grid {
        grid-template-columns: 1fr;
        gap: 25px;
    }
    .nosotros-hero h1 {
        font-size: 32px;
    }
    .nosotros-hero p {
        font-size: 15px;
        padding: 0 15px;
    }
}

/* --- JUSTIFICADO DE TEXTO --- */
.text-justificado p {
    text-align: justify !important;
    text-justify: inter-word !important;
}

/* --- ENFOCADO EN RESALTAR LOS TEXTOS CON FONDO CÁLIDO --- */
.nosotros-bloques-imagenes {
    padding: 80px 0; /* Mayor espacio arriba y abajo de la sección */
    background: #ffffff; /* El fondo general es blanco para que las tiras de color contrasten */
}

.fila-pilar-imagen {
    display: flex;
    align-items: center;
    
    /* SOLUCIÓN RECUPERADA: Fondo de color amarillo/crema institucional */
    background: #fdf6e2; 
    
    margin-bottom: 50px; /* Más separación entre un bloque y otro */
    border-radius: 16px; /* Bordes redondeados modernos */
    box-shadow: 0 8px 25px rgba(213, 161, 41, 0.1); /* Sombra suave con el dorado de tu colegio */
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Efecto al pasar el mouse por encima de la fila completa */
.fila-pilar-imagen:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 35px rgba(213, 161, 41, 0.18);
}

.columna-pilar-texto {
    flex: 1;
    padding: 40px 55px; /* Espaciado amplio para que el texto respire dentro del cuadro de color */
}

.columna-pilar-texto p {
    font-size: 18px; /* Tamaño grande y claro */
    color: #2b2515;  /* Color café/negro ultra oscuro que contrasta perfecto sobre el fondo amarillo */
    line-height: 1.8; /* Excelente separación entre líneas */
    margin: 0;
    font-weight: 500; /* Letra con buena presencia y cuerpo */
    letter-spacing: 0.3px;
}

/* Estilo para destacar palabras clave al inicio o dentro del párrafo */
.columna-pilar-texto p strong {
    color: #b58210; /* Un tono dorado más quemado/oscuro para que sea súper legible sobre el fondo amarillo */
    font-weight: 700;
    font-size: 19px;
}

/* Columna de la Imagen completa */
.columna-pilar-grafico {
    flex: 0 0 45%;
    max-width: 45%;
    display: flex;
    align-items: center;
}

.columna-pilar-grafico img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: contain;
}

/* --- RESPONSIVO PARA MÓVILES --- */
@media (max-width: 768px) {
    .fila-pilar-imagen {
        flex-direction: column;
        border-radius: 12px;
    }
    .columna-pilar-grafico {
        flex: 0 0 100%;
        max-width: 100%;
    }
    .columna-pilar-texto {
        padding: 30px 20px;
    }
}


/* --- CLASES DE ANIMACIÓN POR SCROLL --- */
.animar-entrada {
    opacity: 0;
    transform: translateY(40px); /* Efecto de subida sutil al aparecer */
    transition: all 0.8s cubic-bezier(0.25, 1, 0.5, 1);
}

.animar-entrada.visible {
    opacity: 1;
    transform: translateY(0);
}

/* --- ADAPTACIÓN RESPONSIVA (CELULARES) --- */
@media (max-width: 768px) {
    .fila-pilar-imagen {
        flex-direction: column; /* Se apilan verticalmente en pantallas chicas */
    }
    .columna-pilar-grafico {
        flex: 0 0 100%;
        max-width: 100%;
    }
    .columna-pilar-texto {
        padding: 20px;
    }
}

/* --- ESTILOS EXCLUSIVOS OFERTA EDUCATIVA: MATERNAL --- */

.container-maternal {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 25px;
}

/* Banner de Nivel Plano Institucional */
.nivel-hero-premium {
    background: linear-gradient(135deg, #262e41 0%, #1a202d 100%);
    height: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    position: relative;
    border-bottom: 4px solid #d5a129; /* Línea dorada base */
}
.nivel-hero-content {
    max-width: 800px;
    padding: 0 20px;
}
.nivel-tag {
    display: inline-block;
    background: rgba(213, 161, 41, 0.2);
    color: #d5a129;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 12px;
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 2px;
    margin-bottom: 12px;
}
.nivel-hero-content h1 {
    font-size: 46px;
    color: #ffffff;
    margin: 0 0 10px 0;
    text-transform: uppercase;
    letter-spacing: 3px;
    font-weight: 800;
}
.nivel-hero-content p {
    font-size: 18px;
    color: #e2e8f0;
    margin: 0;
    font-weight: 400;
}

/* Introducción Lúdica */
.maternal-introduccion {
    padding: 90px 0;
    background: #ffffff;
}
.maternal-grid-intro {
    display: flex;
    align-items: center;
    gap: 60px;
}
.maternal-intro-texto {
    flex: 1.2;
}
.maternal-intro-texto h2 {
    font-size: 38px;
    color: #1a1a1a;
    margin: 0 0 20px 0;
    font-weight: 800;
}
.maternal-intro-texto p {
    font-size: 16px;
    color: #555555;
    line-height: 1.8;
    margin-bottom: 15px;
}
.maternal-intro-grafico {
    flex: 0.8;
    display: flex;
    justify-content: center;
}

/* Tarjeta de edad estilo Insignia Premium */
.tarjeta-edad-premium {
    background: #fdf6e2; /* Tu fondo amarillo/crema suave */
    padding: 40px;
    border-radius: 24px;
    text-align: center;
    box-shadow: 0 12px 35px rgba(213, 161, 41, 0.12);
    border: 1px solid rgba(213, 161, 41, 0.2);
    width: 100%;
    max-width: 280px;
}
.tarjeta-edad-premium h3 {
    margin: 0 0 10px 0;
    font-size: 15px;
    color: #b58210;
    text-transform: uppercase;
    letter-spacing: 1px;
}
.tarjeta-edad-premium .edad-numero {
    font-size: 54px;
    font-weight: 900;
    color: #262e41;
    line-height: 1;
    margin-bottom: 5px;
}
.tarjeta-edad-premium p {
    margin: 0;
    font-size: 15px;
    color: #555555;
    font-weight: 600;
}

/* Cuadrícula de Pilares de Atención */
.maternal-pilares {
    padding: 80px 0;
    background: #f8f9fa;
}
.maternal-pilares-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
    margin-bottom: 60px;
}
.maternal-pilar-card {
    background: #ffffff;
    padding: 35px;
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.03);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border-top: 4px solid transparent;
}

/* Efecto hover premium que eleva la tarjeta e ilumina el borde superior */
.maternal-pilar-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 30px rgba(213, 161, 41, 0.1);
    border-top-color: #d5a129;
}
.pilar-card-icono {
    font-size: 32px;
    color: #d5a129;
    margin-bottom: 18px;
}
.maternal-pilar-card h3 {
    font-size: 22px;
    color: #262e41;
    margin: 0 0 12px 0;
    font-weight: 700;
}
.maternal-pilar-card p {
    font-size: 15px;
    color: #666666;
    line-height: 1.7;
    margin: 0;
}

/* Bloque Call To Action final */
.maternal-cta-bloque {
    background: #262e41;
    color: #ffffff;
    padding: 50px;
    border-radius: 20px;
    text-align: center;
    box-shadow: 0 15px 40px rgba(38, 46, 65, 0.2);
}
.maternal-cta-bloque h3 {
    font-size: 28px;
    margin: 0 0 10px 0;
    color: #ffffff;
    font-weight: 700;
}
.maternal-cta-bloque p {
    font-size: 16px;
    opacity: 0.9;
    margin: 0 0 25px 0;
}

/* ADAPTACIÓN RESPONSIVA (IPAD Y CELULARES) */
@media (max-width: 991px) {
    .maternal-grid-intro {
        flex-direction: column;
        gap: 40px;
    }
    .maternal-intro-texto h2 {
        font-size: 30px;
    }
    .maternal-pilares-grid {
        grid-template-columns: 1fr;
        gap: 25px;
    }
    .maternal-cta-bloque {
        padding: 35px 20px;
    }
    .maternal-cta-bloque h3 {
        font-size: 22px;
    }
    /* Centrado responsivo de títulos en móvil */
    .maternal-intro-texto .subtitulo-dorado,
    .maternal-intro-texto h2 {
        text-align: center !important;
        display: block !important;
    }
}

.tarjeta-paso-animada {
                        flex: 1; 
                        min-width: 220px; 
                        max-width: 280px; 
                        text-align: center; 
                        background-color: #fafbfe; 
                        padding: 25px 20px; 
                        border-radius: 16px;
                        box-shadow: 0 4px 12px rgba(0,0,0,0.02);
                        transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1); /* Curva suave de aceleración */
                        cursor: pointer;
                    }
                    /* Efecto Hover: Activación al pasar el cursor */
                    .tarjeta-paso-animada:hover {
                        transform: translateY(-8px); /* Eleva la tarjeta */
                        background-color: #ffffff;   /* Cambia a fondo blanco puro */
                        box-shadow: 0 15px 30px rgba(26,43,76,0.1); /* Sombra flotante más profunda */
                    }
                    
     @media (max-width: 576px) {
                .maternal-contenido-asimetrico .subtitulo-dorado,
                .maternal-contenido-asimetrico h2 {
                    text-align: center !important;
                    margin-left: auto !important;
                    margin-right: auto !important;
                }
            }
  @keyframes pulsoVerdeCalmecac {
                    0% {
                        transform: scale(0.95);
                        box-shadow: 0 0 0 0 rgba(46, 204, 113, 0.7);
                    }
                    70% {
                        transform: scale(1);
                        box-shadow: 0 0 0 6px rgba(46, 204, 113, 0);
                    }
                    100% {
                        transform: scale(0.95);
                        box-shadow: 0 0 0 0 rgba(46, 204, 113, 0);
                    }
                }
                .indicador-online-pulse {
                    width: 8px;
                    height: 8px;
                    background-color: #2ecc71; /* Verde brillante e institucional */
                    border-radius: 50%;
                    display: inline-block;
                    animation: pulsoVerdeCalmecac 2s infinite; /* Parpadeo infinito suave */
                }