/*==================================================
    RESPONSIVE GENERAL
==================================================*/

/* ---------- Tablets ---------- */

@media (max-width:1024px){

    .container{
        width:95%;
    }

    h1{
        font-size:3rem;
    }

    h2{
        font-size:2.2rem;
    }

    section{
        padding:80px 0;
    }

}

/* ---------- Móviles ---------- */

@media (max-width:768px){

    h1{
        font-size:2.4rem;
        line-height:1.25;
    }

    h2{
        font-size:1.8rem;
    }

    p{
        font-size:1rem;
    }

    section{
        padding:60px 0;
    }

    .hero{

        min-height:min(70vh, 560px);

        padding:48px 20px 36px;

    }

    .hero h1{

        font-size:clamp(1.9rem, 7vw, 2.6rem);

        margin-bottom:14px;

    }

    .hero p{

        font-size:1.05rem;

        margin-bottom:28px;

    }

    .search-box{

        flex-direction:column;

        border-radius:18px;

    }

    .search-box input{

        padding:18px;

    }

    .search-box button{

        width:100%;

        padding:18px;

    }

}

/* ---------- Pantallas pequeñas ---------- */

@media (max-width:480px){

    .logo span{

        display:none;

    }

    h1{

        font-size:2rem;

    }

    .hero{

        min-height:auto;

        padding:40px 18px 32px;

    }

    .hero h1{

        font-size:clamp(1.7rem, 8vw, 2.1rem);

    }

    .hero p{

        font-size:1rem;

        margin-bottom:24px;

    }

}
/*==================================================
    FOOTER RESPONSIVE
==================================================*/

@media (max-width:900px){

    .footer-top{

        flex-direction:column;

    }

    .footer-links{

        gap:40px;

    }

}

@media (max-width:600px){

    .footer-links{

        flex-direction:column;

    }

}

@media (max-width:768px){

.nav-links{

    position:absolute;

    top:100%;

    left:0;

    width:100%;

    background:var(--background);

    display:flex;

    flex-direction:column;

    align-items:center;

    gap:4px;

    padding:20px 0;

    box-shadow:0 15px 30px rgba(0,0,0,.15);

    opacity:0;

    visibility:hidden;

    transform:translateY(-20px);

    transition:.3s;

}

.nav-links li{

    width:100%;

}

.nav-links a{

    display:block;

    width:100%;

    padding:13px 24px;

    text-align:center;

}

.nav-links.active{

    opacity:1;

    visibility:visible;

    transform:translateY(0);

}

.menu-btn{

    display:flex;

}

}