/*********************************************************/
/*CSS MODE - MRPNET 2025
/*********************************************************/
/*CORES*/
:root {
  --cor_1: #034248;
  --cor_2: #D8AC72;
  --cor_3: #02242b;
  --cor_txt: #00050d;
}
/*********************************************************/
.botao {padding: 10px 30px; color: #fff; background-color: var(--cor_1); border-radius: 10px; font-weight: 500; text-transform: uppercase; cursor: pointer; transition: background-color 0.4s ease, color 0.4s ease;}
.botao:hover {background-color: var(--cor_2);}

.botao-2 {padding: 10px 30px; color: #fff; background-color: var(--cor_2); border-radius: 10px; font-weight: 500; text-transform: uppercase; cursor: pointer; transition: background-color 0.4s ease, color 0.4s ease;}
.botao-2:hover {background-color: var(--cor_1);}

.botao-3 {padding: 10px 30px; color: #fff; background-color: var(--cor_1); border-radius: 10px; font-weight: 500; text-transform: uppercase; cursor: pointer; transition: background-color 0.4s ease, color 0.4s ease;}
.botao-3:hover {background-color: var(--cor_3);}

.esquerda { flex: 1; }
.direita { flex: 1; }

h1 {color: var(--cor_2); font-size: 1.8em; font-weight: 600; margin-bottom: 40px;}
p {color: var(--cor_txt); font-weight: 400; font-family: var(--font_s); line-height: 30px;}
/*********************************************************/
/*HEADER DO SITE*/
header {width: 100%; position: absolute; z-index: 1000;}
header .inicio {width: 100%; text-align: center; padding: 10px 0; background-color: var(--cor_1);}
header .inicio p {color: #fff; font-size: 0.9em;}
header .inicio span {color: var(--cor_2);}
header .topo {width: 100%; padding: 5px 0; background: rgba(3, 66, 72, 0.4); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid rgba(255, 255, 255, 0.3);}
header .topo .content {display: flex; align-items: center; justify-content: space-between;}
header .logo {width: 300px; height: 70px;}
/*********************************************************/
footer {width: 100%; padding-top: 10px; background-color: var(--cor_1);}
footer .content {display: flex; align-items: center; justify-content: space-between;}
footer .logo {width: 300px; height: 70px;}
footer .social li {display: inline-block; height: 40px; width: 40px; background-color: var(--cor_2); color: var(--cor_1); border-radius: 50%; margin: 0 5px; font-size: 1.4em; text-align: center; padding-top: 5px;  transition: all 0.3s ease;}
footer .social li:hover {background-color: var(--cor_3); color: #fff;}
/*********************************************************/
.fim {width: 100%; padding: 10px 0; background-color: var(--cor_3); text-align: center;}
.fim .content {display: block;}
.fim p {color: #fff; font-size: 0.8em;}
.fim a {color: #fff;}
.fim a:hover {color: var(--cor_2);}
/*********************************************************/
.banner { width: 100%; height: 90%; background-position: center; background-attachment: fixed; position: relative;  animation: zoomBanner 20s ease-in-out infinite alternate;}
.banner .overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(3, 66, 72, 0.6); display: flex; align-items: center; justify-content: center; text-align: center; padding: 20px; }
.banner  h1 { font-size: 2.4em; line-height: 1.4; text-align: center; width: 80%; margin: auto; text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.4); }
@keyframes zoomBanner {
  from { background-size: 100%; }
  to { background-size: 110%; }
}
/*********************************************************/
.chamadas {width: 100%; position: relative;}
.chamadas h2 {color: #fff; font-size: 0.9em; font-weight: 400; line-height: 25px;}
.chamadas .content {position: relative;}
.chamadas .centro {width: 100%; padding: 30px 20px 5px 20px; border-radius: 20px; border: 1px solid var(--cor_2); background: rgba(3, 66, 72, 0.7); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);position: absolute; top: -80px;}
.chamadas .quadro {width: 90%; margin: auto; text-align: center;}
.chamadas .icon {width: 70px; height: 70px; background-position: center center; margin: 0 auto 10px auto;}

.chamadas .ic1 {background-image: url(../images/ic1.png);}
.chamadas .ic2 {background-image: url(../images/ic2.png);}
.chamadas .ic3 {background-image: url(../images/ic3.png);}
.chamadas .ic4 {background-image: url(../images/ic4.png);}
/*********************************************************/
.apresentacao { width: 100%; padding: 180px 0 80px 0; }
.apresentacao .content { display: flex; align-items: center; gap: 50px; }
.apresentacao img { width: 90%; margin-left: 5%; border-radius: 15px; box-shadow: 0 4px 12px rgba(0,0,0,0.15); border-left: 5px solid var(--cor_2); border-bottom: 5px solid var(--cor_2); }
/*********************************************************/
.homeserver {width: 100%; background-position: center; position: relative; display: table;}
.homeserver h1 {margin-bottom: 20px;}
.homeserver p {color: #fff;}
.homeserver .content {display: flex; gap: 60px; align-items: center;}
.homeserver .overlay { background-color: rgba(3, 66, 72, 0.9); display: flex; align-items: center; justify-content: center; padding: 60px 0; width: 100%; height: 100%;}
.homeserver img { width: 90%; margin-left: 5%; border-radius: 15px; box-shadow: 0 4px 12px rgba(0,0,0,0.15); border-right: 5px solid var(--cor_2); border-bottom: 5px solid var(--cor_2); }
.homeserver li {border-bottom: 1px solid rgba(255, 255, 255, 0.3); color: #fff; padding: 10px 0; width: 70%;}
.homeserver li a {color: #fff; font-size: 0.9em;}
.homeserver li a:hover {color: var(--cor_2);}
.homeserver i {color: var(--cor_2); padding-right: 10px;}
.homeserver .botao-2 i {color: #fff;}
/*********************************************************/
.como-funciona {width: 100%; text-align: center; background-color: #f1f1f1; padding: 60px 10%;}
.como-funciona h1 {color: var(--cor_1);}
.como-funciona h2 {color: var(--cor_2); font-size: 1em; padding-bottom: 5px;}
.como-funciona .quadro p {color: #fff; font-size: 0.9em; line-height: 22px;}
.como-funciona .centro {width: 70%; margin: auto;}
.como-funciona .coluna {width: 100%; padding: 45px 0;}
.como-funciona .quadro {width: 95%; margin: auto; position: relative; background-color: var(--cor_1); border-radius: 10px; border: 1px solid var(--cor_2); padding: 15px; transition: all 0.3s ease;}
.como-funciona .quadro:hover { transform: translateY(-8px) scale(1.03); box-shadow: 0 10px 25px rgba(0,0,0,0.25); }
.como-funciona .number {color: #fff; font-size: 1.6em;  border-radius: 50%; background-color: var(--cor_2); width: 45px;height: 45px; text-align: center; margin: -40px auto 0 auto; padding-top: 7px; position: relative; z-index: 1;;}
.como-funciona .imagem {width: 100%; height: 140px; border-radius: 10px; margin: -5px 0 10px 0;}
.como-funciona .texto {min-height: 120px;}
/*********************************************************/
.conheca {padding: 60px 0; text-align: center; width: 100%; background-position:  center center;}
.conheca h1 {color: var(--cor_1);} 
.conheca .centro {width: 70%; margin: auto;}
/*********************************************************/
.banner-pagina { width: 100%; height: 400px; background-position: center; position: relative; }
.banner-pagina .overlay { background-color: rgba(3, 66, 72, 0.9); display: flex; align-items: center; justify-content: center; padding-top: 140px; width: 100%; height: 100%;}
.banner-pagina .content {display: flex; align-items: center; justify-content: center;}
/*********************************************************/
.interna {width: 100%; position: relative; padding: 60px 0;}
/*********************************************************/
.hero-interna .content { display: flex; align-items: center; gap: 60px; }
.hero-interna .texto { flex: 0 0 60%; }
.hero-interna .image { flex: 0 0 30%; }

.pilares .grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 60px; }
.pilares .card { background: #fff; border-radius: 16px; padding: 22px; border: 1px solid rgba(3,66,72,0.1); box-shadow: 0 8px 22px rgba(0,0,0,0.08); transition: transform 0.25s ease, box-shadow 0.3s ease; text-align: left; }
.pilares .card:hover { transform: translateY(-4px); box-shadow: 0 16px 36px rgba(0,0,0,0.15); }
.pilares .card i { display:block; font-size: 1.4em; color: var(--cor_1); margin-bottom: 10px; }
.pilares .card h3 { font-size: 1.15em; margin-bottom: 6px; }
/* --------------------------------------------- */
.serv-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }

.serv-card { background: #fff; border-radius: 20px; border: 1px solid rgba(3, 66, 72, 0.08); box-shadow: 0 10px 24px rgba(3, 66, 72, 0.08); overflow: hidden; transform: translateY(0); transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease; }
.serv-card .link { display: block; color: inherit; text-decoration: none; }
.serv-card .thumb { position: relative; aspect-ratio: 16/10; overflow: hidden; }
.serv-card .thumb img { width: 100%; height: 100%; object-fit: cover; transform: scale(1); transition: transform .6s ease; }
.serv-card .thumb .overlay { position: absolute; inset: 0; background: radial-gradient(100% 100% at 50% 100%, rgba(216,172,114,0.0) 0%, rgba(3,66,72,0.35) 100%); opacity: .0; transition: opacity .35s ease; }
.serv-card .body { padding: 18px 18px 20px; }
.serv-card .title { font-size: 20px; color: var(--cor_1); margin: 0 0 6px; }
.serv-card .resumo { color: #546a71; font-size: 15px; line-height: 1.6; }
.serv-card .cta { display: inline-flex; align-items: center; gap: 8px; margin-top: 14px; font-weight: 600; color: var(--cor_1); }
.serv-card .cta i { transition: transform .35s ease; }

.serv-card:hover { transform: translateY(-8px); box-shadow: 0 16px 36px rgba(3, 66, 72, 0.18); border-color: rgba(216, 172, 114, 0.35); }
.serv-card:hover .thumb img { transform: scale(1.05); }
.serv-card:hover .thumb .overlay { opacity: .5; }
.serv-card:hover .cta i { transform: translateX(4px); }

.fadeInUp { animation: fadeInUp .6s ease both; }
@keyframes fadeInUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
/* --------------------------------------------- */
.servico-hero{display:grid; grid-template-columns:480px 1fr; gap:40px; align-items:center; margin:20px 0 40px;}
.servico-hero .thumb{position:relative;border-radius:22px;overflow:hidden;box-shadow:0 14px 28px rgba(3,66,72,.12);}
.servico-hero .thumb img{width:100%;height:100%;object-fit:cover;display:block; border-left: 5px solid var(--cor_2); border-bottom: 5px solid var(--cor_2);}
.servico-hero .thumb .overlay{position:absolute;inset:0;background:linear-gradient(180deg, rgba(3,66,72,0.0) 0%, rgba(3,66,72,0.20) 100%);} 

.servico-hero .info h1{color:var(--cor_1); margin-bottom: 20px;}
.servico-hero .info .lead{color:#546a71;font-size:16px;line-height:1.7;}

.servico-body{display:grid; grid-template-columns:1fr 340px;gap:40px; align-items:start; margin:10px 0 50px;}

.servico-aside .aside-card{background:#fff; border:1px solid rgba(3,66,72,.12); border-radius:20px; padding:20px; box-shadow:0 10px 18px rgba(3,66,72,.10);} 
.servico-aside .aside-card h3{margin:0 0 10px; color:var(--cor_1);}
.servico-aside .aside-card p{margin-bottom:12px;}
.servico-aside .aside-card .checklist{margin:12px 0 0; padding:0;}
.servico-aside .aside-card .checklist li{position:relative; padding-left:22px; color:var(--cor_3); margin:6px 0;}
.servico-aside .aside-card .checklist li:before{content:""; position:absolute; left:0; top:.45em; width:12px; height:12px; border-radius:50%; background-color: var(--cor_2);}

.relacionados{margin:10px 0 60px;}
.relacionados h2{font-size:24px; color:var(--cor_1); margin-bottom:20px;}
/* --------------------------------------------- */
.servico-naoencontrado { max-width: 700px; margin: 80px auto; text-align: center; background: #f9f9f9; border: 1px solid #ddd; border-radius: 12px; padding: 40px 30px; box-shadow: 0 4px 15px rgba(0,0,0,0.08); animation: fadeIn 0.6s ease; }
.servico-naoencontrado h2 { color: var(--cor_1); font-size: 28px; margin-bottom: 15px; font-weight: 700; letter-spacing: 0.5px; }
.servico-naoencontrado p { color: #555; font-size: 17px; line-height: 1.6; }
.servico-naoencontrado a { color: var(--cor_3); font-weight: 600; text-decoration: none; border-bottom: 2px solid transparent; transition: 0.3s; }
.servico-naoencontrado a:hover { border-bottom: 2px solid var(--cor_2); color: var(--cor_1); }
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}
/* --------------------------------------------- */
.contato-info{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin:20px 0 30px;}
.contato-info .info-card{background:#fff;border:1px solid rgba(3,66,72,.08);border-radius:16px;padding:18px;box-shadow:0 8px 22px rgba(3,66,72,.08);text-align:left;transition:transform .25s ease, box-shadow .3s ease;}
.contato-info .info-card:hover{transform:translateY(-4px);box-shadow:0 16px 36px rgba(3,66,72,.15);}
.contato-info .info-card i{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:50%;background:linear-gradient(90deg, var(--cor_2,#D8AC72), var(--cor_1,#034248));color:#fff;margin-bottom:8px;}
.contato-info .info-card h3{font-size:1.05em;color:#034248;margin:6px 0;}
.contato-info .info-card p{color:#4a6168;}
.contato-info .info-card a{color:#034248;text-decoration:none;}

.contato-body{display:grid;grid-template-columns:1fr 340px;gap:40px;align-items:start;margin:10px 0 50px;}
.contato-form{background:#fff;border:1px solid rgba(3,66,72,.08);border-radius:18px;padding:22px 24px;box-shadow:0 12px 24px rgba(3,66,72,.08);} 
.contato-form h2{margin:0 0 8px;color:#034248;}
.contato-form p{color:#5f6c72;margin-bottom:16px;}
.form{display:block;}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
.form-group{margin-bottom:14px;}
.form-group label{display:block;font-weight:600;color:#034248;margin-bottom:6px;}
.input,.textarea{width:100%;border:1px solid rgba(3,66,72,.18);border-radius:12px;padding:12px 14px;background:#f7fbfb;color:#034248;outline:none;transition:border-color .2s ease, box-shadow .2s ease;}
.textarea{resize:vertical;}
.input:focus,.textarea:focus{border-color:var(--cor_2);box-shadow:0 0 0 3px rgba(216,172,114,.25);} 
.btn-enviar{margin-top:8px;}

.contato-aside .aside-card{background:#fff;border:1px solid rgba(3,66,72,.12);border-radius:18px;padding:22px;box-shadow:0 10px 18px rgba(3,66,72,.10);margin-bottom:18px;} 
.contato-aside .aside-card h3{margin:0 0 8px;color:#034248;}
.contato-aside .aside-card p{color:#5f6c72;margin-bottom:12px;}
.contato-aside .aside-card .checklist{list-style:none;margin:12px 0 0;padding:0;}
.contato-aside .aside-card .checklist li{position:relative;padding-left:22px;color:#4a6168;margin:6px 0;}
.contato-aside .aside-card .checklist li:before{content:"";position:absolute;left:0;top:.45em;width:12px;height:12px;border-radius:50%;background:linear-gradient(90deg, var(--cor_2,#D8AC72), var(--cor_1,#034248));}
.map iframe{box-shadow:0 12px 24px rgba(3,66,72,.12); width: 100%; height: 240px;}