/* ==========================================
   css/responsive.css
   Actualizado para I.E. Jose Olaya Balandra
   ========================================== */

/* 1. Ajuste para Tablets y Laptops pequeñas (Rango de choque de imagen) */
@media (max-width: 931px) {
.level-content p {
        display: none !important;
    }
}
@media (max-width: 1400px) {
    .hero {
        flex-direction: row; 
        height: auto;
        padding: 0px 5% 0 5%;
        text-align: center;
        
    }

    .hero-text {
        max-width: 100%;
        margin-bottom: 40px;
        align-items: baseline; /* Centra el cuadro guinda de contacto */
    }

    .circle-img-container {
        position: relative;
        left: 0;
        margin: 0 auto;
        width: 450px; /* Tamaño adaptado para laptops */
        bottom: 0;
        border-radius: 0; /* Imagen a sangre en móvil */
        border: none;
        border-radius: 20px; /* Bordes redondeados modernos en lugar de círculo */
    border: 4px solid var(--dorado); /* */
    overflow: hidden;
    box-shadow: 0 15px 35px rgba(0,0,0,0.5);
    }
}

/* 2. Ajustes para Móviles (Smartphones) */
@media (max-width: 768px) {
    
    /* NAVEGACIÓN */
    nav {
        padding: 10px 5%;
    }

    .menu-toggle {
        display: flex;
    }

    .nav-list {
        display: flex;
        flex-direction: column;
        position: absolute;
        top: 100%; 
        left: 0;
        width: 100%;
        background-color: var(--azul-nav);
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.3s ease-in-out;
        z-index: 999;
    }

    .nav-list.active {
        max-height: 400px;
        padding: 15px 0;
    }

    /* HERO SECTION EN MÓVIL */
    .hero {
        padding: 0px 5% 0 5%;
        align-items: center;
    }
    .hero-text{
        margin-bottom: 20px;
        align-items: center;
    }
    .hero-text h1 {
        font-size: 1.8rem; /* Un poco más grande para legibilidad */
        text-align: center;
        line-height: 1.2;
    }

    .hero-info {
        margin: 20px auto;
        border-left: none;
        border-bottom: 4px solid var(--dorado); /* Detalle abajo en vez de lateral */
    }

    .circle-img-container {
        display: none !important; /* Tamaño ideal para celulares */
    }

    /* SECCIÓN MISIÓN Y VISIÓN */
    .section-padding {
        padding: 40px 8%;
    }

    .mision-vision-grid {
        grid-template-columns: 1fr; /* Una sola columna */
        gap: 25px;
    }

    .card p {
        padding: 20px;
        font-size: 0.95rem;
    }

    /* SECCIONES DE NIVELES (Primaria/Secundaria Modernizado) */
    .level-row{
        flex-direction: column !important;
        gap: 0px;
    } 
    .level-reverse {
        flex-direction: column !important;
        gap: 0px;
    }
    .level-content{
        padding: 20px 0;
    }

    .level-content p{
        display: none !important;
    }

    .level-content h2 {
        font-size: 2.5rem;
        margin-top: 40px;
    }

    .level-content h2::after {
        margin: 10px auto 0 auto; /* Centra la línea decorativa */
    }

    .level-image-side {
        width: auto;
        height: 100px; 
        margin-bottom: 50px;/* Altura fija para que la imagen luzca en móvil */
    }

    .circle-accent {
        width: 100%;
        height: 100%;
        border-radius: 0; /* Imagen a sangre en móvil */
        border: none;
        border-radius: 20px; /* Bordes redondeados modernos en lugar de círculo */
    border: 4px solid var(--dorado); /* */
    overflow: hidden;
    box-shadow: 0 15px 35px rgba(0,0,0,0.5);
    }
    
    .circle-accent img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* La imagen llena el cuadro sin deformarse */
    display: block;
}

    .tech-courses-grid{
        flex-direction: column !important;
        gap: 0px;
        
    }
    .section-padding{
        padding-top: 0px;
    }
    .section-padding h2{
        margin-top: 10px;
    }
    
    .tech-item{
        margin-bottom: 10px
    }
    .circle-accent small{
        border-radius: 20px; /* Bordes redondeados modernos en lugar de círculo */
    border: 4px solid var(--dorado); /* */
    overflow: hidden;
    box-shadow: 0 15px 35px rgba(0,0,0,0.5);
    }

    /* FOOTER */
    .footer-container {
        grid-template-columns: 1fr; /* Una sola columna en móvil */
        text-align: center;
    }

    .footer-col {
       display: none;
    }

    .footer-logo {
        margin: 0 auto 15px auto;
    }
}

/* Ajuste para pantallas muy pequeñas */
@media (max-width: 380px) {
    .hero-text h1 {
        font-size: 1.5rem;
    }

    .circle-img-container {
        width: 260px;
    }
}