/* ============================================================
TPX CONSULTORIA — RODADA 2 · VARIAÇÃO 5 · "V4 TURBINADA"
------------------------------------------------------------
MANIFESTO
Conceito: a variação 4 ("Bold & Humano") como corpo — o calor
de quem senta do seu lado — recebendo dois órgãos editoriais
da variação 3 ("Editorial Suíço"): o bloco escuro de Segurança
& LGPD com itens letrados a.–d., grid exposto e marcas de crop;
e o Método com numerais romanos gigantes I–IV em Fraunces.
Não é colagem: o bloco escuro ganha cantos arredondados de
painel (como o painel de contato), o acento vermelho-suíço vira
CORAL, e as réguas editoriais reaparecem discretas nos cards do
método — o jeito "desenhado" da v3 falando com sotaque da v4.
Dosagem: ~80% v4 / ~20% v3, aplicada cirurgicamente em duas
seções; todo o resto (hero com arco e ilustração, cards, funil,
cases, contato) permanece fiel à v4.
Paleta:
· Verde-confiança profundo #1E5C4B (dominante)
· Verde-tinta (ink escuro) #14352C (fundo do bloco editorial)
· Creme #FBF6EC (fundo base)
· Areia #F1E7D3 (faixas alternadas)
· Coral #F26B3A (acento humano — assume o
papel do vermelho-suíço da v3 no bloco editorial)
· Coral-brilho #F58257 (coral elevado p/ contraste
AA sobre o verde-tinta)
· Coral-claro #FDE3D7 (tints de apoio)
Par tipográfico (+1 editorial):
· Display: Bricolage Grotesque (humanista, encorpada, com alma)
· Texto: Figtree (redonda, legível, calorosa)
· Editorial: Fraunces (serifada opsz 144) — SÓ nos transplantes:
statement e letras a.–d. do bloco LGPD, numerais I–IV do método.
Motif visual: a FAÍSCA desenhada à mão (logotipo, eyebrows,
bullets) segue sendo a assinatura; no bloco editorial ela divide
a cena com as marcas de crop em coral — a prova de prelo da v3
carimbada com a cor da casa.
Motion: alegre mas contido — reveals com leve spring, hovers com
lift; no bloco editorial o motion é mais tipográfico (fade curto).
Tudo desativado sob prefers-reduced-motion; conteúdo sempre
visível sem JS (.reveal só esconde quando tem .js).
============================================================ */
/* ---------- Tokens ---------- */
:root {
/* cor */
--verde: #1E5C4B;
--verde-escuro: #17493C;
--verde-ink: #14352C;
--verde-tint: #E3EDE4;
--cream: #FBF6EC;
--sand: #F1E7D3;
--sand-deep: #E7DAC0;
--coral: #F26B3A;
--coral-bright: #F58257;
--coral-escuro: #A63E17;
--coral-tint: #FDE3D7;
--ink: #1E2B26;
--ink-soft: #46564F;
--branco-quente: #FFFDF8;
/* bloco editorial escuro */
--paper-dim: #CBDCD2; /* texto secundário no escuro */
--rule-dark: rgba(251, 246, 236, 0.16); /* fios do grid exposto */
--rule-dark-strong: rgba(251, 246, 236, 0.38);
/* tipografia */
--font-display: "Bricolage Grotesque", "Trebuchet MS", sans-serif;
--font-body: "Figtree", "Segoe UI", sans-serif;
--font-editorial: "Fraunces", "Georgia", serif;
--fs-hero: clamp(2.5rem, 5.6vw + 0.6rem, 4.4rem);
--fs-h2: clamp(1.8rem, 3vw + 0.5rem, 2.7rem);
--fs-h3: clamp(1.2rem, 1vw + 0.9rem, 1.45rem);
--fs-lede: clamp(1.05rem, 0.5vw + 0.9rem, 1.25rem);
--fs-body: 1.0625rem;
--fs-small: 0.9375rem;
/* espaçamento */
--s-1: 0.25rem;
--s-2: 0.5rem;
--s-3: 0.75rem;
--s-4: 1rem;
--s-5: 1.5rem;
--s-6: 2rem;
--s-7: 3rem;
--s-8: 4rem;
--s-9: 6rem;
/* forma */
--r-sm: 0.75rem;
--r-md: 1.25rem;
--r-lg: 1.75rem;
--r-pill: 999px;
/* sombra (quente, nunca cinza-azulada) */
--shadow-sm: 0 2px 8px rgba(60, 42, 20, 0.08);
--shadow-md: 0 10px 28px rgba(60, 42, 20, 0.12);
--shadow-lg: 0 22px 48px rgba(60, 42, 20, 0.16);
/* motion */
--spring: cubic-bezier(0.34, 1.56, 0.64, 1);
--ease: cubic-bezier(0.25, 0.6, 0.3, 1);
--dur: 0.55s;
--container: 72rem;
}
/* ---------- Reset / base ---------- */
*,
*::before,
*::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; scroll-padding-top: 5.5rem; }
body {
font-family: var(--font-body);
font-size: var(--fs-body);
line-height: 1.65;
color: var(--ink);
background: var(--cream);
-webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; }
h1, h2, h3, h4 {
font-family: var(--font-display);
line-height: 1.12;
color: var(--verde-ink);
text-wrap: balance;
}
h1 { font-size: var(--fs-hero); font-weight: 800; letter-spacing: -0.02em; }
h2 { font-size: var(--fs-h2); font-weight: 800; letter-spacing: -0.015em; }
h3 { font-size: var(--fs-h3); font-weight: 700; }
p { max-width: 62ch; }
a { color: var(--verde); }
ul, ol { list-style: none; }
.container {
width: min(100% - 2.5rem, var(--container));
margin-inline: auto;
}
.br-desk { display: none; }
@media (min-width: 700px) { .br-desk { display: inline; } }
/* foco visível — AA */
:focus-visible {
outline: 3px solid var(--coral);
outline-offset: 3px;
border-radius: var(--r-sm);
}
.skip-link {
position: absolute;
top: -100px;
left: var(--s-4);
z-index: 100;
padding: var(--s-3) var(--s-5);
background: var(--verde-ink);
color: var(--cream);
border-radius: var(--r-pill);
font-weight: 600;
text-decoration: none;
transition: top 0.2s var(--ease);
}
.skip-link:focus { top: var(--s-4); }
/* ---------- Ícones ---------- */
.ico { width: 1.25em; height: 1.25em; fill: currentColor; flex: none; }
.ico-big { width: 3rem; height: 3rem; color: currentColor; flex: none; }
.spark-mini { width: 1em; height: 1em; fill: var(--coral); flex: none; }
/* ---------- Botões (gordos, com alma) ---------- */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--s-2);
min-height: 44px;
padding: 0.8rem 1.6rem;
border-radius: var(--r-pill);
font-family: var(--font-display);
font-weight: 700;
font-size: 1rem;
text-decoration: none;
border: 2.5px solid transparent;
transition: transform 0.25s var(--spring), box-shadow 0.25s var(--ease),
background-color 0.2s var(--ease), color 0.2s var(--ease);
}
.btn:hover { transform: translateY(-3px) rotate(-0.5deg); box-shadow: var(--shadow-md); }
.btn:active { transform: translateY(0); }
.btn-big { padding: 1.05rem 2rem; font-size: 1.175rem; }
.btn-solid { background: var(--verde); color: var(--branco-quente); }
.btn-solid:hover { background: var(--verde-escuro); }
.btn-ghost {
background: transparent;
color: var(--verde-ink);
border-color: var(--verde-ink);
}
.btn-ghost:hover { background: var(--verde-ink); color: var(--cream); }
.btn-coral { background: var(--coral); color: var(--verde-ink); }
.btn-coral:hover { background: #F58257; }
/* ---------- Header ---------- */
.site-header {
position: sticky;
top: 0;
z-index: 50;
background: color-mix(in srgb, var(--cream) 92%, transparent);
backdrop-filter: blur(10px);
border-bottom: 1.5px solid var(--sand-deep);
}
.header-inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--s-5);
min-height: 4.5rem;
}
.brand {
display: inline-flex;
align-items: center;
gap: var(--s-2);
text-decoration: none;
}
.brand-spark { width: 1.7rem; height: 1.7rem; fill: var(--coral); transition: transform 0.4s var(--spring); }
.brand:hover .brand-spark { transform: rotate(25deg) scale(1.12); }
.brand-word {
font-family: var(--font-display);
font-weight: 800;
font-size: 1.45rem;
letter-spacing: -0.02em;
color: var(--verde-ink);
display: inline-flex;
align-items: baseline;
gap: 0.4rem;
}
.brand-sub {
font-size: 0.78rem;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--verde);
}
.site-nav { display: flex; align-items: center; gap: var(--s-5); }
.site-nav ul { display: flex; gap: var(--s-4); }
.site-nav ul a {
display: inline-block;
padding: var(--s-2) var(--s-2);
font-weight: 600;
font-size: var(--fs-small);
color: var(--ink);
text-decoration: none;
border-radius: var(--r-sm);
transition: color 0.2s var(--ease), background-color 0.2s var(--ease);
}
.site-nav ul a:hover { color: var(--verde); background: var(--verde-tint); }
.btn-nav { padding: 0.55rem 1.15rem; font-size: 0.95rem; }
.menu-toggle {
display: none;
flex-direction: column;
justify-content: center;
gap: 7px;
width: 48px;
height: 48px;
padding: 12px;
background: var(--verde-ink);
border: none;
border-radius: var(--r-md);
cursor: pointer;
}
.menu-bar {
display: block;
height: 3px;
width: 100%;
border-radius: 2px;
background: var(--cream);
transition: transform 0.3s var(--spring);
}
.menu-toggle[aria-expanded="true"] .menu-bar:first-child { transform: translateY(5px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] .menu-bar:last-child { transform: translateY(-5px) rotate(-45deg); }
@media (max-width: 900px) {
.menu-toggle { display: flex; }
.site-nav {
position: absolute;
top: 100%;
left: 0;
right: 0;
flex-direction: column;
align-items: stretch;
gap: var(--s-3);
padding: var(--s-5);
background: var(--cream);
border-bottom: 1.5px solid var(--sand-deep);
box-shadow: var(--shadow-md);
display: none;
}
.site-nav.open { display: flex; }
.site-nav ul { flex-direction: column; gap: 0; }
.site-nav ul a { display: block; padding: var(--s-3) var(--s-4); font-size: 1.05rem; }
.btn-nav { width: 100%; }
}
/* ---------- Hero ---------- */
.hero {
position: relative;
padding: var(--s-8) 0 0;
overflow: hidden;
}
.hero-grid {
display: grid;
gap: var(--s-7);
align-items: center;
padding-bottom: var(--s-9);
}
@media (min-width: 940px) {
.hero-grid { grid-template-columns: 1.15fr 0.85fr; }
}
.eyebrow {
display: inline-flex;
align-items: center;
gap: var(--s-2);
font-family: var(--font-display);
font-weight: 700;
font-size: 0.95rem;
letter-spacing: 0.02em;
color: var(--verde);
background: var(--verde-tint);
border: 1.5px solid color-mix(in srgb, var(--verde) 25%, transparent);
padding: 0.45rem 1rem;
border-radius: var(--r-pill);
margin-bottom: var(--s-5);
}
.hero-copy h1 { margin-bottom: var(--s-5); }
/* rabisco de marcador sob a palavra-chave */
.marker { position: relative; white-space: nowrap; }
.marker::after {
content: "";
position: absolute;
left: -2%;
bottom: 0.02em;
width: 104%;
height: 0.32em;
background: url('data:image/svg+xml;utf8,') no-repeat center / 100% 100%;
z-index: -1;
}
.lede {
font-size: var(--fs-lede);
color: var(--ink-soft);
margin-bottom: var(--s-6);
}
.hero-actions {
display: flex;
flex-wrap: wrap;
gap: var(--s-4);
margin-bottom: var(--s-6);
}
.hero-trust {
display: flex;
flex-wrap: wrap;
gap: var(--s-3) var(--s-6);
}
.hero-trust li {
display: inline-flex;
align-items: center;
gap: var(--s-2);
font-size: var(--fs-small);
font-weight: 600;
color: var(--ink-soft);
}
.hero-trust .ico { color: var(--verde); fill: var(--verde); width: 1.35em; height: 1.35em; }
/* visual do hero: arco + chips */
.hero-visual { position: relative; min-height: 22rem; }
.hero-arch {
width: min(100%, 24rem);
margin-inline: auto;
aspect-ratio: 5 / 6;
background: var(--verde);
border-radius: 12rem 12rem var(--r-lg) var(--r-lg);
display: grid;
place-items: center;
box-shadow: var(--shadow-lg);
}
.hero-illo { width: 78%; color: var(--cream); }
.hero-chip {
position: absolute;
display: inline-flex;
align-items: center;
gap: var(--s-2);
padding: 0.6rem 1rem;
background: var(--branco-quente);
border: 2px solid var(--verde-ink);
border-radius: var(--r-pill);
font-family: var(--font-display);
font-weight: 700;
font-size: 0.9rem;
color: var(--verde-ink);
box-shadow: var(--shadow-md);
}
.hero-chip .ico { color: var(--coral); fill: var(--coral); }
.hero-chip-1 { top: 12%; left: 0; transform: rotate(-4deg); }
.hero-chip-2 { top: 46%; right: -2%; transform: rotate(3deg); }
.hero-chip-3 { bottom: 6%; left: 8%; transform: rotate(-2deg); }
@media (prefers-reduced-motion: no-preference) {
.js .hero-chip { animation: chip-float 6s ease-in-out infinite; }
.js .hero-chip-2 { animation-delay: -2s; }
.js .hero-chip-3 { animation-delay: -4s; }
@keyframes chip-float {
0%, 100% { translate: 0 0; }
50% { translate: 0 -8px; }
}
}
.hero-wave { line-height: 0; }
.hero-wave svg { width: 100%; height: clamp(2.5rem, 6vw, 5.5rem); }
/* ---------- Seções ---------- */
.section { padding: var(--s-9) 0; }
.section-sand { background: var(--sand); }
.section-head { margin-bottom: var(--s-7); max-width: 46rem; }
.section-head h2 { margin-bottom: var(--s-4); }
.section-lede { font-size: var(--fs-lede); color: var(--ink-soft); }
/* ---------- Cards base ---------- */
.card {
background: var(--branco-quente);
border: 1.5px solid var(--sand-deep);
border-radius: var(--r-lg);
padding: var(--s-6);
box-shadow: var(--shadow-sm);
transition: transform 0.3s var(--spring), box-shadow 0.3s var(--ease);
}
.card:hover { transform: translateY(-5px) rotate(-0.4deg); box-shadow: var(--shadow-md); }
.cards-3 {
display: grid;
gap: var(--s-5);
}
@media (min-width: 760px) { .cards-3 { grid-template-columns: repeat(3, 1fr); } }
.cards-2 {
display: grid;
gap: var(--s-5);
}
@media (min-width: 760px) { .cards-2 { grid-template-columns: repeat(2, 1fr); } }
/* ícones spot */
.spot {
width: 4.25rem;
height: 4.25rem;
border-radius: 1.4rem;
display: grid;
place-items: center;
margin-bottom: var(--s-5);
transition: transform 0.35s var(--spring);
}
.spot svg { width: 2.6rem; height: 2.6rem; }
.card:hover .spot { transform: rotate(-6deg) scale(1.06); }
.spot-green { background: var(--verde-tint); color: var(--verde-ink); }
.spot-coral { background: var(--coral-tint); color: var(--verde-ink); }
.vert-card h3 { margin-bottom: var(--s-3); }
/* ---------- Serviços ---------- */
.svc-card h3 { margin-bottom: var(--s-3); }
.svc-card > p { margin-bottom: var(--s-4); }
.svc-list { display: grid; gap: var(--s-2); }
.svc-list li {
position: relative;
padding-left: 1.6rem;
font-weight: 600;
font-size: var(--fs-small);
color: var(--verde-escuro);
}
.svc-list li::before {
content: "";
position: absolute;
left: 0;
top: 0.28em;
width: 1em;
height: 1em;
background: url('data:image/svg+xml;utf8,') no-repeat center / contain;
}
/* antes / depois */
.before-after {
display: grid;
gap: var(--s-3);
align-items: stretch;
margin-top: var(--s-4);
}
@media (min-width: 560px) {
.before-after { grid-template-columns: 1fr auto 1fr; align-items: center; }
}
.ba-col {
border-radius: var(--r-md);
padding: var(--s-4);
height: 100%;
}
.ba-col p { font-size: var(--fs-small); line-height: 1.5; }
.ba-before { background: var(--sand); color: var(--ink-soft); }
.ba-after { background: var(--verde-tint); color: var(--verde-escuro); }
.ba-tag {
display: inline-block;
font-family: var(--font-display);
font-weight: 700;
font-size: 0.8rem;
letter-spacing: 0.06em;
text-transform: uppercase;
margin-bottom: var(--s-2);
}
.ba-before .ba-tag { color: var(--coral-escuro); }
.ba-after .ba-tag { color: var(--verde); }
.ba-arrow { width: 2.2rem; color: var(--coral); margin-inline: auto; }
@media (max-width: 559px) { .ba-arrow { transform: rotate(90deg); } }
/* ============================================================
SEGURANÇA & LGPD — o transplante editorial da v3
Bloco escuro com grid exposto, marcas de crop e itens a.–d.,
dentro de um painel de cantos arredondados (sotaque da v4).
============================================================ */
.section-lgpd { padding-block: var(--s-9); }
.lgpd-panel {
position: relative;
background: var(--verde-ink);
border-radius: clamp(1.5rem, 3vw, 2.5rem);
padding: clamp(1.75rem, 5vw, 4rem);
overflow: hidden;
box-shadow: var(--shadow-lg);
}
/* grid de colunas exposto (fios de 1px, como prova de prelo),
alinhado à caixa de conteúdo para casar com as colunas a.–d. */
.lgpd-panel::before {
content: "";
position: absolute;
inset: 0 clamp(1.75rem, 5vw, 4rem);
background-image:
linear-gradient(to left, var(--rule-dark) 1px, transparent 1px),
linear-gradient(to right, var(--rule-dark) 1px, transparent 1px);
background-size: 25% 100%, 1px 100%;
background-repeat: repeat-x, no-repeat;
pointer-events: none;
}
@media (max-width: 760px) {
.lgpd-panel::before { background-size: 50% 100%, 1px 100%; }
}
.lgpd-panel > * { position: relative; }
/* cabeçalho editorial com marcas de crop nas pontas da régua */
.lgpd-head {
display: flex;
flex-wrap: wrap;
align-items: baseline;
justify-content: space-between;
gap: var(--s-2) var(--s-5);
padding-bottom: var(--s-4);
margin-bottom: clamp(var(--s-5), 4vw, var(--s-6));
border-bottom: 1px solid var(--rule-dark-strong);
}
.lgpd-head::before,
.lgpd-head::after {
content: "";
position: absolute;
bottom: -0.4375rem;
width: 0.8125rem;
height: 0.8125rem;
background-image:
linear-gradient(currentColor, currentColor),
linear-gradient(currentColor, currentColor);
background-size: 100% 1.5px, 1.5px 100%;
background-position: center, center;
background-repeat: no-repeat;
color: var(--coral-bright);
pointer-events: none;
}
.lgpd-head::before { left: -0.4375rem; }
.lgpd-head::after { right: -0.4375rem; }
.lgpd-label {
display: inline-flex;
align-items: center;
gap: var(--s-2);
font-size: 0.75rem;
font-weight: 700;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--cream);
}
.lgpd-index {
font-family: var(--font-editorial);
font-style: italic;
font-weight: 420;
font-variation-settings: "opsz" 40;
font-size: 1.25rem;
color: var(--coral-bright);
}
.lgpd-statement {
font-family: var(--font-editorial);
font-weight: 460;
font-variation-settings: "opsz" 144;
font-size: clamp(1.9rem, 1.1rem + 3.2vw, 3.4rem);
line-height: 1.1;
letter-spacing: -0.02em;
color: var(--cream);
max-width: 24ch;
margin-bottom: var(--s-5);
text-wrap: balance;
}
.lgpd-statement em {
font-style: italic;
font-weight: 420;
color: var(--coral-bright);
}
.lgpd-lede {
color: var(--paper-dim);
max-width: 58ch;
margin-bottom: clamp(var(--s-6), 5vw, var(--s-7));
}
/* pilares letrados a. b. c. d. */
.lgpd-pillars {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
border-top: 1px solid var(--rule-dark);
}
.lgpd-pillar {
padding: var(--s-6) var(--s-5) var(--s-6) var(--s-5);
border-right: 1px solid var(--rule-dark);
}
.lgpd-pillar:first-child { padding-left: 0; }
.lgpd-pillar:last-child { border-right: none; padding-right: 0; }
.pillar-letter {
display: block;
font-family: var(--font-editorial);
font-style: italic;
font-weight: 420;
font-variation-settings: "opsz" 60;
font-size: 1.75rem;
line-height: 1;
color: var(--coral-bright);
margin-bottom: var(--s-4);
}
.lgpd-pillar h3 {
font-size: 1.0625rem;
color: var(--cream);
margin-bottom: var(--s-3);
}
.lgpd-pillar p {
font-size: var(--fs-small);
line-height: 1.6;
color: var(--paper-dim);
text-wrap: pretty;
}
@media (max-width: 1024px) {
.lgpd-pillars { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.lgpd-pillar { border-bottom: 1px solid var(--rule-dark); }
.lgpd-pillar:nth-child(2n) { border-right: none; padding-right: 0; }
.lgpd-pillar:nth-child(2n + 1) { padding-left: 0; }
.lgpd-pillar:nth-child(n + 3) { border-bottom: none; }
}
@media (max-width: 560px) {
.lgpd-pillars { grid-template-columns: 1fr; }
.lgpd-pillar {
padding-inline: 0;
border-right: none;
border-bottom: 1px solid var(--rule-dark);
}
.lgpd-pillar:nth-child(n + 3) { border-bottom: 1px solid var(--rule-dark); }
.lgpd-pillar:last-child { border-bottom: none; padding-bottom: 0; }
}
/* convite final do bloco escuro */
.lgpd-cta {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: var(--s-5);
padding-top: var(--s-6);
border-top: 1px solid var(--rule-dark);
}
.lgpd-cta p {
font-family: var(--font-editorial);
font-weight: 480;
font-variation-settings: "opsz" 40;
font-size: clamp(1.2rem, 1rem + 0.9vw, 1.55rem);
line-height: 1.35;
color: var(--cream);
max-width: 28ch;
text-wrap: pretty;
}
@media (max-width: 560px) {
.lgpd-cta .btn { width: 100%; }
}
/* ============================================================
MÉTODO — numerais romanos I–IV em Fraunces (transplante da v3)
nos cards quentes e arredondados da v4.
============================================================ */
.steps {
counter-reset: passo;
display: grid;
gap: var(--s-5);
margin-bottom: var(--s-7);
}
@media (min-width: 700px) { .steps { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .steps { grid-template-columns: repeat(4, 1fr); } }
.step {
position: relative;
background: var(--branco-quente);
border: 1.5px solid var(--sand-deep);
border-radius: var(--r-lg);
padding: var(--s-6) var(--s-5) var(--s-5);
box-shadow: var(--shadow-sm);
transition: transform 0.3s var(--spring), box-shadow 0.3s var(--ease);
}
.step:hover { transform: translateY(-5px) rotate(-0.4deg); box-shadow: var(--shadow-md); }
.step-top {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: var(--s-3);
padding-bottom: var(--s-3);
margin-bottom: var(--s-4);
border-bottom: 2px solid var(--verde-ink);
}
.step-roman {
font-family: var(--font-editorial);
font-weight: 440;
font-variation-settings: "opsz" 144;
font-size: clamp(3rem, 2.4rem + 2vw, 4.25rem);
line-height: 0.82;
letter-spacing: 0.01em;
color: var(--coral);
transition: transform 0.35s var(--spring);
transform-origin: left bottom;
}
.step:hover .step-roman { transform: scale(1.06) rotate(-1.5deg); }
.step-count {
font-family: var(--font-display);
font-weight: 700;
font-size: 0.72rem;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--ink-soft);
}
.step h3 { margin-bottom: var(--s-2); }
.step p { font-size: var(--fs-small); color: var(--ink-soft); }
/* funil */
.funnel { padding: var(--s-6); }
.funnel:hover { transform: none; }
.funnel-head {
display: flex;
align-items: center;
gap: var(--s-4);
margin-bottom: var(--s-5);
}
.funnel-head .ico-big { width: 2.6rem; height: 2.6rem; }
.funnel-cols {
display: grid;
gap: var(--s-4);
margin-bottom: var(--s-5);
}
@media (min-width: 760px) { .funnel-cols { grid-template-columns: 1fr 1fr; } }
.funnel-col {
border: 2px dashed var(--sand-deep);
border-radius: var(--r-md);
padding: var(--s-5);
}
.funnel-col h4 {
font-size: 1.15rem;
margin-bottom: var(--s-2);
}
.funnel-col p { font-size: var(--fs-small); color: var(--ink-soft); }
.funnel-tag {
display: inline-block;
font-family: var(--font-display);
font-weight: 700;
font-size: 0.8rem;
letter-spacing: 0.05em;
text-transform: uppercase;
padding: 0.3rem 0.85rem;
border-radius: var(--r-pill);
background: var(--coral-tint);
color: var(--coral-escuro);
margin-bottom: var(--s-3);
}
.funnel-tag-free { background: var(--verde-tint); color: var(--verde-escuro); }
/* ---------- Cases ---------- */
.case-card { display: flex; flex-direction: column; gap: var(--s-3); }
.case-badge {
align-self: flex-start;
font-family: var(--font-display);
font-weight: 700;
font-size: 0.85rem;
letter-spacing: 0.04em;
text-transform: uppercase;
padding: 0.35rem 0.9rem;
border-radius: var(--r-pill);
background: var(--verde);
color: var(--branco-quente);
}
.case-role { font-weight: 700; color: var(--verde-escuro); }
.case-facts { display: grid; gap: var(--s-2); margin-top: var(--s-2); }
.case-facts li {
display: flex;
align-items: baseline;
gap: var(--s-2);
font-size: var(--fs-small);
font-weight: 600;
color: var(--ink-soft);
}
.case-facts .ico { color: var(--verde); fill: var(--verde); width: 1.1em; height: 1.1em; position: relative; top: 0.15em; }
/* ---------- Contato ---------- */
.section-contact { padding-top: 0; }
.contact-panel {
position: relative;
background: var(--verde);
border-radius: var(--r-lg);
padding: clamp(var(--s-6), 6vw, var(--s-8));
text-align: center;
overflow: hidden;
box-shadow: var(--shadow-lg);
}
.contact-panel::before,
.contact-panel::after {
content: "";
position: absolute;
border-radius: 50%;
background: rgba(255, 253, 248, 0.07);
pointer-events: none;
}
.contact-panel::before { width: 22rem; height: 22rem; top: -11rem; left: -8rem; }
.contact-panel::after { width: 18rem; height: 18rem; bottom: -9rem; right: -6rem; }
.contact-spark { width: 3rem; height: 3rem; fill: var(--coral); margin: 0 auto var(--s-4); }
.contact-panel h2 { color: var(--branco-quente); margin-bottom: var(--s-4); }
.contact-lede {
color: #D8E6DD;
font-size: var(--fs-lede);
max-width: 42rem;
margin: 0 auto var(--s-6);
}
.contact-cta { position: relative; z-index: 1; }
.contact-list {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: var(--s-3) var(--s-6);
margin-top: var(--s-6);
position: relative;
z-index: 1;
}
.contact-list li {
display: inline-flex;
align-items: center;
gap: var(--s-2);
color: #D8E6DD;
font-weight: 600;
font-size: var(--fs-small);
}
.contact-list a { color: var(--branco-quente); text-underline-offset: 3px; }
.contact-list .ico { fill: var(--coral); }
/* ---------- Footer ---------- */
.site-footer {
background: var(--verde-ink);
color: #B8CCC1;
padding: var(--s-7) 0;
}
.footer-inner {
display: grid;
gap: var(--s-4);
justify-items: center;
text-align: center;
}
.brand-footer .brand-word { color: var(--cream); }
.brand-footer .brand-sub { color: #9FC3B3; }
.footer-tag { font-family: var(--font-display); font-weight: 600; color: var(--cream); }
.footer-nav {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: var(--s-2) var(--s-5);
}
.footer-nav a {
color: #B8CCC1;
text-decoration: none;
font-size: var(--fs-small);
font-weight: 600;
padding: var(--s-2);
display: inline-block;
}
.footer-nav a:hover { color: var(--cream); text-decoration: underline; text-underline-offset: 3px; }
.footer-legal { font-size: 0.875rem; }
.footer-legal a { color: #B8CCC1; }
/* ---------- CTA flutuante (mobile) ---------- */
.floating-cta {
position: fixed;
left: 50%;
bottom: 1rem;
transform: translateX(-50%);
z-index: 60;
display: none;
align-items: center;
gap: var(--s-2);
min-height: 52px;
padding: 0.85rem 1.5rem;
background: var(--verde-ink);
color: var(--branco-quente);
border: 2px solid rgba(255, 253, 248, 0.25);
border-radius: var(--r-pill);
font-family: var(--font-display);
font-weight: 700;
font-size: 1rem;
text-decoration: none;
box-shadow: var(--shadow-lg);
}
.floating-cta .ico { fill: var(--coral); width: 1.4em; height: 1.4em; }
@media (max-width: 700px) {
.floating-cta { display: inline-flex; }
body { padding-bottom: 5.5rem; }
}
/* ---------- Reveals (só com JS; conteúdo visível por padrão) ---------- */
.js .reveal {
opacity: 0;
transform: translateY(22px) scale(0.985);
}
.js .reveal.in {
opacity: 1;
transform: none;
transition: opacity var(--dur) var(--ease), transform var(--dur) var(--spring);
}
/* dentro do bloco editorial o motion é mais tipográfico: só fade + leve rise */
.js .lgpd-panel .reveal { transform: translateY(14px); }
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
.js .reveal { opacity: 1; transform: none; transition: none; }
*, *::before, *::after {
animation-duration: 0.001s !important;
animation-iteration-count: 1 !important;
transition-duration: 0.001s !important;
}
}
/* ---------- Ajustes finos mobile ---------- */
@media (max-width: 480px) {
.hero { padding-top: var(--s-6); }
.hero-grid { padding-bottom: var(--s-7); }
.section { padding: var(--s-8) 0; }
.hero-actions .btn { width: 100%; }
.hero-visual { min-height: 0; margin-top: var(--s-4); }
.hero-chip-1 { top: 6%; }
.hero-chip-2 { right: 0; }
}
/* ============================================================
Para quem — grade de 5 verticais + bloco Indústria (rodada 2.1)
============================================================ */
.cards-vert{
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: var(--s-5);
}
.cards-vert > .vert-card:nth-child(-n+3){ grid-column: span 2; }
.cards-vert > .vert-card:nth-child(n+4){ grid-column: span 3; }
.ind-panel{
margin-top: var(--s-6);
background: var(--verde-escuro);
color: #FBF6EC;
border-radius: var(--r-lg);
padding: clamp(1.75rem, 4vw, 3rem);
display: grid;
grid-template-columns: 1.05fr 1fr;
gap: clamp(1.5rem, 4vw, 3rem);
align-items: center;
box-shadow: var(--shadow-lg);
position: relative;
overflow: hidden;
}
.ind-panel::after{
content: "";
position: absolute;
right: -90px; top: -90px;
width: 240px; height: 240px;
border-radius: 50%;
border: 2px solid rgba(242, 107, 58, 0.32);
pointer-events: none;
}
.ind-eyebrow{
display: inline-flex;
align-items: center;
gap: var(--s-2);
font-family: var(--font-display);
font-weight: 700;
font-size: 0.95rem;
letter-spacing: 0.02em;
color: var(--coral-bright);
margin-bottom: var(--s-4);
}
.ind-eyebrow .spark-mini{ width: 1.15rem; height: 1.15rem; fill: var(--coral); }
.ind-title{
font-family: var(--font-display);
font-size: clamp(1.5rem, 3.2vw, 2.1rem);
line-height: 1.12;
margin-bottom: var(--s-4);
color: #FBF6EC;
}
.ind-title em{ color: var(--coral-bright); font-style: italic; }
.ind-lede{ color: var(--paper-dim); margin-bottom: var(--s-5); max-width: 36ch; }
.ind-copy .btn{ width: auto; }
.ind-points{ list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-4); }
.ind-point{ display: flex; gap: var(--s-4); align-items: flex-start; }
.ind-ico{
flex: 0 0 auto;
width: 2.75rem; height: 2.75rem;
border-radius: 0.9rem;
background: rgba(242, 107, 58, 0.16);
color: var(--coral-bright);
display: grid; place-items: center;
}
.ind-ico svg{ width: 1.5rem; height: 1.5rem; }
.ind-point strong{
display: block;
font-family: var(--font-display);
font-weight: 700;
margin-bottom: 2px;
}
.ind-point span{ color: var(--paper-dim); font-size: 0.95rem; line-height: 1.5; }
@media (max-width: 900px){
.cards-vert{ grid-template-columns: 1fr 1fr; }
.cards-vert > .vert-card:nth-child(-n+3),
.cards-vert > .vert-card:nth-child(n+4){ grid-column: auto; }
.ind-panel{ grid-template-columns: 1fr; }
}
@media (max-width: 560px){
.cards-vert{ grid-template-columns: 1fr; }
}