/* ======================================================= */
/* Estilos principais - GlobalWS / MRPNET 2025             */
/* ======================================================= */
/* Paleta e tema */
:root {
  --cor_1: #04204A;  
  --cor_2: #C4C026;  
  --cor_3: #062F6A;
  --cor_texto: #2a3136;
  
}
/* ======================================================= */
.sombra-suave { box-shadow: 0 10px 40px rgba(0,0,0,0.08); }
h1 {font-size: 1.6em; margin-bottom: 20px; font-weight: 900;}
p {font-size: 1.1em; line-height: 30px;}

/* Botões */
.botao { padding: 12px 32px; color: #fff; background: var(--cor_1); border-radius: 10px; font-weight: 600; text-transform: uppercase; cursor: pointer; letter-spacing: 0.02em; display: inline-block; transition: all .25s ease; box-shadow: 0 8px 24px rgba(55,73,83,0.25); }
.botao:hover { background: var(--cor_2); transform: translateY(-2px); box-shadow: 0 12px 28px rgba(253,102,48,0.35); }

.botao2 { padding: 12px 32px; color: #fff; background: var(--cor_2); border-radius: 10px; font-weight: 600; text-transform: uppercase; cursor: pointer; letter-spacing: 0.02em; display: inline-block; transition: all .25s ease; box-shadow: 0 8px 24px rgba(55,73,83,0.25); }
.botao2:hover { background: var(--cor_3); transform: translateY(-2px); box-shadow: 0 12px 28px rgba(253,102,48,0.35); }
/* ======================================================= */
header { width: 100%; position: relative; z-index: 1000; background-color: var(--cor_1); max-height: 67px;}
header .content { display: flex; align-items: center; justify-content: space-between; }
header .logo { width: 300px; background-color: #fff;  position: relative; height: 185px; background-size: 90%; background-position: center center; border-bottom-left-radius: 10px; border-bottom-right-radius: 10px;}
header .menu {margin-top: -120px;}
header .social {margin-top: -120px;}
header .social li {display: inline-block; font-size: 1.2em; margin: 0 10px; color: #fff;}
header .social a :hover { color: var(--cor_2); transform: translateY(-2px); }
/* ======================================================= */
.home { position: relative; display: flex; align-items: center; padding: 240px 0; background-attachment: fixed;}
.home::before { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at 20% 20%, rgba(253,102,48,0.25), transparent 40%), radial-gradient(ellipse at 80% 30%, rgba(55,73,83,0.35), transparent 50%), linear-gradient(180deg, rgba(0,0,0,0.15) 0%, rgba(0,0,0,0.35) 100%); z-index: 1; }
.home h1 { font-size: 3em; color: var(--cor_2); text-shadow: 0 8px 24px rgba(0,0,0,0.35); margin-bottom: 30px; animation: fadeUp .6s ease both; font-weight: 900;}
.home p {  color: #fff; animation: fadeUp .9s ease both;}
.interno {padding: 160px 0 120px 0 !important;}
/* ======================================================= */
/* Sobre a Ramil                                           */
/* ======================================================= */
.sobre-a-ramil { padding: 80px 0; background: var(--cor_1); position: relative; }
.sobre-a-ramil .quadro { display: flex; align-items: stretch; gap: 4%; background-color: #fff; padding: 60px; border-radius: 10px; position: relative;}
.sobre-a-ramil .esquerda { width: 48%; }
.sobre-a-ramil .direita { width: 48%;  display: flex; flex-direction: column; justify-content: center; }
.sobre-a-ramil .imagem { height: 420px; border-radius: 16px; background-position: center; position: relative; overflow: hidden; }
.sobre-a-ramil h1 {  color: var(--cor_2); font-weight: 900;}
.sobre-a-ramil p { font-size: 1.05rem; color: var(--cor_texto); }
.sobre-a-ramil .ball {width: 30px; height: 30px; background-position: center center; background-image: url(../images/ball.png); position: absolute;}
.sobre-a-ramil .ac1 {left: 20px; top: 20px;}
.sobre-a-ramil .ac2 {right: 20px; top: 20px;}
.sobre-a-ramil .ac3 {right: 20px; bottom: 20px;}
.sobre-a-ramil .ac4 {left: 20px; bottom: 20px;}
/* ======================================================= */
.tela-2 { padding: 40px 0; background: var(--cor_1);text-align: center; }
.tela-2 h1 { text-align: center; font-size: 2em; margin-bottom: 40px; color: #fff; }
.tela-2 .qda {float: left; margin: 1%; background-color: #fff; min-height: 350px; border-radius: 10px; position: relative; background-position:  center center; transition: background-size 0.6s ease, background-position 0.6s ease; overflow: hidden;} 
.tela-2 .qdb {float: left; margin: 1%; background-color: #fff; min-height: 350px; border-radius: 10px; position: relative; background-position:  center center; transition: background-size 0.6s ease, background-position 0.6s ease; overflow: hidden;} 
.tela-2 .quadro-f {width: 68%; background-position: right bottom; background-size: 65%;}
.tela-2 .quadro-m {width: 28%; background-position: right bottom; background-size: 100%;}
.tela-2 .quadro-f .texto {float: left; width: 45%; padding: 60px 0 0 20px;}
.tela-2 .quadro-f h2 {font-size: 2.8em; margin-bottom: 20px; color: var(--cor_1);}
.tela-2 .quadro-m .texto {width: 100%; padding: 20px 20px 0 20px;}
.tela-2 .quadro-m h2 {font-size: 1.8em; margin-bottom: 5px; color: var(--cor_1);}

.tela-2 .link {font-weight: 900; font-size: 1.2em; color: var(--cor_2);}
.tela-2 .link:hover {color: var(--cor_1);}
.tela-2 i {font-size: 1.4em; margin-left: 5px; position: relative; top: 3px;}

.tela-2 .qda:hover { background-size: 70%; background-position: right center; }
.tela-2 .qdb:hover { background-size: 110%;}

.tela-2 .quadro-padrao {float: left; background-color: #fff; padding: 15px; border-radius: 10px; width: 31.3%; margin: 1%;}
.tela-2 .menor {font-size: 1em !important; top: 0px; position: relative; color: var(--cor_2);}
.tela-2 .quadro-padrao h2 {font-size: 1em;}
/* ======================================================= */
.tela-3 { padding: 60px 0 20px 0;}
.tela-3 h1 { text-align: center; font-size: 2em; margin-bottom: 40px; color: var(--cor_1); }

.slick-marcas .quadro { width: 80%; height: 90px; background-position: center; margin: auto; }
.slick-marcas .quadro:hover { filter: grayscale(0%); transform: translateY(-3px); }
.slick-slide { padding: 10px 0; }
.slick-slide > div { margin: 0 10px; }
/* ======================================================= */
.chamada { position: relative; padding: 40px 0; background-color: var(--cor_texto);}
.chamada .content { display: flex; align-items: center; justify-content: space-between; gap: 4%; }
.chamada .esquerda { width: 62%; float: none; }
.chamada .direita { width: 34%; float: none; display: flex; justify-content: flex-end; }
.chamada h1 { color: var(--cor_2); margin-bottom: 10px; }
.chamada p { color: #fff; }
/* ======================================================= */
footer { background: var(--cor_1); color: #fff; padding-top: 20px; border-top: 15px solid var(--cor_2);}
footer .content { display: grid; grid-template-columns: repeat(12, 1fr); gap: 40px; }
footer .quadro { grid-column: span 4; }
footer .logo { width: 180px; height: 120px; margin: 0 auto 20px auto;}
footer h2 { color: var(--cor_2); font-size: 1.1rem; margin-bottom: 10px; }

footer .social {width: 100%; text-align: center;}
footer .social a li { color: #fff; font-size: 1.2em; padding: 0 15px; display: inline-flex; align-items: center; justify-content: center; transition: all .25s ease; }
footer .social a li:hover {color: var(--cor_2); transform: translateY(-2px); }

footer .sub li { color: #fff;  font-size: 0.9em; padding-bottom: 5px;}
footer .sub li a { color: #fff; }
footer .sub a:hover {color: var(--cor_2);}
footer p {line-height: 22px !important;}
footer a {color: #fff;}
footer a:hover {color: var(--cor_2);}

footer .dados li { color: #fff; font-size: 0.8em; display: flex; }
footer .dados i { color: var(--cor_2); min-width: 20px; margin: 5px 5px 0 0; float: left; height: 40px;}
/* ======================================================= */
.fim { width: 100%; text-align: center; padding: 15px 0;background-color: var(--cor_3); }
.fim .content {display: inline-block;}
footer .fim p { color: #fff; font-size: 0.8em; }
footer .fim a { color: #fff; }
footer .fim a:hover { color: var(--cor_2); }
/* ======================================================= */
.navegacao {width: 100%; display: table; background-color: var(--cor_texto); padding: 15px 0; text-align: center;}
.navegacao li {color: #fff; font-size: 0.9em; display: inline-block;  position: relative; z-index: 999999;}
.navegacao a {color: #fff;}
.navegacao a:hover {color: var(--cor_2);}
/* ======================================================= */
.contato { padding: 60px 0; background: #fff; }
.contato .content { display: grid; grid-template-columns: repeat(12, 1fr); gap: 22px; }
.contato .quadro { background: #fff; padding: 24px; border: 1px solid rgba(0,0,0,0.06); border-radius: 16px; box-shadow: 0 10px 26px rgba(0,0,0,0.06); }
.contato .infos { grid-column: span 5; }
.contato .formulario { grid-column: span 7; }
.contato h2 { font-size: 1.4rem; margin-bottom: 15px; color: var(--cor_1); }

.lista-contato { display: flex; flex-direction: column; gap: 14px; }
.lista-contato li { display: flex; align-items: flex-start; gap: 12px; padding: 12px; border-radius: 12px; background: #fafbfc; }
.lista-contato i { color: var(--cor_2); font-size: 1.2rem; margin-top: 2px; }
.lista-contato strong { display: block; color: var(--cor_1); }
.lista-contato p { color: var(--cor_1); font-size: 1em;}

.form-contato { display: flex; flex-direction: column; gap: 14px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.form-group { display: flex; flex-direction: column; gap: 6px; }
.form-group label { font-weight: 700; color: var(--cor_1); font-size: 0.95em; }
.form-group input, .form-group textarea { width: 100%; padding: 12px 14px; border-radius: 10px; border: 1px solid rgba(0,0,0,0.12); font-family: var(--font_p); background: #fff; color: #2a3136; outline: none; transition: border-color .2s ease, box-shadow .2s ease; }
.form-group textarea { resize: none;}
.form-group input:focus, .form-group textarea:focus { border-color: var(--cor_2); box-shadow: 0 0 0 3px rgba(196,192,38,0.25); }
.form-contato .botao { align-self: flex-start; }
/* ======================================================= */
.marcas-page { padding: 60px 0; background: #fff; }
.marcas-page .intro { text-align: center; max-width: 860px; margin: 0 auto 30px auto; }
.marcas-page .intro h2 { color: var(--cor_1); font-size: 1.8em; margin-bottom: 8px; }
.marcas-page .intro p { color: var(--cor_texto); }

.grid-marcas { display: grid; grid-template-columns: repeat(12, 1fr); gap: 18px; }
.card-marca { grid-column: span 3; background: #fff; border: 1px solid rgba(0,0,0,0.06); border-radius: 12px; padding: 16px; text-align: center; transition: transform .2s ease, box-shadow .2s ease, filter .2s ease; }
.card-marca .logo { width: 100%; height: 110px; background-position: center; background-repeat: no-repeat; background-size: contain; filter: grayscale(30%); margin-bottom: 10px; }
.card-marca h3 { font-size: 1rem; font-weight: 700; color: var(--cor_1); }
.card-marca:hover { transform: translateY(-3px); box-shadow: 0 12px 28px rgba(0,0,0,0.12); }
.card-marca:hover .logo { filter: grayscale(0%); }
/* ======================================================= */
.interna {width: 100%; padding: 60px 0;}
/* ======================================================= */
.produto-capa { padding: 80px 0; background: var(--cor_1); }
.produto-capa h2 { color: var(--cor_2); font-size: 2em; margin-bottom: 8px; }
.produto-capa p { color: #fff; }

.produto-conteudo { padding: 50px 0; background: #fff; }
.produto-conteudo .texto { max-width: 920px; margin: 0 auto; font-size: 1.05rem; line-height: 1.8; color: var(--cor_texto); }
.produto-conteudo .texto h2, .produto-conteudo .texto h3 { color: var(--cor_1); margin: 20px 0 10px 0; }
.produto-conteudo .texto ul { padding-left: 18px; }
.produto-conteudo .texto a { color: var(--cor_3); }
.produto-conteudo .texto a:hover { color: var(--cor_2); }
/* ======================================================= */
.produto-hero { position: relative; padding: 160px 0 120px 0;  background-size: 25%; background-position: bottom right;}
.produto-hero::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0.25) 0%, rgba(0,0,0,0.45) 100%); z-index: 1; }
.produto-hero .content { position: relative; z-index: 2; }
.produto-hero h1 { font-size: 2.6em; color: var(--cor_2); text-shadow: 0 8px 24px rgba(0,0,0,0.35); margin-bottom: 10px; font-weight: 900; }
.produto-hero p { color: #fff; }

.produto-detalhes { padding: 60px 0; background: #fff; }
.produto-detalhes .content { display: grid; grid-template-columns: repeat(12, 1fr); gap: 24px; }
.produto-detalhes .principal { grid-column: span 8; }
.produto-detalhes .aside { grid-column: span 4; display: flex; flex-direction: column; gap: 18px; }
.produto-detalhes .card { background: #fff; border: 1px solid rgba(0,0,0,0.06); border-radius: 12px; padding: 24px; }
.produto-detalhes .card-aside { background: #fff; border: 1px solid rgba(0,0,0,0.06); border-radius: 12px; padding: 20px; }
.produto-detalhes .card-aside h3 { color: var(--cor_1); font-size: 1.1rem; margin-bottom: 8px; }
.list-check { display: flex; flex-direction: column; gap: 10px; }
.list-check li { display: flex; align-items: flex-start; gap: 8px; color: var(--cor_texto); }
.list-check i { color: var(--cor_2); margin-top: 2px; }