/* ===================================================================
DESIGN SYSTEM — InvestPro
Identidade oficial · Briefing 2026
Paleta : Navy #0c2340 · Blue #0072ce · Silver #d0d3d4
Tipo : Bai Jamjuree + Gotham/Montserrat (labels) + Inter (corpo)
=================================================================== */
:root {
--navy: #0c2340;
--navy-deep: #07152a;
--navy-soft: #13294f;
--blue: #0072ce;
--blue-hover: #0089f1;
--blue-soft: rgba(0, 114, 206, 0.10);
--silver: #d0d3d4;
/* ===== Acento (era dourado — REMOVIDO a pedido do cliente 29/08; remapeado p/ azul da marca) ===== */
--gold: var(--blue); /* #0072ce — filetes, strokes de ícone, acentos on-light */
--gold-bright: #7FB8E8; /* texto pequeno sobre navy (7,46:1 — mesmo do --link-on-dark) */
--gold-text: #005ba5; /* texto sobre branco/off (~5,6:1 — AA) */
--gold-soft: rgba(0, 114, 206, 0.12); /* fundos de chip/halo de ícone (azul) */
--gold-line: rgba(0, 114, 206, 0.55); /* filetes sobre fundo claro (azul) */
/* ===== WhatsApp (verde oficial do canal — decisão #10 do briefing) ===== */
--whatsapp: #25D366;
--whatsapp-hover: #1FBF5C;
--whatsapp-soft: rgba(37, 211, 102, 0.14);
/* ===== Stellantis — Guia SFS Brazil out/2024 v2 (SÓ para hub/blocos da marca; nunca como acento do site) ===== */
--stellantis-blue: #243782;
--stellantis-anthracite: #282b34;
/* acentos do guia (Tangerine #E94E24 · Mint #43AAA0 · Orange #ECA935) só entram
quando houver peça co-branded com assets oficiais — NÃO tokenizar agora. */
/* Link legível sobre painel navy (.form_contact) — P0.2 LGPD (7,46:1) */
--link-on-dark: #7FB8E8;
--bg: #ffffff;
--off: #f5f6f7;
--surface: #f5f6f7;
--surface-2: #ebedf0;
--ink: #131313;
--ink-strong: #0c2340;
--muted: #646464; /* AA normal · 5.92:1 em #fff */
--muted-2: #6f6f6f; /* AA normal · 4.83:1 em #fff (era #8a8a8a, falhava) */
--muted-3: #8a8a8a; /* só uso decorativo (ícones, divisores) — NÃO usar em texto */
--border: #dadada;
--border-2: #ececec;
--on-dark-1: #ffffff;
--on-dark-2: rgba(255, 255, 255, 0.72);
--on-dark-3: rgba(255, 255, 255, 0.48);
/* Tipografia: GOTHAM em tudo (Adobe Fonts kit tke3lxh, família "gotham"
Book 400 + Bold 700 + itálicos) — decisão do cliente 02/09. Google Fonts
(Inter/Bai Jamjuree/Montserrat) removido; fallback = fonte de sistema.
Pesos 300/500/600/800 mapeiam p/ o mais próximo (Book/Bold). */
--font-display: 'gotham', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
--font-body: 'gotham', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
--font-title: 'gotham', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
--font-accent: 'gotham', system-ui, -apple-system, 'Segoe UI', sans-serif;
--font-mono: 'gotham', system-ui, -apple-system, 'Segoe UI', sans-serif;
--max-w: 1440px;
--max-w-med: 1280px;
--gutter: clamp(20px, 4vw, 48px);
--section-pad: clamp(56px, 6vw, 112px); /* G7: era 80/8.5vw/140 — reduz espaço vertical excessivo entre blocos */
--r-sm: 8px;
--r-md: 12px;
--r-lg: 20px;
--r-xl: 28px;
--r-pill: 100px;
--t: 320ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
font-family: var(--font-body);
font-size: 16px;
line-height: 1.6;
color: var(--ink);
background: var(--bg);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
overflow-x: hidden;
font-weight: 400;
}
img, svg { max-width: 100%; display: block; }
/* ===== P0.1 · Cinto de segurança anti-overflow (não substitui fixes pontuais) ===== */
html { overflow-x: hidden; } /* fallback navegadores antigos */
@supports (overflow: clip) {
html, body { overflow-x: clip; } /* clip não vira scroll container — mata o pan lateral do iOS */
}
video, iframe, embed, object { max-width: 100%; }
/* colunas de grid/flex dos layouts 2-col recorrentes podem encolher
abaixo do min-content dos filhos (evita que 1 texto largue a página) */
.sellers_content, .sellers_visual,
.buyers_content, .buyers_visual,
.contact_content,
.hero-master_grid > *, .hero-right-block,
.form-cta-grid > *, .candidatura_grid > *,
.sim-grid > *, .contempladas_cta-grid > *,
.fhalves > *, .footer_right > * {
min-width: 0;
}
a { color: inherit; text-decoration: none; transition: color var(--t); }
button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; }
::selection { background: var(--blue); color: #fff; }
*:focus { outline: none; }
a:focus-visible, button:focus-visible, input:focus-visible,
textarea:focus-visible, select:focus-visible {
outline: 2px solid var(--blue);
outline-offset: 3px;
border-radius: 4px;
}
/* Skip link · WCAG 2.4.1 */
.skip-link {
position: absolute;
top: -100px; left: 16px;
z-index: 1020; /* acima de tudo qdo focado (a11y) */
padding: 12px 20px;
background: var(--blue);
color: #fff;
font-family: var(--font-display);
font-size: 13px;
font-weight: 600;
letter-spacing: 0.02em;
border-radius: var(--r-pill);
transition: top 200ms ease;
}
.skip-link:focus { top: 16px; }
/* Conteúdo exclusivo para leitores de tela (rótulos/status acessíveis) · WCAG 1.3.1 / 4.1.3 */
.sr-only {
position: absolute !important;
width: 1px; height: 1px;
padding: 0; margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
/* ============== CONTAINERS / LAYOUT ============== */
.padding-global { padding-left: var(--gutter); padding-right: var(--gutter); }
.padding-global.is-hero { padding-left: 0; padding-right: 0; }
.padding-global.is-cta { padding-left: 0; padding-right: 0; }
.padding-global.is-footer { padding-left: var(--gutter); padding-right: var(--gutter); padding-top: 48px; }
.padding-section-medium { padding-top: var(--section-pad); padding-bottom: var(--section-pad); }
.padding-section-large { padding-top: var(--section-pad); padding-bottom: var(--section-pad); }
.padding-box { padding: clamp(48px, 5vw, 80px) var(--gutter); }
.container-medium { width: 100%; max-width: var(--max-w-med); margin-inline: auto; }
/* coluna global do desktop: ver bloco "COLUNA GLOBAL" no FIM deste arquivo
(precisa vir depois de .footer_bg/.cta-visual p/ vencer na cascata) */
.container-none { width: 100%; }
.container-box {
width: 100%; max-width: var(--max-w);
margin-inline: auto;
background: var(--ink-strong);
border-radius: var(--r-lg);
padding: clamp(56px, 6vw, 96px) clamp(28px, 4vw, 72px);
color: var(--on-dark-1);
}
/* ============== TIPOGRAFIA ============== */
.heading-style-h1 {
font-family: var(--font-title);
font-size: clamp(44px, 6.6vw, 88px);
font-weight: 700;
letter-spacing: -0.025em;
line-height: 1.04;
color: var(--ink-strong);
}
/* G7 — quebras de linha mais equilibradas: evita viúvas/órfãs e linhas soltas */
.heading-style-h1, .text-6xl, .text-5xl, .text-2xl,
.about_body .lead-title, .admin-card_wordmark { text-wrap: balance; }
.about_body p, .services_header p, .contact_lead,
.cat_header p, .faq_header p, .review_header p { text-wrap: pretty; }
.text-6xl {
font-family: var(--font-title);
font-size: clamp(32px, 4.2vw, 54px);
font-weight: 700;
letter-spacing: -0.02em;
line-height: 1.06;
color: var(--ink-strong);
}
.text-5xl {
font-family: var(--font-title);
font-size: clamp(26px, 3.4vw, 42px);
font-weight: 700;
letter-spacing: -0.015em;
line-height: 1.14;
color: var(--ink-strong);
}
.text-2xl {
font-family: var(--font-title);
font-size: clamp(22px, 2vw, 28px);
font-weight: 600;
letter-spacing: -0.01em;
line-height: 1.15;
color: var(--ink-strong);
}
.text-xl {
font-family: var(--font-display);
font-size: clamp(18px, 1.4vw, 21px);
font-weight: 500;
letter-spacing: -0.01em;
line-height: 1.35;
color: var(--ink-strong);
}
.text-base {
font-size: clamp(15px, 1.05vw, 16px);
line-height: 1.6;
color: var(--ink);
font-weight: 400;
}
.text-sm { font-size: 14px; line-height: 1.55; color: var(--ink); }
.text-color-alternate { color: var(--on-dark-1) !important; }
.text-color-secondary { color: var(--muted) !important; }
.text-color-tertiary { color: var(--muted-2) !important; }
.text-weight-semibold { font-weight: 600; }
.text-align-right { text-align: right; }
.text-align-center { text-align: center; }
/* Destaque editorial dentro dos títulos principais.
Usa Bai Jamjuree italic — único momento em que a tipografia oficial
aparece, criando um gesto de marca pontual no meio dos H1/H2. */
.italic {
font-family: var(--font-accent);
font-style: italic;
font-weight: 500;
letter-spacing: -0.015em;
}
/* ===== DISPLAY EDITORIAL — Bai Jamjuree (Briefing §6) ===== */
/* clamp com termo rem+vw: 36px @320px (sem overflow c/ "transformar", 11ch) → 92px @1920px */
.display-xl {
font-family: var(--font-title);
font-weight: 600; /* 600 é o sweet spot editorial; 700 só p/ palavras curtas */
font-size: clamp(36px, 1.4rem + 4.2vw, 92px);
line-height: 1.04;
letter-spacing: -0.025em;
color: var(--ink-strong);
overflow-wrap: break-word;
}
.display-xl .thin { font-weight: 300; } /* contraste de peso dentro da mesma linha */
.display-lg {
font-family: var(--font-title);
font-weight: 600;
font-size: clamp(28px, 1.1rem + 2.5vw, 56px);
line-height: 1.1;
letter-spacing: -0.02em;
color: var(--ink-strong);
overflow-wrap: break-word;
}
.display-xl.is-on-dark, .display-lg.is-on-dark { color: var(--on-dark-1); }
/* Slogan oficial — branco sobre navy (decisão #1: hero, header, rodapé)
Texto EXATO, nunca parafrasear: "Pensar no futuro. É planejar no presente." */
.slogan-line {
font-family: var(--font-accent);
font-style: italic;
font-weight: 500;
font-size: clamp(15px, 1.15vw, 19px);
letter-spacing: -0.01em;
color: var(--on-dark-1); /* branco sobre navy (hero/rodapé/fechamento) */
}
.slogan-line.is-on-light { color: var(--ink-strong); }
/* Eyebrow de acento (azul) — classe órfã pós-G1, mantida por segurança */
.eyebrow-gold {
display: inline-flex;
align-items: center;
gap: 12px;
font-family: var(--font-mono);
font-size: 12px;
font-weight: 600;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--gold-text);
}
.eyebrow-gold::before { content: ''; width: 28px; height: 1px; background: var(--gold); flex: none; }
.eyebrow-gold.is-centered::after { content: ''; width: 28px; height: 1px; background: var(--gold); flex: none; }
.eyebrow-gold.is-on-dark { color: var(--gold-bright); }
/* Filete de acento (azul) —
sob títulos */
.rule-gold {
width: 56px; height: 2px; border: 0; margin: 0;
background: linear-gradient(90deg, var(--gold) 0%, rgba(0, 114, 206, 0) 100%);
}
/* Itálico de acento (azul) — no máx. 1 palavra por página */
.italic.is-gold { color: var(--gold-text); }
.is-on-dark .italic.is-gold, .hero-headline h1 .italic.is-gold, .cta_heading .italic.is-gold { color: var(--gold-bright); }
/* tag pequena com bullet · usado em todas as sections */
.tag_content {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 8px 16px;
border: 1px solid var(--border);
border-radius: var(--r-pill);
font-family: var(--font-mono);
font-size: 12px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--ink-strong);
background: var(--bg);
font-weight: 500;
width: max-content;
max-width: 100%; /* P0.1: copy editável não pode estourar 320px */
}
.tag_content.is-hero {
color: var(--on-dark-1);
background: rgba(255,255,255,0.10);
border-color: rgba(255,255,255,0.25);
backdrop-filter: blur(6px);
}
.icon-1x1-small { width: 8px; height: 8px; flex: 0 0 8px; color: var(--blue); }
.icon-1x1-large { width: 44px; height: 44px; flex: 0 0 44px; }
/* botões */
.button {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
padding: 16px 28px;
font-family: var(--font-display);
font-size: 14px;
font-weight: 500;
letter-spacing: -0.01em;
color: var(--on-dark-1);
background: var(--ink-strong);
border-radius: var(--r-pill);
transition: background var(--t), transform var(--t), color var(--t);
white-space: nowrap;
}
.button:hover {
background: var(--blue);
transform: translateY(-1px);
}
.button.is-secondary {
background: var(--blue);
color: #fff;
}
.button.is-secondary:hover { background: var(--blue-hover); }
.button.is-ghost {
background: transparent;
color: var(--ink-strong);
border: 1px solid var(--border);
}
.button.is-ghost:hover { background: var(--ink-strong); color: var(--on-dark-1); border-color: var(--ink-strong); }
.button-wrap { display: inline-flex; flex-wrap: wrap; gap: 12px; max-width: 100%; }
/* ============== NAVBAR
Topo: 100% transparente, elementos flutuam sobre o hero.
Scroll: fundo navy translúcido + blur cobre toda a faixa.
=================================================================== */
.navbar {
position: fixed; top: 0; left: 0; right: 0; z-index: 1010; /* acima do drawer p/ manter o X clicável */
padding: 22px 0;
background: transparent;
backdrop-filter: none;
-webkit-backdrop-filter: none;
border-bottom: 1px solid transparent;
transition: padding var(--t), background var(--t),
backdrop-filter var(--t), border-color var(--t);
pointer-events: none; /* topo limpo deixa clicar no hero */
}
.navbar > * { pointer-events: auto; }
/* Estado sticky: fundo aparece na seção inteira */
.navbar.is-scrolled {
padding: 14px 0;
background: rgba(7, 21, 42, 0.78);
backdrop-filter: saturate(180%) blur(18px);
-webkit-backdrop-filter: saturate(180%) blur(18px);
border-bottom-color: rgba(255, 255, 255, 0.08);
box-shadow: 0 8px 28px -16px rgba(0, 0, 0, 0.45);
pointer-events: auto; /* faixa toda volta a ser clicável */
}
.navbar_content {
display: grid;
grid-template-columns: auto 1fr auto;
align-items: center;
gap: clamp(16px, 3vw, 40px);
}
/* — BLOCO 1 · MARCA — */
.navbar_logo-link {
display: inline-flex; align-items: center;
min-height: 44px;
transition: opacity var(--t);
}
.navbar_logo-link:hover { opacity: 0.85; }
.navbar_logo { height: 40px; width: auto; transition: height var(--t); }
.navbar.is-scrolled .navbar_logo { height: 34px; }
/* — BLOCO 2 · PILL FLUTUANTE COM OS LINKS — */
.nav_wrap {
display: inline-flex;
align-items: center;
justify-self: center;
}
.navbar_list {
display: inline-flex;
align-items: center;
gap: 2px;
list-style: none;
padding: 6px 8px;
font-family: var(--font-display);
font-size: 13.5px;
font-weight: 500;
color: var(--on-dark-2);
border: 1px solid rgba(255, 255, 255, 0.10);
border-radius: var(--r-pill);
background: rgba(255, 255, 255, 0.04);
backdrop-filter: blur(14px) saturate(160%);
-webkit-backdrop-filter: blur(14px) saturate(160%);
transition: background var(--t), border-color var(--t);
}
/* no scroll, a navbar inteira já tem fundo — a pill recua para um
contorno discreto, sem duplo backdrop-blur */
.navbar.is-scrolled .navbar_list {
background: rgba(255, 255, 255, 0.03);
border-color: rgba(255, 255, 255, 0.08);
backdrop-filter: none;
-webkit-backdrop-filter: none;
}
.nav_links {
position: relative;
display: inline-flex;
align-items: center;
min-height: 36px;
padding: 8px 14px;
border-radius: var(--r-pill);
letter-spacing: -0.005em;
color: var(--on-dark-2);
transition: color var(--t), background var(--t);
}
.nav_links:hover {
color: var(--on-dark-1);
background: rgba(255, 255, 255, 0.08);
}
.nav_links.is-active {
color: var(--on-dark-1);
background: rgba(0, 114, 206, 0.20);
}
/* — BLOCO 3 · AÇÕES — */
.nav_buttons-wrap {
display: flex;
justify-self: end;
align-items: center;
gap: 12px;
}
.nav_buttons-wrap .button.is-secondary {
padding: 11px 22px;
font-size: 13px;
font-weight: 600;
letter-spacing: -0.005em;
background: var(--blue);
box-shadow: 0 10px 28px -14px rgba(0, 114, 206, 0.65);
}
.nav_buttons-wrap .button.is-secondary:hover {
background: var(--blue-hover);
transform: translateY(-1px);
box-shadow: 0 14px 32px -12px rgba(0, 114, 206, 0.8);
}
.nav_buttons-wrap .button .arrow {
display: inline-flex;
transition: transform var(--t);
}
.nav_buttons-wrap .button:hover .arrow { transform: translateX(3px); }
.menu-button {
display: none;
width: 44px; height: 44px;
align-items: center; justify-content: center;
border: 1px solid rgba(255,255,255,0.18);
background: rgba(255,255,255,0.04);
border-radius: var(--r-pill);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
transition: border-color var(--t), background var(--t);
cursor: pointer;
}
.menu-button:hover { border-color: var(--blue); background: rgba(0,114,206,0.10); }
.nav-button_component { width: 18px; height: 12px; position: relative; }
.nav-button_line {
position: absolute; left: 0; right: 0;
height: 1.5px;
background: var(--on-dark-1);
border-radius: 2px;
transition: transform var(--t), top var(--t);
}
.nav-button_line.is-first { top: 2px; }
.nav-button_line.is-second { top: 8px; }
.nav-button_line.is-third { display: none; }
body.menu-open .nav-button_line.is-first { top: 5px; transform: rotate(45deg); }
body.menu-open .nav-button_line.is-second { top: 5px; transform: rotate(-45deg); }
/* drawer (redesign 04/09: display type + entrada em cascata + rodapé de ação) */
.nav-drawer {
position: fixed; inset: 0; z-index: 1000;
pointer-events: none; visibility: hidden;
}
.nav-drawer-backdrop {
position: absolute; inset: 0;
background: rgba(7, 21, 42, 0.78);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
opacity: 0;
transition: opacity 0.35s ease;
}
.nav-drawer-panel {
position: absolute; top: 0; right: 0; bottom: 0;
width: min(90vw, 408px);
background: linear-gradient(180deg, #0c2340 0%, #07152a 100%);
border-left: 1px solid rgba(255, 255, 255, 0.06);
padding: 88px 26px 22px;
transform: translateX(100%);
transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
display: flex; flex-direction: column; justify-content: space-between; gap: 24px;
overflow-y: auto;
}
body.menu-open .nav-drawer { pointer-events: auto; visibility: visible; }
body.menu-open .nav-drawer-backdrop { opacity: 1; }
body.menu-open .nav-drawer-panel { transform: translateX(0); }
body.menu-open { overflow: hidden; }
body.menu-open .navbar_logo-link { opacity: 0; pointer-events: none; }
/* entrada em cascata dos itens */
.drawer-nav { display: flex; flex-direction: column; }
.drawer-nav > *,
.drawer-foot {
opacity: 0;
transform: translateX(18px);
transition: opacity 0.35s ease, transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}
body.menu-open .drawer-nav > *,
body.menu-open .drawer-foot { opacity: 1; transform: none; }
body.menu-open .drawer-nav > *:nth-child(1) { transition-delay: 0.08s; }
body.menu-open .drawer-nav > *:nth-child(2) { transition-delay: 0.13s; }
body.menu-open .drawer-nav > *:nth-child(3) { transition-delay: 0.18s; }
body.menu-open .drawer-nav > *:nth-child(4) { transition-delay: 0.23s; }
body.menu-open .drawer-nav > *:nth-child(5) { transition-delay: 0.28s; }
body.menu-open .drawer-nav > *:nth-child(6) { transition-delay: 0.33s; }
body.menu-open .drawer-foot { transition-delay: 0.42s; }
/* itens de primeiro nível: tipografia display */
.drawer_link,
.drawer-acc_trigger {
display: flex; align-items: center; justify-content: space-between;
gap: 12px; width: 100%;
padding: 15px 2px;
font-family: var(--font-display);
font-size: 23px; font-weight: 600; letter-spacing: -0.015em;
color: var(--on-dark-1);
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
text-align: left;
text-decoration: none;
transition: color var(--t);
}
.drawer_link:hover,
.drawer-acc_trigger:hover { color: #7db4e8; }
.drawer_go { flex: none; color: rgba(255, 255, 255, 0.45); transition: color var(--t), transform var(--t); }
.drawer_link:hover .drawer_go { color: #7db4e8; transform: translate(2px, -2px); }
/* rodapé de ação */
.drawer-foot {
display: flex; flex-direction: column; gap: 13px;
padding-top: 20px;
border-top: 1px solid rgba(255, 255, 255, 0.10);
}
.drawer-cta { width: 100%; justify-content: center; }
.drawer-wa {
display: flex; align-items: center; justify-content: center; gap: 9px;
padding: 13px;
border: 1px solid rgba(255, 255, 255, 0.16);
border-radius: 999px;
font-family: var(--font-display);
font-size: 15px; font-weight: 600;
color: #fff; text-decoration: none;
transition: border-color var(--t), background var(--t);
}
.drawer-wa svg { color: #25D366; flex: none; }
.drawer-wa:hover { border-color: rgba(37, 211, 102, 0.65); background: rgba(37, 211, 102, 0.08); }
.drawer-meta {
display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
gap: 5px 10px;
font-family: var(--font-mono);
font-size: 11.5px; letter-spacing: 0.04em;
color: var(--on-dark-3);
}
.drawer-meta a { color: var(--on-dark-2); text-decoration: none; transition: color var(--t); }
.drawer-meta a:hover { color: #7db4e8; }
@media (prefers-reduced-motion: reduce) {
.nav-drawer-panel, .nav-drawer-backdrop,
.drawer-nav > *, .drawer-foot { transition: none; transform: none; opacity: 1; }
.nav-drawer-panel { transform: translateX(100%); }
body.menu-open .nav-drawer-panel { transform: none; }
.nav-drawer-backdrop { opacity: 0; }
body.menu-open .nav-drawer-backdrop { opacity: 1; }
}
/* ====================== MEGAMENU (desktop ≥992px) ====================== */
.nav_item { position: relative; display: inline-flex; list-style: none; }
/* trigger usa o mesmo visual de .nav_links (pill) + chevron */
.nav_trigger { gap: 5px; border: none; background: none; font: inherit; cursor: pointer; }
.nav_chevron { opacity: .7; transition: transform var(--t); }
.nav_item.has-mega.is-open > .nav_trigger,
.nav_item.has-mega:hover > .nav_trigger,
.nav_item.has-mega:focus-within > .nav_trigger {
color: var(--on-dark-1);
background: rgba(255, 255, 255, 0.08);
}
.nav_item.has-mega.is-open .nav_chevron,
.nav_item.has-mega:hover .nav_chevron,
.nav_item.has-mega:focus-within .nav_chevron { transform: rotate(180deg); }
/* painel */
.mega-panel {
position: absolute;
top: calc(100% + 16px);
/* dropdown compacto centralizado sob o gatilho; --mega-shift (JS) evita a borda */
left: calc(50% + var(--mega-shift, 0px));
width: max-content;
min-width: 210px;
max-width: min(280px, calc(100vw - 40px));
background: var(--bg);
border: 1px solid var(--border-2);
border-radius: var(--r-md);
box-shadow: 0 30px 70px -28px rgba(7, 21, 42, 0.45),
0 12px 30px -22px rgba(7, 21, 42, 0.40);
padding: 6px;
opacity: 0; visibility: hidden; pointer-events: none;
transform: translateX(-50%) translateY(8px);
transition: opacity var(--t), transform var(--t), visibility var(--t);
z-index: 120;
}
/* is-right neutralizado: todos usam o mesmo left (centralização via --mega-shift do JS) */
.mega-panel.is-right { right: auto; }
/* ponte invisível p/ o hover atravessar o gap trigger→painel */
.mega-panel::before { content: ''; position: absolute; top: -18px; left: 0; right: 0; height: 18px; }
.nav_item.has-mega.is-open .mega-panel,
.nav_item.has-mega:hover .mega-panel,
.nav_item.has-mega:focus-within .mega-panel {
opacity: 1; visibility: visible; pointer-events: auto;
transform: translateX(-50%) translateY(0);
}
.mega-inner { display: grid; grid-template-columns: 0.92fr 1.08fr; gap: 16px; }
/* Dropdown "lista simples" — só os nomes, sem card promo nem descrições */
.mega-list { display: flex; flex-direction: column; gap: 2px; }
.mega-list-link {
display: block;
padding: 9px 14px;
border-radius: var(--r-sm);
font-size: 15px;
line-height: 1.2;
color: var(--ink-strong);
text-decoration: none;
white-space: nowrap;
transition: background var(--t), color var(--t);
}
.mega-list-link:hover,
.mega-list-link:focus-visible {
background: var(--off);
color: var(--blue);
outline: none;
}
/* coluna promo (navy) */
.mega-promo {
display: flex; flex-direction: column; gap: 7px;
padding: 22px;
border-radius: var(--r-md);
background: linear-gradient(160deg, var(--navy) 0%, var(--navy-deep) 100%);
color: var(--on-dark-1);
transition: transform var(--t);
}
.mega-promo:hover { transform: translateY(-2px); }
.mega-promo_eyebrow {
font-family: var(--font-mono);
font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase;
color: var(--silver);
}
.mega-promo_title {
font-family: var(--font-display);
font-size: 20px; font-weight: 700; line-height: 1.16; letter-spacing: -0.02em;
}
.mega-promo_desc { font-size: 13px; line-height: 1.5; color: var(--on-dark-2); }
.mega-promo_cta {
margin-top: auto; padding-top: 8px;
display: inline-flex; align-items: center; gap: 8px;
font-size: 13px; font-weight: 600; color: #fff;
}
.mega-promo_cta svg { transition: transform var(--t); }
.mega-promo:hover .mega-promo_cta svg { transform: translateX(3px); }
/* coluna de links */
.mega-links { display: grid; align-content: start; gap: 2px; }
.mega-links.is-2col { grid-template-columns: 1fr 1fr; gap: 2px 8px; }
.mega-link {
position: relative;
display: flex; flex-direction: column; gap: 1px;
padding: 10px 28px 10px 12px;
border-radius: var(--r-sm);
transition: background var(--t);
}
.mega-link:hover { background: var(--surface); }
.mega-link_label {
font-family: var(--font-display);
font-size: 14px; font-weight: 600; letter-spacing: -0.01em;
color: var(--ink-strong);
}
.mega-link_desc { font-size: 12px; line-height: 1.3; color: var(--muted); }
.mega-link::after {
content: "→";
position: absolute; right: 12px; top: 10px;
font-size: 13px; color: var(--blue);
opacity: 0; transform: translateX(-4px);
transition: opacity var(--t), transform var(--t);
}
.mega-link:hover::after { opacity: 1; transform: translateX(0); }
/* esconde os painéis no mobile (a pill já some <992px; reforço de segurança) */
@media (max-width: 991px) {
.mega-panel { display: none; }
}
/* ====================== DRAWER · ACORDEÃO (mobile, redesign 04/09) ====================== */
.drawer-acc { border-bottom: none; }
.drawer-acc_chevron { flex: none; opacity: 0.6; transition: transform var(--t), opacity var(--t); }
.drawer-acc.is-open .drawer-acc_trigger { color: #7db4e8; }
.drawer-acc.is-open .drawer-acc_chevron { transform: rotate(180deg); opacity: 1; }
.drawer-acc_panel {
overflow: hidden; max-height: 0; opacity: 0;
margin-left: 2px;
border-left: 1px solid rgba(255, 255, 255, 0.14);
transition: max-height var(--t), opacity var(--t);
}
.drawer-acc.is-open .drawer-acc_panel { max-height: 520px; opacity: 1; }
.nav-drawer .drawer-acc_panel a {
display: block;
padding: 12px 2px 12px 16px;
font-size: 15.5px;
color: var(--on-dark-2);
text-decoration: none;
border-bottom: none;
transition: color var(--t), padding-left var(--t);
}
.nav-drawer .drawer-acc_panel a:hover { color: #7db4e8; padding-left: 20px; }
.nav-drawer .drawer-acc_panel a:last-child { padding-bottom: 16px; }
/* seção da página atual destacada (data-nav marcado pelo site-loader) */
.drawer-acc_trigger.is-active { color: var(--blue); }
.drawer-acc_trigger.is-active .drawer-acc_chevron { opacity: 1; }
/* ============== HERO (full-screen, video-style bg) ============== */
.section_hero {
position: relative;
padding-top: 0;
background: var(--navy-deep);
}
.hero-master {
position: relative;
width: 100%;
min-height: 100vh;
min-height: 100dvh;
overflow: hidden;
background: var(--navy-deep);
isolation: isolate;
}
/* camada 1 — mídia (imagem hoje, video amanhã) */
.hero-bg {
position: absolute;
inset: 0;
z-index: 0;
overflow: hidden;
}
.hero-bg > img,
.hero-bg > video,
.hero-bg .hero-video {
width: 100%; height: 100%;
object-fit: cover;
object-position: center;
background-color: var(--navy-deep);
will-change: transform;
}
/* Imagem estática ganha ken burns sutil para parecer viva */
.hero-bg > img {
filter: brightness(0.48) contrast(1.04) saturate(0.92);
transform-origin: 50% 50%;
/* foto estática — sem ken burns/zoom (pedido do cliente 29/08) */
}
/* Vídeo já tem movimento próprio — sem ken burns, brightness mais leve */
.hero-bg > video,
.hero-bg .hero-video {
filter: brightness(0.62) contrast(1.02) saturate(1.05);
}
@keyframes kenBurns {
0% { transform: scale(1.04) translate(-1.2%, -0.6%); }
100% { transform: scale(1.14) translate(1.2%, 0.6%); }
}
@media (prefers-reduced-motion: reduce) {
.hero-bg > img, .hero-bg > video { animation: none; transform: none; }
}
/* camada 2 — gradientes / overlays */
.hero-overlay {
position: absolute; inset: 0; z-index: 1;
background:
radial-gradient(ellipse at 20% 0%, rgba(0,114,206,0.18) 0%, transparent 55%),
radial-gradient(ellipse at 100% 100%, rgba(12,35,64,0.55) 0%, transparent 50%),
linear-gradient(180deg, rgba(7,21,42,0.30) 0%, rgba(7,21,42,0.55) 55%, rgba(7,21,42,0.88) 100%);
pointer-events: none;
}
.hero-overlay::after {
/* "live" sheen — uma faixa sutil que se move criando ilusão de vídeo */
content: '';
position: absolute; inset: -50%;
background: radial-gradient(ellipse 60% 40% at 50% 50%, rgba(0,114,206,0.10), transparent 70%);
animation: sheenDrift 18s ease-in-out infinite alternate;
pointer-events: none;
}
@keyframes sheenDrift {
0% { transform: translate3d(-12%, -8%, 0); }
100% { transform: translate3d( 12%, 8%, 0); }
}
@media (prefers-reduced-motion: reduce) {
.hero-overlay::after { animation: none; }
}
/* grade técnica fina (opcional, dá textura) */
.hero-grid {
position: absolute; inset: 0; z-index: 1;
background-image:
linear-gradient(rgba(255,255,255,0.022) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,0.022) 1px, transparent 1px);
background-size: 64px 64px;
mask-image: radial-gradient(ellipse at 50% 30%, black 0%, transparent 75%);
-webkit-mask-image: radial-gradient(ellipse at 50% 30%, black 0%, transparent 75%);
pointer-events: none;
}
/* camada 3 — conteúdo */
.hero-content {
position: relative;
z-index: 2;
width: 100%;
min-height: 100vh;
min-height: 100dvh;
display: grid;
grid-template-rows: auto 1fr auto;
padding: clamp(116px, 12vw, 156px) var(--gutter) clamp(40px, 4vw, 64px);
color: var(--on-dark-1);
}
.hero-master_grid {
grid-row: 2;
width: 100%;
max-width: var(--max-w-med);
margin-inline: auto;
display: grid;
grid-template-columns: 1.35fr 1fr;
gap: clamp(40px, 5vw, 96px);
align-items: end;
}
/* label minimal — estilo "for:human™": pill enxuta, texto curto */
.label-master {
display: inline-flex;
width: max-content;
}
.label {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 7px 14px;
border: 1px solid rgba(255,255,255,0.22);
border-radius: var(--r-pill);
background: rgba(255,255,255,0.06);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
font-family: var(--font-display);
font-size: 12.5px;
font-weight: 500;
letter-spacing: -0.005em;
color: var(--on-dark-1);
}
.label .dot {
width: 6px; height: 6px;
background: var(--blue);
border-radius: 50%;
box-shadow: 0 0 10px var(--blue);
animation: dotPulse 2.4s ease-in-out infinite;
}
.label .tm {
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.18em;
color: var(--on-dark-3);
margin-left: 2px;
}
@keyframes dotPulse {
0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: 0.5; transform: scale(0.85); }
}
/* H1 */
.hero-headline { margin-top: 18px; }
.hero-headline h1 {
color: var(--on-dark-1);
font-family: var(--font-title);
font-weight: 700;
font-size: clamp(36px, 5vw, 68px);
letter-spacing: -0.025em;
line-height: 1.06;
max-width: 16ch;
}
.hero-headline h1 .italic {
font-family: var(--font-accent);
font-style: italic;
font-weight: 500;
color: var(--silver);
letter-spacing: -0.02em;
}
/* máscaras para o word-by-word reveal do H1 */
.hero-headline h1 .word-line {
display: inline-block;
overflow: hidden;
vertical-align: bottom;
line-height: inherit;
}
.hero-headline h1 .word {
display: inline-block;
will-change: transform, opacity;
}
/* coluna direita (estilo for:human: text-large + hero-button-wrap) */
.hero-right-block {
display: flex;
flex-direction: column;
gap: 22px;
max-width: 480px;
justify-self: end;
}
.text-large {
font-size: clamp(16px, 1.2vw, 19px);
line-height: 1.55;
color: var(--on-dark-2);
font-weight: 400;
}
.text-large strong { color: var(--on-dark-1); font-weight: 600; }
.hero-button-wrap {
display: flex;
gap: 12px;
flex-wrap: wrap;
}
.cta-main {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
padding: 16px 28px;
border-radius: var(--r-pill);
font-family: var(--font-display);
font-size: 14px;
font-weight: 500;
letter-spacing: -0.005em;
transition: background var(--t), color var(--t), border-color var(--t), transform var(--t);
white-space: nowrap;
}
.cta-main.light-cta {
background: var(--on-dark-1);
color: var(--ink-strong);
}
.cta-main.light-cta:hover {
background: var(--blue);
color: #fff;
transform: translateY(-1px);
}
.cta-main.light-outline {
background: transparent;
color: var(--on-dark-1);
border: 1px solid rgba(255,255,255,0.30);
}
.cta-main.light-outline:hover {
border-color: var(--on-dark-1);
background: rgba(255,255,255,0.08);
}
/* faixa inferior — micro-stats */
.hero-foot {
grid-row: 3;
width: 100%;
max-width: var(--max-w-med);
margin-inline: auto;
display: grid;
grid-template-columns: 1fr auto;
gap: 24px;
align-items: center;
margin-top: clamp(12px, 1.6vw, 22px); /* respiro entre o bloco principal e a linha */
padding-top: clamp(18px, 2.4vw, 30px);
border-top: 1px solid rgba(255,255,255,0.12);
}
.hero-foot-stats {
display: flex;
gap: 0;
flex-wrap: wrap;
}
.hero-foot-stat {
display: flex; flex-direction: column;
gap: 2px;
padding: 0 clamp(20px, 3vw, 40px);
border-left: 1px solid rgba(255,255,255,0.10);
}
.hero-foot-stat:first-child { padding-left: 0; border-left: 0; }
.hero-foot-stat .v {
font-family: var(--font-display);
font-weight: 700;
font-size: clamp(22px, 2vw, 28px);
letter-spacing: -0.03em;
color: var(--on-dark-1);
line-height: 1;
}
.hero-foot-stat .l {
font-family: var(--font-mono);
font-size: 12px;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--on-dark-2);
font-weight: 500;
margin-top: 4px;
}
/* ============== ABOUT ============== */
.section_about { background: var(--bg); }
.about_content-wrap {
display: grid;
grid-template-columns: 1fr;
gap: clamp(48px, 5vw, 72px);
}
.about_head { display: flex; flex-direction: column; gap: 32px; }
.text-block { font-family: var(--font-mono); font-size: inherit; text-transform: uppercase; letter-spacing: 0.08em; }
/* ===== Grid em 2 colunas: stat de feature × body ===== */
.about_split {
display: grid;
grid-template-columns: 1.1fr 1fr;
gap: clamp(40px, 5vw, 80px);
align-items: flex-start;
}
.about_stat {
display: flex;
flex-direction: column;
gap: 18px;
}
.about_stat-arc {
display: flex;
align-items: baseline;
gap: 18px;
flex-wrap: wrap;
}
.about_stat-from {
font-family: var(--font-title);
font-size: clamp(24px, 2.6vw, 36px);
font-weight: 600;
color: var(--muted-2);
letter-spacing: -0.03em;
line-height: 1;
}
.about_stat-to {
font-family: var(--font-title);
font-size: clamp(52px, 7vw, 92px);
font-weight: 700;
color: var(--ink-strong);
letter-spacing: -0.03em;
line-height: 0.95;
font-variant-numeric: tabular-nums;
}
.about_stat-to em {
font-family: var(--font-accent);
font-style: italic;
font-weight: 500;
color: var(--blue);
}
.about_stat-arrow {
font-family: var(--font-display);
color: var(--blue);
font-size: clamp(28px, 3vw, 40px);
font-weight: 300;
line-height: 1;
}
.about_stat-meta {
font-family: var(--font-mono);
font-size: 12px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--muted);
padding-top: 14px;
border-top: 1px solid var(--border-2);
max-width: 32ch;
}
.about_stat-meta strong { color: var(--ink-strong); font-weight: 600; }
/* ===== Coluna direita — body explicativo ===== */
.about_body {
display: flex;
flex-direction: column;
gap: 18px;
padding-top: 8px;
max-width: 44ch;
}
.about_body .lead-title {
font-family: var(--font-display);
font-size: clamp(20px, 1.6vw, 24px);
font-weight: 600;
color: var(--ink-strong);
letter-spacing: -0.015em;
line-height: 1.25;
}
.about_body .lead-title em {
font-family: var(--font-accent);
font-style: italic;
font-weight: 500;
color: var(--blue);
}
.about_body p {
font-size: 16px;
line-height: 1.65;
color: var(--muted);
}
.about_body p strong { color: var(--ink-strong); font-weight: 600; }
/* ===== G7 · Home/equipe — foto com altura controlada (sem vazio), texto centralizado ===== */
#sobre .about_split { align-items: center; }
#sobre .about_media {
position: relative; overflow: hidden;
height: clamp(400px, 40vw, 500px);
border-radius: var(--r-md); margin: 0;
}
#sobre .about_media img {
width: 100%; height: 100%;
object-fit: cover; object-position: center 24%;
}
#sobre .about_body { gap: 22px; }
/* ===== Caixa das administradoras (background navy, tiles delicados) ===== */
.logos_wrap {
position: relative;
display: flex;
flex-direction: column;
gap: 22px;
padding: clamp(28px, 3vw, 40px);
margin-top: clamp(40px, 4vw, 56px);
border-radius: var(--r-lg);
background:
radial-gradient(ellipse at 18% 0%, rgba(0,114,206,0.22) 0%, transparent 55%),
radial-gradient(ellipse at 100% 100%, rgba(0,114,206,0.14) 0%, transparent 55%),
linear-gradient(160deg, #0e2a55 0%, #0a1e42 60%, #07152a 100%);
color: var(--on-dark-1);
isolation: isolate;
overflow: hidden;
}
.logos_wrap::before {
content: '';
position: absolute; inset: 0;
background-image:
linear-gradient(rgba(255,255,255,0.022) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,0.022) 1px, transparent 1px);
background-size: 44px 44px;
mask-image: radial-gradient(ellipse at 50% 50%, black 0%, transparent 80%);
-webkit-mask-image: radial-gradient(ellipse at 50% 50%, black 0%, transparent 80%);
pointer-events: none;
}
.logos_wrap > * { position: relative; z-index: 2; }
.logos_head {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: 16px;
flex-wrap: wrap;
padding-bottom: 4px;
}
.logos_eyebrow {
font-family: var(--font-mono);
font-size: 12px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: #5fb6ff;
font-weight: 600;
}
.logos_note {
font-size: 13px;
color: rgba(255,255,255,0.65);
}
.logos_grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 14px;
}
.logo-tile {
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: space-between;
gap: 18px;
padding: 22px 22px;
border: 1px solid rgba(255,255,255,0.10);
border-radius: var(--r-md);
background: rgba(255,255,255,0.04);
min-height: 120px;
transition: border-color var(--t), background var(--t), transform var(--t);
}
.logo-tile:hover {
border-color: rgba(0, 114, 206, 0.55);
background: rgba(255,255,255,0.07);
transform: translateY(-2px);
}
.logo-tile.is-self {
border-color: rgba(0, 114, 206, 0.45);
background: rgba(0, 114, 206, 0.15);
}
.logo-tile.is-self:hover { background: rgba(0, 114, 206, 0.22); }
/* Logo brand — comporta logos horizontais brancos */
.logo-tile-brand {
display: flex;
align-items: center;
width: 100%;
height: 36px;
}
.logo-tile-brand img {
max-height: 100%;
max-width: 100%;
width: auto;
object-fit: contain;
object-position: left center;
}
.logo-tile-status {
font-family: var(--font-mono);
font-size: 12px;
letter-spacing: 0.14em;
color: rgba(255,255,255,0.55);
text-transform: uppercase;
display: inline-flex;
align-items: center;
gap: 8px;
}
.logo-tile-status::before {
content: '';
display: inline-block;
width: 6px; height: 6px;
border-radius: 50%;
background: rgba(255,255,255,0.55);
}
.logo-tile.is-self .logo-tile-status { color: #5fb6ff; }
.logo-tile.is-self .logo-tile-status::before { background: #5fb6ff; box-shadow: 0 0 8px #5fb6ff; }
/* tiles sem selo de status (decisão #6: eliminar "Ativa/Em cadastro") —
lockup centralizado verticalmente. O .logo-tile-status permanece apenas
para DESCRITORES factuais (ex.: "Desde 1988 · imóveis, autos e pesados"). */
.logo-tile.is-clean { justify-content: center; min-height: 96px; gap: 0; }
/* Lockup tipográfico neutro p/ marca sem logo oficial (regra §0: NUNCA fabricar logo).
Estrutura pronta p/ trocar por ![]()
do SVG oficial quando chegar
(Stellantis: largura mín. 170px, fundo White/Blue/Anthracite). */
.brand-lockup {
font-family: var(--font-title);
font-weight: 600;
font-size: clamp(17px, 1.4vw, 21px);
letter-spacing: 0.01em;
line-height: 1.15;
color: var(--on-dark-1);
white-space: nowrap;
}
.brand-lockup .lockup-sub {
display: block;
font-family: var(--font-mono);
font-size: 11px; /* legenda inline do lockup Stellantis — 11px p/ não estourar (tracking alto + nomes longos) */
font-weight: 500;
letter-spacing: 0.28em;
text-transform: uppercase;
color: var(--on-dark-3);
margin-top: 3px;
white-space: normal;
}
/* logos das administradoras: brancos sobre o card navy (fundo transparente,
já que a caixa é azul) — Embracon e Volkswagen usam SVG monocromático branco */
.logo-chip {
display: inline-flex;
align-items: center;
align-self: flex-start;
padding: 0;
background: transparent;
border-radius: 0;
line-height: 0;
}
/* logos das administradoras — BALANCEADAS OPTICAMENTE. Cada lockup tem estrutura
e proporção próprias (Embracon: wordmark compacto ~4,6:1; VW: roundel + 3 linhas
~3,6:1; Stellantis: wordmark + anel de pontos + "CONSÓRCIO" ~3,2:1), então altura
igual em px NÃO dá tamanho visual igual. Ajustamos a altura por marca p/ larguras
e massa semelhantes (~142–156px de largura renderizada), mantendo a proporção
nativa de cada logo. Embracon/VW não têm classe → selecionados por src. */
.logo-chip img { display: block; width: auto; height: 34px; max-height: none; } /* Embracon */
.logo-chip img[src*="consorcio-volkswagen"] { height: 40px; } /* Volkswagen */
.logo-chip img.logo-stellantis { height: 44px; } /* Stellantis */
.brand-lockup.is-on-light { color: var(--ink-strong); }
.brand-lockup.is-on-light .lockup-sub { color: var(--muted-2); }
/* nota BACEN da faixa de administradoras */
.admin-strip_bacen {
display: inline-flex; align-items: center; gap: 10px;
margin-top: 4px;
font-family: var(--font-mono);
font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase;
color: var(--muted);
}
.admin-strip_bacen svg { width: 16px; height: 16px; flex: none; stroke: var(--gold); fill: none; }
.logos_wrap .admin-strip_bacen { color: var(--on-dark-2); }
.logos_wrap .admin-strip_bacen svg { stroke: var(--gold-bright); }
/* fonte dos dados sob grids de logos (claims P5) */
.logos_source { font-size: .75rem; opacity: .65; display: block; margin-top: .5rem; }
/* ===== ADMIN TRIO — pilar administradoras (home · parceiros · hubs) ===== */
.section_about.is-admin-trio {
background: var(--off);
border-top: 1px solid var(--border-2);
border-bottom: 1px solid var(--border-2);
}
.admin-trio_header {
display: flex; flex-direction: column; align-items: flex-start; gap: 16px;
text-align: left;
margin-bottom: clamp(32px, 4vw, 48px);
}
.admin-trio_lead { font-size: clamp(16px, 1.2vw, 18px); color: var(--muted); }
.admin-trio {
display: grid; grid-template-columns: repeat(3, 1fr);
gap: clamp(14px, 1.6vw, 20px);
}
.admin-card {
display: flex; flex-direction: column; gap: 10px;
padding: clamp(24px, 2.4vw, 32px);
border-radius: var(--r-lg);
background:
radial-gradient(ellipse at 18% 0%, rgba(0,114,206,0.20) 0%, transparent 55%),
linear-gradient(160deg, #0e2a55 0%, #0a1e42 60%, #07152a 100%);
border: 1px solid rgba(255,255,255,0.10);
color: var(--on-dark-1);
transition: transform var(--t), border-color var(--t), box-shadow var(--t);
}
.admin-card:hover,
.admin-card:focus-visible {
transform: translateY(-4px);
border-color: rgba(0,114,206,0.55);
box-shadow: 0 18px 40px rgba(7,21,42,0.35);
}
.admin-card_logo { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; min-height: 40px; }
.admin-card_logo img { max-height: none; width: auto; object-fit: contain; }
.admin-card_wordmark {
font-family: var(--font-display);
font-size: clamp(20px, 1.7vw, 24px);
font-weight: 300; letter-spacing: -0.01em; color: #fff;
}
.admin-card_wordmark b { font-weight: 700; }
.admin-card_fact {
font-family: var(--font-mono);
font-size: 13.5px; letter-spacing: 0.08em; text-transform: uppercase;
color: #5fb6ff;
}
.admin-card_desc { font-size: 16.5px; line-height: 1.55; color: var(--on-dark-2); }
.admin-card_cta {
margin-top: auto; padding-top: 8px;
display: inline-flex; align-items: center; gap: 8px;
font-size: 15px; font-weight: 600; color: #fff;
}
.admin-card_cta svg { transition: transform var(--t); }
.admin-card:hover .admin-card_cta svg { transform: translateX(4px); }
.admin-trio_note {
margin-top: 20px;
font-family: var(--font-mono); font-size: 14px;
color: var(--muted); text-align: left;
}
@media (max-width: 991px) { .admin-trio { grid-template-columns: 1fr; } }
/* ============== SERVICES / DIFERENCIAIS ============== */
.section_services { background: var(--bg); }
.services_content { display: flex; flex-direction: column; gap: 48px; }
/* Header em 2 linhas (tag em cima, headline + lead) — CTA vai pro fim */
.services_header {
display: grid;
grid-template-columns: 1fr 1fr;
gap: clamp(28px, 4vw, 72px);
align-items: flex-start;
}
.services_header-left { display: flex; flex-direction: column; gap: 18px; }
.services_header-left .text-5xl { max-width: 18ch; }
.services_header-lead {
font-size: clamp(15px, 1.1vw, 17px);
line-height: 1.6;
color: var(--muted);
max-width: 42ch;
padding-top: 8px;
}
/* Grid dos 2 cards */
.services_list-home {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 22px;
}
.services_card-home {
display: flex; flex-direction: column;
background: var(--bg);
border: 1px solid var(--border);
border-radius: var(--r-lg);
overflow: hidden;
transition: border-color var(--t), transform var(--t), box-shadow var(--t);
}
.services_card-home:hover {
border-color: var(--ink-strong);
transform: translateY(-4px);
box-shadow: 0 24px 60px -32px rgba(12, 35, 64, 0.22);
}
/* Top frame: painel navy com pattern + título display + lista */
.services_frame {
position: relative;
padding: clamp(32px, 3.5vw, 48px);
background: linear-gradient(150deg, var(--navy) 0%, var(--navy-deep) 100%);
color: var(--on-dark-1);
overflow: hidden;
min-height: 320px;
display: flex; flex-direction: column;
}
.services_frame::before {
content: '';
position: absolute; inset: 0;
background-image:
linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
background-size: 40px 40px;
/* A4 — malha distribuída uniformemente (antes concentrava no canto sup. dir.,
ficava "mal distribuída"): grade cheia no topo, some para baixo em toda a largura */
mask-image: linear-gradient(180deg, black 0%, transparent 70%);
-webkit-mask-image: linear-gradient(180deg, black 0%, transparent 70%);
pointer-events: none;
}
.services_frame::after {
/* glow azul sutil no canto */
content: '';
position: absolute;
top: -30%; right: -20%;
width: 60%; height: 80%;
background: radial-gradient(ellipse at center, rgba(0,114,206,0.18) 0%, transparent 60%);
pointer-events: none;
}
.services_frame > * { position: relative; z-index: 2; }
.services_frame-eyebrow {
font-family: var(--font-mono);
font-size: 12px;
letter-spacing: 0.20em;
text-transform: uppercase;
color: var(--blue);
font-weight: 600;
margin-bottom: 20px;
}
.services_frame-title {
font-family: var(--font-title);
font-size: clamp(22px, 2vw, 28px);
font-weight: 600;
line-height: 1.2;
letter-spacing: -0.02em;
color: var(--on-dark-1);
max-width: 22ch;
margin-bottom: auto;
}
.services_frame-title em {
font-family: var(--font-accent);
font-style: italic;
font-weight: 500;
color: var(--silver);
}
.services_frame-list {
list-style: none;
display: grid; gap: 10px;
margin-top: 32px;
padding-top: 24px;
border-top: 1px solid rgba(255,255,255,0.10);
}
.services_frame-list li {
display: flex; align-items: center;
gap: 12px;
font-size: 14px;
color: var(--on-dark-2);
}
.services_frame-list li::before {
content: '';
flex-shrink: 0;
width: 16px; height: 16px;
border-radius: 4px;
background: rgba(0,114,206,0.18);
background-image: url("data:image/svg+xml;utf8,");
background-size: 12px;
background-position: center;
background-repeat: no-repeat;
}
/* Bottom body — fundo claro */
.services_body {
padding: clamp(28px, 3vw, 36px);
display: flex; flex-direction: column;
gap: 12px;
flex-grow: 1;
}
.services_body h3 {
font-family: var(--font-display);
font-size: clamp(20px, 1.8vw, 24px);
font-weight: 700;
letter-spacing: -0.02em;
line-height: 1.2;
color: var(--ink-strong);
}
.services_body p {
font-size: 15px;
line-height: 1.6;
color: var(--muted);
}
.services_body p strong { color: var(--ink-strong); font-weight: 600; }
/* CTA no fim da seção */
.services_cta-wrap {
display: flex;
justify-content: center;
padding-top: clamp(24px, 3vw, 40px);
}
/* ============== SELLERS (Para representantes) ============== */
.section_sellers { background: var(--off); }
.sellers_content-wrap {
display: grid;
grid-template-columns: 1.05fr 0.95fr;
gap: clamp(48px, 6vw, 96px);
align-items: stretch;
}
.sellers_content {
display: flex;
flex-direction: column;
gap: clamp(40px, 4.5vw, 64px);
}
.sellers_header {
display: flex;
flex-direction: column;
gap: 22px;
align-items: flex-start;
}
.sellers_header .text-5xl { max-width: 18ch; }
.sellers_cta {
display: flex;
padding-top: clamp(8px, 1.5vw, 16px);
}
.sellers_cta .button { padding: 14px 26px; }
.sellers_card-wrap {
display: grid;
gap: 12px;
}
.sellers_card {
display: grid;
grid-template-columns: 44px 1fr;
align-items: flex-start;
gap: 16px;
padding: 22px 24px;
background: var(--bg);
border: 1px solid var(--border-2);
border-radius: var(--r-md);
transition: border-color var(--t), transform var(--t);
}
.sellers_card:hover { border-color: var(--blue); transform: translateX(4px); }
.sellers_card .icon-1x1-large {
width: 44px; height: 44px;
margin-top: 2px;
}
.sellers_card .icon-1x1-large .rect { color: var(--blue-soft); }
.sellers_card .icon-1x1-large .path { color: var(--blue); }
.sellers_card .text-base { color: var(--ink); }
.sellers_card .text-base strong { color: var(--ink-strong); font-weight: 600; }
/* ===== Painel manifesto (imagem de fundo — investpro-manifesto.webp) ===== */
.sellers_visual {
position: relative;
width: 100%;
aspect-ratio: 4 / 5;
border-radius: var(--r-lg);
overflow: hidden;
background: var(--navy-deep);
isolation: isolate;
}
.sellers_visual-video {
position: absolute;
inset: 0;
width: 100%; height: 100%;
object-fit: cover;
filter: brightness(0.62) contrast(1.05) saturate(1.10);
z-index: 0;
pointer-events: none;
}
.sellers_visual::before {
/* grade técnica sutil em cima do vídeo */
content: '';
position: absolute; inset: 0;
background-image:
linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px);
background-size: 44px 44px;
mask-image: radial-gradient(ellipse at 50% 50%, black 0%, transparent 78%);
-webkit-mask-image: radial-gradient(ellipse at 50% 50%, black 0%, transparent 78%);
z-index: 1;
pointer-events: none;
}
.sellers_visual::after {
/* overlay navy escurecendo o vídeo pra texto ficar legível */
content: '';
position: absolute; inset: 0;
background:
radial-gradient(ellipse at 0% 100%, rgba(0,114,206,0.22) 0%, transparent 55%),
radial-gradient(ellipse at 100% 0%, rgba(12,35,64,0.55) 0%, transparent 55%),
linear-gradient(160deg, rgba(12,35,64,0.55) 0%, rgba(7,21,42,0.70) 100%);
z-index: 1;
pointer-events: none;
}
.sellers_visual-content {
position: relative; z-index: 2;
width: 100%; height: 100%;
padding: clamp(32px, 4vw, 56px);
display: flex; flex-direction: column;
justify-content: space-between;
gap: 40px;
color: var(--on-dark-1);
}
.sellers_visual-eyebrow {
font-family: var(--font-mono);
font-size: 12px;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--blue);
font-weight: 600;
}
.sellers_visual-quote {
font-family: var(--font-title);
font-size: clamp(22px, 2.4vw, 32px);
font-weight: 600;
letter-spacing: -0.02em;
line-height: 1.18;
color: var(--on-dark-1);
max-width: 18ch;
}
.sellers_visual-quote em {
font-family: var(--font-accent);
font-style: italic;
font-weight: 500;
color: var(--silver);
}
.sellers_visual-attr {
display: flex; flex-direction: column;
gap: 2px;
padding-top: 18px;
border-top: 1px solid rgba(255,255,255,0.12);
}
.sellers_visual-attr-name {
font-family: var(--font-display);
font-weight: 600;
font-size: 14px;
letter-spacing: -0.005em;
color: var(--on-dark-1);
}
.sellers_visual-attr-role {
font-family: var(--font-mono);
font-size: 12px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--on-dark-3);
}
/* ============== BUYERS (Para quem é) ============== */
.section_buyers { background: var(--bg); }
.buyers_content-wrap {
display: grid;
grid-template-columns: 1.05fr 0.95fr;
gap: clamp(40px, 5vw, 80px);
align-items: center;
}
.buyers_content { display: flex; flex-direction: column; gap: 36px; }
.header_left { display: flex; flex-direction: column; gap: 24px; align-items: flex-start; }
.header_left .text-5xl { max-width: 18ch; }
.buyers_caracteristics-wrap { display: grid; gap: 20px; }
.buyers_caracteristics {
display: grid;
grid-template-columns: 44px 1fr;
gap: 18px;
align-items: flex-start;
padding: 20px 0;
border-top: 1px solid var(--border-2);
}
.buyers_caracteristics:last-child { border-bottom: 1px solid var(--border-2); }
.buyers_caracteristics .icon-1x1-large .rect { color: var(--blue-soft); }
.buyers_caracteristics .icon-1x1-large .path { color: var(--blue); }
.buyers_caracteristics .text-base { color: var(--ink); }
.buyers_visual {
width: 100%;
aspect-ratio: 4 / 5;
overflow: hidden;
border-radius: var(--r-lg);
background: var(--surface-2);
position: relative;
}
.buyers_visual img,
.buyers_visual .visual-fallback {
width: 100%; height: 100%; object-fit: cover;
}
/* ============== PILARES — comparison table ============== */
/* ============== COMPARATIVO · jornada consultiva (redesenho D1 · 01/09) ============== */
.section_pillars { background: var(--off); }
.pillars_content { display: flex; flex-direction: column; gap: clamp(30px, 4vw, 48px); }
/* Header — flex que alinha o título à esquerda; a lead (quando existe) senta à direita,
sem deixar meia-tela vazia quando ela não existe (ex.: home). */
.pillars_header {
display: flex;
flex-wrap: wrap;
gap: clamp(18px, 3vw, 56px);
align-items: flex-end;
justify-content: space-between;
}
.pillars_header-left { display: flex; flex-direction: column; gap: 14px; }
.pillars_header-left .text-5xl { max-width: 22ch; }
.pillars_header-lead {
font-size: clamp(15px, 1.05vw, 17px);
line-height: 1.6;
color: var(--muted);
max-width: 40ch;
text-wrap: pretty;
}
/* ---- Módulo comparativo: card navy premium, elevado sobre a seção clara ---- */
.pillars_scroll { border-radius: var(--r-xl); }
.pillars_table {
--gap-line: rgba(255, 255, 255, 0.09);
position: relative;
display: grid;
grid-template-columns: minmax(148px, 1fr) minmax(140px, 1fr) minmax(150px, 1.12fr);
background:
radial-gradient(130% 150% at 84% -12%, rgba(0, 114, 206, 0.24), transparent 56%),
linear-gradient(158deg, var(--navy) 0%, var(--navy-deep) 100%);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: var(--r-xl);
overflow: hidden;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.05) inset, 0 30px 64px -30px rgba(7, 21, 42, 0.6);
}
.p-cell {
padding: clamp(17px, 2.1vw, 25px) clamp(17px, 1.9vw, 26px);
display: flex; align-items: center; gap: 12px;
border-bottom: 1px solid var(--gap-line);
font-size: 14.5px; line-height: 1.5;
color: var(--on-dark-2);
text-align: left;
}
.p-cell_in { display: flex; align-items: center; gap: 12px; }
.pillars_table tbody tr:last-child .p-cell { border-bottom: 0; }
.p-cell.is-dim { border-right: 1px solid var(--gap-line); }
/* cabeçalho das colunas */
.p-cell.is-head {
font-family: var(--font-mono);
font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 600;
color: var(--on-dark-3);
align-items: flex-end;
padding-top: clamp(20px, 2vw, 26px);
padding-bottom: clamp(13px, 1.3vw, 17px);
}
.p-cell.is-head.is-ip-head { color: var(--on-dark-1); }
/* coluna 1 — dimensão */
.p-cell.is-dim { flex-direction: column; align-items: flex-start; gap: 5px; }
.p-cell.is-dim .p-num {
font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.18em; font-weight: 600;
color: rgba(127, 184, 232, 0.92);
}
.p-cell.is-dim .p-name {
font-family: var(--font-title);
font-size: clamp(15px, 1.2vw, 18px); font-weight: 600; letter-spacing: -0.01em; line-height: 1.2;
color: var(--on-dark-1);
}
/* coluna 2 — mercado tradicional (secundário, mas legível AA) */
.p-cell.is-market { color: var(--on-dark-2); }
.p-cell.is-market .p-icon {
flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%;
border: 1px solid rgba(255, 255, 255, 0.16);
display: grid; place-items: center; color: var(--on-dark-3);
}
/* coluna 3 — InvestPro (painel vencedor, destacado) */
.p-cell.is-ip {
color: var(--on-dark-1); font-weight: 500;
background: linear-gradient(180deg, rgba(0, 114, 206, 0.17), rgba(0, 114, 206, 0.10));
box-shadow: inset 1px 0 0 rgba(127, 184, 232, 0.30), inset -1px 0 0 rgba(127, 184, 232, 0.30);
}
.p-cell.is-ip.is-ip-head {
box-shadow: inset 1px 0 0 rgba(127, 184, 232, 0.30), inset -1px 0 0 rgba(127, 184, 232, 0.30), inset 0 2px 0 var(--blue);
}
.p-cell.is-ip .p-icon {
flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%;
background: var(--blue); color: #fff; display: grid; place-items: center;
box-shadow: 0 0 0 4px rgba(0, 114, 206, 0.18);
}
.p-cell.is-ip strong { color: #7fb8e8; font-weight: 600; }
.pillars_cta-wrap { display: flex; justify-content: flex-start; padding-top: clamp(16px, 2vw, 28px); }
/* ============== TEAMS legado (preservado para outras sections, se houver) ============== */
/* ============== REVIEWS ============== */
.section_review { background: var(--bg); }
.review_content { display: flex; flex-direction: column; gap: 56px; }
.review_cards-wrap {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
}
/* A4 — timeline "Trajetória": os 4 marcos LADO A LADO (não empilhados) */
#linha-do-tempo .review_cards-wrap { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1000px) { #linha-do-tempo .review_cards-wrap { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { #linha-do-tempo .review_cards-wrap { grid-template-columns: 1fr; } }
.review_card {
display: flex; flex-direction: column; justify-content: space-between;
gap: 36px;
padding: 36px 32px;
background: var(--off);
border-radius: var(--r-lg);
min-height: 280px;
}
.review_card .text-xl { color: var(--ink-strong); font-weight: 500; line-height: 1.4; }
.marco-num {
font-family: var(--font-mono);
font-size: 12px;
font-weight: 600;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--blue);
padding-bottom: 18px;
border-bottom: 1px solid var(--border-2);
}
.review_card.bg-tertiary .marco-num {
color: var(--silver);
border-bottom-color: rgba(255,255,255,0.14);
}
.review_card.bg-secondary { background: var(--surface-2); }
.review_card.bg-tertiary {
background: var(--ink-strong);
color: var(--on-dark-1);
}
.review_card.bg-tertiary .text-xl { color: var(--on-dark-1); }
.review_name-wrap { display: flex; align-items: center; gap: 14px; }
.image_user {
width: 44px; height: 44px;
border-radius: 50%;
background: var(--silver);
color: var(--navy);
display: grid; place-items: center;
font-family: var(--font-display);
font-weight: 600;
font-size: 14px;
letter-spacing: -0.02em;
}
.review_card.bg-tertiary .image_user { background: var(--blue); color: #fff; }
.review_name .text-xl { font-size: 16px; font-weight: 600; }
.review_name .text-base { font-size: 13px; color: var(--muted); }
.review_card.bg-tertiary .review_name .text-base { color: var(--on-dark-2); }
/* ============== CTA ============== */
/* ============== CHAMADA FINAL — closing CTA ============== */
.section_cta { background: var(--bg); padding-bottom: clamp(40px, 4vw, 72px); }
.cta-visual {
position: relative;
width: 100%;
max-width: var(--max-w);
margin-inline: auto;
min-height: 0;
border-radius: var(--r-lg);
overflow: hidden;
background: var(--navy-deep);
isolation: isolate;
}
/* grade técnica fina */
.cta-visual::before {
content: '';
position: absolute; inset: 0;
background-image:
linear-gradient(rgba(255,255,255,0.022) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,0.022) 1px, transparent 1px);
background-size: 64px 64px;
mask-image: radial-gradient(ellipse at 50% 50%, black 0%, transparent 78%);
-webkit-mask-image: radial-gradient(ellipse at 50% 50%, black 0%, transparent 78%);
z-index: 0;
pointer-events: none;
}
/* glow azul + tinte navy */
.cta-visual::after {
content: '';
position: absolute; inset: 0;
background:
radial-gradient(ellipse at 78% 12%, rgba(0,114,206,0.22) 0%, transparent 55%),
radial-gradient(ellipse at 0% 100%, rgba(12,35,64,0.50) 0%, transparent 55%),
linear-gradient(180deg, var(--navy) 0%, var(--navy-deep) 100%);
z-index: -1;
pointer-events: none;
}
/* marca d'água gigante */
.cta-watermark {
position: absolute;
right: -40px; bottom: -44px;
font-family: var(--font-display);
font-weight: 700;
font-size: clamp(110px, 14vw, 190px);
color: rgba(255,255,255,0.024);
letter-spacing: -0.06em;
line-height: 0.9;
pointer-events: none;
user-select: none;
z-index: 0;
}
/* foto de fundo do fechamento (variante .has-photo) */
.cta-visual .cta-bg {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
z-index: 0;
}
.cta-visual.has-photo::before { z-index: 1; }
.cta-visual.has-photo::after {
z-index: 1;
background:
radial-gradient(ellipse at 78% 12%, rgba(0,114,206,0.20) 0%, transparent 55%),
linear-gradient(180deg, rgba(7,21,42,0.88) 0%, rgba(12,35,64,0.72) 45%, rgba(7,21,42,0.90) 100%);
}
.cta-visual.has-photo .cta-watermark { z-index: 1; }
.cta_content-wrap {
position: relative; z-index: 2;
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
grid-template-areas:
'eyebrow buttons'
'heading buttons'
'lead buttons'
'trust trust';
align-items: center;
column-gap: clamp(36px, 5vw, 80px);
row-gap: 14px;
padding: clamp(40px, 4.5vw, 64px) clamp(28px, 4.5vw, 68px);
width: 100%;
text-align: left;
}
.cta_content-wrap .cta_eyebrow { grid-area: eyebrow; }
.cta_content-wrap .cta_heading { grid-area: heading; }
.cta_content-wrap .cta_lead { grid-area: lead; }
.cta_content-wrap .cta_buttons {
grid-area: buttons;
flex-direction: column;
align-items: stretch;
justify-self: end;
align-self: center;
min-width: 236px;
padding-top: 0;
}
.cta_content-wrap .cta_trust { grid-area: trust; justify-content: flex-start; }
.cta_eyebrow {
font-family: var(--font-mono);
font-size: 12px;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--gold-bright); /* acento azul no fechamento */
font-weight: 600;
display: inline-flex;
align-items: center;
gap: 12px;
}
.cta_eyebrow::after {
content: '';
display: inline-block;
width: 28px; height: 1px;
background: currentColor;
opacity: 0.55;
}
.cta_heading {
font-family: var(--font-title);
font-size: clamp(26px, 3vw, 40px);
font-weight: 700;
letter-spacing: -0.02em;
line-height: 1.12;
color: var(--on-dark-1);
max-width: 24ch;
text-wrap: balance;
}
.cta_heading em {
font-family: var(--font-accent);
font-style: italic;
font-weight: 500;
color: var(--silver);
}
.cta_lead {
font-size: clamp(15px, 1.15vw, 18px);
line-height: 1.6;
color: var(--on-dark-2);
max-width: 52ch;
}
.cta_buttons {
display: flex;
gap: 12px;
flex-wrap: wrap;
justify-content: center;
padding-top: 8px;
}
.cta_trust {
display: flex;
gap: 10px clamp(16px, 2vw, 32px);
flex-wrap: wrap;
justify-content: center;
list-style: none;
padding: clamp(16px, 2vw, 22px) 0 0;
margin-top: clamp(8px, 1.2vw, 14px);
border-top: 1px solid rgba(255,255,255,0.10);
width: 100%;
}
.cta_trust li {
display: inline-flex;
align-items: center;
gap: 8px;
font-family: var(--font-mono);
font-size: 12px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--on-dark-3);
font-weight: 500;
}
.cta_trust li svg {
width: 14px; height: 14px;
flex-shrink: 0;
stroke: var(--blue);
}
@media (max-width: 767px) {
.cta_content-wrap {
grid-template-columns: 1fr;
grid-template-areas: 'eyebrow' 'heading' 'lead' 'buttons' 'trust';
row-gap: 12px;
padding: clamp(32px, 8vw, 44px) 22px;
}
.cta_content-wrap .cta_buttons {
justify-self: stretch;
min-width: 0;
padding-top: 6px;
}
.cta_content-wrap .cta_trust { gap: 10px 18px; }
}
/* ===== Fechamento v3 · "painel assinatura" (is-panel) =====
Foto vira janela arquitetônica à direita com corte diagonal
(conceito Arquitetura da Conquista); conteúdo à esquerda em navy sólido. */
.cta-visual.is-panel .cta-bg {
left: auto;
right: 0;
width: min(46%, 620px);
clip-path: polygon(16% 0, 100% 0, 100% 100%, 0 100%);
}
.cta-visual.is-panel .cta-watermark { display: none; }
.cta-visual.is-panel::before { mask-image: none; -webkit-mask-image: none; opacity: 0.7; }
.cta-visual.is-panel::after {
z-index: 1;
background: linear-gradient(102deg,
var(--navy-deep) 0%,
var(--navy-deep) 52%,
rgba(7, 21, 42, 0.78) 62%,
rgba(7, 21, 42, 0.22) 78%,
rgba(7, 21, 42, 0.42) 100%);
}
.cta-visual.is-panel .cta_content-wrap {
grid-template-columns: minmax(0, 1fr);
grid-template-areas: 'eyebrow' 'heading' 'lead' 'buttons' 'trust';
width: 58%;
row-gap: 14px;
padding: clamp(44px, 5vw, 68px) clamp(28px, 4vw, 64px);
}
.cta-visual.is-panel .cta_content-wrap .cta_buttons {
flex-direction: row;
align-items: center;
justify-self: start;
min-width: 0;
padding-top: 10px;
}
.cta-visual.is-panel .cta_content-wrap .cta_trust {
margin-top: clamp(10px, 1.4vw, 16px);
}
@media (max-width: 767px) {
.cta-visual.is-panel .cta-bg {
left: 0; right: 0;
width: 100%;
height: clamp(150px, 42vw, 215px);
clip-path: polygon(0 0, 100% 0, 100% 84%, 0 100%);
}
.cta-visual.is-panel::after {
background: linear-gradient(180deg,
rgba(7, 21, 42, 0.30) 0%,
rgba(7, 21, 42, 0.66) clamp(100px, 30vw, 160px),
var(--navy-deep) clamp(150px, 42vw, 215px));
}
.cta-visual.is-panel .cta_content-wrap {
width: 100%;
padding: calc(clamp(150px, 42vw, 215px) + 16px) 22px clamp(32px, 8vw, 44px);
}
.cta-visual.is-panel .cta_content-wrap .cta_buttons {
flex-direction: column;
align-items: stretch;
justify-self: stretch;
}
}
/* ============== CONTACT ============== */
.section_contact { background: var(--bg); }
.contact_content-wrap {
display: grid;
grid-template-columns: 1fr 1fr;
gap: clamp(40px, 5vw, 80px);
align-items: flex-start;
}
.contact_content { display: flex; flex-direction: column; gap: 40px; }
.header_left.is-contact .text-5xl { max-width: 14ch; }
/* ===== G7 · Home/form — coluna esquerda preenchida e centralizada (harmoniza o bloco) ===== */
#form-home .contact_content-wrap { align-items: center; }
#form-home .contact_content { gap: clamp(20px, 2.2vw, 28px); }
.contact_lead {
font-size: clamp(16px, 1.15vw, 18px);
line-height: 1.6; color: var(--muted); max-width: 34ch;
}
.contact_points {
display: grid; gap: 14px; margin: 0; padding: 0;
list-style: none; max-width: 36ch;
}
.contact_points li {
position: relative; padding-left: 30px;
font-size: 15px; line-height: 1.5; color: var(--ink);
}
.contact_points li::before {
content: ""; position: absolute; left: 0; top: 2px;
width: 19px; height: 19px; border-radius: 50%;
background-color: var(--blue-soft);
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat; background-position: center; background-size: 12px;
}
.contact_wa {
display: inline-flex; align-items: center; gap: 10px;
width: fit-content; margin-top: 4px;
font-family: var(--font-display); font-weight: 600; font-size: 15px;
color: var(--ink-strong); text-decoration: none;
transition: color var(--t);
}
.contact_wa svg { width: 22px; height: 22px; color: #25D366; flex: none; }
.contact_wa b { color: var(--blue); }
.contact_wa:hover { color: var(--blue); }
.contact_info-wrap { display: grid; gap: 14px; padding-top: 32px; border-top: 1px solid var(--border-2); }
.contact_info {
display: grid;
grid-template-columns: 44px 1fr;
gap: 14px;
align-items: center;
}
.contact_info .icon-1x1-large .rect { color: var(--blue-soft); }
.contact_info .icon-1x1-large .path { color: var(--blue); }
.form_contact {
background: var(--ink-strong);
border-radius: var(--r-lg);
padding: clamp(28px, 3.5vw, 48px);
color: var(--on-dark-1);
}
.form_form { display: grid; gap: 18px; }
.form_field-wrapper { display: flex; flex-direction: column; gap: 8px; }
.form_label {
font-family: var(--font-mono);
font-size: 12px;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--on-dark-2);
font-weight: 600;
}
.form_input {
width: 100%;
padding: 14px 16px;
font-family: var(--font-body);
font-size: 15px;
color: var(--on-dark-1);
background: rgba(255,255,255,0.06);
border: 1px solid rgba(255,255,255,0.10);
border-radius: var(--r-sm);
transition: border-color var(--t), background var(--t);
}
.form_input::placeholder { color: var(--on-dark-3); }
.form_input:focus { outline: none; border-color: var(--blue); background: rgba(255,255,255,0.10); }
.form_input.is-text-area { min-height: 110px; resize: vertical; }
.form_input:where(select) {
appearance: none;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right 14px center;
background-size: 16px;
padding-right: 40px;
}
.form_input:where(select) option { color: var(--ink-strong); background: var(--bg); }
.form_row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form_row-2 .form_field-wrapper { margin: 0; }
.button.is-secondary[type="submit"] {
width: 100%;
margin-top: 8px;
padding: 16px 26px;
background: var(--blue);
color: #fff;
font-family: var(--font-display);
font-size: 14px;
font-weight: 600;
}
.button.is-secondary[type="submit"]:hover { background: var(--blue-hover); }
.form-status {
min-height: 1.4em;
margin-top: 12px;
padding: 0 4px;
font-size: 13.5px;
color: var(--on-dark-2);
line-height: 1.5;
}
.form-status.is-success { color: #6dffc6; }
.form-status.is-error { color: #ff8a8a; }
/* ===== CONSENTIMENTO LGPD (P0.2 — padrão canônico, sobre painel navy .form_contact)
Regra: NUNCA reintroduzir --muted, --ink-strong ou --blue como cor de
texto/link dentro de .form_contact (reprovam AA sobre #0c2340). ===== */
.form_consent { margin-top: 2px; }
.form_consent-label {
display: flex; align-items: flex-start; gap: 10px;
font-size: 13px; line-height: 1.55;
color: var(--on-dark-2);
cursor: pointer;
}
.form_consent-label input[type="checkbox"] {
flex: 0 0 18px; width: 18px; height: 18px; margin-top: 1px;
accent-color: var(--blue); cursor: pointer;
}
.form_consent-label a,
.form_consent a {
color: var(--link-on-dark);
text-decoration: underline; text-underline-offset: 2px;
}
.form_consent-label a:hover,
.form_consent a:hover { color: #fff; }
/* Micro-disclaimer de consórcio sob o submit (P0.5 — claims-compliance §8) */
.form_micro-disclaimer {
margin-top: 8px;
font-size: 12px;
line-height: 1.6;
color: var(--on-dark-2);
}
/* ============== FOOTER (CTA master + card) ==============
Estrutura "CTA + Footer card" (ref. BYQ/Forerunner) adaptada:
SEÇÃO FULL-BLEED com degradê claro→azul da marca (equivale ao
f8f7f5→d6fd70 da referência) e o card navy quase de largura total
DENTRO dela (bloco dentro do bloco). */
.footer {
background: linear-gradient(180deg, var(--bg) 0%, #d7e8f8 45%, #7FB8E8 100%);
padding-bottom: clamp(24px, 3vw, 48px);
}
/* CTA master — centrado, acima do card */
.fcta {
max-width: 860px;
margin: clamp(40px, 6vw, 120px) auto clamp(48px, 7vw, 128px);
display: flex; flex-direction: column; align-items: center;
gap: clamp(20px, 2.4vw, 28px);
text-align: center;
}
.fcta_title {
margin: 0;
font-family: var(--font-title);
font-size: clamp(30px, 4vw, 52px);
font-weight: 700; letter-spacing: -0.02em; line-height: 1.08;
color: var(--ink-strong);
text-wrap: balance;
}
.fcta_buttons { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.footer_bg {
width: 100%; max-width: 1800px; /* quase full-width (ref.), só o gutter de margem */
margin-inline: auto;
background: var(--ink-strong);
border-radius: var(--r-lg);
padding: clamp(40px, 5vw, 64px);
color: var(--on-dark-1);
}
/* conteúdo interno acompanha a largura do card (ref.: card edge-to-edge) */
.footer_bg .container-medium { max-width: 100%; }
/* navbar acompanha a coluna global (regra @media junto ao .container-medium) */
/* top tile: slogan + botão · logo à direita */
.ftop { display: flex; align-items: flex-start; justify-content: space-between; gap: 32px; }
.ftop_main { display: flex; flex-direction: column; align-items: flex-start; gap: 22px; max-width: 460px; }
.ftop_heading {
margin: 0;
font-family: var(--font-title);
font-size: clamp(22px, 2.3vw, 30px);
font-weight: 700; letter-spacing: -0.02em; line-height: 1.18;
color: var(--on-dark-1);
text-wrap: balance;
}
.ftop_logo { display: block; height: 30px; width: auto; }
.fdivider { border-top: 1px solid rgba(255,255,255,0.12); margin: clamp(28px, 3.2vw, 44px) 0; }
/* metades: contato (esq.) · navegação (dir.) */
.fhalves { display: grid; grid-template-columns: 1.1fr 2.4fr; gap: clamp(40px, 5vw, 72px); }
.footer_contact .is-desc { max-width: 38ch; margin-bottom: 6px; }
.footer_logo-wrap { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.footer_logo {
width: 44px; height: 44px; /* WCAG 2.5.5 */
border-radius: 50%;
background: rgba(255,255,255,0.08);
display: grid; place-items: center;
transition: background var(--t);
}
.footer_logo:hover { background: var(--blue); }
.footer_logo svg { width: 18px; height: 18px; color: var(--on-dark-1); }
.footer_right {
display: grid;
grid-template-columns: repeat(4, 1fr); /* 4 colunas de nav (contato foi p/ a metade esq.) */
gap: 32px;
}
.nav_links.is-active { color: var(--blue); }
.footer_links-wrap { display: flex; flex-direction: column; gap: 12px; }
.footer_col-title {
font-family: var(--font-mono);
font-size: 12px;
font-weight: 600;
letter-spacing: 0.14em; /* 0.22em estourava "ADMINISTRADORAS" na coluna de 4 */
text-transform: uppercase;
color: var(--blue);
padding-bottom: 8px;
border-bottom: 1px solid rgba(255,255,255,0.10);
margin-bottom: 4px;
}
.footer_link {
font-size: 13.5px;
color: var(--on-dark-2);
transition: color var(--t);
}
.footer_contact a.text-base, .footer_link { overflow-wrap: anywhere; }
a.footer_link:hover { color: var(--blue-bright, #5fb6ff); }
.footer_link.is-static { cursor: default; }
.footer_contact { display: flex; flex-direction: column; gap: 8px; }
.footer_contact .text-base.text-weight-semibold {
padding-bottom: 8px;
border-bottom: 1px solid rgba(255,255,255,0.10);
margin-bottom: 4px;
}
.footer_contact a.text-base { transition: color var(--t); }
.footer_contact a.text-base:hover { color: var(--blue); }
.footer_contact .text-base { color: var(--on-dark-2); font-size: 13.5px; }
.footer_contact .text-base.text-weight-semibold {
color: var(--on-dark-1);
font-family: var(--font-mono);
font-size: 12px;
letter-spacing: 0.18em;
text-transform: uppercase;
font-weight: 600;
margin-bottom: 2px;
}
/* Disclaimer padrão de consórcio (P0.5 — claims-compliance §8) — dentro do card */
.footer_disclaimer {
margin: clamp(28px, 3.2vw, 44px) 0 0;
font-size: 12px;
line-height: 1.7;
color: var(--on-dark-2);
max-width: 110ch;
}
/* barra inferior — dentro do card: social + copyright · legal */
.footer_bottom {
display: flex; justify-content: space-between; align-items: center;
flex-wrap: wrap;
gap: 16px;
font-family: var(--font-mono);
font-size: 12px;
color: var(--on-dark-2);
letter-spacing: 0.04em;
}
.fbottom_left { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
/* ============== WHATSAPP FLOAT ============== */
.wa-float {
position: fixed; right: 24px; bottom: 24px;
width: 56px; height: 56px;
border-radius: 50%;
background: var(--whatsapp);
color: #fff;
display: grid; place-items: center;
box-shadow: 0 14px 32px -10px rgba(37, 211, 102, 0.55);
z-index: 80;
transition: transform var(--t);
}
.wa-float:hover { transform: scale(1.08); }
/* oculto enquanto a hero esta visivel (o WhatsApp da hero cobre o canal) */
.wa-float { transition: transform var(--t), opacity 0.3s ease, visibility 0.3s; }
.wa-float.is-hidden { opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(12px); }
/* ============== REVEAL ============== */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity 450ms ease, transform 450ms cubic-bezier(0.16, 1, 0.3, 1); }
.reveal.is-in { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
.reveal { opacity: 1; transform: none; }
}
/* ===================================================================
COMPONENTES 2026-08 — fundação da rodada do briefing
(timeline · path-card · vitrine · trust-seal · WhatsApp verde ·
FAQ index · blueprint "Arquitetura da Conquista" · depoimento interino)
=================================================================== */
/* ----- 4.3 Timeline horizontal 4 passos (Diagnóstico→Curadoria→Estratégia→Conquista) ----- */
.timeline4 {
list-style: none;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: clamp(20px, 2.4vw, 32px);
margin: 0; padding: 0;
}
.timeline4_step { position: relative; display: flex; flex-direction: column; gap: 10px; padding-top: 36px; }
/* trilho */
.timeline4_step::before {
content: '';
position: absolute; top: 7px; left: 18px; right: calc(-1 * clamp(20px, 2.4vw, 32px));
height: 2px; background: var(--border);
}
.timeline4_step:last-child::before { right: 0; }
/* nó: círculo azul + anel de acento (azul suave) */
.timeline4_step::after {
content: '';
position: absolute; top: 0; left: 0;
width: 16px; height: 16px; border-radius: 50%;
background: var(--bg);
border: 2px solid var(--blue);
box-shadow: 0 0 0 4px var(--blue-soft);
}
/* etapa final "Conquista": nó preenchido de azul e maior (marca o fim da jornada) */
.timeline4_step:last-child::after {
width: 24px; height: 24px;
top: -5px; left: -4px;
background: var(--blue);
border-color: var(--blue);
box-shadow: 0 0 0 5px var(--blue-soft), 0 0 18px rgba(0, 114, 206, 0.45);
}
.timeline4_num {
font-family: var(--font-mono);
font-size: 14px; font-weight: 700;
letter-spacing: 0.16em; text-transform: uppercase;
color: var(--blue);
}
.timeline4_title {
font-family: var(--font-title);
font-size: clamp(18px, 1.5vw, 22px);
font-weight: 600; letter-spacing: -0.01em;
color: var(--ink-strong);
}
.timeline4_text { font-size: 14.5px; line-height: 1.6; color: var(--muted); margin: 0; }
@media (max-width: 767px) {
.timeline4 { grid-template-columns: 1fr; gap: 0; }
.timeline4_step { padding: 0 0 28px 32px; }
.timeline4_step::before { top: 18px; bottom: -4px; left: 7px; right: auto; width: 2px; height: auto; }
.timeline4_step:last-child::before { display: none; }
.timeline4_step::after { top: 2px; left: 0; }
}
/* ----- 4.4 Card de caminho com foto de topo (decisão #4: 1 botão por card) ----- */
.path-card {
display: flex; flex-direction: column;
background: var(--bg);
border: 1px solid var(--border-2);
border-radius: var(--r-lg);
overflow: hidden;
transition: border-color var(--t), transform var(--t), box-shadow var(--t);
}
.path-card:hover { border-color: var(--navy); transform: translateY(-4px); box-shadow: 0 24px 60px -32px rgba(12, 35, 64, 0.25); }
.path-card_media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--navy-deep); }
.path-card_media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--t); }
.path-card:hover .path-card_media img { transform: scale(1.05); }
.path-card_media::after {
content: '';
position: absolute; left: 0; right: 0; bottom: 0; height: 44%;
background: linear-gradient(180deg, transparent, rgba(7, 21, 42, 0.55));
}
.path-card_kicker {
position: absolute; left: 18px; bottom: 14px; z-index: 2;
font-family: var(--font-mono);
font-size: 12px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase;
color: #fff;
}
.path-card_body { display: flex; flex-direction: column; gap: 14px; flex-grow: 1; padding: clamp(22px, 2.4vw, 30px); }
.path-card_title {
font-family: var(--font-title);
font-size: clamp(20px, 1.8vw, 25px);
font-weight: 600; letter-spacing: -0.015em; line-height: 1.2;
color: var(--ink-strong);
}
.path-card_bullets { list-style: none; display: grid; gap: 8px; margin: 0; padding: 0; }
.path-card_bullets li { display: flex; gap: 10px; align-items: flex-start; font-size: 14.5px; line-height: 1.55; color: var(--muted); }
.path-card_bullets li::before { content: ''; flex: none; width: 6px; height: 6px; margin-top: 7px; border-radius: 50%; background: var(--blue); }
.path-card_body .button { margin-top: auto; justify-content: center; }
.path-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
@media (max-width: 991px) { .path-grid { grid-template-columns: 1fr; } }
/* ----- 4.5 Vitrine com texto sobreposto ("O que você conquista") ----- */
.showcase_grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 16px; }
.showcase_card {
position: relative;
grid-column: span 3;
display: flex; align-items: flex-end;
min-height: clamp(240px, 24vw, 360px);
border-radius: var(--r-lg);
overflow: hidden;
background: var(--navy-deep);
isolation: isolate;
}
.showcase_card.is-third { grid-column: span 4; min-height: clamp(260px, 26vw, 380px); }
.showcase_card img {
position: absolute; inset: 0; z-index: 0;
width: 100%; height: 100%; object-fit: cover;
transition: transform 0.7s var(--t);
}
.showcase_card:hover img { transform: scale(1.04); }
.showcase_card::after {
content: '';
position: absolute; inset: 0; z-index: 1;
background: linear-gradient(180deg, rgba(7,21,42,0) 30%, rgba(7,21,42,0.28) 60%, rgba(7,21,42,0.82) 100%);
}
.showcase_content { position: relative; z-index: 2; display: flex; flex-direction: column; gap: 6px; width: 100%; padding: clamp(20px, 2.6vw, 32px); color: var(--on-dark-1); }
.showcase_kicker {
font-family: var(--font-mono);
font-size: 12px; font-weight: 600; letter-spacing: 0.20em; text-transform: uppercase;
color: var(--gold-bright);
}
.showcase_title { font-family: var(--font-title); font-size: clamp(22px, 2.2vw, 32px); font-weight: 600; letter-spacing: -0.015em; line-height: 1.1; }
.showcase_sub { font-size: 14px; color: var(--on-dark-2); max-width: 44ch; }
.showcase_link { display: inline-flex; align-items: center; gap: 8px; margin-top: 8px; font-size: 13.5px; font-weight: 600; color: #fff; }
.showcase_link svg { transition: transform var(--t); }
a.showcase_card:hover .showcase_link svg { transform: translateX(4px); }
@media (max-width: 991px) { .showcase_card { grid-column: span 6; min-height: clamp(220px, 32vw, 300px); } .showcase_card.is-third { grid-column: span 6; min-height: 260px; } }
@media (max-width: 560px) { .showcase_card, .showcase_card.is-third { grid-column: span 12; min-height: 220px; } }
/* ----- 4.6 Selo de confiança (Banco Central / CNPJ) ----- */
.trust-seal-row { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.trust-seal {
display: inline-flex; align-items: center; gap: 14px;
padding: 14px 22px;
border: 1px solid var(--border);
border-radius: var(--r-md);
background: var(--bg);
}
.trust-seal_icon {
flex: none; width: 38px; height: 38px;
display: grid; place-items: center;
border-radius: 50%;
background: var(--gold-soft);
}
.trust-seal_icon svg { width: 20px; height: 20px; stroke: var(--gold-text); fill: none; }
.trust-seal_text { display: flex; flex-direction: column; gap: 1px; }
.trust-seal_title { font-family: var(--font-display); font-size: 13.5px; font-weight: 600; letter-spacing: -0.005em; color: var(--ink-strong); }
.trust-seal_sub { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.06em; color: var(--muted); }
.trust-seal.is-on-dark { border-color: rgba(255,255,255,0.14); background: rgba(255,255,255,0.05); }
.trust-seal.is-on-dark .trust-seal_title { color: var(--on-dark-1); }
.trust-seal.is-on-dark .trust-seal_sub { color: var(--on-dark-2); }
.trust-seal.is-on-dark .trust-seal_icon { background: rgba(0, 114, 206, 0.18); }
.trust-seal.is-on-dark .trust-seal_icon svg { stroke: var(--gold-bright); }
/* ----- 4.7 Botão WhatsApp verde (decisão #10 — 1 por dobra, sempre secundário)
Texto NAVY sobre o verde: 9,2:1 (AA/AAA). Branco sobre #25D366 reprova (2,0:1). ----- */
.button.is-whatsapp,
.cta-main.is-whatsapp {
background: var(--whatsapp);
border: 1px solid var(--whatsapp);
color: var(--navy-deep);
font-weight: 600;
display: inline-flex; align-items: center; gap: 10px;
}
.button.is-whatsapp:hover,
.cta-main.is-whatsapp:hover {
background: var(--whatsapp-hover);
border-color: var(--whatsapp-hover);
color: var(--navy-deep);
transform: translateY(-1px);
}
.cta-main.is-whatsapp { box-shadow: 0 14px 32px -14px rgba(37, 211, 102, 0.55); }
.button.is-whatsapp svg, .cta-main.is-whatsapp svg { flex: none; width: 18px; height: 18px; }
/* variante ghost (FAQ / atalhos discretos) */
.button.is-whatsapp.is-ghost {
background: transparent;
border-color: var(--whatsapp);
color: #1DAA55; /* sobre fundo claro */
}
.section_hero .button.is-whatsapp.is-ghost,
.section_cta .button.is-whatsapp.is-ghost,
.is-on-dark .button.is-whatsapp.is-ghost { color: var(--whatsapp); } /* sobre navy */
.button.is-whatsapp.is-ghost:hover {
background: var(--whatsapp-soft);
border-color: var(--whatsapp);
color: #1DAA55;
transform: none;
}
.section_hero .button.is-whatsapp.is-ghost:hover,
.section_cta .button.is-whatsapp.is-ghost:hover,
.is-on-dark .button.is-whatsapp.is-ghost:hover { color: var(--whatsapp); }
/* ----- 4.8 FAQ — índice lateral por temas (abertura pós-clique) ----- */
.faq-index { display: flex; flex-direction: column; width: 100%; margin-top: 8px; border-top: 1px solid var(--border-2); }
.faq-index_link {
display: flex; align-items: center; justify-content: space-between; gap: 12px;
width: 100%; padding: 13px 2px;
font-family: var(--font-display);
font-size: 14.5px; font-weight: 500; text-align: left;
color: var(--muted);
border-bottom: 1px solid var(--border-2);
transition: color var(--t);
cursor: pointer;
}
.faq-index_link:hover { color: var(--ink-strong); }
.faq-index_link.is-active { color: var(--blue); font-weight: 600; }
.faq-index_link .count { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.08em; color: var(--muted-2); }
@media (max-width: 991px) {
.faq-index { flex-direction: row; overflow-x: auto; gap: 8px; border-top: 0; padding-bottom: 4px; -webkit-overflow-scrolling: touch; }
.faq-index_link { flex: none; width: auto; border: 1px solid var(--border); border-radius: var(--r-pill); padding: 10px 16px; font-size: 13px; border-bottom-width: 1px; }
.faq-index_link.is-active { border-color: var(--blue); background: var(--blue-soft); }
}
/* ----- Depoimento interino (sem autorização/foto — claims §3): avatar neutro ----- */
.image_user.is-pending svg { width: 55%; height: 55%; opacity: .6; }
/* ===== ARQUITETURA DA CONQUISTA — utilitários blueprint ===== */
/* Grade de prancheta (linha maior + linha menor) p/ seções CLARAS.
NÃO empilhar com seções que já têm grade própria (hero, logos_wrap,
services_frame, cta-visual) — é substituir ou nada, nunca dobrar o pattern. */
.bp-grid { position: relative; }
.bp-grid > * { position: relative; z-index: 1; }
.bp-grid::before {
content: '';
position: absolute; inset: 0; z-index: 0;
background-image:
linear-gradient(rgba(12,35,64,0.05) 1px, transparent 1px),
linear-gradient(90deg, rgba(12,35,64,0.05) 1px, transparent 1px),
linear-gradient(rgba(12,35,64,0.028) 1px, transparent 1px),
linear-gradient(90deg, rgba(12,35,64,0.028) 1px, transparent 1px);
background-size: 120px 120px, 120px 120px, 24px 24px, 24px 24px;
mask-image: radial-gradient(ellipse at 50% 0%, black 0%, transparent 72%);
-webkit-mask-image: radial-gradient(ellipse at 50% 0%, black 0%, transparent 72%);
pointer-events: none;
}
/* versão p/ paineis navy (mesma régua dos patterns existentes) */
.bp-grid.is-dark::before {
background-image:
linear-gradient(rgba(255,255,255,0.035) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,0.035) 1px, transparent 1px),
linear-gradient(rgba(255,255,255,0.018) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,0.018) 1px, transparent 1px);
}
/* Ornamento "planta": linhas de projeto convergindo num ponto marcado
(o bem conquistado). SVG inline leve, decorativo, sem asset externo. */
.bp-plot { position: relative; overflow: hidden; }
.bp-plot::after {
content: '';
position: absolute; top: -24px; right: clamp(-60px, -3vw, -20px); z-index: 0;
width: min(38vw, 420px); aspect-ratio: 1 / 1;
background: url("data:image/svg+xml;utf8,") no-repeat center / contain;
pointer-events: none;
}
.bp-plot.is-dark::after {
background-image: url("data:image/svg+xml;utf8,");
}
/* ============== RESPONSIVE ============== */
/* Alvos de toque >=44px em chips/abas (WCAG 2.5.5) — só em telas de toque, desktop intacto */
@media (pointer: coarse) {
.filter_chip, .cartas_filter, .cat-tab, .cta_chip {
min-height: 44px;
display: inline-flex;
align-items: center;
}
}
@media (max-width: 1100px) {
.header_top { grid-template-columns: auto 1fr; }
.header_top .button-wrap { grid-column: span 2; justify-self: start; }
}
@media (max-width: 991px) {
.nav_wrap { display: none; }
.menu-button { display: inline-flex; }
.nav_buttons-wrap .button { display: none; }
.navbar_content { grid-template-columns: 1fr auto; }
.hero-master_grid { grid-template-columns: 1fr; gap: clamp(22px, 5vw, 32px); align-items: flex-start; align-content: end; }
.hero-right-block { justify-self: stretch; max-width: 100%; }
.hero-headline h1 { font-size: clamp(32px, 7vw, 52px); max-width: 100%; }
.hero-foot { grid-template-columns: 1fr; gap: 20px; }
.about_split { grid-template-columns: 1fr; gap: 32px; }
.logos_grid { grid-template-columns: repeat(2, 1fr); }
.sellers_content-wrap, .buyers_content-wrap, .contact_content-wrap { grid-template-columns: 1fr; }
.pillars_header { gap: 16px; }
/* mobile: block flow (preenche a largura; grid-1fr não colapsa a table-grid) */
.pillars_table { display: block !important; border-radius: var(--r-lg); }
.pillars_table thead { display: none !important; }
.pillars_table tbody, .pillars_table tr { display: block !important; width: 100%; }
.pillars_table tr { border-bottom: 1px solid var(--gap-line); }
.pillars_table tbody tr:last-child { border-bottom: 0; }
.p-cell { display: flex !important; width: 100%; border-right: 0 !important; border-bottom: 0; }
.p-cell.is-dim {
border-bottom: 1px solid var(--gap-line);
padding-bottom: 12px; padding-top: 22px;
}
.p-cell.is-market::before,
.p-cell.is-ip::before {
content: 'Sem assessoria · ';
font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.14em;
text-transform: uppercase; color: var(--on-dark-3); font-weight: 600;
margin-right: 4px; flex-shrink: 0;
}
.p-cell.is-ip::before { content: 'InvestPro · '; color: #7fb8e8; }
.p-cell.is-ip { box-shadow: none; }
.buyers_visual { aspect-ratio: 16 / 11; }
.sellers_visual { aspect-ratio: auto; min-height: 260px; }
.sellers_visual-content { gap: 28px; padding: 32px 28px; }
.sellers_card-wrap { gap: 10px; }
.sellers_card { padding: 18px 20px; gap: 14px; grid-template-columns: 40px 1fr; }
.sellers_card .icon-1x1-large { width: 40px; height: 40px; }
.sellers_content { gap: 32px; }
.sellers_cta { padding-top: 4px; flex-direction: column; align-items: stretch; gap: 12px; }
.sellers_cta .button { width: 100%; justify-content: center; }
.fhalves { grid-template-columns: 1fr; }
.footer_right { grid-template-columns: repeat(2, 1fr); gap: 32px; }
.cta_buttons { flex-direction: column; align-items: stretch; width: 100%; }
.cta_buttons .button, .cta_buttons .cta-main { width: 100%; justify-content: center; }
}
@media (max-width: 767px) {
.hero-foot-stats { gap: 24px; }
.hero-foot-stat { border-left: 0; padding-left: 0; padding-right: 0; }
.hero-foot-stat .v { font-size: 18px; }
.hero-button-wrap .cta-main { width: 100%; }
}
@media (max-width: 767px) {
.services_header { grid-template-columns: 1fr; gap: 24px; }
.services_list-home { grid-template-columns: 1fr; }
.services_frame { min-height: 260px; }
.review_cards-wrap { grid-template-columns: 1fr; }
.logos_grid { grid-template-columns: 1fr; }
.ftop { flex-direction: column-reverse; align-items: flex-start; gap: 24px; }
.fcta_buttons { flex-direction: column; align-items: stretch; width: 100%; max-width: 420px; }
.fcta_buttons .button, .fcta_buttons .cta-main { width: 100%; }
.footer_bottom { flex-direction: column; align-items: flex-start; }
.cta_trust { flex-direction: column; gap: 12px; align-items: flex-start; max-width: 100%; padding-left: 4px; }
.cta_trust li { width: 100%; }
.header_top { grid-template-columns: 1fr; }
.header_top .button-wrap { grid-column: 1; }
}
@media (max-width: 479px) {
.form_row-2 { grid-template-columns: 1fr; }
.footer_right { grid-template-columns: 1fr; gap: 24px; }
.statistics_wrap { grid-template-columns: 1fr; gap: 14px; }
.statistics_card.text-align-center,
.statistics_card.text-align-right { text-align: left; }
/* respiro do float em telas mínimas (P0.1) */
.wa-float {
right: max(16px, env(safe-area-inset-right));
bottom: max(16px, env(safe-area-inset-bottom));
width: 52px; height: 52px;
}
}
/* ===== P0.1 · Botões quebram linha no mobile (nowrap só no desktop) ===== */
@media (max-width: 767px) {
.button,
.cta-main {
white-space: normal; /* deixa o rótulo quebrar em 2 linhas */
text-align: center;
max-width: 100%;
min-height: 48px; /* preserva o alvo de toque quando quebra */
height: auto;
}
}
/* ============== COLUNA GLOBAL (aprovada 02/09, testada na Fale Conosco) ==============
−10% da largura disponível no desktop, cap 1620px. Conteúdo (container-medium,
incl. navbar) e cards full-width (footer_bg, container-box, cta-visual) correm
na MESMA coluna. Mobile/tablet (<992px) intocados. NO FIM do arquivo de
propósito: precisa vencer as bases de .footer_bg/.cta-visual na cascata. */
@media (min-width: 992px) {
.container-medium,
.container-box,
.footer_bg { max-width: min(1710px, 95%); }
/* cta-visual vive em .padding-global.is-cta (SEM gutter lateral) -> o pai e
full-width; desconta o gutter na formula p/ cair na MESMA coluna */
.cta-visual { max-width: min(1710px, calc((100% - 2 * var(--gutter)) * 0.95)); }
.footer_bg .container-medium { max-width: 100%; } /* interno segue o card */
}