body {
    margin: 0;
    padding: 0;
}
       
       
        
    
        
        /* Imágenes de fondo para cada columna */
        .column:nth-child(1) {
            background-image: url('../img_home/2anios.JPG');
        }
        
        .column:nth-child(2) {
            background-image: url('../img_home/inicial.jpg');
        }
        
        .column:nth-child(3) {
            background-image: url('../img_home/primaria.JPG');
        }
        
        .column:nth-child(4) {
            background-image: url('../img_home/secundaria.JPG');
        }
        
    


        
/* Reset básico para consistencia entre navegadores */
.columns-container-language, 
.columna-fija, 
.dynamic-columns-language, 
.language-column {
    box-sizing: border-box;
}

.column-description {
opacity: 0;
max-height: 0;
overflow: hidden;
font-size: 0.95rem;
line-height: 1.6;
transform: translateY(20px);
transition: all 0.4s ease;
}




/* Columna fija izquierda - Mejoras para responsive */
.columna-fija {
    
    width: 30vw;
    padding: 30px 20px;
    height: 75vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    z-index: 10;
    border-radius: 20px 0 0 20px;    
    box-sizing: border-box;
    overflow-wrap: break-word;
}
.columna-fija h2 {
    font-size: clamp(.8rem, 5vw, 3rem);
    margin-bottom: 10px;
    line-height: 1.2; 

}
.columna-fija p{
    font-size: clamp(.8rem, 5vw, 1.2rem);
    line-height: 1.2;
    margin-bottom: 20px;
    text-align: justify;
    word-wrap: break-word;
}

.columna-fija .social-links{
    display: flex;
    justify-content: center; /* Centrado de los enlaces sociales */
    gap: 20px; /* Espacio entre los enlaces */
}

.columns-container-language {
    display: flex;
    min-height: 80vh;
    position: relative;
    margin: 0 5%;
    width: calc(100% - 10%);
}


/* Variables CSS para fácil mantenimiento */
:root {
    --primary-color: rgba(15, 4, 66, 0.534);
    --active-color: rgba(255, 255, 255, 0.018);
    --border-color: rgb(237, 155, 61);
    --shadow-light: 0 2px 5px rgba(0, 0, 0, 0.1);
    --shadow-dark: 0 8px 20px rgba(0, 0, 0, 0.2);
    --gradient-overlay: linear-gradient(to top, rgba(16, 16, 16, 0.8) 0%, transparent 100%);
    --gradient-overlay-language: linear-gradient(to top, rgba(203, 29, 29, 0.8) 0%, transparent 100%);
}

/* Optimización de renderizado */
.columns-section, 
.columns-container-levels, 
.levels-column,
.language-column {
    will-change: transform, opacity;
}

/* Contenedor principal optimizado */
.columns-section {
    width: 100%;
    padding: 2.5rem 5%;
    box-sizing: border-box;
}

/* Contenedor de columnas de propuesta educativa */
.columns-container-levels {    
    display: flex;
    position: relative;
    gap: 0.9375rem;
    margin: 0 5%;
    width: calc(100% - 10%);       
}


/* Columnas con carga lazy de imágenes */
.levels-column {
    flex: 1.5;
    max-height: 75vh;
    border-radius: 0.75rem;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.8s ease-out, box-shadow 0.8s ease;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-blend-mode: overlay;
    padding-bottom: 1.5rem;
    box-shadow: var(--shadow-light);
    background-color: var(--primary-color);
}

/* Efecto hover optimizado */
.levels-column:hover {
    box-shadow: var(--shadow-dark); 
    transform: translateZ(50px);
}

/* Overlay con hardware acceleration */
.levels-column::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100%;
    background: var(--gradient-overlay);
    z-index: 1;
    transition: height 0.4s ease;
    backface-visibility: hidden;
}

/* Borde inferior optimizado */
.levels-column::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 0;
    background-color: var(--border-color);
    transition: height 0.4s ease;
    z-index: 3;
}

/* Contenido optimizado */
.column-content-level {
    position: relative;
    z-index: 2;
    color: white;
    padding: 1rem;    
}


    .column-level-title {
        font-size: clamp(0.9rem, 1vw, 1.4rem);
        font-weight: 700;
        margin-bottom: 0;
        text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.8);
        order: 1;
    }

    .column-level-subtitle {
        order: 2;
        font-size: clamp(0.6rem, 1vw, 1.4rem);
        margin-top: 0;
        line-height:unset;
        text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.8);
    }

/* Efecto active optimizado */
.levels-column.active {
    flex: 3;
    background-color: var(--active-color);
    transform: translateZ(20px);
}
/* fondo oscuro gradiatente */
.levels-column.active::before {
    height: 80%;
}
/* border */
.levels-column.active::after {
    height: 0.5rem;
}

.levels-column.active  .column-level-title {
    font-size: clamp(2rem, 2.5rem, 2.5rem);    
}

.levels-column.active .column-description {
    opacity: 1;
    max-height: 19rem;
    overflow: hidden;
    color: white;
    font-size: 0.9rem;
    line-height: 1.5;
    width: 100%; /* Ocupa todo el ancho */
    padding: 20; /* Reset de padding */
    margin: 20; /* Reset de márgenes */
    transition: all 0.8s ease-out, box-shadow 0.8s ease;
    order: 3; /* Aseguramos que el contenido venga después del título */
    box-sizing: border-box;
}


    
/* Contenedor de columnas dinámicas - Mejoras para responsive */
.dynamic-columns-language {    
    width: calc(100% - 400px); /* Más flexible que 300% */
    display: flex;
    min-height: 80vh;
    gap: 10px; /* Reemplaza márgenes individuales */
}

/* Columnas dinámicas - Mejoras para responsive */
.language-column {
    flex: 1; 
    min-height: 75vh;
    border-radius: 15px;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.4s ease-out; /* Transición más suave */
    border-top: 12px solid;
    display: flex;
    flex-direction: column;
    justify-content: flex-end; 
    background-size: cover;
    background-position: center;
    /* background-blend-mode: overlay; */
    box-shadow: var(--shadow-light);
    background-color: var(--gradient-overlay-language);
}


.language-title {
    font-weight: bold;
    text-shadow: 1.5px 1.5px 4px rgba(0, 0, 0, 0.8);
    font-weight: 700;
    color: white;
    font-size: clamp(0.9rem, 1vw, 1.4rem);
    padding-left: 10px;
    position: relative; /* Cambiamos de absolute a relative */
    transform-origin: left bottom;
    transition: all 0.5s cubic-bezier(0.65, 0, 0.35, 1);
    order: 1; /* Aseguramos que el título venga primero en el flujo flex */
}

.column-content-language {
            opacity: 0;
            max-height: 0;
            overflow: hidden;
            font-size: 0.95rem;
            line-height: 1.5;
            transform: translateY(20px);
            transition: all 0.4s ease;            
            order: 2;
            position: relative;
            /* z-index: 2; */
            padding: 0 15px 15px 15px;
            margin-bottom: 20px;
        }

.language-column.active {
    flex: 3;
    background-color: var(--active-color);
    
    /* background-color: linear-gradient(to top, rgba(203, 29, 29, 0.8) 0%, transparent 50%); */
    transform: translateZ(20px);
}

.language-column.active .language-title {
    font-size: clamp(0.8rem, 5vw, 2rem); 
}

.language-column.active .column-content-language {
    opacity: 1;
    max-height: 19rem;
    overflow: hidden;
    color: white;
    font-size: 0.9rem;
    line-height: 1.5;
    width: 100%; /* Ocupa todo el ancho */
    transition: all 0.8s ease-out, box-shadow 0.8s ease;
    order: 3; /* Aseguramos que el contenido venga después del título */
    box-sizing: border-box;
    text-align: justify;
}


/* Bordes superiores de diferentes colores */
.language-column:nth-child(1) {
    border-color: #e73a26; 
    background-image: url('../../img_home/cambridge.jpg');    
    background-color: rgba(0, 0, 0, 0.4);        
   }
.language-column:nth-child(2) { 
   border-color: #1b97ea; 
   background-image: url('../../img_home/frances.jpg');
   background-color: rgba(0, 0, 0, 0.4);
}
.language-column:nth-child(3) { 
   border-color: #18c35f; 
   background-image: url('../../img_home/chino.jpeg');
   background-color: rgba(0, 0, 0, 0.4);
}



.accordion-item-active{
    border-left: #cea306 5px solid;
}
.accordion-item:hover {       
    border-left: #cea306 5px solid;
}



/* Mejoras para navegadores específicos */
@supports (-webkit-touch-callout: none) {
    /* Safari/iOS específico */
    .columns-container-language {
        min-height: -webkit-fill-available;
    }
}

@supports (-moz-appearance: none) {
    /* Firefox específico */
    .language-column {
        transition: all 0.5s cubic-bezier(0.45, 0, 0.55, 1);
    }
}

/* Correcciones en las media queries */

@media (max-width: 1200px) {
    .columna-fija {
        width: 25vw;
    }
    .columna-fija h2 {
        font-size: 2.8rem;
    }
    .columna-fija p {
        font-size: 0.9rem;
        line-height: 1.5;
        margin-bottom: 15px;
    }
    .dynamic-columns-language {
        width: calc(100% - 350px);
    }
    .columns-container {
        grid-template-columns: repeat(2, 1fr);
    }
    .column {
        height: 300px;
    }
}

@media (min-width: 769px) and (max-width: 992px) {
    .columns-container-language {
        flex-direction: column;
        min-height: auto;
    }
    .columns-container-levels {
        flex-wrap: wrap;
        min-height: auto;
    }
    .levels-column {
        flex: 1 1 48%;
        min-height: 50vh;
        margin-bottom: 0.9375rem;
    }
    .levels-column.active {
        flex: 1 1 48%;
    }
    .column-level-subtitle {
        font-size: clamp(0.8rem, 1vw, 1.4rem);
    }
    .columna-fija {
        width: 100%;
        padding: 20px 90px;
        border-radius: 0;
    }
    .columna-fija h2 {
        font-size: 3rem;
        text-align: center;
        margin-bottom: 10px;
    }
    .columna-fija p {
        font-size: 0.9rem;
        line-height: 1.5;
        margin-bottom: 20px;
        margin-top: 0;
    }
    .columna-fija .social-links {
        text-align: center;
    }
    .dynamic-columns-language {
        width: 100%;
        margin-left: 0;
        min-height: auto;
        flex-wrap: wrap;
    }
    .language-column {
        flex-direction: column;
    }
    .language-column.active .language-title {
        font-size: clamp(1.3rem, 4vw, 1.8rem);
        margin: 15px 0 10px 0;
        padding: 0 15px;
    }
    .language-column.active .column-content-language {
        padding: 0 15px 15px 15px;
    }
}

@media(max-width: 768px) {
     .columns-container-levels, .columns-container-language  {
        display: flex;
        width: calc(100% - 10%);
        margin-left: 20px;
        margin-right: 20px;
        flex-direction: column;
    }
    
     .columna-fija {
        width: 90vw;
        height: auto;
        border-radius: 20px;
        padding: 20px 15px;
    }

    .columna-fija h2 {
    font-size: clamp(1.5rem, 5vw, 3.5rem);
        text-align: center;
    }

    .columna-fija p {                
        text-align: left;
    }

    .columna-fija .social-links {
        flex-wrap: wrap;
        gap: 15px;
    }

    .levels-column {
        flex: 1 1 100%;
        min-height: 20vh;
    }
    .column-level-title{
        font-size: clamp(1.2rem, 4vw, 1.8rem);
    }
    .column-level-subtitle {
        font-size: clamp(0.8rem, 4vw, 1.2rem);
    }

    .levels-column.active {
    min-height: 45vh;
    }

    .dynamic-columns-language {
        width: 100%;        
        flex-wrap: wrap;
    }

    .language-column {
        flex: 1 1 100%;
        min-height: 20vh;
    }
    
    .language-title {
       font-size: clamp(.8rem, 5vw, 1.8rem);
    }
    .language-column.active .column-content-language {
        font-size: clamp(0.5rem, 5vw, 1rem);
        text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.8);
    }

    .language-column.active .language-title{
        font-size: clamp(.8rem, 5vw, 2.5rem);
  
    }


    .language-column.active{
        min-height: 50vh;
    }
    .column-title {
        font-size: 1.3rem;
    }
    .column-description {
        font-size: 0.9rem;
    }



}

/* @media (max-width: 576px) {
    .columns-container-levels {
        display: flex;
        width: calc(100% - 10%);
        margin-left: 20px;
        margin-right: 20px;
        flex-direction: column;
    }
    .columns-container-language {
        margin: 0 3%;
        width: calc(100% - 6%);
    }
    .language-column {
        min-height: 200px;
    }
    .language-column.active {
        min-height: 400px;
    }
    .language-title {
        font-size: 1.2rem;
    }
    .column-content-language {
        font-size: 0.9rem;
    }
    .language-column.active .language-title {
        font-size: clamp(1.2rem, 5vw, 1.6rem);
        margin: 10px 0 8px 0;
        padding: 0 10px;
    }
    .language-column.active .column-content-language {
        padding: 0 10px 10px 10px;
        font-size: 0.9rem;
    }
    .columns-section {
        padding: 1.25rem 3%;
    }
    .column-level-title {
        font-size: clamp(1.2rem, 5vw, 1.6rem);
    }
    .column-level-subtitle {
        font-size: clamp(0.8rem, 1vw, 1.4rem);
    }
    .columna-fija {
        border-radius: 0px;
        height: 300px;
        width: 100%;
    }
    .columna-fija h2 {
        font-size: 2rem;
        text-align: center;
        margin-bottom: 10px;
    }
    .columna-fija p {
        font-size: 0.9rem;   
        margin-top: 0;
    }
    .columna-fija .language-links {
        font-size: 0.8rem;           
    }
    .columna-fija .social-links {
        font-size: 1rem;           
    }

    .levels-column {
        width: 100%;
        padding: 1.25rem;
        min-height: 200px;
    }
    .levels-column.active {
        min-height: 400px;
    }
    .columns-container {
        grid-template-columns: 1fr;
    }
    .column {
        height: 250px;
    }
    .column-content {
        padding: 20px;
    }
} */