/* ==========================================================================
QUARTEN ARQUITETURA — STYLES
Paleta do MANUAL da Quarten (terracota #B46A4C / oliva #737D5A)
========================================================================== */
:root {
/* ---------------------------------------------------------------------
QUARTEN ARQUITETURA — tokens do kit de marca (Identidade Visual/
kit_preparado). Cores do MANUAL do cliente, nao extraidas da logo.
Trocar a marca = trocar este bloco; o resto do CSS nao muda.
--------------------------------------------------------------------- */
/* Marca */
--color-primary: #B46A4C; /* terracota, cor principal do manual */
--color-primary-strong: #8d5039; /* hover/contraste */
--color-primary-soft: #f6ece7;
--color-olive: #737D5A; /* oliva, cor de apoio do manual */
--color-olive-soft: #e6e9df;
--grad-gold: linear-gradient(135deg, #d5ab9a 0%, #B46A4C 42%, #8d5039 100%);
--grad-navy: linear-gradient(160deg, #3a2a20 0%, #1d110c 55%, #120a06 100%);
--fio-dourado: linear-gradient(90deg, transparent, #B46A4C 30%, #d5ab9a 50%, #B46A4C 70%, transparent);
/* Motivos da marca, INLINE (playbook 15.1: arquivo externo morre em file://).
Dois motivos derivados do arquivo real da logo (15.2):
mark-full = o Q inteiro -> textura de dobra escura, marca d'agua
mark-band = a laje chanfrada -> regua, eyebrow, divisoria */
--mark-full: url('data:image/png;base64,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');
--mark-band: url('data:image/png;base64,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');
--icon-mark: var(--mark-full);
/* Institucional / superficies */
--color-ink: #1d110c;
--color-ink-2: #120a06;
--color-ink-3: #3a2a20;
--color-graphite: #33241b;
--color-slate: #1a1a1a;
/* Neutras (quentes, para casar com a terracota) */
--color-bg: #FFFFFF;
--color-bg-soft: #F7F6F5;
--color-bg-mute: #efeae7;
--color-line: #E6E2E1;
--color-text: #1d110c;
--color-text-mute: #1a1a1a;
--color-on-dark: #f6f1ee;
--color-on-dark-mute: #d8ccc5;
/* Acento */
--color-gold: #B46A4C;
/* Verde = so pontos de conversao (playbook 13.8) */
--color-green: #25d366;
--color-green-deep: #17a34a;
--color-green-light: #3ce07a;
/* Header fixo */
--header-h: 92px;
/* Tipografia — do manual da Quarten.
Display = Trajan Pro (licenciada, embutida em assets/fonts, so maiusculas).
Corpo = Montserrat (Google Fonts). */
/* Titulos em Montserrat: Trajan Pro so tem MAIUSCULAS, e H1 de 20 palavras
em caixa alta nao se le. Trajan fica nos trechos curtos (--font-roman). */
--font-heading: "Montserrat", system-ui, -apple-system, sans-serif;
--font-display: "Montserrat", system-ui, -apple-system, sans-serif;
--font-roman: "Trajan Pro", Georgia, serif;
--font-body: "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
/* Layout */
--container: 1200px;
--container-pad: clamp(20px, 4vw, 40px);
/* raio MEDIDO no simbolo do kit (geometria.radius_px = 4): o Q mistura anel
redondo com cortes retos em chanfro, entao card muito arredondado contraria */
--radius-sm: 4px;
--radius: 4px;
--radius-lg: 4px;
/* Sombras */
--shadow-sm: 0 4px 14px rgba(18, 10, 6, 0.06);
--shadow: 0 12px 40px rgba(18, 10, 6, 0.10);
--shadow-lg: 0 24px 60px rgba(18, 10, 6, 0.16);
--shadow-accent: 0 16px 40px rgba(180, 106, 76, 0.28);
/* Transicoes */
--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 (base do clone). A geometria REAL da Quarten esta no bloco
e o wordmark serifado. Nada de quadrado: cantos suaves e elementos
circulares que ecoam a elipse do logo.
========================================================================== */
.hex { clip-path: none; }
::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); }
/* Eyebrow do hero: texto dourado limpo sobre a foto (sem tarja/caixa) */
.eyebrow--badge {
color: var(--color-primary);
background: none;
-webkit-backdrop-filter: none; backdrop-filter: none;
padding: 0;
margin-bottom: 22px;
box-shadow: none;
text-shadow: 0 2px 14px rgba(0, 0, 0, 0.6);
max-width: 100%;
}
@media (max-width: 600px) {
.eyebrow--badge { white-space: normal; line-height: 1.6; }
}
/* Marcador de TODO eyebrow = simbolo Q da Quarten (ver bloco IDENTIDADE no fim) */
.eyebrow::before {
content: "";
width: 15px; height: 15px;
background-color: currentColor;
-webkit-mask: var(--icon-mark) center / contain no-repeat;
mask: var(--icon-mark) center / contain no-repeat;
flex: 0 0 auto;
opacity: 0.95;
}
.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. */
.section-title .accent::after {
content: "";
position: absolute;
left: 0; right: 0; bottom: -6px;
height: 5px;
background: var(--color-primary);
clip-path: none;
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: none;
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), padrao de pulso das LPs da carteira.
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: none;
pointer-events: none;
}
/* corpo dourado com degradê + brilho (brega quando era chapado) */
.btn--accent::before { z-index: -1; background: var(--grad-gold); transition: filter 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); }
/* brilho suave (sem anel pulsante) */
.btn--accent::after { z-index: -2; background: var(--grad-gold); opacity: 0; }
.btn--green::after { z-index: -2; background: var(--color-green-light); opacity: 0; }
.btn--accent { box-shadow: 0 14px 34px -12px rgba(180, 106, 76, 0.65); }
.btn--accent:hover { box-shadow: 0 18px 40px -12px rgba(180, 106, 76, 0.8); }
.btn--accent:hover::before { filter: brightness(1.07) saturate(1.05); }
.btn--green:hover::before { filter: brightness(1.08); }
.btn--ghost {
background: var(--color-bg-mute);
color: var(--color-ink);
}
.btn--ghost:hover { background: #e6ded9; }
/* 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, #3a2a20 0%, #1d110c 55%, #120a06 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%, #d5ab9a 50%, var(--color-primary) 70%, transparent);
opacity: 0.8;
}
.site-header.is-solid {
background: linear-gradient(115deg, rgba(29, 17, 12,0.92) 0%, rgba(18, 10, 6,0.94) 60%, rgba(18, 10, 6,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: none;
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;
background: var(--grad-navy);
overflow: hidden;
}
.hero__bg picture { display: block; width: 100%; height: 100%; }
.hero__bg img {
width: 100%; height: 100%;
object-fit: cover;
object-position: center;
display: block;
transform-origin: center;
animation: heroZoom 20s var(--ease) infinite alternate;
}
@media (prefers-reduced-motion: reduce) {
.hero__bg img { animation: none; }
}
.hero__bg-video {
width: 100%; height: 100%;
object-fit: cover;
object-position: center;
display: block;
}
.hero__overlay {
position: absolute;
inset: 0;
/* escuro à esquerda (texto) e mais leve à direita (casa aparece mais) */
background:
linear-gradient(90deg, rgba(18, 10, 6, 0.90) 0%, rgba(18, 10, 6, 0.70) 34%, rgba(18, 10, 6, 0.30) 66%, rgba(18, 10, 6, 0.18) 100%),
linear-gradient(180deg, transparent 45%, rgba(18, 10, 6, 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(18, 10, 6, 0.88) 0%,
rgba(18, 10, 6, 0.74) 34%,
rgba(18, 10, 6, 0.30) 60%,
rgba(18, 10, 6, 0.20) 78%,
rgba(18, 10, 6, 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;
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-items: center;
gap: clamp(22px, 4vw, 56px);
width: 100%;
}
.hero__text { min-width: 0; max-width: 640px; }
/* Card do reels (9:16) na primeira dobra */
.hero__reel {
position: relative;
flex: 0 0 auto;
width: clamp(228px, 23vw, 306px);
aspect-ratio: 9 / 16;
overflow: hidden;
background: #0a0503;
border: 1px solid rgba(180, 106, 76, 0.45);
box-shadow: 0 34px 70px -24px rgba(0, 0, 0, 0.75), 0 0 0 6px rgba(18, 10, 6, 0.35);
}
.hero__reel-video { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Sobreposição com play + chamada (some ao clicar) */
.hero__reel-play {
position: absolute; inset: 0;
display: flex; flex-direction: column;
align-items: center; justify-content: center;
gap: 16px; padding: 20px;
background: linear-gradient(180deg, rgba(16, 9, 6,0.35) 0%, rgba(16, 9, 6,0.15) 45%, rgba(16, 9, 6,0.72) 100%);
color: #fff; cursor: pointer; text-align: center;
transition: opacity var(--t);
}
.hero__reel-playic {
width: 62px; height: 62px; border-radius: 50%;
display: grid; place-items: center;
background: var(--grad-gold); color: var(--color-ink);
box-shadow: 0 12px 30px -8px rgba(0,0,0,0.6);
transition: transform var(--t-fast);
}
.hero__reel-playic svg { width: 26px; height: 26px; margin-left: 3px; }
.hero__reel-play:hover .hero__reel-playic { transform: scale(1.08); }
.hero__reel-caption {
font-family: var(--font-display); font-weight: 600;
font-size: clamp(14px, 1.4vw, 16px); line-height: 1.3;
max-width: 15ch; text-shadow: 0 2px 10px rgba(0,0,0,0.7);
}
.hero__reel.is-playing .hero__reel-play { display: none; }
.hero__reel-mute {
display: none;
place-items: center;
position: absolute; right: 12px; bottom: 12px;
width: 40px; height: 40px; border-radius: 50%;
background: rgba(18, 10, 6, 0.72); color: #fff;
border: 1px solid rgba(255, 255, 255, 0.28);
-webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
cursor: pointer; transition: transform var(--t-fast), background var(--t), color var(--t);
}
.hero__reel.is-playing .hero__reel-mute { display: grid; }
.hero__reel-mute:hover { transform: scale(1.06); background: var(--color-primary); color: var(--color-ink); }
.hero__reel-mute svg { width: 20px; height: 20px; }
.hero__reel-mute .ic-sound { display: none; }
.hero__reel.is-unmuted .hero__reel-mute .ic-muted { display: none; }
.hero__reel.is-unmuted .hero__reel-mute .ic-sound { display: block; }
@media (max-width: 900px) {
.hero__content { grid-template-columns: 1fr; justify-items: start; }
.hero__reel { width: clamp(200px, 58vw, 260px); margin-top: 10px; }
}
.hero__headline {
font-family: var(--font-display);
font-weight: 600;
font-size: clamp(26px, 3.4vw, 42px);
line-height: 1.2;
letter-spacing: -0.015em;
color: #fff;
margin-bottom: 26px;
max-width: 26ch;
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 { content: none; display: none; }
.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 "Conheca a Quarten" — 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: none;
background: rgba(180, 106, 76, 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: radial-gradient(ellipse 90% 130% at 50% 8%, #1d110c 0%, #120a06 100%);
color: #fff;
padding: 36px 0;
position: relative;
z-index: 2;
}
/* Linha dourada que divide a seção da anterior (na borda de cima) */
.proof::before {
content: "";
position: absolute;
inset: 0 0 auto 0;
height: 2px;
background: var(--fio-dourado);
opacity: 0.9;
}
.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(180, 106, 76, 0.42));
animation: sealPulse 3.6s var(--ease) infinite alternate;
}
@keyframes sealPulse {
from { filter: drop-shadow(0 6px 18px rgba(180, 106, 76, 0.30)); }
to { filter: drop-shadow(0 6px 30px rgba(180, 106, 76, 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(180, 106, 76,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:
radial-gradient(60% 80% at 85% 0%, rgba(180, 106, 76,0.10), transparent 60%),
linear-gradient(170deg, #3a2a20 0%, #1d110c 45%, #120a06 100%);
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(180, 106, 76, 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(180, 106, 76, 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(180, 106, 76, 0.4);
background: rgba(180, 106, 76, 0.06);
}
.offer__card--featured {
background: linear-gradient(160deg, rgba(180, 106, 76, 0.12), rgba(180, 106, 76, 0.02));
border-color: rgba(180, 106, 76, 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: 8px;
width: 8px; height: 8px;
border-radius: 50%;
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(180, 106, 76,0.45);
background: rgba(180, 106, 76,0.06);
}
.financing__card--featured { border-color: rgba(180, 106, 76,0.4); background: linear-gradient(180deg, rgba(180, 106, 76,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: none;
}
.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: 7px; width: 7px; height: 7px; border-radius: 50%; background: var(--color-primary); }
.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: none;
filter: drop-shadow(0 24px 46px rgba(18, 10, 6, 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: none;
}
.experts__caption {
position: absolute;
left: 18px; right: 18px; bottom: 20px;
z-index: 2;
background: rgba(18, 10, 6, 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: none;
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: none;
cursor: pointer;
filter: drop-shadow(0 8px 18px rgba(180, 106, 76,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(18, 10, 6, 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(18, 10, 6, 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;
clip-path: none;
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(180, 106, 76,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(18, 10, 6,0.11);
border-color: rgba(180, 106, 76,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: none;
box-shadow: 0 10px 24px rgba(180, 106, 76,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(180, 106, 76,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(180, 106, 76,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;
background: var(--grad-navy);
color: #fff;
font-family: var(--font-display); font-weight: 700; font-size: 22px;
box-shadow: inset 0 0 0 2px rgba(180, 106, 76,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(180, 106, 76,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(18, 10, 6,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(180, 106, 76,0.4);
box-shadow: 0 14px 32px rgba(18, 10, 6,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(180, 106, 76,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: projeto so de imagem 3D x Quarten ===== */
.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(180, 106, 76,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(180, 106, 76,0.16); }
50% { box-shadow: 0 22px 56px rgba(180, 106, 76,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(180, 106, 76,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: none;
}
.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: none;
}
.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: var(--color-primary-strong); 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;
}
.rb__ic svg { width: 13px; height: 13px; }
.rb__txt {
position: relative;
font-size: clamp(15px, 1.5vw, 16px); line-height: 1.4;
color: #1a1a1a; 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(180, 106, 76, 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(180, 106, 76, 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(180, 106, 76, 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: 0;
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: #9c8d85; }
.form__field input:focus,
.form__field select:focus {
outline: none;
border-color: var(--color-primary);
box-shadow: 0 0 0 4px rgba(180, 106, 76, 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: 0;
font-size: 14px;
text-align: center;
}
.form__feedback.is-success {
background: rgba(180, 106, 76, 0.12);
color: var(--color-ink);
border: 1px solid rgba(180, 106, 76, 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: none;
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: none;
}
.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: #9c8d85; }
.form-group input:focus, .form-group select:focus {
outline: 0; border-color: var(--color-primary); box-shadow: 0 0 0 4px rgba(180, 106, 76,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: #e3dbd6; 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(180, 106, 76,0.5));
}
.hex-divider::after { transform: scaleX(-1); }
/* Marca do divisor: sobrescrita no bloco IDENTIDADE QUARTEN (laje chanfrada) */
.hex-divider__mark {
width: 32px; height: 14px;
border: 1.6px solid var(--color-primary);
border-radius: 50%;
background: none;
transform: rotate(-16deg);
flex: 0 0 auto;
}
.hex-divider__mark--sm { display: none; }
/* 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: none;
background-size: 56px 64px;
}
/* Rodapé enxuto: sem navegação e sem contato direto (o caminho é o funil) */
.site-footer {
background: var(--grad-navy);
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(110px, 11vw, 138px);
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(180, 106, 76,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);
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: #120a06;
clip-path: none;
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(18, 10, 6, 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(18, 10, 6,0.72); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); animation: popupFade 0.3s var(--ease); }
.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); }
@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: #9c8d85; 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: none;
display: grid; place-items: center; margin: 0 auto 14px;
background: rgba(180, 106, 76,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,
.form__field select.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(180, 106, 76,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; }
}
/* ============================================================== */
/* AUTORIDADE — 3 números reais (+150 / +10 anos / +25 mil m²) */
/* navy + dourado, ícones da marca, sem logo */
/* ============================================================== */
.proof { padding: clamp(52px, 7vw, 88px) 0; }
.proof__stats {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: clamp(18px, 3vw, 40px);
max-width: 920px;
margin: 0 auto;
}
.stat {
position: relative;
display: flex; flex-direction: column; align-items: center;
text-align: center;
gap: 8px;
padding: 0 clamp(8px, 2vw, 22px);
}
.stat + .stat::before {
content: "";
position: absolute; left: 0; top: 12%;
width: 1px; height: 76%;
background: linear-gradient(180deg, transparent, rgba(180, 106, 76, 0.38), transparent);
}
.stat__icon {
height: 38px;
display: inline-flex; align-items: center; justify-content: center;
color: var(--color-primary);
margin-bottom: 8px;
}
.stat__icon svg { width: 34px; height: 34px; }
.stat__num {
font-family: var(--font-display); font-weight: 700;
font-size: clamp(40px, 5.6vw, 62px); line-height: 0.95;
letter-spacing: -0.03em;
display: inline-flex; align-items: baseline;
filter: drop-shadow(0 2px 3px rgba(0,0,0,0.38));
}
/* Ouro polido igual ao wordmark da logo: brilho no terço superior, bronze na base
(cores amostradas do logo: #e2c0b2 highlight -> #a07f4b sombra), transição LISA */
.stat__num, .stat__num span {
background: linear-gradient(180deg,
#cfa08b 0%, #e2c0b2 24%, #dcb5a4 44%,
#c08a71 66%, #8d5039 84%, #9c7b45 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
}
.stat__unit {
font-size: 0.42em; font-weight: 600; letter-spacing: 0.02em;
margin-left: 6px;
}
.stat__label {
font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase;
color: var(--color-on-dark-mute); font-weight: 600;
}
.proof__note {
margin: clamp(30px, 4vw, 48px) auto 0;
max-width: 62ch; text-align: center;
font-size: clamp(16px, 1.5vw, 19px);
color: var(--color-on-dark); line-height: 1.6;
}
.proof__note strong { color: #fff; font-weight: 600; }
.proof__note .proof__hl { color: var(--color-primary); font-weight: 700; }
@media (max-width: 620px) {
.proof__stats { grid-template-columns: 1fr; gap: 26px; }
.stat + .stat::before { display: none; }
.stat { padding: 18px 0; border-top: 1px solid rgba(180, 106, 76, 0.18); }
.stat:first-child { border-top: 0; }
}
/* ============================================================== */
/* GEOMETRIA base do clone. A da Quarten (anel + chanfro) vem no fim do arquivo */
/* ============================================================== */
/* Superfícies com cantos RETOS (arquitetônico, como o prédio da logo) */
.financing__img, .financing__card img, .experts__photo img,
.marquee__item, .marquee__item img { overflow: hidden; }
/* Acentos circulares — únicos elementos curvos (ecoam a elipse dourada) */
.objection__icon, .step__icon { border-radius: 50%; }
.hero__cue-chevron { border-radius: 50%; width: 34px; height: 34px; }
/* FAB do WhatsApp continua redondo */
.wa-fab, .whatsapp-fab, .fab, [class*="whats"] { border-radius: 50%; }
/* Foto da socia ja vem tratada e recortada pela skill tratamento-acervo */
.experts__photo img { aspect-ratio: auto; object-fit: cover; object-position: center top; }
/* ============================================================== */
/* TIPOGRAFIA base do clone. A da Quarten (Montserrat + Trajan) vem no fim */
/* ============================================================== */
h1, h2, h3,
.hero__headline,
.section-title,
.financing__type,
.step__title {
font-family: var(--font-heading);
font-weight: 500;
letter-spacing: 0;
}
/* Playfair arejada: peso leve + entrelinha com respiro (evita "amontoada") */
.hero__headline {
font-weight: 500;
line-height: 1.32;
letter-spacing: 0.004em;
font-size: clamp(23px, 2.9vw, 37px);
max-width: 30ch;
}
.hero__headline .accent { font-weight: 600; }
.section-title { line-height: 1.2; font-weight: 600; letter-spacing: 0; }
.financing__type, .step__title { font-weight: 600; }
/* ============================================================== */
/* BARRA DE ANÚNCIO (antes do cabeçalho) */
/* ============================================================== */
:root { --topbar-h: 36px; }
.topbar {
position: fixed; top: 0; left: 0; right: 0;
height: var(--topbar-h); z-index: 1000;
display: flex; align-items: center; justify-content: center;
padding: 0 16px;
background: linear-gradient(90deg, #100906 0%, #12142e 50%, #100906 100%);
border-bottom: 1px solid rgba(180, 106, 76, 0.30);
}
.topbar__text {
font-family: var(--font-display);
font-size: clamp(10px, 1vw, 12px);
font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase;
color: var(--color-primary);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* header desce abaixo da barra */
.site-header { top: var(--topbar-h); }
.read-progress { top: calc(var(--topbar-h) + var(--header-h)); z-index: 899; }
.hero { padding-top: calc(var(--topbar-h) + var(--header-h) + 44px); }
html { scroll-padding-top: calc(var(--topbar-h) + var(--header-h) + 16px); }
@media (max-width: 600px) {
.topbar__text { letter-spacing: 0.1em; }
}
/* ============================================================== */
/* DEPOIMENTOS — cards premium sobre navy */
/* ============================================================== */
.testi {
position: relative;
background: radial-gradient(ellipse 90% 130% at 50% 6%, #1d110c 0%, #120a06 100%);
color: #fff;
padding: clamp(62px, 8vw, 100px) 0;
}
.testi::before {
content: ""; position: absolute; inset: 0 0 auto 0; height: 2px;
background: var(--fio-dourado); opacity: 0.9;
}
.testi .section-title { max-width: 24ch; margin-bottom: clamp(30px, 4vw, 46px); }
.testi__grid {
display: grid; grid-template-columns: repeat(2, 1fr);
gap: clamp(16px, 2vw, 26px);
}
.testi__card {
margin: 0;
display: flex; flex-direction: column; gap: 14px;
background: rgba(255, 255, 255, 0.045);
border: 1px solid rgba(180, 106, 76, 0.28);
padding: clamp(22px, 2.4vw, 34px);
transition: transform var(--t), border-color var(--t), background var(--t);
}
.testi__card:hover { transform: translateY(-4px); border-color: rgba(180, 106, 76, 0.55); background: rgba(255, 255, 255, 0.06); }
.testi__stars { color: var(--color-primary); letter-spacing: 4px; font-size: 15px; }
.testi__text {
margin: 0; font-size: clamp(15px, 1.45vw, 17px); line-height: 1.62;
color: rgba(255, 255, 255, 0.9);
}
.testi__text::before {
content: "“"; color: var(--color-primary);
font-family: var(--font-heading); font-size: 1.5em; line-height: 0;
margin-right: 3px; vertical-align: -0.2em;
}
.testi__who { display: flex; flex-direction: column; gap: 2px; margin-top: auto; padding-top: 4px; }
.testi__who strong { font-family: var(--font-heading); color: var(--color-primary); font-weight: 600; font-size: 16px; }
.testi__who span { font-size: 11.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-on-dark-mute); }
@media (max-width: 720px) {
.testi__grid { grid-template-columns: 1fr; }
}
/* ============================================================== */
/* DEPOIMENTOS — estilo print de WhatsApp (conteúdo real) */
/* ============================================================== */
.testi__grid { align-items: start; }
.wa {
margin: 0; display: flex; flex-direction: column;
overflow: hidden;
border: 1px solid rgba(180, 106, 76, 0.30);
box-shadow: 0 22px 46px -18px rgba(0, 0, 0, 0.6);
}
.wa__top {
display: flex; align-items: center; gap: 10px;
padding: 9px 14px;
background: #f2eeec; color: #17100c;
border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}
.wa__back { font-size: 22px; line-height: 1; color: #54656f; margin-right: 2px; }
.wa__av {
width: 32px; height: 32px; border-radius: 50%;
background: linear-gradient(135deg, #3a2a20, #1d110c); color: var(--color-primary);
display: grid; place-items: center; font-weight: 700; font-size: 14px;
}
.wa__name { font-weight: 600; font-size: 15px; }
.wa__chat {
flex: 1; padding: 16px 14px 18px;
background-color: #e8ddd7;
background-image: radial-gradient(rgba(0,0,0,0.03) 1px, transparent 1px);
background-size: 22px 22px;
display: flex; flex-direction: column; gap: 10px;
}
.wa__bub {
max-width: 90%; padding: 8px 11px 5px;
border-radius: 9px; font-size: 14.5px; line-height: 1.45;
color: #17100c; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.13);
}
.wa__bub p { margin: 0; }
.wa__bub time { display: block; text-align: right; font-size: 11px; color: #667781; margin-top: 2px; }
.wa__bub--in { background: #fff; align-self: flex-start; border-top-left-radius: 2px; }
.wa__bub--out { background: #d9fdd3; align-self: flex-end; border-top-right-radius: 2px; }
.wa__bub--out time { color: #4a9d6b; }
/* ============================================================== */
/* DEPOIMENTOS — vídeo real (9:16) + prints reais (masonry) */
/* ============================================================== */
.testi__lead {
display: grid;
grid-template-columns: minmax(272px, 330px) 1fr;
gap: clamp(20px, 3vw, 44px);
align-items: start;
}
.testi__video { margin: 0; }
.testi__video video {
width: 100%; aspect-ratio: 9 / 16;
object-fit: cover; display: block; background: #0a0503;
border: 1px solid rgba(180, 106, 76, 0.35);
box-shadow: 0 26px 52px -20px rgba(0, 0, 0, 0.65);
}
.testi__video figcaption {
margin-top: 11px; text-align: center;
font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase;
color: var(--color-on-dark-mute);
}
.testi__prints { columns: 2; column-gap: 16px; }
.testi__print { display: block; break-inside: avoid; margin: 0 0 16px; }
.testi__print img {
width: 100%; height: auto; display: block;
border: 1px solid rgba(180, 106, 76, 0.28);
box-shadow: 0 14px 30px -14px rgba(0, 0, 0, 0.55);
transition: transform var(--t), border-color var(--t);
}
.testi__print:hover img { transform: translateY(-3px); border-color: rgba(180, 106, 76, 0.6); }
@media (max-width: 860px) {
.testi__lead { grid-template-columns: 1fr; }
.testi__video { max-width: 300px; margin: 0 auto; }
}
@media (max-width: 520px) {
.testi__prints { columns: 1; }
}
/* ---- Prints em CARROSSEL (um por vez) ---- */
.testi__carousel { position: relative; min-width: 0; }
.testi__track {
display: flex; overflow-x: auto;
scroll-snap-type: x mandatory; scroll-behavior: smooth;
scrollbar-width: none; border-radius: 0;
}
.testi__track::-webkit-scrollbar { display: none; }
.testi__print {
flex: 0 0 100%; scroll-snap-align: center;
height: clamp(400px, 52vh, 540px);
display: grid; place-items: center; margin: 0;
background: #f2ebe7; overflow: hidden;
border: 1px solid rgba(180, 106, 76, 0.30);
box-shadow: none;
}
.testi__print img {
max-width: 100%; max-height: 100%; width: auto; height: auto;
object-fit: contain; border: 0; box-shadow: none;
}
.testi__print:hover img { transform: none; }
.testi__nav {
position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
width: 44px; height: 44px; border-radius: 50%;
display: grid; place-items: center; cursor: pointer; border: 0;
background: var(--color-primary); color: var(--color-ink);
box-shadow: 0 10px 24px -8px rgba(0, 0, 0, 0.6);
transition: transform var(--t-fast), filter var(--t);
}
.testi__nav:hover { filter: brightness(1.07); transform: translateY(-50%) scale(1.07); }
.testi__nav svg { width: 22px; height: 22px; }
.testi__nav--prev { left: -14px; }
.testi__nav--next { right: -14px; }
@media (max-width: 520px) {
.testi__nav { width: 38px; height: 38px; }
.testi__nav--prev { left: -8px; }
.testi__nav--next { right: -8px; }
}
/* ---- Carrossel único: vídeo + prints na MESMA altura (profissional) ---- */
.testi__track { gap: 18px; padding: 2px 2px 6px; align-items: stretch; }
.testi__slide {
flex: 0 0 auto;
height: clamp(360px, 52vh, 440px);
scroll-snap-align: start; margin: 0; overflow: hidden;
border: 1px solid rgba(180, 106, 76, 0.32);
box-shadow: 0 18px 38px -18px rgba(0, 0, 0, 0.6);
background: #0d1330;
}
.testi__slide--video { aspect-ratio: 9 / 16; background: #0a0503; }
.testi__slide--video video { width: 100%; height: 100%; object-fit: cover; display: block; }
.testi__print { aspect-ratio: 4 / 5; display: block; }
.testi__print img { width: 100%; height: 100%; object-fit: cover; display: block; border: 0; box-shadow: none; }
.testi__print:hover img { transform: none; }
.testi__carousel { padding: 0 6px; }
@media (max-width: 560px) {
.testi__slide { height: clamp(340px, 62vw, 400px); }
}
/* ---- Vídeo SEPARADO (esquerda) + carrossel de prints (direita) ---- */
.testi__lead {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
gap: clamp(20px, 3vw, 44px);
align-items: start;
}
.testi__video { margin: 0; flex-shrink: 0; }
.testi__video video {
height: clamp(360px, 52vh, 440px); width: auto; aspect-ratio: 9 / 16;
object-fit: cover; display: block; background: #0a0503;
border: 1px solid rgba(180, 106, 76, 0.35);
box-shadow: 0 22px 46px -18px rgba(0, 0, 0, 0.65);
}
.testi__video figcaption {
margin-top: 11px; text-align: center;
font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase;
color: var(--color-on-dark-mute);
}
@media (max-width: 820px) {
.testi__lead { grid-template-columns: 1fr; justify-items: center; }
.testi__carousel { width: 100%; }
}
/* ---- Prints rolando sozinhos (marquee) + frase na capa do vídeo ---- */
.testi__carousel { overflow: hidden; padding: 0; }
.testi__track {
display: flex; gap: 18px; width: max-content;
overflow: visible; scroll-snap-type: none;
animation: testiRoll 34s linear infinite;
}
.testi__carousel:hover .testi__track { animation-play-state: paused; }
@keyframes testiRoll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .testi__track { animation: none; } }
.testi__video { position: relative; }
.testi__vlabel {
position: absolute; left: 0; right: 0; bottom: 0; margin: 0;
padding: 42px 14px 14px;
background: linear-gradient(transparent, rgba(10, 5, 3, 0.9));
color: #fff; text-align: center;
font-family: var(--font-display); font-size: 12px;
letter-spacing: 0.14em; text-transform: uppercase;
pointer-events: none; transition: opacity 0.3s var(--ease);
}
.testi__video.is-playing .testi__vlabel { opacity: 0; }
/* ============================================================== */
/* COMPARACAO: projeto so de imagem (X) x Quarten (check) */
/* ============================================================== */
.risk-band .section-title { max-width: 22ch; margin-bottom: clamp(6px, 1vw, 12px); }
.compare {
display: grid; grid-template-columns: 1fr 1fr;
gap: clamp(16px, 2.4vw, 26px);
margin-top: clamp(26px, 4vw, 44px);
align-items: start;
}
.compare__col { padding: clamp(24px, 2.6vw, 34px); }
.compare__col--bad {
background: #F7F6F5; border: 1px solid var(--color-line);
}
.compare__col--good {
color: #fff; position: relative;
background: linear-gradient(162deg, #3a2a20 0%, #1d110c 55%, #120a06 100%);
border: 1px solid rgba(180, 106, 76, 0.42);
box-shadow: 0 28px 54px -24px rgba(18, 10, 6, 0.55);
}
.compare__col--good::before {
content: ""; position: absolute; inset: 0 0 auto 0; height: 2px;
background: var(--fio-dourado); opacity: 0.9;
}
.compare__head {
font-family: var(--font-heading); font-weight: 600;
font-size: clamp(17px, 2vw, 21px); margin: 0 0 18px;
letter-spacing: -0.01em;
}
.compare__col--bad .compare__head { color: #c0392b; }
.compare__col--good .compare__head { color: var(--color-primary); }
.compare__list { display: flex; flex-direction: column; gap: 13px; margin: 0; padding: 0; }
.compare__item {
display: flex; gap: 12px; align-items: flex-start;
font-size: clamp(14px, 1.5vw, 16px); line-height: 1.42;
}
.compare__col--bad .compare__item { color: #1a1a1a; }
.compare__col--good .compare__item { color: rgba(255, 255, 255, 0.92); }
.compare__ic {
flex: 0 0 auto; width: 24px; height: 24px; border-radius: 50%;
display: grid; place-items: center; margin-top: 1px;
}
.compare__ic svg { width: 13px; height: 13px; }
.compare__col--bad .compare__ic { background: #c0392b; color: #fff; }
.compare__col--good .compare__ic {
background: rgba(180, 106, 76, 0.16); color: var(--color-primary);
border: 1px solid rgba(180, 106, 76, 0.5);
}
.risk-band__cta { margin-top: clamp(26px, 4vw, 40px); text-align: center; }
@media (max-width: 720px) {
.compare { grid-template-columns: 1fr; }
}
/* ---- Refino da comparação: alturas iguais + selo + VS ---- */
.compare { position: relative; align-items: stretch; }
.compare__col { display: flex; flex-direction: column; position: relative; }
.compare__col--good { padding-top: clamp(32px, 3.2vw, 42px); }
.compare__tag {
position: absolute; top: 0; left: clamp(24px, 2.6vw, 34px);
transform: translateY(-50%);
background: var(--grad-gold); color: var(--color-ink);
font-family: var(--font-display); font-weight: 700;
font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
padding: 7px 15px; white-space: nowrap;
box-shadow: 0 8px 20px -6px rgba(180, 106, 76, 0.65);
}
.compare__vs {
position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
z-index: 5; width: 54px; height: 54px; border-radius: 50%;
display: grid; place-items: center;
background: #fff; color: var(--color-ink);
border: 2px solid var(--color-primary);
font-family: var(--font-heading); font-weight: 700; font-size: 17px;
box-shadow: 0 12px 28px -8px rgba(0, 0, 0, 0.4);
}
.compare__col--bad .compare__item { color: #3a3a3a; }
.compare__col--bad .compare__head { opacity: 0.92; }
@media (max-width: 720px) {
.compare__vs { display: none; }
.compare__col--good { padding-top: clamp(30px, 8vw, 40px); }
}
/* ---- Comparação estilo referência (tags, ícones flat, divisórias, CTA no card) ---- */
.compare__col--good::before { display: none; }
.compare__col--good { padding-top: clamp(24px, 2.6vw, 34px); }
.compare__tag {
position: static; transform: none; align-self: flex-start;
margin: 0 0 16px; box-shadow: none; border-radius: 4px;
font-family: var(--font-display); font-weight: 700;
font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
padding: 6px 13px; white-space: nowrap; background: none; color: inherit;
}
.compare__tag--bad { background: rgba(192, 57, 43, 0.10); color: #c0392b; }
.compare__tag--good { background: rgba(180, 106, 76, 0.16); color: var(--color-primary); border: 1px solid rgba(180, 106, 76, 0.4); }
.compare__list { gap: 0; }
.compare__item { gap: 13px; align-items: flex-start; padding: 13px 0; margin: 0; }
.compare__item:first-child { padding-top: 2px; }
.compare__item + .compare__item { border-top: 1px solid; }
.compare__col--bad .compare__item + .compare__item { border-color: rgba(192, 57, 43, 0.15); }
.compare__col--good .compare__item + .compare__item { border-color: rgba(255, 255, 255, 0.09); }
.compare__ic { width: auto; height: auto; background: none; border: 0; border-radius: 0; margin-top: 2px; }
.compare__ic svg { width: 19px; height: 19px; }
.compare__col--bad .compare__ic { color: #c0392b; }
.compare__col--good .compare__ic { color: var(--color-primary); }
.compare__col--good .btn { margin-top: clamp(22px, 2.4vw, 30px); }
/* ícones flat (vence a regra antiga do círculo/quadrado) */
.compare__col--bad .compare__ic,
.compare__col--good .compare__ic {
background: none !important; border: 0 !important;
width: auto; height: auto; border-radius: 0; place-items: start;
}
.compare__col--bad .compare__ic { color: #c0392b; }
.compare__col--good .compare__ic { color: var(--color-primary); }
.compare__ic svg { width: 20px; height: 20px; }
/* ==========================================================================
POPUP DE LEAD: formulário em 2 etapas (card claro)
========================================================================== */
.steps-indicator--popup { max-width: 100%; margin: 0 0 18px; }
.steps-indicator--popup .step-circle { background: rgba(18, 10, 6,0.10); color: #1d110c; }
.steps-indicator--popup .step-circle.active { background: var(--color-primary); color: var(--color-ink); }
.steps-indicator--popup .step-circle.complete { background: var(--color-green); color: #fff; }
.steps-indicator--popup .step-label { color: #5a6472; }
.steps-indicator--popup .step-item.active .step-label { color: #1d110c; }
.steps-indicator--popup .step-connector { background: rgba(18, 10, 6,0.12); }
.popup-step { display: none; }
.popup-step.active { display: block; animation: popupStepIn .28s var(--ease); }
@keyframes popupStepIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.popup-step__actions { display: flex; align-items: center; gap: 12px; margin-top: 4px; }
.popup-step__actions .btn { flex: 1 1 auto; }
.popup-back {
flex: 0 0 auto; background: none; border: 0; cursor: pointer;
color: #1d110c; font-family: inherit; font-weight: 600; font-size: 14px;
padding: 12px 6px; transition: opacity var(--t);
}
.popup-back:hover { opacity: .62; }
/* ==========================================================================
Seletor de país + WhatsApp (form oficial e popup)
========================================================================== */
.tel-row { display: flex; gap: 8px; align-items: stretch; }
.tel-row .tel-country { flex: 0 0 auto; width: auto; max-width: 42%; min-width: 96px; padding-right: 26px; }
.tel-row input { flex: 1 1 auto; min-width: 0; }
@media (max-width: 380px) {
.tel-row .tel-country { max-width: 46%; min-width: 84px; font-size: 13px; }
}
/* ==========================================================================
IDENTIDADE QUARTEN — o simbolo vira SISTEMA
--------------------------------------------------------------------------
O bloco abaixo e o que faz a pagina parecer da Quarten, e nao um template
repintado. Duas decisoes mandam em tudo:
1. A marca tem DOIS motivos derivados do arquivo real da logo (playbook 15.2),
os dois inline em data URI no :root (15.1, senao somem em file:// e no PDF
que o cliente usa pra avaliar):
--mark-full o Q inteiro -> marcador de eyebrow, textura, divisoria
--mark-band a laje chanfrada -> regua sob titulo, faixa entre dobras
2. A geometria sai do desenho medido: o Q e um ANEL redondo cortado por
CHANFROS retos. Por isso conviverem, aqui, circulo nos badges e chanfro
nas quinas dos cards. Raio 4px veio medido do arquivo (geometria.radius_px).
========================================================================== */
/* Trajan Pro: fonte do manual, licenciada e sem versao web, entao vai por
@font-face a partir do arquivo que o proprio cliente entregou. So tem
MAIUSCULAS, por isso e usada apenas em trecho curto (eyebrow, kicker). */
@font-face {
font-family: "Trajan Pro";
src: url("../fonts/trajan-pro.otf") format("opentype");
font-weight: 400;
font-display: swap;
}
/* -------------------------------------------------------------------------
Eyebrow: o wordmark da marca ecoa aqui (Trajan, caixa alta, bem espacada),
e o marcador e o SIMBOLO Q, nunca um quadrado ou um icone de biblioteca.
------------------------------------------------------------------------- */
.eyebrow,
.step__kicker,
.compare__tag,
.stat__unit,
.site-footer__dev {
font-family: var(--font-roman);
text-transform: uppercase;
letter-spacing: 0.16em;
}
.eyebrow::before {
width: 16px; height: 16px;
-webkit-mask: var(--mark-full) center / contain no-repeat;
mask: var(--mark-full) center / contain no-repeat;
opacity: 1;
}
/* -------------------------------------------------------------------------
Regua sob o titulo de secao = a LAJE CHANFRADA da base do Q, tileando.
NASCE com largura (playbook 15.3): a animacao so amplia, nunca cria. Sem
isso ela some em print e em PDF, que e como o cliente costuma avaliar.
------------------------------------------------------------------------- */
.section-title::after {
content: "";
display: block;
width: 74px;
max-width: 132px;
height: 9px;
margin-top: 18px;
background: var(--color-primary);
-webkit-mask: var(--mark-band) left center / auto 100% repeat-x;
mask: var(--mark-band) left center / auto 100% repeat-x;
transition: width var(--t-slow);
}
.section-title--light::after { background: var(--color-primary); }
.experts__copy .section-title::after,
.form-head .section-title::after { margin-left: 0; }
[data-reveal].visible .section-title::after,
.section-title.visible::after { width: 132px; }
/* -------------------------------------------------------------------------
Divisoria entre dobras = a mesma laje, agora como faixa continua.
Substitui a elipse que veio do clone (aquilo era o swoosh da OUTRA marca).
------------------------------------------------------------------------- */
.hex-divider__mark {
width: 58px;
height: 16px;
border: 0;
border-radius: 0;
transform: none;
background: var(--color-primary);
-webkit-mask: var(--mark-band) center / contain no-repeat;
mask: var(--mark-band) center / contain no-repeat;
opacity: 0.9;
}
.hex-divider__mark--sm { display: block; width: 34px; height: 10px; opacity: 0.45; }
.hex-divider::before,
.hex-divider::after {
background: linear-gradient(90deg, transparent, rgba(180, 106, 76, 0.45));
}
/* -------------------------------------------------------------------------
Textura das dobras escuras = o Q inteiro, em baixissima opacidade.
O clone tinha isto DESLIGADO (background-image:none). Religado com o
simbolo desta marca, que e o erro que o playbook 13.19.1 manda procurar.
------------------------------------------------------------------------- */
.hex-texture::after {
background-image: var(--mark-full);
background-repeat: no-repeat;
background-position: right -6% bottom -14%;
background-size: clamp(280px, 34%, 520px);
opacity: 0.055;
}
.risk-band { position: relative; isolation: isolate; }
.risk-band::after {
content: "";
position: absolute;
inset: 0;
z-index: -1;
pointer-events: none;
background-image: var(--mark-full);
background-repeat: no-repeat;
background-position: left -8% top -12%;
background-size: clamp(240px, 26%, 420px);
opacity: 0.04;
}
/* -------------------------------------------------------------------------
Geometria: o Q e um anel redondo com CHANFROS retos. Os badges ficam
circulares (ecoam o anel) e as quinas dos cards ganham o chanfro (ecoa o
corte da laje). E o par que faz a forma da marca virar layout.
------------------------------------------------------------------------- */
.step__icon,
.objection__icon,
.hero__cue-chevron,
.success-icon { border-radius: 50%; }
.compare__col,
.marquee__item,
.experts__photo,
.form-card {
clip-path: polygon(0 0, 100% 0, 100% calc(100% - 26px), calc(100% - 26px) 100%, 0 100%);
}
@media (max-width: 620px) {
.compare__col, .marquee__item, .experts__photo, .form-card {
clip-path: polygon(0 0, 100% 0, 100% calc(100% - 16px), calc(100% - 16px) 100%, 0 100%);
}
}
.wa-fab, .whatsapp-fab, .fab, [class*="whats"] { border-radius: 50% !important; }
/* -------------------------------------------------------------------------
Tipografia: titulos em Montserrat (a fonte de texto do manual), com peso
leve e respiro. Trajan nao entra em titulo longo porque so tem maiusculas,
e H1 de 20 palavras em caixa alta nao se le.
------------------------------------------------------------------------- */
h1, h2, h3,
.hero__headline,
.section-title,
.step__title,
.compare__head,
.form-step-title,
.lead-popup__title {
font-family: var(--font-heading);
font-weight: 500;
letter-spacing: -0.005em;
}
.hero__headline {
font-weight: 400;
line-height: 1.28;
font-size: clamp(24px, 3vw, 40px);
max-width: 22ch;
text-wrap: balance;
}
.hero__headline .accent { font-weight: 600; color: var(--color-primary); }
.section-title { font-weight: 500; line-height: 1.18; }
.step__title, .compare__head { font-weight: 600; }
/* -------------------------------------------------------------------------
Hero: esta LP nao tem video (a Quarten nao forneceu). O aside do reel saiu
do HTML, entao o conteudo passa a ocupar a dobra inteira, e a caixa cresce
com o texto em vez de ficar presa em 100vh (playbook, item 1b do render).
------------------------------------------------------------------------- */
.hero__reel { display: none; }
.hero__content { grid-template-columns: 1fr; max-width: 1200px; }
.hero__text { max-width: 44rem; }
.hero { min-height: auto; padding-top: calc(var(--header-h) + var(--topbar-h, 34px) + 56px); padding-bottom: 84px; }
.hero__bg img { object-position: center 62%; }
/* Oliva do manual: a segunda cor da marca entra nos apoios, para a pagina
nao ficar so terracota. Nunca em CTA (verde) nem em risco (vermelho). */
.trust-item svg { color: var(--color-olive); }
.site-footer__info-item svg { color: var(--color-olive); }
.proof__note strong:not(.proof__hl) { color: var(--color-olive); }
/* As DUAS socias lado a lado: o texto da dobra cita as duas, entao a dobra
mostra as duas. Empilha no mobile. */
.experts__duo { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: start; }
.experts__duo .experts__photo { margin: 0; }
.experts__duo .experts__caption strong { display: block; }
@media (max-width: 900px) { .experts__duo { grid-template-columns: 1fr 1fr; gap: 10px; } }
@media (max-width: 460px) { .experts__duo { grid-template-columns: 1fr; } }
/* Hero: cabe em 1440x900 e em 1366x680 (notebook 13"), com a chamada de
descida em FLUXO e ainda dentro da dobra. */
.hero { padding-top: calc(var(--header-h) + var(--topbar-h, 34px) + 28px); padding-bottom: 48px; }
.hero__headline { font-size: clamp(23px, 2.5vw, 34px); max-width: 21ch; margin-bottom: 14px; }
.hero__sub { margin-bottom: 20px; max-width: 52ch; }
.hero__cue { margin-top: 18px; }
@media (max-height: 760px) {
.hero__headline { font-size: clamp(21px, 2.1vw, 28px); }
.hero__sub { font-size: 15px; }
}
/* ==========================================================================
MOBILE 393px — corrigido contra medicao real, nao contra o piso de 500px
do headless (playbook 14.1). Os tres achados foram os classicos:
botao com white-space:nowrap estourando (14.2), a faixa de nav empurrando
o header, e o texto da topbar sem quebra.
========================================================================== */
@media (max-width: 620px) {
/* 14.2: label longo em .btn vira uma linha so e corta a dobra inteira */
.btn, .btn--lg, .btn--block, .btn--accent, .btn--green, .btn--ghost-light {
white-space: normal;
line-height: 1.3;
text-align: center;
}
.hero__cta .btn { width: 100%; }
/* a faixa de nav rola por dentro; o header nao pode crescer com ela */
.site-header__inner { min-width: 0; overflow: hidden; }
.site-nav { min-width: 0; overflow-x: auto; scrollbar-width: none; }
.site-nav::-webkit-scrollbar { display: none; }
/* topbar quebra em vez de empurrar */
.topbar__text { white-space: normal; line-height: 1.5; font-size: 10.5px; letter-spacing: 0.1em; }
.topbar { padding: 6px 12px; height: auto; }
/* svg de seta dentro do botao nao entra na conta da largura */
.btn svg { flex: 0 0 auto; }
}
/* ==========================================================================
REVISAO 2 — retorno do Gabriel (29/07/2026)
========================================================================== */
/* -- Tipografia dos titulos: MONTSERRAT, a do proprio manual ---------------
Terceira e ultima tentativa, e desta vez sem adivinhar. Duas serifadas
cairam pelo MESMO motivo, dito pelo Gabriel nas duas:
Marcellus -> "dificil a leitura", "nao combinou com a id visual dela"
Spectral -> "ficou pior", "dificil de ler e compreender"
O erro nao era a escolha da serifada, era a premissa: eu estava procurando
uma serifada que imitasse o wordmark QUARTEN. Mas o manual da Quarten JA
define o par tipografico, e ele nao tem serifada de texto nenhuma:
Trajan Pro (romana, SO maiusculas) + Montserrat (todo o resto)
Entao o titulo volta para a Montserrat. Ela nao "parece com a marca" porque
imita o wordmark; ela E a marca, esta no manual. E resolve a legibilidade de
uma vez: geometrica, altura de x alta, sem serifa fina para sumir em corpo
pequeno ou sobre foto escura.
A ROMANA NAO SUMIU do site. Ela continua onde sempre coube e onde se le sem
esforco: o wordmark do hero e do rodape, e os trechos curtos em caixa alta
em Trajan Pro (olho, tag, chip, rotulo, numero de card). E o mesmo desenho
da LP de Projetos.
Peso 600 e nao 500: em titulo grande a Montserrat 500 fica sem dominancia,
e a hierarquia passa a depender so do tamanho. */
:root { --font-heading: "Montserrat", system-ui, -apple-system, sans-serif; }
h1, h2, h3, .hero__headline, .section-title, .step__title,
.compare__head, .form-step-title, .lead-popup__title { font-family: var(--font-heading); }
.hero__headline { font-weight: 600; letter-spacing: -.015em; }
.section-title { font-weight: 600; letter-spacing: -.015em; }
.step__title, .compare__head { font-weight: 600; letter-spacing: -.01em; }
/* -- HERO: duas colunas. O texto saiu de cima da foto e foi para superficie
solida, o que resolve o contraste. A foto virou carrossel lateral. ----- */
.hero {
background: linear-gradient(145deg, #241610 0%, #1d110c 52%, #120a06 100%);
min-height: auto;
padding: calc(var(--header-h) + var(--topbar-h, 34px) + 40px) 0 46px;
overflow: visible;
}
.hero__bg { display: none; }
.hero__inner {
display: grid;
grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr);
gap: clamp(28px, 4.4vw, 64px);
align-items: center;
}
.hero__text { max-width: none; }
.hero__tag {
display: inline-flex; align-items: center; gap: 9px;
font-family: var(--font-roman); text-transform: uppercase; letter-spacing: .17em;
font-size: 11px; color: var(--color-primary);
border: 1px solid rgba(180,106,76,.45); padding: 7px 14px; margin-bottom: 20px;
}
.hero__tag::before {
content: ""; width: 14px; height: 14px; background: currentColor;
-webkit-mask: var(--mark-full) center/contain no-repeat; mask: var(--mark-full) center/contain no-repeat;
}
.hero__headline { font-size: clamp(27px, 3.1vw, 44px); line-height: 1.2; max-width: 20ch; margin-bottom: 16px; }
.hero__sub { font-size: clamp(14.5px, 1.08vw, 16.5px); line-height: 1.66; max-width: 50ch; margin-bottom: 26px; color: #ddd0c8; }
/* botoes LADO A LADO (estavam empilhados) */
.hero__cta { display: flex; flex-direction: row; flex-wrap: wrap; gap: 12px; align-items: stretch; }
.hero__cta .btn { width: auto; flex: 0 1 auto; }
.hero__cue { margin-top: 22px; }
/* carrossel lateral do hero: troca sozinho a cada 2s */
.hero__slider { position: relative; aspect-ratio: 4/5; overflow: hidden;
clip-path: polygon(0 0, 100% 0, 100% calc(100% - 30px), calc(100% - 30px) 100%, 0 100%); }
.hero__slide { position: absolute; inset: 0; margin: 0; opacity: 0; transition: opacity .9s var(--ease); }
.hero__slide.is-active { opacity: 1; }
.hero__slide img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hero__dots { position: absolute; left: 0; right: 0; bottom: 14px; display: flex; justify-content: center; gap: 7px; z-index: 2; }
.hero__dots span { width: 22px; height: 3px; background: rgba(255,255,255,.42); transition: background .3s; }
.hero__dots span.is-on { background: var(--color-primary); }
@media (max-width: 900px) {
.hero__inner { grid-template-columns: 1fr; gap: 26px; }
.hero__slider { aspect-ratio: 16/11; order: 2; }
.hero__text { order: 1; }
}
/* -- AUTORIDADE mais compacta, com as mostras nomeadas ------------------- */
.proof--tight { padding: 34px 0 30px; }
.proof--tight .proof__stats { margin-bottom: 0; }
.stat__foot { display: block; margin-top: 7px; font-size: 11.5px; line-height: 1.5;
color: var(--color-on-dark-mute); opacity: .85; max-width: 24ch; margin-inline: auto; }
/* -- FAIXA "o que entra no projeto": a zona de ganho, visivel cedo -------- */
.deliver { background: var(--color-bg-soft); padding: 40px 0 44px; border-bottom: 1px solid var(--color-line); }
.deliver__lead { font-family: var(--font-heading); font-size: clamp(19px, 2.1vw, 27px);
line-height: 1.35; max-width: 34ch; margin-bottom: 22px; color: var(--color-ink); }
.deliver__hl { color: var(--color-primary); font-weight: 400; }
.deliver__list { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 10px 18px; }
.deliver__list li { display: flex; align-items: center; gap: 9px; font-size: 14px; color: var(--color-text); }
.deliver__list li::before { content: ""; width: 14px; height: 8px; flex: 0 0 auto; background: var(--color-primary);
-webkit-mask: var(--mark-band) center/contain no-repeat; mask: var(--mark-band) center/contain no-repeat; }
@media (max-width: 900px) { .deliver__list { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 460px) { .deliver__list { grid-template-columns: 1fr; } }
/* -- PROCESSO na horizontal, texto curto -------------------------------- */
.process--row { padding: 56px 0 60px; }
.steps--row { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 16px; margin-top: 34px; }
.steps--row .step { padding: 24px 20px 26px; text-align: left; }
.steps--row .step__ghost { display: none; }
.steps--row .step__icon { width: 56px; height: 56px; display: grid; place-items: center; margin-bottom: 14px;
background: var(--color-primary-soft); color: var(--color-primary); border-radius: 50%; }
.steps--row .step__icon svg { width: 30px; height: 30px; }
.steps--row .step__title { font-size: 18px; margin: 6px 0 8px; }
.steps--row .step__text { font-size: 13.6px; line-height: 1.58; }
@media (max-width: 900px) { .steps--row { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 520px) { .steps--row { grid-template-columns: 1fr; } }
/* animacoes dos icones: rodam quando a etapa entra em cena (.visible) */
@media (prefers-reduced-motion: no-preference) {
.step.visible .ic-lupa { animation: lupaGira 3.2s var(--ease) infinite; transform-origin: 21px 21px; }
.step.visible .ic-lupa__scan { animation: lupaScan 3.2s var(--ease) infinite; }
@keyframes lupaGira {
0%,68%,100% { transform: perspective(70px) rotateY(0deg) scale(1); }
18% { transform: perspective(70px) rotateY(38deg) scale(1.06); }
42% { transform: perspective(70px) rotateY(-30deg) scale(1.04); }
}
@keyframes lupaScan { 0%,20% { opacity:0; transform: translateY(-5px);} 45%{opacity:1;transform:translateY(0);} 70%,100%{opacity:0;transform:translateY(5px);} }
.step.visible .ic-traco { stroke-dasharray: 78; stroke-dashoffset: 78; animation: desenha 3.4s var(--ease) infinite; }
.step.visible .ic-lapis { animation: lapisAnda 3.4s var(--ease) infinite; }
@keyframes desenha { 0%{stroke-dashoffset:78} 55%{stroke-dashoffset:0} 85%{stroke-dashoffset:0;opacity:1} 100%{stroke-dashoffset:0;opacity:0} }
@keyframes lapisAnda { 0%{transform:translate(-3px,4px)} 55%{transform:translate(15px,-6px)} 100%{transform:translate(-3px,4px)} }
.step.visible .ic-cai { animation: caiNoCarrinho 3s var(--ease) infinite; opacity: 0; }
.step.visible .ic-cai--2 { animation-delay: .5s; }
.step.visible .ic-cai--3 { animation-delay: 1s; }
@keyframes caiNoCarrinho {
0% { opacity:0; transform: translateY(-6px); }
14% { opacity:1; }
46% { opacity:1; transform: translateY(13px); }
58% { opacity:0; transform: translateY(15px); }
100% { opacity:0; transform: translateY(15px); }
}
.step.visible .ic-casa { stroke-dasharray: 46; stroke-dashoffset: 46; animation: constroi 4s var(--ease) infinite; }
.step.visible .ic-casa--p2 { animation-delay: .28s; }
.step.visible .ic-casa--p3 { animation-delay: .56s; }
.step.visible .ic-casa--p4 { stroke-dasharray: 52; stroke-dashoffset: 52; animation-delay: .84s; }
.step.visible .ic-casa--p5 { animation-delay: 1.15s; }
@keyframes constroi { 0%{stroke-dashoffset:52} 42%{stroke-dashoffset:0} 88%{stroke-dashoffset:0;opacity:1} 100%{stroke-dashoffset:0;opacity:0} }
}
/* -- COMPARATIVO: 4 itens, cards mais equilibrados ----------------------- */
.compare--tight { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 18px; align-items: stretch; margin-top: 26px; }
.compare--tight .compare__col { padding: 26px 24px 26px; }
.compare--tight .compare__list { margin: 4px 0 0; }
.compare--tight .compare__item { padding: 11px 0; font-size: 14.4px; line-height: 1.5; }
.compare--tight .compare__tag { margin-bottom: 6px; }
.compare--tight .btn { margin-top: 18px; }
@media (max-width: 760px) { .compare--tight { grid-template-columns: 1fr; } }
/* -- CARROSSEL DE PROJETOS: sem esfumacado e mais baixo ------------------ */
.marquee-wrap::before, .marquee-wrap::after,
.marquee::before, .marquee::after { display: none !important; content: none !important; }
.marquee-wrap { -webkit-mask: none !important; mask: none !important; }
.marquee { -webkit-mask: none !important; mask: none !important; }
.marquee__item { width: clamp(210px, 21vw, 288px); }
.marquee__item img { aspect-ratio: 4/3; object-fit: cover; }
.gallery { padding-bottom: 44px; }
/* -- BOTOES: degrade animado, contraste e pulso -------------------------- */
.btn--accent, .btn--green {
position: relative; overflow: hidden; border: 0; color: #fff;
background-size: 220% 100%;
}
.btn--accent {
background-image: linear-gradient(100deg,#d5ab9a,#B46A4C 34%,#8d5039 62%,#B46A4C 100%);
animation: fluxoBtn 5s linear infinite, pulsoBtn 2.6s var(--ease) infinite;
}
.btn--green {
background-image: linear-gradient(100deg,#3ce07a,#25d366 34%,#17a34a 62%,#25d366 100%);
animation: fluxoBtn 5s linear infinite, pulsoVerde 2.6s var(--ease) infinite;
}
.btn--accent:hover, .btn--green:hover { animation-play-state: paused; filter: brightness(1.07); }
@keyframes fluxoBtn { 0% { background-position: 0% 50%; } 100% { background-position: 220% 50%; } }
@keyframes pulsoBtn {
0%,100% { box-shadow: 0 0 0 0 rgba(180,106,76,.42); }
55% { box-shadow: 0 0 0 12px rgba(180,106,76,0); }
}
@keyframes pulsoVerde {
0%,100% { box-shadow: 0 0 0 0 rgba(37,211,102,.45); }
55% { box-shadow: 0 0 0 12px rgba(37,211,102,0); }
}
/* brilho que atravessa o botao */
.btn--accent::after, .btn--green::after {
content: ""; position: absolute; top: 0; bottom: 0; width: 42%; pointer-events: none;
background: linear-gradient(100deg, transparent, rgba(255,255,255,.28), transparent);
transform: skewX(-18deg); animation: brilhoBtn 4.2s var(--ease) infinite;
}
@keyframes brilhoBtn { 0% { left: -55%; } 55%, 100% { left: 125%; } }
.btn--ghost-light { border: 1.5px solid rgba(255,255,255,.55); background: rgba(255,255,255,.06); color: #fff; }
.btn--ghost-light:hover { background: rgba(255,255,255,.14); border-color: #fff; }
@media (prefers-reduced-motion: reduce) {
.btn--accent, .btn--green { animation: none; }
.btn--accent::after, .btn--green::after { display: none; }
}
/* Os dois CTAs precisam caber LADO A LADO na coluna do hero: rotulo mais curto
e padding/fonte reduzidos so aqui. Sem isso o flex-wrap empilhava. */
.hero__inner { grid-template-columns: minmax(0, 1.14fr) minmax(0, 1fr); }
.hero__cta { flex-wrap: nowrap; }
.hero__cta .btn { white-space: nowrap; padding: 15px 22px; font-size: 14.5px; letter-spacing: .01em; }
.hero__cta .btn svg { width: 17px; height: 17px; }
@media (max-width: 1080px) { .hero__cta .btn { padding: 14px 16px; font-size: 13.5px; } }
@media (max-width: 900px) { .hero__cta { flex-wrap: wrap; } .hero__cta .btn { flex: 1 1 auto; } }
@media (max-width: 620px) { .hero__cta { flex-direction: column; } .hero__cta .btn { width: 100%; white-space: normal; } }
/* Icones maiores: em 30px a animacao nao se enxergava. */
.steps--row .step__icon { width: 68px; height: 68px; margin-bottom: 16px; }
.steps--row .step__icon svg { width: 40px; height: 40px; }
.steps--row .step__title { min-height: 2.4em; display: flex; align-items: flex-end; }
/* Titulo de secao nao precisa de 22ch aqui: o eyebrow ja carrega o contexto */
.risk-band .eyebrow { margin-bottom: 4px; }
/* O item do carrossel tinha height fixo no CSS base (clamp 320..520px), entao
o aspect-ratio nao vencia. Reduzido de verdade, como pedido. */
.marquee__item { height: clamp(210px, 24vw, 300px) !important; width: clamp(230px, 26vw, 340px) !important; }
.marquee__item img { aspect-ratio: auto; }
.marquee__item figcaption { font-size: 12.5px; padding: 10px 12px; }
/* Menos ar entre o comparativo e a galeria */
.risk-band { padding: clamp(44px, 5vw, 66px) 0 clamp(40px, 4.4vw, 58px); }
.gallery { padding-top: clamp(40px, 4.6vw, 62px); }
.gallery__head { margin-bottom: 26px; }
.gallery__cta { margin-top: 26px; }
/* ==========================================================================
REVISAO 3 — retorno do Gabriel (29/07/2026)
Referencia de animacao: apresentacao HTML da Aptar/Richot (traco que se
desenha com pathLength + stroke-dashoffset, volume isometrico com balanco
3D e brilho, linha de varredura).
========================================================================== */
/* -- CABECALHO: degrade e contraste PROPRIOS, diferentes do hero e do resto,
para ganhar destaque quando a pessoa rola a pagina. ------------------- */
.site-header {
background: linear-gradient(100deg, #150c08 0%, #2b1a12 38%, #3a2418 62%, #1d110c 100%) !important;
border-bottom: 1px solid rgba(180,106,76,.42);
box-shadow: 0 10px 34px -14px rgba(0,0,0,.8);
}
.site-header::after {
content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
background: linear-gradient(90deg, transparent, #B46A4C 22%, #d5ab9a 50%, #B46A4C 78%, transparent);
background-size: 220% 100%; animation: fluxoBtn 7s linear infinite;
}
.site-header.is-stuck, .site-header.scrolled {
background: linear-gradient(100deg, #100906 0%, #251710 45%, #100906 100%) !important;
}
.site-nav a { color: #f0e5df; }
.site-nav a:hover { color: #fff; }
/* -- HERO: imagem de fundo de BAIXO CONTRASTE, com o carrossel lateral por
cima. O texto continua legivel porque o fundo esta rebaixado. --------- */
.hero { position: relative; isolation: isolate; }
.hero__bg { display: block; position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.hero__bg img { width: 100%; height: 100%; object-fit: cover; object-position: center 58%;
filter: grayscale(.42) contrast(.72) brightness(.42) saturate(.7); }
.hero__overlay { position: absolute; inset: 0;
background: linear-gradient(102deg, rgba(18,10,6,.95) 0%, rgba(18,10,6,.88) 46%, rgba(18,10,6,.72) 78%, rgba(18,10,6,.66) 100%); }
.hero { background: #140c07; }
/* -- NUMEROS DE AUTORIDADE: maiores, com regua animada e mais destaque ----- */
.proof--tight { padding: 46px 0 42px; position: relative; }
.proof--tight::before {
content: ""; position: absolute; left: 50%; top: 0; transform: translateX(-50%);
width: min(1100px, 88%); height: 2px;
background: linear-gradient(90deg, transparent, #B46A4C, transparent);
}
.proof__stats { gap: 10px; }
.stat { position: relative; padding: 6px 10px 4px; }
.stat__num {
font-family: var(--font-heading);
font-size: clamp(40px, 5.2vw, 68px) !important;
line-height: 1; letter-spacing: -.01em;
background: linear-gradient(100deg, #f0d6c9, #B46A4C 42%, #d5ab9a 72%, #B46A4C);
background-size: 220% 100%;
-webkit-background-clip: text; background-clip: text; color: transparent;
animation: fluxoBtn 6s linear infinite;
filter: drop-shadow(0 4px 18px rgba(180,106,76,.35));
}
.stat__unit { font-size: .38em; letter-spacing: .12em; margin-left: 4px; }
.stat__label { font-size: 13px; letter-spacing: .04em; color: #f0e5df; margin-top: 8px; display: block; }
/* SEM traco sob o numero. O motivo repetido virava fileira de tijolinho, que
nao existe na marca da Quarten. Removido a pedido do Gabriel (29/07). */
.stat::after { content: none !important; display: none !important; }
/* -- CARDS DO PROCESSO, no padrao Aptar ---------------------------------- */
.process { padding: clamp(52px, 6vw, 80px) 0; }
.met-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 16px; margin-top: 34px; }
.esc-card {
position: relative; display: flex; flex-direction: column; overflow: hidden;
aspect-ratio: 1 / 1;
padding: 20px 20px 18px;
background: linear-gradient(165deg, rgba(180,106,76,.10), #241610 42%, #1a0f0a);
border: 1px solid rgba(255,255,255,.08);
box-shadow: 0 22px 54px -30px rgba(0,0,0,.85);
clip-path: polygon(0 0, 100% 0, 100% calc(100% - 22px), calc(100% - 22px) 100%, 0 100%);
}
.esc-card::before {
content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 3px;
background: linear-gradient(90deg, #e8c9ba, #B46A4C 45%, #8d5039);
transform: scaleX(0); transform-origin: left; transition: transform .7s .25s var(--ease);
}
.esc-card.visible::before { transform: scaleX(1); }
.esc-card::after {
content: ""; position: absolute; top: -34px; left: 50%; width: 170px; height: 170px;
transform: translateX(-50%); pointer-events: none; opacity: 0;
background: radial-gradient(circle, rgba(180,106,76,.20), transparent 70%);
}
.esc-card.visible::after { animation: fadein 1s .6s forwards; }
@keyframes fadein { to { opacity: 1; } }
.esc-num {
position: absolute; right: 16px; top: 10px;
font-family: var(--font-roman); font-size: 40px; line-height: 1;
color: rgba(255,255,255,.09); letter-spacing: .02em;
}
.esc-anim { display: grid; place-items: center; margin: 4px 0 12px; min-height: 92px; }
.esc-anim svg { width: 118px; height: 90px; overflow: visible; }
.esc-card h3 { font-family: var(--font-heading); font-size: 17px; color: #fff; margin-bottom: 7px; font-weight: 400; }
.esc-card p { font-size: 12.6px; color: #d3c4bc; line-height: 1.5; }
.esc-foot { margin-top: auto; padding-top: 12px; }
.esc-tag { display: inline-block; font-family: var(--font-roman); font-size: 9.5px; letter-spacing: .16em;
text-transform: uppercase; color: var(--color-primary); margin-bottom: 8px; }
.esc-bar { height: 2px; background: rgba(255,255,255,.12); overflow: hidden; }
.esc-bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg,#B46A4C,#e8c9ba); }
.esc-card.visible .esc-bar i { animation: barfill 1s .6s forwards; }
@keyframes barfill { to { width: 100%; } }
@media (max-width: 980px) { .met-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 560px) { .met-grid { grid-template-columns: 1fr; } .esc-card { aspect-ratio: auto; } }
/* traco que se desenha, base de todas as animacoes (padrao Aptar) */
.esc-anim .st { fill: none; stroke: var(--color-primary); stroke-width: 2.4;
stroke-linecap: round; stroke-linejoin: round;
stroke-dasharray: 100; stroke-dashoffset: 100; }
.esc-card.visible .esc-anim .st { animation: drawSt 1.15s .35s var(--ease) forwards; }
@keyframes drawSt { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: no-preference) {
/* 01 planta + lupa percorrendo */
.ic-planta .mag { transform: translate(40px, 40px); }
.esc-card.visible .ic-planta .mag { animation: magMove 4.4s 1.4s ease-in-out infinite; }
@keyframes magMove {
0% { transform: translate(38px, 38px); }
50% { transform: translate(92px, 60px); }
100% { transform: translate(38px, 38px); }
}
.ic-planta .mag circle { fill: rgba(180,106,76,.10); }
.ic-planta .det-bg .st { opacity: .45; }
/* 02 volume ISOMETRICO com balanco 3D e brilho (a "animacao em 3D") */
.ic-iso .iso { transform-origin: 66px 54px; }
.esc-card.visible .ic-iso .iso {
animation: isoRock 5s 1.3s ease-in-out infinite;
filter: drop-shadow(0 0 6px rgba(180,106,76,.55));
}
@keyframes isoRock {
0%,100% { transform: perspective(320px) rotateZ(-2.6deg) rotateY(-9deg); }
50% { transform: perspective(320px) rotateZ(2.6deg) rotateY(9deg); }
}
.ic-iso .iso-glow { stroke: #f3d9cc; opacity: 0; }
.esc-card.visible .ic-iso .iso-glow { animation: drawSt 1.15s .35s var(--ease) forwards, isoShine 3.4s 1.6s ease-in-out infinite; }
@keyframes isoShine { 0%,100% { opacity: 0; } 50% { opacity: .95; } }
/* 03 material caindo no palete */
.ic-carga .cx { opacity: 0; }
.esc-card.visible .ic-carga .cx1 { animation: cai 3.2s 1.5s ease-in infinite; }
.esc-card.visible .ic-carga .cx2 { animation: cai 3.2s 2.0s ease-in infinite; }
.esc-card.visible .ic-carga .cx3 { animation: cai 3.2s 2.5s ease-in infinite; }
@keyframes cai {
0% { opacity: 0; transform: translateY(-14px); }
12% { opacity: 1; }
52% { opacity: 1; transform: translateY(42px); }
62% { opacity: 0; transform: translateY(46px); }
100% { opacity: 0; transform: translateY(46px); }
}
/* 04 casa que se constroi, parede por parede, telhado por ultimo */
.esc-card.visible .ic-obra .cs { animation: drawSt .7s var(--ease) forwards; }
.esc-card.visible .ic-obra .cs1 { animation-delay: .40s; }
.esc-card.visible .ic-obra .cs2 { animation-delay: .70s; }
.esc-card.visible .ic-obra .cs3 { animation-delay: 1.00s; }
.esc-card.visible .ic-obra .cs4 { animation-delay: 1.32s; }
.esc-card.visible .ic-obra .cs5 { animation-delay: 1.70s; }
.ic-obra .obra-scan { stroke: #f3d9cc; stroke-width: 2; opacity: 0;
filter: drop-shadow(0 0 6px var(--color-primary)); }
.esc-card.visible .ic-obra .obra-scan { animation: obraScan 3s 2.1s linear infinite; }
@keyframes obraScan {
0% { transform: translateY(0); opacity: 0; }
12% { opacity: .95; }
88% { opacity: .95; transform: translateY(70px); }
100% { transform: translateY(70px); opacity: 0; }
}
}
/* -- COMPARATIVO: as linhas do "nao" e do "sim" na MESMA altura ----------- */
.compare--tight { align-items: stretch; }
.compare--tight .compare__col { display: flex; flex-direction: column; }
.compare--tight .compare__list {
display: grid; grid-template-rows: repeat(4, 1fr); flex: 1 1 auto; margin: 10px 0 0;
}
.compare--tight .compare__item {
display: flex; align-items: center; gap: 12px;
padding: 0 0 0 0; min-height: 66px;
border-bottom: 1px solid rgba(0,0,0,.07);
}
.compare--tight .compare__col--good .compare__item { border-bottom-color: rgba(255,255,255,.09); }
.compare--tight .compare__item:last-child { border-bottom: 0; }
/* -- GALERIA: sem regua sob o titulo desta secao ------------------------- */
.section-title--nobar::after { display: none !important; }
/* -- ARQUITETAS: um card so, as duas fotos, sem legenda por cima --------- */
.experts__photo--par {
display: grid; grid-template-columns: 1fr 1fr; gap: 0; margin: 0;
overflow: hidden; aspect-ratio: 4/3;
clip-path: polygon(0 0, 100% 0, 100% calc(100% - 26px), calc(100% - 26px) 100%, 0 100%);
}
.experts__photo--par img { width: 100%; height: 100%; object-fit: cover; object-position: center 22%; display: block; }
.experts__photo--par .experts__caption { display: none; }
@media (max-width: 620px) { .experts__photo--par { aspect-ratio: 3/4; grid-template-columns: 1fr; grid-template-rows: 1fr 1fr; } }
/* ==========================================================================
CORRECOES DE ROBUSTEZ (playbook 15.3: elemento nasce VISIVEL, a animacao
so acrescenta movimento). Os dois casos abaixo nasciam invisiveis e sumiam
quando a animacao nao rodava (headless, print, PDF, reduced-motion).
========================================================================== */
/* 1. Numero de autoridade: era texto transparente com degrade recortado
(background-clip:text). Se o degrade nao pinta, o numero SOME. Agora e
cor solida de alto contraste, que era o "destaque" pedido. */
.stat__num {
background: none !important;
-webkit-background-clip: border-box !important;
background-clip: border-box !important;
color: #e8c9ba !important;
animation: none !important;
text-shadow: 0 2px 26px rgba(180,106,76,.55);
}
.stat__num > span[data-count] { color: #f2dcd0; }
.stat__unit { color: var(--color-primary); opacity: .95; }
/* 2. Traco dos icones: nasce DESENHADO. A animacao apenas refaz o desenho
quando o card entra em cena. */
.esc-anim .st { stroke-dasharray: 100; stroke-dashoffset: 0; }
.esc-card.visible .esc-anim .st,
.esc-card.is-revealed .esc-anim .st { animation: drawSt 1.15s .35s var(--ease) both; }
@keyframes drawSt { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }
/* a barra do rodape tambem nasce com um fio, nao em zero */
.esc-bar i { width: 18%; }
.stat__mais { color: var(--color-primary); font-size: .62em; vertical-align: .18em; margin-right: 2px; }
/* ==========================================================================
REVISAO 4 (retorno do Gabriel, 29/07/2026)
Bloco no fim do arquivo de proposito: e a ultima palavra na cascata.
========================================================================== */
/* -- 1. REGUA DE AUTORIDADE ------------------------------------------------
(a) Saiu o traco tilado sob cada numero. Aquilo era a laje do Q repetida em
repeat-x, o que le como uma fileira de tijolinhos e nao existe na marca.
(b) Saiu a mistura de cores DENTRO do mesmo numero: o "+", o digito e a
unidade estavam em tres tons. Agora e uma cor so, variando de tamanho,
que e como se hierarquiza numero sem inventar contraste. */
.stat::after { content: none !important; display: none !important; }
.stat__num,
.stat__num span,
.stat__mais,
.stat__unit {
color: #F7EFE9 !important;
-webkit-text-fill-color: #F7EFE9;
background: none !important;
text-shadow: none !important;
animation: none !important;
opacity: 1 !important;
}
.stat__num { font-weight: 500; letter-spacing: -.015em; }
.stat__mais { font-size: .5em !important; vertical-align: .24em; margin-right: 1px; }
.stat__unit { font-size: .33em !important; letter-spacing: .15em; margin-left: 7px; }
.stat__label { color: #E7D8CE; margin-top: 12px; }
.stat__foot { color: #B8A69B; opacity: 1; }
/* -- 2. SEM REGUA SOB OS TITULOS -----------------------------------------
A laje sob o H2 foi marcada para sair junto com a da dobra de autoridade.
O motivo da marca continua vivo na pagina (eyebrow e textura das dobras
escuras), so nao vira mais enfeite solto embaixo de titulo. */
.section-title::after,
.section-title--light::after,
.eyebrow--dark + .section-title::after { content: none !important; display: none !important; }
/* -- 3. CARDS DO PROCESSO --------------------------------------------------
O fundo era um degrade cuja PRIMEIRA parada era semitransparente
(rgba(180,106,76,.10)). Sem cor solida atras, a secao clara passava por
baixo e o card virava metade branco, metade marrom. Agora e opaco inteiro. */
.esc-card {
background: #1E120C !important; /* CHAPADO. Sem degrade, sem canto claro. */
border-color: rgba(247,239,233,.14);
padding: 22px 22px 20px;
/* O quadrado fixo cortava a tag e a barra do rodape quando o texto crescia.
Agora o card TEM a altura de quadrado como piso e cresce se precisar. */
aspect-ratio: auto !important;
min-height: clamp(316px, 25vw, 368px);
}
@media (max-width: 980px) { .esc-card { min-height: 300px; } }
@media (max-width: 560px) { .esc-card { min-height: 0; } }
/* o halo claro que abria no topo do card tambem sai: era ele que lia como
"meia carta branca" quando o degrade nao pintava por cima. */
.esc-card::after { content: none !important; display: none !important; }
.esc-card::before { background: #C77E56; height: 2px; }
/* Proporcao: o titulo manda, o texto e um degrau abaixo e respira, a tag e
miudinha. Antes titulo e texto estavam quase do mesmo tamanho. */
.esc-anim { min-height: 116px; margin: 4px 0 18px; }
.esc-anim svg { width: 154px; height: 116px; }
/* PROPORCAO. O problema era titulo e texto quase do mesmo peso, e o titulo de
duas linhas do card 04 empurrando o corpo para baixo, o que desalinhava a
fileira. Agora: escala decidida (titulo 1.35x o corpo), corpo em peso leve,
e o bloco do titulo com altura reservada para os quatro comecarem juntos. */
.esc-card h3 {
color: #FFFBF8; font-size: clamp(16px, 1.2vw, 18.5px);
line-height: 1.3; font-weight: 500; letter-spacing: -.008em;
margin-bottom: 11px; min-height: 2.6em;
display: flex; align-items: flex-end;
}
/* O corpo estava em 12,8px peso 300 num tom cinza-poeira: pequeno, fino e
lavado ao mesmo tempo. Sobe de tamanho, ganha peso e vai para um creme
quase branco, que e onde o contraste sobre o marrom realmente aparece. */
.esc-card p {
color: #EFE4DB; font-size: 14.2px; line-height: 1.62; font-weight: 400;
letter-spacing: .003em;
margin-bottom: 20px; /* folga minima antes do fio do rodape */
}
.esc-num {
color: rgba(253,248,244,.085); font-size: 42px; font-weight: 400;
top: 14px; right: 18px;
}
/* fio separando o rodape: fecha o card sem precisar de mais cor.
`margin-top: auto` empurra o rodape para o pe do card, entao o fio dos
quatro cai na MESMA linha mesmo com textos de tamanhos diferentes. */
.esc-foot { padding-top: 18px; margin-top: auto; border-top: 1px solid rgba(253,248,244,.09); }
.esc-tag { color: #F6C9A4; font-size: 11.5px; letter-spacing: .13em; margin-bottom: 11px; }
.esc-bar { background: rgba(253,248,244,.10); }
.esc-bar i { background: linear-gradient(90deg, #C77E56, #F3DDCD); }
/* o card responde ao mouse: o icone sobe um fio e a borda esquenta */
.esc-card { transition: border-color .45s var(--ease), background .45s var(--ease); }
.esc-card .esc-anim { transition: transform .55s var(--ease); }
.esc-card:hover { border-color: rgba(240,177,135,.34); }
.esc-card:hover .esc-anim { transform: translateY(-4px); }
/* -- 3b. CONTRASTE DOS TRACOS -------------------------------------------
Uma hierarquia de tres niveis, so. Antes havia terracota, creme e um
degrade branco disputando no mesmo icone, e nada lia.
figura principal .... creme quase branco (#F7EDE5)
apoio / fundo ....... o mesmo creme rebaixado por opacidade
elemento de acao .... terracota clara (#E9A87C) */
.esc-anim .st { stroke: #FBF5F0 !important; fill: none; vector-effect: non-scaling-stroke; }
.esc-anim svg { overflow: visible; }
/* TRES PESOS DE TRACO. E o que separa desenho tecnico de icon pack: a
silhueta pesa, a divisao interna e media, a cota e um fio. */
.esc-anim .sw-forte { stroke-width: 2.5; }
.esc-anim .sw-media { stroke-width: 1.7; opacity: .8; }
.esc-anim .sw-fina { stroke-width: 1; opacity: .45; }
.esc-anim .acento { stroke: #F0B187 !important; opacity: 1; }
/* PLANOS PREENCHIDOS. O volume nao vem do contorno, vem da diferenca de tom
entre as faces: topo mais claro, lateral direita media, esquerda no escuro. */
.esc-anim .fc { stroke: none; }
.esc-anim .fc-a { fill: rgba(251,245,240,.055); }
.esc-anim .fc-b { fill: rgba(251,245,240,.028); }
.esc-anim .fc-c { fill: rgba(240,177,135,.10); }
.esc-anim .fc-folha { fill: rgba(251,245,240,.07); }
.esc-anim .fc-esq { fill: rgba(251,245,240,.03); }
.esc-anim .fc-dir { fill: rgba(251,245,240,.075); }
.esc-anim .fc-telha-e { fill: rgba(240,177,135,.10); }
.esc-anim .fc-telha-d { fill: rgba(240,177,135,.19); }
.esc-anim .fc-vazio { fill: rgba(10,5,3,.5); }
.esc-anim .fc-mat-t { fill: rgba(240,177,135,.30); }
.esc-anim .fc-mat-d { fill: rgba(240,177,135,.17); }
.esc-anim .fc-mat-e { fill: rgba(240,177,135,.07); }
/* Sombra de apoio: o objeto passa a POUSAR em algum lugar em vez de flutuar. */
.esc-anim .sombra { fill: rgba(0,0,0,.55); filter: blur(3px); }
.ic-planta .mag-vidro { fill: rgba(240,177,135,.13); stroke: none; }
.ic-planta .mag-aro { stroke: #F0B187 !important; stroke-width: 2.6; }
.ic-planta .mag-cabo { stroke: #F0B187 !important; stroke-width: 3.2; stroke-linecap: round; }
.ic-planta .mag-brilho { stroke: #FFF6EF !important; stroke-width: 1.6; opacity: .75; }
.ic-planta .mag { filter: drop-shadow(0 3px 7px rgba(0,0,0,.55)); }
.ic-prancha .st.pr-folha { opacity: .5; }
.ic-prancha .st.lp { stroke: #F0B187 !important; stroke-width: 2.2; }
.ic-prancha .pr-lapis { filter: drop-shadow(0 3px 6px rgba(0,0,0,.5)); }
.ic-prancha .brilho { stroke: #FFF6EF; stroke-width: 7; opacity: 0; filter: blur(3px); }
.ic-carrinho .st.mat { stroke: #F0B187 !important; }
.ic-carrinho .st.cr-malha { opacity: .3; }
.ic-carrinho .cx { filter: drop-shadow(0 4px 6px rgba(0,0,0,.5)); }
.ic-obra .obra-scan { stroke: #FFF6EF; stroke-width: 1.6; opacity: 0;
filter: drop-shadow(0 0 8px rgba(240,177,135,.95)); }
/* as faces da casa so aparecem depois que a obra foi desenhada */
.ic-obra .fc-set { opacity: 1; }
/* Posicao de REPOUSO: sem animacao (print, PDF, reduced-motion) o icone
precisa estar montado e legivel. Nada nasce escondido. */
.ic-planta .mag { transform: translate(86px, 56px); }
.ic-prancha .pr-lapis { transform: translate(97.6px, 43.5px); }
/* Em repouso as tres cargas ficavam empilhadas em cima do cesto, uma por cima
da outra. Parado, o carrinho mostra UMA carga, ja dentro. */
.ic-carrinho .cx2, .ic-carrinho .cx3 { display: none; }
.ic-carrinho .cx1 { transform: translate(0, 20px); }
/* Repouso das cenas novas: parado, cada card mostra o quadro que melhor o
representa. A lente revela onde ela esta, o carrinho ja tem o visto, e o
volume extrudado (que e um tempo da animacao, nao o icone) fica fora. */
.ic-planta .mag-mask { transform: translate(86px, 56px); }
.ic-prancha .pr-volume { opacity: 0; }
/* A revelacao precisa ser LEGIVEL, senao o efeito nao existe: o que aparece
sob a lente e mais grosso e mais claro do que o resto da planta. */
.esc-anim .det-hachura { opacity: .55; stroke-width: 1.2; }
.esc-anim .det-mob { opacity: 1; stroke-width: 1.9; }
.esc-anim .det-cotaint { opacity: .8; stroke-width: 1.2; stroke: #F6C9A4 !important; }
.ic-planta .mag-vidro { fill: rgba(240,177,135,.16); }
.esc-card.visible .esc-anim .st,
.esc-card.is-revealed .esc-anim .st { animation: none; }
@media (prefers-reduced-motion: no-preference) {
.esc-card.visible .esc-anim .st,
.esc-card.is-revealed .esc-anim .st { animation: drawSt .95s var(--ease) forwards; }
/* --- 01 BRIEFING: a lupa GIRA em 3D enquanto percorre a planta -------- */
.ic-planta .mag { transform-box: fill-box; transform-origin: 50% 50%; }
.esc-card.visible .ic-planta .mag { animation: magPercorre 11s 1.6s cubic-bezier(.45,0,.2,1) infinite; }
@keyframes magPercorre {
0%,6% { transform: translate(42px, 34px) perspective(140px) rotateY(0deg); }
28%,34% { transform: translate(90px, 34px) perspective(140px) rotateY(22deg); }
53%,59% { transform: translate(90px, 61px) perspective(140px) rotateY(0deg); }
78%,84% { transform: translate(42px, 61px) perspective(140px) rotateY(-22deg); }
100% { transform: translate(42px, 34px) perspective(140px) rotateY(0deg); }
}
/* a mascara anda junto, SEM o giro (giro deformaria o recorte) */
.esc-card.visible .ic-planta .mag-mask { animation: magMascara 11s 1.6s cubic-bezier(.45,0,.2,1) infinite; }
@keyframes magMascara {
0%,6% { transform: translate(42px, 34px); }
28%,34% { transform: translate(90px, 34px); }
53%,59% { transform: translate(90px, 61px); }
78%,84% { transform: translate(42px, 61px); }
100% { transform: translate(42px, 34px); }
}
/* --- 02 PROJETO 3D: a prancheta balanca, o lapis desenha canto a canto -
O plano gira de leve nos dois eixos: e o que faz o retangulo ler como
folha deitada na mesa e nao como losango desenhado. */
.ic-prancha .pr-plano { transform-box: fill-box; transform-origin: 50% 50%; }
.esc-card.visible .ic-prancha .pr-plano { animation: prBalanco 12s ease-in-out infinite; }
@keyframes prBalanco {
0%,100% { transform: perspective(460px) rotateY(-5deg) rotateX(3deg); }
50% { transform: perspective(460px) rotateY(5deg) rotateX(-3deg); }
}
/* luz varrendo a folha quando a planta fecha: o brilho do papel couche */
.esc-card.visible .ic-prancha .pr-brilho { animation: prBrilho 9s 1s ease-in-out infinite; }
@keyframes prBrilho {
0%,82% { transform: translateX(0); opacity: 0; }
85% { opacity: .45; }
92% { opacity: .45; transform: translateX(96px); }
95%,100%{ opacity: 0; transform: translateX(96px); }
}
/* UM ciclo de 9s para a cena inteira. Cada traco tem os seus proprios
tempos dentro do MESMO ciclo, entao lapis, traco e volume nunca
desencontram (era o que acontecia com delay + duracoes diferentes). */
.esc-card.visible .ic-prancha .pr-lapis { animation: prLapis 9s 1s cubic-bezier(.5,0,.5,1) infinite; }
@keyframes prLapis {
0% { transform: translate(34.4px, 48.5px); opacity: 0; }
4% { transform: translate(34.4px, 48.5px); opacity: 1; }
17% { transform: translate(73.6px, 30.3px); }
30% { transform: translate(97.6px, 43.5px); }
43% { transform: translate(58.4px, 61.7px); }
55% { transform: translate(34.4px, 48.5px); }
61% { transform: translate(54px, 39.4px); }
69% { transform: translate(78px, 52.6px); opacity: 1; }
74%,100% { transform: translate(90px, 62px); opacity: 0; }
}
.esc-card.visible .ic-prancha .tr { animation-duration: 9s; animation-delay: 1s;
animation-timing-function: linear; animation-iteration-count: infinite; }
.esc-card.visible .ic-prancha .tr1 { animation-name: qtnTr1; }
.esc-card.visible .ic-prancha .tr2 { animation-name: qtnTr2; }
.esc-card.visible .ic-prancha .tr3 { animation-name: qtnTr3; }
.esc-card.visible .ic-prancha .tr4 { animation-name: qtnTr4; }
.esc-card.visible .ic-prancha .tr5 { animation-name: qtnTr5; }
@keyframes qtnTr1 { 0%,4%{stroke-dashoffset:100;opacity:1} 17%,90%{stroke-dashoffset:0;opacity:1} 96%,100%{stroke-dashoffset:0;opacity:0} }
@keyframes qtnTr2 { 0%,17%{stroke-dashoffset:100;opacity:1} 30%,90%{stroke-dashoffset:0;opacity:1} 96%,100%{stroke-dashoffset:0;opacity:0} }
@keyframes qtnTr3 { 0%,30%{stroke-dashoffset:100;opacity:1} 43%,90%{stroke-dashoffset:0;opacity:1} 96%,100%{stroke-dashoffset:0;opacity:0} }
@keyframes qtnTr4 { 0%,43%{stroke-dashoffset:100;opacity:1} 55%,90%{stroke-dashoffset:0;opacity:1} 96%,100%{stroke-dashoffset:0;opacity:0} }
@keyframes qtnTr5 { 0%,61%{stroke-dashoffset:100;opacity:1} 69%,90%{stroke-dashoffset:0;opacity:1} 96%,100%{stroke-dashoffset:0;opacity:0} }
/* a planta fechada EXTRUDA e vira volume */
.ic-prancha .pr-volume { transform-box: fill-box; transform-origin: 50% 100%; }
.esc-card.visible .ic-prancha .pr-volume { animation: prVolume 9s 1s cubic-bezier(.2,.8,.3,1) infinite; }
@keyframes prVolume {
0%,70% { transform: scaleY(.02); opacity: 0; }
74% { opacity: 1; }
82%,90% { transform: scaleY(1); opacity: 1; }
96%,100% { transform: scaleY(1); opacity: 0; }
}
/* --- 03 COMPRAS: o material CAI dentro do cesto, e o carrinho reage --- */
.ic-carrinho .cx2, .ic-carrinho .cx3 { display: block; }
.ic-carrinho .cx { opacity: 0; transform-box: fill-box; transform-origin: 50% 50%; }
/* ciclo unico de 10.8s: tres cargas entram, o visto carimba, recomeca */
.esc-card.visible .ic-carrinho .cx { animation-duration: 10.8s; animation-delay: 1.2s;
animation-timing-function: cubic-bezier(.5,0,.6,1); animation-iteration-count: infinite; }
.esc-card.visible .ic-carrinho .cx1 { animation-name: qtnCx1; }
.esc-card.visible .ic-carrinho .cx2 { animation-name: qtnCx2; }
.esc-card.visible .ic-carrinho .cx3 { animation-name: qtnCx3; }
@keyframes qtnCx1 {
0% { opacity: 0; transform: translate(0,-22px) scale(.76) rotate(-11deg); }
4% { opacity: 1; }
12% { transform: translate(0,21px) scale(1) rotate(0deg); }
14% { transform: translate(0,18.5px) scale(1) rotate(0deg); }
16%,84% { opacity: 1; transform: translate(0,20px) scale(1) rotate(0deg); }
92%,100%{ opacity: 0; transform: translate(0,20px) scale(1) rotate(0deg); }
}
@keyframes qtnCx2 {
0%,20% { opacity: 0; transform: translate(0,-22px) scale(.76) rotate(9deg); }
24% { opacity: 1; }
32% { transform: translate(0,21px) scale(1) rotate(0deg); }
34% { transform: translate(0,18.5px) scale(1) rotate(0deg); }
36%,84% { opacity: 1; transform: translate(0,20px) scale(1) rotate(0deg); }
92%,100%{ opacity: 0; transform: translate(0,20px) scale(1) rotate(0deg); }
}
@keyframes qtnCx3 {
0%,40% { opacity: 0; transform: translate(0,-22px) scale(.76) rotate(-7deg); }
44% { opacity: 1; }
52% { transform: translate(0,21px) scale(1) rotate(0deg); }
54% { transform: translate(0,18.5px) scale(1) rotate(0deg); }
56%,84% { opacity: 1; transform: translate(0,20px) scale(1) rotate(0deg); }
92%,100%{ opacity: 0; transform: translate(0,20px) scale(1) rotate(0deg); }
}
/* o visto de "custo conferido" so carimba depois da terceira carga */
.ic-carrinho .ck-marca { opacity: 0; }
.esc-card.visible .ic-carrinho .ck-marca { animation: qtnCk 10.8s 1.2s cubic-bezier(.2,.8,.3,1) infinite; }
@keyframes qtnCk {
0%,60% { stroke-dashoffset: 100; opacity: 0; }
63% { opacity: 1; }
70%,84% { stroke-dashoffset: 0; opacity: 1; }
90%,100% { stroke-dashoffset: 0; opacity: 0; }
}
/* a carga entra JA DENTRO do quadro: so fica invisivel enquanto esta acima
do cesto, para nada aparecer cortado na borda do card. */
@keyframes caiCarrinho {
0% { opacity: 0; transform: translate(0, -22px) scale(.76) rotate(-11deg); }
18% { opacity: 1; }
30% { transform: translate(0, 21px) scale(1) rotate(0deg); }
34% { transform: translate(0, 18.5px) scale(1) rotate(0deg); } /* assenta */
38% { transform: translate(0, 20px) scale(1) rotate(0deg); }
58% { opacity: 1; transform: translate(0, 20px) scale(1) rotate(0deg); }
70% { opacity: 0; transform: translate(0, 20px) scale(1) rotate(0deg); }
100% { opacity: 0; transform: translate(0, 20px) scale(1) rotate(0deg); }
}
/* o cesto afunda um fio a cada carga que entra */
.ic-carrinho .carro { transform-box: fill-box; transform-origin: 50% 90%; }
.esc-card.visible .ic-carrinho .carro { animation: carroPeso 10.8s 1.2s cubic-bezier(.3,0,.2,1) infinite; }
@keyframes carroPeso {
0%,11% { transform: translateY(0) rotate(0deg); }
15% { transform: translateY(1.2px) rotate(.4deg); }
20%,31% { transform: translateY(0) rotate(0deg); }
35% { transform: translateY(1.6px) rotate(.55deg); }
40%,51% { transform: translateY(0) rotate(0deg); }
55% { transform: translateY(2px) rotate(.7deg); }
62%,100%{ transform: translateY(0) rotate(0deg); }
}
/* --- 04 ACOMPANHAMENTO: a casa sobe tracinho por tracinho ------------- */
.ic-obra .casa { transform-box: fill-box; transform-origin: 50% 78%; }
.esc-card.visible .ic-obra .casa { animation: casaGira 14s 3.2s ease-in-out infinite; }
@keyframes casaGira {
0%,100% { transform: perspective(520px) rotateY(-6deg); }
50% { transform: perspective(520px) rotateY(6deg); }
}
/* A CASA RECONSTROI. Antes ela subia UMA vez, no scroll-in, e depois ficava
parada: quem chegava na dobra dois segundos atrasado nunca via a obra
acontecer, e o card virava um desenho estatico. Agora e ciclo de 14s:
sobe traco a traco, ganha as faces, e a varredura passa; depois some na
mesma ordem em que foi construida e recomeca. */
.ic-obra .fc-set { opacity: 0; }
.esc-card.visible .ic-obra .fc-set { animation: qtnFaces 14s 1s ease-out infinite; }
@keyframes qtnFaces { 0%,20%{opacity:0} 28%,80%{opacity:1} 88%,100%{opacity:0} }
.esc-card.visible .ic-obra .cs {
animation-name: qtnCasa; animation-duration: 14s;
animation-timing-function: var(--ease); animation-iteration-count: infinite;
}
@keyframes qtnCasa {
0% { stroke-dashoffset: 100; opacity: 1; }
5% { stroke-dashoffset: 0; opacity: 1; }
82% { stroke-dashoffset: 0; opacity: 1; }
89%,100%{ stroke-dashoffset: 0; opacity: 0; }
}
.esc-card.visible .ic-obra .cs1 { animation-delay: 1.00s; }
.esc-card.visible .ic-obra .cs2 { animation-delay: 1.26s; }
.esc-card.visible .ic-obra .cs3 { animation-delay: 1.52s; }
.esc-card.visible .ic-obra .cs4 { animation-delay: 1.78s; }
.esc-card.visible .ic-obra .cs5 { animation-delay: 2.04s; }
.esc-card.visible .ic-obra .cs6 { animation-delay: 2.32s; }
.esc-card.visible .ic-obra .cs7 { animation-delay: 2.60s; }
.esc-card.visible .ic-obra .cs8 { animation-delay: 2.86s; }
.esc-card.visible .ic-obra .cs9 { animation-delay: 3.14s; }
.esc-card.visible .ic-obra .cs10 { animation-delay: 3.40s; }
.esc-card.visible .ic-obra .obra-scan { animation: obraScan 14s 1s linear infinite; }
@keyframes obraScan {
0%,32% { transform: translateY(0); opacity: 0; }
36% { opacity: .85; }
62% { opacity: .85; transform: translateY(76px); }
66%,100%{ transform: translateY(76px); opacity: 0; }
}
}
/* -- 4. COMPARATIVO: os cards comecam onde o texto da dobra comeca --------
O eyebrow saia na borda do container e os dois cards ficavam centrados num
bloco de 920px. Texto de um lado, quadrado do outro. Agora o card abre no
mesmo eixo do "O" de "O que muda na sua obra". */
.risk-band .compare,
.risk-band .compare--tight {
max-width: none !important;
margin-left: 0 !important;
margin-right: 0 !important;
}
/* -- 5. A TAG DA QUARTEN, legivel sobre o card escuro --------------------
Terracota sobre marrom escuro nao tem contraste. Vira creme. */
.compare--tight .compare__tag--good,
.compare__tag--good {
background: rgba(247,239,233,.13) !important;
border: 1px solid rgba(247,239,233,.36) !important;
color: #FCF4EE !important;
font-size: 11px;
letter-spacing: .16em;
}
/* -- 6. QUEM ASSINA O SEU PROJETO ---------------------------------------
Era muita massa de texto ao lado de duas fotos espremidas num quadro so.
Virou: cabecalho, DUAS fotos grandes (uma por socia, com o nome embaixo)
e a bio curta. Fotos novas, originais do Drive das socias. */
.experts--duo { padding: clamp(64px, 8vw, 104px) 0; }
.experts--duo .experts__head { max-width: 46ch; margin-bottom: clamp(30px, 4vw, 46px); }
.experts--duo .experts__head .section-title { max-width: none; text-wrap: balance; }
.socias {
display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
gap: clamp(20px, 3vw, 40px);
align-items: start;
}
.socia__photo {
margin: 0 0 18px; overflow: hidden; background: #EDE7E2;
clip-path: polygon(0 0, 100% 0, 100% calc(100% - 26px), calc(100% - 26px) 100%, 0 100%);
box-shadow: 0 26px 52px -30px rgba(18,10,6,.55);
}
.socia__photo img {
display: block; width: 100%; height: auto;
aspect-ratio: 4/5; object-fit: cover; object-position: center top;
}
.socia__nome {
font-family: var(--font-heading); font-size: clamp(19px, 1.7vw, 23px);
color: var(--color-ink); line-height: 1.2; margin-bottom: 3px;
}
.socia__papel {
font-family: var(--font-roman); font-size: 11px; letter-spacing: .16em;
text-transform: uppercase; color: var(--color-primary); margin-bottom: 10px;
}
.socia__bio { font-size: 14.5px; line-height: 1.6; color: var(--color-text); max-width: 38ch; }
.experts__fecho {
margin-top: clamp(28px, 3.4vw, 42px); padding-top: clamp(20px, 2.4vw, 28px);
border-top: 1px solid var(--color-line);
font-size: 15px; line-height: 1.62; color: var(--color-text); max-width: 62ch;
}
.experts--duo .experts__cta { margin-top: 22px; }
@media (max-width: 640px) {
.socias { grid-template-columns: 1fr; gap: 30px; }
.socia__photo img { aspect-ratio: 3/4; }
}
/* ==========================================================================
REVISAO 5 (retorno do Gabriel, 29/07/2026)
========================================================================== */
/* -- 1. COMPARATIVO: o lado da Quarten precisa GANHAR a leitura ------------
(a) A tag "Quarten Arquitetura" era creme chapado sobre marrom. Vira
degrade largo nas cores da marca, com brilho correndo e pulso.
(b) O checklist estava em 92% de branco, peso normal, do mesmo tamanho do
lado ruim. Agora e branco puro, mais pesado e um degrau maior: o olho
tem que cair no lado certo primeiro. */
.compare--tight .compare__tag--good,
.compare__tag--good {
display: inline-block;
padding: 9px 20px !important;
font-size: 13px !important;
font-weight: 700 !important;
letter-spacing: .2em !important;
color: #FFFFFF !important;
border: 1px solid rgba(240,177,135,.55) !important;
background-image: linear-gradient(100deg,
#8D5039 0%, #B46A4C 18%, #F0C6AB 38%, #B46A4C 58%, #737D5A 78%, #B46A4C 100%) !important;
background-size: 260% 100% !important;
text-shadow: 0 1px 3px rgba(0,0,0,.45);
box-shadow: 0 10px 26px -12px rgba(180,106,76,.9);
animation: fluxoBtn 6s linear infinite, pulsoTag 2.8s var(--ease) infinite;
}
@keyframes pulsoTag {
0%,100% { box-shadow: 0 10px 26px -12px rgba(180,106,76,.9), 0 0 0 0 rgba(240,177,135,.42); }
55% { box-shadow: 0 12px 30px -12px rgba(180,106,76,1), 0 0 0 9px rgba(240,177,135,0); }
}
/* checklist do lado da Quarten: branco puro, mais pesado, maior */
.compare__col--good .compare__item {
color: #FFFFFF !important;
font-weight: 600 !important;
font-size: 15.4px !important;
line-height: 1.5 !important;
}
.compare__col--good .compare__ic { color: #FFD9BC !important; }
.compare__col--good .compare__ic svg { width: 22px; height: 22px; stroke-width: 3.1; }
.compare__col--good .compare__item + .compare__item { border-color: rgba(255,255,255,.16) !important; }
/* o lado ruim recua um degrau, para o contraste ENTRE os dois existir */
.compare__col--bad .compare__item { font-size: 14px !important; font-weight: 400 !important; }
/* -- 2. GALERIA -----------------------------------------------------------
Saiu o eyebrow "Um projeto, metro a metro" (nao dizia nada que o titulo ja
nao dissesse) e o Q da marca passou a abrir o titulo. */
.titulo-marca {
display: inline-block; flex: 0 0 auto;
width: .78em; height: .78em;
margin-right: .32em; vertical-align: -.02em;
background-color: var(--color-primary);
-webkit-mask: var(--mark-full) center / contain no-repeat;
mask: var(--mark-full) center / contain no-repeat;
}
.gallery__head { margin-bottom: 40px; }
/* fotos maiores no carrossel */
.marquee__item {
height: clamp(250px, 30vw, 400px) !important;
width: clamp(280px, 33vw, 452px) !important;
}
.marquee__item figcaption { font-size: 13.5px; padding: 12px 15px; }
/* -- 3. CTA DA GALERIA: degrade animado nas cores da marca ---------------- */
.btn--marca {
background-image: linear-gradient(100deg,
#7E452F 0%, #B46A4C 20%, #F2CDB2 42%, #B46A4C 62%, #737D5A 82%, #B46A4C 100%) !important;
background-size: 280% 100% !important;
color: #FFFFFF !important;
font-weight: 700;
font-size: 17px;
letter-spacing: .012em;
padding: 20px 40px;
text-shadow: 0 1px 4px rgba(0,0,0,.4);
border: 1px solid rgba(242,205,178,.5);
box-shadow: 0 18px 44px -16px rgba(180,106,76,.95);
animation: fluxoBtn 6.5s linear infinite, pulsoMarca 3s var(--ease) infinite;
}
/* o corpo dourado do .btn--accent ficava POR CIMA do degrade novo */
.btn--marca::before { display: none !important; }
.btn--marca svg { width: 20px; height: 20px; }
.btn--marca:hover { filter: brightness(1.07) saturate(1.06); }
@keyframes pulsoMarca {
0%,100% { box-shadow: 0 18px 44px -16px rgba(180,106,76,.95), 0 0 0 0 rgba(240,177,135,.45); }
60% { box-shadow: 0 20px 48px -16px rgba(180,106,76,1), 0 0 0 14px rgba(240,177,135,0); }
}
.gallery__cta { margin-top: clamp(30px, 4vw, 46px); text-align: center; }
/* -- 4. QUEM ASSINA: UM card, duas fotos empilhadas, um texto so ---------- */
.socias-card {
display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
gap: clamp(24px, 3.4vw, 48px);
align-items: center;
background: var(--color-bg-soft);
border: 1px solid var(--color-line);
padding: clamp(22px, 2.6vw, 34px);
box-shadow: 0 30px 64px -40px rgba(18,10,6,.5);
clip-path: polygon(0 0, 100% 0, 100% calc(100% - 28px), calc(100% - 28px) 100%, 0 100%);
}
/* As linhas do grid esticavam junto com a coluna de texto, entao a moldura
crescia sem limite e a foto da Layz (400x400 de origem) virava um close
cortado. A PROPORCAO agora e da moldura, nao da altura do card. */
.socias-card__fotos {
display: grid; grid-template-columns: 1fr; gap: 14px; align-content: center;
}
.socias-card .socia__photo {
margin: 0; overflow: hidden; background: #EDE7E2; aspect-ratio: 5/4;
clip-path: polygon(0 0, 100% 0, 100% calc(100% - 18px), calc(100% - 18px) 100%, 0 100%);
}
.socias-card .socia__photo img {
width: 100%; height: 100%; display: block;
aspect-ratio: auto; object-fit: cover;
}
/* Os dois arquivos ja saem em 5/4, recortados do original do Drive, entao a
moldura nao precisa mais cortar nada: o CSS so centraliza. */
.socias-card .socia__photo img { object-position: center center; }
.socias-card__lead {
font-family: var(--font-heading); font-size: clamp(17px, 1.5vw, 21px);
line-height: 1.45; color: var(--color-ink); margin-bottom: 18px; max-width: 40ch;
}
.socias-card__bio {
font-size: 15px; line-height: 1.66; color: var(--color-text);
max-width: 52ch; margin-bottom: 13px;
}
.socias-card__bio strong { color: var(--color-ink); font-weight: 600; }
.socias-card .experts__cta { margin-top: 22px; }
@media (max-width: 860px) {
.socias-card { grid-template-columns: 1fr; }
.socias-card__fotos { grid-template-rows: none; grid-template-columns: 1fr 1fr; }
}
@media (max-width: 460px) {
.socias-card__fotos { grid-template-columns: 1fr; grid-template-rows: 1fr 1fr; }
}
/* -- 5. LOGO DO CABECALHO: ela SE DESENHA ---------------------------------
Mesma logica do motivo do indoor do Jardim Moaz: o simbolo nao aparece,
ele e tracado. Aqui o contorno do Q foi vetorizado do proprio arquivo da
marca (OpenCV sobre o alpha do simbolo), entao o traco segue a forma real,
nao uma aproximacao desenhada a mao. Sequencia:
1. o contorno do Q corre e fecha (stroke-dashoffset, 1.25s)
2. o Q cheio nasce por dentro do traco (fade, 0.5s)
3. o lettering entra da esquerda (clip-path, 0.75s)
A LOGO EM SI nao foi tocada: e o mesmo PNG, so partido em duas camadas. */
.site-header__brand {
display: block; width: 92px; line-height: 0;
filter: drop-shadow(0 3px 8px rgba(0,0,0,.35));
}
/* o rodape usa a MESMA marca em duas camadas, so que maior */
.site-footer__logo {
display: block; width: clamp(110px, 11vw, 138px); line-height: 0;
filter: drop-shadow(0 4px 12px rgba(0,0,0,.4));
}
.site-header__brand img,
.site-footer__logo img { height: auto !important; width: 100% !important; display: block; filter: none; }
.marca-q { position: relative; display: block; }
/* Em repouso o traco NAO existe: sem animacao a marca e o arquivo original,
sem contorno sobreposto. Ele so vive durante a entrada. */
.marca-q__traco {
position: absolute; left: 30.331%; top: 0; width: 39.556%; height: 94.444%;
overflow: visible; pointer-events: none; opacity: 0;
}
/* stroke-width em unidades do viewBox (1000 de largura), NAO em pixel de tela:
com vector-effect o traco virava 26px de tela e fechava o Q num borrao. */
.marca-q__traco path {
fill: none; stroke: #C77E56; stroke-width: 46;
stroke-linecap: round; stroke-linejoin: round;
stroke-dasharray: 100; stroke-dashoffset: 0;
}
@media (max-width: 900px) { .site-header__brand { width: 68px; } }
@media (prefers-reduced-motion: no-preference) {
@keyframes qTraca { to { stroke-dashoffset: 0; } }
@keyframes qTracoVida { 0%, 69% { opacity: 1; } 90%, 100% { opacity: 0; } }
@keyframes qEntra { from { opacity: 0; } to { opacity: 1; } }
@keyframes letreiroEntra { to { clip-path: inset(0 0 0 0); } }
/* CABECALHO: dispara no load, esta na primeira dobra. */
.site-header__brand .marca-q__traco path { stroke-dashoffset: 100; animation: qTraca 1.25s .2s cubic-bezier(.5,0,.25,1) forwards; }
.site-header__brand .marca-q__traco { animation: qTracoVida 1.95s linear forwards; }
.site-header__brand .marca-q__solido { opacity: 0; animation: qEntra .55s 1.18s ease-out forwards; }
.site-header__brand .marca-texto { clip-path: inset(0 100% 0 0); animation: letreiroEntra .75s 1.5s cubic-bezier(.35,0,.2,1) forwards; }
/* RODAPE: dispara quando ENTRA EM CENA (data-reveal -> .is-revealed).
No load ela rodaria fora da tela e ninguem veria. Antes disso a marca
fica montada e visivel: se o observer nao rodar, nada some. */
.site-footer__logo.is-revealed .marca-q__traco path { stroke-dashoffset: 100; animation: qTraca 1.35s .15s cubic-bezier(.5,0,.25,1) forwards; }
.site-footer__logo.is-revealed .marca-q__traco { animation: qTracoVida 2.05s linear forwards; }
.site-footer__logo.is-revealed .marca-q__solido { animation: qEntra .6s 1.2s ease-out both; }
.site-footer__logo.is-revealed .marca-texto { animation: letreiroEntra .8s 1.55s cubic-bezier(.35,0,.2,1) both; }
}
/* O reveal generico ([data-reveal]) sobe o elemento inteiro em fade. Na marca
do rodape isso brigava com o desenho: a logo entrava por fade E por traco ao
mesmo tempo, e o traco sumia no meio. Aqui o reveal so serve de GATILHO. */
.site-footer__logo[data-reveal] { opacity: 1; transform: none; transition: none; }
/* -- 6. HERO: copy nova (H1 + H2) ----------------------------------------
O apoio virou
de verdade, como pedido. Mas `h1,h2,h3` herdam Marcellus
com peso 500 no bloco de tipografia, o que transformaria o paragrafo de
apoio em titulo. Aqui ele volta a ser TEXTO: fonte de corpo, peso normal e
entrelinha de leitura. A tag mudou, a aparencia nao. */
.hero__sub {
font-family: var(--font-body) !important;
font-weight: 400 !important;
letter-spacing: .002em !important;
font-size: clamp(14.5px, 1.12vw, 17px);
line-height: 1.68;
max-width: 58ch;
color: #E4D9D0;
margin-bottom: 26px;
}
/* O H1 novo tem 21 palavras contra 20 do anterior, mas frase mais longa por
linha. Em 21ch ele virava uma coluna estreita de oito linhas. */
.hero__headline {
max-width: 27ch;
font-size: clamp(25px, 2.85vw, 40px);
line-height: 1.22;
text-wrap: balance;
}
@media (max-height: 760px) {
.hero__headline { font-size: clamp(22px, 2.3vw, 32px); }
.hero__sub { font-size: 14.5px; }
}
/* ==========================================================================
REVISAO 6 (retorno do Gabriel, 29/07/2026)
========================================================================== */
/* -- 1. CABECALHO: contraste -----------------------------------------------
O degrade subia ate #3a2418 justamente no meio, onde ficam os links. Fundo
claro por baixo de texto claro e o que estava comendo o contraste. Agora o
fundo e escuro e PAREJO, e o texto sobe para branco quente. */
.site-header {
background: linear-gradient(100deg, #0C0603 0%, #1A0E08 50%, #0C0603 100%) !important;
border-bottom: 1px solid rgba(199,126,86,.5);
box-shadow: 0 12px 38px -14px rgba(0,0,0,.9);
}
.site-header.is-stuck, .site-header.scrolled, .site-header.is-solid {
background: linear-gradient(100deg, #080402 0%, #150B06 50%, #080402 100%) !important;
}
.site-nav a,
.site-nav a[data-section] { color: #FFF6F0 !important; font-weight: 500; }
.site-nav a[data-section]:hover { color: #fff !important; background: rgba(255,255,255,.14); }
.site-nav a[data-section].current {
color: #1A0E08 !important; background: #F3DDCD !important; font-weight: 600;
}
/* a barra de cima estava em terracota escura sobre quase preto: ilegivel */
.topbar {
background: linear-gradient(90deg, #0A0503 0%, #171A38 50%, #0A0503 100%);
border-bottom: 1px solid rgba(199,126,86,.42);
}
.topbar__text { color: #F0C6AB; font-weight: 600; }
/* -- 2. HERO: apoio menor, e o acento MUITO mais visivel -------------------
O acento estava na terracota da marca (#B46A4C) sobre marrom quase preto,
o que da contraste baixo justamente na frase que precisa saltar. */
.hero__sub {
font-size: clamp(13.5px, .98vw, 15.5px);
line-height: 1.66;
max-width: 62ch;
margin-bottom: 24px;
}
.hero__headline .accent {
color: #F7D3B8 !important;
font-weight: 600;
text-shadow: 0 2px 18px rgba(199,126,86,.45);
}
/* O ZERO em Marcellus e praticamente indistinguivel do O maiusculo, e a frase
estava lendo "O dor de cabeca". O algarismo passa a ser desenhado pela fonte
de corpo, que tem zero fechado e estreito. A palavra nao mudou. */
.hero__headline .num-zero {
font-family: var(--font-body);
font-weight: 700;
font-size: .88em;
letter-spacing: .01em;
}
/* -- 3. COMPARATIVO: o lado ruim precisa ser LIDO, nao adivinhado ----------
Eu tinha rebaixado esse card para o lado da Quarten ganhar. Rebaixei demais:
a acusacao tambem precisa ser lida, senao a comparacao nao existe. Sobe um
degrau, sem passar o lado bom. */
.compare__tag--bad {
padding: 8px 18px !important;
font-size: 12.5px !important;
font-weight: 700 !important;
letter-spacing: .17em !important;
color: #A62B1D !important;
background: rgba(192,57,43,.13) !important;
border: 1px solid rgba(166,43,29,.42) !important;
}
.compare__col--bad {
background: #FFFFFF;
border-top-color: #A62B1D;
box-shadow: 0 24px 54px -34px rgba(60,20,14,.4);
}
.compare__col--bad .compare__item {
color: #2B2320 !important; font-size: 14.6px !important; font-weight: 500 !important;
line-height: 1.5 !important;
}
.compare__col--bad .compare__ic { color: #C0392B !important; }
.compare__col--bad .compare__ic svg { width: 20px; height: 20px; stroke-width: 3; }
.compare__col--bad .compare__item + .compare__item { border-color: rgba(166,43,29,.2) !important; }
/* -- 4. PRIMEIRA DOBRA: escala e respiro ----------------------------------
Saiu o card acima do H1 (era um rotulo repetindo o que a H1 ja diz). Sem
ele, o H1 assume a abertura e a escala pode ser decidida de novo:
titulo ....... 37px no maximo (era 40, e sem o card ele nao precisa
brigar por atencao com nada acima)
apoio ........ 16px, um degrau acima do que estava, porque virou o
SEGUNDO nivel da dobra e nao o terceiro
Proporcao final titulo/apoio ~2,3:1, que e leitura de display, nao de
fine print. */
.hero__tag { display: none !important; }
/* PROPORCAO DO HERO, DERIVADA DO PLAYBOOK (referencia: LP do Romualdo, mesma
base da Nobre de onde esta LP foi clonada). Os numeros de lá, em 1440px:
H1 42px, peso 600, ls -0.015em, lh 1.2, medida 26ch, mb 26px
H2 19px, lh normal, medida 60ch, mb 36px
RAZOES que eu preservei: H2/H1 = 0.45 | mb(H1)/H1 = 0.62 | mb(H2)/H2 = 1.9
E o apoio um pouco MAIS largo que o titulo, que é como o playbook faz: a
dominancia do titulo vem de tamanho + peso, nao de medida. (Eu tinha
diagnosticado o contrario nas tentativas anteriores, e estava errado.)
DUAS ADAPTACOES NECESSARIAS, e o motivo de cada uma:
1. Marcellus, a fonte de titulo da Quarten, só existe em peso 400. O
Romualdo usa Montserrat 600. Sem o peso para pedir emprestado, a
dominancia tem que sair toda do TAMANHO e do espacamento negativo.
2. Este H1 tem 21 palavras contra ~12 do padrao. A 42px ele passaria de seis
linhas e estouraria a dobra. Escala absoluta desce para 36px, mantendo as
razoes acima intactas. O H2 desce mais, como voce liberou. */
.hero__text { max-width: 660px; }
.hero__headline {
font-size: clamp(25px, 2.6vw, 36px);
line-height: 1.2;
letter-spacing: -.015em;
max-width: 26ch;
margin-bottom: 22px; /* 0.62 x 36 */
text-wrap: balance;
}
.hero__sub {
font-size: clamp(13.5px, 1.05vw, 15px);
line-height: 1.68;
max-width: 60ch; /* medida do playbook */
margin-bottom: 28px; /* 1.9 x 15 */
color: #E6DCD4;
}
.hero__cta { gap: 14px; }
.hero__cue { margin-top: 24px; }
@media (max-width: 900px) {
.hero__text { max-width: 100%; }
.hero__headline { max-width: 100%; }
.hero__sub { max-width: 100%; }
}
@media (max-height: 760px) {
.hero__headline { font-size: clamp(23px, 2.1vw, 31px); margin-bottom: 19px; }
.hero__sub { font-size: 13.5px; margin-bottom: 22px; }
}
/* ==========================================================================
REVISAO 7: a primeira dobra estava com CONTRASTE DE TEXTO alto (branco sobre
#140c07 da 18:1) e ainda assim lia como sem contraste. O problema era outro:
MONOTONIA TONAL. A foto de fundo estava esmagada em brightness(.42) debaixo
de um overlay de 95%, entao a dobra virava um retangulo marrom chapado, sem
figura e fundo, sem luz e sem nada para o olho pousar. Contraste nao e razao
entre duas cores, e diferenca dentro do quadro inteiro.
========================================================================== */
/* -- 1. LUZ NA DOBRA -------------------------------------------------------
A foto volta a existir, e o overlay abre da esquerda (onde vive o texto)
para a direita (onde vive a imagem). O texto nao perde contraste porque
ganhou um scrim proprio, local, no item 2. */
.hero__bg img {
filter: grayscale(.22) contrast(.94) brightness(.62) saturate(.9) !important;
object-position: center 60%;
}
/* Scrim LINEAR, atravessando a dobra inteira. A versao anterior tinha um
degrade radial atras do texto: um borrao escuro com halo em volta do H1, que
e exatamente o que ficou ruim. Aqui a transicao e reta e continua, entao o
lado do texto e escuro por igual e a imagem abre para a direita sem mancha. */
.hero__overlay {
background: linear-gradient(100deg,
rgba(13,7,4,.97) 0%, rgba(13,7,4,.94) 42%,
rgba(13,7,4,.68) 74%, rgba(13,7,4,.40) 100%) !important;
}
.hero__text { position: relative; z-index: 2; }
/* nada de fundo proprio atras do texto */
.hero__text::before { content: none !important; display: none !important; }
/* -- 3. UM PONTO DE ENTRADA, sem trazer de volta o card ------------------
Fio vertical terracota com brilho a esquerda do bloco de texto. Le como a
linha de margem de uma prancha, entao e acento grafico e nao rotulo. */
.hero__text::after {
content: ""; position: absolute; left: -34px; top: 4px; bottom: 34%;
width: 3px; border-radius: 2px;
background: linear-gradient(180deg, #F7D3B8, #C77E56 45%, transparent);
box-shadow: 0 0 18px rgba(199,126,86,.75);
}
/* -- 4. O ACENTO E O PONTO MAIS BRILHANTE DA DOBRA ---------------------- */
.hero__headline { color: #FFFFFF; }
.hero__headline .accent {
color: #FCDCC2 !important;
animation: acentoBrilha 4.6s ease-in-out infinite;
}
@keyframes acentoBrilha {
0%,100% { text-shadow: 0 2px 16px rgba(199,126,86,.4); }
50% { text-shadow: 0 2px 26px rgba(247,211,184,.72); }
}
.hero__sub { color: #EFE6DE; }
/* -- 5. BOTAO SECUNDARIO: era o elemento mais fraco da dobra -------------
rgba(255,255,255,.14) sem borda nenhuma, ao lado de um botao com degrade
animado e pulso. Virava borrao. Agora tem aro creme e texto quase branco. */
.hero__cta .btn--ghost-light {
background: rgba(255,255,255,.07) !important;
border: 1.6px solid rgba(252,220,194,.6) !important;
color: #FFF8F2 !important;
font-weight: 600;
}
.hero__cta .btn--ghost-light:hover {
background: rgba(252,220,194,.16) !important;
border-color: rgba(252,220,194,.9) !important;
}
.hero__cta .btn--accent { font-size: 16.5px; font-weight: 700; }
/* -- 6. A FOTO PRECISA DE MOLDURA ---------------------------------------
Sem aro nem sombra, a imagem se dissolvia no fundo escuro. Aro por
box-shadow inset, que sobrevive ao clip-path do chanfro. */
.hero__slider {
box-shadow: inset 0 0 0 1px rgba(252,220,194,.34), 0 46px 96px -42px rgba(0,0,0,.95);
}
.hero__dots span { height: 4px; background: rgba(255,255,255,.5); }
.hero__dots span.is-on { background: #FCDCC2; box-shadow: 0 0 10px rgba(252,220,194,.8); }
/* -- 7. CHAMADA DE DESCIDA mais presente ------------------------------- */
.hero__cue { border-top-color: rgba(252,220,194,.3); color: #F3E6DC; }
.hero__cue:hover { color: #fff; }
@media (max-width: 900px) {
/* no mobile o texto ja esta sobre superficie solida: o fio sai */
.hero__text::after { display: none; }
}
/* -- 5. QUEM ASSINA: as fotos pesavam mais que o texto ---------------------
A coluna de fotos tinha 41% da largura, e duas molduras 5/4 empilhadas
somavam mais altura do que o texto inteiro. Resultado: o card era definido
pelas fotos e o texto flutuava no meio de um vazio. A coluna de imagem
recua para ~29%, entao as duas fotos somadas ficam na altura do texto. */
.socias-card {
grid-template-columns: minmax(0, .58fr) minmax(0, 1.42fr);
gap: clamp(24px, 3.2vw, 44px);
padding: clamp(24px, 2.8vw, 38px);
}
.socias-card__fotos { gap: 12px; }
.socias-card__lead {
font-size: clamp(17px, 1.5vw, 21px);
line-height: 1.46;
max-width: 42ch;
margin-bottom: 20px;
}
.socias-card__bio {
font-size: 15.2px;
line-height: 1.68;
max-width: 60ch;
margin-bottom: 14px;
}
.socias-card .experts__cta { margin-top: 26px; }
/* ==========================================================================
REVISAO 8 (retorno do Gabriel, 30/07/2026)
Bloco no fim do arquivo de proposito: e a ultima palavra na cascata.
========================================================================== */
/* -- 1. SAIRAM OS TRACOS SOB AS PALAVRAS ---------------------------------
A regua chanfrada embaixo de cada trecho em terracota ("uma frente so",
"no meu caso", "a frente da Quarten", "projeto de arquitetura") era enfeite
solto: nao existe na logo da Quarten e nao carrega informacao nenhuma. O
destaque do acento passa a ser SO a cor, que ja basta. */
.section-title .accent::after,
.accent::after { content: none !important; display: none !important; }
/* -- 2. REGUA DE AUTORIDADE: sem traco, sem risco, uma cor so -------------
Saiu tambem o fio horizontal no topo da dobra e os riscos verticais entre
os numeros. Numero grande separado por espaco ja se le como tres blocos. */
.proof--tight::before { content: none !important; display: none !important; }
.stat + .stat::before { content: none !important; display: none !important; }
.stat::after { content: none !important; display: none !important; }
.stat__num,
.stat__num span,
.stat__mais,
.stat__unit {
color: #F7EFE9 !important;
-webkit-text-fill-color: #F7EFE9 !important;
background: none !important;
text-shadow: none !important;
filter: none !important;
animation: none !important;
}
.proof--tight { border-top: 1px solid rgba(247,239,233,.10); }
/* no celular a dobra empilha: os riscos entre os numeros tambem saem */
@media (max-width: 620px) {
.stat { border-top: 0 !important; padding: 10px 0; }
.proof__stats { gap: 30px; }
}
/* ==========================================================================
-- 3. AS QUATRO ANIMACOES: UMA PALETA SO ---------------------------------
O problema nao era o traco, era a quantidade de tons brigando dentro do
mesmo icone (creme, terracota, marrom e um degrade). Agora sao TRES niveis
e mais nada:
traco ............ creme quase branco #FBF5F0
superficie ....... o mesmo creme a 7% (uma unica cor de preenchimento)
acento ........... terracota clara #F0B187 (so no que puxa o olho)
========================================================================== */
.esc-anim .st { stroke: #FBF5F0 !important; }
.esc-anim .sw-forte { stroke-width: 2.6; opacity: 1; }
.esc-anim .sw-media { stroke-width: 1.8; opacity: .82; }
.esc-anim .sw-fina { stroke-width: 1.2; opacity: .5; }
.esc-anim .acento { stroke: #F0B187 !important; opacity: 1; }
/* UMA cor de preenchimento neutra e UMA de acento. Nada de meia carta branca,
meia marrom e meia de outra cor: as classes antigas caem todas na mesma. */
.esc-anim .fc { stroke: none; }
.esc-anim .fc-a, .esc-anim .fc-b, .esc-anim .fc-c,
.esc-anim .fc-esq, .esc-anim .fc-dir, .esc-anim .fc-folha,
.esc-anim .fc-vazio, .esc-anim .fc-papel, .esc-anim .fc-cesto,
.esc-anim .fc-parede { fill: rgba(251,245,240,.07) !important; }
.esc-anim .fc-telha-e, .esc-anim .fc-telha-d,
.esc-anim .fc-mat-t, .esc-anim .fc-mat-d, .esc-anim .fc-mat-e,
.esc-anim .fc-mat, .esc-anim .fc-telhado { fill: rgba(240,177,135,.20) !important; }
/* -- 01 BRIEFING E ESTUDO: a cena fica, so as cores mudam ----------------- */
.ic-planta .mag-vidro { fill: rgba(240,177,135,.14); stroke: none; }
.ic-planta .mag-aro { stroke: #F0B187 !important; stroke-width: 2.6; opacity: 1; }
.ic-planta .mag-cabo { stroke: #F0B187 !important; stroke-width: 3.2; opacity: 1; }
.ic-planta .mag-brilho { stroke: #FFF8F3 !important; stroke-width: 1.5; opacity: .8; }
.ic-planta .mag { filter: drop-shadow(0 3px 7px rgba(0,0,0,.5)); }
.esc-anim .det-hachura { opacity: .5; stroke-width: 1.2; }
.esc-anim .det-mob { opacity: .95; stroke-width: 1.9; }
.esc-anim .det-cotaint { opacity: .85; stroke-width: 1.2; stroke: #F0B187 !important; }
/* -- 02 PROJETO 3D: papel + lapis ---------------------------------------- */
.ic-prancha .pr-folha { opacity: .55; }
.ic-prancha .pr-margem { opacity: .32; }
.ic-prancha .st.lp { stroke: #F0B187 !important; stroke-width: 2.2; opacity: 1; }
.ic-prancha .pr-lapis { filter: drop-shadow(0 3px 6px rgba(0,0,0,.55)); }
/* repouso: o desenho fechado e o lapis no fim do ultimo traco */
.ic-prancha .pr-lapis { transform: translate(98px, 52px); }
/* -- 03 COMPRAS: carrinho de perfil, carga em terracota ------------------ */
.ic-carrinho .st.cr { stroke: #FBF5F0 !important; }
.ic-carrinho .st.cr-malha { opacity: .34; }
.ic-carrinho .st.mat { stroke: #F0B187 !important; }
.ic-carrinho .cx { filter: drop-shadow(0 4px 7px rgba(0,0,0,.5)); }
/* parado, o carrinho mostra UMA carga, ja dentro do cesto */
.ic-carrinho .cx2, .ic-carrinho .cx3 { display: none; }
.ic-carrinho .cx1 { transform: translate(0, 28px); }
/* -- 04 ACOMPANHAMENTO: a casa de frente, traco a traco ------------------ */
.ic-obra .obra-scan { stroke: #FFF8F3; stroke-width: 1.6; opacity: 0;
filter: drop-shadow(0 0 8px rgba(240,177,135,.95)); }
/* casa de frente nao gira: rotacionar uma elevacao so deforma o desenho */
.esc-card.visible .ic-obra .casa,
.esc-card.is-revealed .ic-obra .casa { animation: none !important; transform: none !important; }
@media (prefers-reduced-motion: no-preference) {
/* --- 02: o lapis percorre o papel e o traco NASCE sob a ponta dele ----- */
.esc-card.visible .ic-prancha .pr-lapis { animation: prLapis 9s 1s cubic-bezier(.45,0,.55,1) infinite; }
@keyframes prLapis {
0% { transform: translate(34px, 30px); opacity: 0; }
4% { transform: translate(34px, 30px); opacity: 1; }
16% { transform: translate(98px, 30px); opacity: 1; }
26% { transform: translate(98px, 70px); opacity: 1; }
38% { transform: translate(34px, 70px); opacity: 1; }
48% { transform: translate(34px, 30px); opacity: 1; }
50% { transform: translate(34px, 30px); opacity: 0; }
53% { transform: translate(66px, 30px); opacity: 0; }
55% { transform: translate(66px, 30px); opacity: 1; }
64% { transform: translate(66px, 70px); opacity: 1; }
66% { transform: translate(66px, 70px); opacity: 0; }
69% { transform: translate(66px, 52px); opacity: 0; }
71% { transform: translate(66px, 52px); opacity: 1; }
79% { transform: translate(98px, 52px); opacity: 1; }
86%,100% { transform: translate(98px, 52px); opacity: 0; }
}
.esc-card.visible .ic-prancha .tr6 { animation-name: qtnTr6; }
@keyframes qtnTr1 { 0%,4% {stroke-dashoffset:100;opacity:1} 16%,88%{stroke-dashoffset:0;opacity:1} 96%,100%{stroke-dashoffset:0;opacity:0} }
@keyframes qtnTr2 { 0%,16%{stroke-dashoffset:100;opacity:1} 26%,88%{stroke-dashoffset:0;opacity:1} 96%,100%{stroke-dashoffset:0;opacity:0} }
@keyframes qtnTr3 { 0%,26%{stroke-dashoffset:100;opacity:1} 38%,88%{stroke-dashoffset:0;opacity:1} 96%,100%{stroke-dashoffset:0;opacity:0} }
@keyframes qtnTr4 { 0%,38%{stroke-dashoffset:100;opacity:1} 48%,88%{stroke-dashoffset:0;opacity:1} 96%,100%{stroke-dashoffset:0;opacity:0} }
@keyframes qtnTr5 { 0%,55%{stroke-dashoffset:100;opacity:1} 64%,88%{stroke-dashoffset:0;opacity:1} 96%,100%{stroke-dashoffset:0;opacity:0} }
@keyframes qtnTr6 { 0%,71%{stroke-dashoffset:100;opacity:1} 79%,88%{stroke-dashoffset:0;opacity:1} 96%,100%{stroke-dashoffset:0;opacity:0} }
/* --- 03: tijolo, tinta e revestimento CAEM dentro do carrinho --------- */
.ic-carrinho .cx2, .ic-carrinho .cx3 { display: block; }
@keyframes qtnCx1 {
0% { opacity: 0; transform: translate(0,-16px) scale(.8) rotate(-11deg); }
4% { opacity: 1; }
12% { transform: translate(0,29.5px) scale(1) rotate(0deg); }
14% { transform: translate(0,26px) scale(1) rotate(0deg); }
16%,84% { opacity: 1; transform: translate(0,28px) scale(1) rotate(0deg); }
92%,100%{ opacity: 0; transform: translate(0,28px) scale(1) rotate(0deg); }
}
@keyframes qtnCx2 {
0%,20% { opacity: 0; transform: translate(0,-16px) scale(.8) rotate(9deg); }
24% { opacity: 1; }
32% { transform: translate(0,29.5px) scale(1) rotate(0deg); }
34% { transform: translate(0,26px) scale(1) rotate(0deg); }
36%,84% { opacity: 1; transform: translate(0,28px) scale(1) rotate(0deg); }
92%,100%{ opacity: 0; transform: translate(0,28px) scale(1) rotate(0deg); }
}
@keyframes qtnCx3 {
0%,40% { opacity: 0; transform: translate(0,-16px) scale(.8) rotate(-7deg); }
44% { opacity: 1; }
52% { transform: translate(0,29.5px) scale(1) rotate(0deg); }
54% { transform: translate(0,26px) scale(1) rotate(0deg); }
56%,84% { opacity: 1; transform: translate(0,28px) scale(1) rotate(0deg); }
92%,100%{ opacity: 0; transform: translate(0,28px) scale(1) rotate(0deg); }
}
/* --- 04: a varredura desce sobre a casa de frente --------------------- */
@keyframes obraScan {
0%,32% { transform: translateY(0); opacity: 0; }
36% { opacity: .85; }
62% { opacity: .85; transform: translateY(68px); }
66%,100%{ transform: translateY(68px); opacity: 0; }
}
}
/* -- 4. A TAG "QUARTEN ARQUITETURA" PRECISA SER LIDA ---------------------
Ela estava em branco sobre um degrade animado que passava por tons claros:
em metade do ciclo o texto sumia dentro do proprio fundo. Chip creme
chapado com texto escuro: le em qualquer frame, e para de piscar. */
.compare--tight .compare__tag--good,
.compare__tag--good {
background: #F3DDCD !important;
background-image: none !important;
border: 1px solid #F3DDCD !important;
color: #2B1A12 !important;
font-size: 13px !important;
font-weight: 700 !important;
letter-spacing: .18em !important;
padding: 9px 20px !important;
text-shadow: none !important;
box-shadow: 0 10px 26px -14px rgba(0,0,0,.8) !important;
animation: none !important;
}
/* -- 5. CARROSSEL: sem esfumacado e sem degrade por cima da foto ---------
As bordas do trilho tinham mascara de fade e cada foto tinha um degrade
preto cobrindo a metade de baixo. Era o que voce ja tinha pedido para
tirar. A legenda passa a ter tarja propria, so atras dela. */
.marquee {
-webkit-mask-image: none !important;
mask-image: none !important;
}
.marquee__item::after { content: none !important; display: none !important; }
.marquee__item figcaption {
left: 0; right: 0; bottom: 0;
padding: 12px 16px;
background: rgba(18,10,6,.72);
font-size: 13.5px;
}
/* -- 6. QUEM ASSINA: duas fotos GRANDES, e so o texto necessario ----------
Antes eram tres paragrafos ao lado de duas miniaturas empilhadas. Agora a
foto e o elemento principal (uma coluna inteira cada) e o texto por sócia
cabe em duas linhas. */
.experts--duo .socias {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: clamp(24px, 3.4vw, 52px);
align-items: start;
}
.socia { margin: 0; }
.experts--duo .socia__photo {
margin: 0; overflow: hidden; background: #EDE7E2; aspect-ratio: 4 / 5;
clip-path: polygon(0 0, 100% 0, 100% calc(100% - 26px), calc(100% - 26px) 100%, 0 100%);
box-shadow: 0 30px 60px -34px rgba(18,10,6,.55);
}
.experts--duo .socia__photo img {
width: 100%; height: 100%; display: block;
object-fit: cover; object-position: center 18%;
}
.socia figcaption { display: block; padding-top: 20px; }
.socia__nome {
display: block; font-family: var(--font-heading);
font-size: clamp(20px, 1.8vw, 25px); line-height: 1.2;
color: var(--color-ink); font-weight: 500;
}
.socia__papel {
display: block; font-family: var(--font-roman);
font-size: 11.5px; letter-spacing: .16em; text-transform: uppercase;
color: var(--color-primary); margin: 6px 0 11px;
}
.socia__bio {
display: block; font-size: 15px; line-height: 1.6;
color: var(--color-text); max-width: 42ch;
}
.socias__fecho {
margin-top: clamp(28px, 3.2vw, 40px);
padding-top: clamp(18px, 2.2vw, 24px);
border-top: 1px solid var(--color-line);
font-size: clamp(16px, 1.4vw, 18px); line-height: 1.6;
color: var(--color-text); max-width: 60ch;
}
.experts--duo .experts__cta { margin-top: 22px; }
@media (max-width: 640px) {
.experts--duo .socias { grid-template-columns: 1fr; gap: 34px; }
}
/* -- 7. O CARD COMECA NO "O" DE "O QUE MUDA NA SUA OBRA" ------------------
O que empurrava o texto para dentro era o simbolo Q colado na frente de
TODO eyebrow: o quadrado abria na borda do container e a palavra comecava
15px depois. Sai o marcador. Sem ele, eyebrow, titulo e card abrem todos
no mesmo eixo, em todas as dobras. */
.eyebrow::before { content: none !important; display: none !important; }
.eyebrow { gap: 0; }
.titulo-marca { display: none !important; }
/* -- 8. CTA DA GALERIA: uma cor so ---------------------------------------
O degrade tinha terracota, creme e oliva correndo dentro do mesmo botao,
entao ele lia como metade marrom, metade verde. Botao de conversao nao
pode depender de qual frame da animacao o visitante pegou. */
.btn--marca {
background-image: none !important;
background: var(--color-primary) !important;
border: 1px solid rgba(243,221,205,.55) !important;
color: #FFFFFF !important;
text-shadow: none;
animation: none !important;
box-shadow: 0 18px 44px -18px rgba(180,106,76,.95) !important;
}
.btn--marca:hover { background: var(--color-primary-strong) !important; filter: none; }
/* o lapis em repouso ficava em cima da linha que ele acabou de desenhar */
.ic-prancha .pr-lapis { transform: translate(101px, 57px); }
/* -- 9. OVERFLOW HORIZONTAL EM 393px -------------------------------------
Achado medindo a pagina dentro de um iframe de 393px: o documento rolava
440px. A coluna do comparativo e faixa de grade `1fr`, que por padrao tem
`min-width: auto`, entao o conteudo mais largo (a tag em `nowrap`) empurrava
a faixa para fora do container. `min-width: 0` devolve a faixa ao container
e a tag passa a poder quebrar em tela pequena. */
.compare, .compare--tight { min-width: 0; }
.compare__col, .compare--tight .compare__col { min-width: 0; }
.compare__item, .compare__list { min-width: 0; }
@media (max-width: 760px) {
.compare__tag,
.compare--tight .compare__tag--good,
.compare__tag--good { white-space: normal; letter-spacing: .12em !important; }
}
/* ==========================================================================
REVISAO 9 (retorno do Gabriel, 30/07/2026)
Ultimo bloco do arquivo de proposito: e a ultima palavra na cascata.
========================================================================== */
/* -- 1. TITULO COM A CARA DA MARCA ----------------------------------------
O manual da Quarten tem DUAS fontes: Trajan Pro no titulo e Montserrat no
corpo. Como Trajan so existe em MAIUSCULAS (e um H1 inteiro em caixa alta
nao se le), o titulo caiu todo em Montserrat e a dobra perdeu a cara dela:
sobrou uma sans generica, que e exatamente a reclamacao.
MARCELLUS resolve. Ela e desenhada a partir das mesmas capitulares romanas
que originaram a Trajan (mesmo esqueleto, mesma serifa triangular, mesmo
eixo), mas TEM minusculas. Ja estava carregada no , sem uso.
Peso unico 400, entao a dominancia do titulo sai do TAMANHO, nao do peso. */
/* ⛔ ARMADILHA: este token existia em PARALELO ao --font-heading, e com
`!important`. Quando a Spectral saiu do , a pilha aqui caiu para a
"Trajan Pro", que SO TEM MAIUSCULAS: o H2 "Tipos de reforma que conduzimos"
virou "TIPOS DE REFORMA QUE CONDUZIMOS" em serifada, e o `!important`
impedia o bloco de tipografia novo de corrigir.
Dois tokens para a mesma decisao é o defeito. Agora ele aponta para o
--font-heading e para de ter vida própria. */
:root { --font-titulo: var(--font-heading); }
.hero__headline,
.section-title,
.socias-card__lead,
.form-head .section-title,
.lead-popup__title { font-family: var(--font-titulo) !important; }
.hero__headline {
font-weight: 400;
font-size: clamp(29px, 3.2vw, 44px);
line-height: 1.17;
letter-spacing: .004em; /* romana nao pede tracking negativo */
max-width: 21ch; /* o H1 encurtou de 21 para 15 palavras */
margin-bottom: 20px;
}
.hero__headline .accent { font-weight: 400; }
/* peso e tracking eram de romana (400 e tracking positivo). Com a Montserrat
o titulo some: sans em 400 grande nao domina, e tracking positivo abre
demais. Volta para 600 e tracking negativo. */
.section-title { font-weight: 600; letter-spacing: -.015em; }
.section-title .accent { font-weight: 600; }
/* O H2 fica em Montserrat: e o pareamento do proprio manual (romana no titulo,
sans no corpo). O que estava ruim nele era o corpo pequeno demais debaixo de
um titulo grande, entao ele sobe e a medida encurta. */
.hero__sub {
font-family: var(--font-body);
font-weight: 400;
font-size: clamp(15px, 1.18vw, 17px);
line-height: 1.62;
max-width: 46ch;
margin-bottom: 30px;
color: #EFE6DE;
}
@media (max-height: 760px) {
.hero__headline { font-size: clamp(26px, 2.5vw, 36px); margin-bottom: 17px; }
.hero__sub { font-size: 15px; margin-bottom: 24px; }
}
/* -- 2. A FOTO DA PRIMEIRA DOBRA ESTAVA GRANDE DEMAIS ----------------------
4/5 numa coluna de ~530px dava 660px de altura, mais que o bloco de texto
inteiro: o carrossel virava o assunto da dobra. Vira quadrado e ganha teto
de largura, entao o texto volta a mandar. */
/* As duas regras vao DENTRO do min-width: o empilhamento do mobile mora num
`@media (max-width:900px)` la em cima, e como este bloco e o ultimo do
arquivo, uma regra solta aqui venceria por ordem e devolveria as duas
colunas ao celular (foi o que aconteceu na primeira tentativa).
ATENCAO 2: `margin-left:auto` desliga o stretch do grid item, e como TODO
slide e position:absolute o fit-content vira ZERO e o carrossel some sem
deixar rastro. Encostar a direita e com justify-self. */
@media (min-width: 901px) {
.hero__inner { grid-template-columns: minmax(0, 1.3fr) minmax(0, .86fr); }
.hero__slider {
aspect-ratio: 1 / 1;
width: min(100%, 415px);
justify-self: end;
}
}
/* BUG QUE JA ESTAVA AQUI, achado ao medir 393px: o empilhamento do hero mora
num `@media (max-width:900px)` (l. 2932), mas 130 linhas ABAIXO dele existe
um `.hero__inner { grid-template-columns: 1.14fr 1fr }` SEM media nenhuma
(l. 3060). Sem media, ela valia tambem no celular e vencia por ordem: o
hero nunca empilhou no mobile, o texto ficava espremido em meia tela e o
carrossel saia cortado na borda. Aqui o empilhamento e restabelecido. */
@media (max-width: 900px) {
.hero__inner { grid-template-columns: 1fr; gap: 26px; }
.hero__text { order: 1; }
.hero__slider {
order: 2;
aspect-ratio: 16 / 11;
width: 100%;
justify-self: stretch;
}
}
/* -- 3. CARROSSEL DE PROJETOS MENOR ---------------------------------------
Estava em 452x400: cabiam duas imagens e meia na tela, entao a dobra lia
como slideshow. Menor, entra mais projeto no mesmo campo de visao. */
.marquee__item {
height: clamp(215px, 23vw, 310px) !important;
width: clamp(240px, 26vw, 350px) !important;
}
.marquee__item figcaption { font-size: 12.8px; padding: 10px 14px; }
/* -- 4. O CARD DA QUARTEN PRECISA GANHAR O COMPARATIVO --------------------
Os dois cards tinham o mesmo peso visual, entao a dobra lia como "duas
opcoes" em vez de "uma escolha". O da Quarten cresce (aro creme, sombra e
corpo maior), o outro recua. So no desktop: em coluna unica isso estouraria
a largura do container.
NADA de transform nem de opacity aqui: as duas colunas sao [data-reveal], e
o reveal termina em `transform: translateY(0)` com especificidade maior, o
que mataria a escala (e, no caminho, a animacao de entrada). O card cresce
por MARGEM NEGATIVA, que ninguem disputa. */
@media (min-width: 761px) {
.compare__col--good {
margin: -14px -10px;
padding: clamp(34px, 3.4vw, 46px) clamp(30px, 3vw, 40px) clamp(28px, 3vw, 38px);
z-index: 2;
border: 1px solid rgba(240, 177, 135, .55) !important;
box-shadow: 0 48px 96px -34px rgba(18, 10, 6, .9),
0 0 0 6px rgba(180, 106, 76, .10) !important;
}
.compare__col--bad {
background: #F4F2F0;
border-color: rgba(18, 10, 6, .10);
box-shadow: none;
}
}
.compare__col--good .compare__tag--good {
box-shadow: 0 10px 24px -10px rgba(180, 106, 76, .9);
}
.compare__col--good .compare__item { color: rgba(255, 255, 255, .96); }
/* -- 5. QUEM ASSINA: UM card, as duas fotos juntas, UM texto so -----------
Os dois textos por socia e o fecho sairam a pedido do Gabriel. O card
voltou ao layout de card unico, mas as fotos hoje sao 4/5 (foram
recortadas em retrato na revisao passada), entao a moldura acompanha:
5/4 aqui cortaria as duas na altura do rosto. */
.socias-card {
grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
align-items: center;
}
.socias-card__fotos { grid-template-columns: 1fr 1fr; gap: 12px; }
.socias-card .socia__photo {
aspect-ratio: 4 / 5;
box-shadow: 0 26px 52px -30px rgba(18, 10, 6, .55);
}
.socias-card .socia__photo img { object-position: center 18%; }
.socias-card__lead { font-weight: 400; line-height: 1.34; }
.socias-card__lead strong { font-weight: 400; color: var(--color-primary); }
@media (max-width: 860px) {
.socias-card { grid-template-columns: 1fr; }
.socias-card__fotos { grid-template-columns: 1fr 1fr; }
}
/* -- 6. O BOTAO DO CARD VENCEDOR ERA VERDE NEON --------------------------
`.btn--green` veio do clone e ficou: um verde de sinalizacao (#2ecc71)
dentro do unico card escuro da pagina, ao lado de terracota e oliva. Ele
chamava atencao pelo motivo errado e diminuia o proprio card, que agora e
o elemento mais forte da dobra. Vira o terracota da marca.
(Oliva #737D5A e cor de apoio do manual, mas em botao de conversao dentro
de fundo escuro ele apaga: fica proximo demais do fundo.) */
.compare__col--good .btn--green,
.compare__col--good .btn--green:hover { color: #FFF; }
.compare__col--good .btn--green::before {
background: linear-gradient(115deg, #C77E56 0%, #B46A4C 55%, #8E5238 100%) !important;
}
.compare__col--good .btn--green::after { background: #F0B187 !important; }
/* ==========================================================================
LP REFORMA E GERENCIAMENTO DE OBRA
Dobras que vieram da referencia Si.Go (https://reformas-si-go.pages.dev),
vestidas com o kit da Quarten. A regra que guiou todas elas: a estrutura
do Si.Go entra, a PROVA do Si.Go nao, porque a Quarten oferta reforma sem
historico de execucao. Por isso nao existe depoimento, m2 reformado, prazo
prometido nem bairro de obra entregue em lugar nenhum desta pagina.
Onde a marca aparece, dobra a dobra (playbook 15.2, os DOIS motivos):
mark-full (o Q) -> textura das colunas escuras, marca d'agua da
dobra de escopos, selo animado de "quem responde"
mark-band (a laje) -> marcador no topo de cada coluna e regua da
dobra "quem responde"
chanfro -> canto cortado dos cards de escopo
Enfeite NAO encosta em texto (retorno do Gabriel, rev. 8 da LP de Projetos).
========================================================================== */
/* -- 1. O QUE VOCE RECEBE: triptico escuro full-bleed --------------------- */
.beneficios {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.ben-col {
position: relative;
overflow: hidden;
padding: clamp(44px, 5vw, 74px) clamp(24px, 2.6vw, 44px);
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 14px;
color: #fff;
}
/* Tres tons do MESMO marrom da marca, do mais claro ao mais fundo. Nao sao
tres cores: e a mesma tinta em profundidade diferente, para o triptico ter
relevo sem virar arco-iris. */
.ben-col:nth-child(1) { background: linear-gradient(158deg, #2e1c14 0%, #1d110c 100%); }
.ben-col:nth-child(2) { background: linear-gradient(158deg, #241610 0%, #150c07 100%); }
.ben-col:nth-child(3) { background: linear-gradient(158deg, #1d110c 0%, #120a06 100%); }
.ben-col + .ben-col { box-shadow: inset 1px 0 0 rgba(240, 177, 135, 0.15); }
/* motivo 2 do kit: a laje chanfrada da base do Q, uma vez, no topo da coluna */
.ben-marca {
display: block;
width: 44px; height: 10px;
background-color: #C77E56;
-webkit-mask: var(--mark-band) left center / contain no-repeat;
mask: var(--mark-band) left center / contain no-repeat;
opacity: .95;
flex: 0 0 auto;
}
/* aro circular: eco do anel do Q, mesma decisao de geometria da LP de Projetos */
.ben-ic {
width: 54px; height: 54px;
display: grid; place-items: center;
border: 1px solid rgba(240, 177, 135, 0.34);
border-radius: 50%;
background: rgba(240, 177, 135, 0.07);
color: #F0B187;
margin-top: 4px;
}
.ben-ic svg { width: 25px; height: 25px; }
.ben-tag {
font-family: var(--font-roman);
font-size: 11.5px;
letter-spacing: .15em;
text-transform: uppercase;
color: #F6C9A4;
}
.ben-titulo {
font-family: var(--font-heading);
font-weight: 400;
font-size: clamp(19px, 1.6vw, 24px);
line-height: 1.28;
color: #FBF5F0;
max-width: 22ch;
}
.ben-txt {
font-size: 14.6px;
line-height: 1.72;
color: #D2C2B9;
max-width: 42ch;
}
@media (max-width: 980px) {
.beneficios { grid-template-columns: 1fr; }
.ben-col + .ben-col { box-shadow: inset 0 1px 0 rgba(240, 177, 135, 0.15); }
.ben-titulo, .ben-txt { max-width: 56ch; }
}
/* -- 2. ESCOPOS: auto-qualificacao por escopo, nao por obra entregue ------
No Si.Go esta dobra qualifica por bairro, area e prazo de obra pronta.
Aqui isso seria invencao, entao o eixo virou ESCOPO: dado real da oferta,
e que ainda por cima espelha o campo "servico" do formulario. */
.escopos {
position: relative;
overflow: hidden;
padding: clamp(70px, 9vw, 116px) 0;
background: linear-gradient(166deg, #24160f 0%, var(--color-ink-2) 100%);
color: #fff;
}
.escopos::after {
content: "";
position: absolute; inset: 0;
z-index: 0;
pointer-events: none;
background-image: var(--mark-full);
background-repeat: no-repeat;
background-position: left -10% bottom -18%;
background-size: clamp(300px, 32%, 540px);
opacity: .05;
}
.escopos > .container { position: relative; z-index: 1; }
.escopos .section-lead { margin-bottom: 42px; }
.scope-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 22px;
align-items: stretch;
}
.scope-card {
position: relative;
display: flex;
flex-direction: column;
min-width: 0;
background: #fff;
color: var(--color-text);
border-radius: var(--radius);
overflow: hidden;
box-shadow: 0 22px 54px rgba(10, 5, 3, 0.42);
border: 1px solid rgba(240, 177, 135, 0.14);
}
/* chanfro: a quina cortada da laje do Q, no canto do card. Feito com gradiente
e nao com clip-path de proposito, porque clip-path apaga o box-shadow. */
.scope-card::before {
content: "";
position: absolute; top: 0; right: 0;
width: 26px; height: 26px;
z-index: 3;
background: linear-gradient(225deg, var(--color-primary) 0 50%, transparent 50%);
}
.scope-head { position: relative; background: var(--color-ink); }
.scope-head img {
width: 100%; height: 186px;
object-fit: cover;
opacity: .92;
}
/* selo do Q no canto da imagem, no lugar da marca d'agua do Si.Go */
.scope-selo {
position: absolute; left: 14px; bottom: 14px;
width: 26px; height: 26px;
background-color: #FBF5F0;
-webkit-mask: var(--mark-full) center / contain no-repeat;
mask: var(--mark-full) center / contain no-repeat;
opacity: .9;
filter: drop-shadow(0 2px 6px rgba(0,0,0,.6));
}
.scope-flag {
position: absolute; top: 0; left: 0;
font-family: var(--font-roman);
font-size: 10.5px;
letter-spacing: .14em;
text-transform: uppercase;
color: #2B1A12;
background: #F3DDCD; /* chapado: degrade animado atras de texto
ja foi reprovado duas vezes */
padding: 7px 14px;
}
.scope-specs {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
background: var(--color-ink);
border-top: 1px solid rgba(240, 177, 135, 0.16);
}
.scope-specs .spec {
display: flex;
flex-direction: column;
align-items: center;
gap: 3px;
padding: 13px 6px;
text-align: center;
color: #FBF5F0;
min-width: 0;
}
.scope-specs .spec + .spec { box-shadow: inset 1px 0 0 rgba(251, 245, 240, 0.10); }
.scope-specs .spec svg { width: 19px; height: 19px; color: #F0B187; }
.scope-specs .spec span { font-size: 11.5px; font-weight: 600; line-height: 1.2; }
.scope-specs .spec small {
font-family: var(--font-roman);
font-size: 9.5px;
letter-spacing: .13em;
text-transform: uppercase;
color: rgba(251, 245, 240, .52);
}
/* spec--off = o item que NAO entra naquele escopo. Fica apagado, nao vermelho:
nao e risco, e limite de escopo. */
.scope-specs .spec--off { opacity: .48; }
.scope-specs .spec--off svg { color: #D2C2B9; }
.scope-body {
flex: 1;
padding: 22px 22px 20px;
display: flex;
flex-direction: column;
gap: 9px;
}
.scope-body h3 {
font-family: var(--font-heading);
font-weight: 400;
font-size: 20px;
line-height: 1.24;
color: var(--color-ink);
}
.scope-lead { font-size: 14.4px; line-height: 1.55; color: var(--color-text-mute); }
.scope-inclui {
margin-top: 4px;
padding-top: 12px;
border-top: 1px solid var(--color-line);
font-size: 13.4px;
line-height: 1.62;
color: #5b4a41;
}
.scope-inclui span {
display: block;
font-family: var(--font-roman);
font-size: 10px;
letter-spacing: .15em;
text-transform: uppercase;
color: var(--color-primary);
margin-bottom: 5px;
}
.scope-foot {
background: var(--color-bg-mute);
border-top: 1px solid var(--color-line);
padding: 14px 22px 16px;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 6px;
}
.scope-foot__label {
font-family: var(--font-roman);
font-size: 9.5px;
letter-spacing: .15em;
text-transform: uppercase;
color: #8b776b;
}
.scope-chip {
display: inline-block;
font-size: 13px;
font-weight: 600;
color: var(--color-ink);
border: 1px solid var(--color-primary);
padding: 5px 14px;
border-radius: 40px; /* eco do anel do Q, mesma logica do badge
circular da LP de Projetos */
white-space: normal;
}
/* O card do meio cresce por MARGEM NEGATIVA, nunca por transform ou scale:
ele tem [data-reveal], e o reveal termina em transform:translateY(0) com
especificidade maior. Escalar aqui mataria a animacao de entrada. */
.scope-card--destaque {
margin: -16px 0;
border-color: rgba(243, 221, 205, 0.55);
box-shadow: 0 30px 70px rgba(10, 5, 3, 0.55);
}
.scope-card--destaque .scope-foot { background: #f6ece7; }
.escopos__nota {
margin-top: 30px;
font-size: 12.8px;
color: rgba(251, 245, 240, .58);
text-align: center;
}
.escopos__cta { text-align: center; margin-top: 26px; }
@media (max-width: 980px) {
.scope-grid { grid-template-columns: 1fr; max-width: 460px; margin: 0 auto; }
.scope-card--destaque { margin: 0; }
}
/* -- 3. QUEM RESPONDE PELA OBRA: split escuro + as duas arquitetas ---------
E a dobra "Garantimos seguranca" do Si.Go. La ela leva a foto dos dois
engenheiros com a logo sobreposta; aqui leva as duas socias e o SELO DA
QUARTEN SE DESENHANDO, que e a mesma animacao da logo do cabecalho. */
.garantia {
display: grid;
grid-template-columns: 1fr 1fr;
align-items: stretch;
}
.garantia__txt {
position: relative;
overflow: hidden;
background: linear-gradient(158deg, #2b1a12 0%, var(--color-ink-2) 100%);
color: #fff;
padding: clamp(50px, 5.6vw, 88px) clamp(26px, 4vw, 64px);
display: flex;
flex-direction: column;
justify-content: center;
gap: 16px;
}
/* 24ch e nao 17ch: com a Montserrat, 17ch quebrava em tres linhas com um
"projeto e" solto no meio. Em 24ch fecha em duas, com o corte no "e". */
.garantia__txt .section-title { margin-bottom: 4px; max-width: 24ch; }
.garantia__sub {
font-size: clamp(16px, 1.3vw, 18.5px);
font-weight: 600;
line-height: 1.45;
color: #F3DDCD;
max-width: 40ch;
}
/* motivo 2 do kit: a laje chanfrada, uma vez, SOZINHA, sem encostar em texto */
.garantia__regua {
width: 62px; height: 12px;
background-color: var(--color-primary);
-webkit-mask: var(--mark-band) left center / contain no-repeat;
mask: var(--mark-band) left center / contain no-repeat;
margin: 2px 0 4px;
}
.garantia__txt p {
font-size: 15.2px;
line-height: 1.78;
color: var(--color-on-dark-mute);
max-width: 52ch;
}
.garantia__txt .btn { align-self: flex-start; margin-top: 12px; }
.garantia__midia {
position: relative;
background: var(--color-ink);
overflow: hidden;
min-height: 480px;
display: grid;
align-items: center;
padding: clamp(18px, 2.4vw, 32px);
}
/* AS FOTOS NAO ESTICAM ATE A ALTURA DA COLUNA DE TEXTO.
O grid e `align-items: stretch`, entao a metade da midia herdava a altura do
texto (~740px em 1440). Com celula de 360x740 o `cover` escalava pela altura
e decepava 140px de CADA lado de um arquivo de 800px: a Maria Luiza perdia a
testa e a Layz perdia metade do rosto. Playbook 15.7.
Fixando o diptico em 8/5, cada celula fica em 0.80, que e EXATAMENTE a
proporcao dos dois arquivos (800x1000). Recorte zero, enquadramento igual ao
que o Gabriel aprovou na LP de Projetos. */
.garantia__fotos {
display: grid;
grid-template-columns: 1fr 1fr;
aspect-ratio: 8 / 5;
width: 100%;
align-self: center;
border: 1px solid rgba(240, 177, 135, 0.18);
}
.garantia__foto { position: relative; overflow: hidden; min-width: 0; }
.garantia__foto + .garantia__foto { box-shadow: inset 1px 0 0 rgba(240, 177, 135, 0.22); }
.garantia__foto img {
width: 100%; height: 100%;
object-fit: cover;
object-position: center top;
}
/* selo da marca sobre a foto (o "logo overlay" da referencia) */
.garantia__selo {
position: absolute; top: 20px; right: 20px;
z-index: 2;
width: 104px;
padding: 11px 13px 12px;
background: rgba(18, 10, 6, 0.74);
-webkit-backdrop-filter: blur(6px);
backdrop-filter: blur(6px);
border: 1px solid rgba(240, 177, 135, 0.3);
line-height: 0;
}
.garantia__selo img {
width: 100% !important;
height: auto !important;
display: block;
filter: none;
}
.garantia__badge {
position: absolute; left: 20px; bottom: 20px;
z-index: 2;
background: var(--color-ink);
color: #fff;
padding: 13px 20px;
border-left: 3px solid var(--color-primary);
display: flex;
flex-direction: column;
gap: 2px;
box-shadow: 0 12px 30px rgba(0, 0, 0, 0.45);
}
.garantia__badge strong {
font-family: var(--font-heading);
font-weight: 400;
font-size: 18px;
letter-spacing: .01em;
}
.garantia__badge span {
font-family: var(--font-roman);
font-size: 10px;
letter-spacing: .16em;
text-transform: uppercase;
color: #F6C9A4;
}
/* O reveal generico sobe o elemento inteiro em fade, e no selo isso brigava
com o desenho (a marca entrava por fade E por traco ao mesmo tempo, e o
traco sumia no meio). Aqui o [data-reveal] so serve de GATILHO. */
.garantia__selo[data-reveal] { opacity: 1; transform: none; transition: none; }
@media (prefers-reduced-motion: no-preference) {
/* mesma sequencia do cabecalho: o contorno corre, o Q preenche por dentro,
o lettering entra da esquerda. Os keyframes sao os mesmos (qTraca,
qTracoVida, qEntra, letreiroEntra), declarados no bloco da logo. */
.garantia__selo.is-revealed .marca-q__traco path { stroke-dashoffset: 100; animation: qTraca 1.3s .15s cubic-bezier(.5,0,.25,1) forwards; }
.garantia__selo.is-revealed .marca-q__traco { animation: qTracoVida 2s linear forwards; }
.garantia__selo.is-revealed .marca-q__solido { animation: qEntra .6s 1.18s ease-out both; }
.garantia__selo.is-revealed .marca-texto { animation: letreiroEntra .8s 1.52s cubic-bezier(.35,0,.2,1) both; }
}
@media (max-width: 900px) {
.garantia { grid-template-columns: 1fr; }
.garantia__midia { min-height: 380px; order: -1; }
.garantia__txt .section-title { max-width: 100%; }
}
@media (max-width: 460px) {
.garantia__selo { width: 84px; top: 14px; right: 14px; }
.garantia__badge { left: 14px; bottom: 14px; padding: 11px 16px; }
.garantia__badge strong { font-size: 16px; }
}
/* -- 4. INDICADOR DE 2 ETAPAS, VISIVEL -----------------------------------
Diferenca deliberada em relacao a LP de Projetos, onde ele fica oculto.
Aqui a referencia Si.Go mostra o progresso, e a etapa 2 tem 4 campos:
saber que existe fim reduz abandono no meio. Anotado no README para o
Gabriel decidir se vale nas duas ou em nenhuma. */
.viability .steps-indicator {
max-width: 420px;
margin: 0 auto 26px;
position: relative;
z-index: 1;
}
.viability .step-circle {
font-family: var(--font-heading);
font-weight: 400;
}
.viability .step-circle.complete {
background: var(--color-green);
border-color: var(--color-green);
color: #fff;
}
/* -- 5. Faixas que nao podem estourar em 393px ----------------------------
Mesma armadilha da LP de Projetos: faixa de grade 1fr tem min-width:auto,
entao conteudo longo empurra a coluna para fora do container. */
.scope-grid, .beneficios, .garantia { min-width: 0; }
.scope-card, .ben-col, .garantia__txt, .garantia__midia { min-width: 0; }
/* ==========================================================================
HERO NO FORMATO DA REFERENCIA SI.GO
Centralizado, com a LOGO dentro, um CTA so e a prova social morando no
proprio hero (na LP de Projetos ela e dobra a parte). Sem header fixo e
sem topbar, porque a referencia nao tem: e a marca do hero que abre a
pagina, e o CTA fixo que segura a conversao durante a rolagem.
⚠️ O `em` do H1 da referencia leva um risco embaixo. Aqui ele NAO leva:
o Gabriel reprovou duas vezes "traco abaixo das palavras" na LP de
Projetos (rev. 8 e 9). O destaque sai por COR, que e o terracota da marca.
========================================================================== */
.hero--centro {
min-height: 100vh;
min-height: 100svh;
padding: clamp(80px, 9vh, 120px) 0 clamp(96px, 12vh, 132px);
display: flex;
align-items: center;
text-align: center;
}
.hero--centro .hero__centro {
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
align-items: center;
max-width: 980px;
margin: 0 auto;
}
/* A marca abre a pagina, e ela ENTRA DESENHANDO (mesma animacao do rodape e
do selo da dobra de garantia). Duas camadas do mesmo arquivo: o contorno
corre, o Q cheio nasce por dentro, o lettering entra da esquerda. */
.hero__marca {
display: block;
width: clamp(150px, 17vw, 218px);
line-height: 0;
margin-bottom: clamp(22px, 3vh, 34px);
filter: drop-shadow(0 6px 20px rgba(0, 0, 0, 0.5));
transition: opacity var(--t-fast);
}
.hero__marca:hover { opacity: .88; }
.hero__marca img {
width: 100% !important;
height: auto !important;
display: block;
filter: none;
}
.hero__olho {
font-family: var(--font-roman);
font-size: clamp(10.5px, 1vw, 12.5px);
letter-spacing: .26em;
text-transform: uppercase;
color: #E8B695;
margin-bottom: 18px;
}
.hero__h1 {
font-family: var(--font-heading);
font-weight: 400;
font-size: clamp(28px, 4.4vw, 54px);
line-height: 1.16;
letter-spacing: -0.005em;
color: #FBF5F0;
max-width: 19ch;
margin: 0 auto 20px;
text-wrap: balance;
}
/* destaque por cor, sem risco embaixo (ver nota do topo do bloco) */
.hero__h1 em {
font-style: normal;
color: var(--color-primary);
filter: brightness(1.22);
}
.hero__h1 em::after { content: none !important; display: none !important; }
.hero__apoio {
font-size: clamp(15px, 1.25vw, 18px);
line-height: 1.68;
color: #DCCEC5;
max-width: 60ch;
margin: 0 auto clamp(28px, 4vh, 42px);
}
.hero__botoes { display: flex; justify-content: center; }
.hero__botoes .btn { justify-content: center; }
/* -- Prova social DENTRO do hero ------------------------------------------
⛔ Numeros de PROJETO e de carreira das socias. A Quarten nao executou
reforma, entao nao existe m2 reformado nem obra entregue para contar. */
.prova-hero {
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: clamp(20px, 3.4vw, 52px);
margin-top: clamp(32px, 5vh, 52px);
padding-top: clamp(24px, 3.4vh, 34px);
border-top: 1px solid rgba(240, 177, 135, 0.24);
width: 100%;
}
.prova-item {
display: flex;
align-items: center;
gap: 12px;
text-align: left;
min-width: 0;
}
/* aro circular: eco do anel do Q */
.prova-ic {
width: 42px; height: 42px;
flex: 0 0 auto;
display: grid; place-items: center;
border: 1px solid rgba(240, 177, 135, 0.34);
border-radius: 50%;
background: rgba(240, 177, 135, 0.08);
color: #F0B187;
}
.prova-ic svg { width: 20px; height: 20px; }
.prova-txt { display: flex; flex-direction: column; min-width: 0; }
.prova-num {
font-family: var(--font-heading);
font-weight: 400;
font-size: clamp(19px, 1.7vw, 24px);
line-height: 1.15;
color: #F7EFE9; /* UMA cor so, hierarquia por tamanho:
tres tons no mesmo numero ja foi
reprovado na LP de Projetos (rev. 4) */
}
/* o + em .74em caia na linha de base e lia como subscrito (“₊20”).
Sobe junto e encolhe menos. */
.prova-mais { font-size: .82em; vertical-align: .07em; margin-right: .02em; }
.prova-rot {
font-size: 11.5px;
line-height: 1.42;
letter-spacing: .04em;
color: rgba(232, 218, 209, 0.66);
max-width: 30ch;
}
/* -- indicador de rolagem ------------------------------------------------- */
.hero__rolar {
position: absolute;
left: 50%;
bottom: clamp(18px, 3.4vh, 34px);
transform: translateX(-50%);
z-index: 1;
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
font-family: var(--font-roman);
font-size: 9.5px;
letter-spacing: .22em;
text-transform: uppercase;
color: rgba(251, 245, 240, 0.6);
}
.hero__rolar svg { width: 20px; height: 20px; }
.hero__rolar:hover { color: var(--color-primary); }
@media (prefers-reduced-motion: no-preference) {
.hero__rolar { animation: rolarPula 2.2s ease-in-out infinite; }
@keyframes rolarPula {
0%, 100% { transform: translateX(-50%) translateY(0); }
50% { transform: translateX(-50%) translateY(7px); }
}
}
/* -- a marca do hero se desenha no load ----------------------------------
Ela esta na primeira dobra, entao dispara direto. Em repouso a marca e o
arquivo original: se a animacao nao rodar, nada some (playbook 15.3). */
/* ⛔ O REPOUSO DA MARCA DO HERO E "VISIVEL", NUNCA "ESCONDIDO".
A versao anterior declarava `opacity: 0` no Q cheio e `clip-path: inset(0
100% 0 0)` no lettering como ESTADO BASE, e mandava a animacao desfazer.
Quando a animacao nao roda, o estado base e o que fica: a marca aparece so
como contorno, sem o Q cheio e SEM O LETTERING. Aconteceu de verdade, num
render em que o `qEntra` rodou e o `letreiroEntra` nao: sobrou um Q solto no
topo da pagina, que e a marca do cliente pela metade na primeira dobra.
E o mesmo erro do playbook 15.3 (regua que nasce em width:0 e depende de JS,
entao some em print e em PDF), so que aplicado a logo.
Agora o esconder mora DENTRO do keyframe (`from`), e o `both` segura esse
`from` durante o delay. Resultado: com animacao, entrada identica; sem
animacao, por qualquer motivo, a marca aparece inteira. */
@media (prefers-reduced-motion: no-preference) {
@keyframes qHeroSolido { from { opacity: 0; } to { opacity: 1; } }
@keyframes qHeroLetreiro { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
.hero__marca .marca-q__traco path { stroke-dashoffset: 100; animation: qTraca 1.25s .2s cubic-bezier(.5,0,.25,1) forwards; }
.hero__marca .marca-q__traco { animation: qTracoVida 1.95s linear forwards; }
.hero__marca .marca-q__solido { animation: qHeroSolido .55s 1.18s ease-out both; }
.hero__marca .marca-texto { animation: qHeroLetreiro .75s 1.5s cubic-bezier(.35,0,.2,1) both; }
}
/* -- telas baixas: notebook de 13 polegadas e onde o hero estoura primeiro */
@media (max-height: 780px) and (min-width: 900px) {
.hero--centro { padding: 84px 0 90px; }
.hero__marca { width: clamp(132px, 13vw, 168px); margin-bottom: 18px; }
.hero__h1 { font-size: clamp(26px, 3.4vw, 40px); margin-bottom: 14px; }
.hero__apoio { font-size: 15px; margin-bottom: 24px; }
.prova-hero { margin-top: 26px; padding-top: 20px; }
}
@media (max-width: 760px) {
.hero--centro { padding: 74px 0 96px; }
.hero__botoes { width: 100%; }
.hero__botoes .btn { width: 100%; }
.prova-hero {
flex-direction: column;
align-items: flex-start;
gap: 16px;
max-width: 360px;
margin-left: auto;
margin-right: auto;
}
.prova-rot { max-width: 100%; }
}
/* -- a dobra de portfolio ganhou rotulo e apoio, como na referencia ------- */
.gallery__head .eyebrow { margin-bottom: 14px; }
.gallery__head .section-lead { margin-bottom: 0; }
/* ==========================================================================
HERO, RITMO E ESCALA (retorno do Gabriel, 31/07/2026)
"os textos pequenos e mal distribuidos entre o espaco da 1a dobra, quero
que sejam um pouco maiores e regulares."
Duas causas, e as duas eram minhas:
1. ESCALA. Cada bloco do hero tinha o seu proprio clamp, escolhido no olho,
e nenhum conversava com o outro. Agora existe UMA razao entre eles:
olho 0.24x | apoio 0.34x | numero 0.46x da H1. Subiu tudo junto.
2. DISTRIBUICAO. O espacamento vinha de `margin-bottom` avulso em cada
elemento (18px aqui, 20px ali, clamp(28px,4vh,42px) acolá), entao o
intervalo mudava de tamanho a cada bloco. Agora e UM `gap` no container
flex, e os margin-bottom antigos foram zerados para nao somar por cima.
A unica excecao proposital e a regua de prova social, que abre com
1.7x do ritmo por ser o bloco separado por fio.
========================================================================== */
.hero--centro {
/* a unidade de ritmo da dobra inteira.
Subiu de clamp(17px,2.3vh,27px): o retorno foi "estão muito juntos". */
--hero-r: clamp(23px, 3.1vh, 36px);
}
.hero--centro .hero__centro {
gap: var(--hero-r);
max-width: 1000px;
}
/* margens avulsas zeradas: quem espaca agora e o gap, senao os dois somam e
a irregularidade volta pela porta dos fundos */
.hero__marca,
.hero__olho,
.hero__h1,
.hero__apoio { margin-bottom: 0; }
.hero__marca { width: clamp(160px, 15.5vw, 206px); }
.hero__olho {
font-size: clamp(11px, 1.02vw, 13.5px);
letter-spacing: .24em;
}
.hero__h1 {
font-size: clamp(31px, 4.6vw, 56px);
font-weight: 600;
/* 1.24 e nao 1.14: com a entrelinha antiga as duas linhas da H1 quase se
tocavam, que e metade do "estao muito juntos". */
line-height: 1.24;
letter-spacing: -.018em;
/* Quem decide o corte e o do HTML, nao o
max-width: com 26ch (a largura da linha mais longa) o navegador enchia a
linha 1 e levava o "sem" junto, partindo o trecho em terracota no meio.
`text-wrap: balance` tambem nao resolvia, porque 26/22 e 22/26 sao
igualmente "balanceados" e ele escolhia o primeiro. */
max-width: 28ch;
margin-left: auto;
margin-right: auto;
}
.quebra-desktop { display: none; }
@media (min-width: 900px) { .quebra-desktop { display: inline; } }
.hero__apoio {
font-size: clamp(16px, 1.36vw, 20px);
line-height: 1.72; /* de 1.62: mesmo motivo da H1 */
color: #E4D8D0; /* subiu de #DCCEC5: o apoio estava
apagado demais sobre a foto */
max-width: 54ch;
margin-left: auto;
margin-right: auto;
}
.hero__botoes .btn { font-size: clamp(15px, 1.15vw, 17px); padding: 19px 40px; }
.prova-hero {
margin-top: calc(var(--hero-r) * 1.7);
padding-top: calc(var(--hero-r) * 1.2);
gap: clamp(22px, 3.6vw, 56px);
}
.prova-num { font-size: clamp(21px, 1.9vw, 27px); }
.prova-rot { font-size: clamp(12px, .96vw, 13.5px); line-height: 1.45; }
.prova-ic { width: 46px; height: 46px; }
.prova-ic svg { width: 22px; height: 22px; }
/* -- tela baixa: o notebook de 13 polegadas e onde a dobra estoura primeiro.
As razoes acima ficam intactas, o que muda e a escala absoluta. */
@media (max-height: 800px) and (min-width: 900px) {
.hero--centro { --hero-r: clamp(16px, 2.3vh, 23px); }
.hero--centro { padding: 70px 0 82px; }
.hero__marca { width: clamp(126px, 11.5vw, 158px); }
.hero__h1 { font-size: clamp(27px, 3.4vw, 42px); }
.hero__apoio { font-size: clamp(15px, 1.15vw, 17px); line-height: 1.66; }
.prova-num { font-size: clamp(19px, 1.5vw, 22px); }
.hero__botoes .btn { padding: 16px 34px; font-size: 15px; }
}
@media (max-width: 760px) {
.hero--centro { --hero-r: 20px; }
.hero__h1 { font-size: clamp(28px, 7.6vw, 36px); max-width: 100%; }
.hero__apoio { font-size: 16px; max-width: 100%; }
}
/* ==========================================================================
ENTRELINHA DAS DOBRAS (mesmo retorno: "estao muito juntos")
O problema nao era so do hero. Os titulos e os textos de card vieram do
clone com entrelinha calibrada para a serifada anterior, e a Montserrat tem
altura de x maior: com a MESMA entrelinha ela fecha mais e o bloco vira uma
mancha. Aqui todo mundo ganha ar de uma vez, mantendo a proporcao entre eles.
========================================================================== */
.section-title { line-height: 1.28; }
.section-lead { line-height: 1.72; }
.ben-titulo { line-height: 1.38; letter-spacing: -.012em; }
.ben-txt { line-height: 1.8; }
.ben-tag { margin-bottom: 2px; }
.scope-body { gap: 11px; padding: 24px 24px 22px; }
.scope-body h3 { line-height: 1.32; letter-spacing: -.012em; }
.scope-lead { line-height: 1.62; }
.scope-inclui { line-height: 1.72; padding-top: 14px; }
.scope-specs .spec { padding: 15px 6px; }
.garantia__sub { line-height: 1.52; }
.garantia__txt p { line-height: 1.85; }
.objection > summary { line-height: 1.5; }
.objection p { line-height: 1.82; }
.form-step-title { line-height: 1.3; letter-spacing: -.012em; }
/* ==========================================================================
DOBRA DE BENEFICIOS: DESTAQUE E MOVIMENTO (retorno do Gabriel, 31/07/2026)
"esses textos e cards estao com pouco destaque e nenhum degrade cores
animado, nenhum movimento que me chame atencao para ler"
Duas coisas separadas, e elas se atrapalham se forem resolvidas no mesmo
lugar:
DESTAQUE e contraste e hierarquia -> titulo maior e mais claro, texto
mais claro, tag mais presente, coluna com borda viva.
MOVIMENTO e o que puxa o olho -> fio que se desenha no topo, brilho que
atravessa a coluna, aro do icone girando e o fundo respirando.
⚠️ O movimento forte fica no QUADRO (fio, aro, brilho), nunca embaixo do
paragrafo. Degrade animado atras de texto ja foi reprovado duas vezes na LP
de Projetos, e o motivo era legibilidade, nao gosto. O degrade do FUNDO
existe (foi pedido), mas e lento, de baixissimo contraste e no mesmo marrom:
ele da vida sem disputar com a leitura.
========================================================================== */
/* -- 1. DESTAQUE: contraste e hierarquia ---------------------------------- */
.ben-col {
background-size: 165% 165%; /* precisa sobrar area para o fundo andar */
background-position: 0% 0%;
border-top: 0;
transition: background-color .5s var(--ease);
}
.ben-tag {
color: #FBD9BE;
font-size: 12px;
letter-spacing: .17em;
}
.ben-titulo {
font-size: clamp(21px, 1.85vw, 27px);
color: #FFF8F3;
font-weight: 600;
letter-spacing: -.015em;
line-height: 1.34;
max-width: 20ch;
}
.ben-txt {
font-size: 15px;
color: #D9CCC3; /* de #D2C2B9: o corpo estava apagado */
line-height: 1.78;
}
.ben-ic {
width: 58px; height: 58px;
border-color: rgba(240, 177, 135, 0.18);
position: relative;
z-index: 1;
}
.ben-ic svg { width: 26px; height: 26px; }
/* -- 2. CASCATA: as tres colunas entram em sequencia ----------------------
A regra generica dava .06s e .12s, que a olho nu e "tudo junto". */
.beneficios .ben-col:nth-child(2) { transition-delay: .17s; }
.beneficios .ben-col:nth-child(3) { transition-delay: .34s; }
/* -- 3. FIO NO TOPO: se desenha na entrada, depois o degrade corre --------
E o mesmo gesto do `.esc-card::before` da LP de Projetos. */
.ben-col::before {
content: "";
position: absolute;
top: 0; left: 0; right: 0;
height: 3px;
z-index: 3;
background: linear-gradient(90deg, #8d5039 0%, #C77E56 20%, #F3DDCD 50%, #C77E56 80%, #8d5039 100%);
background-size: 220% 100%;
transform: scaleX(0);
transform-origin: left center;
transition: transform .95s var(--ease);
}
.ben-col.is-revealed::before,
.ben-col.visible::before { transform: scaleX(1); }
/* -- 4. BRILHO que atravessa a coluna -------------------------------------
Elemento proprio e nao pseudo: o ::after da coluna ja e a marca d'agua
do Q (.hex-texture), e o ::before virou o fio acima. */
.ben-brilho {
position: absolute;
inset: 0;
z-index: 0;
overflow: hidden;
pointer-events: none;
}
.ben-brilho::before {
content: "";
position: absolute;
top: -40%; left: -60%;
width: 42%; height: 190%;
background: linear-gradient(100deg, transparent, rgba(240, 177, 135, 0.15), transparent);
transform: rotate(14deg);
}
/* -- 5. ARO DO ICONE: gradiente conico girando ---------------------------- */
.ben-ic::before {
content: "";
position: absolute;
inset: -2px;
border-radius: 50%;
background: conic-gradient(from 0deg,
transparent 0 52%, #C77E56 68%, #F0B187 80%, #FFF3E9 88%, transparent 100%);
/* mascara em anel: some o miolo e sobra so a borda */
-webkit-mask: radial-gradient(circle, transparent 0 calc(50% - 2px), #000 calc(50% - 2px));
mask: radial-gradient(circle, transparent 0 calc(50% - 2px), #000 calc(50% - 2px));
opacity: .9;
}
/* -- 6. Tudo o que se MOVE, num bloco so ---------------------------------- */
@media (prefers-reduced-motion: no-preference) {
/* o fio nunca para: depois de desenhado, o degrade corre dentro dele */
@keyframes benFio { from { background-position: 0% 50%; } to { background-position: 220% 50%; } }
.ben-col.is-revealed::before { animation: benFio 5.5s linear 1s infinite; }
/* o brilho atravessa e some, com defasagem por coluna para nao piscarem
as tres ao mesmo tempo */
@keyframes benVarre { 0% { left: -60%; opacity: 0; } 12% { opacity: 1; } 55% { opacity: 1; } 70%, 100% { left: 135%; opacity: 0; } }
.ben-col.is-revealed .ben-brilho::before { animation: benVarre 7s ease-in-out infinite; }
.beneficios .ben-col:nth-child(2).is-revealed .ben-brilho::before { animation-delay: 1.1s; }
.beneficios .ben-col:nth-child(3).is-revealed .ben-brilho::before { animation-delay: 2.2s; }
/* o aro do icone gira devagar */
@keyframes benAro { to { transform: rotate(360deg); } }
.ben-col.is-revealed .ben-ic::before { animation: benAro 5s linear infinite; }
.beneficios .ben-col:nth-child(2).is-revealed .ben-ic::before { animation-delay: -1.6s; }
.beneficios .ben-col:nth-child(3).is-revealed .ben-ic::before { animation-delay: -3.2s; }
/* o fundo respira: MESMO marrom, so mudando de posicao. E o "degrade
animado" pedido, na unica intensidade que nao atrapalha ler. */
@keyframes benFundo { from { background-position: 0% 0%; } to { background-position: 100% 100%; } }
.ben-col.is-revealed { animation: benFundo 14s ease-in-out infinite alternate; }
.beneficios .ben-col:nth-child(2).is-revealed { animation-delay: -4.6s; }
.beneficios .ben-col:nth-child(3).is-revealed { animation-delay: -9.2s; }
}
/* -- 7. HOVER: a coluna acende ------------------------------------------- */
.ben-col .ben-ic,
.ben-col .ben-marca { transition: transform .45s var(--ease), border-color .45s var(--ease), background .45s var(--ease); }
.ben-col:hover .ben-ic {
border-color: rgba(240, 177, 135, 0.5);
background: rgba(240, 177, 135, 0.14);
transform: translateY(-3px);
}
.ben-col:hover .ben-marca { transform: translateX(4px); }
.ben-col:hover .ben-titulo { color: #fff; }
/* -- 8. Sem animacao, nada some ------------------------------------------
O fio nasce escalado em X:0, entao SEM o reveal ele nao apareceria.
Aqui ele volta inteiro: e a mesma regra do playbook 15.3 (marcador que
depende de JS some em print e em PDF). */
@media (prefers-reduced-motion: reduce) {
.ben-col::before { transform: scaleX(1); }
}
/* ==========================================================================
MARCA D'AGUA DO Q: MENOS VISIVEL, E FORA DE BAIXO DO TEXTO
Retorno do Gabriel, 31/07/2026: "as logos Q ainda estao muito visiveis e
atrapalham a leitura do card".
(Eu tinha lido "diminua a transparencia" como "deixe mais solido" e subido
para 11%. Era o contrario.)
Baixar a opacidade sozinho nao resolvia, porque o problema nao era so
intensidade, era TAMANHO E POSICAO:
o Q vinha com `background-size: clamp(280px, 34%, 520px)`, calibrado para
dobra de largura cheia. Numa coluna de ~480px o 34% da 163px, o `min` do
clamp puxa para 280px, e o desenho passa a ocupar 58% da largura da
coluna, bem em cima do paragrafo. Quanto mais estreito o container, MAIOR
o Q em proporcao: o clamp trabalhava contra.
Nas colunas ele encolhe, vai para o canto e quase todo para fora da caixa.
Continua sendo marca d'agua, para de ser fundo de texto.
========================================================================== */
.hex-texture::after { opacity: .045; }
.escopos::after { opacity: .05; }
.ben-col.hex-texture::after {
opacity: .03;
background-size: clamp(150px, 44%, 240px);
background-position: right -24% bottom -22%;
}
/* ==========================================================================
ANTES E DEPOIS COM LINHA ARRASTAVEL (Edificio Maua)
Os dois cards viraram UM, e ele e um item do carrossel como os outros:
mesma largura, mesma altura, mesmo raio. Nao e peca destacada.
Como funciona: o "depois" e a camada de baixo, inteira. O "antes" fica por
cima e e cortado por `clip-path` ate a posicao da linha. Quem move as duas
coisas e uma variavel so, --ad-p (0 a 100).
O controle e um DE VERDADE, invisivel por cima do
item: ganha mouse, toque, setas do teclado e leitor de tela de graca.
⛔ Conflito de gesto, e por isso o `is-paused`: o carrossel gira sozinho e
tambem se arrasta. Sem tratar, arrastar a linha arrastaria o carrossel
junto. O `pointerdown` do range para a propagacao (o handler do carrossel
fica no pai, entao nao dispara) e marca `.is-paused` no trilho enquanto
dura o gesto.
========================================================================== */
.marquee__item--ad { --ad-p: 50; cursor: ew-resize; }
.marquee__item--ad img { pointer-events: none; }
/* o "antes" por cima, cortado ate a linha */
.marquee__item--ad .ad__antes {
position: absolute; inset: 0; z-index: 1;
clip-path: inset(0 calc(100% - var(--ad-p) * 1%) 0 0);
will-change: clip-path;
}
.marquee__item--ad .ad__antes img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* rotulos curtos no TOPO: embaixo e do figcaption. A honestidade
("foto real" x "render") esta escrita no figcaption. */
.ad__rot {
position: absolute; top: 10px;
z-index: 3;
font-family: var(--font-roman);
font-size: 8.5px;
letter-spacing: .14em;
text-transform: uppercase;
color: #FBF5F0;
background: rgba(18, 10, 6, 0.8);
padding: 4px 8px;
pointer-events: none;
}
.ad__rot--a { left: 10px; }
.ad__rot--d { right: 10px; }
/* linha e pega: so desenho, quem recebe o gesto e o range */
.ad__linha {
position: absolute; top: 0; bottom: 0;
left: calc(var(--ad-p) * 1%);
width: 2px; margin-left: -1px;
z-index: 4;
background: #FBF5F0;
box-shadow: 0 0 0 1px rgba(10, 5, 3, .35), 0 0 14px rgba(0, 0, 0, .5);
pointer-events: none;
}
.ad__pega {
position: absolute; top: 50%; left: 50%;
transform: translate(-50%, -50%);
width: 34px; height: 34px;
border-radius: 50%; /* eco do anel do Q */
background: var(--color-primary);
color: #1d110c;
display: flex; align-items: center; justify-content: center;
box-shadow: 0 4px 14px rgba(10, 5, 3, .55);
transition: transform .25s var(--ease), background .25s var(--ease);
}
.ad__pega svg { width: 12px; height: 12px; }
.ad__range {
position: absolute; inset: 0;
z-index: 5;
width: 100%; height: 100%;
margin: 0; padding: 0;
opacity: 0;
cursor: ew-resize;
-webkit-appearance: none; appearance: none;
background: transparent;
}
.ad__range::-webkit-slider-thumb { -webkit-appearance: none; width: 40px; height: 100%; cursor: ew-resize; }
.ad__range::-moz-range-thumb { width: 40px; height: 100%; border: 0; border-radius: 0; background: transparent; cursor: ew-resize; }
.marquee__item--ad:hover .ad__pega { transform: translate(-50%, -50%) scale(1.1); }
.ad__range:active + .ad__linha .ad__pega { background: #F3DDCD; transform: translate(-50%, -50%) scale(1.14); }
.ad__range:focus-visible + .ad__linha .ad__pega { outline: 3px solid #F3DDCD; outline-offset: 3px; }
/* o figcaption do item fica ACIMA da linha e do range */
.marquee__item--ad figcaption { z-index: 6; pointer-events: none; }
/* o item do comparador nao faz o zoom de hover dos outros: ali o hover e
para arrastar, e a imagem crescendo desalinha as duas camadas */
.marquee__item--ad:hover img { transform: none; }