/*********************************************************/
/*CSS MODE - MRPNET 2025
/*********************************************************/
/*CORES*/
:root {
  --cor_1: #EB1C29;
  --cor_2: #000;
  --cor_3: #EFEFEF;
}
/*********************************************************/
.botao-vermelho {padding: 10px 30px; color: #fff; background-color: var(--cor_1); font-weight: 400; cursor: pointer; text-align: center; font-size: 0.9em; position: absolute; left: 0; bottom: 0; width: 100%; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px;}
.botao-vermelho:hover {background-color: var(--cor_2); text-decoration: none !important;}

span {color: var(--cor_1);}
h1 {font-size: 2em; padding-bottom: 30px; font-weight: 700; color: var(--cor_2);}
p {line-height: 30px; font-weight: 300; color: var(--cor_2);}

.alerta {padding: 10px; border-left: 5px solid var(--cor_1); background-color: #f9f9f9; margin-top: 40px;}
/*********************************************************/
/*HEADER DO SITE*/
header {width: 100%; position: relative; z-index: 1000;}
header .content {display: flex; align-items: center; justify-content: space-between;}
header .inicio {width: 100%; display: table; background-color: var(--cor_3); padding: 5px 0;}

header .dados li {font-size: 0.9em; float: left; padding-right: 20px;}
header .dados i {color: var(--cor_1); padding-right: 10px;}

header .social li {float: left; padding-left: 15px; color: var(--cor_1);}
header .social li:hover {color: var(--cor_2);}

header .topo {width: 100%; display: table; padding-top: 20px; text-align: center;}
header .topo .content {display: table;}
header .logo {width: 360px; height: 80px; display: inline-block;}
header .menutotal {width: 100%; text-align: center;}
/*********************************************************/
.produtos {width: 100%; padding: 60px 0;}
.produtos h2 {font-size: 0.9em; font-weight: 400;}
.produtos h3 {font-size: 0.8em; font-weight: 300;}
.produtos .texto a {color: var(--cor_2);}
.produtos .texto a:hover {color: var(--cor_1); text-decoration: none !important;}
.produtos .acima {margin: 20px 0;}
.produtos .quadro {width: 95%; margin: 0 auto; position: relative; border: 1px solid var(--cor_3); border-radius: 5px; position: relative; min-height: 340px; padding: 10px; box-shadow: 0 4px 10px rgba(0,0,0,0.15);}
.produtos .imagem {width: 100%; height: 220px; background-position: center center; margin-bottom: 10px;  transition: transform 0.3s ease, box-shadow 0.3s ease; border-radius: 5px;}
.produtos .imagem:hover { transform: scale(1.05); }
/*********************************************************/
.marcas {padding-bottom: 40px; text-align: center;}
.marcas h1 {font-weight: 400;}
.marcas .quadro {width: 95%; height: 80px; border-radius: 5px; border: 1px solid var(--cor_3); background-position: center center; margin: auto;}
.marcas .quadro:hover {border: 1px solid var(--cor_1);}
/*********************************************************/
.marca {width: 100%; padding: 60px 0; text-align: center;}
.marca .quadro {width: 17%; height: 120px; border-radius: 5px; border: 1px solid var(--cor_3); background-position: center center; margin: 1%; display: inline-block;}
.marca .quadro:hover {border: 1px solid var(--cor_1);}
/*********************************************************/
footer {width: 100%; background-color: #f6f6f6; border-top: 30px solid var(--cor_1); padding-top: 20px; display: table;}
footer h2 {font-size: 1em; padding-bottom: 10px; font-weight: 600;}
footer h3 {font-size: 0.7em; padding-bottom: 10px;}

footer .quadro-m {width: 30%; float: left;}
footer .quadro {float: left; padding-right: 30px; min-width: 15%;}

footer .logo {width: 220px; height: 80px; background-position: center; margin: auto;}
footer .dados li {color: #333; font-family: var(--font_s); font-size: 0.9em;}
footer .rpmenu a {font-size: 0.9em; color: #333; font-family: var(--font_s);}
footer .rpmenu a:hover {color: var(--cor_1);}
footer .botao-rodape {padding: 5px 10px; color: #fff; background-color: var(--cor_1); font-weight: 400; cursor: pointer; text-align: center; font-size: 0.8em;}
footer .botao-rodape:hover {background-color: var(--cor_2);}
footer .social li {display: inline-block; padding: 0 10px; color: var(--cor_2); font-size: 1.4em;}
footer .social li:hover {color: var(--cor_1);}
/*********************************************************/
.fim {width: 100%; display: table; padding: 10px 0; text-align: center; background-color: #CECECE;}
.fim p {font-size: 0.8em; color: var(--cor_2);}
.fim a {color: var(--cor_2);}
.fim a:hover {color: var(--cor_1);}
/*********************************************************/
.chamadas {width: 100%; padding: 20px 0; background-color: #f6f6f6;}
.chamadas h2 {color: var(--cor_1); font-size: 1em; text-transform: uppercase  ;}
.chamadas i {color: var(--cor_2); font-size: 2em; padding-right: 10px;}
.chamadas p {color: #333; font-family: var(--font_s); font-size: 0.9em; font-weight: 400; line-height: 20px;}
.chamadas .content {display: flex; align-items: center; justify-content: space-between;}
.chamadas .quadro {display: flex;}
/*********************************************************/
.navegacao {width: 100%; display: table; padding: 10px 0; background-color: var(--cor_1);}
.navegacao li {color: #fff; padding-right: 10px; float: left; font-size: 0.9em; font-weight: 400;}
.navegacao a {color: #fff;}
.navegacao a:hover {color: var(--cor_2);}
/*********************************************************/
.sobre {width: 100%; display: table; padding: 60px 0;}
.sobre .esquerda {width: 62%;}
.sobre .direita {width: 33%;}
/*********************************************************/
.interna {width: 100%; display: table; padding: 60px 0;}
.lateral {width: 18%; float: left;}
.lateral h2 {color: var(--cor_1); text-transform: uppercase; font-size: 1em; padding-bottom: 10px;}
.lateral .quadro {width: 100%; padding: 0 10px 20px 10px; margin-bottom: 10px; border-bottom: 1px solid var(--cor_3);}
.lateral .input {padding: 10px; border: 1px solid var(--cor_3); width: 100%; }
.lateral .botao {width: 100%; padding: 10px; background-color: var(--cor_1); color: #fff; font-size: 1em; cursor: pointer;}
.lateral .subitem li a{color: #333; font-family: var(--font_s); font-size: 0.9em;}
.lateral .subitem li a:hover {color: var(--cor_1);}
.centro {width: 80%; float: right;}
/*********************************************************/
.produto h2 {font-size: 0.9em; font-weight: 400;}
.produto h3 {font-size: 0.8em; font-weight: 300;}
.produto .texto a {color: var(--cor_2);}
.produto .texto a:hover {color: var(--cor_1); text-decoration: none !important;}
.produto {width: 31%; margin: 1%; float: left; position: relative; border: 1px solid var(--cor_3); border-radius: 5px; position: relative; min-height: 480px; padding: 10px;}
.produto .imagem {width: 100%; height: 320px; background-position: center center; margin-bottom: 10px;  transition: transform 0.3s ease, box-shadow 0.3s ease; border-radius: 5px;}
.produto .imagem:hover { transform: scale(1.05); }
/*********************************************************/
.paginacao { display: flex; gap: 5px; justify-content: center; margin-top: 20px; }
.paginacao a, .paginacao span { display: inline-block; padding: 8px 12px; border: 1px solid #ccc; text-decoration: none; color: #333; border-radius: 4px; }
.paginacao span.ativo { border: 2px solid var(--cor_1); font-weight: bold; }
.paginacao a:hover { background: #f0f0f0; }
/*********************************************************/
.titulos {width: 100%; display: table; padding: 1%;}
/*********************************************************/
.atendimento {width: 100%; padding: 60px 0; background-color: #f6f6f6;}
.atendimento h3 {color: var(--cor_1); font-size: 1em; text-transform: uppercase  ;}
.atendimento i {color: var(--cor_2); font-size: 2em; padding-right: 10px;}
.atendimento iframe {width: 100%; height: 350px;}
.atendimento .dados {display: flex;width: 100%; align-items: center; justify-content: space-between;}
.atendimento .dados li {display: flex; color: #333; font-family: var(--font_s); font-size: 0.9em; font-weight: 400; line-height: 20px;}
/*********************************************************/
.detalhes {width: 100%; display: block; padding: 60px 0; background-color: #f6f6f6;}
.detalhes h2 {padding: 10px; border: 1px solid var(--cor_2); border-radius: 50px; font-size: 1em; display: table; margin-bottom: 20px;}
.detalhes .botao {width: 100%; padding: 10px 20px; background-color: var(--cor_1); color: #fff; font-size: 1em; cursor: pointer; display: table; width: auto; margin: 20px 0;}
.detalhes .botao:hover {background-color: var(--cor_2);}
.detalhes .esquerda {width: 60%; text-align: center;}
.detalhes .direita {width: 35%;}
.detalhes .quadro {padding: 20px; width: 100%; background-color: #fff; border-radius: 10px;}
.detalhes img {max-height: 450px;}
.detalhes .subimg {width: 95%; height: 140px; margin: 0 auto; border-radius: 10px; background-position: center center;}
/*********************************************************/