/*=========================
           PARTE 01
    =========================*/




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


/*==================================================
                1400px
==================================================*/

@media (max-width:1400px){

    .container{
        max-width:1180px;
        padding:0 32px;
    }

    /*=========================
            NAVBAR
    =========================*/

    .logo img{
        width:195px;
    }

    .menu{
        gap:30px;
    }

    .menu a{
        font-size:15px;
    }

    .btn-nav{
        min-width:215px;
        height:56px;
    }


    /*=========================
            HERO
    =========================*/

    .hero-content{
        width:560px;
        margin-top:40px;
    }

    .hero h1{
        font-size:64px;
    }

    .hero p{
        font-size:20px;
        max-width:520px;
    }

    .hero-line{
        margin:18px 0 34px;
    }

    .hero-buttons{
        margin-top:34px;
        margin-bottom:50px;
    }

    .feature-content h3{
        font-size:21px;
    }

    .feature-content p{
        font-size:16px;
    }

    .feature-icon{
        width:48px;
        height:48px;
    }


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

    .services::before{
        width:720px;
        right:-180px;
        opacity:.65;
    }

    .services-header h2{
        font-size:64px;
    }

    .services-header p{
        font-size:20px;
    }

    .services-grid{
        gap:30px;
    }

    .service-card{
        padding:36px;
    }

    .service-card h3{
        font-size:32px;
    }

    .service-number{
        font-size:82px;
    }


    /*=========================
            PROCESS
    =========================*/

    .process-container{
        gap:55px;
    }

    .process-left{
        min-height:860px;
    }

    .process-right{
        min-height:860px;
    }

    .process-overlay{
        left:60px;
        right:55px;
        bottom:65px;
    }

    .process-overlay h2{
        font-size:60px;
    }

    .process-overlay p{
        font-size:18px;
    }

    .process-text span{
        font-size:28px;
    }

    .process-text h3{
        font-size:30px;
    }

    .process-bg-number{
        font-size:120px;
    }


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

    .projects-title h2{
        font-size:50px;
    }

    .projects-grid{
        gap:22px;
    }


    /*=========================
            ABOUT
    =========================*/

    .about{
        background-size:118%;
        background-position:62% center;
    }

    .about-title{
        font-size:56px;
    }

    .about-text{
        font-size:18px;
    }

    .benefits-header h2{
        font-size:46px;
    }

    .benefits-grid{
        gap:16px;
    }


    /*=========================
            CONTACT
    =========================*/

    .contact-container{
        grid-template-columns:55% 45%;
    }

    .contact-info{
        padding-right:60px;
    }

    .contact-info h2{
        font-size:2.7rem;
    }

    .contact-card{
        margin-left:0;
    }

}



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

@media (max-width:1200px){

    .container{
        padding:0 28px;
    }


    /*=========================
            NAVBAR
    =========================*/

    .header{
        padding:16px 0;
    }

    .logo img{
        width:180px;
    }

    .menu{
        gap:24px;
    }

    .menu a{
        font-size:14px;
    }

    .btn-nav{
        min-width:190px;
        height:52px;
        font-size:.90rem;
    }


    /*=========================
            HERO
    =========================*/

    .hero{
        background-position:68% center;
    }

    .hero-content{
        width:500px;
    }

    .hero h1{
        font-size:56px;
    }

    .hero p{
        font-size:19px;
        line-height:1.6;
    }

    .hero-buttons{
        gap:14px;
    }

    .btn-primary,
    .btn-secondary{
        padding:16px 28px;
    }

    .feature{
        gap:14px;
    }

    .feature-icon{
        width:46px;
        height:46px;
    }

    .feature-content h3{
        font-size:18px;
    }

    .feature-content p{
        font-size:15px;
    }


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

    .services-header h2{
        font-size:56px;
    }

    .services-header p{
        font-size:18px;
        max-width:620px;
    }

    .services-grid{
        gap:22px;
    }

    .service-card{
        padding:30px;
    }

    .service-card h3{
        font-size:28px;
    }

    .service-card p{
        font-size:16px;
    }

    .service-icon{
        width:72px;
        height:72px;
    }

    .service-number{
        font-size:72px;
    }

}




 /*=========================
           PARTE 02
    =========================*/


/*==================================================
                    992px
==================================================*/

@media (max-width:992px){

    /*==================================
                GENERALES
    ==================================*/

    .container{
        padding:0 24px;
    }

    section{
        overflow:hidden;
    }


    /*==================================
                HEADER
    ==================================*/

    .header{
        padding:14px 0;
    }

    .logo img{
        width:170px;
    }

    .navbar{
        display:flex;
        justify-content:space-between;
        align-items:center;
    }

    .btn-nav{
        display:none;
    }

    .menu-toggle{
        display:flex;
        flex-direction:column;
        justify-content:center;
        align-items:center;
        width:48px;
        height:48px;
        cursor:pointer;
        z-index:1200;
    }

    .menu-toggle span{
        width:28px;
        height:2px;
        margin:4px 0;
        transition:.35s;
        background:#fff;
    }

    .menu{

        position:fixed;

        top:0;
        right:-100%;

        width:320px;
        height:100vh;

        background:#050505;

        display:flex;
        flex-direction:column;
        justify-content:center;
        align-items:center;

        gap:32px;

        transition:.35s;

        z-index:1100;

        box-shadow:-20px 0 40px rgba(0,0,0,.45);

    }

    .menu.active{
        right:0;
    }

    .menu li{
        width:100%;
        text-align:center;
    }

    .menu a{
        font-size:1.15rem;
    }



    /*==================================
                HERO
    ==================================*/

    .hero{

        min-height:auto;

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

        background-position:72% center;

    }

    .hero-container{

        min-height:auto;

    }

    .hero-content{

        width:100%;

        margin-top:0;

        max-width:720px;

    }

    .hero h1{

        font-size:48px;

        max-width:700px;

    }

    .hero p{

        font-size:18px;

        max-width:650px;

    }

    .hero-buttons{

        flex-wrap:wrap;

        gap:16px;

        margin-bottom:50px;

    }

    .btn-primary,
    .btn-secondary{

        min-width:230px;

        justify-content:center;

    }



    /*==================================
            HERO FEATURES
    ==================================*/

    .hero-features{

        display:grid;

        grid-template-columns:1fr;

        gap:24px;

        margin-top:0;

    }

    .divider{

        display:none;

    }

    .feature{

        padding:18px;

        border:1px solid rgba(255,255,255,.06);

        background:#0b0b0b;

    }

    .feature-content h3{

        font-size:20px;

    }



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

    .services{

        padding:100px 0;

    }

    .services::before{

        opacity:.18;

        width:520px;

        right:-220px;

    }

    .services-header{

        margin-bottom:50px;

    }

    .services-header h2{

        font-size:48px;

    }

    .services-header p{

        font-size:18px;

        max-width:620px;

    }

    .services-grid{

        grid-template-columns:repeat(2,1fr);

        gap:24px;

    }

    .service-card{

        padding:32px 28px;

    }

    .service-icon{

        width:68px;
        height:68px;

    }

    .service-icon svg{

        width:28px;
        height:28px;

    }

    .service-card h3{

        font-size:30px;

    }

    .service-card p{

        font-size:16px;

    }



    /*==================================
                PROCESS
    ==================================*/

    .process{

        padding:90px 0;

    }

    .process-container{

        grid-template-columns:1fr;

        gap:60px;

    }

    .process-left{

        min-height:520px;

        margin-top:0;

        border-radius:18px;

    }

    .process-right{

        min-height:auto;

    }

    .process-right::before{

        left:34px;

    }

    .process-overlay{

        left:40px;

        right:40px;

        bottom:45px;

    }

    .process-overlay h2{

        font-size:52px;

    }

    .process-overlay p{

        font-size:18px;

    }

    .process-item{

        gap:22px;

        margin-bottom:70px;

    }

    .process-icon{

        width:72px;
        height:72px;

        flex:0 0 72px;

    }

    .process-icon svg{

        width:30px;
        height:30px;

    }

    .process-text span{

        font-size:26px;

    }

    .process-text h3{

        font-size:30px;

    }

    .process-text p{

        font-size:17px;

    }

    .process-bg-number{

        font-size:95px;

    }



    /*==================================
            TIMELINE LATERAL
    ==================================*/

    .timeline{

        display:none;

    }

}




/*==================================
            PARTE 3
    ==================================*/




    /*==================================================
                    768px
==================================================*/

@media (max-width:768px){

    /*==================================
                GENERALES
    ==================================*/

    .container{
        padding:0 22px;
    }

    section{
        padding-top:80px;
        padding-bottom:80px;
    }

    .section-tag{
        font-size:13px;
        letter-spacing:3px;
    }



    /*==================================
                HERO
    ==================================*/

    .hero{

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

        background-position:75% center;

    }

    .hero h1{

        font-size:40px;

    }

    .hero p{

        font-size:17px;

        line-height:1.75;

    }

    .hero-buttons{

        flex-direction:column;

        align-items:stretch;

        gap:14px;

    }

    .btn-primary,
    .btn-secondary{

        width:100%;

        min-width:0;

    }

    .hero-features{

        gap:18px;

    }

    .feature{

        padding:16px;

    }

    .feature-icon{

        width:44px;
        height:44px;

    }

    .feature-content h3{

        font-size:18px;

    }

    .feature-content p{

        font-size:15px;

    }



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

    .services{

        padding:80px 0;

    }

    .services-header{

        text-align:center;

    }

    .services-header h2{

        font-size:40px;

    }

    .services-header p{

        font-size:17px;

        margin:auto;

    }

    .services-grid{

        grid-template-columns:1fr;

        gap:20px;

        margin-top:35px;

    }

    .service-card{

        padding:30px 26px;

    }

    .service-number{

        font-size:60px;

    }

    .service-icon{

        width:62px;
        height:62px;

    }

    .service-card h3{

        font-size:26px;

    }

    .service-card p{

        font-size:15px;

    }



    /*==================================
                PROCESS
    ==================================*/

    .process{

        padding:80px 0;

    }

    .process-left{

        min-height:420px;

    }

    .process-overlay{

        left:30px;
        right:30px;
        bottom:30px;

    }

    .process-overlay h2{

        font-size:40px;

    }

    .process-overlay p{

        font-size:16px;

    }

    .process-right::before{

        left:30px;

    }

    .process-item{

        gap:18px;

        margin-bottom:55px;

    }

    .process-icon{

        width:64px;
        height:64px;

        flex:0 0 64px;

    }

    .process-icon svg{

        width:26px;
        height:26px;

    }

    .process-text span{

        font-size:22px;

    }

    .process-text h3{

        font-size:24px;

    }

    .process-text p{

        font-size:15px;

        line-height:1.8;

    }

    .process-bg-number{

        font-size:70px;

    }



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

    .projects{

        padding:80px 0;

    }

    .projects-header{

        display:block;

        margin-bottom:45px;

    }

    .projects-title{

        max-width:none;

        margin-bottom:24px;

    }

    .projects-title h2{

        font-size:40px;

    }

    .projects-text{

        max-width:none;

    }

    .projects-text p{

        font-size:16px;

    }

    .projects-grid{

        grid-template-columns:repeat(2,1fr);

        gap:20px;

    }

    .project-content{

        padding:18px;

    }

    .project-content h3{

        font-size:18px;

    }



    /*==================================
                ABOUT
    ==================================*/

    .about{

        min-height:auto;

        padding:90px 0;

        background-size:cover;

        background-position:70% center;

    }

    .about-content{

        max-width:100%;

        padding:0;

    }

    .about-title{

        font-size:42px;

    }

    .about-text{

        font-size:17px;

    }



    /*==================================
            BENEFITS
    ==================================*/

    .about-benefits{

        padding:80px 0;

    }

    .benefits-header{

        margin-bottom:45px;

    }

    .benefits-header h2{

        font-size:38px;

    }

    .benefits-grid{

        grid-template-columns:repeat(2,1fr);

        gap:18px;

    }

    .benefit-card{

        min-height:auto;

        padding:28px 22px;

    }



    /*==================================
            COMMITMENT
    ==================================*/

    .commitment-top{

        grid-template-columns:1fr;

        gap:35px;

        margin-bottom:45px;

    }



    /*==================================
                CONTACT
    ==================================*/

    .contact{

        padding:90px 0;

    }

    .contact-container{

        grid-template-columns:1fr;

        gap:50px;

        min-height:auto;

    }

    .contact-info{

        padding:0;

    }

    .contact-info::before{

        background-size:cover;

        background-position:center;

        opacity:.30;

    }

    .contact-info h2{

        font-size:2.4rem;

    }

    .contact-info>p{

        max-width:none;

    }

    .contact-card{

        margin:0;

    }

    .contact-row{

        grid-template-columns:1fr;

    }



    /*==================================
                PARTNERS
    ==================================*/

    .partners{

        padding:28px 0;

    }

    .partners-container{

        display:grid;

        grid-template-columns:repeat(2,1fr);

        gap:28px;

    }

    .partner{

        min-height:70px;

    }

    .partner img{

        width:70%;

    }

}




/*==================================
                PARTE 4
    ==================================*/





    /*==================================================
                    576px
==================================================*/

@media (max-width:576px){

    /*==================================
                GENERALES
    ==================================*/

    .container{
        padding:0 18px;
    }

    section{
        padding-top:70px;
        padding-bottom:70px;
    }

    .section-tag{
        font-size:12px;
        letter-spacing:2px;
    }


    /*==================================
                HEADER
    ==================================*/

    .header{
        padding:12px 0;
    }

    .logo img{
        width:150px;
    }

    .menu{
        width:100%;
    }


    /*==================================
                HERO
    ==================================*/

    .hero{

        padding-top:100px;
        padding-bottom:60px;

        background-position:78% center;

    }

    .hero h1{

        font-size:34px;

        line-height:1.1;

    }

    .hero-line{

        margin:18px 0 28px;

    }

    .hero-line .line{

        width:70px;

    }

    .hero p{

        font-size:16px;

        line-height:1.7;

    }

    .hero-buttons{

        margin-bottom:40px;

    }

    .btn-primary,
    .btn-secondary{

        padding:15px 20px;

        font-size:15px;

    }

    .feature{

        gap:14px;

    }

    .feature-icon{

        width:42px;
        height:42px;

    }

    .feature-content h3{

        font-size:17px;

    }

    .feature-content p{

        font-size:14px;

    }



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

    .services-header h2{

        font-size:34px;

    }

    .services-header p{

        font-size:16px;

    }

    .service-card{

        padding:24px;

        border-radius:14px;

    }

    .service-icon{

        width:58px;
        height:58px;

        margin-bottom:20px;

    }

    .service-number{

        font-size:52px;

    }

    .service-card h3{

        font-size:22px;

        margin-bottom:16px;

    }

    .service-card p{

        font-size:15px;

    }

    .service-card ul{

        margin-top:18px;

    }



    /*==================================
                PROCESS
    ==================================*/

    .process-left{

        min-height:320px;

    }

    .process-overlay{

        left:20px;
        right:20px;
        bottom:20px;

    }

    .process-overlay h2{

        font-size:32px;

    }

    .process-divider{

        margin:14px 0;

        width:55px;

    }

    .process-overlay p{

        font-size:15px;

    }

    .process-right::before{

        left:25px;

    }

    .process-item{

        gap:16px;

        margin-bottom:45px;

    }

    .process-icon{

        width:54px;
        height:54px;

        flex:0 0 54px;

    }

    .process-icon svg{

        width:22px;
        height:22px;

    }

    .process-text span{

        font-size:18px;

    }

    .process-text h3{

        font-size:21px;

        margin-bottom:12px;

    }

    .process-text p{

        font-size:14px;

    }

    .process-bg-number{

        display:none;

    }



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

    .projects-title h2{

        font-size:34px;

    }

    .projects-grid{

        grid-template-columns:1fr;

    }

    .project-content{

        padding:18px;

    }



    /*==================================
                ABOUT
    ==================================*/

    .about{

        padding:70px 0;

        background-position:72% center;

    }

    .about-title{

        font-size:34px;

    }

    .about-text{

        font-size:16px;

        line-height:1.8;

    }

    .benefits-header h2{

        font-size:32px;

    }

    .benefits-grid{

        grid-template-columns:1fr;

    }

    .benefit-card{

        padding:24px 20px;

    }



    /*==================================
                CONTACT
    ==================================*/

    .contact{

        padding:70px 0;

    }

    .contact-info h2{

        font-size:2rem;

    }

    .contact-info::before{

        display:none;

    }

    .contact-card{

        border-radius:14px;

    }

    .card-header{

        padding:24px;

    }

    .contact-form{

        padding:20px;

    }

    .contact-row{

        gap:14px;

    }

    .field{

        margin-bottom:14px;

    }



    /*==================================
                PARTNERS
    ==================================*/

    .partners-container{

        grid-template-columns:1fr;

    }

    .partner img{

        width:60%;

    }

}



/*==================================================
                    400px
==================================================*/

@media (max-width:400px){

    .container{

        padding:0 16px;

    }

    .logo img{

        width:135px;

    }

    .hero{

        padding-top:90px;

    }

    .hero h1{

        font-size:30px;

    }

    .hero p{

        font-size:15px;

    }

    .btn-primary,
    .btn-secondary{

        font-size:14px;

        padding:14px 18px;

    }

    .services-header h2{

        font-size:30px;

    }

    .service-card{

        padding:20px;

    }

    .service-card h3{

        font-size:20px;

    }

    .process-left{

        min-height:260px;

    }

    .process-overlay{

        left:18px;
        right:18px;

    }

    .process-overlay h2{

        font-size:28px;

    }

    .process-overlay p{

        font-size:14px;

    }

    .process-icon{

        width:48px;
        height:48px;

        flex:0 0 48px;

    }

    .process-text span{

        font-size:16px;

    }

    .process-text h3{

        font-size:19px;

    }

    .projects-title h2{

        font-size:30px;

    }

    .about-title{

        font-size:30px;

    }

    .benefits-header h2{

        font-size:28px;

    }

    .contact-info h2{

        font-size:1.75rem;

    }

}



/*==================================================
            AJUSTES FINALES
==================================================*/

img{
    max-width:100%;
    height:auto;
}

.hero,
.services,
.process,
.projects,
.about,
.contact{
    overflow:hidden;
}

.hero h1,
.services-header h2,
.projects-title h2,
.about-title,
.benefits-header h2,
.contact-info h2{
    text-wrap:balance;
}

.service-card,
.project-card,
.benefit-card,
.contact-card{
    max-width:100%;
}

iframe{
    max-width:100%;
}

table{
    width:100%;
    display:block;
    overflow-x:auto;
}

input,
select,
textarea,
button{
    font-family:inherit;
}

html{
    overflow-x:hidden;
}

body{
    overflow-x:hidden;
}