/*********************************************************/
/*CSS MODE - MRPNET 2025
/*********************************************************/
/*CORES*/
:root {
  --cor_1: #fc9700;
  --cor_2: #0164c9;
}
/*********************************************************/
.botao {padding: 10px 30px; color: #fff; background-color:transparent; border-radius: 50px; font-weight: 600; text-transform: uppercase; cursor: pointer; font-size: 2em; border: 2px solid #fff;}
.botao:hover {background-color: var(--cor_2); border: 2px solid var(--cor_2); transform: scale(1.08); box-shadow: 0 8px 20px rgba(0,0,0,0.2); }

.botao2 {padding: 10px 30px; color: #000; background-color:transparent; border-radius: 50px; font-weight: 600; text-transform: uppercase; cursor: pointer; font-size: 2em; border: 2px solid #000; transition: all 0.1s ease;}
.botao2:hover { background-color: var(--cor_1); border-color: var(--cor_1); color: #fff; transform: scale(1.08); box-shadow: 0 8px 20px rgba(0,0,0,0.2); }

body {background-color: #000;}

p {color: #fff; line-height: 30px;}
/*********************************************************/
/*HEADER DO SITE*/
header {width: 100%; position: absolute; padding-top: 60px; z-index: 1000;}
header .content {display: flex; align-items: center; justify-content: space-between;}
header .logo {width: 145px; height: 100px; position: relative; left: 120px;}
header .social {position: absolute; right: 40px; top: 60px;}
header .social li {color: #fff; font-size: 2em; display: inline-block; margin: 0 10px;}
header .social li:hover {color: var(--cor_1);}
/*********************************************************/
.home {width: 100%; min-height: 100%; text-align: center; position: relative;}
.home h1 {text-transform: uppercase; font-size: 8em; color: #fff; font-weight: 400; padding-top: 20%; width: 50%; margin: auto; line-height: 95px;}
.home h1 span{font-weight: 900; font-size: 0.6em;}
.home h2 {text-align: left; text-transform: uppercase; font-size: 1.6em; font-weight: 800; color: #fff;}
.home p {text-align: left; color: #fff; line-height: 25px;}
.home .smile {width: 130px; height: 70px; margin: 20px auto 40px auto; background-image: url(../images/smile.png);}

.home .quadro {width: 60%; margin: 0 auto; position: relative; background-image: url(../images/bg1.webp); padding: 40px 60px; bottom: -60px; display: table; margin-top: 40px;}
.home .seta {width: 80px; height: 80px; margin: 0 auto; background-image: url(../images/seta.webp); position: relative; bottom: -130px;}
/*********************************************************/
.cases { padding-top: 160px; text-align: center; }
.cases h1 {color: #fff; font-size: 3em; font-weight: 900; text-transform: uppercase; margin-bottom: 10px;}
.cards-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; margin-top: 20px; }
.card { position: relative; overflow: hidden; background: #0f1214; box-shadow: 0 10px 18px rgba(0,0,0,0.12); transition: box-shadow .35s ease, transform .35s ease; }
.card-media img { width: 100%; height: 480px; object-fit: cover; transition: transform 0.6s cubic-bezier(.2,.7,.2,1); will-change: transform; display: block; }
.card-overlay { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; padding: 16px; background: linear-gradient(180deg, rgba(0,0,0,0) 10%, rgba(0,0,0,.65) 80%); opacity: 0; transform: translateY(10px); transition: opacity .35s ease, transform .35s ease; color: #fff; }
.card h3 { margin: 0; font-size: 1.1rem; font-weight: 600; letter-spacing: .2px; }
.card-cta { font-size: .85rem; color: var(--cor_2); opacity: .95; }
.card:hover .card-media img { transform: scale(1.08); }
.card:hover .card-overlay { opacity: 1; transform: translateY(0); }
.card:hover { box-shadow: 0 14px 22px rgba(0,0,0,0.18); transform: translateY(-2px); }
.cards-empty { text-align: center; color: #666; }
/*********************************************************/
.videos { padding-top: 80px;}
.videos h1 {color: #fff; font-size: 3em; font-weight: 900; text-transform: uppercase; margin-bottom: 10px; text-align: center;}
.videos p {text-align: center;}
/*********************************************************/
.solucoes {width: 100%; display: flex; margin-top: -30px; justify-content: center; align-items: center;}
.solucoes h2 {font-size: 3em; text-transform: uppercase; font-weight: 700; margin-bottom: 10px;}
.solucoes p {color: #000; font-size: 1.1em;}
.solucoes .esquerda {width: 50%; text-align: center;}
.solucoes .direita {width: 50%; background-color: #fff; min-height: 600px; padding: 80px;}
/*********************************************************/
.lets-job {width: 100%; display: flex; justify-content: center; align-items: center;}
.lets-job h1 {font-size: 3em; text-transform: uppercase; font-weight: 900; margin-bottom: 40px; color: #fff;}
.lets-job p {color: #fff; font-size: 1.1em;}

.lets-job .esquerda {width: 50%; background-color: #2c2a2a; padding: 200px 10% 0 10%; min-height: 950px;}
.lets-job .direita {width: 50%; background-position: center center; min-height: 950px;}
/*********************************************************/
.contato {width: 100%; display: table; text-align: center; padding: 60px 0; background-color: #fff;}
.contato h1 {font-size: 3em; font-weight: 900; margin-bottom: 40px; color: #000;}
.contato p {color: #000; font-size: 1.1em;}
/*********************************************************/
.redes {width: 100%; display: table; text-align: center; padding: 60px 0;}

.social li {font-size: 3em; font-weight: 900; display: inline-block; color: #fff; margin: 0 15px;}
.social a:hover li {color: var(--cor_1);}
/*********************************************************/
footer {width: 100%; padding-top: 10px;}
footer .content {display: flex; align-items: center; justify-content: space-between;}
footer .logo {width: 380px; height: 120px; }
/*********************************************************/
.fim {width: 100%; padding: 20px 0; text-align: center;}
.fim .content {display: inline-block !important;}
.fim p {font-size: 0.8em; color: #fff;}
.fim a {color: #fff;}
.fim a:hover {color: var(--cor_1);}
/*********************************************************/
.tela-1 {width: 100%; display: table; padding: 15% 0 80px 0;}
.tela-1 h1 {font-size: 3em; text-transform: uppercase; font-weight: 900; margin-bottom: 40px; color: #fff;}
.tela-1 p {color: #fff; font-size: 1.1em;}
/*********************************************************/
.tela-2 .esquerda {width: 50%; min-height: 950px; background-position: center center;}
.tela-2 .direita {width: 50%; min-height: 950px; background-position: center center;}
/*********************************************************/
.tela-3 {width: 100%; display: table; text-align: center; padding: 60px 0; background-color: #fff;}
.tela-3 h1 {font-size: 3em; font-weight: 900; margin-bottom: 40px; color: #000;}
.tela-3 p {color: #000; font-size: 1.1em;}
/*********************************************************/
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .6s ease, transform .6s cubic-bezier(.2,.7,.2,1); will-change: transform, opacity; }
.reveal.in-view { opacity: 1; transform: translateY(0); }
.reveal-left { transform: translateX(-24px); }
.reveal-left.in-view { transform: translateX(0); }
.reveal-right { transform: translateX(24px); }
.reveal-right.in-view { transform: translateX(0); }
.reveal-scale { transform: scale(.96); }
.reveal-scale.in-view { transform: scale(1); }
[data-parallax], .parallax { will-change: transform; transition: transform .12s linear; }
.cards-grid .card { transition-delay: calc(var(--stagger, 0) * 60ms); }
.cards-grid .card:not(.in-view) { opacity: 0; transform: translateY(12px); } 
.cards-grid .card.in-view { opacity: 1; transform: translateY(0); }
.card:hover .card-media img { transform: scale(1.08); }
.card:hover .card-overlay { opacity: 1; transform: translateY(0); }
.card:hover { box-shadow: 0 14px 22px rgba(0,0,0,0.18); transform: translateY(-2px); }
.cards-empty { text-align: center; color: #666; }
/*********************************************************/
.videos { padding: 80px 10% 0 10%}
.videos h1 {color: #fff; font-size: 3em; font-weight: 900; text-transform: uppercase; margin-bottom: 10px; text-align: center;}
.videos p {text-align: center;}
/*********************************************************/
.solucoes {width: 100%; display: flex; margin-top: -30px; justify-content: center; align-items: center;}
.solucoes h2 {font-size: 3em; text-transform: uppercase; font-weight: 700; margin-bottom: 10px;}
.solucoes p {color: #000; font-size: 1.1em;}
.solucoes .esquerda {width: 50%; text-align: center;}
.solucoes .direita {width: 50%; background-color: #fff; min-height: 600px; padding: 80px;}
/*********************************************************/
.lets-job {width: 100%; display: flex; justify-content: center; align-items: center;}
.lets-job h1 {font-size: 3em; text-transform: uppercase; font-weight: 900; margin-bottom: 40px; color: #fff;}
.lets-job p {color: #fff; font-size: 1.1em;}

.lets-job .esquerda {width: 50%; background-color: #2c2a2a; padding: 200px 10%; min-height: 950px;}
.lets-job .direita {width: 50%; background-position: center center; min-height: 950px;}
/*********************************************************/
.contato {width: 100%; display: table; text-align: center; padding: 60px 0; background-color: #fff;}
.contato h1 {font-size: 3em; font-weight: 900; margin-bottom: 40px; color: #000;}
.contato p {color: #000; font-size: 1.1em;}
/*********************************************************/
.redes {width: 100%; display: table; text-align: center; padding: 60px 0;}

.social li {font-size: 3em; font-weight: 900; display: inline-block; color: #fff; margin: 0 15px;}
.social a:hover li {color: var(--cor_1);}
/*********************************************************/
footer {width: 100%; padding-top: 10px;}
footer .content {display: flex; align-items: center; justify-content: space-between;}
footer .logo {width: 380px; height: 120px; }
/*********************************************************/
.fim {width: 100%; padding: 20px 0; text-align: center;}
.fim .content {display: inline-block !important;}
.fim p {font-size: 0.8em; color: #fff;}
.fim a {color: #fff;}
.fim a:hover {color: var(--cor_1);}
/*********************************************************/
.tela-1 {width: 100%; display: table; padding: 15% 0 80px 0;}
.tela-1 h1 {font-size: 3em; text-transform: uppercase; font-weight: 900; margin-bottom: 40px; color: #fff;}
.tela-1 p {color: #fff; font-size: 1.1em;}
/*********************************************************/
.tela-2 .esquerda {width: 50%; min-height: 950px;}
.tela-2 .direita {width: 50%; min-height: 950px;}
/*********************************************************/
.tela-3 {width: 100%; display: table; text-align: center; padding: 60px 0; background-color: #fff;}
.tela-3 h1 {font-size: 3em; font-weight: 900; margin-bottom: 40px; color: #000;}
.tela-3 p {color: #000; font-size: 1.1em;}
/*********************************************************/

/*********************************************************/

/*********************************************************/