@import url(variables.css);

/* --- MÓVILES Y TABLETS ( < 1024px ) --- */
@media (max-width: 1024px) {
    /* Ajustes generales */
    .home, .about, .skills, .projects, .contact {
        /* En móviles, reducimos el padding superior porque el header ocupa menos */
        padding-top: 100px; 
    }

    h1 { font-size: 2rem; }
    h2 { font-size: 1.8rem; }
    .section-title { font-size: 2rem; margin-bottom: 30px; }
    
    header { width: 95%; padding: 15px; }
    
    .about-content {
        flex-direction: column;
        text-align: center;
        gap: 30px;
    }
    .about-img { width: 250px; height: 250px; }
    
    .skills-container { grid-template-columns: repeat(2, 1fr); }
    .projects-container { grid-template-columns: 1fr; }
    
    .contact-container {
        grid-template-columns: 1fr;
        gap: 40px;
    }
}

/* --- MÓVILES PEQUEÑOS ( < 600px ) --- */
@media (max-width: 600px) {
    
    /* --- MENÚ MULTILÍNEA --- */
    header {
        width: 100%;
        padding: 15px 10px;
        height: auto;       /* Permite que crezca si hay 2 líneas */
        flex-wrap: wrap;    /* Permite saltos de línea */
        justify-content: center; 
        gap: 15px;
    }

    .menu {
        width: 100%;
        overflow: visible; /* Mostramos todo, nada oculto */
        flex: none;
    }
    
    .menu ul {
        display: flex;
        flex-wrap: wrap;    /* CLAVE: Los items bajan si no caben */
        justify-content: center;
        gap: 8px 12px;      /* Espacio entre botones (Vertical Horizontal) */
        width: 100%;
        padding: 0;
    }
    
    .menu a {
        font-size: 0.85rem;
        padding: 6px 12px;
        border-radius: 20px;
        display: inline-block;
    }

    .translate-btn {
        font-size: 0.8rem;
        padding: 5px 10px;
        margin-top: 5px; 
    }

    /* --- AJUSTES DE CONTENIDO --- */
    .home h2 { font-size: 1.8rem; }
    
    .skills-container { grid-template-columns: 1fr; }
    .project, .contact-form { padding: 20px; }
    
    /* Aumentamos espacio superior porque el header ahora puede tener 2 líneas */
    .home, .about, .skills, .projects, .contact {
        padding-top: 200px; 
    }
}

/* --- PANTALLAS GRANDES ( > 1920px ) --- */
@media (min-width: 1921px) {
    .home-content, .about-content, .skills-container, 
    .projects-container, .contact-container {
        max-width: 1600px;
    }
    html { font-size: 18px; }
}