:root {
/* ALTERADO AQUI: paleta trocada de navy/azulado para preto puro + dourado */
--hera-escuro: #0f172a;
--hera-preto: #0a0a0a;
--hera-escuro-claro: #262a36;
--hera-dourado: #AD8C1F;
--hera-dourado-claro: #D9A93E;
--hera-creme: #F8F4EC;
--hera-creme-escuro: #EFE7D8;
--hera-texto: #2A2622;
--fonte-titulo: 'Playfair Display', serif;
--fonte-corpo: 'Inter', sans-serif;
}
body {
font-family: var(--fonte-corpo);
color: var(--hera-texto);
background: #fff;
overflow-x: hidden;
}
h1, h2, h3, h4, .fonte-titulo {
font-family: var(--fonte-titulo);
}
.text-dourado { color: var(--hera-dourado) !important; }
.bg-escuro { background-color: var(--hera-escuro) !important; }
.bg-creme { background-color: var(--hera-creme) !important; }
.eyebrow {
display: inline-flex; align-items: center; gap: .5rem;
font-size: .78rem; letter-spacing: .16em; text-transform: uppercase;
font-weight: 600; color: var(--hera-dourado);
}
.eyebrow::before { content: ''; width: 26px; height: 2px; background: var(--hera-dourado); display: inline-block; }
/* ---------- Botões ---------- */
.btn-hera {
display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
padding: .9rem 1.9rem; border-radius: 4px; border: 1.5px solid transparent;
font-size: .82rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
text-decoration: none; transition: filter .25s ease, transform .2s ease, background .25s ease, color .25s ease;
}
.btn-hera:hover { transform: translateY(-2px); }
.btn-hera-dourado { background: var(--hera-dourado); border-color: var(--hera-dourado); color: #fff !important; }
.btn-hera-dourado:hover { background: var(--hera-dourado-claro); border-color: var(--hera-dourado-claro); }
.btn-hera-outline { background: transparent; border-color: var(--hera-dourado); color: var(--hera-escuro) !important; }
.btn-hera-outline:hover { background: var(--hera-dourado); color: #fff !important; }
.btn-hera-outline-claro { background: transparent; border-color: rgba(255,255,255,.55); color: #fff !important; }
.btn-hera-outline-claro:hover { background: rgba(255,255,255,.12); border-color: #fff; }
.btn-hera:disabled { opacity: .65; cursor: not-allowed; transform: none; }
/* ---------- Header ---------- */
#header {
position: fixed; top: 0; left: 0; right: 0; z-index: 1030;
background: var(--hera-preto);
padding: .7rem 0;
transition: padding .3s ease, box-shadow .3s ease;
}
#header.scrolled { padding: .45rem 0; box-shadow: 0 6px 24px rgba(0,0,0,.28); }
/* ALTERADO AQUI: logo real da cliente (imagens/otimizadas/hera-logo.webp) no lugar do monograma desenhado em CSS */
.logo-img { height: 44px; width: auto; display: block; }
#header .nav-link {
color: rgba(255,255,255,.82); font-weight: 500; font-size: .88rem;
padding: .5rem .9rem !important; transition: color .25s ease;
}
#header .nav-link:hover { color: #fff; }
#header .nav-link.ativo {
color: #fff !important; border: 1px solid var(--hera-dourado); border-radius: 3px;
}
#header .telefone-header { color: #fff; font-size: .88rem; font-weight: 600; text-decoration: none; display: inline-flex; align-items: center; gap: .5rem; white-space: nowrap; }
#header .telefone-header i { color: #25D366; font-size: 1.1rem; }
#header .navbar-toggler { border: none; box-shadow: none; }
#header .navbar-toggler-icon { filter: invert(1) brightness(2); }
/* ---------- Hero ---------- */
/* TODO: foto placeholder (CC BY 2.0 - Shixart1985/Wikimedia Commons); trocar por foto real de imóvel/ambiente Hera antes de publicar */
/* ALTERADO AQUI: overflow visível + z-index, pra o card do formulário poder "sair" do hero por cima da seção seguinte */
#hero {
padding-top: 8.5rem; padding-bottom: 5rem; position: relative; overflow: visible; z-index: 2;
/* ALTERADO AQUI: WebP no lugar do JPG (578 KB -> 153 KB). Este é o provável
elemento de LCP da página, por isso também tem no . */
background: url('../imagens/otimizadas/hera-hero-bg.webp') center / cover no-repeat;
background-color: var(--hera-preto);
}
#hero::before {
content: ''; position: absolute; inset: 0;
background: linear-gradient(100deg,
rgba(10, 10, 10, .96) 0%,
rgba(10, 10, 10, .93) 32%,
rgba(10, 10, 10, .74) 52%,
rgba(10, 10, 10, .42) 70%,
rgba(10, 10, 10, .30) 100%);
}
#hero::after {
content: ''; position: absolute; inset: 0;
background: linear-gradient(180deg, rgba(0,0,0,0) 55%, rgba(10,10,10,.5) 100%);
}
/* ALTERADO AQUI: abaixo de 992px as colunas empilham e o texto ocupa a largura toda, então o gradiente diagonal
(pensado pra iluminar só a coluna da imagem à direita) deixava a metade direita do texto sobre o fundo claro da foto */
@media (max-width: 991px) {
#hero::before { background: rgba(10, 10, 10, .88); }
}
#hero .container { position: relative; z-index: 1; }
#hero .eyebrow { color: var(--hera-dourado); }
#hero .eyebrow::before { background: var(--hera-dourado); }
#hero h1 { font-size: clamp(2.1rem, 4vw, 3rem); font-weight: 700; line-height: 1.12; color: #fff; }
#hero .hero-subtitulo { color: rgba(255,255,255,.82); font-size: 1.02rem; max-width: 520px; line-height: 1.65; }
.lista-selos { display: flex; flex-wrap: wrap; gap: 1.6rem; margin-top: 2.2rem; }
.selo-item { display: flex; flex-direction: column; align-items: flex-start; gap: .6rem; max-width: 150px; }
.selo-item .selo-icone {
width: 44px; height: 44px; display: flex; align-items: center; justify-content: center;
background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.16); color: var(--hera-dourado);
border-radius: 3px; font-size: 1.05rem; backdrop-filter: blur(2px);
}
.selo-item span { font-size: .8rem; color: rgba(255,255,255,.78); line-height: 1.35; }
/* ALTERADO AQUI: transform empurra o card pra baixo sem alterar a altura do hero (a coluna do título já define essa altura), fazendo ele "vazar" por cima da seção seguinte */
.card-form-hero-wrap { position: relative; transform: translateY(90px); }
.card-form-hero-wrap::before {
content: ''; position: absolute; right: -16px; bottom: -16px; width: 100%; height: 100%;
border: 1.5px solid var(--hera-dourado); border-radius: 4px 32px 4px 32px; z-index: 0;
}
.card-form-hero-wrap .card-form-hero { position: relative; z-index: 1; }
/* ---------- Card do formulário (hero) ---------- */
/* ALTERADO AQUI: card mais compacto (menos padding) */
.card-form-hero {
background: linear-gradient(160deg, var(--hera-escuro-claro) 0%, var(--hera-preto) 100%); border-radius: 4px 32px 4px 32px;
padding: 1.9rem 2.1rem; box-shadow: 0 30px 60px -20px rgba(10,10,10,.45); position: relative; overflow: hidden;
}
.card-form-hero::before {
content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1px;
background: linear-gradient(160deg, rgba(173,140,31,.55), transparent 40%);
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none;
}
/* ALTERADO AQUI: títulos/campos com menos respiro vertical */
.card-form-hero h2 { color: #fff; font-size: 1.4rem; font-weight: 700; margin-bottom: .4rem; }
.card-form-hero .texto-apoio { color: rgba(255,255,255,.72); font-size: .82rem; margin-bottom: 1rem; }
.card-form-hero .form-label { color: rgba(255,255,255,.85); font-size: .74rem; font-weight: 500; margin-bottom: .2rem; }
.card-form-hero .form-control, .card-form-hero .form-select {
background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.18); color: #fff;
border-radius: 3px; padding: .5rem .8rem; font-size: .85rem;
}
.card-form-hero .form-control::placeholder { color: rgba(255,255,255,.4); }
.card-form-hero .form-control:focus, .card-form-hero .form-select:focus {
background: rgba(255,255,255,.1); border-color: var(--hera-dourado); color: #fff;
box-shadow: 0 0 0 .18rem rgba(173,140,31,.25);
}
.card-form-hero .form-select option { color: #000; }
.card-form-hero .form-check-label { color: rgba(255,255,255,.75); font-size: .78rem; }
.card-form-hero .form-check-input { background-color: rgba(255,255,255,.08); border-color: rgba(255,255,255,.35); }
.card-form-hero .form-check-input:checked { background-color: var(--hera-dourado); border-color: var(--hera-dourado); }
.card-form-hero .btn-hera { padding: .7rem 1.9rem; }
.rodape-seguranca { color: rgba(255,255,255,.55); font-size: .72rem; text-align: center; margin-top: .7rem; display: flex; align-items: center; justify-content: center; gap: .4rem; }
.msg-form-status { border-radius: 3px; padding: .6rem 1rem; font-size: .82rem; margin-top: .7rem; display: none; }
/* Fundo OPACO e texto escuro: a mesma mensagem aparece no card escuro do hero e
no modal de fundo branco. Com fundo translúcido e texto claro (como era), no
modal o texto sumia. Assim o contraste fica ~7:1 nos dois lugares. */
.msg-form-status.sucesso { background: #e8f5e9; color: #1b5e20; border: 1px solid rgba(76,175,80,.45); font-weight: 500; }
.msg-form-status.erro { background: #fdecea; color: #9b1c1c; border: 1px solid rgba(220,53,69,.45); font-weight: 500; }
/* ---------- Biblioteca / grid de e-books ---------- */
#biblioteca { padding: 5.5rem 0; }
#biblioteca h2 { font-size: clamp(1.7rem, 3vw, 2.3rem); font-weight: 700; }
.capa-ebook {
aspect-ratio: 3/4; border-radius: 4px; position: relative; overflow: hidden;
background: linear-gradient(155deg, var(--hera-escuro-claro) 0%, var(--hera-preto) 100%);
display: flex; flex-direction: column; justify-content: space-between; padding: .9rem;
box-shadow: 0 14px 28px -14px rgba(10,10,10,.5);
}
.capa-ebook .badge-volume {
align-self: flex-start; background: var(--hera-dourado); color: #fff;
font-size: .62rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
padding: .3rem .55rem; border-radius: 2px;
}
.capa-ebook .capa-titulo {
color: #fff; font-family: var(--fonte-titulo); font-weight: 700; font-size: .98rem;
line-height: 1.22; text-transform: uppercase;
}
.capa-ebook .capa-marca {
display: flex; align-items: center; gap: .35rem; color: rgba(255,255,255,.55);
font-size: .6rem; letter-spacing: .18em; text-transform: uppercase; border-top: 1px solid rgba(255,255,255,.15); padding-top: .5rem;
}
.capa-ebook-imagem { padding: 0; }
.capa-ebook-imagem img { width: 100%; height: 100%; object-fit: cover; display: block; }
.card-ebook { height: 100%; display: flex; flex-direction: column; }
.card-ebook .titulo-ebook { font-size: 1.02rem; font-weight: 700; margin: 1rem 0 .5rem; line-height: 1.32; }
.card-ebook .desc-ebook { color: #6b6459; font-size: .85rem; line-height: 1.55; flex-grow: 1; margin-bottom: 1rem; }
.card-ebook .btn-hera { width: 100%; }
/* Guia ainda em produção: continua na vitrine (captura lead) mas anuncia o
estado, pra ninguém esperar um download que não vem. A capa perde saturação
e ganha o selo; o botão fica secundário pra não competir com os prontos. */
.selo-em-breve {
position: absolute; top: .6rem; right: .6rem; z-index: 2;
background: rgba(10,10,10,.82); color: #fff;
font-size: .6rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
padding: .32rem .6rem; border-radius: 2px;
border: 1px solid var(--hera-dourado);
}
.card-ebook-em-breve .capa-ebook img { filter: grayscale(.55) brightness(.92); }
.card-ebook-em-breve .capa-ebook { box-shadow: 0 10px 22px -16px rgba(10,10,10,.45); }
/* --------------------------------------------------------- */
/* -- begin:: Capa clicável (abre o mesmo modal do botão) */
/* -- Vale desktop e mobile: só cursor + leve "lift" no hover, */
/* -- não desloca nem redimensiona nada. */
/* --------------------------------------------------------- */
.capa-clicavel {
cursor: pointer;
position: relative;
transition: transform 0.25s ease;
}
.capa-clicavel:hover { transform: translateY(-3px); }
.capa-clicavel:focus-visible {
outline: 2px solid var(--hera-dourado);
outline-offset: 3px;
}
/* -- end:: Capa clicável ------------------------------------ */
/* ---------- Faixa escura (Por que baixar + Especialista) ---------- */
/* ALTERADO AQUI: gradiente único no wrapper para não ter corte entre as duas seções */
.faixa-escura-hera { background: linear-gradient(180deg, var(--hera-escuro-claro) 0%, var(--hera-preto) 100%); }
/* ---------- Por que baixar ---------- */
#porque { background: transparent; padding: 3rem 0; }
#porque h2 { color: #fff; font-size: 1.5rem; font-weight: 700; line-height: 1.3; margin: 0; text-align: left; }
.selo-porque { display: flex; flex-direction: column; align-items: center; text-align: center; gap: .8rem; }
.selo-porque i { color: var(--hera-dourado); font-size: 1.7rem; }
.selo-porque span { color: rgba(255,255,255,.85); font-size: .85rem; line-height: 1.35; }
/* ALTERADO AQUI: título e grid agora ficam em col-lg-3/col-lg-9 (ver index.php); só falta centralizar o título quando empilha */
@media (max-width: 991px) { #porque h2 { text-align: center; margin-bottom: 1rem; } }
/* --------------------------------------------------------- */
/* -- begin:: Cards dourados da section "Por que baixar" */
/* --------------------------------------------------------- */
/* ALTERADO AQUI: card com fundo levemente mais claro que a section + borda dourada translúcida (dourado = var(--hera-dourado) #AD8C1F) */
.hera-benefit-card {
background: rgba(255, 255, 255, 0.03);
border: 1px solid rgba(173, 140, 31, 0.4);
border-radius: 10px;
padding: 22px 14px;
height: 100%;
transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}
/* Hover lift: sobe levemente e a borda dourada ganha força */
.hera-benefit-card:hover {
transform: translateY(-5px);
border-color: rgba(173, 140, 31, 0.85);
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.25);
}
/* --------------------------------------------------------- */
/* -- end:: Cards dourados da section "Por que baixar" */
/* --------------------------------------------------------- */
/* ---------- Especialista ---------- */
/* Continuação visual da faixa escura de #porque — mesmo fundo, sem corte entre as seções */
/* ALTERADO AQUI: foco de luz dourado atrás da coluna de texto central */
#especialista { background: transparent; padding: 4rem 0 5rem; position: relative; overflow: hidden; }
#especialista::before {
content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
width: 700px; height: 700px; max-width: 90vw;
background: radial-gradient(circle, rgba(217,169,62,.18) 0%, rgba(217,169,62,0) 70%);
pointer-events: none; z-index: 0;
}
#especialista .container { position: relative; z-index: 1; }
.foto-especialista {
aspect-ratio: 3/4; border-radius: 4px; position: relative; overflow: hidden;
box-shadow: 0 24px 44px -20px rgba(0,0,0,.5); border: 1px solid rgba(173,140,31,.4);
}
.foto-especialista img { width: 100%; height: 100%; object-fit: cover; display: block; }
.foto-especialista .tag-hera {
position: absolute; left: 1rem; bottom: 1rem; background: rgba(0,0,0,.45); color: var(--hera-dourado);
font-size: .68rem; letter-spacing: .2em; text-transform: uppercase; padding: .35rem .7rem; border-radius: 2px;
}
#especialista .eyebrow { color: var(--hera-dourado); }
#especialista .eyebrow::before { background: var(--hera-dourado); }
#especialista h2 { font-size: clamp(1.6rem, 3vw, 2.1rem); font-weight: 700; color: #fff; }
#especialista p.text-muted { color: rgba(255,255,255,.75) !important; }
.assinatura-especialista { font-family: 'Playfair Display', serif; font-style: italic; font-size: 1.4rem; color: var(--hera-dourado); margin-bottom: 0; }
.cargo-especialista { font-size: .8rem; color: rgba(255,255,255,.65); letter-spacing: .04em; text-transform: uppercase; }
.card-depoimento {
background: var(--hera-creme); border-left: 3px solid var(--hera-dourado); border-radius: 2px;
padding: 2.2rem; position: relative;
}
.card-depoimento i.fa-quote-right { color: var(--hera-dourado); font-size: 1.8rem; opacity: .5; margin-bottom: 1rem; display: block; }
.card-depoimento p { font-family: var(--fonte-titulo); font-size: 1.2rem; line-height: 1.5; color: var(--hera-texto); }
.card-depoimento footer { color: #6b6459; font-size: .85rem; margin-top: 1rem; }
/* --------------------------------------------------------- */
/* -- begin:: FAQ (accordion) */
/* -- ALTERADO AQUI: seção nova. Usa o accordion do Bootstrap */
/* -- (já carregado) e só sobrescreve cores, bordas e fontes */
/* -- pra seguir a paleta preto/dourado do resto da página. */
/* --------------------------------------------------------- */
#faq {
padding: 5.5rem 0;
/* Âncora dos ramos decorativos + corta o que sangra para fora */
position: relative;
overflow: hidden;
/* Botão único pra calibrar a presença dos ramos */
--ramo-opacidade: .16;
}
#faq h2 { font-size: clamp(1.7rem, 3vw, 2.3rem); font-weight: 700; }
#faq .eyebrow::before { display: none; }
/* Conteúdo sempre por cima dos ramos */
#faq .container { position: relative; z-index: 1; }
/* --------------------------------------------------------- */
/* -- Ramos ornamentais (SVG inline, ver ramoDecorativo()) */
/* -- currentColor: a cor vem daqui, não do markup. */
/* --------------------------------------------------------- */
.ramo-decorativo {
position: absolute;
z-index: 0;
width: 340px;
height: auto;
color: var(--hera-dourado);
opacity: var(--ramo-opacidade);
pointer-events: none;
user-select: none;
}
/* Sobe da base esquerda em diagonal */
.ramo-faq-esq { left: -85px; bottom: 26px; transform: rotate(-24deg); }
/* Mesmo desenho girado 180°: entra pela borda direita e desce para a esquerda */
.ramo-faq-dir { right: -85px; top: 30px; transform: rotate(204deg); }
.accordion-hera .accordion-item {
border: none;
border-bottom: 1px solid var(--hera-creme-escuro);
background: transparent;
}
.accordion-hera .accordion-item:first-of-type { border-top: 1px solid var(--hera-creme-escuro); }
.accordion-hera .accordion-button {
font-family: var(--fonte-titulo);
font-size: 1.05rem;
font-weight: 700;
color: var(--hera-texto);
background: transparent;
padding: 1.25rem .25rem;
box-shadow: none;
}
.accordion-hera .accordion-button:not(.collapsed) { color: var(--hera-dourado); background: transparent; }
.accordion-hera .accordion-button:focus { box-shadow: 0 0 0 .18rem rgba(173, 140, 31, .28); }
/* Seta própria em dourado — a padrão do Bootstrap é um SVG azul fixo */
.accordion-hera .accordion-button::after {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23AD8C1F'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
background-size: 1.1rem;
width: 1.1rem;
height: 1.1rem;
}
.accordion-hera .accordion-body {
color: #6b6459;
font-size: .93rem;
line-height: 1.7;
padding: 0 .25rem 1.4rem;
}
@media (max-width: 767.98px) {
#faq { padding: 3.5rem 0; --ramo-opacidade: .1; }
#faq .eyebrow { display: block; }
.accordion-hera .accordion-button { font-size: .98rem; padding: 1.1rem .15rem; }
.accordion-hera .accordion-body { font-size: .88rem; }
/* No celular não há folga lateral: os ramos encolhem, ficam mais discretos
e vão para os cantos de cima e de baixo, longe do texto das perguntas. */
.ramo-decorativo { width: 190px; }
.ramo-faq-esq { left: -70px; bottom: -10px; }
.ramo-faq-dir { right: -70px; top: -12px; }
}
/* -- end:: FAQ */
/* ---------- Números (camada 1 do rodapé) ---------- */
/* ALTERADO AQUI: linha divisória dourada sutil embaixo da barra, separando da linha principal */
#numeros { background: var(--hera-preto); padding: 2.6rem 0; border-bottom: 1px solid rgba(173, 140, 31, .25); }
.item-numero { display: flex; align-items: center; gap: .9rem; justify-content: center; }
.item-numero i { color: var(--hera-dourado); font-size: 1.6rem; }
/* ALTERADO AQUI: números um pouco maiores (1.5rem -> 1.75rem) */
.item-numero strong { display: block; color: #fff; font-family: var(--fonte-titulo); font-size: 1.75rem; line-height: 1; }
.item-numero span { display: block; color: rgba(255,255,255,.65); font-size: .78rem; margin-top: .2rem; }
/* ALTERADO AQUI: divisor vertical dourado sutil entre os itens (some no mobile) */
#numeros .row > .col + .col { border-left: 1px solid rgba(173, 140, 31, .22); }
@media (max-width: 767px) {
#numeros .row > .col + .col { border-left: none; }
}
/* --------------------------------------------------------- */
/* -- begin:: Rodapé — 3 camadas (linha principal + direitos) */
/* --------------------------------------------------------- */
footer.footer-hera { color: rgba(255,255,255,.6); font-size: .82rem; }
footer.footer-hera a { color: rgba(255,255,255,.6); text-decoration: none; }
footer.footer-hera a:hover { color: var(--hera-dourado); }
/* Camada 2 — logo + contato + CTA WhatsApp */
.footer-main { background: var(--hera-preto); }
/* ALTERADO AQUI: o contato virou com endereço + telefone + e-mail em
duas linhas. O reset do (itálico e margem do navegador) precisa sair. */
.footer-contact {
font-size: 13px; color: rgba(255, 255, 255, .65);
font-style: normal; line-height: 1.65;
}
.footer-contact span { display: block; }
.footer-contact .footer-contato-linha { display: flex; flex-wrap: wrap; gap: .4rem; }
.footer-contact a { color: rgba(255, 255, 255, .8); text-decoration: none; }
.footer-contact a:hover { color: var(--hera-dourado-claro); text-decoration: underline; }
.footer-cta {
background: var(--hera-dourado); color: #fff;
font-size: 14px; font-weight: 500; padding: 10px 18px; border-radius: 6px;
text-decoration: none; display: inline-flex; align-items: center; gap: 6px;
white-space: nowrap; transition: filter .2s ease, transform .2s ease;
}
.footer-cta:hover { filter: brightness(1.15); transform: translateY(-2px); color: #fff; }
/* Camada 3 — barra de direitos, um tom mais escuro que a linha principal */
.footer-bottom { background: color-mix(in srgb, var(--hera-preto) 80%, black); font-size: 12px; color: rgba(255, 255, 255, .5); }
.footer-credit { color: var(--hera-dourado); text-decoration: none; }
.footer-credit:hover { text-decoration: underline; }
/* ALTERADO AQUI: crédito do rodapé com os logos (Vibe Sites + parceria Imobisoft).
Os têm width/height do arquivo original só pra reservar a proporção; quem
manda no tamanho na tela é o height abaixo. */
.footer-credito {
display: flex; align-items: center; justify-content: center;
flex-wrap: wrap; gap: .5rem;
}
.footer-credito a { display: inline-flex; align-items: center; transition: opacity .2s ease; }
.footer-credito a:hover { opacity: 1; }
.footer-credito .logo-vibe-sites { height: 26px; width: auto; opacity: .9; }
.footer-credito .logo-imobisoft { height: 15px; width: auto; opacity: .9; }
@media (max-width: 767.98px) {
.footer-credito { gap: .4rem; font-size: 11px; }
.footer-credito .logo-vibe-sites { height: 22px; }
.footer-credito .logo-imobisoft { height: 13px; }
}
/* --------------------------------------------------------- */
/* -- end:: Rodapé — 3 camadas (linha principal + direitos) */
/* --------------------------------------------------------- */
/* ---------- WhatsApp flutuante ---------- */
.whatsapp-flutuante {
position: fixed; bottom: 22px; right: 22px; z-index: 1040;
width: 56px; height: 56px; border-radius: 50%;
background: #25D366; color: #fff; display: flex; align-items: center; justify-content: center;
font-size: 1.6rem; box-shadow: 0 8px 22px rgba(0,0,0,.28);
opacity: 1; transition: opacity .25s ease, transform .25s ease;
}
/* ALTERADO AQUI: some quando o rodapé (que já tem CTA de WhatsApp) está visível, evitando sobreposição */
.whatsapp-flutuante.escondido { opacity: 0; transform: scale(.8); pointer-events: none; }
/* ---------- Modal de download ---------- */
#modalDownload .modal-content { border: none; border-radius: 4px; }
#modalDownload .modal-header { background: linear-gradient(160deg, var(--hera-escuro-claro) 0%, var(--hera-preto) 100%); color: #fff; border-radius: 4px 4px 0 0; }
#modalDownload .modal-header .btn-close { filter: invert(1); }
#modalDownload .badge-ebook-modal { background: var(--hera-dourado); color: #fff; font-size: .68rem; }
section { scroll-margin-top: 90px; }
@media (max-width: 767px) {
#hero { padding-top: 5.2rem; }
.card-form-hero { padding: 1.7rem; border-radius: 4px 22px 4px 22px; }
}
/* --------------------------------------------------------- */
/* -- begin:: Ajustes mobile — Hero de tela cheia */
/* -- */
/* -- ATENÇÃO à estrutura: nesta landing o formulário está */
/* -- DENTRO da #hero (é a 2ª coluna do mesmo .row), e não em */
/* -- uma section seguinte. Por isso a altura de tela e a */
/* -- centralização ficam na COLUNA DO TEXTO (.col-hero-texto) */
/* -- e não na #hero: aplicadas na #hero, o card do formulário */
/* -- seria centralizado junto e o CTA não teria para onde */
/* -- rolar. Nada disso roda no desktop. */
/* --------------------------------------------------------- */
@media (max-width: 767.98px) {
/* A tela cheia passou a ser da coluna, então o respiro do header
sai da #hero e entra no padding-top da .col-hero-texto abaixo. */
#hero { padding-top: 0; }
.col-hero-texto {
min-height: 100vh;
min-height: 100svh; /* svh desconta a barra do navegador no iOS/Android */
display: flex;
flex-direction: column;
justify-content: center;
align-items: center; /* text-align sozinho não centraliza filho flex nem quem tem largura própria */
text-align: center;
position: relative; /* âncora da .hero-seta */
/* O header fixo mede ~90px aqui (logo de 44px + paddings do .navbar
e da #header), não os ~4rem do padrão. 7.25rem = ~116px, ou seja
a altura dele + ~1.5rem de respiro. */
padding-top: 7.25rem;
padding-bottom: 3.5rem;
}
/* Etiqueta "BIBLIOTECA HERA" — o traço lateral não funciona centralizado.
O !important é porque o carrega .mb-3 do Bootstrap, que já é !important. */
#hero .eyebrow {
display: block;
font-size: .5625rem;
letter-spacing: 3.5px;
margin-bottom: 1.6rem !important;
}
#hero .eyebrow::before { display: none; }
/* Segura a largura do título e do subtítulo pra não esticarem em telas maiores */
#hero h1,
#hero .hero-subtitulo {
width: 100%;
max-width: 320px;
margin-left: auto;
margin-right: auto;
}
/* !important pelo mesmo motivo da etiqueta: o
carrega .mb-4 do Bootstrap */
#hero h1 {
font-size: 2.4rem;
line-height: 1.08;
margin-bottom: 0 !important;
}
/* Filete decorativo entre o título e o subtítulo */
#hero h1::after {
content: "";
display: block;
width: 44px;
height: 1px;
background: rgba(201, 162, 39, .55);
margin: 1.6rem auto;
}
#hero .hero-subtitulo {
font-size: .875rem;
line-height: 1.6;
margin-bottom: 2.2rem;
}
/* CTA do hero — herda a cor de .btn-hera-dourado, o mesmo botão do formulário.
text-decoration: none porque aqui o elemento é , não