*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{
    font-family:'Nunito', sans-serif;
    overflow-x:hidden;
    background:#fff;
}

img{
    max-width:100%;
    display:block;
}

a{
    text-decoration:none;
}

.container{
    width:100%;
    max-width:1400px;
    margin:auto;
    padding:0 60px;
}



/* HERO */

.hero{
    background:#F5F5F5;
    position:relative;
    overflow:hidden;
}

.top-gradient{
    width:100%;
    height:70px;
    background:linear-gradient(90deg,#1489E8 0%, #17E3E9 100%);
}

.hero-content{
    min-height:92svh;
    display:flex;
    align-items:center;
    justify-content:space-between;
    background-image: url(/assets/fondo1.png);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: bottom right;
    background-color: #fff;
    min-width: 100%;
}

.hero-left{
    width:50%;
    z-index:2;
    padding-bottom: 10svh;
}

.logo{
    width:70%;
    margin-bottom:20svh;
}
.hero-text{
    padding-left: 4rem;
}

.hero-text h2{
    font-size:1.8svw;
    font-weight:700;
    color:#111;
}

.hero-text h2 span{
    color:#0E7EEB;
}

.hero-text p{
    font-size:1.5svw;
    color:#111;
    margin-top:5px;
}

.hero-text p span{
    color:#0E7EEB;
    font-weight:700;
}

.stores{
    display:flex;
    gap:18px;
    margin-top:40px;
}

.stores img{
    height:60px;
}

.hero-right{
    width:55%;
    position:relative;
    height:760px;
    display:flex;
    align-items:flex-end;
    justify-content:center;
}


.hero-people{
    position:relative;
    width:900px;
    z-index:2;
}




/* ABOUT */

.about{
    background:url('/assets/logo-tran.png') center/40% auto no-repeat,
    radial-gradient(circle, rgba(37,163,229,1) 0%, #1661AC 100%);
    background-position: center;
    background-repeat: no-repeat;
    position:relative;
    overflow:hidden;
    padding: 3rem 2rem;
}

.about-content{
    position:relative;
    z-index:2;
    text-align:center;
    max-width:1100px;
}

.about h2{
    color:white;
    font-size: 3.2svw;
    line-height:1.1;
    font-weight:900;
    text-shadow:0 4px 10px rgba(0,0,0,.2);
    text-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
}

.about p{
    margin-top:60px;
    color:white;
    font-size: 2svw;
    line-height:1.5;
    font-weight:400;
}

.about h3{
    margin-top:50px;
    color:white;
    font-size: 2svw;
    line-height:1.4;
    font-weight:700;
}

.about-blur{
    position:absolute;
    border-radius:50%;
    background:rgba(88, 207, 255, 0.15);
    filter:blur(2px);
}

.about-blur.one{
    width:300px;
    height:300px;
    left:30%;
    top:50%;
}

.about-blur.two{
    width:300px;
    height:300px;
    right:30%;
    top:50%;
}





/* BENEFITS */

.benefits{
    min-height:800px;
    display:flex;
    background:#DDF7FD;
    min-height: 700px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding: 2rem;
    background-image: url(assets/pareja.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

.benefits-image{
    width:45%;
}

.benefits-cards{
    width:55%;
    display:flex;
    flex-direction:column;
    justify-content:center;
    gap:20px;
    padding: 0rem 0 0rem 6rem;
}

.benefit-card{
    background:#fff;
    border-radius:35px;
    padding:2rem;
    display:flex;
    gap:25px;
    align-items:flex-start;
    align-items: center;
    box-shadow:0 10px 30px rgba(0,0,0,.1);
}

.benefit-card img{
    width:70px;
}

.benefit-card h3{
    color:#0E67B8;
   font-size: 1.8svw;
    margin-bottom:10px;
}

.benefit-card p{
    font-size:1.5svw;
    line-height:1.4;
    color:#444;
}




/* FINAL */

.final-section{
    background:#EFFBFF;
    position:relative;
    overflow:hidden;
}

.final-content{
    min-height:100svh;
    display:flex;
    align-items:center;
    justify-content:space-between;
}

.final-left{
    width:40%;
    position:relative;
    z-index:3;
}

.final-right{
    width:60%;
    position:relative;
    display:flex;
    justify-content:center;
    align-items:flex-end;
     margin: auto 0 0 0;
}

.final-circle{
    position:absolute;
    width:90svh;
    height:90svh;
    border-radius:50%;
    background:#0E67B8;
    bottom:-50svh;
}

.phone{
    position:relative;
    width: 70svh;
    z-index:3;
}

.final-lines{
    position:absolute;
    inset:0;
    background-image:
    linear-gradient(120deg,
    transparent 0%,
    transparent 48%,
    rgba(0,0,0,.08) 49%,
    transparent 50%);
    background-size:350px 100%;
    opacity:.4;
}




/* RESPONSIVE */

@media(max-width:1200px){

    .logo{
        margin-bottom: 5svh;
    }
    .hero-text h2 {
        font-size: 2.5svw;
    }

.hero-text p {
    font-size: 1.8svw;
}
 .hero-content{
    min-height: 75svh;
    padding-top: 0;
    min-width: 100%;
 }
 .hero-left{
        padding-bottom: 25svh;

 }
    .final-content{
        justify-content:center;
        padding-top:4rem;
    }

    .hero-left,
    .hero-right{
        width:100%;
    }
    .final-left{
        margin-bottom: 10svh;

    }
.final-left{
    width: 45%;
}
    .hero-left,
    .final-left{
        text-align:center;
        display:flex;
        flex-direction:column;
        align-items:center;
    }

    .hero-right{
        display: none;
    }

    .hero-people{
        width:650px;
    }

    .hero-circle{
        width:700px;
        height:700px;
        bottom:-350px;
    }
    .about{
            background: url(/assets/logo-tran.png) center / 60% auto no-repeat, radial-gradient(circle, rgba(37, 163, 229, 1) 0%, #1661AC 100%);
    }

    .about h2{
            font-size: 4.2svw;
    }

    .about p,.about h3{
    font-size: 3svw;
    }
     

    .benefits{
        flex-direction:column;
        background-position: 20%;
        justify-content: center;
    align-items: flex-end;
    }

    .benefits-image{
        width:100%;
        height:500px;
        display: none;
    }

    .benefits-cards{
        width:50%;
    }
    .benefits-cards h3{
            font-size: 2svw;
    }
    .benefits-cards p{
        font-size: 1.5svw;
    }
    .benefit-card{
        padding: 1.5rem;
    }
.about p,.about h3{
    margin-top: 30px;
}
    .about {
        background: url(/assets/logo-tran.png) center / 45% auto no-repeat, radial-gradient(circle, rgba(37, 163, 229, 1) 0%, #1661AC 100%);
    }
}




@media(max-width:1025px){
 .hero-content{
        background-size: 80% auto;
 }   
 .hero-left, .final-left{
    align-items: flex-start;
    text-align: left;
 }
 .about h2 {
        font-size: 3.2svw;
        
    }
    .about p, .about h3 {
        font-size: 2svw;
    }
}

@media(max-width:768px){

    .container{
        padding:0 25px;
    }

    .logo{
        width:80%;
        margin: 20px auto 60px auto;
    }


    .hero-text h2{
        font-size: 5svw;
    }

    .hero-text p{
        font-size:4svw;
    }

    .stores{
        justify-content:center;
        flex-wrap:wrap;
    }

    .stores img{
        height:55px;
    }

    .hero-content{
        min-height:auto;
        padding-bottom:13rem;
        background-size: 160%;
    }
.hero-left{
            padding-bottom: 10svh;
}
    .hero-right{
        height:420px;
        margin-top:40px;
        display: none;
    }

    .hero-circle{
        width:500px;
        height:500px;
        bottom:-250px;
    }

    .hero-people{
        width:420px;
    }

    .about{
        background: url(/assets/logo-tran.png) center / 80% auto no-repeat, radial-gradient(circle, rgba(37, 163, 229, 1) 0%, #1661AC 100%);
    }

    .about h2{
        font-size:5svw;
    }

    .about p{
        font-size:4svw;
        margin-top:25px;
    }

    .about h3{
        font-size:4svw;
        margin-top:20px;
    }
    .benefits{
        padding: 1rem;
        background: #EFFBFF;
    }

    .benefits-image{
        height:350px;
        background-position:center;
        display: none;
    }

    .benefits-cards{
        padding:30px 20px;
        gap:25px;
        width: 100%;
    }

    .benefit-card{
        padding:25px;
        border-radius:25px;
        flex-direction:column;
        align-items:flex-start;
    }

    .benefit-card img{
        width:50px;
    }

    .benefit-card h3{
        font-size:22px;
    }

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

    .final-content{
        min-height:auto;
        padding-top:20px;
        flex-direction: column;
    }

    .final-right{
        width: 100%;
        height:500px;
    }
    .final-left{
        margin-bottom: 0;
        width: 100%;

    }

    .final-circle{
        width:120svw;
        height:120svw;
        bottom:-50svw;
    }

    .phone{
        width:100%;
    }
    .hero-text {
    padding-left: 0rem;
    text-align: center;
}

}