/* --- RESET PARA MÓVIL --- */
@media (max-width: 992px) {


    /* El icono hamburguesa: Lo ponemos encima de todo */
    .menu-toggle {
        display: block !important;
        cursor: pointer;
        font-size: 1.8rem;
        color: white;
        z-index: 9999;
        /* Máxima prioridad */
        position: absolute;
        right: 20px;
        margin-left: auto;
    }

    /* El menú: lo ocultamos completamente */
    .nav-links {
        display: none;
        /* Empezamos con display none para que no estorbe */
        flex-direction: column;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        background: #0f172a;
        justify-content: center;
        align-items: center;
        gap: 2rem;
        z-index: 9998;
    }

    /* Cuando el JS pone 'active', el menú APARECE */
    .nav-links.active {
        display: flex !important;
    }

    .nav-links a {
        font-size: 1.8rem;
        color: white;
        text-decoration: none;
        width: 100%;
        text-align: center;
    }

    /* Ocultamos el botón de contacto de escritorio */
    .btn-contact {
        display: none !important;
    }

    .mobile-only-contact {
        display: flex !important;
        justify-content: center;
        align-items: center;

        /* Copiamos los estilos del .btn-contact de escritorio */
        background: white !important;
        color: #0f172a !important;
        padding: 0.8rem 2rem !important;
        border-radius: 0.75rem !important;
        font-weight: 800;

        /* Ajuste de ancho para que no ocupe toda la pantalla de lado a lado */
        width: auto !important;
        min-width: 200px;
        margin-top: 1rem;
    }

    /* Dentro de @media (max-width: 992px) en responsive.css */

    .nav-logo img {
        height: 30px; /* Un poco más pequeño para que quepa bien */
        width: auto;
    }

    .navbar {
        /* En móvil olvidamos el centrado complejo y usamos márgenes simples */
        position: fixed !important; 
        top: 1rem !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        
        /* Ancho controlado para que no toque los bordes */
        width: 92% !important; 
        
        /* Usamos flex para alinear logo y menú hamburguesa */
        display: flex !important;
        justify-content: space-between; 
        align-items: center;
        
        padding: 0.6rem 1.2rem !important;
        overflow: visible;
    }

    .menu-toggle {
        /* Alineamos el icono del menú a la derecha */
        position: static !important;
        margin-left: auto;
    }
}

/* --- HERO SECTION (Ajuste de textos) --- */

@media (max-width: 768px) {
    .hero {
        padding: 6rem 1rem 3rem;
        text-align: center;
    }

    .hero-title {
        font-size: 2.5rem;
        /* Reducción para que no rompa en móviles */
    }

    .hero-description {
        font-size: 1.1rem;
        margin: 0 auto 2rem;
    }

    .hero-actions {
        flex-direction: column;
        gap: 1.5rem;
    }

    .tech-stack {
        justify-content: center;
        margin-left: 0.75rem;
        /* Compensa el solapamiento */
    }
}

/* --- PORTFOLIO Y GRIDS --- */

@media (max-width: 768px) {
    .portfolio-grid {
        grid-template-columns: 1fr;
        /* Una sola columna en móvil */
        gap: 1.5rem;
    }

    .project-card {
        margin: 0 10px;
    }

    .project-image {
        height: 200px;
    }
}

/* --- SECCIÓN CONTACTO --- */

@media (max-width: 768px) {
    .portfolio-grid-section .container {
        grid-template-columns: 1fr !important;
        /* Fuerza una columna en el layout de contacto */
        gap: 2rem;
    }

    .project-card form {
        padding: 1rem;
    }
}

/* --- SECCIÓN ANAED --- */

@media (max-width: 640px) {
    .btn-donation {
        width: 100%;
        justify-content: center;
        padding: 1rem;
    }

    /* Ajuste de los cuadros de compromiso en ANAED */
    div[style*="grid-template-columns"] {
        grid-template-columns: 1fr !important;
    }

    /* Reducir padding de la caja de colaboración */
    div[style*="padding: 3rem"] {
        padding: 1.5rem !important;
    }
}

/* --- FOOTER --- */

@media (max-width: 768px) {
    .footer-content {
        grid-template-columns: 1fr;
        text-align: center;
        gap: 2.5rem;
    }

    .footer-social .social-icons {
        justify-content: center;
    }

    .footer-brand {
        align-items: center;
        display: flex;
        flex-direction: column;
    }
}

/* --- MEJORAS DE ACCESIBILIDAD MÓVIL --- */
input,
textarea,
button {
    font-size: 16px !important;
    /* Evita el zoom automático en iOS al clicar inputs */
}

/* Cuando la pantalla es bajita (típico de móvil en horizontal) */
@media (max-height: 500px) and (max-width: 992px) {
    .nav-links {
        justify-content: flex-start !important;
        /* Alinea los enlaces arriba, no al centro */
        padding-top: 80px;
        /* Deja espacio para el logo/botón */
        overflow-y: auto;
        /* Permite scroll vertical si los enlaces no caben */
        gap: 1rem !important;
        /* Reduce el espacio entre enlaces */
    }

    .nav-links a {
        font-size: 1.2rem !important;
        /* Letra un poco más pequeña */
    }
}