/* =========================================
   MSRP TRANSPORTES
   HOME PREMIUM CSS
========================================= */


/* RESET */

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


html{
    scroll-behavior:smooth;
}


body{

    font-family:'Poppins',sans-serif;

    background:#fff;

    color:#333;

    overflow-x:hidden;

}
/* CORES MSRP */

:root{

    --azul-msrp:rgb(6,30,66);

    --azul-tech:#020914;

    --dourado-msrp:rgb(217,174,31);

    --branco:#ffffff;

    --cinza:#666;

}



.container{

    width:90%;

    max-width:1200px;

    margin:auto;

}






/* =========================================
   FUNDO TECNOLÓGICO
========================================= */


.tech-background{

    position:fixed;

    inset:0;

    background:
    linear-gradient(
    120deg,
    rgb(6,30,66),
    #020914
    );

    z-index:-1;

    overflow:hidden;

}




.grid-lines{

    position:absolute;

    inset:0;

    background-image:
    linear-gradient(
    rgba(255,255,255,.05) 1px,
    transparent 1px
    ),
    linear-gradient(
    90deg,
    rgba(255,255,255,.05) 1px,
    transparent 1px
    );

    background-size:
    60px 60px;
    opacity:.35;

    animation:gridMove 20s linear infinite;

}



@keyframes gridMove{


from{

transform:translateY(0);

}


to{

transform:translateY(60px);

}


}






.light-effect{


position:absolute;

width:500px;

height:500px;

border-radius:50%;

filter:blur(120px);

opacity:.4;


}




.light-one{


background:rgb(1,151,250);

top:-200px;

right:-100px;


}



.light-two{


background:rgb(217,174,31);

bottom:-200px;

left:-100px;


}








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


.header{

    position:absolute;

    top:0;

    left:0;

    width:100%;

    padding:25px 0;

    z-index:100;


}


.header .container{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:30px;

}


.logo img{

    width:240px;

    max-width:100%;


    filter:

    drop-shadow(
    0 15px 30px rgba(0,0,0,.45)
    );


    transition:.4s;

}
}


.logo img:hover{


transform:scale(1.08);


}


.menu{

    display:flex;

    align-items:center;

    gap:40px;

}



.menu a{

    color:white;

    text-decoration:none;

    font-weight:600;

    font-size:15px;

    position:relative;

    transition:.3s;

}



.menu a:hover{


color:rgb(217,174,31);


}

.menu a::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-8px;

    width:0;

    height:2px;

    background:rgb(217,174,31);

    transition:.3s;

}


.menu a:hover::after{

    width:100%;

}



.btn-header{

    background:

    linear-gradient(
    135deg,
    rgb(217,174,31),
    #f5d76e
    );


    color:rgb(6,30,66);

    padding:15px 30px;

    border-radius:50px;


    font-weight:800;

    text-decoration:none;


    box-shadow:

    0 15px 35px rgba(217,174,31,.35);


    transition:.4s;

}


.btn-header:hover{

    transform:translateY(-5px);

    box-shadow:

    0 20px 45px rgba(217,174,31,.55);

}









/* =========================================
   HERO PREMIUM AJUSTADO
========================================= */


.hero-premium{

    min-height:100vh;
    
    padding-top:80px;

    position:relative;

    display:flex;

    align-items:center;

    overflow:hidden;

    color:white;

}




.hero-container{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:30px;

    padding-top:90px;

    min-height:100vh;

}



.hero-text{

    width:48%;

    z-index:3;

    animation:heroText 1s ease forwards;

}



.tag{

    display:inline-flex;

    align-items:center;

    gap:10px;

    padding:12px 22px;

    border-radius:40px;

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

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

    font-size:13px;

    letter-spacing:1px;

    backdrop-filter:blur(10px);

}




.hero-text h1{

    font-size:68px;

    line-height:1.05;

    font-weight:900;

    letter-spacing:-2px;

    margin:35px 0;

}



.hero-text h1 span{


    color:rgb(217,174,31);


}




.hero-text p{


    max-width:550px;

    font-size:18px;

    line-height:1.8;

    color:#ddd;


}




.hero-buttons{


    display:flex;

    gap:20px;

    margin-top:40px;


}




.btn-primary,
.btn-outline{


    padding:16px 35px;

    border-radius:50px;

    text-decoration:none;

    font-weight:700;

    transition:.4s;


}




.btn-primary{


    background:

    linear-gradient(
    135deg,
    rgb(217,174,31),
    #f5d76e
    );


    color:rgb(6,30,66);

    box-shadow:

    0 15px 35px rgba(217,174,31,.35);


}




.btn-outline{


    border:2px solid white;

    color:white;


}



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


    transform:translateY(-6px);


}







/* CAMINHÃO */


.hero-truck{

    width:52%;

    position:relative;

    display:flex;

    justify-content:center;

    align-items:center;

    animation:truckEnter 1.4s ease forwards;

    z-index:2;

}


.hero-truck img{

    width:125%;

    max-width:none;

    margin-right:-100px;


    filter:

    drop-shadow(
    0 40px 60px rgba(0,0,0,.75)
    );


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

}






/* ESTRADA */


.road-animation{


    position:absolute;

    bottom:0;

    left:0;

    width:100%;

    height:120px;

    overflow:hidden;

    z-index:1;


}




.road-animation div{


    position:absolute;

    bottom:0;

    width:200%;

    height:80px;


    background:

    linear-gradient(
    90deg,
    transparent,
    rgba(255,255,255,.15),
    transparent
    );


    animation:roadMove 5s linear infinite;


}





@keyframes truckEnter{


from{

opacity:0;

transform:translateX(150px);

}


to{

opacity:1;

transform:translateX(0);

}


}




@keyframes truckFloat{


0%,
100%{

transform:translateY(0);

}


50%{

transform:translateY(-18px);

}


}

@keyframes heroText{


from{

opacity:0;

transform:translateY(50px);

}


to{

opacity:1;

transform:translateY(0);

}


}



@keyframes roadMove{


from{

transform:translateX(-50%);

}


to{

transform:translateX(0);

}


}
/* =========================================
   DESTAQUES
========================================= */


.highlights-premium{

    background:#ffffff;

    padding:60px 0;

    position:relative;

    z-index:2;

}



.highlights-premium .container{


    display:grid;

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

    gap:20px;


}




.highlight-box{

    display:flex;

    align-items:center;

    gap:20px;

    padding:30px 25px;

    background:#fff;

    border-radius:20px;


    box-shadow:

    0 15px 40px rgba(0,0,0,.10);


    transition:.4s;

    border-bottom:3px solid transparent;

}




.highlight-box:hover{

    transform:translateY(-10px);

    border-bottom:3px solid rgb(217,174,31);

    box-shadow:

    0 25px 60px rgba(0,0,0,.15);

}



.highlight-box i{

    width:65px;

    height:65px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;


    font-size:28px;

    color:white;


    background:

    linear-gradient(
    135deg,
    rgb(6,30,66),
    rgb(1,151,250)
    );

}



.highlight-box h3{


    color:rgb(6,30,66);

    font-size:18px;

    margin-bottom:5px;


}



.highlight-box p{


    color:#666;

    font-size:14px;


}









/* =========================================
   EMPRESA
========================================= */


.company-premium{

    padding:120px 0;

    background:#fff;

    position:relative;

    overflow:hidden;

}




.company-premium .container{


    display:flex;

    align-items:center;

    gap:70px;


}





.company-image{


    width:50%;

    position:relative;


}




.company-image img{

    width:100%;

    height:420px;

    object-fit:cover;

    border-radius:25px;

    position:relative;

    z-index:2;

    box-shadow:

    0 30px 60px rgba(0,0,0,.18);

}





.image-frame{

    position:absolute;

    width:100%;

    height:100%;

    border:3px solid rgb(217,174,31);

    border-radius:25px;

    top:25px;

    left:25px;

    opacity:.8;

}






.company-text{


    width:50%;


}



.section-tag{


    color:rgb(217,174,31);

    font-weight:800;

    letter-spacing:3px;

    font-size:14px;


}




.company-text h2{

    color:rgb(6,30,66);

    font-size:45px;

    line-height:1.2;

    margin:20px 0;

    font-weight:800;

}



.company-text p{


    color:#666;

    font-size:17px;

    line-height:1.8;


}






.company-items{


    margin-top:35px;

    display:flex;

    flex-direction:column;

    gap:18px;


}




.company-items div{

    display:flex;

    align-items:center;

    gap:18px;

    font-weight:700;

    color:rgb(6,30,66);

    padding:15px;

    border-radius:12px;

    background:#f7f8fa;

}


.company-items i{


    width:45px;

    height:45px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    background:rgb(6,30,66);

    color:white;


}











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


.numbers-premium{

    background:

    linear-gradient(
    135deg,
    rgb(6,30,66),
    #020914
    );


    padding:100px 0;


    position:relative;

    overflow:hidden;


}
.numbers-premium::before{

    content:"";

    position:absolute;

    width:400px;

    height:400px;

    background:rgb(1,151,250);

    filter:blur(150px);

    opacity:.25;

    top:-150px;

    left:-100px;

}





.numbers-premium .container{


    display:grid;

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

    gap:30px;


}





.number-box{

    text-align:center;

    color:white;

    padding:45px 30px;

    border-radius:25px;


    background:

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


    backdrop-filter:blur(15px);


    border:

    1px solid rgba(255,255,255,.15);


    transition:.4s;


}





.number-box:hover{

    transform:translateY(-12px);


    box-shadow:

    0 25px 60px rgba(0,0,0,.35);


}





.number-box strong{

    display:block;

    font-size:60px;

    font-weight:900;

    color:rgb(217,174,31);

    margin-bottom:15px;


    text-shadow:

    0 0 10px rgba(217,174,31,.5),
    0 0 30px rgba(217,174,31,.25);


    animation:numberGlow 3s infinite;

}



.number-box span{

    font-size:17px;

    color:#eee;

    font-weight:500;

}
/* =========================================
   SERVIÇOS PREMIUM
========================================= */


.services-premium{

    padding:120px 0;

    background:#f7f8fa;

    position:relative;

}



.section-header{


    text-align:center;

    max-width:750px;

    margin:auto;


}



.section-header span{


    color:rgb(217,174,31);

    font-weight:800;

    letter-spacing:3px;

    font-size:14px;


}



.section-header h2{

    margin:20px 0;

    color:rgb(6,30,66);

    font-size:46px;

    font-weight:800;

}



.section-header p{


    color:#666;

    font-size:17px;


}






.services-cards{


    margin-top:60px;

    display:grid;

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

    gap:25px;


}





.service-box{

    background:white;

    padding:45px 35px;

    border-radius:25px;


    box-shadow:

    0 20px 50px rgba(0,0,0,.08);


    transition:.4s;


    position:relative;


    overflow:hidden;


}





.service-box::before{

    content:"";

    position:absolute;

    height:6px;

    width:100%;


    background:

    linear-gradient(
    90deg,
    rgb(217,174,31),
    rgb(1,151,250)
    );


    top:0;

    left:0;


    transform:scaleX(0);

    transform-origin:left;


    transition:.5s;


}



.service-box:hover::before{


    transform:scaleX(1);


}




.service-box:hover{

    transform:translateY(-15px);


    box-shadow:

    0 30px 70px rgba(0,0,0,.15);


}





.service-icon{

    width:85px;

    height:85px;


    border-radius:50%;


    display:flex;

    justify-content:center;

    align-items:center;


    background:

    linear-gradient(
    135deg,
    rgb(6,30,66),
    rgb(1,151,250)
    );


    color:white;


    font-size:35px;


    margin-bottom:30px;


    box-shadow:

    0 15px 30px rgba(1,151,250,.25);


}




.service-box h3{

    color:rgb(6,30,66);

    font-size:24px;

    font-weight:800;

    margin-bottom:15px;


}




.service-box p{


    color:#666;

    line-height:1.7;


}




.service-box a{


    margin-top:25px;

    display:flex;

    gap:10px;

    align-items:center;

    text-decoration:none;

    color:rgb(6,30,66);

    font-weight:700;


}









/* =========================================
   FROTA PREMIUM
========================================= */


.fleet-premium{

    padding:130px 0;


    background:

    linear-gradient(
    120deg,
    rgb(6,30,66),
    #020914
    );


    color:white;


    position:relative;

    overflow:hidden;


}
.fleet-premium::before{

    content:"";

    position:absolute;


    width:450px;

    height:450px;


    background:rgb(1,151,250);


    filter:blur(160px);


    opacity:.25;


    right:-150px;

    top:-100px;


}




.fleet-premium .container{


    display:flex;

    align-items:center;

    gap:70px;


}




.fleet-text{


    width:50%;


}



.fleet-text h2{

    font-size:46px;

    line-height:1.2;

    font-weight:800;

    margin:20px 0;


}



.fleet-text p{

    color:#ddd;

    line-height:1.9;

    font-size:18px;

    max-width:520px;


}




.fleet-features{


    margin-top:40px;

    display:grid;

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

    gap:20px;


}




.fleet-item{

    display:flex;

    align-items:center;


    gap:15px;


    background:

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


    padding:22px;


    border-radius:15px;


    border:

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


    transition:.4s;


}
.fleet-item:hover{

    transform:translateX(10px);


    background:

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


}


.fleet-item i{

    color:rgb(217,174,31);

    font-size:30px;


}





.fleet-image{


    width:50%;

    position:relative;


}




.fleet-image img{

    width:100%;


    border-radius:25px;


    position:relative;


    z-index:2;


    box-shadow:

    0 30px 70px rgba(0,0,0,.45);


}



.fleet-glow{

    position:absolute;


    width:400px;

    height:400px;


    background:rgb(217,174,31);


    filter:blur(120px);


    opacity:.35;


    top:50px;

    left:50px;


}








/* =========================================
   ÁREA NACIONAL
========================================= */


.coverage-premium{

    padding:120px 0;

    background:#fff;

    position:relative;

}




.coverage-box{

    text-align:center;


    background:

    linear-gradient(
    135deg,
    rgb(6,30,66),
    #020914
    );


    color:white;


    padding:90px 50px;


    border-radius:30px;


    box-shadow:

    0 30px 80px rgba(0,0,0,.20);


    position:relative;


    overflow:hidden;


}
.coverage-box::before{

    content:"";

    position:absolute;


    width:350px;

    height:350px;


    background:rgb(1,151,250);


    filter:blur(140px);


    opacity:.25;


    top:-150px;

    right:-100px;


}





.coverage-box i{

    font-size:70px;

    color:rgb(217,174,31);

    margin-bottom:30px;


}



.coverage-box h2{

    font-size:45px;

    font-weight:800;

    margin-bottom:25px;


}



.coverage-box p{


    color:#ddd;

    font-size:18px;

    max-width:700px;

    margin:auto;


}




.coverage-stats{

    margin-top:55px;


    display:flex;


    justify-content:center;


    gap:90px;


}


.coverage-stats strong{

    display:block;

    font-size:50px;

    font-weight:900;

    color:rgb(217,174,31);


}



.coverage-stats span{


    color:white;


}
/* =========================================
   CTA FINAL
========================================= */


.cta-premium{

    padding:120px 0;


    background:

    linear-gradient(
    135deg,
    rgb(217,174,31),
    #b58b00
    );


    position:relative;


}


.cta-content{


    text-align:center;

    color:rgb(6,30,66);


}



.cta-content span{


    font-weight:800;

    letter-spacing:3px;

    font-size:14px;


}




.cta-content h2{

    font-size:50px;

    font-weight:900;

}



.cta-content p{


    font-size:18px;

    max-width:700px;

    margin:auto;

    margin-bottom:35px;


}




.cta-button{

    display:inline-flex;

    align-items:center;

    gap:15px;


    background:rgb(6,30,66);


    color:white;


    padding:20px 45px;


    border-radius:50px;


    text-decoration:none;


    font-size:18px;


    font-weight:800;


    transition:.4s;


}



.cta-button:hover{

    transform:translateY(-8px);


    box-shadow:

    0 20px 50px rgba(0,0,0,.35);


}








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


.whatsapp-float{

    position:fixed;


    right:35px;


    bottom:35px;


    width:70px;


    height:70px;


    border-radius:50%;


    background:#25d366;


    color:white;


    display:flex;


    align-items:center;


    justify-content:center;


    font-size:38px;


    z-index:9999;


    text-decoration:none;


    box-shadow:

    0 15px 40px rgba(0,0,0,.35);


    animation:pulseWhats 2s infinite;


}
.whatsapp-float::before{

    content:"";


    position:absolute;


    inset:-10px;


    border-radius:50%;


    border:

    2px solid #25d366;


    animation:ring 2s infinite;


}





@keyframes pulseWhats{


0%{

transform:scale(1);

}


50%{

transform:scale(1.1);

}


100%{

transform:scale(1);

}


}











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


.footer-premium{

    background:

    linear-gradient(
    135deg,
    #020914,
    rgb(6,30,66)
    );


    color:white;


    padding:90px 0 25px;


    position:relative;


}




.footer-content{


    display:grid;

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

    gap:50px;


}





.footer-brand img{

    width:200px;


    margin-bottom:25px;


    filter:

    drop-shadow(
    0 15px 30px rgba(0,0,0,.4)
    );


}



.footer-brand p{


    color:#aaa;

    line-height:1.7;


}





.footer-links h3,
.footer-contact h3{

    color:rgb(217,174,31);


    font-size:20px;


    font-weight:800;


    margin-bottom:25px;


}




.footer-links a{

    display:block;


    color:#ddd;


    text-decoration:none;


    margin-bottom:15px;


    transition:.3s;


}




.footer-links a:hover{

    color:rgb(217,174,31);


    transform:translateX(8px);


}




.footer-contact p{


    color:#ddd;

    margin-bottom:15px;


}



.footer-contact i{


    color:rgb(217,174,31);

    margin-right:10px;


}





.footer-bottom{

    border-top:

    1px solid rgba(255,255,255,.15);


    margin-top:60px;


    padding-top:25px;


    text-align:center;


    color:#aaa;


}








/* =========================================
   ANIMAÇÕES DE ENTRADA
========================================= */







@keyframes fadeUp{


from{

opacity:0;

transform:translateY(40px);

}


to{

opacity:1;

transform:translateY(0);

}


}
/* ANIMAÇÃO SCROLL */





.show{


opacity:1;


transform:translateY(0);


}
/* =====================================
   PARTICULAS TECNOLÓGICAS
===================================== */


.particles{


position:absolute;

inset:0;

overflow:hidden;


}



.particle{

position:absolute;

bottom:-20px;

width:3px;

height:3px;

background:rgb(217,174,31);

border-radius:50%;

opacity:.6;

animation:particleMove linear infinite;

animation-duration:12s;

}



@keyframes particleMove{


from{


transform:
translateY(0)
scale(1);


opacity:0;


}


20%{


opacity:1;


}


100%{


transform:
translateY(-110vh)
scale(1.8);


opacity:0;


}


}








/* =====================================
   ESTRADA ANIMADA
===================================== */


.road-animation{


position:absolute;


bottom:0;

left:0;

width:100%;

height:120px;


overflow:hidden;


}




.road-animation div{


position:absolute;


bottom:0;


width:200%;


height:80px;


background:

linear-gradient(
90deg,
transparent 0%,
rgba(255,255,255,.08) 50%,
transparent 100%
);


animation:roadMove 5s linear infinite;


}

/* =====================================
   BRILHO NO CAMINHÃO
===================================== */







@keyframes truckEntrance{


from{


opacity:0;

transform:
translateX(120px);


}



to{


opacity:1;

transform:
translateX(0);


}



}



@keyframes glowPulse{


0%,100%{


opacity:.3;


}


50%{


opacity:.7;


}



}

.service-box,
.highlight-box,
.number-box{


backdrop-filter:blur(10px);


}



.service-box:hover,
.highlight-box:hover{


box-shadow:

0 25px 60px rgba(0,0,0,.18);


}

.whatsapp-float::before{


content:"";


position:absolute;


inset:-8px;


border-radius:50%;


border:2px solid #25d366;


animation:ring 2s infinite;


}



@keyframes ring{


0%{

transform:scale(.8);

opacity:1;

}



100%{

transform:scale(1.5);

opacity:0;

}


}

/* CORREÇÃO DE CAMADAS */

.hero,
.coverage-premium,
.company-premium,
.services-premium,
.fleet-premium,
.cta-premium,
.footer-premium{

    position:relative;

    z-index:2;

}

img{

    max-width:100%;

    display:block;

}
a{

    -webkit-tap-highlight-color:transparent;

}

/* =========================================
   FUNDO PREMIUM MSRP
========================================= */


#premium-background{

position:absolute;

inset:0;

overflow:hidden;

z-index:-1;


background:

linear-gradient(
135deg,
rgb(6,30,66),
rgb(2,9,20)
);


}




.bg-layer{

position:absolute;

inset:0;


}



/* brilho azul */

.layer1{

background:

radial-gradient(
circle at 80% 20%,
rgba(1,151,250,.35),
transparent 40%
);


}



/* brilho dourado */

.layer2{


background:

radial-gradient(
circle at 20% 80%,
rgba(217,174,31,.25),
transparent 35%
);


}
/* GRID TECNOLÓGICO */


.layer3{


background-image:

linear-gradient(
rgba(255,255,255,.05) 1px,
transparent 1px
),

linear-gradient(
90deg,
rgba(255,255,255,.05) 1px,
transparent 1px
);



background-size:

70px 70px;


opacity:.25;


animation:gridMove 25s linear infinite;


}



@keyframes gridMove{


from{

transform:translateY(0);

}


to{

transform:translateY(70px);

}


}
/* LUZES EM MOVIMENTO */


.lights{


background:

linear-gradient(
120deg,
transparent 30%,
rgba(217,174,31,.25),
transparent 70%
);



transform:

translateX(-100%);


animation:

lightMove 8s infinite;


}



@keyframes lightMove{


0%{

transform:translateX(-100%);

}



50%{

transform:translateX(100%);

}



100%{

transform:translateX(100%);

}


}
/* ESTRADA */


.road-background{


position:absolute;

bottom:0;

left:0;

width:100%;

height:150px;


background:

linear-gradient(
transparent,
rgba(0,0,0,.7)
);


z-index:1;


}



.road{


position:absolute;

bottom:0;

width:200%;

height:80px;


background:

repeating-linear-gradient(
90deg,
transparent 0,
transparent 80px,
rgba(255,255,255,.5) 80px,
rgba(255,255,255,.5) 140px
);


animation:

roadMove 5s linear infinite;


}


/* BRILHO CAMINHÃO */


.truck-glow{


position:absolute;


width:420px;

height:420px;


background:

rgb(217,174,31);


filter:

blur(120px);


opacity:.55;


top:15%;

left:25%;


animation:

truckGlow 3s infinite;


}



@keyframes truckGlow{


0%,100%{

opacity:.3;

}



50%{

opacity:.7;


}


}
/* PARTICULAS */


.particles::before{


content:"";


position:absolute;


inset:0;


background-image:

radial-gradient(
white 1px,
transparent 1px
);



background-size:

80px 80px;


opacity:.15;


animation:

particlesMove 20s linear infinite;


}



@keyframes particlesMove{


from{

transform:translateY(0);

}



to{

transform:translateY(-300px);

}


}

/* =========================================
   ANIMAÇÕES PREMIUM MSRP
========================================= */


/* estado inicial */

.reveal{

    opacity:0;

    transform:translateY(50px);

    transition:
    opacity .8s ease,
    transform .8s ease;

}



.reveal.active{


    opacity:1;

    transform:translateY(0);


}



/* entrada lateral esquerda */


.slide-left{


    opacity:0;

    transform:translateX(-80px);

    transition:1s ease;


}


.slide-left.active{


    opacity:1;

    transform:translateX(0);


}





/* entrada lateral direita */


.slide-right{


    opacity:0;

    transform:translateX(80px);

    transition:1s ease;


}



.slide-right.active{


    opacity:1;

    transform:translateX(0);


}






/* CAMINHÃO */


.truck-scene{


animation:

truckEnter 1.5s ease forwards;


}



@keyframes truckEnter{


from{


opacity:0;

transform:translateX(150px);


}



to{


opacity:1;

transform:translateX(0);


}


}






/* BOTÕES */


.btn-primary,
.cta-button,
.btn-whatsapp{


position:relative;

overflow:hidden;


}



.btn-primary::before,
.cta-button::before,
.btn-header::before{


content:"";


position:absolute;


top:0;

left:-120%;


width:80%;


height:100%;


background:

linear-gradient(

120deg,

transparent,

rgba(255,255,255,.7),

transparent

);


transform:skewX(-25deg);


transition:.7s;


}



.btn-primary:hover::before,
.cta-button:hover::before,
.btn-header:hover::before{


left:150%;


}



.btn-primary:hover::before,
.cta-button:hover::before,
.btn-whatsapp:hover::before{


left:100%;


}


/* =====================================
   REFLEXO PREMIUM CAMINHÃO
===================================== */


.hero-truck::after{

    content:"";

    position:absolute;

    width:120px;

    height:500px;

    background:

    linear-gradient(
    90deg,
    transparent,
    rgba(255,255,255,.45),
    transparent
    );


    transform:rotate(25deg);

    left:-200px;

    top:-100px;


    animation:truckShine 6s infinite;


}


@keyframes truckShine{


0%{

left:-250px;

opacity:0;

}


20%{

opacity:1;

}


40%{

left:450px;

opacity:0;

}


100%{

left:450px;

opacity:0;

}


}
/* =====================================
   BRILHO NOS NÚMEROS
===================================== */


@keyframes numberGlow{


0%{

text-shadow:

0 0 10px rgba(217,174,31,.3),
0 0 25px rgba(217,174,31,.15);

}



50%{


text-shadow:

0 0 20px rgba(217,174,31,.8),
0 0 45px rgba(217,174,31,.35);


}



100%{


text-shadow:

0 0 10px rgba(217,174,31,.3),
0 0 25px rgba(217,174,31,.15);


}


}
/* =====================================
   REVEAL PREMIUM
===================================== */


.reveal-premium{

    opacity:0;

    transform:translateY(60px);

    transition:

    opacity .9s ease,

    transform .9s ease;

}



.reveal-premium.active{


    opacity:1;

    transform:translateY(0);


}

/* =====================================
   CARDS PREMIUM
===================================== */


.service-box,
.highlight-box,
.number-box{


    transform-style:preserve-3d;


}



.service-box:hover,
.highlight-box:hover,
.number-box:hover{


    transform:

    translateY(-12px)

    scale(1.02);


}
/* =====================================
   FUNDO VIVO
===================================== */


.tech-background{

    animation:

    backgroundMove 20s infinite alternate;

}



@keyframes backgroundMove{


from{

transform:scale(1);

}


to{

transform:scale(1.08);

}


}

/* =====================================
   PARTE 14 - HERO PREMIUM FINAL
===================================== */


.hero-premium::after{


content:"";


position:absolute;


bottom:0;

left:0;


width:100%;

height:180px;


background:

linear-gradient(
transparent,
rgba(0,0,0,.45)
);


z-index:1;


pointer-events:none;


}




.hero-truck{


perspective:1000px;


}




.hero-truck img{


transition:.6s ease;


}




.hero-truck:hover img{


transform:

scale(1.05)

translateY(-10px);


}




/* reflexo passando no caminhão */


.hero-truck::after{


content:"";


position:absolute;


top:0;

left:-150%;


width:80%;

height:100%;


background:

linear-gradient(
120deg,
transparent,
rgba(255,255,255,.35),
transparent
);



transform:skewX(-20deg);


animation:

truckLight 6s infinite;


}



@keyframes truckLight{


0%{


left:-150%;


}


40%{


left:150%;


}


100%{


left:150%;


}


}





/* TAG SUPERIOR */


.tag{


animation:

tagPulse 4s infinite;


}



@keyframes tagPulse{


0%,100%{


box-shadow:

0 0 0 rgba(217,174,31,0);


}



50%{


box-shadow:

0 0 30px rgba(217,174,31,.25);


}



}




/* TITULO */


.hero-text h1{


animation:

titleMove 1.2s ease;


}



@keyframes titleMove{


from{


opacity:0;

transform:
translateY(40px);


}


to{


opacity:1;

transform:
translateY(0);


}


}
/* =====================================
   CORREÇÃO ANIMAÇÕES SEÇÕES FINAIS
===================================== */


.coverage-box,
.cta-content,
.footer-content,
.footer-bottom{


    opacity:0;

    transform:translateY(50px);

    transition:1s ease;


}


.coverage-box.show,
.cta-content.show,
.footer-content.show,
.footer-bottom.show{


    opacity:1;

    transform:translateY(0);


}
/* =====================================
   ANIMAÇÃO SEÇÕES FINAIS
===================================== */


.coverage-box,
.cta-content,
.footer-content,
.footer-bottom{


    opacity:0;

    transform:translateY(50px);

    transition:1s ease;


}



.coverage-box.show,
.cta-content.show,
.footer-content.show,
.footer-bottom.show{


    opacity:1;

    transform:translateY(0);


}
/* =====================================
   ANIMAÇÃO LATERAL PREMIUM
===================================== */


.service-box{


    opacity:0;

    transform:translateY(60px);

    transition:
    opacity .9s ease,
    transform .9s ease;


}



/* alternando cards */


.service-box:nth-child(1){

    transform:translateX(-80px);

}



.service-box:nth-child(2){

    transform:translateY(80px);

}



.service-box:nth-child(3){

    transform:translateX(80px);

}



.service-box:nth-child(4){

    transform:translateY(80px);

}




.service-box.show{


    opacity:1;

    transform:translate(0);


}



/* FROTA */


.fleet-text{


    opacity:0;

    transform:translateX(-100px);

    transition:1s ease;


}



.fleet-image{


    opacity:0;

    transform:translateX(100px);

    transition:1s ease;


}




.fleet-text.show,
.fleet-image.show{


    opacity:1;

    transform:translateX(0);


}
.service-box:nth-child(2){
transition-delay:.15s;
}


.service-box:nth-child(3){
transition-delay:.30s;
}


.service-box:nth-child(4){
transition-delay:.45s;
}

/* =========================================
   AJUSTE HEADER PREMIUM FINAL
========================================= */

.header{

    position:fixed;

    top:0;
    left:0;

    width:100%;

    padding:20px 0;

    z-index:9999;

    background:transparent;

    transition:
        background .35s ease,
        padding .35s ease,
        box-shadow .35s ease;

}



/* HEADER AO ROLAR */

.header.scrolled{

    padding:10px 0;

    background:rgba(6,30,66,.96);

    backdrop-filter:blur(12px);

    -webkit-backdrop-filter:blur(12px);

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

}



.header .container{

    display:flex;

    align-items:center;

    justify-content:space-between;

    min-height:90px;

    transition:all .35s ease;

}



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

.logo{

    display:flex;

    align-items:center;

    flex-shrink:0;

}



.logo img{

    width:190px;

    max-width:190px;

    transition:all .35s ease;

}



.header.scrolled .logo img{

    width:165px;

    max-width:165px;

}



/*=====================================
                MENU
======================================*/

.menu{

    display:flex;

    align-items:center;

    gap:38px;

    margin-left:auto;

    margin-right:45px;

    transition:all .35s ease;

}



.header.scrolled .menu{

    gap:28px;

}



.menu a{

    font-size:15px;

    font-weight:600;

    color:white;

    white-space:nowrap;

    transition:all .35s ease;

}



.header.scrolled .menu a{

    font-size:14px;

}


/* BOTÃO ORÇAMENTO */


.btn-header{

    display:flex;

    align-items:center;

    gap:8px;

    white-space:nowrap;

}



/* AJUSTA HERO PARA NÃO COLIDIR COM HEADER */


.hero-container{

    padding-top:90px;

}

/*=====================================
        COOKIE BANNER
======================================*/

.cookie-banner{

    position:fixed;

    left:25px;
    right:25px;
    bottom:25px;

    max-width:980px;

    margin:auto;

    background:#fff;

    border-radius:14px;

    border-top:4px solid rgb(217,174,31);

    box-shadow:0 18px 45px rgba(0,0,0,.12);

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:30px;

    padding:18px 24px;

    z-index:99999;

    opacity:0;

    visibility:hidden;

    transform:translateY(120px);

    transition:.45s ease;

}

.cookie-banner.show{

    opacity:1;

    visibility:visible;

    transform:translateY(0);

}

.cookie-content{

    display:flex;

    align-items:center;

    gap:16px;

    flex:1;

}

.cookie-icon{

    color:rgb(217,174,31);

    font-size:24px;

    flex-shrink:0;

}

.cookie-content p{

    margin:0;

    color:#555;

    font-size:14px;

    line-height:1.6;

}

.cookie-content a{

    color:rgb(6,30,66);

    font-weight:600;

    text-decoration:none;

}

.cookie-content a:hover{

    color:rgb(217,174,31);

}

.cookie-ok{

    background:rgb(217,174,31);

    color:#fff;

    border:none;

    padding:11px 28px;

    border-radius:40px;

    font-weight:600;

    cursor:pointer;

    transition:.3s;

    flex-shrink:0;

}

.cookie-ok:hover{

    transform:translateY(-2px);

    box-shadow:0 8px 20px rgba(217,174,31,.35);

}

@media(max-width:768px){

.cookie-banner{

    left:12px;

    right:12px;

    bottom:12px;

    padding:18px;

    flex-direction:column;

    align-items:flex-start;

    gap:18px;

}

.cookie-content{

    align-items:flex-start;

}

.cookie-ok{

    width:100%;

}

}

/* ===============================
   FOOTER MSRP TRANSPORTES
================================ */

.footer-msrp{

    background:
    linear-gradient(
        135deg,
        rgb(6,30,66),
        rgb(1,40,80)
    );

    color:white;

    padding:70px 8% 20px;

}



.footer-container{

    display:grid;

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

    gap:40px;

    max-width:1300px;

    margin:auto;

}



.footer-column h3{

    color:rgb(217,174,31);

    font-size:20px;

    margin-bottom:20px;

}



.footer-column p{

    color:#ddd;

    line-height:1.7;

    font-size:15px;

}



.footer-logo{

    width:170px;

    margin-bottom:20px;

}



.footer-about p{

    max-width:280px;

}



.footer-column ul{

    list-style:none;

    padding:0;

}



.footer-column li{

    margin-bottom:12px;

    color:#ddd;

}



.footer-column a{

    color:#ddd;

    text-decoration:none;

    transition:.3s;

}



.footer-column a:hover{

    color:rgb(217,174,31);

    padding-left:5px;

}



.footer-column i{

    color:rgb(1,151,250);

    margin-right:8px;

}



.footer-social{

    margin-top:20px;

    display:flex;

    gap:15px;

}



.footer-social a{

    width:40px;

    height:40px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

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

    font-size:18px;

}



.footer-social a:hover{

    background:rgb(217,174,31);

    color:white;

}




.footer-bottom{

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

    margin-top:50px;

    padding-top:20px;

    display:flex;

    justify-content:space-between;

    flex-wrap:wrap;

    font-size:14px;

    color:#ccc;

}




/* MOBILE */

@media(max-width:900px){


.footer-container{

    grid-template-columns:1fr;

    text-align:center;

}


.footer-about p{

    margin:auto;

}


.footer-social{

    justify-content:center;

}


.footer-bottom{

    flex-direction:column;

    text-align:center;

    gap:10px;

}


}