/*********************************************************/
/*CSS MODE - MRPNET 2025
/*********************************************************/
/*CORES*/
:root {
  --cor_1: #055EAC;
  --cor_2: #1C92FE;
  --cor_3: #111111;
  --cor_4: #F8AB00;
}
/*********************************************************/
.botao {padding: 10px 30px; color: #fff; background-color: var(--cor_1); border-radius: 50px; font-weight: 500; text-transform: uppercase; cursor: pointer; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3); font-family: var(--font_s);}
.botao:hover {background-color: var(--cor_2);}

span {color: var(--cor_1);}
p {line-height: 30px; font-weight: 400; color: var(--cor_3);}
h1 {font-size: clamp(1.2rem, 4vw, 2rem);}

.img2 {width: 55%; height: 800px; position: absolute; right: 0; bottom: 0; background-position: right bottom;}

.linha {width: 160px; height: 5px; background-color: var(--cor_2); margin: 10px 0 20px 0;}
/*********************************************************/
header {width: 100%; min-height: 100%; position: relative; background-position: right;}
header h1 {color: var(--cor_1); font-size: 3em; margin-bottom: 40px;}
header .logo {width: 335px; height: 170px; position: relative; left: 5%; top: 30px;}
header .esquerda {width: 40%; margin-left: 5%; padding-top: 10%;}
header .logo_caixa {width: 160px; height: 95px;  position: absolute; right: 20px; top: 20px; background-image: url(../images/logo-caixa1.png);}
/*********************************************************/
.pagina {width: 100%; background-image: url(../images/bg-site.jpg); background-position: top;}
/*********************************************************/
.tela-1 {width: 100%; display: table; padding: 60px 0;}
.tela-1 h1 {text-align: center; color: var(--cor_3); padding-top: 180px;}
.tela-1 h2 {color: var(--cor_2); text-transform: uppercase; font-size: 1em; padding-bottom: 20px;}
/*********************************************************/
.tela-2 {width: 100%; display: table; position: relative; border-bottom: 30px solid var(--cor_1);}
.tela-2 h1 {font-weight: 300; color: var(--cor_3); padding-top: 30px;}
.tela-2 h2 {color: #fff; font-size: 1.4em; padding-bottom: 10px;}

.tela-2 .esquerda {width: 40%; padding-left: 5%;}
.tela-2 .quadro-1 {width: 60%; float: right; height: 900px; background-position: left; position: relative;}
.tela-2 .quadro-2 {width: 55%; height: 900px; background-position: left; background-image: url(../images/bg-quadro.png); float: right; display: flex; justify-content: center; align-items: center; flex-direction: column; text-align: left; padding: 0 30px 0 12%;}
.tela-2 .quadro-2 p {color: #fff;}
/*********************************************************/
.tela-3 {width: 100%; padding: 60px 0; position: relative; background-color: #f9f9f9; text-align: center;}
.tela-3 h1 {text-transform: uppercase; padding-bottom: 20px;}
.tela-3 h2 {font-size: 1.2em; color: var(--cor_2);}
.tela-3 h3 {font-size: 0.9em; color: var(--cor_3); padding-bottom: 20px; color: var(--cor_3); font-weight: 400;}

.tela-3 .quadro {width: 90%; margin: auto; background-color: #fff; min-height: 240px; border-radius: 20px; padding: 15px; text-align: left; position: relative;}
.tela-3 .quadro p {font-size: 0.9em; font-weight: 300; line-height: 22px;}
.tela-3 .stars {position: absolute; bottom: 20px;}
.tela-3 .stars i {float: left; font-size: 0.9em; color: var(--cor_4); padding-right: 5px;}
/*********************************************************/
.chamada {width: 100%; text-align: center; position: relative; padding: 40px 0; background-image: url(../images/background-site.jpg); background-attachment: fixed;}
.chamada h3 {font-size: 2.4em; color: var(--cor_1);}
.chamada span {color: var(--cor_4);}
/*********************************************************/
.rodape {width: 100%; display: table;}
.rodape h1 {color: #fff; font-weight: 300;}

.rodape .dados {padding-top: 40px;}
.rodape .dados li {display: flex; color: #fff; font-size: 1.1em; padding-bottom: 10px; line-height: 30px;}
.rodape i {padding: 5px 10px 0 0;}
.rodape a {color: #fff;}
.rodape a:hover {color: var(--cor_4);}

.rodape .esquerda {width: 50%; height: 500px; background-color: #444; background-image: url(../images/bg-rodape.png); background-repeat: no-repeat; background-position: left top; padding: 40px 40px 20px 15%;}
.rodape .direita {width: 50%;}
.rodape iframe {width: 100%; height: 500px;}
/*********************************************************/
.fim {width: 100%; text-align: center; padding: 15px 0; background-color: #313131; margin-top: -5px;}
.fim p {font-size: 0.9em; font-weight: 300; color: #fff; text-align: center;}
.fim a {color: #fff;}
.fim a:hover {color: var(--cor_4);}
/*********************************************************/