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

/* ==========================================
   1. Ajuste para Pantallas Grandes / Laptops (Hasta 1400px)
   ========================================== */
@media (max-width: 1400px) {
    .hero {
        flex-direction: row; 
        height: auto;
        padding: 0 5% 0 5%;
        text-align: center;
    }

    .hero-text {
        max-width: 100%;
        margin-bottom: 40px;
        align-items: baseline; 
    }

    .circle-img-container {
        position: relative;
        left: 0;
        margin: 0 auto;
        width: 450px; 
        bottom: 0;
        border-radius: 20px; 
        border: 4px solid var(--dorado); 
        overflow: hidden;
        box-shadow: 0 15px 35px rgba(0,0,0,0.5);
    }
}

/* ==========================================
   2. Ajuste Intermedio para Tablets / Laptops Pequeñas (Hasta 931px)
   ========================================== */
@media (max-width: 931px) {
    .level-content p {
        display: none !important;
    }
}

/* ==========================================
   3. Ajustes para Tablets y Móviles (Hasta 768px)
   ========================================== */
@media (max-width: 768px) {
    
    /* --- NAVEGACIÓN Y CONFIGURACIÓ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;
    }

    .page-wrapper {
        padding: 20px 5%; /* Menos padding para dar espacio al contenido */
        gap: 30px;
    }

    /* --- SECCIÓN HISTORIA --- */
    .section-title {
        font-size: 35px;
    }

    .history-text {
        font-size: 1rem;
        line-height: 1.6;
    }

    /* --- TARJETAS DE PERSONAL / DIRECTIVOS (CORRECCIÓN DE ANCHOS DE IMAGEN) --- */
    .profile-container, 
    .container-subdirectora {
        flex-direction: column !important;
        align-items: center;
        text-align: center;
        gap: 15px; 
    }

    .profile-description {
        text-align: justify;
        font-size: 0.95rem;
    }

    /* CORRECCIÓN CRÍTICA: Quitamos los !important gigantes que rompían el responsive */
    .circle-accent-dire {
        width: 100% !important;
        max-width: 280px !important; /* Limita un tamaño prudente para móvil */
        height: auto !important;
        aspect-ratio: 1 / 1 !important; /* Mantiene la proporción cuadrada */
        box-shadow: 0 10px 20px rgba(0,0,0,0.2) !important;
        border-radius: 20px !important;
        overflow: hidden !important;
    }

    .circle-accent-dire img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        border: 4px solid var(--dorado);
        border-radius: 20px;
    }

    .profile-info {        
        padding: 10px 0;
    }

    .espacio {
        display: none; /* Ocultamos los bloques vacíos sobrantes en teléfonos */
    }

    /* --- IMÁGENES DE PLANTEL / GRUPO (CORRECCIÓN DE PROPORCIONES) --- */
    .circle-accent-primaria {
        width: 100% !important; /* Toma todo el ancho de la pantalla del celular */
        max-width: 500px;       /* Evita que se estire demasiado en tablets */
        height: auto !important; 
        aspect-ratio: 16 / 9 !important; /* Proporción horizontal ideal para fotos grupales */
        border-radius: 12px;
        border: 3px solid var(--dorado);
        overflow: hidden;
        box-shadow: 0 10px 25px rgba(0,0,0,0.4);
        margin: 0 auto 20px auto; /* Centra la caja horizontalmente */
    }

    .circle-accent-primaria img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
    }

    /* --- PIE DE PÁGINA (FOOTER) --- */
    .footer-container {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .nav-list.active {
        max-height: 400px !important;
        padding: 15px 0 !important;
        display: flex !important; /* Fuerza a que los enlaces aparezcan */
    }

    .footer-col {
        display: none; 
    }

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

/* ==========================================
   4. Ajustes para Teléfonos Pequeños (Hasta 480px)
   ========================================= */
@media (max-width: 480px) {
    .circle-accent-dire {
        max-width: 220px !important; /* Achica un poco más las fotos de perfil en pantallas muy chicas */
    }
    
    .banner-tag {
        font-size: 0.95rem;
        padding: 6px 16px;
    }
}

/* ==========================================
   5. Ajuste Extremo (Hasta 380px)
   ========================================== */
@media (max-width: 380px) {
    .hero-text h1 {
        font-size: 1.5rem;
    }
}