/* 
 * RESPONSIVE CSS - Instituto Lao
 * Media queries para diferentes dispositivos
 */
 

/* ===================================
   TABLET & MOBILE - Menú Hamburguesa
   (0px - 1400px)
=================================== */


/* OCULTAR VERSIÓN MÓVIL DEL LOGO POR DEFECTO (EN ESCRITORIO) */
.nav-menu-header-mobile {
    
    
    display: none; 
}

@media screen and (max-width: 1400px) {

    html, body {
        width: 100% !important;
        position: relative;
    }
      /* ===== MOSTRAR HAMBURGER ===== */
    .header .hamburger,
    header .hamburger,
    #header .hamburger,
    .hamburger {
        display: flex;
        visibility: visible;
        opacity: 1;
        pointer-events: auto;
    }

    .navbar .logo {
       display: flex;
    }

    .nav-menu-header-mobile {
        /* Muestra el logo y alinea los elementos (imagen y texto) */
            display: flex;
            align-items: center;
            justify-content: flex-start;
            width: 100%;
            /* Espacio interno y línea divisoria */
            padding: 0rem 0rem;
            border-bottom: 7px solid var(--color-gray-200); 
            margin-bottom: 2rem; /* Espacio antes del primer enlace del menú (INICIO) */
            list-style: none; /* Asegura que no tenga viñetas */
        }

        /* Ajustamos la apariencia del logo en el menú lateral */
        .nav-menu-header-mobile .logo-mobile {
            display: flex;
            align-items: center;
            gap: 0rem; /* Espacio entre el ícono y el texto */
            text-decoration: none;
            width: 100%;
            flex-direction: column;
            justify-content: flex-start;
            text-align: left;
        }

        .nav-menu-header-mobile .logo-image {
            width: 40px;
            height: 40px;
        }

        /* Asegura que el texto del logo se vea oscuro sobre el fondo blanco del menú */
        .nav-menu-header-mobile .logo-title,
        .nav-menu-header-mobile .logo-tagline {
            color: var(--color-dark); 
            text-transform: uppercase;
            white-space: normal !important; 

            /* 2. Quita el recorte de puntos suspensivos */
            text-overflow: unset !important;
            overflow: visible !important;
            
            /* 3. Asegura que el contenedor no limite el ancho */
            max-width: 100% !important;
            width: auto !important;

            /* Tus estilos de color previos */
            color: var(--color-dark);
            text-transform: uppercase;
            
            /* Opcional: ajusta la altura de línea para que no se vea amontonado si baja */
            line-height: 1.2 !important;

            align-self: center !important;
                }
   
    /* ===== OCULTAR MENÚ DESKTOP ===== */
    .nav-menu {
        position: fixed;
        top: 0;
        left: 100%;
        width: 85%;
        max-width: 390px;
        height: 100vh;
        background: var(--color-white);
        flex-direction: column;
        padding: 1.5rem 2rem 0rem;
        box-shadow: 4px 0 30px rgba(0, 0, 0, 0.2);
        gap: 0;
        z-index: 1010;
        overflow-y: auto;
        transition: left 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    }
    
    .nav-menu.active {
        left: 0;
    }
    
    /* Items del menú */
    .nav-item {
        width: 100%;
        border-bottom: 1px solid var(--color-gray-100);
    }
    
    .nav-link {
        display: block;
        padding: 1.25rem 0;
        width: 100%;
        font-size: 1.125rem;
    }
    
    /* Dropdown mobile */
    .dropdown-menu {
        position: static;
        opacity: 1;
        visibility: visible;
        transform: none;
        box-shadow: none;
        padding: 0.5rem 0 0.5rem 1rem;
        background: var(--color-gray-50);
        border-radius: var(--radius-md);
        margin-top: 0.5rem;
        display: none;
        min-width: 100%;
    }
    
    .has-dropdown.active .dropdown-menu {
        display: block;
    }
    
    .dropdown-toggle {
        width: 100%;
        justify-content: space-between;
        padding: 1.25rem 0;
        font-size: 1.125rem;
        display: flex;
        align-items: center;
    }
    
    .has-dropdown.active .dropdown-icon {
        transform: rotate(180deg);
    }
    
    /* Botones especiales en mobile */
    .btn-q10,
    .btn-inscribete {
        width: 100%;
        margin: 0rem 0;
        justify-content: center;
    }
    
    /* Overlay cuando menú está abierto */
    body.menu-open {
        overflow: hidden;
    }
    
    body.menu-open::after {
        content: '';
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.5);
        z-index: 999;
    }
    
    

    /* ===== AJUSTES GENERALES TABLET ===== */
    
    .section-title {
        font-size: var(--text-3xl);
    }

    
    .cursos-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .why-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .testimonios-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .novedades-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .inscripcion-wrapper {
        grid-template-columns: 1fr;
    }
    
    .inscripcion-info {
        position: static;
    }
    
    .footer-main {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ===================================
   MOBILE - Diseño de una columna
   (0px - 767px)
=================================== */
@media screen and (max-width: 767px) {
    
    /* ===== GENERAL ===== */
    .container {
        padding: 0 1.25rem;
    }

    /* ===== TOP BAR ===== */
  .top-bar {
    position: fixed;
    padding: 0.6rem 0rem;
    top: 100px;  /* ← Debajo del navbar en mobile */
    z-index: 999 !important; /* ← Asegurar que esté arriba del hero */
}
    
    .top-bar-content {
        flex-direction: row;
        gap: 0.9rem;
    }
    
    .whatsapp-link {
        font-size: var(--text-xs);
    }
    
    .social-links {
        gap: 0.75rem;
    }    
    
    .navbar {
        padding: 0.9rem 0;
    }
    
    .logo-image {
        width: 36px;
        height: 36px;
    }
    
    .logo-title {
        font-size: var(--text-lg);
    }
    
    .logo-tagline {
        font-size: 0.825rem;
    }
    
    .nav-menu {
        width: 90%;
        max-width: 380px;
        padding: 1rem 1.5rem 2rem;
    }
    
    
    /* ===== SECTIONS ===== */
    .section-header {
        margin-bottom: 2.5rem;
    }
    
    .section-title {
        font-size: var(--text-2xl);
    }
    
    .section-subtitle {
        font-size: var(--text-base);
    }
    
    /* ===== CURSOS ===== */
    .cursos-section {
        padding: 4rem 0;
    }
    
    .cursos-grid {
        grid-template-columns: 2fr;
        gap: 3.5rem;
    }
    
    .curso-image {
        height: 250px;
    }
    
    .curso-content {
        padding: 1.5rem;
    }
    
    .curso-title {
        font-size: var(--text-xl);
    }
    
    /* ===== WHY SECTION ===== */
    .why-section {
        padding: 3rem 0;
    }
    
    .why-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    
    .why-card {
        padding: 1.5rem;
    }
    
    .why-icon {
        width: 64px;
        height: 64px;
    }
    
    /* ===== TESTIMONIOS ===== */
    .testimonios-section {
        padding: 3rem 0;
    }
    
    .testimonios-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    
    .testimonio-card {
        padding: 1.5rem;
    }
    
    /* ===== STATS ===== */
    .stats-section {
        padding: 3rem 0;
    }
    
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 2rem;
    }
    
    .stat-icon {
        font-size: 3rem;
    }
    
    .stat-number {
        font-size: var(--text-5xl);
    }
    
    .stat-label {
        font-size: var(--text-base);
    }
    
    /* ===== NOVEDADES ===== */
    .novedades-section {
        padding: 3rem 0;
    }
    
    .novedades-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    
    /* ===== PAYMENT ===== */
    .payment-section {
        padding: 2rem 0;
    }
    
    .payment-logos {
        gap: 1.5rem;
    }
    
    .payment-logo {
        height: 40px;
    }
    
    /* ===== INSCRIPCIÓN ===== */
    .inscripcion-section {
        padding: 3rem 0;
    }
    
    .inscripcion-title {
        font-size: var(--text-3xl);
    }
    
    .inscripcion-description {
        font-size: var(--text-base);
    }
    
    .inscripcion-form-container {
        padding: 2rem;
    }
    
    .inscripcion-form {
        gap: 1.25rem;
    }
    
    /* ===== FOOTER ===== */
    .footer {
        padding: 3rem 0 1.5rem;
    }
    
    .footer-main {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    
    .footer-bottom-content {
        flex-direction: column;
        text-align: center;
        gap: 1rem;
    }
    
    .footer-legal {
        flex-direction: column;
        gap: 0.5rem;
    }
    
    .separator {
        display: none;
    }
    
    /* ===== WHATSAPP FLOTANTE ===== */
    .whatsapp-float {
        width: 56px;
        height: 56px;
        bottom: 85px;
        right: 20px;
    }
    
    .whatsapp-float svg {
        width: 28px;
        height: 28px;
    }
    
    .whatsapp-text {
        display: none;
    }
    
    /* ===== SCROLL TO TOP ===== */
    .scroll-to-top {
        width: 48px;
        height: 48px;
        bottom: 155px;
        right: 23px;
    }
}

/* ===================================
   SMALL MOBILE - Ajustes finos
   (0px - 374px)
=================================== */
@media screen and (max-width: 374px) {
    
    .container {
        padding: 0 1rem;
    }
    

    
    
    .section-title {
        font-size: var(--text-xl);
    }
    
    .stats-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    
    .curso-content,
    .testimonio-card,
    .inscripcion-form-container {
        padding: 1.25rem;
    }
    

}


/* ===================================
   DESKTOP LARGE - Pantallas grandes
   (1600px+)
=================================== */
@media screen and (min-width: 1601px) {
    
    .container {
        max-width: 1601px;
    }
    
    
    .section-title {
        font-size: var(--text-5xl);
    }
}

@media (max-width: 767px) {

    .hero-index {
    margin-top: 140px;
}
}


/* =====================================================
   SEPARACIÓN CELULAR: CTA FINAL Y FORMULARIO
   ===================================================== */
@media screen and (max-width: 767px) {
    
    /* 1. Le damos aire al bloque de "Listo para hablar chino..." */
    .mand-cta-final {
        margin-bottom: 4rem !important; /* Espacio de separación hacia abajo */
        padding-bottom: 3rem !important;
        /* Redondeamos las esquinas de abajo para que se vea como una sección cerrada */
        border-radius: 0 0 40px 40px; 
        box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    }

    /* 2. Le damos un empujón al formulario de contacto para que no suba tanto */
    .contact-section, 
    #contacto,
    .footer-section {
        margin-top: 2rem !important;
        padding-top: 2rem !important;
    }

    /* 3. Opcional: Si quieres una división más clara, podemos poner una línea sutil */
    .mand-cta-final::after {
        content: "";
        display: block;
        width: 50px;
        height: 4px;
        background: rgba(255, 255, 255, 0.3);
        margin: 2rem auto 0;
        border-radius: var(--radius-full);
    }
}



/* =====================================================
   SEPARACIÓN PARA TABLETS (768px hasta 1024px)
   Evita que el CTA final choque con el formulario
   ===================================================== */
@media screen and (min-width: 768px) and (max-width: 1024px) {
    
    /* 1. Separamos el bloque de "Listo para potenciar..." */
    .mand-cta-final {
        margin-bottom: 5rem !important; /* Espacio generoso para que no se peguen */
        border-radius: 0 0 30px 30px !important; /* Redondeamos la base para cerrar visualmente */
        position: relative;
        z-index: 1;
    }

    /* 2. Empujamos el formulario de contacto un poco más abajo */
    .contact-section, 
    #contacto {
        margin-top: 3rem !important;
        padding-top: 2rem !important;
    }
}