/* ==========================================================================
PROJEX CONSTRUTORA — STYLES
Tokens do kit_preparado da Projex. Simbolo = P isometrico (mascara, nao clip-path).
========================================================================== */
:root {
/* --- KIT DE MARCA PROJEX (kit_preparado) --------------------------------
Os dois motivos vem do kit em data URI: funcionam em file://, print e PDF
(playbook 15.1). mark-full = contorno do P isometrico; mark-band = o
telhado facetado do topo do P, que tileia como crista angular. */
--mark-full: url('data:image/png;base64,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');
--mark-band: url('data:image/png;base64,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');
--brand: #00B8E0; --brand-2: #0070A8; --brand-light: #70E5FF;
--brand-soft: #00B8E01a;
--radius-btn: 5px; --radius-card: 5px;
/* Marca */
--color-primary: #00B8E0; /* turquesa da logo */
--color-primary-strong: #0070A8; /* hover/contraste */
--color-primary-soft: #E6F8FD; /* tint claro */
/* Institucional / superfícies */
--color-ink: #002229; /* azul-petróleo profundo */
--color-ink-2: #04323C; /* sub-superfície dark */
--color-ink-3: #0070A8;
--color-graphite: #2A3940;
--color-slate: #4A5560;
/* Neutras */
--color-bg: #FFFFFF;
--color-bg-soft: #F5F7F8;
--color-bg-mute: #ECF1F3;
--color-line: #E1E7EA;
--color-text: #102026;
--color-text-mute: #45555D; /* mais escuro = melhor contraste no claro */
--color-on-dark: #EAF7FB;
--color-on-dark-mute: #BCD9E4; /* mais claro = melhor contraste no escuro */
/* Acento luxo */
--color-gold: #C7A35D;
/* Verde = pontos de conversão (form, popup, CTA fixo) */
--color-green: #1FA858;
--color-green-deep: #148244;
--color-green-light: #2BD46E;
/* Header fixo */
--header-h: 92px;
/* Tipografia */
--font-display: "Sora", "Inter", system-ui, -apple-system, sans-serif;
--font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
/* Layout */
--container: 1200px;
--container-pad: clamp(20px, 4vw, 40px);
--radius-sm: 5px;
--radius: 5px;
--radius-lg: 5px;
/* Sombras */
--shadow-sm: 0 4px 14px rgba(0, 34, 41, 0.06);
--shadow: 0 12px 40px rgba(0, 34, 41, 0.10);
--shadow-lg: 0 24px 60px rgba(0, 34, 41, 0.16);
--shadow-accent: 0 16px 40px rgba(0, 184, 224, 0.28);
/* Transições */
--ease: cubic-bezier(.2,.7,.2,1);
--t-fast: .2s var(--ease);
--t: .35s var(--ease);
--t-slow: .6s var(--ease);
}
/* ==========================================================================
RESET & BASE
========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html {
scroll-behavior: smooth;
-webkit-text-size-adjust: 100%;
scroll-padding-top: calc(var(--header-h) + 16px);
}
body {
font-family: var(--font-body);
font-size: 16px;
line-height: 1.65;
color: var(--color-text);
background: var(--color-bg);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
overflow-x: hidden;
}
img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; transition: color var(--t-fast); }
button { font: inherit; cursor: pointer; border: 0; background: transparent; color: inherit; }
ul, ol { list-style: none; }
/* ==========================================================================
GEOMETRIA ANGULAR (13.1) — a logo é um HEXÁGONO (retas + chanfros),
então o site inteiro é angular. Exceção: o FAB do WhatsApp continua
redondo (botão de marca reconhecível) e os marcadores hexagonais usam
clip-path (não dependem de border-radius).
========================================================================== */
*, *::before, *::after { border-radius: var(--radius-btn, 5px); }
/* Marcador/ícone hexagonal da marca (pointy-top, igual à logo) */
.hex {
clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px);
}
::selection { background: var(--color-primary); color: var(--color-ink); }
.container {
width: 100%;
max-width: var(--container);
margin: 0 auto;
padding-left: var(--container-pad);
padding-right: var(--container-pad);
}
/* ==========================================================================
TIPOGRAFIA UTILITÁRIA
========================================================================== */
.eyebrow {
display: inline-flex;
align-items: center;
gap: 10px;
font-family: var(--font-display);
font-size: 13px;
font-weight: 600;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--color-primary);
margin-bottom: 18px;
}
.eyebrow--dark { color: var(--color-ink); }
.eyebrow--light { color: var(--color-primary); }
/* Tarja de destaque (alto contraste sobre a foto do hero) */
.eyebrow--badge {
color: #fff;
background: rgba(9, 33, 41, 0.85);
-webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
padding: 10px 18px;
margin-bottom: 22px;
clip-path: polygon(11px 0, 100% 0, 100% calc(100% - 11px), calc(100% - 11px) 100%, 0 100%, 0 11px);
box-shadow: 0 10px 28px rgba(0, 0, 0, 0.35);
max-width: 100%;
}
.eyebrow--badge .eyebrow__dot { background: var(--color-primary); }
@media (max-width: 600px) {
.eyebrow--badge { white-space: normal; line-height: 1.5; padding: 12px 20px;
clip-path: polygon(9px 0, 100% 0, 100% calc(100% - 9px), calc(100% - 9px) 100%, 0 100%, 0 9px); }
}
/* Marcador de TODO eyebrow = hexágono da marca (não uma bolinha genérica) */
.eyebrow::before {
content: "";
width: 11px; height: 12px;
background: var(--color-primary);
-webkit-mask: var(--mark-band) center/contain no-repeat;
mask: var(--mark-band) center/contain no-repeat;
flex: 0 0 auto;
}
.eyebrow__dot { display: none; }
.section-title {
font-family: var(--font-display);
font-weight: 600;
color: var(--color-ink);
font-size: clamp(28px, 4vw, 48px);
line-height: 1.14;
letter-spacing: -0.01em;
margin-bottom: 18px;
max-width: 22ch;
text-wrap: balance;
}
.section-title--light { color: #fff; }
.section-lead {
font-size: clamp(16px, 1.4vw, 18px);
color: var(--color-text-mute);
max-width: 60ch;
margin-bottom: 44px;
}
.section-lead--light { color: var(--color-on-dark-mute); }
.section-lead--short { max-width: 50ch; }
.accent {
color: var(--color-primary);
position: relative;
/* nowrap só em telas grandes — em mobile pode quebrar */
}
@media (min-width: 900px) {
.accent { white-space: nowrap; }
}
/* Régua sob o acento = barra chanfrada nas pontas (traço do hexágono),
não uma linha arredondada genérica. */
.hero__headline .accent::after,
.section-title .accent::after {
content: "";
position: absolute;
left: 0; right: 0; bottom: -6px;
height: 5px;
background: var(--color-primary);
clip-path: polygon(5px 0, 100% 0, calc(100% - 5px) 100%, 0 100%);
opacity: .85;
}
/* ==========================================================================
BOTÕES
========================================================================== */
/* TODOS os botões têm pontas HEXAGONAIS (identidade da marca) */
.btn {
position: relative;
overflow: hidden;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
font-family: var(--font-display);
font-weight: 600;
letter-spacing: 0.01em;
padding: 14px 26px;
clip-path: polygon(13px 0, 100% 0, 100% calc(100% - 13px), calc(100% - 13px) 100%, 0 100%, 0 13px);
transition: transform var(--t-fast), background var(--t), color var(--t), filter var(--t);
cursor: pointer;
text-align: center;
white-space: nowrap;
will-change: transform;
}
.btn svg { width: 18px; height: 18px; position: relative; z-index: 2; }
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(1px); }
/* Brilho que atravessa o botão secundário (sheen) */
.btn--ghost-light::after {
content: "";
position: absolute;
top: 0; left: -130%;
width: 60%; height: 100%;
background: linear-gradient(100deg, transparent, rgba(255,255,255,0.55), transparent);
transform: skewX(-18deg);
animation: btnShine 4.2s ease-in-out infinite;
pointer-events: none;
z-index: 1;
}
@keyframes btnShine { 0% { left: -130%; } 55%, 100% { left: 140%; } }
.btn--lg { padding: 18px 34px; font-size: 16px; }
.btn--sm { padding: 10px 20px; font-size: 14px; }
.btn--block { width: 100%; }
/* =====================================================================
Botões preenchidos = corpo hexagonal (::before) + ANEL DE PULSO que
expande e some (::after), igual ao ctaPulse do Militão/Moura.
Como o clip-path apaga box-shadow, o anel é um pseudo hexagonal
que cresce (inset negativo) por trás do corpo e desaparece.
===================================================================== */
.btn--accent, .btn--green {
background: transparent; /* o corpo colorido vem do ::before */
clip-path: none; /* remove o clip do .btn base p/ o anel escapar */
overflow: visible;
isolation: isolate;
}
.btn--accent { color: var(--color-ink); }
.btn--green { color: #fff; }
.btn--accent:hover, .btn--green:hover { color: #fff; }
.btn--accent::before, .btn--green::before,
.btn--accent::after, .btn--green::after {
content: "";
position: absolute; inset: 0;
clip-path: polygon(13px 0, 100% 0, 100% calc(100% - 13px), calc(100% - 13px) 100%, 0 100%, 0 13px);
pointer-events: none;
}
/* corpo (fica na frente do anel, atrás do texto) */
.btn--accent::before { z-index: -1; background: var(--color-primary); transition: filter var(--t), background var(--t); }
.btn--green::before { z-index: -1; background: linear-gradient(115deg, var(--color-green-light) 0%, var(--color-green) 55%, var(--color-green-deep) 100%); transition: filter var(--t); }
/* ANEL que pulsa: cresce ~13px pra fora e some */
.btn--accent::after { z-index: -2; background: var(--color-primary); animation: ringPulse 1.7s ease-out infinite; }
.btn--green::after { z-index: -2; background: var(--color-green-light); animation: ringPulse 1.7s ease-out infinite; }
@keyframes ringPulse {
0% { inset: 0; opacity: .55; }
70% { inset: -13px; opacity: 0; }
100% { inset: -13px; opacity: 0; }
}
.btn--accent:hover::before { background: var(--color-primary-strong); }
.btn--green:hover::before { filter: brightness(1.08); }
.btn--ghost {
background: var(--color-bg-mute);
color: var(--color-ink);
}
.btn--ghost:hover { background: #dfe7ea; }
/* Secundário sobre imagem = hexágono fosco translúcido */
.btn--ghost-light {
background: rgba(255, 255, 255, 0.14);
color: #fff;
-webkit-backdrop-filter: blur(6px);
backdrop-filter: blur(6px);
}
.btn--ghost-light:hover { background: rgba(255, 255, 255, 0.24); }
.btn--compact { padding: 12px 22px; font-size: 14px; animation: none; }
/* folga do texto para as pontas anguladas nos botões grandes */
.btn--lg { padding-left: 36px; padding-right: 36px; }
/* =================================================================
READ PROGRESS BAR */
.read-progress {
position: fixed;
top: 0; left: 0;
height: 3px;
width: 0;
background: linear-gradient(90deg, var(--color-primary), var(--color-primary-soft));
z-index: 1000;
transition: width 0.1s linear;
pointer-events: none;
}
/* =================================================================
SITE HEADER — fundo sólido da marca + faixa de nav deslizante */
.site-header {
position: fixed;
inset: 0 0 auto 0;
z-index: 900;
height: var(--header-h);
display: flex;
align-items: center;
background: linear-gradient(115deg, #04323C 0%, #002229 60%, #07212A 100%);
border-bottom: 1px solid rgba(255,255,255,0.08);
transition: box-shadow 0.35s var(--ease), background 0.35s var(--ease);
}
.site-header::before {
content: '';
position: absolute;
inset: 0 0 auto 0;
height: 2px;
background: linear-gradient(90deg, transparent, var(--color-primary) 30%, #7FE9EB 50%, var(--color-primary) 70%, transparent);
opacity: 0.8;
}
.site-header.is-solid {
background: linear-gradient(115deg, rgba(16,56,71,0.92) 0%, rgba(11,42,51,0.94) 60%, rgba(7,33,42,0.95) 100%);
-webkit-backdrop-filter: blur(14px);
backdrop-filter: blur(14px);
box-shadow: 0 10px 34px -14px rgba(0,0,0,0.7);
}
.site-header__inner {
position: relative;
display: flex;
align-items: center;
gap: 16px;
width: 100%;
height: 100%;
}
.site-header__brand { display: inline-flex; align-items: center; flex-shrink: 0; line-height: 0; }
.site-header__brand img { height: 62px; width: auto; filter: drop-shadow(0 3px 8px rgba(0,0,0,0.35)); }
/* faixa de nav: acompanha a rolagem, desliza até a seção atual (todas as telas) */
.site-nav {
display: flex;
align-items: center;
gap: 8px;
margin-left: auto;
overflow-x: auto;
scroll-behavior: smooth;
scrollbar-width: none;
-ms-overflow-style: none;
-webkit-overflow-scrolling: touch;
-webkit-mask: linear-gradient(90deg, transparent 0, #000 4%, #000 92%, transparent 100%);
mask: linear-gradient(90deg, transparent 0, #000 4%, #000 92%, transparent 100%);
}
.site-nav::-webkit-scrollbar { display: none; }
.site-nav a[data-section] {
flex: 0 0 auto;
padding: 8px 17px;
font-family: var(--font-display);
font-size: 14px;
font-weight: 500;
color: rgba(255,255,255,0.82);
white-space: nowrap;
clip-path: polygon(9px 0, 100% 0, 100% calc(100% - 9px), calc(100% - 9px) 100%, 0 100%, 0 9px);
transition: color 0.2s var(--ease), background 0.25s var(--ease);
}
.site-nav a[data-section]:hover { color: #fff; background: rgba(255,255,255,0.16); }
/* seção atual: chip BRANCO hexagonal (cor diferente do botão turquesa do header) */
.site-nav a[data-section].current {
color: var(--color-ink);
background: #fff;
font-weight: 700;
}
.site-header__cta { flex-shrink: 0; margin-left: 4px; }
@media (max-width: 900px) {
:root { --header-h: 74px; }
.site-header__cta { display: none; }
.site-header__brand img { height: 46px; }
/* SEM hambúrguer: os nomes continuam sempre visíveis, deslizando pro lado */
.site-nav { margin-left: 12px; gap: 8px; }
.site-nav a[data-section] {
padding: 6px 14px;
font-size: 13px;
color: #fff;
background: rgba(255,255,255,0.12);
}
.site-nav a[data-section].current { background: #fff; color: var(--color-ink); }
}
/* ==========================================================================
HERO (sem navbar — logo embutida no início do conteúdo)
========================================================================== */
.hero {
position: relative;
min-height: 100vh;
min-height: 100svh;
display: flex;
align-items: center;
padding: calc(var(--header-h) + 44px) 0 110px; /* topo livre do header fixo */
overflow: hidden;
isolation: isolate;
color: #fff;
}
.hero__brand {
display: block; /* força quebra após a logo */
width: fit-content; /* o anchor envolve só a imagem */
margin-bottom: 32px;
transition: opacity var(--t-fast);
line-height: 0;
}
.hero__brand:hover { opacity: 0.85; }
.hero__brand img {
/* Proporção real após o crop (2696x1750 ≈ 1.54:1).
Definimos width pelo viewport e deixamos a height seguir
o aspect-ratio dos atributos width/height do ![]()
. */
width: clamp(180px, 20vw, 280px);
height: auto;
max-width: 100%;
filter: drop-shadow(0 6px 18px rgba(0, 0, 0, 0.45));
display: block;
}
.eyebrow--light {
/* Quando dentro do hero, garante alinhamento à esquerda */
align-self: flex-start;
}
@media (max-width: 600px) {
/* No mobile a logo fica centralizada acima do conteúdo */
.hero__brand {
margin-left: auto;
margin-right: auto;
margin-bottom: 24px;
}
.hero__brand img { width: clamp(180px, 50vw, 240px); }
/* Botões do hero ocupam a largura toda (mais fáceis de tocar) */
.hero__cta { flex-direction: column; align-items: stretch; }
.hero__cta .btn { width: 100%; justify-content: center; }
}
.hero__bg {
position: absolute;
inset: 0;
z-index: -1;
}
.hero__bg picture { display: block; width: 100%; height: 100%; }
.hero__bg img {
width: 100%; height: 100%;
object-fit: cover;
object-position: center;
animation: heroZoom 18s var(--ease) infinite alternate;
}
.hero__overlay {
position: absolute;
inset: 0;
/* escuro à esquerda (texto) e mais leve à direita (casa aparece mais) */
background:
linear-gradient(90deg, rgba(9, 33, 41, 0.90) 0%, rgba(9, 33, 41, 0.70) 34%, rgba(9, 33, 41, 0.30) 66%, rgba(9, 33, 41, 0.18) 100%),
linear-gradient(180deg, transparent 45%, rgba(9, 33, 41, 0.45) 100%);
}
@media (max-width: 760px) {
/* Celular: escuro atrás do texto (topo) e mais leve embaixo para a
casa aparecer; leve reforço no rodapé da dobra para contraste. */
.hero__overlay {
background:
linear-gradient(180deg,
rgba(9, 33, 41, 0.88) 0%,
rgba(9, 33, 41, 0.74) 34%,
rgba(9, 33, 41, 0.30) 60%,
rgba(9, 33, 41, 0.20) 78%,
rgba(9, 33, 41, 0.55) 100%);
}
/* Imagem mobile já é retrato enquadrado na casa */
.hero__bg img { object-position: center; }
}
@keyframes heroZoom {
from { transform: scale(1.0); }
to { transform: scale(1.08); }
}
.hero__content {
position: relative;
/* usa a largura do container (alinha o texto com a logo e as outras dobras) */
text-align: left;
}
.hero__headline {
font-family: var(--font-display);
font-weight: 600;
font-size: clamp(32px, 5vw, 58px);
line-height: 1.14;
letter-spacing: -0.015em;
color: #fff;
margin-bottom: 26px;
max-width: 20ch;
text-wrap: balance;
}
/* no hero o acento pode quebrar naturalmente (evita linha gigante e desalinhada) */
.hero__headline .accent { color: var(--color-primary); white-space: normal; }
.hero__headline .accent::after {
height: 4px;
bottom: -3px;
}
.hero__sub {
font-size: clamp(16px, 1.4vw, 19px);
color: var(--color-on-dark-mute);
max-width: 60ch;
margin-bottom: 36px;
}
.hero__cta {
display: flex;
flex-wrap: wrap;
gap: 14px;
}
/* Chamada "Conheça a Romualdo" — em FLUXO (nunca sobre os botões), todas as telas */
.hero__cue {
display: inline-flex;
align-items: center;
gap: 12px;
margin-top: clamp(26px, 4vh, 44px);
padding-top: clamp(18px, 2.6vh, 26px);
border-top: 1px solid rgba(255,255,255,0.16);
font-family: var(--font-display);
font-size: 12px;
font-weight: 600;
letter-spacing: 0.16em;
text-transform: uppercase;
color: rgba(255,255,255,0.9);
}
.hero__cue:hover { color: var(--color-primary); }
/* Chevron dentro de um selo HEXAGONAL (borda hexagonal, não quadrada) */
.hero__cue-chevron {
display: inline-grid;
place-items: center;
width: 32px; height: 35px;
clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px);
background: rgba(0, 184, 224, 0.22);
color: #fff;
animation: cueBounce 1.8s ease-in-out infinite;
}
.hero__cue:hover .hero__cue-chevron { background: var(--color-primary); color: var(--color-ink); }
.hero__cue-chevron svg { width: 16px; height: 16px; }
@keyframes cueBounce {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(4px); }
}
@media (max-width: 900px) {
.hero { padding-bottom: 72px; }
}
/* ==========================================================================
PROOF
========================================================================== */
.proof {
background: var(--color-ink);
color: #fff;
padding: 36px 0;
position: relative;
z-index: 2;
}
.proof__grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 28px;
align-items: center;
}
.proof__grid--3 { grid-template-columns: repeat(3, 1fr); }
/* Autoridade em foco único: +15 anos bem destacado */
.proof--single { padding: clamp(40px, 6vw, 64px) 0; }
.proof__solo {
display: flex; align-items: center; justify-content: center;
gap: clamp(24px, 5vw, 56px); flex-wrap: wrap;
}
.proof__seal {
flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
}
.proof__seal img {
width: clamp(58px, 6vw, 76px); height: auto; display: block;
filter: drop-shadow(0 6px 22px rgba(0, 184, 224, 0.42));
animation: sealPulse 3.6s var(--ease) infinite alternate;
}
@keyframes sealPulse {
from { filter: drop-shadow(0 6px 18px rgba(0, 184, 224, 0.30)); }
to { filter: drop-shadow(0 6px 30px rgba(0, 184, 224, 0.60)); }
}
@media (max-width: 640px) {
.proof__seal { padding-bottom: 4px; }
}
.proof__solo-num {
flex: 0 0 auto; text-align: center;
font-family: var(--font-display); font-weight: 700;
font-size: clamp(46px, 7vw, 78px); color: var(--color-primary);
line-height: 0.9; letter-spacing: -0.03em;
text-shadow: 0 8px 40px rgba(20,200,204,0.30);
}
.proof__solo-num small {
display: block; margin-top: 7px;
font-size: 0.22em; color: var(--color-on-dark-mute); font-weight: 600;
letter-spacing: 0.14em; text-transform: uppercase;
}
.proof__solo-label {
flex: 1 1 0; max-width: 46ch; font-size: clamp(16px, 1.5vw, 19px);
color: var(--color-on-dark); line-height: 1.55;
border-left: 3px solid var(--color-primary); padding-left: 26px;
}
.proof__solo-label strong { color: #fff; font-weight: 600; }
.proof__solo-label .proof__hl { color: var(--color-primary); font-weight: 700; }
@media (max-width: 640px) {
.proof__solo { flex-direction: column; text-align: center; gap: 18px; }
.proof__solo-label { border-left: 0; border-top: 3px solid var(--color-primary); padding-left: 0; padding-top: 16px; }
}
.proof__num--word {
display: inline-flex;
align-items: center;
gap: 10px;
color: var(--color-primary);
font-size: clamp(22px, 2.6vw, 32px);
}
.proof__arrow { color: var(--color-on-dark-mute); font-weight: 400; }
.proof__item {
text-align: center;
border-left: 1px solid rgba(255,255,255,0.08);
padding: 6px 14px;
}
.proof__item:first-child { border-left: 0; }
.proof__num {
font-family: var(--font-display);
font-size: clamp(28px, 3.2vw, 40px);
font-weight: 700;
color: var(--color-primary);
line-height: 1;
letter-spacing: -0.01em;
}
.proof__num small {
font-size: 0.45em;
color: var(--color-on-dark-mute);
font-weight: 500;
margin-left: 4px;
}
.proof__label {
font-size: 13px;
color: var(--color-on-dark-mute);
margin-top: 8px;
line-height: 1.4;
}
@media (max-width: 720px) {
.proof__grid { grid-template-columns: repeat(2, 1fr); gap: 20px; }
.proof__grid--3 { grid-template-columns: 1fr; }
.proof__item { border-left: 0; }
}
/* ==========================================================================
OFFER (DARK)
========================================================================== */
.offer {
background:
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='64' viewBox='0 0 56 64'%3E%3Cpath d='M28 2 L54 17 L54 47 L28 62 L2 47 L2 17 Z' fill='none' stroke='%2314C8CC' stroke-opacity='0.06' stroke-width='1.4'/%3E%3C/svg%3E") 0 0 / 56px 64px,
var(--color-ink);
color: #fff;
padding: clamp(70px, 9vw, 120px) 0;
position: relative;
overflow: hidden;
}
.offer::before {
content: "";
position: absolute;
top: -120px; right: -120px;
width: 420px; height: 420px;
background: radial-gradient(circle, rgba(0, 184, 224, 0.18) 0%, transparent 70%);
pointer-events: none;
}
.offer::after {
content: "";
position: absolute;
bottom: -160px; left: -120px;
width: 380px; height: 380px;
background: radial-gradient(circle, rgba(0, 184, 224, 0.08) 0%, transparent 70%);
pointer-events: none;
}
.offer__head { max-width: 700px; margin-bottom: 50px; position: relative; }
.offer__grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 24px;
position: relative;
}
.offer__card {
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.10);
border-radius: var(--radius-lg);
padding: 40px;
position: relative;
transition: transform var(--t), border-color var(--t), background var(--t);
}
.offer__card:hover {
transform: translateY(-4px);
border-color: rgba(0, 184, 224, 0.4);
background: rgba(0, 184, 224, 0.06);
}
.offer__card--featured {
background: linear-gradient(160deg, rgba(0, 184, 224, 0.12), rgba(0, 184, 224, 0.02));
border-color: rgba(0, 184, 224, 0.35);
}
.offer__badge {
display: inline-block;
font-family: var(--font-display);
font-size: 12px;
font-weight: 600;
letter-spacing: 0.18em;
text-transform: uppercase;
padding: 8px 14px;
border-radius: 999px;
background: rgba(255,255,255,0.08);
color: var(--color-on-dark);
margin-bottom: 20px;
}
.offer__badge--accent {
background: var(--color-primary);
color: var(--color-ink);
}
.offer__title {
font-family: var(--font-display);
font-size: clamp(22px, 2.4vw, 28px);
color: #fff;
margin-bottom: 8px;
}
.offer__lead {
color: var(--color-on-dark-mute);
margin-bottom: 24px;
font-size: 15.5px;
}
.offer__list {
display: flex;
flex-direction: column;
gap: 12px;
}
.offer__list li {
position: relative;
padding-left: 28px;
color: var(--color-on-dark);
font-size: 15px;
line-height: 1.6;
}
.offer__list li::before {
content: "";
position: absolute;
left: 0; top: 6px;
width: 17px; height: 18px;
-webkit-mask: var(--mark-band) center/contain no-repeat;
mask: var(--mark-band) center/contain no-repeat;
background: var(--color-primary);
}
.offer__list li::after {
content: "";
position: absolute;
left: 4.5px; top: 11px;
width: 8px; height: 4px;
border-left: 2px solid var(--color-ink);
border-bottom: 2px solid var(--color-ink);
transform: rotate(-45deg);
}
.offer__list strong { color: #fff; font-weight: 600; }
.offer__note {
margin-top: 32px;
padding-top: 24px;
border-top: 1px dashed rgba(255,255,255,0.12);
font-size: 13.5px;
color: var(--color-on-dark-mute);
text-align: center;
}
@media (max-width: 760px) {
.offer__grid { grid-template-columns: 1fr; }
.offer__card { padding: 28px; }
}
/* ===== Exemplos de financiamento (cards) ===== */
.financing__grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 22px;
margin-top: 8px;
position: relative;
}
.financing__card {
display: flex;
flex-direction: column;
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.10);
overflow: hidden;
transition: transform var(--t), border-color var(--t), background var(--t);
}
.financing__card:hover {
transform: translateY(-5px);
border-color: rgba(20,200,204,0.45);
background: rgba(20,200,204,0.06);
}
.financing__card--featured { border-color: rgba(20,200,204,0.4); background: linear-gradient(180deg, rgba(20,200,204,0.10), rgba(255,255,255,0.02)); }
.financing__img { aspect-ratio: 4 / 3; overflow: hidden; background: var(--color-ink-2); }
.financing__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s var(--ease); }
.financing__card:hover .financing__img img { transform: scale(1.05); }
.financing__body { padding: 24px 24px 26px; display: flex; flex-direction: column; flex: 1; }
.financing__tier {
display: inline-block; align-self: flex-start;
font-family: var(--font-display); font-size: 12px; font-weight: 600;
letter-spacing: 0.04em; padding: 7px 12px; margin-bottom: 16px;
background: rgba(255,255,255,0.08); color: var(--color-on-dark);
clip-path: polygon(8px 0, 100% 0, calc(100% - 8px) 100%, 0 100%);
}
.financing__tier--accent { background: var(--color-primary); color: var(--color-ink); }
.financing__type { font-family: var(--font-display); font-size: 22px; font-weight: 600; color: #fff; margin-bottom: 14px; }
.financing__type span { color: var(--color-primary); }
.financing__specs { display: flex; flex-direction: column; gap: 7px; margin-bottom: 20px; padding-bottom: 20px; border-bottom: 1px solid rgba(255,255,255,0.10); }
.financing__specs li { color: var(--color-on-dark-mute); font-size: 14px; padding-left: 18px; position: relative; line-height: 1.5; }
.financing__specs li::before { content: ""; position: absolute; left: 0; top: 6px; width: 9px; height: 10px; background: var(--color-primary); -webkit-mask: var(--mark-band) center/contain no-repeat;
mask: var(--mark-band) center/contain no-repeat; }
.financing__price { display: flex; flex-direction: column; gap: 2px; margin-bottom: 16px; }
.financing__label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.14em; color: var(--color-on-dark-mute); }
.financing__value { font-family: var(--font-display); font-size: 18px; font-weight: 600; color: rgba(255,255,255,0.92); }
.financing__installment { margin-top: auto; padding-top: 16px; border-top: 1px dashed rgba(255,255,255,0.14); display: flex; flex-direction: column; gap: 2px; }
.financing__inst-label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.14em; color: var(--color-primary); }
.financing__inst-value { font-family: var(--font-display); font-size: clamp(26px, 2.4vw, 32px); font-weight: 700; color: #fff; letter-spacing: -0.02em; line-height: 1.1; }
.financing__inst-value small { font-size: 0.5em; font-weight: 500; color: var(--color-on-dark-mute); margin-left: 2px; }
.financing__cta { text-align: center; margin-top: 40px; position: relative; }
@media (max-width: 860px) { .financing__grid { grid-template-columns: 1fr; max-width: 440px; margin-left: auto; margin-right: auto; } }
/* ==========================================================================
EXPERTS / RESPONSÁVEL
========================================================================== */
.experts {
padding: clamp(70px, 9vw, 120px) 0;
background: var(--color-bg-soft);
position: relative;
}
.experts__inner {
display: grid;
grid-template-columns: minmax(300px, 460px) 1fr;
gap: clamp(40px, 6vw, 80px);
align-items: center;
}
.experts__photo {
/* Hexágono: chanfro no canto superior-esquerdo e inferior-direito
(retângulo com 2 cantos opostos cortados = 6 lados). A borda
turquesa aparece pelo padding + fundo em degradê. */
--hex-cut: 34px;
position: relative;
border-radius: 0;
padding: 3px;
background: linear-gradient(135deg, var(--color-primary), var(--color-primary-strong));
clip-path: polygon(var(--hex-cut) 0, 100% 0, 100% calc(100% - var(--hex-cut)), calc(100% - var(--hex-cut)) 100%, 0 100%, 0 var(--hex-cut));
filter: drop-shadow(0 24px 46px rgba(0, 34, 41, 0.24));
}
.experts__photo img {
width: 100%; height: auto;
display: block;
position: relative;
z-index: 1;
aspect-ratio: 3/4;
object-fit: cover;
object-position: center top;
clip-path: polygon(calc(var(--hex-cut) - 3px) 0, 100% 0, 100% calc(100% - (var(--hex-cut) - 3px)), calc(100% - (var(--hex-cut) - 3px)) 100%, 0 100%, 0 calc(var(--hex-cut) - 3px));
}
.experts__caption {
position: absolute;
left: 18px; right: 18px; bottom: 20px;
z-index: 2;
background: rgba(0, 34, 41, 0.88);
backdrop-filter: blur(8px);
color: #fff;
padding: 15px 30px;
border-radius: 0;
/* Pontas hexagonais nas laterais (igual aos botões da marca) */
clip-path: polygon(16px 0, 100% 0, 100% calc(100% - 16px), calc(100% - 16px) 100%, 0 100%, 0 16px);
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
font-size: 14px;
}
.experts__caption strong {
font-family: var(--font-display);
font-weight: 600;
font-size: 16px;
}
.experts__caption span {
color: var(--color-on-dark-mute);
font-size: 13px;
margin-top: 4px;
}
.experts__copy { max-width: 600px; }
/* título da dobra ocupa a coluna toda (evita quebra em 3 linhas com "com quem" solto) */
.experts__copy .section-title { max-width: none; margin-bottom: 22px; }
.experts__copy .section-title .accent { white-space: normal; }
.experts__lead {
font-size: 16.5px;
color: var(--color-text-mute);
margin-bottom: 18px;
}
.experts__cta {
margin-top: 30px;
padding-top: 26px;
border-top: 1px solid var(--color-line);
}
.experts__points {
display: flex;
flex-direction: column;
gap: 14px;
margin: 28px 0 32px;
padding-top: 24px;
border-top: 1px solid var(--color-line);
}
.experts__points li {
display: flex;
align-items: center;
gap: 18px;
}
.experts__points-num {
font-family: var(--font-display);
font-size: 28px;
font-weight: 700;
color: var(--color-primary-strong);
min-width: 60px;
line-height: 1;
}
.experts__points-text {
color: var(--color-ink);
font-weight: 500;
font-size: 15.5px;
}
@media (max-width: 860px) {
.experts__inner { grid-template-columns: 1fr; }
.experts__photo { max-width: 420px; margin: 0 auto; }
}
/* ==========================================================================
GALLERY (carrossel infinito automático — “marquee”)
========================================================================== */
.gallery {
padding: clamp(70px, 9vw, 120px) 0;
background: var(--color-bg);
overflow: hidden;
position: relative;
}
.gallery__head { margin-bottom: 48px; }
.gallery__cta {
text-align: center;
margin-top: 56px;
}
.marquee-wrap { position: relative; }
/* Setas hexagonais para controlar a galeria */
.marquee__nav {
position: absolute; top: 50%; transform: translateY(-50%);
z-index: 5; width: 50px; height: 56px;
display: grid; place-items: center;
background: var(--color-primary); color: var(--color-ink);
clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px);
cursor: pointer;
filter: drop-shadow(0 8px 18px rgba(20,200,204,0.4));
transition: transform var(--t), background var(--t);
}
.marquee__nav:hover { background: var(--color-primary-strong); transform: translateY(-50%) scale(1.08); }
.marquee__nav:active { transform: translateY(-50%) scale(0.96); }
.marquee__nav svg { width: 22px; height: 22px; }
.marquee__nav--prev { left: clamp(8px, 3vw, 32px); }
.marquee__nav--next { right: clamp(8px, 3vw, 32px); }
@media (max-width: 600px) {
.marquee__nav { width: 42px; height: 48px; }
.marquee__nav svg { width: 18px; height: 18px; }
}
.marquee {
position: relative;
width: 100%;
overflow: hidden;
/* Máscara nas bordas para fade-in/out elegante */
-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
padding: 8px 0;
cursor: grab;
/* Permite scroll vertical da página, captura swipe horizontal */
touch-action: pan-y;
user-select: none;
-webkit-user-select: none;
}
.marquee.is-dragging { cursor: grabbing; }
.marquee__track {
display: flex;
gap: 22px;
width: max-content;
will-change: transform;
}
.marquee__item img {
-webkit-user-drag: none;
user-drag: none;
pointer-events: none; /* impede que o browser inicie o drag-to-save da imagem */
}
.marquee__item {
position: relative;
flex: 0 0 auto;
width: clamp(260px, 32vw, 400px);
height: clamp(320px, 42vw, 520px);
border-radius: var(--radius);
overflow: hidden;
background: var(--color-bg-soft);
box-shadow: 0 10px 30px rgba(0, 34, 41, 0.10);
isolation: isolate;
}
.marquee__item img {
position: absolute;
inset: 0;
width: 100%; height: 100%;
object-fit: cover;
transition: transform 1.2s var(--ease);
}
.marquee__item::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(180deg, transparent 45%, rgba(0, 34, 41, 0.85) 100%);
z-index: 1;
pointer-events: none;
}
.marquee__item figcaption {
position: absolute;
left: 18px; right: 18px; bottom: 18px;
z-index: 2;
font-family: var(--font-display);
color: #fff;
font-size: 14px;
font-weight: 500;
letter-spacing: 0.02em;
display: flex;
align-items: center;
gap: 10px;
}
.marquee__item figcaption::before {
content: "";
width: 11px; height: 12px;
-webkit-mask: var(--mark-band) center/contain no-repeat;
mask: var(--mark-band) center/contain no-repeat;
background: var(--color-primary);
flex: 0 0 auto;
}
.marquee__item:hover img {
transform: scale(1.06);
}
@media (max-width: 600px) {
.marquee__track { gap: 14px; }
.marquee {
-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 4%, #000 96%, transparent 100%);
mask-image: linear-gradient(90deg, transparent 0, #000 4%, #000 96%, transparent 100%);
}
}
/* ==========================================================================
PROCESS / COMO FUNCIONA
========================================================================== */
.process {
padding: clamp(70px, 9vw, 120px) 0;
background: var(--color-bg-soft);
position: relative;
overflow: hidden;
}
.process::before {
content: "";
position: absolute; inset: 0;
background: radial-gradient(ellipse at 50% -10%, rgba(20,200,204,0.08), transparent 55%);
pointer-events: none;
}
.process .container { position: relative; z-index: 1; }
/* ===== PASSOS em grade 2×2 (visual + reveal dinâmico) ===== */
.steps {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 22px;
max-width: 920px;
margin: 48px auto 0;
}
.step {
position: relative;
overflow: hidden;
background: #fff;
border: 1px solid var(--color-line);
padding: 30px 30px 28px;
opacity: 0;
transform: translateY(28px);
transition: opacity .6s var(--ease), transform .6s var(--ease),
box-shadow .35s var(--ease), border-color .35s var(--ease);
}
.step.on { opacity: 1; transform: translateY(0); }
.step:hover {
transform: translateY(-5px);
box-shadow: 0 20px 44px rgba(11,42,51,0.11);
border-color: rgba(20,200,204,0.45);
}
/* barra de acento no topo que "desenha" ao revelar */
.step::before {
content: "";
position: absolute; top: 0; left: 0; height: 4px; width: 100%;
background: linear-gradient(90deg, var(--color-primary), var(--color-primary-strong));
transform: scaleX(0); transform-origin: left;
transition: transform .6s var(--ease) .18s;
}
.step.on::before { transform: scaleX(1); }
/* número-fantasma gigante ao fundo */
.step__ghost {
position: absolute; top: -26px; right: 4px;
font-family: var(--font-display); font-weight: 700;
font-size: 172px; line-height: 1;
color: var(--color-primary);
opacity: 0.22; pointer-events: none; user-select: none;
transition: opacity .35s var(--ease), transform .5s var(--ease);
}
.step:hover .step__ghost { opacity: 0.32; transform: translateY(4px); }
/* ícone hexagonal em degradê — "pop" ao entrar */
.step__icon {
position: relative; z-index: 1;
display: inline-grid; place-items: center;
width: 60px; height: 66px; margin-bottom: 14px;
background: linear-gradient(150deg, var(--color-primary), var(--color-primary-strong));
color: #fff;
clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px);
box-shadow: 0 10px 24px rgba(20,200,204,0.38);
transform: scale(0.4) rotate(-18deg); opacity: 0;
transition: transform .55s cubic-bezier(.2,1.35,.4,1) .16s, opacity .4s .16s,
box-shadow .35s var(--ease);
}
.step__icon svg { width: 27px; height: 27px; }
.step.on .step__icon { transform: scale(1) rotate(0); opacity: 1; }
.step:hover .step__icon {
box-shadow: 0 14px 32px rgba(20,200,204,0.58);
transform: translateY(-3px);
}
.step__kicker {
position: relative; z-index: 1; display: block;
font-family: var(--font-display); font-size: 12px; font-weight: 700;
letter-spacing: 0.16em; text-transform: uppercase; color: var(--color-primary);
margin-bottom: 6px;
}
.step__title {
position: relative; z-index: 1;
font-family: var(--font-display); font-weight: 700;
font-size: clamp(18px, 2vw, 21px); color: var(--color-ink);
line-height: 1.2; letter-spacing: -0.01em; margin-bottom: 10px;
}
.step__text { position: relative; z-index: 1; font-size: 15px; color: var(--color-text-mute); line-height: 1.6; }
@media (max-width: 620px) { .steps { grid-template-columns: 1fr; } }
/* ===== TIMELINE (vitrine do processo — trilho que preenche + nós que acendem) ===== */
.timeline {
position: relative;
max-width: 760px;
margin: 46px auto 0;
}
.timeline__track, .timeline__fill {
position: absolute;
left: 30px; width: 3px;
z-index: 0;
}
.timeline__track { top: 34px; bottom: 34px; background: var(--color-line); }
.timeline__fill {
top: 34px; height: 0;
background: linear-gradient(180deg, var(--color-primary), var(--color-primary-strong));
box-shadow: 0 0 14px rgba(20,200,204,0.5);
transition: height .7s var(--ease);
z-index: 1;
}
.timeline__step {
position: relative;
display: grid;
grid-template-columns: 62px 1fr;
gap: 22px;
align-items: start;
padding-bottom: 24px;
}
.timeline__step:last-child { padding-bottom: 0; }
.timeline__marker {
position: relative; z-index: 2;
width: 60px; height: 66px;
display: grid; place-items: center;
clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px);
background: var(--color-ink);
color: #fff;
font-family: var(--font-display); font-weight: 700; font-size: 22px;
box-shadow: inset 0 0 0 2px rgba(20,200,204,0.28);
transition: background .4s var(--ease), box-shadow .4s var(--ease), transform .4s var(--ease);
}
.timeline__step.on .timeline__marker {
background: var(--color-primary-strong);
color: #fff;
box-shadow: inset 0 0 0 2px var(--color-primary), 0 10px 24px rgba(20,200,204,0.5);
transform: scale(1.06);
}
.timeline__card {
position: relative;
background: #fff;
border: 1px solid var(--color-line);
padding: 20px 24px;
box-shadow: 0 6px 20px rgba(11,42,51,0.05);
transition: border-color .4s var(--ease), box-shadow .4s var(--ease), transform .4s var(--ease);
}
/* passo aceso ganha destaque (o texto NUNCA some, mesmo sem JS) */
.timeline__step.on .timeline__card {
border-color: rgba(20,200,204,0.4);
box-shadow: 0 14px 32px rgba(11,42,51,0.10);
transform: translateX(3px);
}
/* seta (losango angular) apontando do card para o nó */
.timeline__card::before {
content: "";
position: absolute; left: -8px; top: 24px;
width: 14px; height: 14px;
background: #fff;
border-left: 1px solid var(--color-line);
border-bottom: 1px solid var(--color-line);
transform: rotate(45deg);
transition: border-color .4s var(--ease);
}
.timeline__step.on .timeline__card::before { border-color: rgba(20,200,204,0.35); }
.timeline__card h3 {
font-family: var(--font-display);
font-size: clamp(19px, 2vw, 22px);
color: var(--color-ink); font-weight: 700;
letter-spacing: -0.01em; line-height: 1.2;
margin-bottom: 8px;
}
.timeline__card p { font-size: 15px; color: var(--color-text-mute); line-height: 1.6; }
@media (max-width: 560px) {
.timeline__step { grid-template-columns: 50px 1fr; gap: 16px; }
.timeline__track, .timeline__fill { left: 24px; }
.timeline__marker { width: 48px; height: 54px; font-size: 18px; }
.timeline__card { padding: 16px 18px; }
}
/* ===== Comparativo: pedreiro solto × Romualdo ===== */
.compare { max-width: 920px; margin: 46px auto 0; }
.compare__lead {
text-align: center;
font-family: var(--font-display);
font-size: clamp(17px, 1.9vw, 21px);
font-weight: 600; color: var(--color-ink);
max-width: 60ch; margin: 0 auto 28px; line-height: 1.4;
}
.compare__lead strong { color: #d23b3b; font-weight: 700; }
.compare__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: stretch; }
.compare__col {
position: relative;
background: #fff;
border: 1px solid var(--color-line);
padding: 28px 26px;
}
.compare__col--bad { border-top: 4px solid #d23b3b; }
.compare__col--good {
border: 1px solid rgba(20,200,204,0.4);
border-top: 4px solid var(--color-primary);
overflow: hidden;
animation: compareGlow 2.8s ease-in-out infinite;
}
@keyframes compareGlow {
0%, 100% { box-shadow: 0 18px 44px rgba(20,200,204,0.16); }
50% { box-shadow: 0 22px 56px rgba(20,200,204,0.34); }
}
/* brilho que atravessa o card vencedor */
.compare__col--good::after {
content: ""; position: absolute; top: -60%; left: -45%;
width: 40%; height: 220%;
background: linear-gradient(100deg, transparent, rgba(20,200,204,0.16), transparent);
transform: rotate(12deg);
animation: cardSheen 5.5s ease-in-out infinite;
pointer-events: none;
}
.compare__seal {
position: absolute; top: 0; right: 0;
background: var(--color-green); color: #fff;
font-family: var(--font-display); font-size: 10.5px; font-weight: 700;
letter-spacing: 0.08em; text-transform: uppercase;
padding: 7px 14px 7px 18px;
clip-path: polygon(12px 0, 100% 0, 100% 100%, 0 100%);
}
.compare__tag {
display: inline-block;
font-family: var(--font-display); font-size: 13px; font-weight: 700;
letter-spacing: 0.04em; text-transform: uppercase; margin-bottom: 4px;
}
.compare__tag--bad { color: #d23b3b; }
.compare__tag--good { color: var(--color-green-deep); }
.compare__title {
font-family: var(--font-display); font-size: clamp(17px, 1.9vw, 20px);
color: var(--color-ink); font-weight: 700; margin-bottom: 22px;
padding-bottom: 16px; border-bottom: 1px solid var(--color-line);
}
.compare__list { display: flex; flex-direction: column; gap: 15px; }
.cmp { display: flex; align-items: flex-start; gap: 12px; }
.cmp__ic {
flex: 0 0 auto; width: 24px; height: 26px; margin-top: 1px;
display: grid; place-items: center; color: #fff;
clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px);
}
.cmp__ic svg { width: 12px; height: 12px; }
.cmp__ic--x { background: #d23b3b; }
.cmp__ic--check { background: var(--color-green); }
.cmp__txt {
position: relative; font-size: 14.5px; line-height: 1.45;
color: var(--color-text); padding-bottom: 4px;
transition: color .4s var(--ease);
}
.compare__col--good .cmp__txt strong { color: var(--color-ink); font-weight: 600; }
/* o "risco" (linha vermelha) fica SEMPRE ABAIXO da frase, nunca por cima */
.compare__col--bad .cmp[data-strike] .cmp__txt::after {
content: ""; position: absolute; left: 0; right: 0; bottom: 0;
height: 2px; background: #d23b3b;
transform: scaleX(0); transform-origin: left;
transition: transform .55s var(--ease);
}
.compare__col--bad .cmp.is-struck .cmp__txt::after { transform: scaleX(1); }
.compare__col--bad .cmp.is-struck .cmp__txt { color: var(--color-slate); }
@media (max-width: 720px) {
.compare__grid { grid-template-columns: 1fr; }
}
/* ===== Dobra "Não arrisque / pedreiro solto" (clara e discreta) ===== */
.risk-band {
position: relative;
color: var(--color-text);
padding: clamp(56px, 7vw, 92px) 0;
background: var(--color-bg);
border-top: 1px solid var(--color-line);
}
/* 2 colunas: frase (+CTA) à esquerda, lista de riscos à frente */
.risk-band__inner {
position: relative; z-index: 1;
display: grid;
grid-template-columns: minmax(250px, 360px) 1fr;
gap: clamp(30px, 5vw, 70px);
align-items: center;
}
.risk-band__aside .section-title--light {
color: var(--color-ink); max-width: 13ch; margin-bottom: 26px;
}
.eyebrow--onred { color: #c0392b; }
.eyebrow--onred::before { background: #c0392b; }
.accent-red { color: #c0392b; font-weight: inherit; }
.risk-band__list { margin: 0; display: flex; flex-direction: column; }
.rb {
display: flex; align-items: center; gap: 15px;
padding: 15px 4px;
border-bottom: 1px solid var(--color-line);
}
.rb:last-child { border-bottom: 0; }
.rb__ic {
flex: 0 0 auto; width: 26px; height: 29px;
display: grid; place-items: center;
background: #c0392b; color: #fff;
clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px);
}
.rb__ic svg { width: 13px; height: 13px; }
.rb__txt {
position: relative;
font-size: clamp(15px, 1.5vw, 16px); line-height: 1.4;
color: var(--color-text); padding-bottom: 3px;
transition: color .4s var(--ease);
}
/* linha vermelha do "risco" SEMPRE abaixo da frase */
.rb__txt::after {
content: ""; position: absolute; left: 0; right: 0; bottom: 0;
height: 2px; background: #c0392b;
transform: scaleX(0); transform-origin: left;
transition: transform .55s var(--ease);
}
.rb.is-struck .rb__txt::after { transform: scaleX(1); }
.rb.is-struck .rb__txt { color: var(--color-text-mute); }
.risk-band__cta { margin-top: 0; }
@media (max-width: 760px) {
/* Ordem no celular: título, lista de riscos e, por último, o botão.
display:contents no aside faz o título e o CTA virarem itens do flex. */
.risk-band__inner { display: flex; flex-direction: column; gap: 26px; }
.risk-band__aside { display: contents; }
.risk-band__aside .section-title--light { max-width: none; order: 1; margin: 0; }
.risk-band__list { order: 2; }
.risk-band__cta { order: 3; }
}
/* ==========================================================================
OBJECTIONS / FAQ
========================================================================== */
.objections {
padding: clamp(70px, 9vw, 120px) 0;
background: var(--color-bg);
}
.objections__grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 14px;
margin-top: 20px;
}
/* item ímpar sozinho na última linha ocupa a largura toda (evita buraco) */
.objections__grid .objection:last-child:nth-child(odd) { grid-column: 1 / -1; }
.objection {
background: var(--color-bg-soft);
border: 1px solid transparent;
border-radius: var(--radius);
padding: 20px 24px;
transition: background var(--t), border-color var(--t), box-shadow var(--t);
}
.objection[open] {
background: #fff;
border-color: rgba(0, 184, 224, 0.4);
box-shadow: var(--shadow-sm);
}
.objection summary {
list-style: none;
cursor: pointer;
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
font-family: var(--font-display);
font-weight: 500;
font-size: 16px;
color: var(--color-ink);
line-height: 1.4;
}
.objection summary::-webkit-details-marker { display: none; }
.objection__icon {
position: relative;
width: 22px; height: 22px;
flex: 0 0 22px;
border-radius: 50%;
background: var(--color-primary-soft);
border: 1px solid rgba(0, 184, 224, 0.4);
transition: transform var(--t), background var(--t);
}
.objection__icon::before, .objection__icon::after {
content: "";
position: absolute;
top: 50%; left: 50%;
width: 10px; height: 2px;
background: var(--color-primary-strong);
transform: translate(-50%, -50%);
border-radius: 2px;
transition: transform var(--t);
}
.objection__icon::after { transform: translate(-50%, -50%) rotate(90deg); }
.objection[open] .objection__icon { background: var(--color-primary); border-color: var(--color-primary); }
.objection[open] .objection__icon::before { background: var(--color-ink); }
.objection[open] .objection__icon::after { transform: translate(-50%, -50%) rotate(0); background: var(--color-ink); }
.objection p {
margin-top: 14px;
color: var(--color-text-mute);
font-size: 15px;
line-height: 1.7;
}
@media (max-width: 760px) { .objections__grid { grid-template-columns: 1fr; } }
/* ==========================================================================
VIABILITY / FORM
========================================================================== */
.viability {
padding: clamp(70px, 9vw, 120px) 0;
background: linear-gradient(160deg, var(--color-ink) 0%, var(--color-ink-2) 100%);
position: relative;
overflow: hidden;
color: #fff;
}
.viability::before {
content: "";
position: absolute;
top: -200px; right: -200px;
width: 480px; height: 480px;
border-radius: 50%;
background: radial-gradient(circle, rgba(0, 184, 224, 0.18) 0%, transparent 70%);
pointer-events: none;
}
.viability__inner {
display: grid;
grid-template-columns: 1fr 480px;
gap: clamp(40px, 6vw, 80px);
align-items: start;
position: relative;
}
.viability__copy { padding-top: 12px; }
.viability__note {
margin-top: 28px;
font-size: 13.5px;
color: var(--color-on-dark-mute);
border-left: 3px solid var(--color-primary);
padding-left: 14px;
line-height: 1.6;
}
.viability__note strong { color: #fff; }
/* FORM */
.form {
background: #fff;
color: var(--color-text);
border-radius: var(--radius-lg);
padding: 36px;
box-shadow: var(--shadow-lg);
position: relative;
}
.form::before {
content: "";
position: absolute;
top: -2px; left: -2px; right: -2px; height: 6px;
background: linear-gradient(90deg, var(--color-primary) 0%, transparent 100%);
border-top-left-radius: var(--radius-lg);
border-top-right-radius: var(--radius-lg);
}
.form__title {
font-family: var(--font-display);
font-size: 22px;
color: var(--color-ink);
margin-bottom: 6px;
}
.form__subtitle {
font-size: 14px;
color: var(--color-text-mute);
margin-bottom: 22px;
}
.form__field {
margin-bottom: 14px;
display: flex;
flex-direction: column;
}
.form__field label {
font-size: 13px;
font-weight: 500;
color: var(--color-ink);
margin-bottom: 6px;
}
.form__field input,
.form__field select {
padding: 13px 14px;
border: 1.5px solid var(--color-line);
border-radius: 10px;
font: inherit;
font-size: 15px;
color: var(--color-ink);
background: #fff;
transition: border-color var(--t-fast), box-shadow var(--t-fast);
width: 100%;
}
.form__field input::placeholder { color: #95A1A8; }
.form__field input:focus,
.form__field select:focus {
outline: none;
border-color: var(--color-primary);
box-shadow: 0 0 0 4px rgba(0, 184, 224, 0.18);
}
.form__row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 14px;
}
.form__consent {
margin-top: 14px;
font-size: 12.5px;
color: var(--color-text-mute);
line-height: 1.55;
text-align: center;
}
.form__feedback {
margin-top: 14px;
padding: 12px 14px;
border-radius: 10px;
font-size: 14px;
text-align: center;
}
.form__feedback.is-success {
background: rgba(0, 184, 224, 0.12);
color: var(--color-ink);
border: 1px solid rgba(0, 184, 224, 0.4);
}
.form__feedback.is-error {
background: #FEEBEC;
color: #A0231A;
border: 1px solid #F4C7C9;
}
button[type="submit"].btn {
margin-top: 6px;
}
@media (max-width: 960px) {
.viability__inner { grid-template-columns: 1fr; }
.form { padding: 28px; }
}
@media (max-width: 480px) {
.form__row { grid-template-columns: 1fr; }
}
/* ==========================================================================
FORMULÁRIO 2 ETAPAS (padrão construção financiada — 13.7)
========================================================================== */
.form-head { max-width: 640px; margin: 0 auto 26px; text-align: center; }
.form-head .eyebrow { justify-content: center; }
.form-head .section-title { max-width: none; margin-left: auto; margin-right: auto; }
.form-head .section-lead { margin-left: auto; margin-right: auto; margin-bottom: 0; }
.steps-indicator {
display: flex; align-items: center; justify-content: center; gap: 0;
max-width: 460px; margin: 0 auto 24px; position: relative; z-index: 1;
}
.step-item { display: flex; align-items: center; gap: 10px; }
.step-circle {
width: 34px; height: 34px; flex: 0 0 34px;
clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px);
display: grid; place-items: center;
background: rgba(255,255,255,0.14); color: #fff;
font-family: var(--font-display); font-weight: 700; font-size: 14px;
transition: background var(--t), color var(--t);
}
.step-circle.active { background: var(--color-primary); color: var(--color-ink); }
.step-circle.complete { background: var(--color-green); color: #fff; }
.step-label { font-size: 13.5px; color: var(--color-on-dark-mute); font-weight: 500; }
.step-item.active .step-label { color: #fff; }
.step-connector { flex: 1 1 auto; height: 2px; background: rgba(255,255,255,0.16); margin: 0 14px; position: relative; overflow: hidden; }
.step-connector-fill { position: absolute; inset: 0 auto 0 0; width: 0; background: var(--color-primary); transition: width .4s var(--ease); }
.form-card {
background: #fff; color: var(--color-text);
max-width: 560px; margin: 0 auto;
padding: 34px; box-shadow: var(--shadow-lg);
position: relative;
}
.form-card::before {
content: ""; position: absolute; top: 0; left: 0; right: 0; height: 5px;
background: var(--color-primary);
clip-path: polygon(5px 0, 100% 0, calc(100% - 5px) 100%, 0 100%);
}
.form-step { display: none; }
.form-step.active { display: block; animation: formFade 0.35s var(--ease); }
@keyframes formFade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
.form-step-title { font-family: var(--font-display); font-size: 19px; color: var(--color-ink); margin-bottom: 18px; }
.form-group { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.form-group label { font-size: 13px; font-weight: 500; color: var(--color-ink); }
.form-group input, .form-group select {
padding: 13px 14px; border: 1.5px solid var(--color-line);
font: inherit; font-size: 15px; color: var(--color-ink); background: #fff; width: 100%;
transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.form-group input::placeholder { color: #95A1A8; }
.form-group input:focus, .form-group select:focus {
outline: 0; border-color: var(--color-primary); box-shadow: 0 0 0 4px rgba(20,200,204,0.18);
}
.form-group input.error, .form-group select.error { border-color: #c83232; background: #fff6f6; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.form-actions { display: flex; gap: 12px; margin-top: 6px; align-items: stretch; }
.form-actions .btn--back { flex: 0 0 auto; }
.btn--back { background: var(--color-bg-mute); color: var(--color-ink); }
.btn--back:hover { background: #dde5e8; color: var(--color-ink); }
.form-success { display: none; text-align: center; padding: 22px 10px; }
.form-success.show { display: block; animation: formFade 0.4s var(--ease); }
.form-success h3 { font-family: var(--font-display); font-size: 21px; color: var(--color-ink); margin-bottom: 8px; }
.form-success p { color: var(--color-text-mute); font-size: 15px; line-height: 1.6; max-width: 44ch; margin: 0 auto; }
.form-prereq { text-align: center; font-size: 13px; color: var(--color-on-dark-mute); margin: 20px auto 0; max-width: 560px; }
.trust-badges { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 26px; max-width: 640px; margin: 20px auto 0; position: relative; z-index: 1; }
.trust-item { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--color-on-dark-mute); }
.trust-item svg { width: 17px; height: 17px; color: var(--color-primary); }
@media (max-width: 480px) {
.form-card { padding: 26px 20px; }
.form-row { grid-template-columns: 1fr; }
.step-label { display: none; }
}
/* ==========================================================================
FOOTER
========================================================================== */
/* =================================================================
DIVISÓRIA HEXAGONAL — o símbolo da marca separando as dobras */
.hex-divider {
display: flex;
align-items: center;
justify-content: center;
gap: 16px;
padding: 8px 0;
background: var(--color-bg);
}
.hex-divider--dark { background: var(--color-ink); }
.hex-divider::before,
.hex-divider::after {
content: "";
height: 1px;
width: clamp(40px, 12vw, 120px);
background: linear-gradient(90deg, transparent, rgba(20,200,204,0.5));
}
.hex-divider::after { transform: scaleX(-1); }
.hex-divider__mark {
width: 18px; height: 20px;
background: var(--color-primary);
clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px);
flex: 0 0 auto;
}
.hex-divider__mark--sm { width: 11px; height: 12px; opacity: 0.5; }
/* Textura de favo (hexágonos) em baixíssima opacidade nas dobras escuras */
.hex-texture { position: relative; }
.hex-texture > .container,
.hex-texture > * { position: relative; z-index: 1; }
.hex-texture::after {
content: "";
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
opacity: 0.06;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='64' viewBox='0 0 56 64'%3E%3Cpath d='M28 2 L54 17 L54 47 L28 62 L2 47 L2 17 Z' fill='none' stroke='%2314C8CC' stroke-width='1.4'/%3E%3C/svg%3E");
background-size: 56px 64px;
}
/* Rodapé enxuto: sem navegação e sem contato direto (o caminho é o funil) */
.site-footer {
background: #07212A;
color: var(--color-on-dark);
padding: 64px 0 40px;
text-align: center;
}
.site-footer .container {
display: flex;
flex-direction: column;
align-items: center;
}
.site-footer__logo {
display: inline-block;
line-height: 0;
margin-bottom: 24px;
}
.site-footer__logo img {
width: clamp(150px, 16vw, 190px);
height: auto;
filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.4));
}
.site-footer__divider {
display: flex;
align-items: center;
justify-content: center;
gap: 14px;
margin-bottom: 24px;
}
.site-footer__divider::before,
.site-footer__divider::after {
content: "";
height: 1px;
width: 56px;
background: linear-gradient(90deg, transparent, rgba(20,200,204,0.5));
}
.site-footer__divider::after { transform: scaleX(-1); }
.site-footer__tagline {
color: var(--color-on-dark-mute);
font-size: 14.5px;
line-height: 1.65;
max-width: 60ch;
margin-bottom: 30px;
}
.site-footer__info {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 14px 30px;
margin-bottom: 34px;
}
.site-footer__info-item {
display: inline-flex;
align-items: center;
gap: 10px;
font-size: 13.5px;
color: var(--color-on-dark-mute);
}
.site-footer__info-item svg {
width: 18px; height: 18px;
color: var(--color-primary);
flex: 0 0 18px;
}
.site-footer__copy {
font-size: 12.5px;
color: var(--color-on-dark-mute);
border-top: 1px solid rgba(255,255,255,0.08);
padding-top: 24px;
width: 100%;
max-width: 720px;
}
.site-footer__dev {
font-size: 12.5px;
color: var(--color-on-dark-mute);
margin-top: 8px;
}
.site-footer__dev { display: inline-flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; }
/* Selo M² BLACK = botão de contorno hexagonal (vazado) */
.dev-badge {
position: relative;
display: inline-flex; align-items: center;
padding: 8px 18px;
background: var(--color-primary);
clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
font-family: var(--font-display); font-weight: 700; font-size: 12px; letter-spacing: 0.10em;
transition: transform var(--t-fast);
}
.dev-badge::before {
content: ""; position: absolute; inset: 1.6px;
background: #07212A;
clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
z-index: 0;
transition: background var(--t);
}
.dev-badge span { position: relative; z-index: 1; color: var(--color-primary); transition: color var(--t); }
.dev-badge:hover { transform: translateY(-2px); }
.dev-badge:hover::before { background: var(--color-primary); }
.dev-badge:hover span { color: var(--color-ink); }
/* =================================================================
CTA FIXO (barra full-width, todas as versões) */
.mobile-cta {
position: fixed;
bottom: 0; left: 0; width: 100%;
z-index: 850;
display: flex;
justify-content: center;
padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
background: rgba(0, 34, 41, 0.92);
-webkit-backdrop-filter: blur(12px);
backdrop-filter: blur(12px);
border-top: 1px solid rgba(255,255,255,0.1);
transform: translateY(120%);
transition: transform 0.35s var(--ease);
}
.mobile-cta.is-visible { transform: translateY(0); }
.mobile-cta .btn { width: 100%; max-width: 560px; }
.mobile-cta .btn--green::after { animation: none; opacity: 0; } /* barra fixa não pulsa */
/* =================================================================
FAB WhatsApp — sempre redondo */
.wa-fab {
position: fixed; right: 18px; bottom: 18px; z-index: 95;
width: 58px; height: 58px;
border: 0; cursor: pointer;
border-radius: 50% !important; /* exceção proposital à identidade angular */
display: grid; place-items: center;
background: #25d366; color: #fff;
box-shadow: 0 14px 30px -8px rgba(37,211,102,0.6);
transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease), bottom 0.3s var(--ease);
animation: waPulse 2.6s var(--ease) infinite;
}
.wa-fab svg { width: 32px; height: 32px; }
.wa-fab:hover { transform: scale(1.06); box-shadow: 0 18px 36px -8px rgba(37,211,102,0.75); }
@keyframes waPulse {
0%, 100% { box-shadow: 0 14px 30px -8px rgba(37,211,102,0.6), 0 0 0 0 rgba(37,211,102,0.5); }
50% { box-shadow: 0 14px 30px -8px rgba(37,211,102,0.6), 0 0 0 12px rgba(37,211,102,0); }
}
.wa-fab.lifted { bottom: calc(94px + env(safe-area-inset-bottom)); }
@media (max-width: 767px) {
.wa-fab { width: 52px; height: 52px; }
.wa-fab.lifted { bottom: calc(90px + env(safe-area-inset-bottom)); }
.wa-fab svg { width: 28px; height: 28px; }
}
/* =================================================================
LEAD POPUP (40s) */
.lead-popup { position: fixed; inset: 0; z-index: 1100; display: grid; place-items: center; padding: 20px; }
.lead-popup[hidden] { display: none; }
.lead-popup__backdrop { position: absolute; inset: 0; background: rgba(7,33,42,0.72); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); animation: popupFade 0.3s var(--ease); }
/* O popup carrega o formulario completo em 2 passos e nao cabe em tela baixa.
O overlay centraliza por grid (place-items:center): card maior que a tela
transborda pros DOIS lados e o topo fica inalcancavel, sem scroll pra
recuperar. 40px = os 20px de padding do overlay, dos dois lados. */
.lead-popup__card { position: relative; width: 100%; max-width: 440px; background: #fff; border-radius: var(--radius-lg); padding: 40px 32px 34px; box-shadow: var(--shadow-lg); animation: popupRise 0.4s var(--ease); max-height: calc(100vh - 40px); max-height: calc(100dvh - 40px); overflow-y: auto; overscroll-behavior: contain; }
@keyframes popupFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes popupRise { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
.lead-popup__close { position: absolute; top: 14px; right: 16px; width: 36px; height: 36px; border: 0; background: transparent; font-size: 1.7rem; line-height: 1; color: #95A1A8; cursor: pointer; transition: color 0.2s var(--ease); }
.lead-popup__close:hover { color: var(--color-ink); }
.lead-popup__title { font-family: var(--font-display); font-size: 24px; color: var(--color-ink); margin-bottom: 8px; line-height: 1.2; }
.lead-popup__sub { font-size: 14.5px; color: var(--color-text-mute); margin-bottom: 22px; line-height: 1.6; }
.lead-popup__form .btn { margin-top: 4px; }
.lead-popup__success { display: none; text-align: center; padding: 10px 0; }
.lead-popup__success.show { display: block; animation: popupFade 0.4s var(--ease); }
.lead-popup__success h3 { font-family: var(--font-display); font-size: 20px; color: var(--color-ink); margin-bottom: 6px; }
.lead-popup__success p { color: var(--color-text-mute); font-size: 14.5px; line-height: 1.6; }
.success-icon {
width: 58px; height: 62px;
clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px);
display: grid; place-items: center; margin: 0 auto 14px;
background: rgba(31,168,88,0.16); color: var(--color-green);
}
.success-icon svg { width: 28px; height: 28px; }
.error-msg { display: none; font-size: 12.5px; color: #c83232; font-weight: 500; margin-top: 4px; }
.error-msg.show { display: block; }
.form__field input.error { border-color: #c83232; background: #fff6f6; }
/* ==========================================================================
REVEAL ON SCROLL
========================================================================== */
[data-reveal] {
opacity: 0;
transform: translateY(28px);
transition: opacity .7s var(--ease), transform .7s var(--ease);
will-change: opacity, transform;
}
[data-reveal].is-revealed {
opacity: 1;
transform: translateY(0);
}
/* Stagger sutil para grids */
[data-reveal]:nth-child(2) { transition-delay: .06s; }
[data-reveal]:nth-child(3) { transition-delay: .12s; }
[data-reveal]:nth-child(4) { transition-delay: .18s; }
[data-reveal]:nth-child(5) { transition-delay: .24s; }
[data-reveal]:nth-child(6) { transition-delay: .30s; }
/* Reveal genérico (aplicado via JS a títulos, cards, provas, form etc.) */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s var(--ease), transform .7s var(--ease); will-change: opacity, transform; }
.reveal.is-visible { opacity: 1; transform: none; }
/* Cascata nos grids (itens entram em sequência) */
.offer__grid .offer__card:nth-child(2) { transition-delay: .12s; }
.proof__grid .proof__item:nth-child(2) { transition-delay: .09s; }
.proof__grid .proof__item:nth-child(3) { transition-delay: .18s; }
.objections__grid .objection:nth-child(2) { transition-delay: .06s; }
.objections__grid .objection:nth-child(3) { transition-delay: .12s; }
.objections__grid .objection:nth-child(4) { transition-delay: .18s; }
/* Sheen que atravessa o card em destaque da oferta (vida na dobra) */
.offer__card--featured { overflow: hidden; }
.offer__card--featured::after {
content: ""; position: absolute; top: -60%; left: -40%;
width: 40%; height: 220%;
background: linear-gradient(100deg, transparent, rgba(20,200,204,0.14), transparent);
transform: rotate(12deg);
animation: cardSheen 5.5s ease-in-out infinite;
pointer-events: none;
}
@keyframes cardSheen { 0% { left: -40%; } 60%, 100% { left: 130%; } }
/* Microinteração: cards de objeção e provas sobem no hover */
.objection:hover { transform: translateY(-3px); }
.proof__item { transition: transform var(--t); }
.proof__item:hover { transform: translateY(-4px); }
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
[data-reveal], .reveal, .timeline__card, .step { opacity: 1; transform: none; }
.step__icon { opacity: 1; transform: none; }
.step::before { transform: scaleX(1); }
.hero__bg img { animation: none; }
}
/* ==========================================================================
CAMADA DE IDENTIDADE PROJEX
O simbolo da Projex e um P isometrico 3D: nao da pra descrever em polygon,
entao ele entra como MASCARA (--mark-full) e a crista do telhado como
faixa tileavel (--mark-band). Substitui a gramatica hexagonal do Romualdo.
========================================================================== */
.section-title::after {
content: ""; display: block; width: 46px; max-width: 92px; height: 4px;
margin-top: 14px; background: var(--brand);
-webkit-mask: var(--mark-band) left center/auto 100% repeat-x;
mask: var(--mark-band) left center/auto 100% repeat-x;
transition: width .6s var(--ease);
}
.section-title--light::after { background: var(--brand-light); }
.hex-divider { display: block; height: 26px; padding: 0; background: var(--color-bg-soft); }
.hex-divider::before, .hex-divider::after { content: none; }
.hex-divider__mark {
display: block; width: 100%; height: 26px; background: var(--brand); opacity: .45;
-webkit-mask: var(--mark-band) left center/auto 100% repeat-x;
mask: var(--mark-band) left center/auto 100% repeat-x;
}
.hex-texture { position: relative; isolation: isolate; }
.hex-texture::after {
content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
background: var(--brand-light);
-webkit-mask: var(--mark-full) right -6% bottom -10%/34% no-repeat;
mask: var(--mark-full) right -6% bottom -10%/34% no-repeat;
opacity: .07;
}
.hex-texture > * { position: relative; z-index: 1; }
.proof__seal img { filter: drop-shadow(0 0 18px rgba(0, 184, 224, .45)); }
/* ==========================================================================
DOBRAS PRÓPRIAS DA PROJEX
O Romualdo é construção financiada e tem foto de obra; a Projex é B2B
comercial e não tem acervo. Estas dobras substituem hero com foto,
galeria e exemplos por faixa de renda.
========================================================================== */
/* --- Hero sem foto: o fundo é a própria marca, nunca imagem de banco ------ */
.hero--flat {
min-height: auto; height: auto; padding: calc(var(--header-h) + 96px) 0 96px;
background:
radial-gradient(1200px 620px at 82% 18%, rgba(0, 184, 224, .20), transparent 62%),
linear-gradient(155deg, var(--color-ink) 0%, var(--color-ink-2) 58%, #063a48 100%);
color: var(--color-on-dark);
}
.hero--flat .hero__bg, .hero--flat .hero__overlay { display: none; }
.hero--flat .hero__content { position: relative; max-width: 900px; }
.hero--flat .hero__sub { color: var(--color-on-dark-mute); max-width: 66ch; }
.hero--flat::after { opacity: .10; }
/* --- Statbar (gramática do Icconne, 3 números) ---------------------------- */
.statbar { background: var(--color-bg-soft); padding: 56px 0; border-bottom: 1px solid var(--color-line); }
.statbar__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.statbar__item { position: relative; padding-left: 22px; }
.statbar__item::before {
content: ""; position: absolute; left: 0; top: 4px; bottom: 4px; width: 4px;
background: var(--brand);
-webkit-mask: var(--mark-band) center/100% auto repeat-y;
mask: var(--mark-band) center/100% auto repeat-y;
}
.statbar__seal { position: absolute; right: 8px; top: -6px; opacity: .16; }
.statbar__seal img { width: 52px; height: auto; }
.statbar__num {
font-family: var(--font-display); font-weight: 700; line-height: 1;
font-size: clamp(2.2rem, 4.4vw, 3.1rem); color: var(--color-ink);
}
.statbar__num small { font-size: .42em; margin-left: .18em; color: var(--brand-2); font-weight: 600; }
.statbar__label { margin-top: 10px; color: var(--color-text-mute); font-size: .96rem; max-width: 30ch; }
/* --- Diferencial (4 cards numerados) -------------------------------------- */
.diff { padding: 96px 0; background: var(--color-bg); }
.diff__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; margin-top: 44px; }
.diff__card {
position: relative; padding: 30px 28px 28px; background: var(--color-bg-soft);
border: 1px solid var(--color-line); border-left: 4px solid var(--brand);
border-radius: var(--radius-card); transition: transform var(--t), box-shadow var(--t);
}
.diff__card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.diff__num {
display: block; font-family: var(--font-display); font-weight: 700;
font-size: 2.1rem; line-height: 1; color: var(--brand); opacity: .34; margin-bottom: 14px;
}
.diff__title { font-family: var(--font-display); font-size: 1.16rem; color: var(--color-ink); margin-bottom: 10px; }
.diff__text { color: var(--color-text-mute); font-size: .99rem; line-height: 1.62; }
/* --- Gestão / camada de proteção ------------------------------------------ */
.gestao { padding: 96px 0; background: var(--color-bg-soft); }
.gestao__inner { display: grid; grid-template-columns: 1.25fr .85fr; gap: 46px; align-items: start; }
.gestao__lead { color: var(--color-text-mute); font-size: 1.04rem; line-height: 1.72; margin-top: 20px; }
.gestao__list { margin-top: 24px; display: grid; gap: 12px; }
.gestao__list li { position: relative; padding-left: 30px; color: var(--color-text); line-height: 1.55; }
.gestao__list li::before {
content: ""; position: absolute; left: 0; top: 3px; width: 16px; height: 17px;
background: var(--brand);
-webkit-mask: var(--mark-band) center/contain no-repeat;
mask: var(--mark-band) center/contain no-repeat;
}
.gestao__cta { margin-top: 30px; }
.gestao__aside {
padding: 34px 30px; background: var(--color-ink); color: var(--color-on-dark);
border-radius: var(--radius-card);
}
.gestao__aside-title { font-family: var(--font-display); font-size: 1.1rem; margin-bottom: 20px; color: #fff; }
.gestao__tags { display: grid; gap: 10px; }
.gestao__tags li {
padding: 11px 14px; background: rgba(255, 255, 255, .06);
border-left: 3px solid var(--brand-light); font-size: .95rem; color: var(--color-on-dark);
}
.gestao__aside-note { margin-top: 20px; font-size: .86rem; color: var(--color-on-dark-mute); opacity: .8; }
/* --- Responsável técnico sem retrato -------------------------------------- */
.experts--nophoto .experts__inner { grid-template-columns: 1fr; max-width: 820px; margin-inline: auto; text-align: left; }
.experts__signature {
display: flex; align-items: center; gap: 14px; margin-top: 28px; padding-top: 22px;
border-top: 1px solid var(--color-line);
}
.experts__seal {
display: grid; place-items: center; width: 58px; height: 58px; flex: none;
background: var(--brand-soft); border: 1px solid var(--brand); border-radius: var(--radius-card);
}
.experts__seal img { width: 34px; height: auto; }
.experts__signature strong { display: block; font-family: var(--font-display); color: var(--color-ink); }
.experts__signature small { display: block; color: var(--color-text-mute); font-size: .9rem; margin-top: 2px; }
@media (max-width: 900px) {
.statbar__grid { grid-template-columns: 1fr; gap: 30px; }
.diff__grid { grid-template-columns: 1fr; }
.gestao__inner { grid-template-columns: 1fr; gap: 34px; }
}
@media (max-width: 420px) {
.hero--flat { padding: calc(var(--header-h) + 64px) 0 68px; }
.diff, .gestao { padding: 68px 0; }
.diff__card { padding: 24px 20px; }
}
/* ==========================================================================
CONTENÇÃO HORIZONTAL
A nav da Projex tem 6 itens com rótulos mais longos que os do Romualdo e,
sem min-width:0, o flex não deixava a faixa encolher: os links empurravam
a largura da PÁGINA e tudo vazava para a direita no celular.
Sem hambúrguer (playbook 13.3): a faixa rola na horizontal.
========================================================================== */
html, body { overflow-x: clip; } /* clip e não hidden: não quebra sticky */
.site-header__inner { min-width: 0; }
.site-nav {
min-width: 0; overflow-x: auto; overscroll-behavior-x: contain;
scrollbar-width: none; -ms-overflow-style: none;
}
.site-nav::-webkit-scrollbar { display: none; }
.site-nav a { flex: none; white-space: nowrap; }
.container { max-width: min(var(--container), 100%); }
.hero--flat .hero__content { max-width: min(900px, 100%); }
img, svg, video { max-width: 100%; }
/* ==========================================================================
HERO COM FOTO (altura automática, não 100vh: copy longa não clipa o CTA)
========================================================================== */
.hero--photo { position: relative; isolation: isolate; }
.hero--photo .hero__bg { display: block; position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.hero--photo .hero__bg img { width: 100%; height: 100%; object-fit: cover; object-position: center 42%; }
.hero--photo .hero__overlay {
display: block; position: absolute; inset: 0;
background:
linear-gradient(100deg, rgba(0,34,41,.95) 0%, rgba(0,34,41,.88) 42%, rgba(0,34,41,.52) 72%, rgba(0,34,41,.42) 100%),
linear-gradient(180deg, rgba(0,34,41,.72) 0%, transparent 34%, rgba(0,34,41,.60) 100%);
}
.hero--photo::after { opacity: .05; }
/* Célula da galeria em 4:5 (>= 0.80): o acervo da Projex é retrato de celular
e o cover em célula deitada decepava o pé-direito (playbook 15.7). */
.marquee__item { aspect-ratio: 4 / 5; width: clamp(230px, 24vw, 300px); }
.marquee__item img { width: 100%; height: 100%; object-fit: cover; }
/* ==========================================================================
v3 — RITMO, MOVIMENTO E ENTRADA/SAÍDA
========================================================================== */
/* --- 1. Respiro entre dobras mais curto ---------------------------------- */
:root { --dobra-y: clamp(52px, 5.4vw, 76px); }
.statbar, .process, .risk-band, .gestao, .gallery, .experts, .objections, .viability {
padding-top: var(--dobra-y); padding-bottom: var(--dobra-y);
}
.hero--flat { padding: calc(var(--header-h) + 64px) 0 68px; }
.gallery__head, .form-head { margin-bottom: 30px; }
.section-lead { margin-bottom: 0; }
.steps, .diff__grid, .objections__grid { margin-top: 32px; }
.gallery__cta, .financing__cta, .gestao__cta, .experts__cta { margin-top: 26px; }
.hex-divider { height: 18px; }
.hex-divider__mark { height: 18px; }
/* --- 2. Degradê animado com as cores da marca ---------------------------- */
@property --g1 { syntax: ''; inherits: false; initial-value: 0%; }
.brand-flow {
position: relative; isolation: isolate;
background:
radial-gradient(90% 130% at 12% 0%, rgba(0,184,224,.30), transparent 58%),
radial-gradient(80% 120% at 92% 30%, rgba(0,112,168,.42), transparent 62%),
radial-gradient(70% 110% at 50% 108%, rgba(112,229,255,.20), transparent 60%),
linear-gradient(150deg, var(--color-ink) 0%, #04323C 55%, #063a48 100%);
background-size: 180% 180%, 190% 190%, 170% 170%, 100% 100%;
animation: brandFlow 22s ease-in-out infinite alternate;
}
@keyframes brandFlow {
0% { background-position: 0% 0%, 100% 30%, 50% 100%, 0 0; }
50% { background-position: 40% 30%, 60% 10%, 20% 70%, 0 0; }
100% { background-position: 10% 60%, 90% 60%, 80% 90%, 0 0; }
}
/* Fio de luz da marca que corre no topo das dobras escuras */
.brand-wire { position: relative; }
.brand-wire::before {
content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; z-index: 2;
background: linear-gradient(90deg, transparent, var(--brand) 18%, var(--brand-light) 50%, var(--brand) 82%, transparent);
background-size: 220% 100%;
animation: wireRun 5.5s linear infinite;
opacity: .85;
}
@keyframes wireRun { from { background-position: 220% 0; } to { background-position: -20% 0; } }
/* Brilho que pulsa atrás do hero */
.hero--photo .hero__overlay::after {
content: ""; position: absolute; inset: 0;
background: radial-gradient(46% 62% at 22% 46%, rgba(0,184,224,.26), transparent 68%);
animation: heroGlow 7s ease-in-out infinite alternate;
}
@keyframes heroGlow { from { opacity: .45; transform: scale(1); } to { opacity: .95; transform: scale(1.12); } }
/* --- 3. Entrada E saída (o elemento recolhe ao sair do viewport) ---------- */
[data-anim] {
opacity: 0; transform: translateY(26px) scale(.985);
transition: opacity .62s var(--ease), transform .62s var(--ease);
will-change: opacity, transform;
}
[data-anim].is-in { opacity: 1; transform: none; }
[data-anim].is-out { opacity: 0; transform: translateY(-18px) scale(.99); }
[data-anim="left"] { transform: translateX(-32px); }
[data-anim="right"] { transform: translateX(32px); }
[data-anim="zoom"] { transform: scale(.93); }
[data-anim].is-in { transform: none; }
/* escalonamento dos filhos: cada card entra logo depois do anterior */
[data-anim-stagger] > * { opacity: 0; transform: translateY(22px);
transition: opacity .55s var(--ease), transform .55s var(--ease); }
[data-anim-stagger].is-in > * { opacity: 1; transform: none; }
[data-anim-stagger].is-in > *:nth-child(1) { transition-delay: .04s }
[data-anim-stagger].is-in > *:nth-child(2) { transition-delay: .12s }
[data-anim-stagger].is-in > *:nth-child(3) { transition-delay: .20s }
[data-anim-stagger].is-in > *:nth-child(4) { transition-delay: .28s }
[data-anim-stagger].is-in > *:nth-child(5) { transition-delay: .36s }
@media (prefers-reduced-motion: reduce) {
[data-anim], [data-anim-stagger] > * { opacity: 1 !important; transform: none !important; }
.brand-flow, .brand-wire::before, .hero--photo .hero__overlay::after { animation: none; }
}
/* --- 4. Selo de foto provisória ------------------------------------------ */
.experts__photo { position: relative; }
.experts__placeholder-tag {
position: absolute; top: 14px; left: 14px; z-index: 3;
padding: 7px 13px; font-family: var(--font-display); font-weight: 600;
font-size: .74rem; letter-spacing: .08em; text-transform: uppercase;
color: var(--color-ink); background: var(--brand-light);
border-radius: var(--radius-btn);
box-shadow: 0 6px 18px rgba(0,34,41,.32);
}
/* --- Correção de contraste: a dobra de risco virou escura com o brand-flow,
e o texto dos bullets (vermelho sobre claro no original) sumiu. -------- */
.risk-band.brand-flow .rb__txt { color: var(--color-on-dark); }
.risk-band.brand-flow .rb { border-bottom-color: rgba(255,255,255,.14); }
.risk-band.brand-flow .rb__ic { background: #c0392b; color: #fff; }
.risk-band.brand-flow .rb[data-strike] .rb__txt::after { background: rgba(255,255,255,.55); }
.risk-band.brand-flow .section-title { color: #fff; }
.risk-band.brand-flow .accent-red { color: #ff7a6b; }
/* ==========================================================================
v4
========================================================================== */
/* --- 1. Régua de autoridade: degradê escuro e números em cor brilhante ---- */
.statbar {
position: relative; isolation: isolate; border-bottom: 0;
color: var(--color-on-dark);
background:
radial-gradient(70% 140% at 8% 0%, rgba(0,184,224,.34), transparent 60%),
radial-gradient(65% 130% at 92% 100%, rgba(112,229,255,.26), transparent 62%),
linear-gradient(120deg, var(--color-ink) 0%, #06394a 48%, #0a4e63 100%);
background-size: 190% 190%, 180% 180%, 100% 100%;
animation: brandFlow 20s ease-in-out infinite alternate;
padding-top: calc(var(--dobra-y) + 6px); padding-bottom: calc(var(--dobra-y) + 6px);
}
.statbar::before {
content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; z-index: 2;
background: linear-gradient(90deg, transparent, var(--brand) 20%, var(--brand-light) 50%, var(--brand) 80%, transparent);
background-size: 220% 100%; animation: wireRun 5.5s linear infinite;
}
.statbar__item { padding-left: 26px; }
.statbar__item::before { background: var(--brand-light); opacity: .9; width: 3px; }
.statbar__num {
color: transparent; background: linear-gradient(96deg, #FFFFFF 0%, var(--brand-light) 42%, var(--brand) 100%);
background-size: 220% 100%; -webkit-background-clip: text; background-clip: text;
animation: numShine 6s ease-in-out infinite alternate;
text-shadow: none; filter: drop-shadow(0 4px 16px rgba(0,184,224,.30));
font-size: clamp(2.5rem, 5vw, 3.5rem);
}
@keyframes numShine { from { background-position: 0% 0; } to { background-position: 100% 0; } }
.statbar__num small { color: var(--brand-light); -webkit-text-fill-color: var(--brand-light); }
.statbar__label { color: var(--color-on-dark-mute); }
.statbar__seal { opacity: .22; }
/* --- 2. Portfólio: cartões menores -------------------------------------- */
.marquee__item { width: clamp(168px, 16vw, 216px); }
.marquee__item figcaption { font-size: .82rem; }
/* --- 3. Como funciona: cards alinhados com o texto ----------------------- */
/* o herdava o recuo de lista e empurrava os cards para dentro */
.steps { padding-left: 0; margin-left: 0; list-style: none; }
/* --- 4. Gestão: colunas equilibradas e aside da altura do texto ---------- */
.gestao__inner { grid-template-columns: 1fr 1fr; align-items: stretch; }
.gestao__aside { display: flex; flex-direction: column; justify-content: center; }
.gestao__copy { display: flex; flex-direction: column; }
.gestao__cta { margin-top: auto; padding-top: 24px; }
/* --- 5. Botões: degradê da marca animado, e pulso ------------------------ */
.btn--accent, .btn--green, .btn--ghost-light, .site-header__cta {
position: relative; background-size: 220% 100%;
animation: btnFlow 6s ease-in-out infinite alternate, btnPulse 2.8s ease-in-out infinite;
}
.btn--accent, .site-header__cta {
background-image: linear-gradient(96deg, var(--brand-2) 0%, var(--brand) 38%, var(--brand-light) 62%, var(--brand) 100%);
color: var(--color-ink);
}
/* verde continua verde: no padrão, verde = conversão e não pode virar ciano */
.btn--green {
background-image: linear-gradient(96deg, var(--color-green-deep) 0%, var(--color-green) 42%, var(--color-green-light) 64%, var(--color-green) 100%);
color: #fff;
}
.btn--ghost-light {
background-image: linear-gradient(96deg, rgba(0,184,224,.16) 0%, rgba(112,229,255,.26) 50%, rgba(0,184,224,.16) 100%);
}
@keyframes btnFlow { from { background-position: 0% 0; } to { background-position: 100% 0; } }
@keyframes btnPulse {
0%, 100% { box-shadow: 0 0 0 0 rgba(0,184,224,.42); }
55% { box-shadow: 0 0 0 14px rgba(0,184,224,0); }
}
.btn--green { animation-name: btnFlow, btnPulseGreen; }
@keyframes btnPulseGreen {
0%, 100% { box-shadow: 0 0 0 0 rgba(31,168,88,.45); }
55% { box-shadow: 0 0 0 14px rgba(31,168,88,0); }
}
.btn--accent:hover, .btn--green:hover, .site-header__cta:hover { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
.statbar, .statbar::before, .statbar__num,
.btn--accent, .btn--green, .btn--ghost-light, .site-header__cta { animation: none; }
}
/* ==========================================================================
v5 — CONTRASTE DO HERO
O brilho pulsante estava em 22% da largura, atrás da coluna de texto, e
clareava o fundo exatamente onde ele precisa ser escuro. Foi para o lado
direito, onde não há texto. Somado a isso: scrim mais forte na coluna
esquerda, corpo em cor cheia (não na mute) e acento no ciano claro, que
é o que sobrevive sobre a fachada de vidro esverdeada.
========================================================================== */
/* 1. o brilho sai de trás do texto */
.hero--photo .hero__overlay::after {
background: radial-gradient(40% 56% at 82% 40%, rgba(0,184,224,.22), transparent 70%);
}
@keyframes heroGlow { from { opacity: .35; transform: scale(1); } to { opacity: .72; transform: scale(1.10); } }
/* 2. scrim: quase opaco onde o texto vive, e só abre no terço direito */
.hero--photo .hero__overlay {
background:
linear-gradient(96deg,
rgba(0,20,25,.97) 0%,
rgba(0,20,25,.94) 38%,
rgba(0,22,28,.82) 58%,
rgba(0,26,33,.55) 78%,
rgba(0,26,33,.42) 100%),
linear-gradient(180deg, rgba(0,20,25,.80) 0%, rgba(0,20,25,.30) 34%, rgba(0,20,25,.72) 100%);
}
.hero--photo .hero__bg img { filter: saturate(.85) contrast(.92) brightness(.72); }
/* 3. texto do hero em cor cheia, com sombra de segurança */
.hero--flat .hero__sub {
color: #E9F6FA; font-size: clamp(1.02rem, 1.22vw, 1.14rem); line-height: 1.68;
text-shadow: 0 1px 12px rgba(0,20,25,.85);
}
.hero__headline { text-shadow: 0 2px 20px rgba(0,20,25,.75); }
.hero--photo .hero__headline .accent { color: var(--brand-light); }
.hero--photo .eyebrow--badge {
background: rgba(0,20,25,.86); color: #EAF7FB;
border: 1px solid rgba(112,229,255,.34);
}
.hero__cue { color: #DCEFF5; text-shadow: 0 1px 10px rgba(0,20,25,.8); }
/* 4. o botão fantasma precisa de borda para existir sobre foto */
.hero--photo .btn--ghost-light {
border: 1.5px solid rgba(112,229,255,.55); color: #fff;
backdrop-filter: blur(3px);
}
/* --- v5.1: o pior ponto do fundo (não a média) é que decide -------------- */
/* O parágrafo chegava a ~1020px, já na região em que o scrim abria: sobrava
uma mancha clara da fachada atrás de texto pequeno (2,65:1). Duas travas:
a coluna de texto encurta, e o scrim forte vai mais para a direita. */
.hero--photo .hero__overlay {
background:
linear-gradient(96deg,
rgba(0,20,25,.97) 0%,
rgba(0,20,25,.96) 46%,
rgba(0,20,25,.93) 64%,
rgba(0,22,28,.72) 80%,
rgba(0,26,33,.48) 100%),
linear-gradient(180deg, rgba(0,20,25,.80) 0%, rgba(0,20,25,.34) 34%, rgba(0,20,25,.74) 100%);
}
.hero--flat .hero__sub { max-width: 58ch; }
.hero__headline { max-width: 20ch; }
/* ==========================================================================
v7
========================================================================== */
/* --- Régua de autoridade: centralizada, maior e proporcional ------------- */
.statbar__grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: clamp(20px, 3vw, 44px); align-items: center;
max-width: 1080px; margin-inline: auto;
}
.statbar__item {
padding: 6px 0 6px 0; text-align: center;
display: flex; flex-direction: column; align-items: center; gap: 8px;
}
.statbar__item::before { /* a crista vira um traço curto sob o número */
content: ""; position: static; order: 3;
width: 46px; height: 4px; opacity: .95;
-webkit-mask: var(--mark-band) center/auto 100% repeat-x;
mask: var(--mark-band) center/auto 100% repeat-x;
}
.statbar__num { font-size: clamp(2.9rem, 5.6vw, 4.2rem); line-height: .98; order: 1; }
.statbar__num small { font-size: .34em; }
.statbar__label { order: 2; max-width: 26ch; margin-top: 2px; font-size: 1rem; }
.statbar__seal { display: none; } /* o selo desalinhava a grade de 3 colunas */
.statbar { padding-top: calc(var(--dobra-y) + 18px); padding-bottom: calc(var(--dobra-y) + 18px); }
/* --- Portfólio quadrado e menor ----------------------------------------- */
.marquee__item { aspect-ratio: 1 / 1; width: clamp(150px, 13.5vw, 190px); }
/* --- Telefone: seletor de país + dica + erro com exemplo ----------------- */
.tel-row { display: flex; gap: 8px; align-items: stretch; }
.tel-row .tel-country { flex: 0 0 auto; width: auto; max-width: 42%; min-width: 104px; padding-right: 26px; }
.tel-row input { flex: 1 1 auto; min-width: 0; }
.tel-hint { display: block; margin-top: 6px; font-size: .82rem; color: var(--color-text-mute); }
.error-msg b { color: #ff6b5b; font-weight: 700; letter-spacing: .01em; }
.error-msg strong { color: inherit; }
@media (max-width: 380px) { .tel-row .tel-country { max-width: 46%; min-width: 92px; font-size: 13px; } }
/* --- Hero: deixar a foto aparecer mais, sem perder o texto --------------- */
/* o scrim forte vira um painel SÓ atrás da coluna de texto; o resto da
fachada clareia. Assim a foto respira e o contraste continua medido. */
.hero--photo .hero__bg img { filter: saturate(.95) contrast(1.0) brightness(.86); }
.hero--photo .hero__overlay {
background:
linear-gradient(96deg,
rgba(0,20,25,.94) 0%,
rgba(0,20,25,.90) 40%,
rgba(0,20,25,.72) 56%,
rgba(0,22,28,.34) 74%,
rgba(0,26,33,.16) 100%),
linear-gradient(180deg, rgba(0,20,25,.62) 0%, rgba(0,20,25,.16) 36%, rgba(0,20,25,.60) 100%);
}
.hero--flat .hero__content::before {
content: ""; position: absolute; z-index: -1;
left: calc(var(--container-pad) * -1); right: 22%; top: -32px; bottom: -32px;
background: linear-gradient(96deg, rgba(0,18,23,.80) 0%, rgba(0,18,23,.66) 62%, transparent 100%);
filter: blur(18px);
}
.hero--flat .hero__content { position: relative; z-index: 1; }
@media (max-width: 900px) { .hero--flat .hero__content::before { right: -10%; } }
/* ==========================================================================
v9
========================================================================== */
/* --- Régua de autoridade: volta ao layout anterior, só melhor centrada ---- */
/* Desfaz o v7 (que centralizou o texto e escondeu o selo) e recupera o bloco
alinhado à esquerda com a barra da crista. O que muda: a grade inteira
passa a ser centrada como conjunto e as três colunas ficam do mesmo peso. */
.statbar__grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: clamp(24px, 3.2vw, 52px);
max-width: 1120px; margin-inline: auto;
align-items: center; justify-items: center;
}
.statbar__item {
display: block; text-align: left; position: relative;
padding: 4px 0 4px 26px; width: max-content; max-width: 100%;
}
.statbar__item::before { /* barra vertical da crista, como antes */
content: ""; position: absolute; left: 0; top: 4px; bottom: 4px;
width: 3px; height: auto; order: 0; opacity: .9;
background: var(--brand-light);
-webkit-mask: var(--mark-band) center/100% auto repeat-y;
mask: var(--mark-band) center/100% auto repeat-y;
}
.statbar__num { font-size: clamp(2.4rem, 4.4vw, 3.3rem); line-height: 1; }
.statbar__num small { font-size: .38em; }
.statbar__label { max-width: 24ch; margin-top: 8px; font-size: .97rem; }
.statbar__seal { display: block; } /* o selo volta */
.statbar { padding-top: calc(var(--dobra-y) + 8px); padding-bottom: calc(var(--dobra-y) + 8px); }
/* --- Gestão vira faixa curta: só declaração e CTA ------------------------ */
.gestao--band { padding-top: calc(var(--dobra-y) - 6px); padding-bottom: calc(var(--dobra-y) - 6px); }
.gestao--band .gestao__inner { display: block; max-width: 900px; margin-inline: auto; text-align: center; }
.gestao--band .section-title::after { margin-inline: auto; }
.gestao--band .eyebrow { justify-content: center; }
.gestao--band .gestao__cta { margin-top: 22px; }
/* --- Escopo: cards compactos, na língua do dono do imóvel ---------------- */
.escopo { padding: var(--dobra-y) 0; background: var(--color-bg); }
.escopo__grid {
display: grid; grid-template-columns: repeat(3, 1fr);
gap: 16px; margin-top: 30px;
}
.escopo__card {
padding: 22px 20px; background: var(--color-bg-soft);
border: 1px solid var(--color-line); border-left: 3px solid var(--brand);
border-radius: var(--radius-card);
transition: transform var(--t), box-shadow var(--t), border-color var(--t);
}
.escopo__card:hover { transform: translateY(-3px); box-shadow: var(--shadow-sm); border-left-color: var(--brand-2); }
.escopo__card h3 {
font-family: var(--font-display); font-size: 1.02rem; color: var(--color-ink);
margin-bottom: 8px; line-height: 1.3;
}
.escopo__card p { font-size: .93rem; line-height: 1.55; color: var(--color-text-mute); }
.escopo__nota { margin-top: 20px; font-size: .87rem; color: var(--color-text-mute); opacity: .85; }
@media (max-width: 900px) {
.escopo__grid { grid-template-columns: 1fr 1fr; }
.statbar__grid { grid-template-columns: 1fr; justify-items: start; gap: 26px; }
}
@media (max-width: 560px) { .escopo__grid { grid-template-columns: 1fr; } }
/* ==========================================================================
v10 — CARDS DE ESCOPO EM DESTAQUE
A dobra virou escura para os cards existirem como objeto luminoso. Cada
card tem: borda em degradê animado (mask-composite, não pseudo empilhado),
brilho que segue a entrada, varredura de luz no hover e a marca d'água do P.
========================================================================== */
.escopo { position: relative; isolation: isolate; color: var(--color-on-dark); }
.escopo .section-lead, .escopo__nota--light { color: var(--color-on-dark-mute); }
.escopo__grid { gap: 18px; margin-top: 34px; perspective: 1200px; }
.escopo__card {
position: relative; overflow: hidden; isolation: isolate;
padding: 0; border: 0; border-radius: var(--radius-card);
background: linear-gradient(150deg, rgba(255,255,255,.075), rgba(255,255,255,.02));
backdrop-filter: blur(6px);
transition: transform .45s var(--ease), box-shadow .45s var(--ease);
animation-delay: calc(var(--i) * .18s);
}
/* borda em degradê animado: pinta só a moldura, sem cobrir o conteúdo */
.escopo__card::before {
content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
border-radius: inherit; padding: 1.5px;
background: linear-gradient(115deg, var(--brand-light), var(--brand) 28%, transparent 46%,
transparent 62%, var(--brand-2) 84%, var(--brand-light));
background-size: 260% 260%;
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite: xor; mask-composite: exclude;
animation: bordaFlow 8s ease-in-out infinite alternate;
animation-delay: calc(var(--i) * -1.1s);
opacity: .75; transition: opacity .4s var(--ease);
}
@keyframes bordaFlow { from { background-position: 0% 50%; } to { background-position: 100% 50%; } }
/* brilho de fundo que acende no hover */
.escopo__glow {
position: absolute; inset: -30% -10% auto -10%; height: 70%; z-index: 0;
background: radial-gradient(60% 100% at 30% 0%, rgba(0,184,224,.55), transparent 70%);
opacity: .22; transition: opacity .45s var(--ease), transform .6s var(--ease);
}
/* marca d'água: o P da marca no canto do card */
.escopo__mark {
position: absolute; right: -10px; bottom: -14px; width: 92px; height: 118px; z-index: 0;
background: var(--brand-light);
-webkit-mask: var(--mark-full) center/contain no-repeat;
mask: var(--mark-full) center/contain no-repeat;
opacity: .07; transition: opacity .45s var(--ease), transform .55s var(--ease);
}
/* varredura de luz que atravessa no hover */
.escopo__card::after {
content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
background: linear-gradient(105deg, transparent 38%, rgba(255,255,255,.16) 50%, transparent 62%);
transform: translateX(-120%); transition: transform .75s var(--ease);
}
.escopo__body { position: relative; z-index: 3; padding: 26px 22px 24px; }
.escopo__card h3 {
font-family: var(--font-display); font-size: 1.08rem; color: #fff;
margin-bottom: 10px; line-height: 1.28;
}
.escopo__card p { font-size: .94rem; line-height: 1.58; color: var(--color-on-dark-mute); }
.escopo__card:hover, .escopo__card:focus-within {
transform: translateY(-8px) scale(1.015);
box-shadow: 0 22px 54px rgba(0,20,25,.55), 0 0 0 1px rgba(112,229,255,.22);
}
.escopo__card:hover::before, .escopo__card:focus-within::before { opacity: 1; }
.escopo__card:hover::after, .escopo__card:focus-within::after { transform: translateX(120%); }
.escopo__card:hover .escopo__glow { opacity: .55; transform: translateY(6px); }
.escopo__card:hover .escopo__mark { opacity: .18; transform: translate(-4px, -6px) rotate(-4deg); }
.escopo__card:hover h3 { color: var(--brand-light); }
@media (prefers-reduced-motion: reduce) {
.escopo__card, .escopo__card::before, .escopo__card::after,
.escopo__glow, .escopo__mark { animation: none; transition: none; }
}
/* ==========================================================================
v11
========================================================================== */
/* --- Correção: a regra .escopo (v9) definia fundo branco e vinha DEPOIS de
.brand-flow, então vencia e a dobra ficava clara com texto branco em
cima de branco. Especificidade maior devolve o degradê animado. ------ */
.escopo.brand-flow {
background:
radial-gradient(90% 130% at 12% 0%, rgba(0,184,224,.30), transparent 58%),
radial-gradient(80% 120% at 92% 30%, rgba(0,112,168,.42), transparent 62%),
radial-gradient(70% 110% at 50% 108%, rgba(112,229,255,.20), transparent 60%),
linear-gradient(150deg, var(--color-ink) 0%, #04323C 55%, #063a48 100%);
background-size: 180% 180%, 190% 190%, 170% 170%, 100% 100%;
animation: brandFlow 22s ease-in-out infinite alternate;
}
.escopo.brand-flow .section-title { color: #fff; }
/* --- Portfólio: carrossel manual, quadrado -------------------------------- */
/* o autoplay foi desligado no main.js (speed = 0); as setas e o arrasto
continuam valendo. Aqui só reforçamos a leitura de "isto se navega". */
.marquee { cursor: grab; }
.marquee:active { cursor: grabbing; }
.marquee__item { aspect-ratio: 1 / 1; width: clamp(190px, 17vw, 250px); }
.marquee__nav {
opacity: 1; background: var(--brand); color: var(--color-ink);
box-shadow: 0 10px 26px rgba(0,20,25,.35);
}
.marquee__nav:hover { background: var(--brand-light); }
/* ==========================================================================
v12
========================================================================== */
/* --- Carrossel: as fotos NÃO estavam quadradas --------------------------- */
/* A regra base do clone fixa height: clamp(320px, 42vw, 520px), e altura
explícita vence aspect-ratio. Por isso o 1/1 não pegava. */
.marquee__item {
height: auto; aspect-ratio: 1 / 1;
width: clamp(200px, 18vw, 260px);
}
.marquee__item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.marquee__track { gap: 16px; }
/* --- Como funciona: os cards ocupavam só o miolo da dobra ---------------- */
/* .steps tinha max-width: 920px dentro de um container de 1200px, o que
deixava ~140px vazios de cada lado. Agora a grade preenche a dobra. */
.steps {
max-width: none; width: 100%;
gap: clamp(18px, 2.2vw, 30px);
margin: 34px 0 0;
}
.step { padding: clamp(28px, 2.6vw, 40px) clamp(26px, 2.4vw, 38px); }
.step__title { font-size: clamp(1.08rem, 1.35vw, 1.26rem); }
.step__text { font-size: clamp(.95rem, 1.02vw, 1.02rem); line-height: 1.62; }
.step__ghost { font-size: clamp(4.4rem, 7vw, 7rem); }
@media (max-width: 900px) { .steps { grid-template-columns: 1fr; } }
/* --- v13: fotos do portfólio um pouco maiores, seguem quadradas ---------- */
.marquee__item { width: clamp(250px, 23vw, 330px); }
.marquee__item figcaption { font-size: .88rem; }
/* --- v14: o número fantasma estava sendo decepado ------------------------ */
/* .step tem overflow:hidden e o ghost ficava em top:-26px, ou seja, metade
dele nascia fora do card. Com a fonte maior do v12 o corte ficou evidente.
Agora ele mora inteiro dentro do card, atrás do conteúdo. */
.step__ghost {
top: 12px; right: 18px; bottom: auto;
font-size: clamp(3.4rem, 5.2vw, 5.4rem);
line-height: .86; opacity: .18;
}
.step:hover .step__ghost { opacity: .28; transform: translateY(2px); }
/* ==========================================================================
v15 — A DOBRA DE ESCOPO GANHA IDENTIDADE PRÓPRIA
Ela vinha colada na dobra de risco e com o MESMO brand-flow, então as duas
liam como um bloco escuro só (playbook 14.12). Aqui ela deixa de repetir
o degradê da vizinha: base quase preta, malha de cor em movimento, grade
técnica ao fundo e cards preenchidos em vez de só contornados.
========================================================================== */
.escopo--mesh {
position: relative; isolation: isolate; overflow: hidden;
color: var(--color-on-dark);
background: #01161B;
padding-top: calc(var(--dobra-y) + 14px); padding-bottom: calc(var(--dobra-y) + 14px);
}
/* malha de cor: três manchas girando em tempos diferentes */
.escopo--mesh::before {
content: ""; position: absolute; inset: -20%; z-index: 0; pointer-events: none;
background:
radial-gradient(30% 34% at 18% 26%, rgba(0,184,224,.50), transparent 62%),
radial-gradient(28% 32% at 82% 22%, rgba(112,229,255,.34), transparent 64%),
radial-gradient(34% 38% at 62% 84%, rgba(0,112,168,.55), transparent 66%);
filter: blur(28px);
animation: meshDrift 26s ease-in-out infinite alternate;
}
@keyframes meshDrift {
0% { transform: translate3d(0,0,0) scale(1); }
50% { transform: translate3d(3%,-2%,0) scale(1.08); }
100% { transform: translate3d(-3%,3%,0) scale(1.04); }
}
/* grade técnica: lê como prancheta de engenharia, não como fundo genérico */
.escopo--mesh::after {
content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
background-image:
linear-gradient(rgba(112,229,255,.055) 1px, transparent 1px),
linear-gradient(90deg, rgba(112,229,255,.055) 1px, transparent 1px);
background-size: 64px 64px;
mask: radial-gradient(120% 90% at 50% 40%, #000 30%, transparent 78%);
-webkit-mask: radial-gradient(120% 90% at 50% 40%, #000 30%, transparent 78%);
}
.escopo--mesh > .container { position: relative; z-index: 2; }
.escopo--mesh .section-title { color: #fff; }
.escopo--mesh .escopo__nota--light { color: var(--color-on-dark-mute); }
/* --- cards preenchidos, com degradê próprio e realce por posição --------- */
.escopo--mesh .escopo__card {
background:
linear-gradient(158deg, rgba(0,184,224,.22) 0%, rgba(0,112,168,.14) 46%, rgba(1,22,27,.72) 100%);
box-shadow: inset 0 1px 0 rgba(255,255,255,.10), 0 10px 30px rgba(0,10,14,.45);
}
.escopo--mesh .escopo__card:nth-child(3n+2) {
background: linear-gradient(158deg, rgba(112,229,255,.22) 0%, rgba(0,184,224,.12) 48%, rgba(1,22,27,.72) 100%);
}
.escopo--mesh .escopo__card:nth-child(3n+3) {
background: linear-gradient(158deg, rgba(0,112,168,.30) 0%, rgba(0,184,224,.10) 50%, rgba(1,22,27,.74) 100%);
}
/* número de ordem, que também separa esta dobra da de risco */
.escopo--mesh .escopo__card .escopo__body::before {
content: "0" counter(escopo); counter-increment: escopo;
display: block; font-family: var(--font-display); font-weight: 700;
font-size: .82rem; letter-spacing: .16em; color: var(--brand-light);
opacity: .75; margin-bottom: 12px;
}
.escopo--mesh .escopo__grid { counter-reset: escopo; }
.escopo--mesh .escopo__card:hover {
transform: translateY(-10px) scale(1.02);
box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 26px 60px rgba(0,10,14,.6),
0 0 0 1px rgba(112,229,255,.30);
}
.escopo--mesh .escopo__mark { opacity: .10; }
.escopo--mesh .escopo__card:hover .escopo__mark { opacity: .24; }
/* ==========================================================================
v16 — HERO CENTRALIZADO
O texto deixa de morar na coluna esquerda, então o scrim também muda: era
uma faixa forte à esquerda que abria para a direita, e vira um véu uniforme
com vinheta central. Sem isso o texto centralizado cairia justamente na
parte clara da fachada.
========================================================================== */
.hero--flat .hero__content {
text-align: center;
max-width: min(1000px, 100%);
margin-inline: auto;
}
.hero--flat .hero__headline {
max-width: 22ch; margin-inline: auto;
}
.hero--flat .hero__sub {
max-width: 62ch; margin-inline: auto;
font-size: clamp(.95rem, 1.02vw, 1.04rem); /* menor, como pedido */
line-height: 1.66;
}
.hero--flat .eyebrow--badge { display: inline-flex; justify-content: center; }
.hero--flat .hero__cta { justify-content: center; }
.hero--flat .hero__cue { justify-content: center; margin-inline: auto; }
.hero--flat .hero__cue::before { margin-inline: auto; }
/* véu uniforme + vinheta, no lugar da faixa lateral */
.hero--photo .hero__overlay {
background:
radial-gradient(78% 76% at 50% 46%, rgba(0,18,23,.92) 0%, rgba(0,18,23,.86) 46%, rgba(0,20,25,.66) 78%, rgba(0,22,28,.52) 100%),
linear-gradient(180deg, rgba(0,20,25,.72) 0%, rgba(0,20,25,.34) 38%, rgba(0,20,25,.70) 100%);
}
.hero--photo .hero__bg img { filter: saturate(.95) contrast(1.0) brightness(.80); }
.hero--photo .hero__overlay::after {
background: radial-gradient(38% 50% at 50% 42%, rgba(0,184,224,.16), transparent 72%);
}
/* o painel desfocado acompanha o texto: passa a ser centrado */
.hero--flat .hero__content::before {
left: 50%; right: auto; transform: translateX(-50%);
width: min(1120px, 96%); top: -28px; bottom: -28px;
background: radial-gradient(62% 70% at 50% 50%, rgba(0,16,21,.72) 0%, rgba(0,16,21,.42) 62%, transparent 100%);
filter: blur(22px);
}
@media (max-width: 900px) {
.hero--flat .hero__content::before { width: 118%; }
}
/* ==========================================================================
v17
========================================================================== */
/* quebras fixas do H1 só a partir de 900px: abaixo disso o texto reflui
sozinho, senão a quebra forçada gera linha órfã no celular */
.br-lg { display: none; }
@media (min-width: 900px) { .br-lg { display: inline; } }
.hero--flat .hero__headline { max-width: none; }
/* --- Respiro entre dobras mais curto ainda ------------------------------- */
:root { --dobra-y: clamp(38px, 3.8vw, 56px); }
.hero--flat { padding: calc(var(--header-h) + 44px) 0 48px; }
.gallery__head, .form-head { margin-bottom: 22px; }
.steps { margin-top: 26px; }
.escopo__grid { margin-top: 26px; }
.objections__grid { margin-top: 24px; }
.gallery__cta, .gestao__cta, .experts__cta, .financing__cta { margin-top: 20px; }
.hex-divider, .hex-divider__mark { height: 14px; }
.section-lead { margin-bottom: 0; }
.hero__cue { margin-top: 26px; }
/* --- v18: as três linhas do H1 precisam CABER, senão o navegador requebra -- */
/* A coluna era 1000px e a fonte ia a 58px: a linha mais longa ("sob controle
e prazo para começar a faturar.") não cabia e virava duas. Coluna mais
larga + corpo um pouco menor fazem a sequência pedida fechar em 3 linhas. */
.hero--flat .hero__content { max-width: min(1200px, 100%); }
.hero--flat .hero__headline { font-size: clamp(30px, 3.55vw, 49px); }
.hero--flat .hero__sub { max-width: 58ch; }
/* ==========================================================================
v19 — A FOTO APARECE, O TEXTO CONTINUA LEGÍVEL
Antes: véu radial forte (.92 no centro) cobrindo a fachada inteira. A foto
quase sumia. Agora: a imagem clareia bastante e o escurecimento passa a ser
uma elipse justa ATRÁS DO TEXTO, bem desfocada, mais sombra no próprio
glifo. Assim o contraste vem de onde as letras estão, não da tela toda.
========================================================================== */
.hero--photo .hero__bg img {
filter: saturate(1.06) contrast(1.06) brightness(1.02);
}
/* véu geral bem mais leve: só assenta a imagem, não a apaga */
.hero--photo .hero__overlay {
background:
radial-gradient(86% 82% at 50% 46%, rgba(0,16,21,.50) 0%, rgba(0,16,21,.42) 52%, rgba(0,18,23,.30) 80%, rgba(0,20,25,.26) 100%),
linear-gradient(180deg, rgba(0,18,23,.58) 0%, rgba(0,18,23,.10) 34%, rgba(0,18,23,.52) 100%);
}
.hero--photo .hero__overlay::after {
background: radial-gradient(34% 44% at 50% 40%, rgba(0,184,224,.14), transparent 74%);
}
/* o escurecimento que garante leitura vive colado ao texto */
.hero--flat .hero__content::before {
left: 50%; transform: translateX(-50%);
width: min(1180px, 98%); top: -34px; bottom: -34px;
background:
radial-gradient(52% 46% at 50% 34%, rgba(0,12,16,.90) 0%, rgba(0,12,16,.62) 58%, transparent 100%),
radial-gradient(46% 34% at 50% 74%, rgba(0,12,16,.80) 0%, rgba(0,12,16,.44) 62%, transparent 100%);
filter: blur(30px);
}
/* sombra no glifo: resolve o pixel claro isolado sem escurecer a foto */
.hero__headline { text-shadow: 0 2px 10px rgba(0,12,16,.92), 0 0 34px rgba(0,12,16,.7); }
.hero--flat .hero__sub { text-shadow: 0 1px 8px rgba(0,12,16,.95), 0 0 22px rgba(0,12,16,.75); }
.hero__cue { text-shadow: 0 1px 8px rgba(0,12,16,.9); }
.hero--photo .eyebrow--badge { background: rgba(0,16,21,.72); backdrop-filter: blur(4px); }
/* --- v19.1: o acento e o eyebrow reprovaram; aperta só o foco atrás do texto */
.hero--photo .hero__bg img { filter: saturate(1.05) contrast(1.05) brightness(.93); }
.hero--flat .hero__content::before {
background:
radial-gradient(50% 44% at 50% 33%, rgba(0,10,14,.95) 0%, rgba(0,10,14,.78) 56%, transparent 100%),
radial-gradient(44% 32% at 50% 73%, rgba(0,10,14,.88) 0%, rgba(0,10,14,.56) 62%, transparent 100%);
filter: blur(26px);
}
.hero--photo .eyebrow--badge { background: rgba(0,12,16,.88); }
/* --- v19.2: acento do H1 estava em 2,87 contra mínimo 3,0. Ajuste fino no
foco atrás do texto (a paleta do kit não permite clarear o ciano). --- */
.hero--flat .hero__content::before {
background:
radial-gradient(50% 45% at 50% 33%, rgba(0,10,14,.98) 0%, rgba(0,10,14,.86) 58%, transparent 100%),
radial-gradient(44% 33% at 50% 73%, rgba(0,10,14,.90) 0%, rgba(0,10,14,.60) 64%, transparent 100%);
}
/* --- v19.3: a elipse de cima cobria 50% da largura, mas a 1a linha do H1
tem quase 1200px: as pontas dela caíam fora do foco. Alargada. ------- */
.hero--flat .hero__content::before {
background:
radial-gradient(68% 46% at 50% 33%, rgba(0,10,14,.97) 0%, rgba(0,10,14,.84) 62%, transparent 100%),
radial-gradient(48% 34% at 50% 74%, rgba(0,10,14,.90) 0%, rgba(0,10,14,.58) 64%, transparent 100%);
}