:root {
--orange: #f7931e;
--orange-700: #e67a00;
--blue: #233a8b;
--blue-900: #14235c;
--text: #0e1420;
--muted: #6b7280;
--bg: #f8fafc;
--card: #ffffff;
--shadow: 0 10px 30px rgba(20, 35, 92, .15);
}
* {
box-sizing: border-box
}
html, body {
margin: 0;
padding: 0;
font-family: Inter, system-ui, Segoe UI, Roboto, Arial, sans-serif;
color: var(--text);
background: var(--bg)
}
img {
/*max-width: 100%;
display: block;*/
}
/* ======== OFFSET GLOBAL PARA HEADER STICKY ======== */ :root {
--header-offset: 100px; /* altura aproximada do header; ajuste fino se quiser */
}
/* rolagem suave + reserva de espaço do header ao ancorar (#) */
html {
scroll-behavior: smooth;
scroll-padding-top: var(--header-offset);
}
/* garante offset mesmo se o container de rolagem não for */
#home, #servicos, #proposta, #formularios, #financiamento, #contato, .section {
scroll-margin-top: var(--header-offset);
}
/* em telas menores o header costuma ficar um pouco menor */
@media (max-width: 768px) {
:root {
--header-offset: 140px;
}
}
.center {
max-width: 1280px;
padding: 0 2%;
margin: 0 auto;
}
.w33 {
width: 33.3%;
padding: 0 10px;
}
.w19 {
width: 19%;
padding: 0 10px;
}
.w25 {
width: 25%;
padding: 0 10px;
}
.w30 {
width: 30%;
padding: 0 10px;
}
.w40 {
width: 40%;
padding: 0 10px;
}
.w50 {
width: 50%;
padding: 0 10px;
}
.w60 {
width: 60%;
padding: 0 10px;
}
.w70 {
width: 70%;
padding: 0 10px;
}
.w80 {
width: 80%;
padding: 0 10px;
}
.w100 {
width: 100%;
padding: 0 10px;
}
.center {
max-width: 1280px;
padding: 0 2%;
margin: 0 auto;
}
.left {
float: left;
}
.right {
float: right;
}
.clear {
clear: both;
}
.linha {
border-bottom: 1px solid #C4C6CC;
}
.container {
width: min(1100px, 92%);
margin-inline: auto;
}
/* ==== TOPO =================================================== */
.topbar {
/*position: sticky;
top: 0;
z-index: 1000;*/
background: linear-gradient(90deg, #f7931e, #e67a00);
/*color: #fff;
border-bottom: 4px solid var(--orange);
box-shadow: var(--shadow)*/
}
.topbar .container {
/* LOGO em cima, MENU abaixo — ambos centralizados
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
padding: 12px 0;*/
}
.brand {
display: flex;
align-items: center;
gap: 12px;
text-decoration: none;
color: #fff;
justify-content: center;
}
.brand img {
height: 100px;
width: auto;
border-radius: 8px;
box-shadow: 0 0px 0px rgba(0, 0, 0, .25)
}
.brand-text {
font-weight: 700;
letter-spacing: .2px
}
.brand-text span {
font-weight: 400;
opacity: .9;
margin-left: 4px
}
/* MENU desktop: logo em cima, menu abaixo CENTRALIZADO */
.menu {
display: flex;
justify-content: center;
align-items: center;
gap: 18px;
margin: 0; /* sem empurrar para as laterais */
width: 100%;
}
.menu a {
color: #fff;
text-decoration: none;
font-weight: 600;
opacity: .95;
padding: 10px;
border-radius: 10px
}
.menu a:is(:hover, :focus) {
background: rgba(255, 71, 0, 0.83);
color: rgba(255, 255, 255, 1.00);
text-align: center;
}
/* Botão hamburger (aparece só no mobile) */
.hamburger {
display: none;
background: transparent;
border: 0;
width: 42px;
height: 42px;
padding: 0;
cursor: pointer;
border-radius: 10px;
}
.hamburger span {
display: block;
height: 3px;
background: #422e64;
margin: 6px 8px;
border-radius: 2px;
transition: .3s
}
.headder {
padding: 20px;
text-align: center;
color:rgba(3,2,45,1.00);
border-bottom: 4px solid rgba(2,3,43,1.00);
}
.headder h1 {
font-size: 40px;
color:rgba(3,2,45,1.00);
font-weight: 700;
}
.headder h2 {
font-size: 30px;
color:rgba(3,2,45,1.00);
font-weight: 700;
}
.headder h3 {
font-size: 25px;
color:rgba(3,2,45,1.00);
font-weight: 700;
}
.headder h4 {
font-size: 18px;
color:rgba(3,2,45,1.00);
font-weight: 700;
}
.headder p {
font-size: 18px;
color:rgba(3,2,45,1.00);
font-weight: 700;
text-align: justify;
}
/* Auxiliares de layout existentes */
.logo {
/*padding: 20px;*/
}
.logo h1 {
font-size: 40px;
color:rgba(3,2,45,1.00);
font-weight: 700;
}
.logo h2 {
font-size: 20px;
color:rgba(3,2,45,1.00);
font-weight: 700;
}
.logo h3 {
font-size: 20px;
color:rgba(3,2,45,1.00);
font-weight: 700;
/*line-height: 5.6;*/
}
.logo h4 {
font-size: 18px;
color:rgba(3,2,45,1.00);
font-weight: 700;
}
.logo p {
font-size: 18px;
color:rgba(3,2,45,1.00);
text-align: justify;
}
.menu-real {
padding: 00px;
}
/* ==== HERO & CONTEÚDO ======================================= */
.credenciais {
list-style: none;
padding: 0;
margin: 12px 0 24px;
display: flex;
flex-wrap: wrap;
gap: 16px
}
.corBotao a {
color: rgba(181, 68, 9, 1.00);
text-decoration: none;
}
.credenciais a {
color: rgba(181, 68, 9, 1.00);
text-decoration: none;
}
.btn {
display: inline-block;
background: var(--orange);
color: #fff;
padding: 12px 20px;
border-radius: 12px;
text-decoration: none;
font-weight: 800;
letter-spacing: .3px;
box-shadow: 0 8px 20px rgba(247, 147, 30, .35);
transition: .2s
}
.btn:hover {
background: var(--orange-700);
transform: translateY(-1px)
}
.btn.outline {
background: transparent;
border: 2px solid var(--orange);
color: var(--orange)
}
.btn.outline:hover {
background: var(--orange);
color: #fff
}
.section {
padding-top: 10px;
}
.section.alt {
backgroundy: #fff
}
.grid-3 {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px
}
.grid-2 {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 24px
}
.grid-5 {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 14px
}
.mt-64 {
margin-top: 64px
}
.card {
background: var(--card);
border: 1px solid #eef2ff;
border-radius: 18px;
padding: 24px;
box-shadow: var(--shadow)
}
.card h3 {
margin-top: 0;
color: var(--blue)
}
.form {
background: #fff;
border: 1px solid #e5e7eb;
border-radius: 16px;
padding: 20px;
box-shadow: var(--shadow)
}
.form fieldset {
border: 1px dashed #d1d5db;
border-radius: 12px;
margin: 12px 0;
padding: 12px
}
.form legend {
padding: 0 6px;
font-weight: 700;
color: var(--blue)
}
.form label {
display: block;
font-size: 14px;
margin: 8px 0
}
.form input, .form textarea, .form select {
width: 100%;
padding: 12px 14px;
border: 1px solid #cbd5e1;
border-radius: 12px;
background: #f9fafb;
outline: none;
transition: .2s
}
.form input:focus, .form textarea:focus {
border-color: var(--blue)
}
.note {
color: var(--muted);
margin-top: 8px
}
.banks .bank {
/*display: flex;*/
align-items: center;
justify-content: center;
padding: 9px;
/*border-radius: 14px;
background: #fff;
border: 1px solid #e5e7eb;*/
text-decoration: none;
color: var(--blue-900);
flex-wrap: wrap;
flex-direction: column-reverse;
align-content: flex-start;
width: 300px;
}
.banks .bank:hover {
transform: translateY(-2px)
}
.contact {
list-style: none;
padding: 0;
margin: 0 0 8px
}
.contact li {
margin: 10px 0
}
.small {
font-size: 12px
}
.muted {
color: var(--muted)
}
.map iframe {
width: 100%;
height: 300px;
border: 0;
border-radius: 14px;
box-shadow: var(--shadow)
}
.footer {
background: linear-gradient(180deg, var(--blue), var(--blue-900));
color: #fff;
padding: 26px 0;
border-top: 4px solid var(--orange)
}
.footer-nav {
display: flex;
flex-wrap: wrap;
gap: 16px;
margin-bottom: 6px
}
.footer-nav a {
color: #fff;
text-decoration: none;
font-weight: 600;
opacity: .95
}
/* ==== BOTÕES FLUTUANTES ===================================== */
.float-left, .float-right {
position: fixed;
top: 93%;
display: flex;
flex-direction: column;
gap: 10px;
z-index: 999
}
.float-left {
left: 12px
}
.float-right {
right: 12px
}
.float-btn {
display: grid;
place-items: center;
width: 44px;
height: 44px;
border-radius: 50%;
background: var(--orange);
color: #fff;
text-decoration: none;
box-shadow: 0 10px 16px rgba(247, 147, 30, .45)
}
.float-right .float-btn {
background: var(--blue)
}
.float-btn:hover {
transform: translateY(-2px)
}
.i {
width: 20px;
height: 20px;
display: inline-block;
background: currentColor;
mask-size: cover;
-webkit-mask-size: cover
}
.i-facebook {
mask: url('data:image/svg+xml;utf8,') no-repeat center
}
.i-instagram {
mask: url('data:image/svg+xml;utf8,') no-repeat center
}
.i-whatsapp {
mask: url('data:image/svg+xml;utf8,') no-repeat center
}
.i-phone {
mask: url('data:image/svg+xml;utf8,') no-repeat center
}
[data-animate] {
opacity: 0;
transform: translateY(10px);
transition: .6s ease
}
[data-animate].visible {
opacity: 1;
transform: none
}
/* ==== RESPONSIVO ============================================ */
@media (max-width: 1024px) {
.grid-3 {
grid-template-columns: repeat(2, 1fr)
}
.grid-5 {
grid-template-columns: repeat(3, 1fr)
}
}
/* ===== MOBILE (≤768px): menu em tela cheia e X no topo-direito */
@media (max-width: 768px) {
/* botão hambúrguer fixo no topo-direito */
.hamburger {
display: block;
position: fixed;
top: 12px;
right: 12px;
z-index: 1101;
background: transparent;
}
/* overlay de menu ocupando 100% da tela */
.menu {
position: fixed;
inset: 0;
display: none; /* mostra com .open */
flex-direction: column;
justify-content: center;
align-items: center;
gap: 16px;
padding: 80px 24px 24px; /* espaço pro botão no topo */
background: #fffffff5;
color: var(--text);
border-radius: 0;
box-shadow: none;
z-index: 1100;
}
.menu a {
color: var(--blue-900);
font-size: 1.25rem;
}
.menu a:is(:hover, :focus) {
width: 100%;
}
/* topo um pouco mais compacto */
.topbar .container {
padding: 8px 0;
}
.grid-3 {
grid-template-columns: 1fr
}
.grid-2 {
grid-template-columns: 1fr
}
.grid-5 {
grid-template-columns: repeat(2, 1fr)
}
}
/* abertura/fechamento do menu mobile */
.menu.open {
display: flex;
}
.hamburger.active span:nth-child(1) {
transform: translateY(9px) rotate(45deg);
}
.hamburger.active span:nth-child(2) {
opacity: 0;
}
.hamburger.active span:nth-child(3) {
transform: translateY(-9px) rotate(-45deg);
}
/* === FORM: labels de checkbox/radio em 3 por linha === */
/* Aplique no fieldset a classe "labels-3": */
.form fieldset.labels-3 {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 10px 16px; /* espaço entre opções */
align-items: start;
}
.form fieldset.labels-3 > legend {
grid-column: 1 / -1; /* legenda ocupa a largura toda */
margin-bottom: 6px;
}
.form fieldset.labels-3 > label {
display: flex; /* label vira “pílula” clicável */
align-items: center;
gap: 8px;
margin: 0; /* remove margens verticais grandes */
}
.form fieldset.labels-3 > label input[type="checkbox"], .form fieldset.labels-3 > label input[type="radio"] {
width: auto; /* não herdar width:100% dos inputs de texto */
}
/* Responsivo: 2 por linha no tablet, 1 por linha no mobile pequeno */
@media (max-width: 768px) {
.form fieldset.labels-3 {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 420px) {
.form fieldset.labels-3 {
grid-template-columns: 1fr;
}
}