/*********************************************************/
/*CSS MODE - MRPSTUDIO 2026
/*********************************************************/
/*CORES*/
:root {
  --cor_1: #33ab66;
  --cor_2: #333;
  --cor_3: #3d8f6b;
}
/*********************************************************/
.botao {padding: 10px 30px; color: #fff; background-color: var(--cor_1); border-radius: 10px; font-weight: 500; text-transform: uppercase; cursor: pointer;}
.botao:hover {background-color: var(--cor_2); }

.botao2 {padding: 10px 30px; color: #fff; background-color: var(--cor_2); border-radius: 10px; font-weight: 500; text-transform: uppercase; cursor: pointer;}
.botao2:hover {background-color: var(--cor_3); color: var(--cor_2);}

span {color: var(--cor_2);}
p {font-size: 1em; line-height: 30px; color: var(--cor_2);}

.barra-e {width: 20px; height: 800px; background-image: url(../images/bg1.jpg); position: absolute; left: 0; top: 5%; background-position: left center;}
.barra-d {width: 20px; height: 800px; background-image: url(../images/bg1.jpg); position: absolute; right: 0; top: 45%; background-position: right center;}
/*********************************************************/
/*HEADER DO SITE*/
header {width: 100%; max-width: 1280px; top: 40px; position: absolute; z-index: 999; border-radius: 70px; padding: 10px 60px; z-index: 1000; display: flex; align-items: center; justify-content: space-between; background: var(--cor_1); left: 50%; transform: translateX(-50%);}
header .logo {width: 220px; height: 90px; background-position: center center;}
/*********************************************************/
.porque {padding: 90px 0; background-image: url(../images/bg2.jpg); background-position: top right; position: relative;}
.porque-wrap {display: flex; align-items: center; justify-content: space-between; column-gap: 5%;}

.porque-media {width: 35%;}
.porque-media img {width: 100%; height: 550px; border-radius: 20px; object-fit: cover; box-shadow: 0 18px 40px rgba(0,0,0,0.12);}

.porque-info {width: 60%;}
.porque-titulo {color: var(--cor_1); font-size: 3em; margin-bottom: 10px; font-weight: 900;}
.porque-subtitulo {color: var(--cor_3); font-size: 1.2em; margin-bottom: 20px; font-weight: 900;}

.porque-cards {display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px;}
.porque-card { border-radius: 20px; padding: 15px; display: flex; gap: 14px; align-items: flex-start; }
.porque-icone {width: 44px; height: 44px; min-width: 44px; border-radius: 14px; display: flex; align-items: center; justify-content: center; background: rgba(51,171,102,0.12); color: var(--cor_1); font-size: 20px;}
.porque-texto h3 {color: var(--cor_2); font-size: 1.2em; margin-bottom: 10px; font-weight: 600;}
.porque-texto p {color: var(--cor_2); font-size:1em; line-height: 1.45;}

.porque-cta {display: flex; align-items: center; justify-content: space-between; column-gap: 5%; margin-top: 100px;}
.porque-cta-texto {width: 45%;}
.porque-cta-texto h1 {color: var(--cor_1); font-size: 3em; margin-bottom: 10px; font-weight: 900;}
.porque-cta-texto h2 {color: var(--cor_3); font-size: 1.2em; margin-bottom: 20px; font-weight: 900;}
.porque-cta-texto p {color: var(--cor_2); }
.porque-cta-texto i {color: var(--cor_1); padding-right: 5px;}
.porque-cta-imagem {width: 50%;}
.porque-cta-imagem img {width: 100%; height: 350px; border-radius: 24px; object-fit: cover; box-shadow: 0 18px 40px rgba(0,0,0,0.12);}
/*********************************************************/
.diferenciais {position: relative; padding: 40px 0; background-position: center; background-attachment: fixed;}
.diferenciais::before {content: ""; position: absolute; inset: 0; background: rgba(0,0,0,0.55);}
.diferenciais .content {position: relative; z-index: 1;}
.diferenciais-wrap {display: flex; justify-content: space-between; column-gap: 5%;}
.diferenciais-left {width: 50%; border-left: 3px solid #fff; padding-left: 40px;}
.diferenciais-left p {font-size: 0.9em; line-height: 22px; color: #fff;}
.diferenciais-right {width: 50%; display: flex; align-items: center; justify-content: center; text-align: center;}
.diferenciais-center h1 {color: #fff; font-size: 3em; margin-bottom: 10px; font-weight: 900;}
.diferenciais-center h2 {color: var(--cor_3); font-size: 1.2em; margin-bottom: 20px; font-weight: 900;}
/*********************************************************/
.profissionais {background: #f2f2f2; padding: 90px 0; position: relative;}
.profissionais-wrap {display: flex; justify-content: space-between; column-gap: 5%; align-items: stretch;}
.profissionais-texto {width: 50%;}
.profissionais-texto h1 {color: var(--cor_1); font-size: 3em; margin-bottom: 10px; font-weight: 900;}
.profissionais-texto h2 {color: var(--cor_3); font-size: 1.2em; margin-bottom: 20px; font-weight: 900;}
.profissionais-texto i {color: var(--cor_1); padding-right: 5px;}
.profissionais-imagem  {position: absolute; right: 15%; width: 30%; height: 750px; bottom: 0; background-position: bottom center;}
/*********************************************************/
.quem-somos {padding: 80px 0; background: #fff;}
.quem-somos .logo {width: 220px; height: 90px; background-image: url(../images/logo2.png); background-position: center; margin: 0 auto 20px auto;}
.quem-somos-wrap {max-width: 80%; margin: 0 auto; text-align: center;}
.quem-somos-wrap h1  {color: var(--cor_1); font-size: 3em; margin-bottom: 10px; font-weight: 900;}
/*********************************************************/
.produto {padding: 90px 0; background-image: url(../images/bg3.jpg); background-position: center;}
.produto-wrap {display: flex; justify-content: space-between; column-gap: 10%; align-items: center;}
.produto-texto {width: 45%;}
.produto-texto h1 {color: #fff; font-size: 3em; margin-bottom: 10px; font-weight: 900;}
.produto-texto h2 {color: var(--cor_2); font-size: 1.2em; margin-bottom: 20px; font-weight: 900;}
.produto-texto p {color: #fff}
.produto-imagem {width: 45%;}
/*********************************************************/
.dados-tecnicos {position: relative; padding: 60px 0; background-position: center; background-attachment: fixed; text-align: center;}
.dados-tecnicos::before {content: ""; position: absolute; inset: 0; background: rgba(0,0,0,0.55);}
.dados-tecnicos .content {position: relative; z-index: 1;}
.dados-tecnicos-wrap {display: flex; justify-content: space-between; column-gap: 5%;}
.dados-tecnicos-col {width: 50%; padding: 30px 0;}
.dados-tecnicos-col h1 {color: #fff; font-size: 3em; margin-bottom: 10px; font-weight: 900;}
.dados-tecnicos-link {color: #fff; font-weight: 400;}
.dados-tecnicos-link:hover {color: var(--cor_3);}
/*********************************************************/
.popup {position: fixed; inset: 0; display: none; align-items: center; justify-content: center; z-index: 9999; padding: 20px;}
.popup.open {display: flex;}
.popup-backdrop {position: absolute; inset: 0; background: rgba(0,0,0,0.55);}
.popup-dialog {position: relative; width: min(950px, 100%); border-radius: 22px; padding: 25px; background: rgba(255,255,255,0.92); border: 1px solid rgba(255,255,255,0.5); backdrop-filter: blur(10px); box-shadow: 0 30px 80px rgba(0,0,0,0.35); max-height: 700px; overflow: auto;}
.popup-dialog h3 {color: var(--cor_2); font-size: 1.6em; font-weight: 900; margin-bottom: 10px;}
.popup-dialog p {color: rgba(0,0,0,0.68); line-height: 1.6;}
.popup-close {position: absolute; top: 12px; right: 12px; width: 42px; height: 42px; border: 0; border-radius: 14px; background: rgba(0,0,0,0.06); color: var(--cor_2); cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 20px;}
.popup-close:hover {background: rgba(0,0,0,0.10);}
body.modal-open {overflow: hidden;}
.popup-entry {text-align: center; padding: 34px 28px;}
.popup-entry h3 {font-size: 2em;}
.popup-entry-actions {display: flex; gap: 14px; margin-top: 18px;}
.popup-entry-btn {width: 100%; display: flex; align-items: center; justify-content: center; height: 54px; border-radius: 18px; font-weight: 900; cursor: pointer;}
.popup-entry-btn-outline {background: transparent; border: 2px solid var(--cor_1); color: var(--cor_1) !important;}
.popup-entry-btn-outline:hover {background: rgba(61,143,107,0.10);}
/*********************************************************/
.contato-hero {padding: 180px 0 70px 0; background-position: center; position: relative; }
.contato-hero::before {content: ""; position: absolute; inset: 0; background: rgba(0,0,0,0.55);}
.contato-hero .content {position: relative; z-index: 1;}

.contato-hero-texto h1 {color: #fff; font-size: 3em; margin-bottom: 10px; font-weight: 900;}
.contato-hero-texto p {color: rgba(255,255,255,0.90); font-size: 1em;}

.contato-area {padding: 70px 0; background: #fff; }
.contato-alerta {padding: 16px 18px; border-radius: 18px; margin-bottom: 22px; font-weight: 600;}
.contato-alerta.ok {background: rgba(51,171,102,0.12); color: var(--cor_3); border: 1px solid rgba(61,143,107,0.25);}
.contato-alerta.erro {background: rgba(220,53,69,0.10); color: #b42318; border: 1px solid rgba(220,53,69,0.25);}

.contato-grid {display: flex; justify-content: space-between; column-gap: 6%; align-items: flex-start;}
.contato-info {width: 44%;}
.contato-info h2 {color: var(--cor_1); font-size: 2.2em; margin-bottom: 10px; font-weight: 900;}
.contato-info p {color: var(--cor_2); margin-bottom: 18px;}

.contato-cards {display: grid; grid-template-columns: 1fr; gap: 20px;}
.contato-card {display: flex; gap: 30px; align-items: center; padding: 5px 20px; border-radius: 20px; background: #fff; box-shadow: 0 14px 30px rgba(0,0,0,0.08); border: 1px solid rgba(0,0,0,0.04); color: var(--cor_2);}
.contato-card:hover {transform: translateY(-2px); transition: all .25s ease;}
.contato-icone {width: 46px; height: 46px; border-radius: 16px; display: flex; align-items: center; justify-content: center; background: rgba(51,171,102,0.12); color: var(--cor_1); font-size: 20px;}

.contato-card-texto h3 {color: var(--cor_2); font-size: 1.1em; margin-bottom: 5px; font-weight: 600; padding-top: 10px;}
.contato-card-texto p {color: rgba(0,0,0,0.65); font-size: 0.9em; line-height: 20px;}

.contato-form {width: 50%; padding: 22px; border-radius: 22px; background: #f8f9fb; border: 1px solid rgba(0,0,0,0.06);}
.contato-form h2 {color: var(--cor_2); font-size: 1.8em; margin-bottom: 14px; font-weight: 900;}
.contato-formulario {display: flex; flex-direction: column; gap: 14px;}
.contato-linha {display: grid; grid-template-columns: 1fr 1fr; gap: 14px;}
.contato-campo label {display: block; font-weight: 800; color: var(--cor_2); margin-bottom: 6px; font-size: 0.9em;}
.contato-campo input, .contato-campo textarea {width: 100%; padding: 12px 14px; border-radius: 16px; border: 1px solid rgba(0,0,0,0.10); font-family: var(--font_p); font-size: 0.95em; outline: none; background: #fff;}
.contato-campo input:focus, .contato-campo textarea:focus {border-color: rgba(61,143,107,0.55); box-shadow: 0 0 0 3px rgba(61,143,107,0.12);}
.contato-campo textarea {resize: vertical; min-height: 140px;}
button {border: 0 !important;}

.contato-mapa {margin-top: 26px; border-radius: 22px; overflow: hidden; box-shadow: 0 18px 40px rgba(0,0,0,0.10); border: 1px solid rgba(0,0,0,0.04);}
.contato-mapa iframe {width: 100%; height: 380px; border: 0; display: block;}
/*********************************************************/
footer {width: 100%; display: table; background-image: url(../images/bgrodape.jpg); background-position: center; padding: 40px 0; text-align: center;}
footer .logo {width: 220px; height: 95px; background-position: center center; display: inline-block;}
footer .centro {color: #fff; font-size: 0.8em; line-height: 20px;}
footer .social {width: 100%; text-align: center; margin: 10px 0; display: flex; justify-content: center; gap: 20px;}
footer .social li {color: #fff; font-size: 1.4em; }
footer .social li:hover {color: var(--cor_1);}
/*********************************************************/
.fim {margin-top: 20px; border-top: 1px solid var(--cor_3); padding-top: 10px;}
.fim p {color: #fff; font-size: 0.8em;}
.fim a {color: #fff;}
.fim a:hover {color: var(--cor_1);}
/*********************************************************/