/*======================================
RESPONSIVE - Lady Solís Portfolio
======================================*/

/*======== TABLET (hasta 1024px) ========*/
@media (max-width: 1024px){

    :root{
        --h1: 3rem;
        --h2: 2.2rem;
        --space-xxl: 5rem;
        --space-xl: 3rem;
    }

    /* Sobre mí - Tablet */

    .about-grid{
        grid-template-columns: 0.85fr 1.15fr;
        gap: 2.5rem;
        align-items: center;
    }

    .about-image{
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .about-image img{
        width: 100%;
        max-width: 400px;
        height: auto;
    }

    .about-content h2{
        font-size: 2rem;
    }

    .about-content p{
        font-size: .95rem;
        line-height: 1.7;
    }

    .tech-pills span{
        font-size: .8rem;
        padding: .4rem .8rem;
    }

    .services-grid{
        grid-template-columns: repeat(2, 1fr);
    }

    .project-featured{
        grid-template-columns: 1fr;
    }

    .projects-grid{
        grid-template-columns: repeat(2, 1fr);
    }

    .process-steps{
        grid-template-columns: repeat(2, 1fr);
    }

}


/*======== MÓVIL GRANDE (hasta 768px) ========*/
@media (max-width: 768px){

    :root{
        --h1: 2.4rem;
        --h2: 1.8rem;
        --space-xxl: 4rem;
        --space-xl: 2.5rem;
        --space-lg: 2rem;
    }

    .about-grid{
        grid-template-columns: 1fr;
    }

    .about-image{
        display: flex;
        justify-content: center;
    }

    .about-image img{
        width: min(100%, 480px);
        height: auto;
    }

    /* Navbar */
    .logo img{
        height: 45px;
    }

    .menu-toggle{
        display: flex;
    }

    .nav-menu{
        position: fixed;
        top: 0;
        right: -100%;
        width: 70%;
        height: 100vh;
        background: var(--color-background);
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 2rem;
        transition: right .35s ease;
    }

    .nav-menu.active{
        right: 0;
    }

    .nav-menu a{
        color: var(--color-primary);
        font-size: 1.1rem;
    }

    /* Hero */
    .hero h3{
        font-size: 1rem;
    }

    .hero p{
        font-size: 1rem;
    }

    .btn{
        padding: 14px 28px;
    }

    /* Sobre mí */
    .about-image img{
        height: 500px;
        width: 100%;
        object-fit: cover;
        object-position: top;
    }

    .tech-stack{
        gap: 1rem;
    }

    /* Lo que hago */
    .services-grid{
        grid-template-columns: 1fr;
        gap: var(--space-md);
    }

    /* Proyectos */
    .projects-grid{
        grid-template-columns: 1fr;
        gap: var(--space-md);
    }

    .featured-info h4{
        font-size: 1.5rem;
    }

    /* Proceso */
    .process-steps{
        grid-template-columns: 1fr;
        gap: var(--space-md);
    }

    /* Contacto */
    .contact-channels{
        grid-template-columns: repeat(2, 1fr);
    }

    .contact-collab{
        flex-direction: column;
        align-items: flex-start;
    }

    .collab-links{
        align-items: flex-start;
    }

    /* Caso de estudio */
    .case-meta{
        grid-template-columns: 1fr;
        gap: var(--space-md);
    }

    /* Footer */
    .footer-top{
        flex-direction: column;
        gap: var(--space-md);
        text-align: center;
    }

    .footer-bottom{
        flex-direction: column;
        text-align: center;
    }

}


/*======== MÓVIL CHICO (hasta 480px) ========*/
@media (max-width: 480px){

    :root{
        --h1: 2rem;
        --h2: 1.5rem;
    }

    .nav-menu{
        width: 85%;
    }

    .about-image img{
        height: 420px;
        width: 100%;
        object-fit: cover;
        object-position: top;
    }

    .tech-pills span,
    .project-tags span{
        font-size: .8rem;
        padding: .4rem .9rem;
    }

    .contact-channels{
        grid-template-columns: 1fr;
    }

    .contact-intro{
        font-size: 1rem;
    }

}