/* WhatsCRM Aqua Site — portado do standalone aprovado (2026-07-19). Fonte Line Awesome via CDN.
* WhatsCRM Design System — Colors & Type
* Aesthetic: "Premium Chumbo & Verde" (Aqua palette) — dark gunmetal w/ greener undertone,
* WhatsApp-green hero, teal/mint family for secondary accents, single amber as warm contrast.
* Aqua approved 2026-05 — replaces Tinted indigo/purple/pink/sky accents.
* Source: gleissonfreire/WhatsCRM (Laravel 9 + Vue 3, Tailwind on auth, Bootstrap 5 on dashboard)
*/
/* ---------- Webfont (Inter — codebase explicitly imports from Google Fonts) ---------- */
/* cyrillic-ext */
/* Inter carregada via Google Fonts no (font-face original do export tinha URLs opacas). */
:root {
/* ===========================================================
COLOR — BRAND
"Chumbo" (lead/gunmetal) backgrounds + WhatsApp green accent.
Hex codes lifted directly from CLAUDE.md, auth.css and the
menu-builder preview reference.
=========================================================== */
/* Primary (WhatsApp Green) — never changes */
--wgreen: #25d366; /* primary accent / CTAs / active state */
--wgreen-dark: #128c7e; /* hover / pressed for primary */
--wgreen-glow: rgba(37, 211, 102, 0.4);
--wgreen-soft: rgba(37, 211, 102, 0.14);
--wgreen-line: rgba(37, 211, 102, 0.3);
/* Chumbo (Aqua-tuned: undertone esverdeado, G > B > R) */
--chumbo-950: #060a0a; /* deepest — gradient bottom */
--chumbo-900: #0a1313; /* L1 — sidebar topo / Auth body */
--chumbo-800: #0d1818; /* canvas dark, app shell */
--chumbo-700: #111d1e; /* L2 — sidebar fim / Auth glass card */
--chumbo-600: #152525; /* L3 — canvas Tinted (board / content) */
--chumbo-500: #1a2a2a; /* L4 — surface (sub-header, lista, topbar) */
--chumbo-400: #1a3030; /* L5 — card (bubbles, lead cards, KPI cards) */
--chumbo-300: #243838; /* L6 — hover state */
/* SECUNDÁRIOS — família teal/mint (sem azul/roxo/rosa/sky) */
--teal-deep: #0F766E; /* substitui indigo em KPIs / chart accents */
--teal: #14B8A6; /* secundário forte */
--mint: #5EEAD4; /* stage Negociação / accents claros */
--sage: #64748B; /* stage Novo Lead — slate neutro */
--aqua-mid: #0EA5A1; /* stage Qualificado */
/* CONTRASTE intencional — único quente */
--amber: #F59E0B; /* stage Proposta / warning */
--amber-soft: rgba(245, 158, 11, 0.14);
--amber-line: rgba(245, 158, 11, 0.35);
/* Text — mint-tinted body (era lime #cdeec0) */
--text-strong: #ffffff;
--text-main: #e9edef;
--text-body: #d1f5e7; /* mint-tinted body / sidebar headers */
--text-header: #d1f5e7; /* alias for legacy refs */
--text-muted: #8b9f9a; /* mid contrast */
--text-faint: #5a6b69; /* tiny eyebrow labels */
/* Lines / glass — aqua-tuned glass fill */
--glass-bg: rgba(17, 29, 30, 0.85);
--glass-line: rgba(255, 255, 255, 0.08);
--glass-line-strong: rgba(255, 255, 255, 0.2);
--glass-fill: rgba(255, 255, 255, 0.03);
--glass-fill-hover: rgba(255, 255, 255, 0.06);
/* Semantic */
--success: #25d366; /* success === brand green */
--info: #0F766E; /* era indigo #3F52E3 — agora teal */
--warning: #F59E0B;
--danger: #EF4444;
--danger-soft: rgba(239, 68, 68, 0.14);
/* Light mode (cards "redious-border" — mantém para usos pontuais) */
--bg-light: #f5f7fa;
--surface-light: #ffffff;
--line-light: #e5e9ee;
--text-on-light: #0f172a;
--text-on-light-muted: #7e7f92;
/* ===========================================================
TYPE
Inter is THE typeface for WhatsCRM (auth layout imports it
and emails preserve it explicitly). Heavy use of weight 700
and 900 with wide tracking on uppercase eyebrows.
=========================================================== */
/* Sistema tipográfico do site (3 fontes): título / subtítulo / corpo.
Montserrat (títulos) · Poppins (subtítulos/labels) · Roboto (corpo). */
--font-sans: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
--font-display: "Montserrat", "Segoe UI", Helvetica, Arial, sans-serif;
--font-subtitle: "Poppins", "Segoe UI", Helvetica, Arial, sans-serif;
--font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
/* Display + body scale (rem, 16px base) */
--fs-display: 2.5rem; /* 40px — auth h2 / hero */
--fs-h1: 1.875rem; /* 30px */
--fs-h2: 1.5rem; /* 24px — page titles */
--fs-h3: 1.25rem; /* 20px — card titles */
--fs-h4: 1.125rem; /* 18px */
--fs-body: 0.9375rem; /* 15px — main body */
--fs-sm: 0.875rem; /* 14px */
--fs-xs: 0.75rem; /* 12px */
--fs-eyebrow: 0.625rem; /* 10px — uppercase tracking labels */
--fs-tag: 0.5625rem; /* 9px — micro tags ("INTELLIGENCE HUB") */
--lh-tight: 1.15;
--lh-snug: 1.35;
--lh-body: 1.55;
--tracking-tight: -0.02em;
--tracking-eyebrow: 0.2em; /* "CREDENCIAIS" style */
--tracking-tag: 0.4em; /* "INTELLIGENCE HUB" style */
/* Weight tokens — WhatsCRM leans EXTREME (regular + 700 + 900) */
--fw-regular: 400;
--fw-medium: 500;
--fw-semi: 600;
--fw-bold: 700;
--fw-black: 900;
/* ===========================================================
SPACING / RADIUS / SHADOW / MOTION
=========================================================== */
--r-xs: 4px;
--r-sm: 8px; /* default button */
--r-md: 12px; /* builder group cards */
--r-lg: 16px; /* glass inputs (1rem) */
--r-xl: 20px; /* glass-input top scale (1.25rem) */
--r-card: 56px; /* THE signature: auth main-card uses 3.5rem */
--r-pill: 999px;
--s-1: 4px;
--s-2: 8px;
--s-3: 12px;
--s-4: 16px;
--s-5: 20px;
--s-6: 24px;
--s-8: 32px;
--s-10: 40px;
--s-12: 56px;
--shadow-card: 0 50px 120px rgba(0, 0, 0, 0.7),
0 0 60px rgba(37, 211, 102, 0.05) inset;
--shadow-cta: 0 15px 30px rgba(37, 211, 102, 0.25);
--shadow-cta-hover: 0 20px 40px rgba(37, 211, 102, 0.4);
--shadow-soft: 0 4px 15px rgba(37, 211, 102, 0.2);
--shadow-popover: 0 10px 30px rgba(0, 0, 0, 0.4);
--ease-out: cubic-bezier(0.4, 0, 0.2, 1);
--t-fast: 0.2s;
--t-base: 0.3s;
--t-slow: 0.4s;
}
/* ===========================================================
SEMANTIC TYPOGRAPHY UTILITY CLASSES
Use these in mockups so type stays consistent across files.
=========================================================== */
.ds-display,
.ds-h1,
.ds-h2,
.ds-h3,
.ds-h4,
.ds-body,
.ds-eyebrow,
.ds-tag,
.ds-mono { font-family: var(--font-sans); }
.ds-display {
font-size: var(--fs-display);
font-weight: var(--fw-black);
line-height: var(--lh-tight);
letter-spacing: var(--tracking-tight);
}
.ds-h1 { font-size: var(--fs-h1); font-weight: var(--fw-black); line-height: var(--lh-tight); }
.ds-h2 { font-size: var(--fs-h2); font-weight: var(--fw-bold); line-height: var(--lh-snug); }
.ds-h3 { font-size: var(--fs-h3); font-weight: var(--fw-bold); line-height: var(--lh-snug); }
.ds-h4 { font-size: var(--fs-h4); font-weight: var(--fw-semi); line-height: var(--lh-snug); }
.ds-body { font-size: var(--fs-body); font-weight: var(--fw-regular); line-height: var(--lh-body); }
.ds-small { font-size: var(--fs-sm); font-weight: var(--fw-regular); line-height: var(--lh-body); color: var(--text-muted); }
.ds-eyebrow {
font-size: var(--fs-eyebrow);
font-weight: var(--fw-black);
text-transform: uppercase;
letter-spacing: var(--tracking-eyebrow);
color: var(--wgreen);
}
.ds-tag {
font-size: var(--fs-tag);
font-weight: var(--fw-black);
text-transform: uppercase;
letter-spacing: var(--tracking-tag);
color: var(--wgreen);
opacity: 0.8;
}
.ds-mono {
font-family: var(--font-mono);
font-size: var(--fs-xs);
color: var(--text-muted);
}
*,*::before,*::after{box-sizing:border-box}
*{scrollbar-width:thin;scrollbar-color:rgba(37,211,102,.3) transparent}
html{scroll-behavior:smooth}
html,body{margin:0;background:#070f0f;font-family:var(--font-sans);color:#d1f5e7;-webkit-font-smoothing:antialiased}
/* `clip` e não `hidden`: recorta o transbordo lateral (halos, glows e o deslocamento inicial das
animações de entrada) sem criar contexto de scroll — o que quebraria o sticky do nav. */
body{overflow-x:clip}
/* Hierarquia tipográfica do site (3 fontes) — títulos / subtítulos / corpo */
.hero h1, .head h2, .spot .copy h3, .dual-card h3 { font-family:var(--font-display); }
.eyebrow, .hero .sub, .sec .head p, .feat h3, .pr-card h4 { font-family:var(--font-subtitle); }
body{
background:
radial-gradient(ellipse 1200px 700px at 70% -100px, rgba(37,211,102,.10), transparent 60%),
radial-gradient(ellipse 900px 500px at 10% 80%, rgba(15,118,110,.08), transparent 70%),
#070f0f;
background-attachment:fixed;
}
/* Faint dot grid base layer (CSS-only) */
body::before{
content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
background-image:radial-gradient(rgba(37,211,102,.08) 1px, transparent 1px);
background-size:28px 28px;
mask-image:radial-gradient(ellipse 70% 60% at 50% 30%, #000 30%, transparent 80%);
}
a{color:inherit;text-decoration:none}
button{font-family:inherit}
img{max-width:100%;display:block}
/* Kit 2026-08-03: canvas de 1280 → 1440 (largura útil 1384 com o padding de 28). */
.wrap{max-width:1440px;margin:0 auto;padding:0 28px;position:relative;z-index:1}
/* ============ NAV ============ */
nav.top{position:sticky;top:0;z-index:50;background:rgba(7,15,15,.78);backdrop-filter:blur(18px);border-bottom:1px solid rgba(255,255,255,.05)}
nav.top .wrap{display:flex;align-items:center;gap:36px;padding-top:14px;padding-bottom:14px}
.brand{display:flex;align-items:center;gap:10px;font-weight:900;font-size:17px;color:#fff;letter-spacing:-.01em}
.brand .mk{width:32px;height:32px;border-radius:9px;background:linear-gradient(135deg,#25D366,#128C7E);display:flex;align-items:center;justify-content:center;color:#0d1818;font-size:18px;box-shadow:0 8px 18px rgba(37,211,102,.3)}
.brand .pill{font-size:9px;font-weight:900;letter-spacing:.18em;color:#5EEAD4;background:rgba(94,234,212,.1);border:1px solid rgba(94,234,212,.3);padding:2px 6px;border-radius:4px;text-transform:uppercase;margin-left:2px}
/* Logotipo vindo do CMS (setting light_logo). Altura fixa e largura automática para aceitar
qualquer proporção que o admin subir sem deformar. */
.brand-img{height:34px;width:auto;max-width:210px;object-fit:contain;display:block}
footer .brand-img{height:30px}
nav.top ul{display:flex;gap:28px;list-style:none;margin:0;padding:0;font-size:13.5px;font-weight:600;color:#a8bdb8}
nav.top ul a{display:inline-flex;align-items:center;gap:5px}
nav.top ul a:hover{color:#fff}
nav.top ul a .new{font-size:8.5px;font-weight:900;color:#0d1818;background:#5EEAD4;padding:1px 5px;border-radius:3px;letter-spacing:.05em}
nav.top .spacer{flex:1}
.btn{display:inline-flex;align-items:center;gap:8px;border:none;cursor:pointer;font-family:inherit;font-weight:800;letter-spacing:-.005em;transition:.2s var(--ease-out)}
.btn.ghost{background:none;color:#d1f5e7;font-size:13.5px;padding:9px 4px}
.btn.ghost:hover{color:#fff}
.btn.primary{background:#25D366;color:#0d1818;font-size:13.5px;padding:10px 18px;border-radius:10px;box-shadow:0 6px 18px rgba(37,211,102,.3)}
.btn.primary:hover{background:#5FE3A0;transform:translateY(-1px);box-shadow:0 10px 24px rgba(37,211,102,.45)}
.btn.outline{background:rgba(255,255,255,.03);color:#fff;font-size:13.5px;padding:10px 18px;border:1px solid rgba(255,255,255,.12);border-radius:10px}
.btn.outline:hover{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.2)}
.btn.big{font-size:15.5px;padding:14px 26px;border-radius:12px}
.btn .arrow{transition:transform .25s}
.btn:hover .arrow{transform:translateX(3px)}
/* ============ HERO ============ */
/* O clipe que o scale(1.2) do mock exige já existe: `.hero` está na lista de seções com
overflow:hidden do kit (procurar "viram scroll horizontal na página"). Não repetir aqui. */
.hero{padding:60px 0 80px;position:relative}
.hero .wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:100px;align-items:center}
/* min-width:0 é obrigatório aqui. Uma faixa `fr` nasce com min-width:auto, e o badge do H1
é `white-space:nowrap` — com a frase mais comprida ele ESTICAVA esta coluna, roubando
largura ao mock à direita. Pior: o JS mede a coluna para decidir o quanto encolher a
pílula, então media uma largura que a própria pílula tinha inflado, e a conta nunca
fechava (visto no resize: coluna a reportar 738px em vez de 690px). Com min-width:0 a
faixa é dimensionada só pelo fr e a medição volta a ser honesta. */
/* line-height aqui só alcança o que não declara a sua: o h1 (1.02) e o .sub (1.55) mantêm-se,
então na prática isto abre o rótulo de cima e a linha de garantias no pé. */
.hero .copy{min-width:0;line-height:2rem}
/* Os botões não herdam: `.btn` não declara entrelinha, e no telemóvel o rótulo quebra em duas
linhas — com 2rem cada botão ia a 92px de altura contra 65px normais, empurrando a dobra
54px para baixo por causa de espaço que não serve para nada. No desktop, onde o rótulo cabe
numa linha, isto não muda nada. */
.hero-ctas .btn{line-height:1.25}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:10.5px;font-weight:900;letter-spacing:.22em;text-transform:uppercase;color:#5EEAD4;margin-bottom:18px}
.eyebrow::before{content:"";width:6px;height:6px;border-radius:50%;background:#25D366;box-shadow:0 0 12px #25D366;animation:p 1.6s infinite}
@keyframes p{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.4);opacity:.6}}
.hero h1{margin:0;font-size:clamp(40px,5.2vw,68px);line-height:1.02;letter-spacing:-.025em;font-weight:900;color:#fff}
/* Destaque simples do H1: palavra verde com risco por baixo. Continua a valer nas 13 páginas
internas, cujos títulos usam `` dentro da chave de tradução. */
.hero h1 .hl{position:relative;display:inline-block;color:#25D366}
.hero h1 .hl::after{content:"";position:absolute;left:0;right:0;bottom:.04em;height:.18em;background:linear-gradient(90deg,rgba(37,211,102,.3),rgba(94,234,212,.15));z-index:-1;border-radius:4px}
/* ---- Badge rotativo do H1 (só a home) ----------------------------------------------------
Classe PRÓPRIA (.hl-rotate) e não `.hl` sozinha. A primeira versão disto reescreveu
`.hero h1 .hl`, e isso alcançou os heros das 13 páginas internas: em /precos a palavra
"agora" virou uma pílula rotacionada em caixa alta por cima de "Comece". As duas regras
empatam em especificidade (0,3,0), então esta vem depois de propósito, e o ::after do
destaque simples é desligado abaixo — herdá-lo punha um risco verde a atravessar a pílula.
Tudo em `em` e não em px: a fonte do H1 é clamp(40px..68px), então valores fixos ficariam
desproporcionais no telemóvel. Em 68px estes `em` dão exatamente os px de referência
(padding 6/24/16, gap 16).
--badge-color vem do style inline gerado pelo Blade (primeira frase) e é reescrito pelo JS
a cada troca; o valor aqui é só rede de segurança se o atributo faltar. */
.hero h1 .hl-rotate{
--badge-color:37,211,102;
/* justify-content:center com a largura fixa na PÍLULA (escrita pelo JS), e não no texto:
assim o par ícone+frase é centrado como um bloco e o ícone fica sempre encostado à frase.
Com a largura fixa no texto, o ícone ficava preso à extremidade da pílula e a folga das
frases curtas abria um vão entre os dois. */
display:inline-flex;align-items:center;justify-content:center;gap:.28em;
/* --hl-fit é o fator de encaixe que o JS calcula: 1 quando a frase mais comprida cabe na
coluna, menos que 1 quando precisa encolher. Fica no font-size porque padding, gap e
ícone estão todos em `em` — encolhe a pílula inteira em proporção, de uma vez. Sem JS
fica 1, que é o desenho de referência. */
font-size:calc(.8em * var(--hl-fit, 1));
/* Caixa alta e tracking ficam AQUI, no badge, e não em .hl-text: a sonda que o JS usa
para medir as frases é irmã do texto, e se a tipografia estivesse só no texto a sonda
mediria sem maiúsculas nem tracking — larguras curtas e encaixe errado. Declarados uma
vez, herdados pelos dois, sem risco de divergirem. */
text-transform:uppercase;letter-spacing:.035em;
/* Padding invertido em relação à referência: o lado com MENOS folga é o do ícone, porque a
placa dele já tem massa visual própria. Com o ícone à direita, o lado curto passa a ser o
direito. */
padding:.2em .38em .2em .62em;border-radius:999px;
/* Inclinação e recuos: encaixam a pílula na manchete em vez de a deixar assente numa linha
própria. As margens verticais funcionam porque inline-flex é caixa atómica — num inline
comum seriam ignoradas. O -25px à esquerda alinha a borda da pílula com a coluna do
texto, compensando o padding interno. */
transform:rotate(-1.5deg);
margin:-5px 0 -20px -25px;
color:rgb(var(--badge-color));
background:rgba(var(--badge-color),.12);
border:1px solid rgba(var(--badge-color),.42);
box-shadow:0 0 0 1px rgba(var(--badge-color),.1),0 18px 55px rgba(var(--badge-color),.16);
/* max-width:100% é rede de segurança: se o fator de encaixe do JS não correr (script em
falha, JSON malformado), a pílula fica contida na linha em vez de transbordar a coluna. */
white-space:nowrap;max-width:100%;vertical-align:middle;
transition:color .4s ease,background .4s ease,border-color .4s ease,box-shadow .4s ease;
}
/* Desliga o risco verde do destaque simples: as duas regras empatam em especificidade e o
badge carrega as duas classes, logo o ::after vinha herdado e atravessava a pílula. */
.hero h1 .hl-rotate::after{content:none}
.hero h1 .hl-rotate .hl-icon{
width:.75em;height:.75em;flex-shrink:0;border-radius:27%;
display:inline-flex;align-items:center;justify-content:center;
/* Placa ESCURA tingida com a cor corrente, não a cor sólida. É o que permite o ícone ser
vibrante: cor cheia sobre fundo escuro do mesmo matiz. A referência trazia
rgba(58,26,153,.41) fixo — aquele era o violeta da frase que estava no ecrã no momento
da medição; aqui deriva-se de --badge-color, senão o frame ficava violeta nas quatro
frases enquanto o ícone mudava de cor.
A primeira declaração é o recurso para navegador sem color-mix: escuro neutro, que
garante o contraste mesmo sem o tingimento. */
background:rgba(5,12,11,.72);
background:color-mix(in srgb, rgb(var(--badge-color)) 26%, rgba(5,12,11,.82));
box-shadow:0 4px 14px rgba(0,0,0,.35);
transition:background .4s ease;
}
/* Cor corrente, não branco: é o ícone que carrega o tom da frase. */
.hero h1 .hl-rotate .hl-icon i{color:rgb(var(--badge-color));font-size:.52em}
/* A caixa alta não está gravada no lang, é o text-transform herdado do badge: leitor de ecrã
soletra texto todo em maiúsculas como se fosse sigla.
Largura ÚNICA (era largura por frase): agora que a pílula está inclinada, mudar de largura
a cada troca fazia-a balançar — a borda arredondada rodada chama a atenção para o
movimento. Com largura fixa a pílula fica quieta e só o conteúdo troca.
A largura é da PÍLULA, escrita pelo JS a partir da frase mais comprida, e não fixada em
540px: um número fixo ou sobra folga nas frases curtas ou corta a mais comprida quando o
fator de encaixe muda com o viewport — e corta em silêncio, porque a pílula tem overflow
visível. O texto fica com largura natural, para o ícone o acompanhar. */
.hero h1 .hl-rotate .hl-text{display:inline-block;flex-shrink:0}
/* Sai para cima, entra de baixo: lê-se como um carretel vertical. A saída usa `forwards`
porque o conteúdo só é trocado quando ela termina — sem isso o texto velho reaparece
por um frame antes de mudar. */
.hero h1 .hl-rotate.is-out .hl-icon,
.hero h1 .hl-rotate.is-out .hl-text{animation:hlSai .22s ease forwards}
.hero h1 .hl-rotate.is-in .hl-icon,
.hero h1 .hl-rotate.is-in .hl-text{animation:hlEntra .34s ease}
@keyframes hlSai{to{opacity:0;transform:translateY(-.14em)}}
@keyframes hlEntra{from{opacity:0;transform:translateY(.16em)}}
@media (prefers-reduced-motion:reduce){
.hero h1 .hl-rotate{transition:none}
.hero h1 .hl-rotate.is-out .hl-icon,.hero h1 .hl-rotate.is-out .hl-text,
.hero h1 .hl-rotate.is-in .hl-icon,.hero h1 .hl-rotate.is-in .hl-text{animation:none}
}
.hero .sub{margin:20px 0 28px;font-size:18px;line-height:1.55;color:#a8bdb8;max-width:540px;font-weight:400}
.hero .sub b{color:#fff;font-weight:700}
.hero-ctas{display:flex;align-items:center;gap:14px;margin-bottom:22px}
.hero-trust{display:flex;align-items:center;gap:18px;font-size:12.5px;color:#8b9f9a;font-weight:600}
/* Prova social: uma linha discreta abaixo das garantias. Fica em
, não em , para
não depender de nenhuma regra global de span. */
.hero-social{margin:14px 0 0;font-size:12.5px;font-weight:700;color:#d1f5e7;letter-spacing:.01em;line-height:1.5}
.hero-trust .it{display:inline-flex;align-items:center;gap:6px}
.hero-trust .it i{color:#5EEAD4;font-size:15px}
.hero-trust .sep{color:#3a4a48}
/* HERO MOCKUP — composite Inbox preview */
/* ---- Mock do hero: cartões de vidro ----------------------------------------------------
Os cartões deixaram de ter fundo próprio (#152525) e passaram a ser translúcidos com
backdrop-filter, para a fotografia do hero aparecer através deles. Consequências que
obrigaram a mexer noutros pontos:
· a foto tem de ficar mais discreta, senão o texto dos cartões briga com a cena
(ver --photo-op em .hero.photo-bg mais abaixo);
· a seção ganhou overflow:hidden, por causa do scale abaixo;
· há um bloco @supports no fim que sobe as opacidades onde backdrop-filter não existe,
senão o texto fica sobre 20-30% de cor e deixa de ser legível. */
/* `scale` (propriedade independente) e NÃO transform:scale(). Este elemento é um `.reveal
from-right`, e o sistema de animação declara `.reveal-ready .reveal.show{transform:none}`
— (0,3,0), que ganha de qualquer transform escrito aqui. Medido: o scale simplesmente não
aplicava. A propriedade `scale` compõe com o transform da animação em vez de o disputar,
então a entrada lateral continua a funcionar e a ampliação fica. */
/* transform-origin deslocado para a direita: com a origem no centro (padrão), a ampliação
cresce para os dois lados e em 1440px ou menos os cartões saíam pela borda direita do
ecrã — medido a cortar 62px do "847/h CONVERSAS", perda real de conteúdo. À esquerda há
espaço vazio (o gap da grelha e a folga depois do texto), então é para lá que a ampliação
cresce. Em ecrã largo o resultado é idêntico ao da referência; em ecrã estreito degrada
sem cortar nada. */
.hero-mock{position:relative;perspective:1400px;height:520px;margin:20px;scale:1.14;transform-origin:100% 50%}
/* Entre 981px e 1100px as duas colunas ainda existem, mas a do mock fica estreita e a
ampliação de 1,2 — que cresce toda para a esquerda — passava a cobrir o parágrafo e a
linha de garantias. Medido: 20x22px de sobreposição em 1024px. Abaixo de 981px a grelha
vira uma coluna e o problema deixa de existir. */
@media (max-width:1100px){
.hero-mock{scale:1.02}
}
/* Sem blur: o halo verde fica definido em vez de difuso, e é ele que dá o contorno de luz
por trás dos cartões agora que eles são transparentes. */
.hero-mock .glow{position:absolute;inset:-20px;background:radial-gradient(circle at 60% 40%,rgba(37,211,102,.18),transparent 70%);z-index:0}
.mock-card{position:absolute;background:transparent;border:1px solid rgba(255,255,255,.18);border-radius:18px;box-shadow:0 10px 40px rgba(0,0,0,.6),0 0 0 1px rgba(94,234,212,.08) inset;overflow:hidden}
.mock-inbox{left:8%;top:6%;width:88%;height:90%;transform:rotate(2.2deg) translateZ(60px);z-index:2}
.mock-inbox .hdr{padding:12px 16px;display:flex;align-items:center;gap:10px;background:#1a2a2a;border-bottom:1px solid rgba(255,255,255,.06)}
.mock-inbox .hdr .av{width:32px;height:32px;border-radius:50%;background:linear-gradient(135deg,#25D366,#128C7E);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:900;font-size:11px;position:relative}
.mock-inbox .hdr .av::after{content:"";position:absolute;bottom:-1px;right:-1px;width:9px;height:9px;border-radius:50%;background:#25D366;border:2px solid #1a2a2a}
.mock-inbox .hdr h6{margin:0;font-size:13px;font-weight:900;color:#fff;letter-spacing:-.01em}
.mock-inbox .hdr .sub{font-size:10px;color:#5EEAD4;font-weight:700;margin-top:1px}
.mock-inbox .hdr .acts{margin-left:auto;display:flex;gap:6px;color:#8b9f9a;font-size:13px}
.mock-inbox .stage-bar{padding:8px 16px;display:flex;gap:0;background:rgba(0,0,0,.18);border-bottom:1px solid rgba(255,255,255,.04);font-size:8.5px;font-weight:900;letter-spacing:.06em;text-transform:uppercase}
.mock-inbox .stage-bar .s{padding:4px 8px 4px 11px;background:rgba(37,211,102,.16);color:#5FE3A0;clip-path:polygon(0 0,calc(100% - 6px) 0,100% 50%,calc(100% - 6px) 100%,0 100%,6px 50%);margin-right:-6px}
.mock-inbox .stage-bar .s:first-child{padding-left:8px;clip-path:polygon(0 0,calc(100% - 6px) 0,100% 50%,calc(100% - 6px) 100%,0 100%)}
.mock-inbox .stage-bar .s.on{background:#F59E0B;color:#0d1818;position:relative;z-index:1}
.mock-inbox .stage-bar .s.todo{background:rgba(255,255,255,.04);color:#5a6b69}
/* Painel da conversa: preto a 75% com desfoque do que está atrás. O padrão de pontos saiu —
sobre fundo translúcido ele lia-se como sujidade em cima da fotografia, não como textura
de canvas. Peso 300 porque o texto agora assenta sobre imagem e o peso normal engrossava. */
.mock-inbox .thread{padding:18px 18px 14px;display:flex;flex-direction:column;gap:8px;background:rgba(0,0,0,.75);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);font-weight:300;flex:1}
.mock-inbox .day{align-self:center;font-size:9px;font-weight:800;color:#d1f5e7;background:rgba(0,0,0,.4);padding:3px 10px;border-radius:999px;text-transform:uppercase;letter-spacing:.08em;border:1px solid rgba(255,255,255,.05);margin:2px 0}
.mock-inbox .b{padding:7px 11px;border-radius:11px;font-size:12px;line-height:1.4;max-width:74%;border:1px solid rgba(255,255,255,.05)}
.mock-inbox .b.in{align-self:flex-start;background:rgba(26,48,48,.6);border-top-left-radius:4px;color:#e9edef;font-weight:300}
.mock-inbox .b.out{align-self:flex-end;background:rgba(37,211,102,.18);border-color:rgba(37,211,102,.3);color:#fff;border-top-right-radius:4px}
.mock-inbox .b.bot{align-self:flex-start;background:linear-gradient(135deg,rgba(15,118,110,.25),rgba(20,184,166,.1));border-color:rgba(94,234,212,.3);color:#fff}
.mock-inbox .b.bot .lbl{font-size:8.5px;font-weight:900;color:#5EEAD4;text-transform:uppercase;letter-spacing:.08em;margin-bottom:2px;display:block}
.mock-inbox .typing{align-self:flex-start;display:flex;gap:3px;background:#1a3030;border-top-left-radius:4px;border-radius:11px;padding:9px 12px;border:1px solid rgba(255,255,255,.05)}
.mock-inbox .typing span{width:5px;height:5px;border-radius:50%;background:#5EEAD4;animation:tp 1.4s infinite}
.mock-inbox .typing span:nth-child(2){animation-delay:.2s}
.mock-inbox .typing span:nth-child(3){animation-delay:.4s}
@keyframes tp{0%,80%,100%{opacity:.3;transform:translateY(0)}40%{opacity:1;transform:translateY(-3px)}}
/* Floating KPI mini card on top of inbox */
/* left:52% em vez de right:0 — daí o right:auto, senão as duas âncoras coexistem e a
largura é resolvida por elas em vez de pelo width. */
/* Fundo com cor e opacidade maiores (era rgba(26,48,48,.2), quase fantasma): a 20% os cartões
não leem como superfície e o texto disputa com a fotografia. O gradiente puxa para o verde
do painel de métricas, mantendo-os translúcidos o suficiente para o vidro continuar a
acontecer. */
.mock-kpi{left:52%;right:auto;bottom:-1%;width:50%;background:linear-gradient(135deg,rgba(18,58,44,.74),rgba(17,42,42,.66));backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid rgba(94,234,212,.18);border-radius:14px;padding:13px 15px;transform:rotate(3.9deg);z-index:3;box-shadow:0 30px 60px rgba(0,0,0,.55)}
.mock-kpi .ttl{font-size:8.5px;font-weight:900;color:#5EEAD4;letter-spacing:.2em;text-transform:uppercase;margin-bottom:8px}
.mock-kpi .row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.mock-kpi .kv{display:flex;flex-direction:column;gap:2px}
.mock-kpi .kv .v{font-family:var(--font-mono);font-size:20px;font-weight:900;color:#fff;letter-spacing:-.02em}
.mock-kpi .kv .v.green{color:#25D366}
.mock-kpi .kv .v small{font-size:11px;color:#5EEAD4;font-weight:700;margin-left:2px}
.mock-kpi .kv .k{font-size:9px;color:#8b9f9a;font-weight:700;text-transform:uppercase;letter-spacing:.08em}
.mock-kpi .chip{display:inline-flex;align-items:center;gap:4px;font-size:10px;font-weight:900;color:#5FE3A0;margin-top:8px}
.mock-kpi .chip i{font-size:11px}
/* Floating bot suggestion */
/* Mesma razão do .mock-kpi, aqui puxando para o teal do bloco de IA. */
.mock-ai{left:-8%;bottom:-3%;width:50%;background:linear-gradient(135deg,rgba(20,64,62,.76),rgba(17,44,44,.66));backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid rgba(94,234,212,.3);border-radius:14px;padding:13px 15px;transform:rotate(-1.5deg);z-index:4;box-shadow:0 30px 60px rgba(0,0,0,.55),0 0 40px rgba(94,234,212,.1)}
.mock-ai .h{display:flex;align-items:center;gap:8px;margin-bottom:7px}
.mock-ai .h .ic{width:22px;height:22px;border-radius:6px;background:linear-gradient(135deg,#0EA5A1,#5EEAD4);color:#0d1818;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:900}
.mock-ai .h .t{font-size:10px;font-weight:900;color:#5EEAD4;letter-spacing:.12em;text-transform:uppercase}
.mock-ai .body{font-size:12px;line-height:1.45;color:#e9edef;font-weight:500}
/* Uma coluna (≤980px): aqui o mock cai para ~325px de largura e 420px de altura. A geometria
do desktop — conversa a 90% da altura e cartões deslocados para FORA em -8% e 52% — foi
desenhada para uma coluna de 624px; nesta largura ela empilhava os cartões flutuantes por
cima da conversa e cortava o texto deles na margem do ecrã (verificado em 390px: o cartão
de IA tapava a bolha do ASSISTENTE IA). A geometria volta a ser contida; o vidro fica.
O translateZ também sai: com perspective ele amplia, e aqui não há folga para isso. */
@media (max-width:980px){
.mock-inbox{left:4%;width:92%;height:74%;transform:rotate(1.4deg) translateZ(0)}
/* Quase opacos, ao contrário do desktop. Sem altura suficiente, os cartões flutuantes
sobrepõem a conversa, e vidro sobre vidro deixa o texto das mensagens atravessá-los —
lia-se "Premium inclu... Web... am e SMS" por trás do cartão de IA. O desfoque não
resolve: ele desfoca o fundo da SEÇÃO, não o irmão que está por baixo. */
.mock-ai{left:0;bottom:0;width:54%;transform:rotate(-1deg);background:rgba(18,32,32,.93)}
.mock-kpi{left:auto;right:0;bottom:3%;width:44%;transform:rotate(1.5deg);background:rgba(18,32,32,.93)}
}
/* Recurso para navegador sem backdrop-filter (Firefox com a flag desligada, WebViews antigas).
Sem o desfoque, 20-30% de cor sobre a fotografia deixa de esconder a cena e o texto dos
cartões fica ilegível. Aqui as superfícies voltam a ser quase opacas: perde-se o efeito de
vidro, mantém-se o conteúdo legível — que é o que não é negociável. */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
.mock-inbox .thread{background:rgba(6,14,13,.94)}
.mock-ai{background:rgba(26,42,42,.94)}
.mock-kpi{background:rgba(26,42,42,.94)}
.mock-inbox .b.in{background:rgba(26,48,48,.95)}
}
.mock-ai .acts{display:flex;gap:6px;margin-top:9px}
.mock-ai .acts .b{flex:1;background:rgba(37,211,102,.16);border:1px solid rgba(37,211,102,.3);color:#5FE3A0;font-size:10px;font-weight:900;padding:5px;border-radius:6px;text-align:center;text-transform:uppercase;letter-spacing:.04em}
.mock-ai .acts .b.ghost{background:none;border-color:rgba(255,255,255,.1);color:#8b9f9a}
/* ============ STATS BAR ============ */
/* Kit de design (comparativo de 07/08/2026): fotografia da analista na seção de recursos.
Especificação do kit: absoluta à direita, 70% de largura, 100% de altura, opacidade
0.30, z-index 0, overflow hidden no contêiner. O parallax move só a camada da foto —
`data-parallax` no já publica --py, e aqui a foto consome essa variável. */
/* --pxa = amplitude do parallax em px. Precisa casar com o data-parallax do :
a folga vertical da camada é DERIVADA dela (top negativo e altura extra), então o
deslocamento nunca expõe a borda da imagem, em qualquer viewport.
Isso substitui o ajuste por monitor. A primeira versão fixava height:100%, e aí a
folga tinha de ser inventada por breakpoint (88% num monitor, 105% noutro) — o que
resolve dois monitores e quebra no terceiro. Com a folga saindo da amplitude, a
geometria é a mesma em qualquer largura e só a amplitude precisa de decisão. */
.feat-photo{position:relative;isolation:isolate;overflow:hidden;--pxa:230px}
.feat-photo>.wrap{position:relative;z-index:1}
/* O título desta seção quebrava depois de "comando", diferente do comparativo, onde
"Sua sala de comando comercial." fica numa linha. A causa é o `.sec .head` do tema,
limitado a 760px, e a linha medida precisa de 801px em 48px. Escopado à seção: os
760px servem as outras, cujos títulos são mais curtos, e alargar para todas mudaria
a quebra de cada uma.
`section.feat-photo` e não `.feat-photo`: com a mesma especificidade de `.sec .head`
(0,2,0) a regra do tema vencia por vir depois no arquivo — medido, chegava 760px. O
elemento no seletor leva para (0,2,1) e resolve sem depender de ordem nem de
!important. */
section.feat-photo .head{max-width:820px}
.feat-photo-layer{
position:absolute;
right:0;
top:calc(-1 * var(--pxa));
height:calc(100% + (2 * var(--pxa)));
width:77%;
z-index:0;
pointer-events:none;
background-image:var(--feat-photo,none);
/* O RECORTE é escolhido aqui, não empurrando a camada para fora da seção.
A área de interesse da fotografia — o rosto — está a ~68% na horizontal e ~32% na
vertical do arquivo (o terço esquerdo é transparente, e a direita é estante).
Com `cover`, a imagem é escalada pela altura e o excedente é cortado na horizontal,
então background-position É o controle do recorte.
O dono chegou ao mesmo enquadramento com `right:-600px`, que funciona mas é um
deslocamento ABSOLUTO: em 1366px de largura os mesmos 600px comem metade da camada e
o recorte muda. Em porcentagem, o rosto fica no lugar em qualquer viewport. */
background-position:68% 32%;
background-size:cover;
background-repeat:no-repeat;
opacity:.42;
filter:contrast(1.2);
/* scale discreta: com a folga vinda de --pxa, a escala não precisa mais servir de
margem de segurança, só de textura. */
transform:translate3d(0,var(--py,0),0) scale(1.04);
will-change:transform;
/* transition:none é deliberado — o movimento vem do rAF com interpolação no JS. Uma
transition aqui brigaria com ele e produziria arrasto duplo. */
transition:none;
/* Esfuma a borda esquerda para a foto não cortar em linha reta no meio do texto. */
-webkit-mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.55) 26%,#000 62%);
mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.55) 26%,#000 62%);
}
/* Em telas estreitas a foto ao lado do texto vira ruído: os cartões passam por cima dela. */
@media (max-width:900px){
.feat-photo{--pxa:40px}
.feat-photo-layer{width:100%;opacity:.16}
}
@media (prefers-reduced-motion:reduce){
.feat-photo{--pxa:0px}
.feat-photo-layer{transform:none}
}
/* Kit de design (comparativo de 07/08/2026): os KPIs deixam de ser uma faixa entre duas
linhas e passam a ser um CARD arredondado, sobre o grafismo de órbita centrado na seção.
Os 60px de padding vêm da especificação do kit. */
.stats{padding:60px 0}
.stats .wrap{
display:grid;grid-template-columns:repeat(4,1fr);gap:0;
padding:34px 10px !important;
border:1px solid rgba(94,234,212,.14);
border-radius:18px;
background:linear-gradient(180deg,rgba(12,26,26,.72),rgba(8,18,18,.82));
/* Halo externo discreto + risco interno de luz no topo: é o que dá o relevo do kit
sem recorrer a sombra pesada, que sobre fundo escuro só suja. */
box-shadow:0 0 0 1px rgba(0,0,0,.35), 0 24px 60px -28px rgba(37,211,102,.22), inset 0 1px 0 rgba(255,255,255,.05);
-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);
}
.stats .it{padding:0 24px;border-right:1px solid rgba(255,255,255,.07);text-align:left}
.stats .it:last-child{border-right:none}
.stats .it .v{font-family:var(--font-mono);font-size:36px;font-weight:900;color:#fff;letter-spacing:-.03em;line-height:1;margin-bottom:8px;display:flex;align-items:baseline;gap:2px}
.stats .it .v small{font-size:18px;color:#5EEAD4;font-weight:800;font-family:var(--font-sans);letter-spacing:0}
.stats .it .k{font-size:11.5px;color:#a8bdb8;font-weight:600;line-height:1.35;max-width:200px}
/* ============ TRUST LOGOS ============ */
/* Tratamento visual da faixa de confiança conforme a especificação do kit
(especificacoes.jpg, 07/08/2026): rótulo em violeta, e os itens deixam de ser texto
com borda tracejada para virar CHIPS preenchidos, com gradiente violeta esvanecendo
para a cor do painel.
O CONTEÚDO segue sendo os segmentos de mercado, não as seis marcas fictícias do kit —
ver LB-169. O que foi importado aqui é a forma, que não afirma nada de falso. */
.trust{padding:40px 0 50px;background:rgba(0,0,0,.55)}
.trust .lbl{text-align:center;font-size:11px;font-weight:800;color:#886FCA;text-transform:uppercase;letter-spacing:.2em;margin-bottom:22px}
/* gap 18px conforme a especificação (era 24px). */
.trust .strip{display:grid;grid-template-columns:repeat(6,1fr);gap:18px;align-items:center}
.trust .lg{
height:38px;display:flex;align-items:center;justify-content:center;
border-radius:8px;
font-family:var(--font-sans);
/* 700 na especificação, era 900 — o chip preenchido já dá presença, e 900 sobre o
violeta translúcido engrossa demais. */
font-weight:700;
font-size:16px;
letter-spacing:-.01em;
/* #A68AF995 é hex de 8 dígitos: violeta claro a ~58% de alfa. */
color:#A68AF995;
background-color:rgba(255,255,255,.02);
background-image:linear-gradient(100deg,rgba(124,58,237,.2) 0%,rgba(124,58,237,.05) 31%,rgb(21,37,37) 100%);
border:1px solid rgba(124,58,237,.18);
filter:contrast(1.2);
transition:.2s;
}
.trust .lg:hover{
color:#c4b5fd;
border-color:rgba(124,58,237,.42);
background-image:linear-gradient(100deg,rgba(124,58,237,.3) 0%,rgba(124,58,237,.1) 31%,rgb(24,42,42) 100%);
}
.trust .lg i{font-size:20px;margin-right:6px}
/* ============ SECTION HEAD ============ */
/* Ancorado em `.head`, NÃO em `.sec .head`. Só `#features` e `#pricing` carregam a classe
`.sec`; "A nossa vantagem" (.dual), "Ativação" (.how), "Comparativo" (.cmp),
"Resultados" (.test) e o simulador (.sim) não — os cabeçalhos delas caíam no default do
browser, sem a fonte de display, sem o verde do .hl e numa escala diferente. Era por isso
que `.integr .head h2` precisou redeclarar cor, fonte e .hl à mão (ver comentário lá).
Baixar a especificidade de (0,2,0) para (0,1,0) também torna as exceções por seção
mais seguras: `.pain .head h2` e `.integr .head h2` passam a ganhar com folga.
`.head` é seguro sem escopo aqui — este arquivo só carrega no tema do site, e as 24
ocorrências de class="head" são todas cabeçalho de seção (`.col-head` é outra classe). */
.sec{padding:90px 0;position:relative}
.head{max-width:760px;margin:0 auto 56px;text-align:center}
.head .eyebrow{margin-bottom:14px}
.head h2{margin:0;font-size:clamp(30px,3.4vw,40px);line-height:1.1;letter-spacing:.015em;font-weight:900;color:#fff}
.head h2 .hl{color:#25D366}
.head h2 .mute{color:#5a6b69;font-weight:800}
/* Violeta do título da secção de conexão (--violet-light do kit). Fica em valor
literal e não em var() porque o token está declarado mais abaixo, noutro escopo,
e o cabeçalho carrega antes. */
.head h2 .vio{color:#A78BFA}
/* `width:80%` em vez do antigo `max-width:600px`: proporcional ao cabeçalho que o contém,
então acompanha as seções de largura diferente (a de recursos tem head de 820px). */
.head p{margin:18px auto 0;width:80%;font-size:20px;color:#a8bdb8;line-height:1.4;letter-spacing:.015em;font-weight:400}
/* No telemóvel os 80% deixam de fazer sentido: com o cabeçalho já reduzido a ~325px,
80% dão 260px, e 20px de texto nessa largura entram a ~26 caracteres por linha — coluna
rasgada. Aqui o parágrafo toma a largura toda e a fonte desce um degrau. */
@media (max-width:640px){
.head p{width:100%;font-size:18px}
}
/* ============ PAIN ============ */
.pain{padding:80px 0;background:rgba(0,0,0,.18);border-top:1px solid rgba(255,255,255,.04);border-bottom:1px solid rgba(255,255,255,.04)}
.pain .grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:50px}
.pain .card{position:relative;padding:24px 22px;background:linear-gradient(180deg,rgba(239,68,68,.06),rgba(239,68,68,0));border:1px solid rgba(239,68,68,.18);border-top:2px solid #EF4444;border-radius:14px;overflow:hidden}
.pain .card::before{content:"";position:absolute;top:0;right:0;width:60px;height:60px;background:radial-gradient(circle at top right,rgba(239,68,68,.15),transparent 70%);pointer-events:none}
.pain .card .ic{width:38px;height:38px;border-radius:9px;background:rgba(239,68,68,.16);color:#F87171;display:flex;align-items:center;justify-content:center;font-size:18px;margin-bottom:12px;border:1px solid rgba(239,68,68,.25)}
.pain .card h4{margin:0;font-size:15.5px;font-weight:900;color:#fff;letter-spacing:-.01em;line-height:1.25}
.pain .card p{margin:7px 0 0;font-size:13px;color:#a8bdb8;line-height:1.55;font-weight:500}
.pain .card .stat{margin-top:14px;padding-top:12px;border-top:1px dashed rgba(255,255,255,.06);font-size:11px;color:#8b9f9a;font-weight:700;display:flex;align-items:center;gap:6px}
.pain .card .stat b{color:#F87171;font-family:var(--font-mono);font-size:14px;font-weight:900}
/* gap 18px conforme a especificação do kit (era 10px) — afasta o rótulo do chevron.
O `justify-content:flex-end` que a especificação também trazia foi omitido de
propósito: num flex em coluna e de altura automática ele não produz efeito nenhum,
e entraria só como linha morta. */
/* `justify-content:flex-end` consta da especificação e fica aqui por fidelidade, mas em
coluna de altura automática não produz efeito: não há espaço livre para distribuir.
O que faltava de facto era o SEGUNDO chevron. */
/* Violeta com halo, e não o teal de antes: esta seta é a passagem da seção do problema para a
da solução, e ficou fora da revisão de paleta. A cor é herdada pelos dois chevrons, que são
glifos de texto — o text-shadow também os alcança, o que é o efeito pretendido. */
.pain .arrow-down{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:18px;margin-top:54px;color:rgb(129,106,192);text-shadow:0 0 12px rgb(86,64,145)}
.pain .arrow-down .t{font-size:11px;font-weight:900;letter-spacing:.2em;text-transform:uppercase}
.pain .arrow-down i{font-size:24px;animation:bd 1.8s infinite}
/* Os dois chevrons quicam com desfasamento, para ler como "continua abaixo" em vez de dois
ícones a piscar em uníssono. O gap de 18px é do contentor; aqui só encosto o segundo no
primeiro, senão a seta dupla fica lida como dois elementos separados. */
.pain .arrow-down i + i{margin-top:-22px;font-size:20px;opacity:.55;animation-delay:.18s}
@keyframes bd{0%,100%{transform:translateY(0)}50%{transform:translateY(6px)}}
/* ============ FEATURE GRID ============ */
.fg{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.feat{position:relative;background:linear-gradient(180deg,#152525,#101e1e);border:1px solid rgba(255,255,255,.06);border-radius:16px;padding:26px 24px;overflow:hidden;transition:.25s}
/* Cartões translúcidos na seção com fotografia, para a imagem de fundo aparecer entre
eles. Escopado a `.feat-photo .feat` — os mesmos cartões aparecem noutras seções sem
foto, onde translucidez só deixaria o fundo chapado à mostra.
O blur é o que permite a translucidez sem custo de leitura: sem ele, o texto disputa
com o rosto da fotografia. É o motivo de não descer a opacidade além disto. */
.feat-photo .feat{
background:linear-gradient(180deg,rgba(21,37,37,.72),rgba(16,30,30,.72));
-webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px);
}
/* A COLUNA DA DIREITA é a que cobre a fotografia (a camada ocupa 47% à direita): nela o
fundo esvanece para a direita, e a imagem emerge na borda. Nas outras a foto nem passa
por baixo, então desbotar só as deixaria lavadas.
`3n` é posicional, mas aqui a posição é a informação: são 3 colunas no grid. Fica
restrito à largura em que o grid REALMENTE tem 3 colunas — abaixo disso ele colapsa e
`3n` acertaria cartões do meio. */
@media (min-width:901px){
.feat-photo .fg .feat:nth-child(3n){
background:linear-gradient(100deg,rgba(21,37,37,.86) 0%,rgba(18,33,33,.72) 46%,rgba(16,30,30,.30) 100%);
}
}
/* Sem backdrop-filter (Firefox com a flag desligada, navegadores antigos), a translucidez
viraria texto sobre rosto. Aí o fundo volta a ser praticamente opaco. */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
.feat-photo .feat{background:linear-gradient(180deg,rgba(21,37,37,.95),rgba(16,30,30,.95))}
.feat-photo .fg .feat:nth-child(3n){background:linear-gradient(180deg,rgba(21,37,37,.95),rgba(16,30,30,.95))}
}
.feat:hover{border-color:rgba(37,211,102,.25);transform:translateY(-3px);box-shadow:0 24px 50px rgba(0,0,0,.4)}
.feat::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(37,211,102,.4),transparent);opacity:0;transition:.3s}
.feat:hover::before{opacity:1}
.feat .ic{width:46px;height:46px;border-radius:11px;display:flex;align-items:center;justify-content:center;font-size:22px;margin-bottom:18px;position:relative}
.feat .ic.c1{background:linear-gradient(135deg,rgba(37,211,102,.2),rgba(37,211,102,.05));color:#25D366;border:1px solid rgba(37,211,102,.25)}
.feat .ic.c2{background:linear-gradient(135deg,rgba(94,234,212,.2),rgba(94,234,212,.05));color:#5EEAD4;border:1px solid rgba(94,234,212,.3)}
.feat .ic.c3{background:linear-gradient(135deg,rgba(15,118,110,.3),rgba(20,184,166,.1));color:#5EEAD4;border:1px solid rgba(15,118,110,.4)}
.feat .ic.c4{background:linear-gradient(135deg,rgba(245,158,11,.18),rgba(245,158,11,.05));color:#FBBF24;border:1px solid rgba(245,158,11,.3)}
.feat .ic.c5{background:linear-gradient(135deg,rgba(14,165,161,.22),rgba(14,165,161,.05));color:#0EA5A1;border:1px solid rgba(14,165,161,.35)}
.feat .ic.c6{background:linear-gradient(135deg,rgba(20,184,166,.22),rgba(20,184,166,.05));color:#14B8A6;border:1px solid rgba(20,184,166,.35)}
.feat h3{margin:0;font-size:18px;font-weight:900;color:#fff;letter-spacing:-.015em}
.feat .tag{display:inline-block;font-size:8.5px;font-weight:900;color:#0d1818;background:#5EEAD4;padding:1px 5px;border-radius:3px;letter-spacing:.06em;text-transform:uppercase;vertical-align:middle;margin-left:6px}
.feat p{margin:10px 0 14px;font-size:13.5px;color:#a8bdb8;line-height:1.55}
.feat ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.feat ul li{display:flex;align-items:flex-start;gap:8px;font-size:12.5px;color:#d1f5e7;line-height:1.4}
.feat ul li i{color:#25D366;font-size:14px;margin-top:1px;flex-shrink:0}
.feat .link{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:800;color:#5EEAD4;margin-top:18px;letter-spacing:-.005em}
.feat .link:hover{color:#fff}
.feat .link .arrow{transition:transform .25s}
.feat:hover .link .arrow{transform:translateX(3px)}
/* ============ SPOTLIGHT ============ */
/* overflow-x:clip — os glows dos visuais (mockups) são maiores que a coluna de propósito;
recortar no eixo horizontal evita scroll lateral sem cortar as sombras verticais. */
.spot{padding:90px 0;overflow-x:clip}
.spot.alt{background:rgba(0,0,0,.18);border-top:1px solid rgba(255,255,255,.04);border-bottom:1px solid rgba(255,255,255,.04)}
/* Camada decorativa das seções spot. O kit traz um grafismo de circuito em spot-flow e
spot-ai, e uma fotografia de escritório em spot-crm — os três ativos já estavam no tema
mas não eram referenciados por lugar nenhum, então não era caso de imagem "invisível":
nunca tinha sido ligada.
Não usa `.photo-bg`: aquele utilitário cobre a seção inteira e centraliza, e aqui o
grafismo aparece num canto. Só materializa quando a seção define --deco, então as
spot sem imagem seguem intactas. */
.spot{position:relative;isolation:isolate}
.spot::before{
content:"";
position:absolute;
inset:0;
z-index:0; /* acima do fundo da própria seção (.spot.alt tem um) */
pointer-events:none;
background-image:var(--deco,none);
background-position:var(--deco-pos,center);
background-size:var(--deco-size,contain);
background-repeat:no-repeat;
opacity:var(--deco-op,.5);
/* O grafismo do kit é traço claro; o brightness do tema não se aplica aqui de
propósito — dimming por opacidade, para o traço não virar cinza-chumbo. */
transform:translate3d(0,var(--py,0),0);
will-change:transform;
}
/* Sem --deco não há pseudo-elemento nenhum: evita criar caixa invisível em toda spot. */
.spot:not([style*="--deco"])::before{content:none}
/* O conteúdo fica acima da decoração. */
.spot>.wrap{position:relative;z-index:1}
@media (max-width:900px){
/* Em telas estreitas o grafismo compete com o texto, que passa a ocupar a largura toda. */
.spot::before{opacity:calc(var(--deco-op,.5) * .45)}
}
.spot .row{display:grid;grid-template-columns:1fr 1.05fr;gap:80px;align-items:center}
.spot .row.rev{grid-template-columns:1.05fr 1fr}
.spot .row.rev .copy{order:2}
.spot .copy h3{margin:14px 0 18px;font-size:clamp(28px,3vw,40px);line-height:1.1;letter-spacing:-.025em;font-weight:900;color:#fff}
.spot .copy h3 .hl{color:#25D366}
.spot .copy .lead{font-size:16px;line-height:1.55;color:#a8bdb8;margin:0 0 22px}
.spot .copy ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px}
.spot .copy ul li{display:flex;align-items:flex-start;gap:13px;font-size:14.5px;color:#d1f5e7;line-height:1.5}
.spot .copy ul li .b{width:22px;height:22px;border-radius:6px;background:rgba(37,211,102,.15);border:1px solid rgba(37,211,102,.3);color:#25D366;display:inline-flex;align-items:center;justify-content:center;font-size:13px;flex-shrink:0;margin-top:1px}
.spot .copy ul li b{color:#fff;font-weight:800}
.spot .copy .footnote{margin-top:24px;font-size:12px;color:#8b9f9a;font-weight:600;font-style:italic;font-family:var(--font-mono)}
/* spot visual common */
.spot .visual{position:relative;height:480px}
.spot .visual .glow{position:absolute;inset:-30px;background:radial-gradient(circle at 50% 50%,rgba(37,211,102,.1),transparent 70%);filter:blur(40px);z-index:0}
/* spot 1 — Inbox mini list */
.v-inbox{background:#152525;border:1px solid rgba(255,255,255,.08);border-radius:18px;height:100%;position:relative;z-index:1;box-shadow:0 40px 80px rgba(0,0,0,.55);overflow:hidden;display:grid;grid-template-columns:200px 1fr}
.v-inbox .li{border-right:1px solid rgba(255,255,255,.05);background:#152525;overflow:hidden}
.v-inbox .li .lh{padding:14px 14px 8px;font-size:13px;font-weight:900;color:#fff}
.v-inbox .li .lh .ct{font-size:10px;font-family:var(--font-mono);color:#5EEAD4;background:rgba(94,234,212,.08);border:1px solid rgba(94,234,212,.25);padding:1px 5px;border-radius:4px;float:right;font-weight:700}
.v-inbox .li .it{display:flex;gap:9px;padding:10px 14px;border-bottom:1px solid rgba(255,255,255,.035);font-size:11.5px;align-items:flex-start;cursor:pointer}
.v-inbox .li .it.on{background:rgba(37,211,102,.08);box-shadow:inset 3px 0 0 #25D366}
.v-inbox .li .it .av{width:28px;height:28px;border-radius:50%;background:linear-gradient(135deg,#25D366,#128C7E);color:#fff;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:900;flex-shrink:0;position:relative}
.v-inbox .li .it .av .ch{position:absolute;bottom:-1px;right:-2px;width:11px;height:11px;border-radius:50%;border:2px solid #152525;display:flex;align-items:center;justify-content:center;font-size:6px;color:#fff}
.v-inbox .li .it .av .ch.wa{background:#25D366}
.v-inbox .li .it .av .ch.ig{background:#E1306C}
.v-inbox .li .it .av .ch.tg{background:#0088cc}
.v-inbox .li .it .av.b2{background:linear-gradient(135deg,#0F766E,#14B8A6)}
.v-inbox .li .it .av.b3{background:linear-gradient(135deg,#F59E0B,#D97706)}
.v-inbox .li .it .av.b4{background:linear-gradient(135deg,#0EA5A1,#5EEAD4);color:#0d1818}
.v-inbox .li .it .bd{min-width:0;flex:1}
.v-inbox .li .it .nm{font-weight:800;color:#fff;font-size:11.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.v-inbox .li .it .pv{font-size:10.5px;color:#8b9f9a;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:500;margin-top:1px}
.v-inbox .li .it .nb{background:#25D366;color:#0d1818;font-size:9px;font-weight:900;border-radius:999px;padding:1px 5px;font-family:var(--font-mono);min-width:14px;text-align:center;align-self:center}
.v-inbox .th{display:flex;flex-direction:column;background:#152525;background-image:radial-gradient(rgba(37,211,102,.04) 1px,transparent 1px);background-size:18px 18px;padding:14px 16px 12px;gap:6px;overflow:hidden}
.v-inbox .th .b{padding:6px 10px;border-radius:10px;font-size:11.5px;line-height:1.4;max-width:80%;border:1px solid rgba(255,255,255,.05)}
.v-inbox .th .b.in{align-self:flex-start;background:#1a3030;border-top-left-radius:3px}
.v-inbox .th .b.out{align-self:flex-end;background:rgba(37,211,102,.18);border-color:rgba(37,211,102,.3);color:#fff;border-top-right-radius:3px}
.v-inbox .th .b.bot{align-self:flex-start;background:linear-gradient(135deg,rgba(15,118,110,.25),rgba(20,184,166,.1));border-color:rgba(94,234,212,.3);color:#fff}
.v-inbox .th .b.bot .lbl{font-size:8px;font-weight:900;color:#5EEAD4;text-transform:uppercase;letter-spacing:.08em;margin-bottom:2px;display:block}
/* spot 2 — Flow Builder node graph */
/* overflow-x:auto — o canvas tem largura fixa (600px); em painel estreito o utilizador arrasta
em vez de o fluxo deformar. O eixo vertical continua recortado. */
.v-flow{background:#0f1c1c;border:1px solid rgba(255,255,255,.08);border-radius:18px;height:100%;position:relative;z-index:1;box-shadow:0 40px 80px rgba(0,0,0,.55);overflow-x:auto;overflow-y:hidden;background-image:radial-gradient(rgba(94,234,212,.05) 1px,transparent 1px);background-size:22px 22px}
.v-flow .toolbar{position:absolute;top:14px;left:14px;display:flex;gap:5px;z-index:2}
.v-flow .toolbar .tb{width:30px;height:30px;border-radius:7px;background:rgba(0,0,0,.4);border:1px solid rgba(255,255,255,.08);color:#a8bdb8;display:flex;align-items:center;justify-content:center;font-size:14px;cursor:pointer}
.v-flow .toolbar .tb.on{background:rgba(37,211,102,.16);border-color:rgba(37,211,102,.3);color:#25D366}
/* top:52px abre espaço para a toolbar; largura fixa de 600px é a que dá o espaçamento do kit. */
.v-flow .canvas{position:relative;width:600px;height:100%;top:52px}
/* z-index:2 na BASE, não por nó. As `svg.edge` vêm depois dos nós no DOM, logo pintavam por
cima dos cards; a correção vinha sendo somada nó a nó (cond, ai, end, msg.tag ganharam
valores avulsos) e os que faltavam — start e msg — continuavam cruzados pelo traço.
Com a base acima das linhas, todo nó novo já nasce correto. Os valores 3 e 4 abaixo
sobrevivem porque ordenam os nós ENTRE SI onde se sobrepõem; qualquer um deles precisa
ser >= 2 para continuar acima do traço. */
.v-flow .node{position:absolute;z-index:2;background:#152525;border:1px solid rgba(255,255,255,.08);border-radius:11px;padding:14px 10px;min-width:140px;min-height:36px;line-height:1.2;box-shadow:0 12px 22px rgba(0,0,0,.45);font-size:11.5px}
.v-flow .node h6{margin:0;font-size:10px;font-weight:900;color:#fff;text-transform:uppercase;letter-spacing:.06em;display:flex;align-items:center;gap:5px}
.v-flow .node h6 i{font-size:13px}
.v-flow .node .sub{font-size:10px;color:#8b9f9a;font-weight:500;margin-top:3px;line-height:1.35}
.v-flow .node.start{border-color:#25D366;background:linear-gradient(135deg,rgba(37,211,102,.16),rgba(37,211,102,.05))}
.v-flow .node.start h6 i{color:#25D366}
/* Fundo comum #18393a por baixo dos gradientes (que são translúcidos): é o que uniformiza os
cartões sem lhes tirar o matiz de cada tipo de bloco. O `start` fica de fora — o verde mais
claro é o que o identifica como início do fluxo. */
.v-flow .node.msg{border-color:rgba(94,234,212,.3);background-color:#18393a}
.v-flow .node.msg h6 i{color:#5EEAD4}
.v-flow .node.cond{border-color:rgba(245,158,11,.3);background:linear-gradient(135deg,rgba(245,158,11,.1),rgba(245,158,11,.02));background-color:#18393a;z-index:4}
.v-flow .node.cond h6 i{color:#FBBF24}
/* Sem z-index próprio: o valor 1 que havia aqui era mais específico que a base e voltava a
empurrar este nó para trás do traço. Herda o 2 da base. */
.v-flow .node.ai{border-color:rgba(94,234,212,.4);background:linear-gradient(135deg,rgba(15,118,110,.2),rgba(20,184,166,.05));background-color:#18393a}
.v-flow .node.ai h6 i{color:#5EEAD4}
.v-flow .node.end{border-color:rgba(37,211,102,.35);background:linear-gradient(135deg,rgba(37,211,102,.12),rgba(37,211,102,.02));background-color:#18393a;z-index:3}
.v-flow .node.end h6 i{color:#25D366}
/* O bloco "Etiquetar" também é `.msg`; a classe extra existe só para o empilhamento. */
.v-flow .node.msg.tag{z-index:3}
.v-flow .edge{position:absolute;z-index:1;pointer-events:none}
/* As arestas vivem num viewBox 0–100 com preserveAspectRatio="none" (as coordenadas do desenho
são percentuais do canvas). Isso distorce a espessura do traço, daí o non-scaling-stroke. */
.v-flow .edge path{fill:none;stroke:#5EEAD4;stroke-width:1.5;stroke-dasharray:4 4;opacity:.55;animation:da 12s linear infinite;vector-effect:non-scaling-stroke}
@keyframes da{to{stroke-dashoffset:-100}}
.v-flow .edge.solid path{stroke-dasharray:0;opacity:.8;stroke:#25D366}
/* spot 3 — AI assistant suggestion stack */
.v-ai{display:flex;flex-direction:column;gap:14px;padding:24px;height:100%;position:relative;z-index:1;justify-content:center}
.v-ai .pad{background:#152525;border:1px solid rgba(255,255,255,.08);border-radius:14px;padding:14px 16px;box-shadow:0 20px 50px rgba(0,0,0,.45)}
.v-ai .pad.ai-lead{background:linear-gradient(135deg,#1a2a2a,#152525);border-color:rgba(94,234,212,.35);box-shadow:0 30px 60px rgba(0,0,0,.5),0 0 50px rgba(94,234,212,.06)}
.v-ai .pad .h{display:flex;align-items:center;gap:9px;margin-bottom:9px}
.v-ai .pad .h .ic{width:30px;height:30px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:15px;font-weight:900}
.v-ai .pad.client .h .ic{background:linear-gradient(135deg,#25D366,#128C7E);color:#fff}
.v-ai .pad.ai-lead .h .ic{background:linear-gradient(135deg,#0EA5A1,#5EEAD4);color:#0d1818}
.v-ai .pad .h .nm{font-size:12px;font-weight:900;color:#fff;letter-spacing:-.01em}
.v-ai .pad .h .ts{font-size:9.5px;color:#5a6b69;font-family:var(--font-mono);font-weight:700;margin-left:auto}
.v-ai .pad.ai-lead .h .nm .b{font-size:8.5px;font-weight:900;color:#0d1818;background:#5EEAD4;padding:1px 5px;border-radius:3px;letter-spacing:.06em;text-transform:uppercase;margin-left:5px;vertical-align:middle}
.v-ai .pad .msg{font-size:13px;line-height:1.5;color:#e9edef;font-weight:500}
.v-ai .pad.client .msg{color:#d1f5e7}
.v-ai .pad.ai-lead .sug{margin-top:11px;padding-top:11px;border-top:1px dashed rgba(94,234,212,.2)}
.v-ai .pad.ai-lead .sug .stag{font-size:8.5px;font-weight:900;color:#5EEAD4;letter-spacing:.15em;text-transform:uppercase;margin-bottom:7px;display:flex;align-items:center;gap:6px}
.v-ai .pad.ai-lead .sug .stag i{font-size:11px}
.v-ai .pad.ai-lead .sug-q{background:rgba(0,0,0,.25);border:1px solid rgba(94,234,212,.2);border-radius:9px;padding:9px 11px;font-size:12px;line-height:1.45;color:#e9edef;font-weight:500}
.v-ai .pad.ai-lead .acts{display:flex;gap:7px;margin-top:10px}
.v-ai .pad.ai-lead .acts .a{flex:1;background:#25D366;color:#0d1818;border:none;font-family:inherit;font-size:10.5px;font-weight:900;padding:7px;border-radius:7px;text-transform:uppercase;letter-spacing:.06em;text-align:center}
.v-ai .pad.ai-lead .acts .a.ghost{background:none;border:1px solid rgba(255,255,255,.1);color:#8b9f9a}
/* spot 4 — Kanban mini */
.v-kan{display:grid;grid-template-columns:repeat(3,1fr);gap:11px;padding:16px;background:#0f1c1c;border:1px solid rgba(255,255,255,.08);border-radius:18px;height:100%;position:relative;z-index:1;box-shadow:0 40px 80px rgba(0,0,0,.55);overflow:hidden}
.v-kan .col{background:#152525;border:1px solid rgba(255,255,255,.05);border-radius:11px;padding:11px;display:flex;flex-direction:column;gap:9px;overflow:hidden}
.v-kan .col .ch{display:flex;align-items:center;justify-content:space-between}
.v-kan .col .ch .lb{font-size:10px;font-weight:900;color:#fff;text-transform:uppercase;letter-spacing:.08em;display:inline-flex;align-items:center;gap:6px}
.v-kan .col .ch .lb .d{width:7px;height:7px;border-radius:50%}
.v-kan .col.c1 .lb .d{background:#64748B}
.v-kan .col.c2 .lb .d{background:#0EA5A1}
.v-kan .col.c3 .lb .d{background:#F59E0B;box-shadow:0 0 8px #F59E0B}
.v-kan .col .ch .ct{font-family:var(--font-mono);font-size:10px;color:#5EEAD4;font-weight:700;background:rgba(94,234,212,.08);border:1px solid rgba(94,234,212,.25);padding:1px 5px;border-radius:3px}
.v-kan .col .ch .val{font-family:var(--font-mono);font-size:9px;color:#5FE3A0;font-weight:700;margin-top:3px}
.v-kan .card{background:#1a3030;border:1px solid rgba(255,255,255,.06);border-radius:9px;padding:9px 10px;font-size:11px}
.v-kan .card .nm{font-weight:800;color:#fff;font-size:11.5px;letter-spacing:-.01em}
.v-kan .card .cp{font-size:10px;color:#8b9f9a;margin-top:2px;font-weight:500}
.v-kan .card .ft{display:flex;align-items:center;justify-content:space-between;margin-top:7px;font-size:10px}
.v-kan .card .ft .vl{font-family:var(--font-mono);font-weight:900;color:#5FE3A0}
.v-kan .card .ft .av{width:18px;height:18px;border-radius:50%;background:linear-gradient(135deg,#0F766E,#14B8A6);color:#fff;font-size:8px;font-weight:900;display:flex;align-items:center;justify-content:center}
.v-kan .card .tags{display:flex;gap:3px;margin-top:6px;flex-wrap:wrap}
.v-kan .card .tags .tg{font-size:8px;font-weight:900;padding:1px 5px;border-radius:3px;text-transform:uppercase;letter-spacing:.04em;border:1px solid}
.v-kan .card .tags .tg.vip{background:rgba(245,158,11,.14);color:#FBBF24;border-color:rgba(245,158,11,.3)}
.v-kan .card .tags .tg.hot{background:rgba(239,68,68,.14);color:#F87171;border-color:rgba(239,68,68,.3)}
.v-kan .card .tags .tg.lead{background:rgba(37,211,102,.14);color:#5FE3A0;border-color:rgba(37,211,102,.3)}
/* ============ HOW IT WORKS ============ */
.how{padding:90px 0}
.how-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;position:relative}
.how-grid::before{content:"";position:absolute;top:42px;left:8%;right:8%;height:1px;background:repeating-linear-gradient(90deg,rgba(94,234,212,.3) 0 6px,transparent 6px 12px)}
.step{background:#152525;border:1px solid rgba(255,255,255,.06);border-radius:16px;padding:30px 26px;position:relative;z-index:1}
.step .n{width:54px;height:54px;border-radius:14px;background:linear-gradient(135deg,#25D366,#128C7E);color:#0d1818;display:flex;align-items:center;justify-content:center;font-size:24px;font-weight:900;font-family:var(--font-mono);letter-spacing:-.02em;margin-bottom:18px;box-shadow:0 12px 24px rgba(37,211,102,.3)}
.step h4{margin:0;font-size:20px;font-weight:900;color:#fff;letter-spacing:-.015em}
.step p{margin:10px 0 14px;font-size:14px;color:#a8bdb8;line-height:1.55}
.step .meta{font-size:11px;font-weight:800;color:#5EEAD4;text-transform:uppercase;letter-spacing:.12em;display:inline-flex;align-items:center;gap:5px;background:rgba(94,234,212,.08);border:1px solid rgba(94,234,212,.2);padding:5px 10px;border-radius:6px}
.step .meta i{font-size:13px}
/* ============ COMPARISON ============ */
.cmp{padding:90px 0;background:rgba(0,0,0,.18);border-top:1px solid rgba(255,255,255,.04);border-bottom:1px solid rgba(255,255,255,.04)}
.cmp-table{background:#152525;border:1px solid rgba(255,255,255,.06);border-radius:18px;overflow:hidden;box-shadow:0 30px 60px rgba(0,0,0,.4)}
.cmp-table table{width:100%;border-collapse:collapse;font-size:14px}
.cmp-table thead th{padding:22px 20px;text-align:center;border-bottom:1px solid rgba(255,255,255,.06)}
.cmp-table thead th:first-child{text-align:left;background:rgba(0,0,0,.18);font-size:10px;font-weight:900;color:#8b9f9a;text-transform:uppercase;letter-spacing:.16em}
.cmp-table thead .col-head{display:flex;flex-direction:column;align-items:center;gap:5px}
.cmp-table thead .col-head .lb{font-size:8.5px;font-weight:900;letter-spacing:.18em;text-transform:uppercase;color:#5a6b69}
.cmp-table thead .col-head h5{margin:0;font-size:17px;font-weight:900;color:#fff;letter-spacing:-.01em;display:flex;align-items:center;gap:7px}
.cmp-table thead .col-head h5 i{font-size:18px;color:#8b9f9a}
.cmp-table thead .col-head.us h5{color:#25D366}
.cmp-table thead .col-head.us h5 i{color:#25D366}
.cmp-table thead th.us-col{background:linear-gradient(180deg,rgba(37,211,102,.14),rgba(37,211,102,.02));position:relative}
.cmp-table thead th.us-col::before{content:"MAIS POPULAR";position:absolute;top:8px;left:50%;transform:translateX(-50%);font-size:8px;font-weight:900;letter-spacing:.2em;color:#0d1818;background:#5EEAD4;padding:2px 8px;border-radius:3px}
.cmp-table tbody td{padding:14px 20px;border-bottom:1px solid rgba(255,255,255,.04);font-size:13.5px;color:#a8bdb8;font-weight:500;text-align:center}
.cmp-table tbody td:first-child{text-align:left;color:#fff;font-weight:700;background:rgba(0,0,0,.12)}
.cmp-table tbody td.us{background:rgba(37,211,102,.05);color:#5FE3A0;font-weight:700}
.cmp-table tbody td.us i{color:#25D366;font-size:18px}
.cmp-table tbody td i.no{color:#5a6b69;font-size:18px}
.cmp-table tbody td i.yes{color:#5FE3A0;font-size:18px}
.cmp-table tbody td .mut{font-size:12px;color:#5a6b69;font-weight:500;display:block;margin-top:2px}
.cmp-table tbody tr:last-child td{border-bottom:none}
/* ============ PRICING ============ */
.pr-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.pr-card{background:#152525;border:1px solid rgba(255,255,255,.07);border-radius:18px;padding:30px 28px;position:relative;display:flex;flex-direction:column;overflow:hidden}
.pr-card.free{border-style:dashed;border-color:rgba(94,234,212,.3)}
/* Ancoragem de preço: o plano do meio ganha borda verde de 2px e halo, além de subir 1,04.
Antes o destaque era só um gradiente sutil, e num grid de três cards ele não vencia os
vizinhos. O scale entra em `scale` (propriedade própria) e não em transform, porque o card
é um `.reveal` e a animação de entrada é dona do transform — mesmo caso do mock do hero. */
.pr-card.pro{border:2px solid #25D366;background:linear-gradient(180deg,#1a2e2c,#152525);box-shadow:0 0 30px rgba(37,211,102,.28),0 30px 60px rgba(37,211,102,.18);position:relative;scale:1.04;z-index:2}
/* Sem ampliação onde os cards empilham: em coluna, 1,04 só cria transbordo lateral. */
@media (max-width:900px){
.pr-card.pro{scale:1}
}
/* Valor diário: ressignifica o preço mensal. Verde e discreto, logo sob o número. */
.pr-card .pr-daily{font-size:12.5px;font-weight:800;color:#5FE3A0;margin:-4px 0 8px}
.pr-card.pro::before{content:"";position:absolute;inset:0;border-radius:18px;padding:1.5px;background:linear-gradient(135deg,#25D366,#5EEAD4,#F59E0B);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}
.pr-card .ribbon{position:absolute;top:14px;right:14px;font-size:8.5px;font-weight:900;letter-spacing:.18em;text-transform:uppercase;padding:4px 9px;border-radius:5px}
.pr-card.free .ribbon{background:rgba(94,234,212,.14);color:#5EEAD4;border:1px solid rgba(94,234,212,.3)}
.pr-card.pro .ribbon{background:linear-gradient(135deg,#25D366,#5EEAD4);color:#0d1818}
.pr-card.ent .ribbon{background:rgba(245,158,11,.16);color:#FBBF24;border:1px solid rgba(245,158,11,.3)}
.pr-card h4{margin:0 0 6px;font-size:14px;font-weight:900;color:#fff;text-transform:uppercase;letter-spacing:.1em}
.pr-card .desc{font-size:13px;color:#8b9f9a;font-weight:500;line-height:1.45;margin-bottom:22px;min-height:38px}
.pr-card .price{display:flex;align-items:baseline;gap:4px;margin-bottom:6px}
.pr-card .price .cur{font-size:18px;color:#a8bdb8;font-weight:700}
.pr-card .price .vl{font-family:var(--font-mono);font-size:50px;font-weight:900;color:#fff;letter-spacing:-.04em;line-height:1}
.pr-card .price .pe{font-size:14px;color:#8b9f9a;font-weight:600;margin-left:3px}
.pr-card .billing{font-size:11px;color:#5a6b69;font-weight:700;text-transform:uppercase;letter-spacing:.08em;margin-bottom:22px}
/* Selo do teste grátis (LB-303). Fica entre a periodicidade e o botão, que é o último
ponto onde o olho passa antes de clicar. A margem negativa recupera parte do
`margin-bottom:22px` do `.billing` acima — sem ela o selo flutuaria longe do CTA a
que pertence. */
/* `align-self:flex-start` e `width:fit-content` porque o cartão é uma coluna flex com
stretch por omissão: sem os dois, o `inline-flex` era esticado à largura toda e o selo
passava a parecer um campo de formulário em vez de uma etiqueta. Alinha à esquerda,
como o preço e a linha de cancelamento logo acima. */
.pr-card .pr-trial{display:inline-flex;align-self:flex-start;width:fit-content;align-items:center;gap:6px;margin:-14px 0 18px;padding:5px 12px;border-radius:20px;background:rgba(37,211,102,.12);border:1px solid rgba(37,211,102,.34);color:#5FE3A0;font-size:12.5px;font-weight:800;letter-spacing:-.005em}
.pr-card .pr-trial i{font-size:15px}
.pr-card .cta{width:100%;border:none;border-radius:11px;padding:13px;font-family:inherit;font-weight:900;font-size:13px;letter-spacing:-.005em;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:8px;transition:.2s}
.pr-card.free .cta{background:rgba(255,255,255,.06);color:#fff;border:1px solid rgba(255,255,255,.12)}
.pr-card.free .cta:hover{background:rgba(37,211,102,.14);border-color:rgba(37,211,102,.35);color:#5FE3A0}
.pr-card.pro .cta{background:#25D366;color:#0d1818;box-shadow:0 12px 24px rgba(37,211,102,.3)}
.pr-card.pro .cta:hover{background:#5FE3A0;transform:translateY(-1px)}
.pr-card.ent .cta{background:rgba(245,158,11,.14);color:#FBBF24;border:1px solid rgba(245,158,11,.35)}
.pr-card.ent .cta:hover{background:rgba(245,158,11,.22)}
.pr-card ul{list-style:none;margin:24px 0 0;padding:24px 0 0;border-top:1px dashed rgba(255,255,255,.08);display:flex;flex-direction:column;gap:11px;flex:1}
.pr-card ul li{display:flex;align-items:flex-start;gap:9px;font-size:13px;color:#d1f5e7;font-weight:500;line-height:1.4}
.pr-card ul li i{color:#25D366;font-size:15px;margin-top:1px;flex-shrink:0}
.pr-card ul li.mute{color:#5a6b69}
.pr-card ul li.mute i{color:#3a4a48}
.pr-card ul li b{color:#fff;font-weight:800}
.pr-foot{text-align:center;margin-top:30px;font-size:13px;color:#a8bdb8}
.pr-foot a{color:#5EEAD4;font-weight:700;border-bottom:1px dashed rgba(94,234,212,.4)}
/* ============ TESTIMONIALS ============ */
.test{padding:90px 0}
.test-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:18px;align-items:stretch}
.qcard{background:#152525;border:1px solid rgba(255,255,255,.06);border-radius:18px;padding:30px 28px;display:flex;flex-direction:column;justify-content:space-between;position:relative;overflow:hidden}
.qcard.hero-q{background:linear-gradient(135deg,#0f1c1c 0%,#1a2a2a 100%);border-color:rgba(94,234,212,.2)}
.qcard.hero-q::before{content:"";position:absolute;top:-30px;left:-30px;width:120px;height:120px;background:radial-gradient(circle,rgba(37,211,102,.15),transparent 70%);filter:blur(20px)}
.qcard .quote-mk{font-family:Georgia,serif;font-size:64px;line-height:.4;color:#5EEAD4;opacity:.35;margin-bottom:10px;height:30px}
.qcard p.q{font-size:16px;line-height:1.55;color:#fff;font-weight:500;margin:0 0 22px}
.qcard.hero-q p.q{font-size:22px;line-height:1.45;letter-spacing:-.01em}
.qcard p.q b{color:#5EEAD4;font-weight:700}
.qcard .who{display:flex;align-items:center;gap:11px}
.qcard .who image-slot,.qcard .who .av-ph{width:42px;height:42px;border-radius:50%;flex-shrink:0;background:linear-gradient(135deg,#0F766E,#14B8A6);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:900;font-size:13px;overflow:hidden}
.qcard .who .who-info h6{margin:0;font-size:13.5px;font-weight:900;color:#fff;letter-spacing:-.005em}
.qcard .who .who-info span{font-size:11px;color:#8b9f9a;font-weight:600;display:block;margin-top:1px}
.qcard .metric{margin-top:22px;padding-top:18px;border-top:1px dashed rgba(255,255,255,.08);display:flex;align-items:flex-end;justify-content:space-between;gap:14px}
.qcard .metric .v{font-family:var(--font-mono);font-size:30px;font-weight:900;color:#25D366;letter-spacing:-.03em;line-height:1}
.qcard.hero-q .metric .v{font-size:38px}
.qcard .metric .k{font-size:11px;color:#a8bdb8;font-weight:600;line-height:1.35;text-align:right;max-width:140px}
/* ============ FAQ ============ */
.faq{padding:90px 0;background:rgba(0,0,0,.18);border-top:1px solid rgba(255,255,255,.04);border-bottom:1px solid rgba(255,255,255,.04)}
.faq .wrap{max-width:880px}
.faq-list{display:flex;flex-direction:column;gap:10px;margin-top:50px}
.faq-item{background:#152525;border:1px solid rgba(255,255,255,.06);border-radius:12px;overflow:hidden;transition:.25s}
.faq-item[open]{border-color:rgba(37,211,102,.25);background:#1a2a2a}
.faq-item summary{padding:18px 22px;list-style:none;cursor:pointer;display:flex;align-items:center;gap:14px;font-size:15.5px;font-weight:800;color:#fff;letter-spacing:-.005em}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary .ic{width:28px;height:28px;border-radius:7px;background:rgba(94,234,212,.1);border:1px solid rgba(94,234,212,.2);color:#5EEAD4;display:inline-flex;align-items:center;justify-content:center;font-size:14px;flex-shrink:0;transition:.2s}
.faq-item[open] summary .ic{background:#25D366;color:#0d1818;border-color:#25D366;transform:rotate(45deg)}
.faq-item summary .ttl{flex:1}
.faq-item .ans{padding:0 22px 22px 64px;font-size:14px;color:#a8bdb8;line-height:1.6}
.faq-item .ans b{color:#fff;font-weight:700}
.faq-item .ans a{color:#5EEAD4;border-bottom:1px dashed rgba(94,234,212,.3)}
/* ============ CTA FINAL ============ */
.cta-final{padding:90px 0 100px;position:relative}
.cta-box{background:linear-gradient(135deg,#0a1313 0%,#111d1e 60%,#0d2826 100%);border:1px solid rgba(37,211,102,.25);border-radius:24px;padding:64px 56px;text-align:center;position:relative;overflow:hidden;box-shadow:0 40px 100px rgba(0,0,0,.5),0 0 80px rgba(37,211,102,.1) inset}
.cta-box::before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(37,211,102,.06) 1px,transparent 1px);background-size:24px 24px;mask-image:radial-gradient(ellipse 60% 80% at 50% 50%, #000, transparent);pointer-events:none}
.cta-box::after{content:"";position:absolute;top:-60px;left:50%;transform:translateX(-50%);width:300px;height:120px;background:radial-gradient(circle,rgba(37,211,102,.5),transparent 70%);filter:blur(40px);pointer-events:none}
.cta-box .inner{position:relative;z-index:1}
.cta-box .eyebrow{justify-content:center;margin-bottom:18px}
.cta-box h2{margin:0;font-size:clamp(36px,4.4vw,56px);line-height:1.05;letter-spacing:-.03em;font-weight:900;color:#fff}
.cta-box h2 .hl{color:#25D366}
.cta-box p{margin:20px auto 32px;font-size:17px;color:#a8bdb8;max-width:560px;line-height:1.5}
.cta-box .btns{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-bottom:24px}
.cta-box .micro{display:flex;gap:24px;justify-content:center;font-size:12.5px;color:#8b9f9a;font-weight:600;flex-wrap:wrap}
.cta-box .micro .it{display:inline-flex;align-items:center;gap:6px}
.cta-box .micro .it i{color:#25D366;font-size:15px}
/* ============ FOOTER ============ */
footer{padding:60px 0 30px;border-top:1px solid rgba(255,255,255,.05);background:#070f0f}
footer .wrap{display:grid;grid-template-columns:1.5fr repeat(4,1fr);gap:40px}
footer .col h6{margin:0 0 16px;font-size:10px;font-weight:900;color:#fff;text-transform:uppercase;letter-spacing:.18em}
footer .col ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
footer .col ul a{font-size:13px;color:#8b9f9a;font-weight:500}
footer .col ul a:hover{color:#25D366}
footer .col ul a .new{font-size:8px;font-weight:900;color:#0d1818;background:#5EEAD4;padding:1px 4px;border-radius:3px;letter-spacing:.06em;text-transform:uppercase;margin-left:5px;vertical-align:middle}
footer .col.intro p{font-size:13px;color:#a8bdb8;line-height:1.55;margin:0 0 20px}
footer .col.intro .badges{display:flex;flex-wrap:wrap;gap:6px}
footer .col.intro .badges span{font-size:10px;color:#5EEAD4;background:rgba(94,234,212,.08);border:1px solid rgba(94,234,212,.2);padding:3px 8px;border-radius:5px;font-weight:700;display:inline-flex;align-items:center;gap:5px}
footer .col.intro .badges span i{font-size:12px;color:#25D366}
footer .bottom{margin-top:40px;padding-top:24px;border-top:1px solid rgba(255,255,255,.05);display:flex;justify-content:space-between;align-items:center;font-size:11.5px;color:#5a6b69;font-weight:600;flex-wrap:wrap;gap:14px}
footer .bottom .legal{display:flex;gap:18px}
footer .bottom .legal a:hover{color:#a8bdb8}
footer .bottom .stat{display:inline-flex;align-items:center;gap:7px;color:#a8bdb8;font-weight:700;font-family:var(--font-mono);font-size:11px}
footer .bottom .stat .d{width:7px;height:7px;border-radius:50%;background:#25D366;box-shadow:0 0 8px #25D366;animation:p 1.6s infinite}
footer .bottom .social{display:flex;gap:10px}
footer .bottom .social a{width:32px;height:32px;border-radius:7px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.06);display:flex;align-items:center;justify-content:center;color:#a8bdb8;font-size:15px}
footer .bottom .social a:hover{background:rgba(37,211,102,.14);border-color:rgba(37,211,102,.3);color:#25D366}
/* ============ TWEAKS PANEL ============ */
.tw-panel{position:fixed;bottom:18px;right:18px;width:280px;background:rgba(15,28,28,.95);backdrop-filter:blur(16px);border:1px solid rgba(94,234,212,.25);border-radius:14px;box-shadow:0 30px 60px rgba(0,0,0,.55),0 0 40px rgba(94,234,212,.06) inset;z-index:100;display:none;font-size:12px}
.tw-panel.open{display:block}
.tw-h{padding:14px 18px;display:flex;align-items:center;gap:10px;border-bottom:1px solid rgba(255,255,255,.05)}
.tw-h h6{margin:0;font-size:11px;font-weight:900;color:#fff;letter-spacing:.18em;text-transform:uppercase;flex:1}
.tw-h h6 i{color:#25D366;margin-right:4px}
.tw-h .x{width:24px;height:24px;border-radius:6px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.06);color:#a8bdb8;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:12px}
.tw-b{padding:16px 18px;display:flex;flex-direction:column;gap:18px;max-height:calc(100vh - 100px);overflow-y:auto}
.tw-g h7{display:block;font-size:9px;font-weight:900;color:#5EEAD4;letter-spacing:.18em;text-transform:uppercase;margin-bottom:8px}
.tw-seg{display:flex;gap:5px;background:rgba(0,0,0,.3);border:1px solid rgba(255,255,255,.06);border-radius:8px;padding:3px}
.tw-seg button{flex:1;background:none;border:none;color:#a8bdb8;font-family:inherit;font-size:10.5px;font-weight:800;padding:6px 4px;border-radius:6px;cursor:pointer;text-transform:uppercase;letter-spacing:.04em}
.tw-seg button.on{background:rgba(37,211,102,.15);color:#25D366;box-shadow:inset 0 0 0 1px rgba(37,211,102,.3)}
.tw-toggle{display:flex;align-items:center;justify-content:space-between;gap:10px;background:rgba(0,0,0,.2);border:1px solid rgba(255,255,255,.04);border-radius:8px;padding:9px 12px}
.tw-toggle label{font-size:12px;color:#d1f5e7;font-weight:600;flex:1;cursor:pointer}
.tw-sw{width:36px;height:20px;border-radius:999px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.1);position:relative;cursor:pointer;flex-shrink:0;transition:.2s}
.tw-sw::after{content:"";position:absolute;top:1px;left:1px;width:16px;height:16px;border-radius:50%;background:#fff;transition:transform .2s;box-shadow:0 2px 4px rgba(0,0,0,.3)}
.tw-sw.on{background:#25D366;border-color:#25D366}
.tw-sw.on::after{transform:translateX(16px)}
.tw-trigger{position:fixed;bottom:18px;right:18px;width:46px;height:46px;border-radius:50%;background:linear-gradient(135deg,#25D366,#128C7E);color:#0d1818;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:20px;box-shadow:0 12px 28px rgba(37,211,102,.4);z-index:99}
/* ============ PURPLE / VIOLET TERTIARY ACCENT ============ */
:root{
--violet:#7C3AED;
--violet-deep:#5B4ECF;
--violet-light:#A78BFA;
--violet-soft:rgba(124,58,237,.14);
--violet-line:rgba(124,58,237,.35);
--violet-glow:rgba(124,58,237,.4);
}
/* Pill-style eyebrow — purple capsule for "feature spotlight" intros */
.eyebrow.pill{
display:inline-flex;align-items:center;gap:7px;
background:var(--violet-soft);
border:1px solid var(--violet-line);
color:var(--violet-light);
padding:6px 14px;border-radius:999px;
font-size:10px;letter-spacing:.22em;font-weight:900;text-transform:uppercase;
margin-bottom:18px;
box-shadow:0 4px 14px rgba(124,58,237,.12)
}
.eyebrow.pill::before{display:none}
/* ---- Provedores de IA em pílulas ----
Antes os nomes não apareciam na página. Em pílula, viram prova de tecnologia: quem
reconhece as marcas entende o que está por baixo sem precisar de explicação. */
.ai-brands{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0 0}
.ai-brands .ab{
display:inline-flex;align-items:center;
font-size:11.5px;font-weight:800;letter-spacing:.06em;
color:#c9bcf5;padding:6px 12px;border-radius:999px;
background:rgba(124,58,237,.14);border:1px solid rgba(124,58,237,.3);
transition:background .2s ease,border-color .2s ease,color .2s ease;
}
.ai-brands .ab:hover{background:rgba(124,58,237,.22);border-color:rgba(167,139,250,.5);color:#fff}
/* ---- CTA fixo ----
Escondido por omissão e revelado pelo JS com `.on`: no topo ele duplicaria o botão
principal que já está visível, e sobre o CTA final taparia o botão de verdade.
`bottom` com env(safe-area-inset-bottom) por causa da barra do iOS. */
.cta-float{
position:fixed;right:20px;bottom:calc(20px + env(safe-area-inset-bottom,0px));z-index:60;
display:inline-flex;align-items:center;gap:8px;
padding:14px 22px;border-radius:999px;
font-size:14px;font-weight:900;letter-spacing:.01em;color:#04120c;
background:linear-gradient(135deg,#25D366,#12B85C);
box-shadow:0 14px 34px rgba(37,211,102,.4),0 0 0 1px rgba(255,255,255,.14) inset;
text-decoration:none;
opacity:0;visibility:hidden;transform:translateY(14px) scale(.96);
transition:opacity .3s ease,transform .3s ease,visibility .3s;
}
.cta-float.on{opacity:1;visibility:visible;transform:none}
.cta-float:hover{background:linear-gradient(135deg,#2ee070,#14c765);box-shadow:0 18px 40px rgba(37,211,102,.5)}
.cta-float:focus-visible{outline:2px solid #fff;outline-offset:3px}
@media (max-width:600px){
.cta-float{right:14px;bottom:calc(14px + env(safe-area-inset-bottom,0px));padding:12px 18px;font-size:13px}
}
@media (prefers-reduced-motion:reduce){
.cta-float{transition:opacity .01s}
}
/* Violet bullet (alternative to green box-check) */
.spot .copy ul li .b.violet{background:var(--violet);border-color:var(--violet);color:#fff;border-radius:50%;box-shadow:0 4px 12px rgba(124,58,237,.35)}
/* ============ DUAL CONNECTION SECTION ============ */
.dual{padding:90px 0;background:rgba(0,0,0,.18);border-top:1px solid rgba(255,255,255,.04);border-bottom:1px solid rgba(255,255,255,.04);position:relative}
.dual::before{content:"";position:absolute;top:-1px;left:50%;transform:translateX(-50%);width:240px;height:2px;background:linear-gradient(90deg,transparent,var(--violet),#25D366,transparent)}
.dual-grid{display:grid;grid-template-columns:1fr 60px 1fr;gap:18px;align-items:stretch;margin-top:14px}
.dual-card{background:#152525;border:1px solid rgba(255,255,255,.07);border-radius:18px;padding:30px 28px;position:relative;overflow:hidden;display:flex;flex-direction:column}
.dual-card.cloud{border-color:rgba(124,58,237,.3);background:linear-gradient(180deg,rgba(124,58,237,.06),rgba(124,58,237,0) 60%,#152525)}
.dual-card.cloud::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,var(--violet),transparent)}
.dual-card.web{border-color:rgba(37,211,102,.25);background:linear-gradient(180deg,rgba(37,211,102,.06),rgba(37,211,102,0) 60%,#152525)}
.dual-card.web::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,#25D366,transparent)}
.dual-card .tag{display:inline-flex;align-self:flex-start;font-size:11px;font-weight:900;letter-spacing:.16em;text-transform:uppercase;padding:4px 9px;border-radius:5px;margin-bottom:14px;gap:5px;align-items:center}
.dual-card .tag i{font-size:20px}
.dual-card.cloud .tag{background:var(--violet-soft);color:var(--violet-light);border:1px solid var(--violet-line)}
.dual-card.web .tag{background:rgba(37,211,102,.12);color:#5FE3A0;border:1px solid rgba(37,211,102,.3)}
.dual-card h3{margin:0 0 4px;font-size:21px;font-weight:900;color:#fff;letter-spacing:.03em;display:flex;align-items:center;gap:11px}
.dual-card h3 .lg{width:40px;height:40px;border-radius:11px;display:flex;align-items:center;justify-content:center;font-size:20px;flex-shrink:0}
/* Placa da marca: fundo neutro, porque os SVG trazem a cor própria (azul da Meta, verde do
WhatsApp) e o fundo tingido de cada card competiria com ela. */
.dual-card h3 .lg.brand{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.09)}
.dual-card h3 .lg.brand svg{display:block}
/* Pulso no logo da Meta: chama o olho para o canal oficial sem piscar. transform-origin no
centro senão o scale desloca o ícone dentro da placa. */
@keyframes metaPulse{
0%,100%{transform:scale(1);filter:drop-shadow(0 0 0 rgba(6,104,225,0))}
50%{transform:scale(1.08);filter:drop-shadow(0 0 8px rgba(6,104,225,.45))}
}
.dual-card h3 .lg.brand svg.meta-pulse{animation:metaPulse 3s ease-in-out infinite;transform-origin:center}
@media (prefers-reduced-motion:reduce){
.dual-card h3 .lg.brand svg.meta-pulse{animation:none}
}
.dual-card.cloud h3 .lg{background:rgba(124,58,237,.2);color:var(--violet-light);border:1px solid var(--violet-line)}
.dual-card.web h3 .lg{background:rgba(37,211,102,.18);color:#25D366;border:1px solid rgba(37,211,102,.35)}
/* A especificação traz `font-size:1.5rem` para o lead e para a lista. Aqui a raiz é 16px,
logo 1.5rem daria 24px — acima dos 21px do
, o que deixaria o corpo do card maior que
o próprio título. Na imagem de referência o título é claramente o maior elemento, então a
medição veio de um documento com raiz reduzida (o truque `html{font-size:62.5%}`, em que
1.5rem = 15px). É esse valor que aplico. O peso 300 e o tracking de .03em são literais. */
.dual-card .lead{font-size:15px;font-weight:300;letter-spacing:.03em;color:#a8bdb8;line-height:1.55;margin:10px 0 18px}
.dual-card .lead b{color:#fff;font-weight:700}
.dual-card ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px;flex:1}
.dual-card ul li{display:flex;align-items:flex-start;gap:10px;font-size:15px;font-weight:300;letter-spacing:.03em;color:#d1f5e7;line-height:1.5}
.dual-card.cloud ul li i{color:var(--violet-light);font-size:15px;flex-shrink:0;margin-top:1px}
.dual-card.web ul li i{color:#25D366;font-size:15px;flex-shrink:0;margin-top:1px}
.dual-card ul li b{color:#fff;font-weight:800}
.dual-card .foot{margin-top:18px;padding-top:16px;border-top:1px dashed rgba(255,255,255,.08);font-size:11px;color:#8b9f9a;font-weight:600;line-height:1.55;font-family:var(--font-mono)}
.dual-card .foot b{color:#fff;font-weight:700;font-family:var(--font-sans)}
.dual-or{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:6px 0;align-self:stretch}
.dual-or .l{width:1px;flex:1;background:linear-gradient(180deg,transparent,rgba(255,255,255,.12),transparent)}
.dual-or .b{font-family:var(--font-mono);font-size:11px;font-weight:900;color:#A78BFA;background:#070f0f;border:1px solid rgba(124,58,237,.3);width:42px;height:42px;border-radius:50%;display:flex;align-items:center;justify-content:center;letter-spacing:.05em;box-shadow:0 4px 14px rgba(124,58,237,.15)}
.dual-cta{margin-top:30px;text-align:center;font-size:14px;color:#a8bdb8;display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:8px}
.dual-cta b{color:#fff;font-weight:800}
.dual-cta .x{display:inline-flex;align-items:center;gap:5px;padding:5px 11px;background:linear-gradient(135deg,var(--violet),#25D366);color:#fff;font-size:10.5px;font-weight:900;letter-spacing:.14em;text-transform:uppercase;border-radius:5px;box-shadow:0 6px 16px rgba(124,58,237,.25)}
.dual-cta .x i{font-size:12px}
/* ============ META COST SIMULATOR ============ */
/* O simulador deixou de ser seção própria e virou sanfona dentro de PLANOS. As regras
`.sim-*` abaixo continuam válidas sem alteração porque nenhuma delas dependia do escopo
`.sim ` — todas são classes autónomas (verificado antes de mover). */
/* Sem cap de largura: o `.sim-grid` é `repeat(4,1fr)` dimensionado para o wrap inteiro
(1440px). Prendê-lo a 860px derrubava cada coluna para ~200px, o rótulo de preço passava
a quebrar em duas linhas e os campos deixavam de alinhar entre si. */
/* Dica acima do simulador: desarma a objeção de custo antes de o visitante abrir a
calculadora. Fundo verde suave, porque a mensagem é uma boa notícia (taxa zero). */
.sim-tip{margin:34px auto 0;max-width:760px;text-align:center;font-size:14.5px;line-height:1.55;color:#d1f5e7;background:rgba(37,211,102,.08);border:1px solid rgba(37,211,102,.22);border-radius:12px;padding:13px 18px}
.sim-tip b{color:#fff;font-weight:800}
.sim-fold{margin:16px auto 0;border:1px solid rgba(94,234,212,.16);border-radius:16px;background:rgba(0,0,0,.22);overflow:hidden}
.sim-fold[open]{border-color:rgba(94,234,212,.3);background:rgba(0,0,0,.3)}
/* O marcador nativo sai por duas vias: `list-style` cobre o Firefox e o Chrome moderno,
`::-webkit-details-marker` cobre o Safari e o Chrome antigo. */
.sim-fold>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:14px;padding:18px 22px;user-select:none}
.sim-fold>summary::-webkit-details-marker{display:none}
.sim-fold>summary:hover{background:rgba(94,234,212,.04)}
/* Foco visível: o é o controlo real da sanfona e navega-se por teclado. */
.sim-fold>summary:focus-visible{outline:2px solid #5EEAD4;outline-offset:-2px}
.sim-fold>summary .ic{width:38px;height:38px;flex-shrink:0;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:19px;color:var(--violet-light);background:rgba(124,58,237,.14);border:1px solid rgba(124,58,237,.24)}
.sim-fold>summary .tx{display:flex;flex-direction:column;gap:2px;min-width:0;text-align:left}
/* / em vez de : a regra global `body.dark-mode span:not(...)` forçaria
cinza sobre qualquer com cor própria. */
.sim-fold>summary .tx b{font-size:15px;font-weight:800;color:#fff;letter-spacing:.015em}
.sim-fold>summary .tx small{font-size:12.5px;color:#8b9f9a;font-weight:500}
.sim-fold>summary .chev{margin-left:auto;flex-shrink:0;font-size:20px;color:#5EEAD4;transition:transform .25s ease}
.sim-fold[open]>summary .chev{transform:rotate(180deg)}
.sim-fold-body{padding:0 22px 22px}
.sim-fold-lead{margin:0 0 20px;font-size:15px;line-height:1.5;color:#a8bdb8;border-top:1px solid rgba(255,255,255,.06);padding-top:18px}
.sim-fold-lead b{color:#fff}
@media (prefers-reduced-motion:reduce){
.sim-fold>summary .chev{transition:none}
}
@media (max-width:640px){
.sim-fold-body{padding:0 14px 16px}
.sim-fold>summary{padding:15px 14px;gap:11px}
}
.sim-box{background:linear-gradient(180deg,#152525,#101e1e);border:1px solid rgba(255,255,255,.07);border-radius:20px;padding:36px 32px;box-shadow:0 30px 60px rgba(0,0,0,.4);position:relative;overflow:hidden}
.sim-box::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,var(--violet-light),transparent)}
.sim-h{display:flex;align-items:flex-start;gap:18px;margin-bottom:24px}
.sim-h .ic{width:50px;height:50px;border-radius:13px;background:var(--violet-soft);border:1px solid var(--violet-line);color:var(--violet-light);display:flex;align-items:center;justify-content:center;font-size:24px;flex-shrink:0}
.sim-h .tx{flex:1}
.sim-h .tx h3{margin:0;font-size:22px;font-weight:900;color:#fff;letter-spacing:-.015em}
.sim-h .tx p{margin:7px 0 0;font-size:13.5px;color:#a8bdb8;line-height:1.55;max-width:640px}
.sim-h .tx p b{color:#5FE3A0;font-weight:700}
.sim-h .badge{font-size:9px;font-weight:900;letter-spacing:.18em;text-transform:uppercase;color:#0d1818;background:linear-gradient(135deg,#5EEAD4,#25D366);padding:5px 10px;border-radius:5px;align-self:flex-start;flex-shrink:0}
.sim-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.sim-input{background:rgba(0,0,0,.22);border:1px solid rgba(255,255,255,.06);border-radius:13px;padding:16px 18px;display:flex;flex-direction:column;gap:11px;transition:.2s}
.sim-input:focus-within{border-color:var(--violet-line);background:rgba(124,58,237,.04)}
.sim-input .lab{display:flex;flex-direction:column;gap:5px}
.sim-input .lab .row{display:flex;align-items:center;gap:8px}
.sim-input .lab .ic-mini{width:24px;height:24px;border-radius:7px;display:flex;align-items:center;justify-content:center;font-size:13px;flex-shrink:0}
.sim-input.mkt .ic-mini{background:rgba(245,158,11,.18);color:#FBBF24;border:1px solid rgba(245,158,11,.3)}
.sim-input.utl .ic-mini{background:rgba(94,234,212,.18);color:#5EEAD4;border:1px solid rgba(94,234,212,.3)}
.sim-input.svc .ic-mini{background:rgba(37,211,102,.18);color:#5FE3A0;border:1px solid rgba(37,211,102,.3)}
.sim-input .lab h5{margin:0;font-size:13.5px;font-weight:900;color:#fff;letter-spacing:-.005em}
.sim-input .lab .pr{font-size:10.5px;color:#8b9f9a;font-weight:600;font-family:var(--font-mono);line-height:1.4}
.sim-input .lab .pr b{color:#5EEAD4;font-weight:700}
.sim-input input{background:rgba(0,0,0,.4);border:1px solid rgba(255,255,255,.08);border-radius:9px;padding:11px 13px;color:#fff;font-family:var(--font-mono);font-size:18px;font-weight:800;outline:none;letter-spacing:-.01em;transition:.2s;width:100%;-moz-appearance:textfield}
.sim-input input::-webkit-outer-spin-button,.sim-input input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.sim-input input:focus{border-color:var(--violet);box-shadow:0 0 0 3px var(--violet-soft);background:rgba(124,58,237,.05)}
.sim-input input::placeholder{color:#5a6b69;font-weight:500}
.sim-result{background:linear-gradient(135deg,#7C3AED 0%,#5B4ECF 100%);color:#fff;border-radius:13px;padding:18px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;position:relative;box-shadow:0 14px 30px rgba(124,58,237,.4),0 0 60px rgba(124,58,237,.2) inset;border:1px solid rgba(255,255,255,.12);overflow:hidden}
.sim-result::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.4),transparent)}
.sim-result::after{content:"";position:absolute;top:-30px;right:-30px;width:90px;height:90px;background:radial-gradient(circle,rgba(255,255,255,.15),transparent 70%);pointer-events:none}
.sim-result .k{font-size:10px;font-weight:900;letter-spacing:.22em;text-transform:uppercase;opacity:.82;line-height:1.4;margin-bottom:6px;position:relative;z-index:1}
.sim-result .vv{font-family:var(--font-mono);font-size:32px;font-weight:900;color:#fff;letter-spacing:-.03em;line-height:1;margin:4px 0 10px;position:relative;z-index:1;text-shadow:0 2px 12px rgba(0,0,0,.3)}
.sim-result .note{font-size:10.5px;color:rgba(255,255,255,.82);font-weight:600;line-height:1.4;max-width:160px;position:relative;z-index:1}
.sim-result .note b{color:#fff;font-weight:800}
.sim-foot{margin-top:22px;padding-top:18px;border-top:1px dashed rgba(255,255,255,.08);display:flex;align-items:flex-start;gap:10px;font-size:12px;color:#8b9f9a;line-height:1.55;font-weight:500}
.sim-foot i{color:var(--violet-light);font-size:14px;margin-top:1px;flex-shrink:0}
.sim-foot a{color:var(--violet-light);font-weight:700;border-bottom:1px dashed rgba(167,139,250,.4)}
.sim-foot a:hover{color:#fff}
/* ============ RESPONSIVE ============ */
@media (max-width:980px){
/* `minmax(0,1fr)` e nao `1fr`: `1fr` e `minmax(auto,1fr)`, e o `auto` minimo do item nao
deixa a coluna encolher abaixo do min-content dele. Medido a 390px: o mock de fluxo
(.v-flow) tem min-content de 581px por causa dos nos posicionados, e como a grelha
passa a UMA coluna partilhada, essa medida esticava a coluna para 602px — o .copy ia
atras, e a pagina inteira ganhava scroll horizontal (scrollWidth 467 contra 381 de
viewport). O `min-width:0` nos dois itens e a outra metade da mesma correcao. */
.hero .wrap,.spot .row,.spot .row.rev{grid-template-columns:minmax(0,1fr);gap:50px}
.spot .row>*,.hero .wrap>*{min-width:0}
/* O mock e largo por natureza: rola dentro da propria caixa em vez de empurrar a pagina. */
.spot .visual .v-flow{max-width:100%;overflow-x:auto}
.hero-mock,.spot .visual{height:420px}
.stats .wrap{grid-template-columns:repeat(2,1fr);gap:30px}
.stats .it{border-right:none;padding:14px 0}
.pain .grid,.fg,.pr-grid,.how-grid{grid-template-columns:1fr 1fr;gap:14px}
.dual-grid{grid-template-columns:1fr;gap:14px}
.dual-or{flex-direction:row;padding:8px 0;align-self:center}
.dual-or .l{height:1px;width:auto;flex:1;background:linear-gradient(90deg,transparent,rgba(255,255,255,.12),transparent)}
.sim-grid{grid-template-columns:1fr 1fr;gap:12px}
.test-grid{grid-template-columns:1fr;gap:16px}
.trust .strip{grid-template-columns:repeat(3,1fr)}
footer .wrap{grid-template-columns:1fr 1fr;gap:30px}
.how-grid::before{display:none}
nav.top ul{display:none}
}
@media (max-width:600px){
/* O cabecalho e flex com gap de 36px e padding lateral de 28px. A 390px sobram 325px
uteis para logo + "Entrar" + "Comecar agora", e os dois gaps de 36px punham o botao a
terminar em x=466 — era ELE o scroll horizontal da pagina (scrollWidth 467 contra 381
de viewport), nao as secoes. Gap menor, padding menor e o botao com texto que nao
quebra resolvem sem esconder a acao principal. */
nav.top .wrap{gap:10px;padding-left:14px;padding-right:14px}
nav.top .btn{padding-left:11px;padding-right:11px;font-size:12.5px;white-space:nowrap}
/* O logotipo e uma imagem unica de 174x34 no desktop. A 390px sobram 325px uteis para
logotipo + "Entrar" + "Comecar agora": com o logotipo a 174px a soma dava 440px e o
botao principal terminava fora do ecra. A 28px de altura ele fica ~143px e o conjunto
cabe em ~374px, sem esconder nenhuma das duas acoes. */
nav.top .brand-img{height:28px;width:auto}
.pain .grid,.fg,.pr-grid,.how-grid,.sim-grid{grid-template-columns:1fr}
.stats .wrap{grid-template-columns:1fr}
.trust .strip{grid-template-columns:repeat(2,1fr)}
.cmp-table{font-size:11px}
.cmp-table tbody td{padding:10px 8px}
}
/* ══════════════════════════════════════════════════════════════════════════
KIT 2026-08-03 — imagens humanizadas, faixas fotográficas, bloco Connect Hub
e o sistema de animação da página. Fonte: WhatsCRM Design System-handoff_03082026.
══════════════════════════════════════════════════════════════════════════ */
/* ---------- 1. Camadas decorativas ---------- */
.glow-blob{position:absolute;border-radius:50%;filter:blur(90px);pointer-events:none;z-index:0}
/* Blobs, halos e a camada de foto (que é escalada em 1.06 para o parallax ter folga) saem da
caixa por desenho — cada seção recorta, senão viram scroll horizontal na página. Dois bugs
apanhados assim na validação: +1.100px do halo do núcleo e +79px do scale da foto. */
.hero,.integr,.photo-band,.photo-bg{overflow:hidden}
/* Mesma razão, para as seções sem foto: as animações de entrada laterais deslocam o elemento
34px antes de disparar, e num bloco que já toca a margem isso vira scroll horizontal. */
.sec,.pain,.dual,.cmp,.test,.how,.sim,.trust,.stats,.cta-final{overflow-x:clip}
/* Foto de fundo com dupla camada: imagem esmaecida + véu de gradiente por cima.
As duas cores do véu são variáveis para cada seção poder escurecer o quanto precisa. */
.photo-bg{position:relative;isolation:isolate}
.photo-bg::before,
.photo-bg::after{content:"";position:absolute;inset:0;z-index:-1}
.photo-bg::before{
background-image:var(--photo, none);
/* Variável para a seção poder escolher o recorte: com `cover` numa faixa larga, o centro
vertical raramente é o ponto de interesse da fotografia. */
background-position:var(--photo-pos, center);
/* Variável, e não `cover` fixo: a seção de KPIs usa um grafismo de órbita que precisa
caber inteiro (contain). Com cover, o desenho é cortado e vira textura sem sentido. */
background-size:var(--photo-size, cover);
background-repeat:no-repeat;
/* --photo-blur desfoca a fotografia de fundo. Serve onde há conteúdo por cima que precisa
de leitura limpa: uma cena nítida compete em detalhe com o texto, mesmo escurecida.
Zero por omissão, para não mexer nas seções que já estavam calibradas. */
filter:brightness(var(--photo-bright,.28)) saturate(var(--photo-sat,.9)) contrast(var(--photo-contrast,1)) blur(var(--photo-blur,0));
/* Dimming por OPACIDADE, além do brightness. Os dois escurecem, mas de formas
diferentes: brightness empurra tudo para o preto e come o contraste INTERNO da
imagem — com valores baixos (.2) somados a um véu opaco, a fotografia simplesmente
desaparece, que é o que acontecia na seção de integrações. Opacidade mistura com o
fundo e preserva a relação de tons. Quem precisa de imagem discreta mas legível usa
--photo-op com --photo-bright perto de 1. */
opacity:var(--photo-op,1);
transform:translate3d(0,var(--py,0),0) scale(1.06);
will-change:transform;
}
.photo-bg::after{background:linear-gradient(180deg,var(--veil-1,rgba(7,15,15,.78)),var(--veil-2,rgba(7,15,15,.94)))}
.photo-bg>.wrap{position:relative;z-index:1}
/* Hero com retrato humano por trás do mock. A foto tem de SER VISÍVEL (é o ponto do kit):
em vez de um véu escuro por cima de tudo, escurece na diagonal — forte atrás do texto,
à esquerda, e leve à direita, onde a fotografia aparece atrás do mock. */
/* Só o padrão. O recuo da fotografia que os cartões de vidro exigem está INLINE na home
(--photo-op e --photo-blur), e não aqui: este seletor alcança os 14 heros do site, e as
13 páginas internas já vêm com --photo-bright entre .18 e .2 — somar opacidade .38 e
desfoque por cima apagava a fotografia delas, que não têm cartão de vidro nenhum. */
.hero.photo-bg{--photo:url("../img/hero-bg.webp");--photo-bright:.5;--photo-sat:1}
.hero.photo-bg::after{
background:
linear-gradient(90deg,rgba(4,8,8,.94) 0%,rgba(4,8,8,.8) 38%,rgba(7,15,15,.42) 72%,rgba(7,15,15,.5) 100%),
linear-gradient(180deg,rgba(7,15,15,.5) 0%,transparent 26%,transparent 72%,#070f0f 100%);
}
/* Altura do kit (850px), mas como mínimo e não fixa: conteúdo maior nunca fica cortado. */
.hero.photo-bg{min-height:850px;display:flex;align-items:center}
.hero.photo-bg>.wrap{width:100%}
@media (max-width:980px){.hero.photo-bg{min-height:0;display:block}}
/* Faixa fotográfica de respiro entre seções (usa a altura do conteúdo, nunca fixa) */
.photo-band{--veil-1:rgba(3,11,8,.86);--veil-2:rgba(0,0,0,.92);padding:110px 0}
.photo-band .head h2{font-size:clamp(30px,4.4vw,50px);font-weight:900;color:#fff;letter-spacing:.015em;line-height:1.1}
.photo-band .head p{color:#a8bdb8}
/* Retrato do bloco de dor (a foto entra ao lado do texto, não atrás) */
/* Medidas do kit: foto 750×219 ao lado de um bloco de texto de 574px (soma + gap = os 1384
úteis do canvas). Largura em min() para encolher junto com o canvas em ecrãs menores,
mantendo a proporção 750/219 — é o recorte panorâmico que o design pediu. */
.pain-photo{
/* margin:0 —
traz `margin: 1em 40px` do user-agent, que roubava 80px da linha
e impedia o bloco de texto de chegar aos 574px do kit. */
position:relative;flex:0 1 750px;max-width:750px;aspect-ratio:750/219;margin:0;
border-radius:20px;overflow:hidden;
border:1px solid rgba(255,255,255,.07);box-shadow:0 26px 60px rgba(0,0,0,.5);
}
.pain-photo img{width:100%;height:100%;object-fit:cover;filter:saturate(.85) contrast(1.05)}
/* Sem véu por cima: o kit mostra a fotografia limpa, só com saturate/contrast. */
/* 574 + 60 + 750 = 1384, exactamente o canvas útil a 1440. Abaixo disso a foto cede primeiro
(shrink 1 contra o texto), em vez de a linha inteira estourar para fora da página. */
.pain .head-row{display:flex;align-items:center;gap:60px;flex-wrap:wrap}
/* 574px é estreito de propósito: é o que faz o título quebrar em duas linhas, como no kit. */
.pain .head-row .head{flex:1 1 420px;max-width:574px;min-width:0;text-align:left;margin:0}
/* O h2 desta seção não tinha regra nenhuma: saía no default do browser (24px, Roboto, creme),
e era essa a diferença de peso visual contra o kit. */
.pain .head h2{
font-family:var(--font-display);font-size:clamp(28px,3.2vw,40px);font-weight:900;
line-height:1.1;letter-spacing:.015em;color:#fff;margin:14px 0 18px;
}
/* Anula o `width:80%` da base: aqui o cabeçalho já é uma coluna estreita (574px) ao lado
dos cards, e 80% dela deixaria a linha curta demais. */
.pain .head-row .head p{font-size:16px;line-height:1.2;color:#d1f5e7;margin:0;width:100%}
/* ---------- 2. Bloco de integrações (Connect Hub) ---------- */
.integr{padding:110px 0}
/* Altura fixa porque as posições dos nós são ancoradas nas linhas da arte (ver abaixo).
--node: lado do nó; a arte é inserida a meio nó das bordas, para as linhas do topo e do
fundo passarem pelo CENTRO da primeira e da última fila. */
.integr-diagram{
--node:66px;
position:relative;display:flex;align-items:center;justify-content:center;
gap:min(100px,7vw);margin-top:50px;height:350px;
/* Recuo lateral do ajuste fino feito no browser (285px de cada lado a 1440 de canvas, que dá
os 814px de diagrama). Em clamp e não fixo: abaixo de ~1400 o recuo cede antes de o
diagrama ficar estreito demais e as colunas quebrarem. */
margin-inline:clamp(0px,calc((100% - 814px) / 2),285px);
}
/* A arte do conector (2500×872, entregue pelo design) é o fundo do DIAGRAMA INTEIRO — não do
núcleo. É ela que faz as ligações; por isso os traços curtos ::after de cada nó saíram: eles
nasciam no ícone e morriam no vazio, sem casar com as curvas da arte.
Medido no ficheiro: as 4 linhas de cada lado entram a 0%, 32.9%, 66.2% e 99.5% da altura —
equidistantes. Logo, esticar a arte na área entre os centros dos nós extremos alinha as
quatro filas com as quatro linhas em qualquer largura de ecrã. `fill` distorce na vertical,
o que é invisível em linhas horizontais e vale o alinhamento exato. */
.integr-wire{
position:absolute;left:0;top:calc(var(--node) / 2);
width:100%;height:calc(100% - var(--node));max-width:none;object-fit:fill;
opacity:.85;pointer-events:none;z-index:0;
}
.integr-side{display:flex;gap:clamp(16px,2.2vw,32px);align-items:center;height:100%}
/* space-between + altura total = os nós caem exactamente nas faixas da arte */
.integr-col{display:flex;flex-direction:column;justify-content:space-between;gap:0;height:100%;position:relative;z-index:1}
/* Coluna com 2 nós: usa a 1ª e a 4ª faixa (as duas linhas extremas) */
.integr-col.sparse{justify-content:space-between}
.integr-node{
width:66px;height:66px;border-radius:16px;background:#152525;border:1px solid rgba(255,255,255,.08);
display:flex;align-items:center;justify-content:center;box-shadow:0 10px 24px rgba(0,0,0,.35);
position:relative;transition:transform .25s var(--ease-out),border-color .25s,box-shadow .25s;
}
.integr-node img{width:34px;height:34px;object-fit:contain}
.integr-node:hover{transform:translateY(-4px);border-color:rgba(94,234,212,.4);box-shadow:0 16px 32px rgba(0,0,0,.5),0 0 0 1px rgba(94,234,212,.15)}
.integr-core{
width:132px;height:132px;border-radius:30px;flex-shrink:0;position:relative;
background:linear-gradient(160deg,#0d1818,#0a2a24);border:1px solid rgba(37,211,102,.35);
display:flex;align-items:center;justify-content:center;transition:transform .3s var(--ease-out);
}
.integr-core:hover{transform:scale(1.04)}
.integr-core .mark{position:relative;z-index:1;width:100%;height:100%;object-fit:contain;border-radius:26px;filter:drop-shadow(0 0 34px rgba(1,76,54,.85))}
.integr-foot{margin-top:44px;text-align:center;font-size:16px;font-weight:500;color:#5a6b69}
.integr-foot b{color:#25D366}
/* Cabeçalho do bloco: centrado, título grande e a assinatura "com o ConnectHUB" logo abaixo,
em cinza e sem competir com o título (é continuação da frase, não um subtítulo). */
.integr .head{max-width:none;text-align:center;margin:0 auto}
/* A cor branca, o verde do .hl e a fonte de display só estavam sob `.sec .head h2` — esta
seção é `.integr`, por isso o título saía em creme e "ecossistema" sem destaque. */
/* Escala maior (50px) mantida de propósito: é um banner com foto de fundo, não um
cabeçalho de seção comum. Só o tracking acompanha o padrão novo. */
.integr .head h2{
font-family:var(--font-display);font-size:clamp(30px,3.6vw,50px);
font-weight:900;line-height:1.1;margin:14px 0 0;color:#fff;letter-spacing:.015em;
}
.integr .head h2 .hl{color:#25D366}
.integr .head .kicker{
display:block;margin-top:6px;color:#5a6b69;font-weight:800;line-height:1.2;
font-family:var(--font-display);font-size:clamp(24px,3.2vw,45px);letter-spacing:-.02em;
}
.integr .head .kicker b{font-weight:900}
@media (max-width:900px){
.integr-diagram{gap:30px;height:auto;flex-wrap:wrap;margin-inline:0}
.integr-side{height:auto;flex-wrap:wrap;justify-content:center}
.integr-col{height:auto;gap:22px}
.integr-wire{display:none} /* sem largura para as curvas fazerem sentido */
}
/* ---------- 3. Animação de entrada (scroll reveal) ---------- */
/* Compatível com as classes do kit (.reveal / .d1..d6) e estendido com direções,
stagger automático por --i e um easing único para a página inteira. */
/* O estado inicial escondido só existe quando o JS assumiu o controlo (ele marca
antes de observar). Sem o script — asset em falta, erro de
rede, JS desligado — o conteúdo fica visível em vez de a página aparecer vazia. */
.reveal-ready .reveal{
opacity:0;
transform:translate3d(var(--rx,0),var(--ry,30px),0) scale(var(--rs,1));
transition:opacity .75s var(--ease-out),transform .75s var(--ease-out);
transition-delay:calc(var(--i,0) * 70ms + var(--rd,0ms));
will-change:opacity,transform;
}
.reveal-ready .reveal.show{opacity:1;transform:none}
.reveal.from-left{--rx:-34px;--ry:0}
.reveal.from-right{--rx:34px;--ry:0}
.reveal.zoom{--ry:14px;--rs:.965}
.reveal.d1{--rd:80ms}.reveal.d2{--rd:160ms}.reveal.d3{--rd:240ms}
.reveal.d4{--rd:320ms}.reveal.d5{--rd:400ms}.reveal.d6{--rd:480ms}
/* Micro-interação padrão dos cards com foto/valor */
.lift{transition:transform .28s var(--ease-out),box-shadow .28s var(--ease-out)}
.lift:hover{transform:translateY(-4px);box-shadow:0 22px 46px rgba(0,0,0,.45)}
/* Contador dos números: evita o "salto" de largura enquanto anima */
.stats .it .v{font-variant-numeric:tabular-nums}
/* Acessibilidade: sem movimento para quem pediu sem movimento.
O conteúdo aparece de imediato — nunca fica invisível esperando animação. */
@media (prefers-reduced-motion:reduce){
.reveal,.reveal-ready .reveal{opacity:1;transform:none;transition:none}
.photo-bg::before{transform:none}
.lift:hover{transform:none}
*,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
}
@media (max-width:860px){
.pain .head-row{flex-direction:column}
.pain .head-row .head{text-align:center;max-width:100%}
.pain-photo{width:100%;max-width:420px}
.photo-band{padding:76px 0}
}
/* ---------- Vitrine de planos com abas (mensal / semestral) ---------- */
.pricing-tabs{position:relative}
.pt-switch{
display:inline-flex;gap:4px;padding:5px;margin:0 auto 34px;border-radius:14px;
background:rgba(0,0,0,.35);border:1px solid rgba(255,255,255,.07);
}
.pricing-tabs{display:flex;flex-direction:column;align-items:center}
.pt-tab{
display:inline-flex;align-items:center;gap:8px;padding:10px 22px;border:none;border-radius:10px;
background:none;color:#a8bdb8;font-family:inherit;font-size:13.5px;font-weight:800;cursor:pointer;
transition:.2s var(--ease-out);
}
.pt-tab:hover{color:#fff}
.pt-tab.on{background:linear-gradient(135deg,rgba(37,211,102,.18),rgba(18,140,126,.12));color:#fff;box-shadow:0 6px 16px rgba(0,0,0,.35)}
.pt-badge{font-size:9px;font-weight:900;letter-spacing:.08em;text-transform:uppercase;color:#0d1818;background:#5EEAD4;padding:2px 6px;border-radius:4px}
/* Painel escondido com hidden real: fora do fluxo e fora da leitura de leitores de ecrã. */
.pt-panel{display:none;width:100%}
.pt-panel.on{display:block}
/* Faixa "Sob medida" — fecha cada aba, larga, sem competir em preço com os três cards. */
.pr-custom{
display:grid;grid-template-columns:1.1fr 1.3fr .8fr;gap:28px;align-items:center;margin-top:18px;
background:linear-gradient(135deg,rgba(15,118,110,.14),rgba(21,37,37,.6));
border:1px solid rgba(94,234,212,.18);border-radius:18px;padding:26px 30px;
}
/* O .ribbon dos cards é absoluto no canto; aqui vira etiqueta em fluxo, acima do nome. */
.pr-custom .ribbon{
position:static;display:inline-block;margin:0 0 10px;padding:3px 9px;border-radius:5px;
font-size:9px;font-weight:900;letter-spacing:.14em;text-transform:uppercase;
color:#5EEAD4;background:rgba(94,234,212,.12);border:1px solid rgba(94,234,212,.28);
}
.pr-custom h4{margin:0 0 6px;font-size:20px;font-weight:900;color:#fff}
.pr-custom p{margin:0;font-size:13.5px;color:#a8bdb8;line-height:1.5}
.pc-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:8px 18px}
.pc-list li{display:flex;align-items:flex-start;gap:7px;font-size:12.5px;color:#d1f5e7;line-height:1.4}
.pc-list li i{color:#5EEAD4;font-size:15px;flex-shrink:0}
.pc-cta{text-align:right}
.pc-price{font-size:26px;font-weight:900;color:#fff;letter-spacing:-.02em}
.pc-billing{font-size:11px;color:#8b9f9a;margin-bottom:12px}
@media (max-width:980px){
.pr-custom{grid-template-columns:1fr;gap:18px}
.pc-cta{text-align:left}
.pc-list{grid-template-columns:1fr}
}
/* ---------- Formulário público (contato → Lead no Pipeline) ---------- */
.site-form{max-width:640px;margin:26px auto 0;text-align:left;display:flex;flex-direction:column;gap:14px}
.sf-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.sf-field{display:flex;flex-direction:column;gap:6px}
.sf-field>span{font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#8b9f9a}
.sf-field>span b{color:#25D366}
.sf-field input,
.sf-field textarea{
width:100%;padding:13px 15px;border-radius:12px;font-family:inherit;font-size:14.5px;
color:#d1f5e7;background:rgba(0,0,0,.35);border:1px solid rgba(255,255,255,.09);
transition:border-color .2s var(--ease-out),box-shadow .2s var(--ease-out);
}
.sf-field textarea{resize:vertical;min-height:96px;line-height:1.5}
.sf-field input::placeholder,
.sf-field textarea::placeholder{color:#5a6b69}
.sf-field input:focus,
.sf-field textarea:focus{outline:none;border-color:rgba(37,211,102,.5);box-shadow:0 0 0 3px rgba(37,211,102,.12)}
.sf-field em{font-style:normal;font-size:12.5px;color:#F87171}
.site-form .btn{align-self:flex-start}
@media (max-width:700px){
.sf-row{grid-template-columns:1fr}
.site-form .btn{align-self:stretch;justify-content:center}
}
/* ==================================================================================
LB-274 - piso de legibilidade e de area de toque no TELEFONE
==================================================================================
Medido a 390x844: 183 elementos com texto abaixo de 12px (ate 8px) e 36 grupos de
alvos interactivos abaixo de 44px no lado menor.
115 dos 183 estao dentro das maquetas (.spot, .hero-mock, .v-*, .mock-*) e NAO sao
tocados: sao desenhos da interface do produto, encolhidos de proposito para caber numa
moldura de telefone. Ali a letra pequena e a ilustracao, nao um defeito de leitura.
Os 68 restantes sao texto que o visitante le - incluindo rotulos de metrica que
sustentam argumento de venda - e e sobre esses que este bloco actua.
TUDO AQUI E ABAIXO DE 992px. Acima disso nada muda: o desenho da pagina no desktop e
decisao do dono, e este bloco sai inteiro sem deixar rasto no resto do ficheiro.
O `.acts .a` do .v-ai nao aparece aqui porque foi corrigido no HTML: eram dois