/*==============================================================
RESPONSIVE
1200px
==============================================================*/

@media (max-width:1200px){

    .container{

        width:min(92%,1200px);

    }

    .hero-wrapper{

        grid-template-columns:54% 46%;

        gap:50px;

    }

    .hero h1{

        font-size:5.2rem;

        line-height:.92;

    }

    .hero p{

        max-width:540px;

    }

    .hero-studio{

        max-width:520px;

        margin-left:auto;

    }

    .hero-footer{

        grid-template-columns:220px 1fr 180px;

        gap:45px;

    }

}
/*==============================================================
RESPONSIVE
991px
==============================================================*/

@media (max-width:991px){

    /*----------------------------------------------------------
    HERO
    ----------------------------------------------------------*/

    .hero{

        min-height:auto;

        padding-top:140px;

        padding-bottom:100px;

    }

    .hero-wrapper{

        grid-template-columns:1fr;

        gap:70px;

        margin-bottom:100px;

    }

    /*----------------------------------------------------------
    CONTENIDO
    ----------------------------------------------------------*/

    .hero-content{

        max-width:100%;

        text-align:center;

    }

    .hero-label{

        justify-content:center;

    }

    .hero h1{

        font-size:4.3rem;

        max-width:800px;

        margin:0 auto 30px;

    }

    .hero p{

        max-width:680px;

        margin:0 auto;

        font-size:1.1rem;

    }

    .hero-buttons{

        justify-content:center;

    }

    /*----------------------------------------------------------
    FOTO
    ----------------------------------------------------------*/

    .hero-visual{

        min-height:auto;

    }

    .hero-studio{

        width:100%;

        max-width:560px;

        margin:0 auto;

    }

    /*----------------------------------------------------------
    FOOTER
    ----------------------------------------------------------*/

    .hero-footer{

        grid-template-columns:1fr;

        gap:45px;

        text-align:center;

    }

    .hero-intro{

        display:flex;

        justify-content:center;

    }

    .hero-intro p{

        max-width:520px;

    }

    .hero-stats{

        justify-content:center;

        flex-wrap:wrap;

        gap:55px;

    }

    .stat{

        padding-left:0;

        align-items:center;

    }

    .stat::before{

        display:none;

    }

    .hero-services-icons{

        justify-content:center;

        flex-wrap:wrap;

    }

    /*----------------------------------------------------------
    SCROLL
    ----------------------------------------------------------*/

    .hero-indicator{

        bottom:70px;

    }

}
/*==============================================================
RESPONSIVE
767px
==============================================================*/

@media (max-width:767px){

    /*----------------------------------------------------------
    CONTAINER
    ----------------------------------------------------------*/

    .container{

        width:min(92%,100%);

    }

    /*----------------------------------------------------------
    HERO
    ----------------------------------------------------------*/

    .hero{

        padding-top:120px;
        padding-bottom:90px;

    }

    .hero-wrapper{

        gap:55px;

        margin-bottom:70px;

    }

    /*----------------------------------------------------------
    ETIQUETA
    ----------------------------------------------------------*/

    .hero-label{

        justify-content:center;

        font-size:.72rem;

        letter-spacing:.18em;

        gap:14px;

    }

    .hero-label::after{

        width:45px;

    }

    /*----------------------------------------------------------
    TITULO
    ----------------------------------------------------------*/

    .hero h1{

        font-size:2.9rem;

        line-height:1;

        letter-spacing:-.04em;

        margin-bottom:24px;

    }

    /*----------------------------------------------------------
    TEXTO
    ----------------------------------------------------------*/

    .hero p{

        font-size:1rem;

        line-height:1.8;

        max-width:100%;

    }

    /*----------------------------------------------------------
    BOTONES
    ----------------------------------------------------------*/

    .hero-buttons{

        flex-direction:column;

        gap:18px;

        margin-top:34px;

    }

    .btn-gold{

        width:100%;

        justify-content:center;

    }

    .hero-link{

        justify-content:center;

    }

    /*----------------------------------------------------------
    FOTO
    ----------------------------------------------------------*/

    .hero-studio{

        max-width:100%;

        border-radius:26px;

    }

    /*----------------------------------------------------------
    GEOMETRIA
    ----------------------------------------------------------*/

    .rect-small,
    .line-h-bottom,
    .circle-medium,
    .node-4{

        display:none;

    }

    .circle-big{

        width:320px;
        height:320px;

        right:-120px;

    }

    /*----------------------------------------------------------
    FOOTER
    ----------------------------------------------------------*/

    .hero-footer{

        gap:35px;

    }

    .hero-stats{

        flex-direction:column;

        gap:30px;

    }

    .stat strong{

        font-size:2.5rem;

    }

    .stat span{

        font-size:.9rem;

    }

    .hero-services-icons{

        gap:20px;

    }

    .hero-services-icons img{

        width:30px;
        height:30px;

    }

    /*----------------------------------------------------------
    DESLIZA
    ----------------------------------------------------------*/

    .hero-indicator{

        bottom:45px;

    }

}
/*==============================================================
RESPONSIVE
480px
==============================================================*/

@media (max-width:480px){

    /*----------------------------------------------------------
    HERO
    ----------------------------------------------------------*/

    .hero{

        padding-top:105px;
        padding-bottom:70px;

    }

    /*----------------------------------------------------------
    TITULO
    ----------------------------------------------------------*/

    .hero h1{

        font-size:2.35rem;

        line-height:1.03;

        margin-bottom:22px;

    }

    /*----------------------------------------------------------
    TEXTO
    ----------------------------------------------------------*/

    .hero p{

        font-size:.95rem;

        line-height:1.75;

    }

    /*----------------------------------------------------------
    BOTÓN
    ----------------------------------------------------------*/

    .btn-gold{

        height:58px;

        font-size:.95rem;

    }

    .hero-link{

        font-size:.78rem;

        letter-spacing:.16em;

    }

    /*----------------------------------------------------------
    FOTO
    ----------------------------------------------------------*/

    .hero-studio{

        border-radius:20px;

    }

    /*----------------------------------------------------------
    FOOTER
    ----------------------------------------------------------*/

    .hero-intro p{

        font-size:.92rem;

        max-width:100%;

    }

    .stat strong{

        font-size:2.2rem;

    }

    .stat span{

        font-size:.82rem;

        line-height:1.5;

    }

    .hero-services-icons{

        gap:18px;

    }

    .hero-services-icons img{

        width:26px;
        height:26px;

    }

    /*----------------------------------------------------------
    GEOMETRÍA
    ----------------------------------------------------------*/

    .circle-big{

        width:250px;
        height:250px;

        right:-100px;

    }

    .rect-large{

        width:150px;
        height:210px;

    }

    .line-v{

        height:58%;

    }

    /*----------------------------------------------------------
    DESLIZA
    ----------------------------------------------------------*/

    .hero-indicator{

        bottom:35px;

    }

    .hero-indicator span{

        font-size:.65rem;

        letter-spacing:.28em;

    }

    .indicator-line{

        height:45px;

    }

}

@media (max-width:768px){

    .container{

        width:calc(100% - 40px);

    }

}

/*==============================================================
SERVICES RESPONSIVE
==============================================================*/

@media (max-width:991px){

    .services-home{

        padding:100px 0;

    }

    .services-header{

        margin-bottom:60px;

    }

    .services-header h2{

        font-size:3.4rem;

    }

    .services-grid{

        grid-template-columns:1fr 1fr;

        gap:20px;

    }

    .service-card,
    .service-wide{

        grid-column:auto;

        height:400px;

    }

}

/*==============================================================
SECCIONES RESPONSIVE
==============================================================*/
@media (max-width:768px){

    .services-home{

        padding:90px 0;

    }

    .services-header{

        margin-bottom:45px;

    }

    .services-header h2{

        font-size:2.9rem;

        line-height:1;

    }

    .services-header p{

        font-size:1.05rem;

    }

    .services-grid{

        grid-template-columns:1fr;

        gap:22px;

    }

    .service-card,
    .service-wide{

        height:360px;

    }

}
/*==============================================================
Small area
==============================================================*/
@media (max-width:480px){

    .services-home{

        padding:80px 0;

    }

    .services-header .section-label{

        font-size:.72rem;

    }

    .services-header h2{

        font-size:2.4rem;

    }

    .services-header p{

        font-size:1rem;

        line-height:1.7;

    }

    .service-card,
    .service-wide{

        height:330px;

        border-radius:18px;

    }

    .service-content{

        left:22px;

        right:22px;

        bottom:22px;

    }

    .service-icon{

        width:54px;

        height:54px;

        margin-bottom:18px;

    }

    .service-icon img{

        width:24px;

    }

    .service-content h3{

        font-size:1.8rem;

    }

    .service-content p{

        font-size:.95rem;

        margin-bottom:20px;

    }

}

/*==============================================================
PROJECTS RESPONSIVE
==============================================================*/

@media (max-width:991px){

    .projects-home{

        padding:110px 0;

    }

    .projects-header{

        flex-direction:column;

        gap:45px;

        margin-bottom:55px;

    }

    .projects-title{

        max-width:100%;

    }

    .projects-title h2{

        font-size:3.4rem;

    }

    .projects-title p{

        max-width:700px;

    }

    .projects-grid{

        grid-template-columns:1fr;

        gap:28px;

    }

    .project-card,
    .project-card:nth-child(2){

        margin-top:0;

        height:520px;

    }

}

@media (max-width:768px){

    .projects-home{

        padding:90px 0;

    }

    .projects-header{

        gap:36px;

        margin-bottom:45px;

    }

    .projects-title h2{

        font-size:2.8rem;

        line-height:1;

    }

    .projects-title p{

        font-size:1rem;

        line-height:1.8;

    }

    .projects-all{

        gap:18px;

    }

    .projects-circle{

        width:60px;

        height:60px;

        font-size:1rem;

    }

    .project-card,
    .project-card:nth-child(2){

        height:460px;

    }

}

@media (max-width:480px){

    .projects-home{

        padding:80px 0;

    }

    .projects-title .section-label{

        font-size:.72rem;

    }

    .projects-title h2{

        font-size:2.25rem;

    }

    .projects-title p{

        margin-top:22px;

    }

    .projects-content{

        left:24px;

        right:24px;

        bottom:24px;

    }

    .project-card,
    .project-card:nth-child(2){

        height:390px;

        border-radius:18px;

    }

    .project-category{

        top:18px;

        right:18px;

        font-size:.68rem;

    }

    .project-icon{

        width:60px;

        height:60px;

        margin-bottom:20px;

    }

    .project-icon img{

        width:20px;

        height:20px;

    }

    .project-content h3{

        font-size:1.8rem;

    }

    .project-type{

        font-size:.95rem;

    }

    .project-content p{

        display:none;

    }

}

@media (max-width:768px){

    .projects-footer{

        margin-top:60px;

    }

    .projects-footer p{

        font-size:.95rem;

    }

    .projects-footer-link{

        font-size:1rem;

    }

}