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

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

html{
    scroll-behavior:smooth;
}

body{
    font-family:'Poppins',sans-serif;
    background:var(--background);
    color:var(--text);
    overflow-x:hidden;
}

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

a{
    color:inherit;
    text-decoration:none;
}

ul{
    list-style:none;
}

button{
    border:none;
    background:none;
    cursor:pointer;
    font-family:inherit;
}

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


/*==================================================
                  VARIÁVEIS
==================================================*/

:root{

    /* Cores */

    --primary:#082b66;
    --primary-light:#0f4db8;
    --primary-dark:#061f49;

    --secondary:#18b8ff;

    --background:#f6f8fb;

    --surface:#ffffff;

    --text:#1d1d1d;

    --text-light:#666;

    --border:#e6e6e6;

    --success:#28c76f;

    --shadow-sm:0 5px 18px rgba(0,0,0,.08);

    --shadow-md:0 12px 35px rgba(0,0,0,.12);

    --shadow-lg:0 20px 50px rgba(0,0,0,.18);

    --radius:18px;

    --transition:.35s ease;

}


/*==================================================
                ESTILOS GLOBAIS
==================================================*/

section{
    padding:110px 0;
}

.container{
    width:min(90%,1200px);
    margin:auto;
}

.section-tag{

    display:inline-flex;
    align-items:center;
    gap:.5rem;

    padding:.55rem 1.2rem;

    border-radius:50px;

    background:rgba(8,43,102,.08);

    color:var(--primary);

    font-weight:600;

    margin-bottom:1rem;

}

h1{

    font-size:clamp(2.6rem,6vw,4.3rem);

    line-height:1.1;

    font-weight:800;

}

h2{

    font-size:clamp(2rem,5vw,3rem);

    margin-bottom:1rem;

    font-weight:700;

}

h3{

    font-size:1.3rem;

    margin-bottom:.8rem;

}

p{

    color:var(--text-light);

    line-height:1.8;

}

.section-description{

    max-width:720px;

    margin-bottom:4rem;

}


/*==================================================
                    BOTÕES
==================================================*/

.btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:.7rem;

    padding:1rem 2rem;

    border-radius:50px;

    background:var(--primary);

    color:#fff;

    font-weight:600;

    transition:var(--transition);

    box-shadow:var(--shadow-sm);

}

.btn:hover{

    transform:translateY(-4px);

    background:var(--primary-light);

    box-shadow:var(--shadow-md);

}

.btn-outline{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:.7rem;

    padding:1rem 2rem;

    border-radius:50px;

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

    color:var(--primary);

    font-weight:600;

    transition:var(--transition);

}

.btn-outline:hover{

    background:var(--primary);

    color:#fff;

}


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

header{

    position:fixed;

    top:0;

    left:0;

    width:100%;

    z-index:999;

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

    backdrop-filter:blur(12px);

    border-bottom:1px solid rgba(0,0,0,.06);

}

header.scroll{

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

    backdrop-filter:blur(20px);

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

}

.nav{

    display:flex;

    justify-content:space-between;

    align-items:center;

    height:85px;

}

.logo{

    font-size:2rem;

    font-weight:800;

    color:var(--primary);

}

.logo span{

    color:var(--secondary);

}

nav ul{

    display:flex;

    gap:2.2rem;

}

nav a{

    font-weight:500;

    transition:var(--transition);

    position:relative;

}

nav a::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-8px;

    width:0;

    height:2px;

    background:var(--secondary);

    transition:var(--transition);

}

nav a:hover{

    color:var(--primary);

}

nav a:hover::after{

    width:100%;

}

.nav-btn{

    display:flex;

    align-items:center;

    gap:.6rem;

    background:var(--primary);

    color:#fff;

    padding:.9rem 1.5rem;

    border-radius:50px;

    transition:var(--transition);

}

.nav-btn:hover{

    background:var(--primary-light);

    transform:translateY(-3px);

}

#menuBtn{

    display:none;

    font-size:2rem;

    color:var(--primary);

}


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

@media(max-width:992px){

    .nav{

        height:75px;

    }

    nav{

        position:fixed;

        top:75px;

        right:-100%;

        width:280px;

        height:calc(100vh - 75px);

        background:#fff;

        box-shadow:-10px 0 35px rgba(0,0,0,.08);

        transition:.4s;

        padding:2rem;

    }

    nav.active{

        right:0;

    }

    nav ul{

        flex-direction:column;

        gap:2rem;

    }

    .nav-btn{

        display:none;

    }

    #menuBtn{

        display:block;

    }

}

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

.hero{

    position:relative;

    display:flex;

    align-items:center;

    min-height:100vh;

    padding:120px 0 80px;

    overflow:hidden;

    background:
        linear-gradient(
            90deg,
            rgba(8,43,102,.94) 0%,
            rgba(8,43,102,.88) 40%,
            rgba(8,43,102,.70) 100%
        ),
        url("../imagens/hero-routecell.png")
        right center / cover
        no-repeat;

}

.hero::before{

    content:"";

    position:absolute;

    inset:0;

    background:
        radial-gradient(
            circle at 80% 20%,
            rgba(24,184,255,.15),
            transparent 35%
        );

    pointer-events:none;

}

.hero .container{

    position:relative;

    z-index:2;

}

.hero-content{

    width:100%;

    max-width:720px;

}

.tag{

    display:inline-flex;

    align-items:center;

    gap:.7rem;

    padding:.75rem 1.4rem;

    margin-bottom:2rem;

    border-radius:999px;

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

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

    backdrop-filter:blur(10px);

    color:#fff;

    font-size:.95rem;

    font-weight:600;

}

.tag i{

    color:var(--secondary);

    font-size:1.15rem;

}

.hero h1{

    margin-bottom:1.5rem;

    color:#fff;

    font-size:clamp(3rem,5vw,4.5rem);

    line-height:1.05;

    letter-spacing:-1px;

}

.hero h1 span{

    display:block;

    margin-top:.5rem;

    color:var(--secondary);

}

.hero p{

    max-width:560px;

    margin-bottom:2.5rem;

    color:rgba(255,255,255,.88);

    font-size:1.08rem;

    line-height:1.9;

}

.hero-buttons{

    display:flex;

    gap:1rem;

    flex-wrap:wrap;

    margin-bottom:3rem;

}

.hero .btn{

    background:var(--secondary);

    color:var(--primary);

}

.hero .btn:hover{

    transform:translateY(-4px);

}

.hero .btn-outline{

    border:2px solid rgba(255,255,255,.5);

    color:#fff;

}

.hero .btn-outline:hover{

    background:#fff;

    color:var(--primary);

    border-color:#fff;

}

.hero-info{

    display:flex;

    gap:1rem;

    flex-wrap:wrap;

}

.hero-info div{

    flex:1;

    min-width:170px;

    display:flex;

    align-items:center;

    gap:.8rem;

    padding:1rem 1.2rem;

    border-radius:16px;

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

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

    backdrop-filter:blur(12px);

    transition:var(--transition);

}

.hero-info div:hover{

    transform:translateY(-6px);

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

}

.hero-info i{

    font-size:1.7rem;

    color:var(--secondary);

}

.hero-info span{

    color:#fff;

    font-weight:600;

    line-height:1.5;

}


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

@media(max-width:992px){

    .hero{

        min-height:auto;

        text-align:center;

        padding:140px 0 80px;

        background-position:75% center;

    }

    .hero-content{

        max-width:100%;

    }

    .hero p{

        margin-inline:auto;

    }

    .hero-buttons{

        justify-content:center;

    }

    .hero-info{

        justify-content:center;

    }

}

@media(max-width:768px){

    .hero{

        background-position:80% center;

    }

    .hero-buttons{

        flex-direction:column;

    }

    .hero .btn,

    .hero .btn-outline{

        width:100%;

        justify-content:center;

    }

    .hero-info{

        flex-direction:column;

    }

}

@media(max-width:576px){

    .hero{

        padding:120px 0 70px;

    }

    .tag{

        font-size:.85rem;

    }

    .hero h1{

        font-size:clamp(2.5rem,9vw,3.4rem);

    }

    .hero p{

        font-size:1rem;

    }

}

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

#servicos{

    background:var(--background);

}

.grid{

    display:grid;

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

    gap:2rem;

}

.card{

    background:var(--surface);

    padding:2.5rem 2rem;

    border-radius:var(--radius);

    box-shadow:var(--shadow-sm);

    transition:var(--transition);

    border:1px solid transparent;

}

.card:hover{

    transform:translateY(-10px);

    border-color:rgba(8,43,102,.15);

    box-shadow:var(--shadow-md);

}

.card i{

    width:70px;

    height:70px;

    display:grid;

    place-items:center;

    font-size:2rem;

    color:#fff;

    background:linear-gradient(
        135deg,
        var(--primary),
        var(--secondary)
    );

    border-radius:18px;

    margin-bottom:1.5rem;

}

.card h3{

    margin-bottom:1rem;

    color:var(--primary);

}

.card p{

    line-height:1.8;

}


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

@media(max-width:992px){

    .grid{

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

    }

}

@media(max-width:768px){

    .grid{

        grid-template-columns:1fr;

    }

}


/*==================================================
                COMO FUNCIONA
==================================================*/

.process{

    background:#fff;

}

.process-grid{

    display:grid;

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

    gap:2rem;

    margin-top:3rem;

}

.process-card{

    position:relative;

    background:var(--surface);

    padding:2rem;

    text-align:center;

    border-radius:var(--radius);

    box-shadow:var(--shadow-sm);

    transition:var(--transition);

}

.process-card:hover{

    transform:translateY(-8px);

    box-shadow:var(--shadow-md);

}

.number{

    width:70px;

    height:70px;

    margin:0 auto 1.5rem;

    border-radius:50%;

    display:grid;

    place-items:center;

    background:linear-gradient(
        135deg,
        var(--primary),
        var(--secondary)
    );

    color:#fff;

    font-size:1.4rem;

    font-weight:700;

}

.process-card h3{

    color:var(--primary);

    margin-bottom:1rem;

}


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

@media(max-width:992px){

    .process-grid{

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

    }

}

@media(max-width:768px){

    .process-grid{

        grid-template-columns:1fr;

    }

}


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

.dark{

    background:linear-gradient(
        135deg,
        var(--primary),
        var(--primary-dark)
    );

    color:#fff;

}

.dark .section-tag{

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

    color:#fff;

}

.dark h2{

    color:#fff;

}

.dark .section-description{

    color:rgba(255,255,255,.82);

}

.features{

    display:grid;

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

    gap:2rem;

    margin-top:4rem;

}

.dark .card{

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

    backdrop-filter:blur(12px);

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

    color:#fff;

}

.dark .card:hover{

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

}

.dark .card h3{

    color:#fff;

}

.dark .card p{

    color:rgba(255,255,255,.82);

}

.dark .card i{

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

    color:#fff;

}


/*==================================================
            RESPONSIVO SOBRE
==================================================*/

@media(max-width:992px){

    .features{

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

    }

}

@media(max-width:768px){

    .features{

        grid-template-columns:1fr;

    }

}

/*==================================================
                MARCAS ATENDIDAS
==================================================*/

#marcas{

    background:var(--surface);

}

.brands-grid{

    display:grid;

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

    gap:1.5rem;

    margin-top:3rem;

}

.brand-card{

    background:var(--surface);

    border:1px solid var(--border);

    border-radius:var(--radius);

    padding:2rem 1rem;

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    gap:1rem;

    transition:var(--transition);

    box-shadow:var(--shadow-sm);

}

.brand-card:hover{

    transform:translateY(-8px);

    border-color:var(--secondary);

    box-shadow:var(--shadow-md);

}

.brand-card i{

    font-size:3rem;

    color:var(--primary);

}

.brand-card span{

    font-weight:600;

    color:var(--text);

}


/*==================================================
            RESPONSIVO MARCAS
==================================================*/

@media(max-width:992px){

    .brands-grid{

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

    }

}

@media(max-width:576px){

    .brands-grid{

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

    }

}


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

.testimonials{

    background:var(--background);

}

.testimonials-grid{

    display:grid;

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

    gap:2rem;

    margin-top:3rem;

}

.testimonial-card{

    background:var(--surface);

    padding:2rem;

    border-radius:var(--radius);

    box-shadow:var(--shadow-sm);

    transition:var(--transition);

}

.testimonial-card:hover{

    transform:translateY(-8px);

    box-shadow:var(--shadow-md);

}

.stars{

    color:#f6b400;

    font-size:1.2rem;

    margin-bottom:1rem;

}

.testimonial-card p{

    margin-bottom:1.5rem;

    font-style:italic;

}

.testimonial-card strong{

    color:var(--primary);

}


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

@media(max-width:992px){

    .testimonials-grid{

        grid-template-columns:1fr;

    }

}


/*==================================================
                    FAQ
==================================================*/

.faq{

    max-width:900px;

    margin:3rem auto 0;

}

.faq-item{

    border:1px solid var(--border);

    border-radius:var(--radius);

    margin-bottom:1rem;

    overflow:hidden;

    background:var(--surface);

    box-shadow:var(--shadow-sm);

}

.faq-item button{

    width:100%;

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:1.4rem 1.6rem;

    font-size:1rem;

    font-weight:600;

    color:var(--primary);

}

.faq-item button i{

    font-size:1.4rem;

    transition:var(--transition);

}

.faq-item p{

    padding:0 1.6rem 1.6rem;

    display:none;

}

.faq-item.active p{

    display:block;

}

.faq-item.active i{

    transform:rotate(45deg);

}


/*==================================================
                RESPONSIVO FAQ
==================================================*/

@media(max-width:768px){

    .faq-item button{

        text-align:left;

        gap:1rem;

    }

}


/*==================================================
                    CTA
==================================================*/

.cta{

    background:linear-gradient(
        135deg,
        var(--primary),
        var(--secondary)
    );

    text-align:center;

    color:#fff;

}

.cta h2{

    color:#fff;

    margin-bottom:1rem;

}

.cta p{

    color:rgba(255,255,255,.9);

    max-width:650px;

    margin:0 auto 2rem;

}

.cta .btn{

    background:#fff;

    color:var(--primary);

    font-weight:700;

}

.cta .btn:hover{

    transform:translateY(-5px);

}


/*==================================================
            RESPONSIVO CTA
==================================================*/

@media(max-width:768px){

    .cta{

        padding:80px 0;

    }

}


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

footer{

    background:#081b3b;

    color:#fff;

    padding:80px 0 30px;

}

.footer-grid{

    display:grid;

    grid-template-columns:2fr 1fr 1fr 1fr;

    gap:3rem;

    margin-bottom:3rem;

}

footer h3{

    font-size:2rem;

    margin-bottom:1rem;

}

footer h3 span{

    color:var(--secondary);

}

footer h4{

    margin-bottom:1rem;

}

footer p,
footer li{

    color:rgba(255,255,255,.75);

    line-height:2;

}

footer ul{

    display:flex;

    flex-direction:column;

    gap:.6rem;

}

footer li{

    display:flex;

    align-items:center;

    gap:.6rem;

}

.footer-bottom{

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

    padding-top:2rem;

    text-align:center;

}


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

@media(max-width:992px){

    .footer-grid{

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

    }

}

@media(max-width:768px){

    .footer-grid{

        grid-template-columns:1fr;

        text-align:center;

    }

    footer li{

        justify-content:center;

    }

}


/*==================================================
                BOTÃO WHATSAPP
==================================================*/

.whatsapp{

    position:fixed;

    right:25px;

    bottom:25px;

    width:65px;

    height:65px;

    border-radius:50%;

    background:#25D366;

    color:#fff;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:2rem;

    box-shadow:0 10px 30px rgba(37,211,102,.4);

    transition:var(--transition);

    z-index:999;

}

.whatsapp:hover{

    transform:scale(1.1);

}

@media(max-width:768px){

    .whatsapp{

        width:58px;

        height:58px;

        font-size:1.8rem;

        right:18px;

        bottom:18px;

    }

}

/*==================================================
                SCROLLBAR
==================================================*/

::-webkit-scrollbar{

    width:10px;

}

::-webkit-scrollbar-track{

    background:#eef2f7;

}

::-webkit-scrollbar-thumb{

    background:var(--primary);

    border-radius:999px;

}

::-webkit-scrollbar-thumb:hover{

    background:var(--primary-light);

}


/*==================================================
                SELEÇÃO DE TEXTO
==================================================*/

::selection{

    background:var(--secondary);

    color:#fff;

}


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

@keyframes fadeUp{

    from{

        opacity:0;
        transform:translateY(40px);

    }

    to{

        opacity:1;
        transform:translateY(0);

    }

}

@keyframes float{

    0%,100%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-10px);

    }

}

@keyframes pulse{

    0%{

        transform:scale(1);

        box-shadow:0 10px 30px rgba(37,211,102,.35);

    }

    50%{

        transform:scale(1.08);

        box-shadow:0 15px 45px rgba(37,211,102,.55);

    }

    100%{

        transform:scale(1);

        box-shadow:0 10px 30px rgba(37,211,102,.35);

    }

}


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

.hero-content{

    animation:fadeUp .8s ease;

}

.hero-info{

    animation:fadeUp 1s ease;

}

.tag{

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

}

.whatsapp{

    animation:pulse 2.5s infinite;

}


/*==================================================
                HOVER DOS CARDS
==================================================*/

.card{

    position:relative;

    overflow:hidden;

}

.card::before{

    content:"";

    position:absolute;

    top:0;

    left:-100%;

    width:100%;

    height:4px;

    background:linear-gradient(
        90deg,
        var(--primary),
        var(--secondary)
    );

    transition:.45s;

}

.card:hover::before{

    left:0;

}


/*==================================================
                LINKS
==================================================*/

nav a{

    transition:.3s;

}

nav a:hover{

    color:var(--secondary);

}


/*==================================================
            BOTÕES
==================================================*/

.btn,
.btn-outline{

    position:relative;

    overflow:hidden;

}

.btn::before,
.btn-outline::before{

    content:"";

    position:absolute;

    top:0;

    left:-120%;

    width:60%;

    height:100%;

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

    transform:skewX(-25deg);

    transition:.6s;

}

.btn:hover::before,
.btn-outline:hover::before{

    left:150%;

}


/*==================================================
            LOGO
==================================================*/

.logo{

    transition:.3s;

}

.logo:hover{

    transform:scale(1.05);

}


/*==================================================
            IMAGENS
==================================================*/

.hero{

    background-attachment:fixed;

}


/*==================================================
            ACESSIBILIDADE
==================================================*/

a:focus-visible,
button:focus-visible{

    outline:3px solid var(--secondary);

    outline-offset:4px;

    border-radius:8px;

}


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

@media(prefers-reduced-motion:reduce){

    *{

        animation:none !important;

        transition:none !important;

        scroll-behavior:auto !important;

    }

}


/*==================================================
        RESPONSIVO EXTRA
==================================================*/

@media(max-width:480px){

    section{

        padding:80px 0;

    }

    .container{

        width:92%;

    }

    h2{

        text-align:center;

    }

    .section-description{

        text-align:center;

        margin-inline:auto;

    }

}

/*==================================================
            BARRA DE PROGRESSO
==================================================*/

#scrollProgress{

    position:fixed;

    top:0;

    left:0;

    width:0;

    height:4px;

    background:linear-gradient(
        90deg,
        var(--secondary),
        var(--primary)
    );

    z-index:2000;

}


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

#backToTop{

    position:fixed;

    right:25px;

    bottom:100px;

    width:55px;

    height:55px;

    border:none;

    border-radius:50%;

    background:var(--primary);

    color:#fff;

    font-size:1.5rem;

    display:flex;

    align-items:center;

    justify-content:center;

    cursor:pointer;

    opacity:0;

    visibility:hidden;

    transform:translateY(20px);

    transition:var(--transition);

    z-index:998;

}

#backToTop.show{

    opacity:1;

    visibility:visible;

    transform:translateY(0);

}

#backToTop:hover{

    background:var(--secondary);

}


/*==================================================
            ENTRADA DA PÁGINA
==================================================*/

body{

    opacity:0;

    transition:.5s;

}

body.loaded{

    opacity:1;

}