/* =========================================
RESET
========================================= */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');


:root{

    --primary:#0066ff;
    --primary-dark:#0047b3;
    --secondary:#00b7ff;
    --dark:#061a33;
    --text:#334155;
    --light:#f4f8ff;
    --white:#ffffff;

    --shadow:0 20px 50px rgba(0,0,0,.10);
    --radius:20px;

}


*{

    margin:0;
    padding:0;
    box-sizing:border-box;

}


html{

    scroll-behavior:smooth;

}


body{

    font-family:"Inter",sans-serif;
    color:var(--text);
    background:#fff;
    overflow-x:hidden;

}


img{

    max-width:100%;
    display:block;

}


a{

    text-decoration:none;

}


ul{

    list-style:none;

}


.container{

    width:90%;
    max-width:1200px;
    margin:auto;

}




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


header{

    position:fixed;

    top:0;
    left:0;

    width:100%;

    z-index:1000;

    background:transparent;

    transition:.3s;

}

header.scroll{

    background:white;

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

    padding:15px 0;

}



header .container{

    display:flex;
    align-items:center;
    justify-content:space-between;

}



.logo img{

    width:120px;

    transition:.3s;

}


.logo img:hover{

    transform:scale(1.05);

}




.nav-links{

    display:flex;
    align-items:center;
    gap:35px;

}



.nav-links a{

    color:white;

    font-size:15px;

    font-weight:600;

    position:relative;

    transition:.3s;

}



header.scroll .nav-links a{

    color:var(--dark);

}



.nav-links a::after{

    content:"";

    position:absolute;

    bottom:-8px;
    left:0;

    width:0;
    height:3px;

    background:var(--primary);

    border-radius:10px;

    transition:.3s;

}



.nav-links a:hover::after{

    width:100%;

}



.nav-links a:hover{

    color:var(--primary)!important;

}




.menu-toggle{

    display:none;

    border:0;

    background:none;

    font-size:30px;

    color:var(--primary);

    cursor:pointer;

}



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

.hero{

    min-height:100vh;

    display:flex;

    align-items:center;

    position:relative;

    padding-top:120px; /* adiciona espaço para o header */

    background:
    linear-gradient(
        120deg,
        #061a33,
        #0066ff
    );

    color:white;

    overflow:hidden;

}



.hero::before{

    content:"";

    position:absolute;

    width:700px;

    height:700px;

    background:rgba(255,255,255,.08);

    border-radius:50%;

    right:-250px;

    top:-200px;

}



.hero-grid{

    display:grid;

    grid-template-columns:

    1fr 1fr;

    gap:50px;

    align-items:center;

    position:relative;

}



.tag{

    display:inline-block;

    background:white;

    color:var(--primary);

    padding:10px 25px;

    border-radius:50px;

    font-weight:800;

    font-size:14px;

    margin-bottom:25px;

}




.hero h1{

    font-size:58px;

    line-height:1.1;

    font-weight:900;

}



.hero h1 span{

    color:#8ed4ff;

}



.hero p{

    margin:25px 0;

    max-width:550px;

    line-height:1.8;

    font-size:17px;

}



.hero-buttons{

    margin-top:30px;

}



.btn-secondary{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    background:white;

    color:var(--primary);

    padding:16px 40px;

    border-radius:50px;

    font-weight:800;

    transition:.3s;

    box-shadow:var(--shadow);

}



.btn-secondary:hover{

    transform:translateY(-5px);

    background:#eaf4ff;

}





.hero-right{

    position:relative;

}



.hero-right img{

    width:100%;

    max-width:550px;

    animation:float 4s infinite ease-in-out;

}



@keyframes float{

    50%{

        transform:translateY(-15px);

    }

}





.card-float{

    position:absolute;

    background:white;

    color:var(--dark);

    padding:15px 20px;

    border-radius:15px;

    box-shadow:var(--shadow);

    font-size:14px;

    font-weight:700;

}



.card-float.one{

    top:20%;

    left:-20px;

}


.card-float.two{

    right:0;

    top:50%;

}


.card-float.three{

    bottom:15%;

    left:30px;

}





.hero-numbers{

    display:flex;

    gap:45px;

    margin-top:50px;

}



.hero-numbers h2{

    font-size:35px;

}



.hero-numbers p{

    margin:0;

    font-size:14px;

}


/* =========================================
SECTIONS
========================================= */


section{

    padding:100px 0;

}



.title{

    text-align:center;

    max-width:850px;

    margin:auto;

}



.title span{

    color:var(--primary);

    font-weight:800;

    letter-spacing:1px;

}



.title h2{

    margin:20px 0;

    font-size:42px;

    color:var(--dark);

}



.title p{

    line-height:1.8;

}

/* =========================================
SOBRE / CARDS
========================================= */


.about-grid{

    display:grid;

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

    gap:25px;

    margin-top:60px;

}



.about-card{

    background:white;

    padding:35px;

    border-radius:var(--radius);

    box-shadow:var(--shadow);

    transition:.4s;

    border:1px solid #edf3ff;

}



.about-card:hover{

    transform:translateY(-10px);

    border-color:var(--primary);

}



.about-card h3{

    color:var(--primary);

    margin-bottom:15px;

    font-size:22px;

}



.about-card p{

    line-height:1.7;

}



/* =========================================
SERVIÇOS
========================================= */


#servicos{

    background:var(--light);

}



.services-grid{

    display:grid;

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

    gap:25px;

    margin-top:60px;

}



.service-card{

    background:white;

    padding:35px;

    border-radius:var(--radius);

    box-shadow:var(--shadow);

    transition:.4s;

}



.service-card:hover{

    transform:translateY(-12px);

}



.service-icon{

    width:70px;

    height:70px;

    display:flex;

    align-items:center;

    justify-content:center;

    background:#e8f2ff;

    color:var(--primary);

    border-radius:20px;

    font-size:30px;

    margin-bottom:25px;

}



.service-card h3{

    color:var(--dark);

    margin-bottom:15px;

    font-size:22px;

}



.service-card p{

    line-height:1.7;

}





/* =========================================
PROCESSO
========================================= */


.timeline{

    display:grid;

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

    gap:25px;

    margin-top:60px;

}



.step{

    text-align:center;

    padding:35px 20px;

    background:white;

    box-shadow:var(--shadow);

    border-radius:20px;

}



.step span{

    width:60px;

    height:60px;

    display:flex;

    align-items:center;

    justify-content:center;

    margin:auto;

    background:var(--primary);

    color:white;

    border-radius:50%;

    font-size:22px;

    font-weight:800;

    margin-bottom:20px;

}



.step h3{

    color:var(--dark);

    margin-bottom:15px;

}



/* =========================================
GALERIA
========================================= */


#galeria{

    background:#fff;

}



.gallery{

    display:grid;

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

    gap:25px;

    margin-top:60px;

}



.gallery img{

    width:100%;

    height:300px;

    object-fit:cover;

    border-radius:20px;

    transition:.4s;

}



.gallery img:hover{

    transform:scale(1.05);

}





/* =========================================
BENEFÍCIOS
========================================= */


#beneficios{

    background:var(--light);

}



.benefits-grid{

    display:grid;

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

    gap:25px;

    margin-top:60px;

}



.benefit{

    background:white;

    padding:30px;

    border-radius:20px;

    box-shadow:var(--shadow);

    transition:.3s;

}



.benefit:hover{

    transform:translateY(-8px);

}



.benefit h3{

    color:var(--dark);

    margin-bottom:15px;

}



/* =========================================
NÚMEROS
========================================= */


#numeros{

    background:

    linear-gradient(
        120deg,
        #061a33,
        #0066ff
    );

}



#numeros .container{

    display:grid;

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

    gap:25px;

}



.number-card{

    text-align:center;

    background:white;

    padding:35px 20px;

    border-radius:20px;

}



.counter{

    font-size:45px;

    color:var(--primary);

    font-weight:900;

}



.number-card p{

    font-weight:600;

}





/* =========================================
DEPOIMENTOS
========================================= */


.testimonials{

    display:grid;

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

    gap:25px;

    margin-top:60px;

}



.testimonial-card{

    background:white;

    padding:35px;

    border-radius:20px;

    box-shadow:var(--shadow);

}



.stars{

    color:#ffc107;

    font-size:22px;

    margin-bottom:20px;

}



.testimonial-card p{

    line-height:1.7;

}



.client{

    display:flex;

    align-items:center;

    gap:15px;

    margin-top:25px;

}



.client img{

    width:55px;

    height:55px;

    object-fit:cover;

    border-radius:50%;

}



.client strong{

    display:block;

    color:var(--dark);

}



.client span{

    font-size:13px;

}




/* =========================================
WHATSAPP
========================================= */


.whatsapp{

    position:fixed;

    right:25px;

    bottom:25px;

    width:65px;

    height:65px;

    background:#25d366;

    color:white;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:35px;

    z-index:999;

    animation:pulse 2s infinite;

}



@keyframes pulse{

    0%{

        box-shadow:0 0 0 0 rgba(37,211,102,.7);

    }


    70%{

        box-shadow:0 0 0 20px rgba(37,211,102,0);

    }


    100%{

        box-shadow:0 0 0 0 rgba(37,211,102,0);

    }

}



/* =========================================
BOTÃO TOPO
========================================= */


#topButton{

    position:fixed;

    right:25px;

    bottom:105px;

    width:45px;

    height:45px;

    border:0;

    border-radius:50%;

    background:var(--primary);

    color:white;

    cursor:pointer;

    opacity:0;

    visibility:hidden;

    transition:.3s;

    z-index:999;

}



#topButton.show{

    opacity:1;

    visibility:visible;

}

/* =========================================
FOOTER
========================================= */


footer{

    background:#041426;

    color:white;

    padding:70px 0 20px;

}



.footer-grid{

    display:grid;

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

    gap:40px;

}



.footer-logo img{

    width:170px;

    margin-bottom:20px;

}



.footer-logo p{

    line-height:1.8;

    color:#cbd5e1;

}



footer h3{

    margin-bottom:20px;

    color:white;

    font-size:20px;

}



footer ul li{

    margin-bottom:15px;

    color:#cbd5e1;

}



footer ul li i{

    color:#00aaff;

    margin-right:10px;

}



footer a{

    color:#cbd5e1;

    transition:.3s;

}



footer a:hover{

    color:white;

}



.footer-bottom{

    margin-top:50px;

    padding-top:20px;

    border-top:1px solid rgba(255,255,255,.15);

    text-align:center;

    color:#94a3b8;

}




/* =========================================
CURSOR PERSONALIZADO
========================================= */


.cursor{

    width:20px;

    height:20px;

    border:2px solid var(--primary);

    border-radius:50%;

    position:fixed;

    pointer-events:none;

    z-index:9999;

    transform:translate(-50%,-50%);

    transition:.1s;

}



.cursor2{

    width:8px;

    height:8px;

    background:var(--primary);

    border-radius:50%;

    position:fixed;

    pointer-events:none;

    z-index:9999;

    transform:translate(-50%,-50%);

}




/* =========================================
ANIMAÇÕES
========================================= */


.fade{

    opacity:0;

    transform:translateY(40px);

    transition:.8s;

}



.fade.show{

    opacity:1;

    transform:none;

}



/* =========================================
RESPONSIVO TABLET
========================================= */


@media(max-width:1100px){


    .hero h1{

        font-size:45px;

    }


    .benefits-grid{

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

    }


    .timeline{

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

    }


    .footer-grid{

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

    }


}





/* =========================================
RESPONSIVO MOBILE
========================================= */


@media(max-width:800px){


header{

    padding:15px 0;

}



.logo img{

   .logo img{
    width:150px;
    height:auto;
}

}



.menu-toggle{

    display:block;

}



nav{

    position:absolute;

    top:80px;

    right:5%;

    width:280px;

    background:white;

    padding:30px;

    border-radius:20px;

    box-shadow:var(--shadow);

    opacity:0;

    visibility:hidden;

    transform:translateY(-20px);

    transition:.3s;

}



nav.active{

    opacity:1;

    visibility:visible;

    transform:none;

}



.nav-links{

    flex-direction:column;

    align-items:flex-start;

    gap:20px;

}



.nav-links a{

    color:var(--dark)!important;

}



.hero{

    padding-top:120px;

}



.hero-grid{

    grid-template-columns:1fr;

    text-align:center;

}



.hero h1{

    font-size:38px;

}



.hero p{

    font-size:15px;

}



.hero-buttons{

    justify-content:center;

}



.hero-right{

    margin-top:40px;

}







.hero-numbers{

    justify-content:center;

    gap:25px;

}



.hero-numbers h2{

    font-size:28px;

}



.title h2{

    font-size:32px;

}



.about-grid,
.services-grid,
.gallery,
.testimonials{

    grid-template-columns:1fr;

}



.benefits-grid{

    grid-template-columns:1fr;

}



.timeline{

    grid-template-columns:1fr;

}



#numeros .container{

    grid-template-columns:1fr;

}



.footer-grid{

    grid-template-columns:1fr;

    text-align:center;

}



.footer-logo img{

    margin:auto;

}



.cursor,
.cursor2{

    display:none;

}



}


    .card-float{
        display: block;
        font-size: 12px;
        padding: 10px 15px;
        border-radius: 12px;
    }

    .card-float.one{
        top: 12%;
        left: 10px;
    }

    .card-float.two{
        top: 45%;
        right: 10px;
    }

    .card-float.three{
        bottom: 12%;
        left: 10px;
    }

/* =========================================
TELAS PEQUENAS
========================================= */


@media(max-width:450px){


.hero h1{

    font-size:32px;

}



.hero-numbers{

    flex-direction:column;

}



.btn-secondary{

    width:100%;

}



.whatsapp{

    width:55px;

    height:55px;

    font-size:30px;

}



}