/* ============================================================================
OBJETIVA — DESIGN SYSTEM COMPARTILHADO (objetiva-ds.css)
Componentes premium do site Objetiva Solução.
Base: linguagem visual validada no DiamondOne / página Sobre.
- Tokens parametrizáveis por silo via [data-silo] no .
- Cards com profundidade em camadas, espaçamento e hierarquia premium.
Uso:
• Páginas standalone (DiamondOne): para este arquivo no .
• Páginas com get_header (filhas/Sobre): enfileirar via functions.php.
----------------------------------------------------------------------------
CRÉDITOS
- Direção visual e de marca: Thiago Xavier (PO, Objetiva Solução) — paleta,
ícone/losango e wordmark extraídos dos assets oficiais do DiamondOne.
- Sistematização e evolução "enterprise" (tokens de raio/sombra, cards como
painel de instrumento, ícones, badges, tipografia contida): execução
assistida por Claude (Anthropic), jul/2026.
============================================================================ */
:root{
--navy:#0f2540;
--navy-deep:#0a1929;
--navy-mid:#1d4f86;
--orange:#e05a20;
--orange-soft:#f07a4a;
--bg:#fafafa;
--gray:#f1f2f4;
--surface:#ffffff;
--fg:#13243a;
--muted:#5d6b7d;
--border:#e4e7eb;
--hero-img:url("/wp-content/uploads/2026/06/8b52c169-hero.webp");
--maxw:1200px;
--gutter:clamp(20px,5vw,64px);
--font:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;
--mono:'JetBrains Mono',ui-monospace,monospace;
/* ── ESCALA ESTRUTURAL (jul/2026) ──────────────────────────────────────
Radius/sombra/hairline tokenizados: UMA linguagem só. Raios contidos e
sombras curtas/ancoradas dão leitura de "instrumento de precisão" em vez
de "card SaaS flutuante". Todo componente deve puxar destes tokens. */
--hairline:#dbe1e8; /* borda fina que faz o trabalho de definição */
--hairline-strong:#c4cdd8; /* hover/estado ativo */
--r-sm:6px; /* botões, tags, badges */
--r-chip:9px; /* chips de ícone (engenharia, não "avatar") */
--r-md:10px; /* cards */
--r-lg:14px; /* superfícies grandes (quote, showcase, tabela) */
/* Elevação em 3 níveis — curta e grounded, não espalhada/floaty */
--shadow-1:0 1px 2px rgba(15,37,64,.05), 0 2px 6px rgba(15,37,64,.06);
--shadow-2:0 1px 2px rgba(15,37,64,.06), 0 8px 18px -6px rgba(15,37,64,.12);
--shadow-3:0 2px 6px rgba(15,37,64,.08), 0 20px 44px -14px rgba(15,37,64,.18);
}
/* ============================================================
TOKENS POR SILO — cada página define data-silo no .
Os componentes usam var(--navy)/var(--orange); trocar esses
valores por silo mantém o MESMO acabamento com a cor da marca.
DiamondOne usa o padrão (navy/laranja) — não precisa de data-silo.
============================================================ */
[data-silo="sap-b1"]{--navy:#003087;--navy-deep:#001a4d;--navy-mid:#1e4fae}
[data-silo="manufatura"]{--navy:#1a1a2e;--navy-deep:#0f0f1c;--navy-mid:#3a3a5e}
[data-silo="segmentos"]{--navy:#0d3b1f;--navy-deep:#072413;--navy-mid:#1c6e3c}
[data-silo="comparativos"]{--navy:#1c1433;--navy-deep:#110b21;--navy-mid:#3d2e63}
[data-silo="implementacao"]{--navy:#0c2340;--navy-deep:#06182e;--navy-mid:#1d4f86}
[data-silo="cases"]{--navy:#1a1208;--navy-deep:#0e0a04;--navy-mid:#4a3418}
[data-silo="intelligence"]{--navy:#0a0e14;--navy-deep:#060910;--navy-mid:#111824;--orange:#22d3ee;--orange-soft:#67e8f9}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
font-family:var(--font);
color:var(--fg);
background:var(--bg);
font-size:17px;
line-height:1.6;
-webkit-font-smoothing:antialiased;
text-rendering:optimizeLegibility;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)}
section{position:relative}
.eyebrow{
font-size:13px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
color:var(--orange);display:inline-flex;align-items:center;gap:10px;margin-bottom:22px;
}
.eyebrow::before {display:none}
.eyebrow.on-dark{color:var(--orange-soft)}
h2.section-title{
font-weight:800; /* 900->800: confiança/precisão, não "marketing loud" */
font-size:clamp(30px,4vw,48px); /* teto 54->48: contido = mais autoridade */
line-height:1.06;
letter-spacing:-.022em; /* tracking menos agressivo = leitura técnica */
color:var(--navy);
max-width:20ch;
}
h2.section-title.on-dark{color:#fff;max-width:20ch}
.lede{font-size:clamp(17px,1.4vw,20px);color:var(--muted);max-width:60ch;margin-top:20px;line-height:1.55}
.btn{
display:inline-flex;align-items:center;gap:10px;
font-weight:700;font-size:16px;border-radius:6px;
padding:17px 30px;cursor:pointer;border:none;
transition:transform .15s ease, background .2s ease, box-shadow .2s ease;
line-height:1;white-space:nowrap;
}
.btn-orange{background:#c94e18;color:#fff;box-shadow:0 8px 24px -10px rgba(224,90,32,.7)}
.btn-orange:hover{background:#b04512;transform:translateY(-2px)}
.btn-white{background:#fff;color:var(--navy)}
.btn-white:hover{transform:translateY(-2px);box-shadow:0 14px 34px -14px rgba(0,0,0,.45)}
.btn-lg{font-size:18px;padding:20px 38px}
/* ============ NAV ============ */
.nav{
position:fixed;inset-block-start:0;inset-inline:0;z-index:50;
display:flex;align-items:center;justify-content:space-between;
padding:18px var(--gutter);
transition:background .3s ease, box-shadow .3s ease, padding .3s ease;
}
.nav.solid{background:rgba(10,25,41,.92);backdrop-filter:blur(10px);box-shadow:0 1px 0 rgba(255,255,255,.06);padding-block:14px}
.nav-logo{height:30px;width:auto}
.nav-links{display:flex;align-items:center;gap:34px}
.nav-links a{color:rgba(255,255,255,.82);font-weight:600;font-size:15px;transition:color .15s}
.nav-links a:hover{color:#fff}
.nav-cta{background:#c94e18;color:#fff;padding:11px 20px;border-radius:6px;font-weight:700;font-size:14px}
.nav-cta:hover{background:#b04512;color:#fff}
/* ============ HERO ============ */
.hero{
min-height:100vh;display:flex;align-items:flex-end;
position:relative;overflow:hidden;color:#fff;
background:var(--navy-deep);
}
.hero-bg{
position:absolute;inset:0;z-index:0;
background-image:var(--hero-img);
background-size:cover;background-position:center 35%;
filter:saturate(.85);
}
/* picture/img variant — fetchpriority="high" LCP optimization */
.hero-bg img{
position:absolute;inset:0;width:100%;height:100%;
object-fit:cover;object-position:center 35%;
filter:saturate(.85);z-index:0;display:block;
}
.hero-overlay{
position:absolute;inset:0;z-index:1;
background:
linear-gradient(180deg, rgba(10,25,41,.55) 0%, rgba(10,25,41,.35) 30%, rgba(10,25,41,.82) 78%, rgba(10,25,41,.97) 100%),
linear-gradient(90deg, rgba(15,37,64,.7) 0%, rgba(15,37,64,.15) 60%, rgba(15,37,64,.1) 100%);
}
.hero .wrap{position:relative;z-index:2;width:100%;padding-block:clamp(120px,16vh,180px) clamp(64px,10vh,110px)}
/* ============ BADGES / PILLS de alta hierarquia ============
.badge-premium (canônico) e .hero-badge (instância do hero) compartilham o
MESMO acabamento enterprise (regra única, sem duplicação): raio contido
(--r-sm, não pílula "app"), hairline crisp, leve profundidade (inset highlight),
tipografia mono contida. O laranja entra como MARCA geométrica pequena
(quadrado 2px + ring fino), nunca "status dot" com glow. Ver .badge-premium--light
para fundo claro. Marcação recomendada usa + .sep + .muted (credencial). */
.badge-premium,.hero-badge{
display:inline-flex;align-items:center;gap:11px;
padding:8px 14px;border-radius:var(--r-sm);
font-family:var(--mono);font-size:12.5px;font-weight:600;letter-spacing:.02em;
color:#fff;line-height:1;
background:rgba(255,255,255,.055);
border:1px solid rgba(255,255,255,.16);
box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
backdrop-filter:blur(6px);
}
.hero-badge{margin-bottom:30px} /* espaçamento específico do hero */
.badge-premium .mark,.hero-badge .dot{
width:7px;height:7px;border-radius:2px;flex:none;background:var(--orange);
box-shadow:0 0 0 1px color-mix(in srgb,var(--orange) 40%,transparent);
}
.badge-premium strong,.hero-badge strong{font-weight:700;color:#fff}
.badge-premium .sep,.hero-badge .sep{width:1px;height:12px;background:rgba(255,255,255,.2);flex:none}
.badge-premium .muted,.hero-badge .muted{color:rgba(255,255,255,.66);font-weight:500}
/* Variante fundo claro (nav sólido, seção branca) */
.badge-premium--light{
color:var(--navy);background:#fff;border-color:var(--hairline-strong);
box-shadow:inset 0 1px 0 #fff, var(--shadow-1);backdrop-filter:none;
}
.badge-premium--light .mark{box-shadow:0 0 0 1px color-mix(in srgb,var(--orange) 30%,transparent)}
.badge-premium--light strong{color:var(--navy)}
.badge-premium--light .sep{background:var(--hairline-strong)}
.badge-premium--light .muted{color:var(--muted)}
.hero h1{
font-weight:800; /* 900->800: presença sem gritar */
font-size:clamp(44px,6.2vw,82px); /* teto 92->82: contido */
line-height:1.0;
letter-spacing:-.028em;
max-width:16ch;
margin-bottom:26px;
text-shadow:0 2px 30px rgba(0,0,0,.3);
}
.hero h1 .accent{color:var(--orange-soft)}
.hero-sub{font-size:clamp(17px,1.55vw,21px);line-height:1.5;color:rgba(255,255,255,.9);max-width:62ch;margin-bottom:38px;font-weight:400}
.hero-sub strong{color:#fff;font-weight:700}
.hero-actions{display:flex;flex-wrap:wrap;align-items:center;gap:18px 26px;margin-bottom:30px}
.hero-link{color:#fff;font-weight:700;font-size:16px;display:inline-flex;align-items:center;gap:9px;border-bottom:2px solid transparent;padding-bottom:3px;transition:border-color .2s}
.hero-link:hover{border-color:var(--orange)}
.hero-trust{
display:flex;flex-wrap:wrap;gap:10px 26px;align-items:center;
font-size:14px;color:rgba(255,255,255,.72);font-weight:500;
padding-top:26px;border-top:1px solid rgba(255,255,255,.14);max-width:760px;
}
.hero-trust span{display:inline-flex;align-items:center;gap:8px}
.hero-trust svg{flex:none}
.scroll-cue{
position:absolute;z-index:3;inset-block-end:26px;inset-inline-start:50%;transform:translateX(-50%);
display:flex;flex-direction:column;align-items:center;gap:8px;color:rgba(255,255,255,.6);
font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;
}
.scroll-cue .mouse{width:24px;height:38px;border:2px solid rgba(255,255,255,.5);border-radius:14px;position:relative}
.scroll-cue .mouse::after{content:"";position:absolute;inset-block-start:7px;inset-inline-start:50%;transform:translateX(-50%);width:4px;height:8px;border-radius:2px;background:#fff;animation:scrolldot 1.7s ease-in-out infinite}
@keyframes scrolldot{0%{opacity:0;transform:translate(-50%,0)}40%{opacity:1}80%{opacity:0;transform:translate(-50%,12px)}100%{opacity:0}}
/* ============ CLIENTS ============ */
.clients{background:#fff;padding-block:56px;border-bottom:1px solid var(--border)}
.clients-label{text-align:center;font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:34px}
.clients-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:0;}
.client-logo{
text-align:center;font-weight:800;font-size:21px;letter-spacing:-.02em;
color:#9aa6b2;filter:grayscale(1);transition:color .2s, transform .2s;
display:flex;align-items:center;justify-content:center;gap:6px;
}
.client-logo small{font-size:11px;font-weight:600;letter-spacing:.04em;color:#b4bdc7}
.client-logo:hover{color:var(--navy)}
/* ============ SECTION SCAFFOLD ============ */
.pad{padding-block:clamp(84px,11vw,132px)}
.pad-sm{padding-block:clamp(60px,8vw,96px)}
.bg-gray{background:var(--gray)}
.bg-white{background:#fff}
.bg-navy{background:var(--navy)}
.sec-head{margin-bottom:clamp(44px,5vw,66px);max-width:760px}
/* ============ PAIN CARDS ============
Iteração "presença + precisão" (jul/2026). O card é um PAINEL DE INSTRUMENTO:
- Borda definida (--hairline-strong) + RULE estrutural navy na lateral esquerda
(inset 3px). Dá identidade e peso SEM a barra colorida do topo (clichê de LP).
- Sombra ancorada (tokens). Hover: o rule vira laranja (único acento) + 2px. */
.pain-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.pain-card{
background:#fff;
border:1px solid var(--hairline-strong);
border-radius:var(--r-md);
padding:38px 34px 38px 37px; /* +3px à esquerda: espaço p/ o rule */
position:relative;overflow:hidden;
box-shadow:inset 3px 0 0 var(--navy), var(--shadow-2); /* rule navy sempre presente */
transition:transform .22s cubic-bezier(.22,1,.36,1), box-shadow .22s ease, border-color .22s ease;
}
.pain-card:hover{
transform:translateY(-2px);
border-color:color-mix(in srgb, var(--navy) 28%, var(--hairline-strong));
box-shadow:inset 3px 0 0 var(--orange), var(--shadow-3); /* rule vira acento no hover */
}
/* ---- ÍCONE — PADRÃO = chip navy SÓLIDO + ícone branco ----
Presença e autoridade ("tecla de painel de controle"), não chip colorido SaaS.
Silo-aware (var(--navy)). Acabamento de qualidade: aresta superior + ring interno
sutil + sombra ancorada. Glifo com traço 2px p/ ter peso. Uso livre (controlado). */
.pain-icon{
width:54px;height:54px;border-radius:var(--r-chip);
display:flex;align-items:center;justify-content:center;margin-bottom:24px;
color:#fff;background:var(--navy);
box-shadow:
inset 0 1px 0 rgba(255,255,255,.18), /* aresta superior: superfície usinada */
inset 0 0 0 1px rgba(255,255,255,.06), /* ring interno: definição */
0 8px 18px -6px rgba(10,25,41,.5); /* sombra ancorada: peso */
transition:transform .22s ease, box-shadow .22s ease;
}
.pain-icon svg{width:26px;height:26px;stroke-width:2}
.pain-icon i{font-size:26px;line-height:1}
.pain-card:hover .pain-icon{transform:translateY(-1px);
box-shadow:inset 0 1px 0 rgba(255,255,255,.2), inset 0 0 0 1px rgba(255,255,255,.07), 0 11px 24px -6px rgba(10,25,41,.55)}
/* VARIANTE GHOST — quando o sólido pesa demais (grade muito densa): hairline
FORTE (1.5px) + ícone navy presente (traço 2px). Definido, nunca apagado.
Ative com .pain-icon--ghost */
.pain-icon--ghost{
color:var(--navy);background:#fff;
border:1.5px solid var(--hairline-strong);
box-shadow:inset 0 1px 0 #fff;
}
.pain-card:hover .pain-icon--ghost{border-color:color-mix(in srgb,var(--navy) 45%,transparent)}
.pain-card h3{font-size:21px;font-weight:800;letter-spacing:-.012em;color:var(--navy);margin-bottom:12px;line-height:1.25}
.pain-card p{color:var(--muted);font-size:16px;line-height:1.6}
/* ============================================================================
DIRETRIZES DO SISTEMA (jul/2026 — nível "enterprise R$500k+")
----------------------------------------------------------------------------
Princípio-mestre: PRESENÇA COM PRECISÃO. Autoridade não é timidez. Cada
elemento tem peso e intenção — mas com paleta contida (navy/branco + laranja
só como acento). Nada colorido/"SaaS", nada apagado/genérico.
TOKENS (sempre puxar daqui, nunca hardcodar):
Raio: --r-sm(6) botões/tags · --r-chip(9) ícone · --r-md(10) card · --r-lg(14) superfície grande
Sombra: --shadow-1/2/3 (curta e ancorada — nunca sombra espalhada/floaty nova)
Borda: --hairline (fino) · --hairline-strong (borda de card / estados)
ÍCONES — 3 contextos:
1. PADRÃO (card claro): chip navy SÓLIDO + ícone branco. É o default e pode
ser usado à vontade na grade (é monocromático, não "colorido"). Traço 2px.
2. GHOST (card claro, grade muito densa): hairline FORTE 1.5px + ícone navy
presente (.pain-icon--ghost). Secundário — quando o sólido pesar demais.
3. SUPERFÍCIE ESCURA (foto/gradiente): chip "glass" (rgba(255,255,255,.12) +
hairline branco) + ícone branco. Chip navy some no escuro.
Fixas: sempre Tabler `.ti` ou SVG monocromático currentColor; nunca emoji;
glifo 24-26px, traço 2px; chip quadrado-arredondado (--r-chip), nunca círculo.
CARDS — presença sem clichê:
Identidade vem do RULE estrutural navy na lateral esquerda (inset 3px) +
borda definida (--hairline-strong) + sombra ancorada. NUNCA barra colorida
no topo. No hover o rule esquerdo vira laranja (único acento) e o card sobe
2px. Esse rule é silo-aware (herda var(--navy)).
BADGES / PILLS — credenciais (ex.: "SAP Partner · 16 anos"):
Usar .badge-premium (escuro) ou .badge-premium--light (claro). Raio --r-sm,
NUNCA pílula 999px ("app"). Fonte mono 600. Acento laranja = MARCA geométrica
pequena (.mark, quadrado 2px + ring fino), nunca dot com glow. Estruturar o
texto: nome + +
qualificador. Badges pequenos internos (.cmp-badge) seguem o mesmo raio.
COR — orçamento CURTO:
Laranja (var(--orange)) é ACENTO, não estrutura: no máx. 1 realce por card
/seção (o rule no hover, um link, UM número). Estrutura é sempre navy/branco.
Nunca pastel/"fofo" (pêssego, rosa, lilás).
TIPOGRAFIA:
Títulos peso 800 (não 900), tracking -.02 a -.028em, tamanho contido.
Números com tabular-nums (precisão). Corpo 16-17px em --muted.
============================================================================ */
/* ============ MODULES ============
mod-icon é o contexto de ÊNFASE nº2 (badge navy sólido sobre a foto do módulo)
— aqui o fill sólido é legítimo: funciona como selo, não como grade colorida.
Card alinhado aos tokens (raio/sombra), hover contido (3px). */
.mod-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.mod-card{
background:#fff;border:1px solid var(--hairline);border-radius:var(--r-md);padding:0;overflow:hidden;
box-shadow:var(--shadow-2);
transition:transform .22s cubic-bezier(.22,1,.36,1), box-shadow .22s ease, border-color .22s;
}
.mod-card:hover{transform:translateY(-3px);border-color:var(--hairline-strong);box-shadow:var(--shadow-3)}
.mod-img{width:100%;height:128px;object-fit:cover;display:block;border-bottom:1px solid var(--hairline)}
.mod-body{padding:22px 26px 28px}
.mod-icon{
width:54px;height:54px;border-radius:var(--r-chip);background:var(--navy);color:#fff;
display:flex;align-items:center;justify-content:center;
margin:-49px 0 14px;position:relative;
border:3px solid #fff;
box-shadow:inset 0 1px 0 rgba(255,255,255,.16), 0 6px 16px -6px rgba(10,25,41,.45);
}
.mod-icon svg{width:26px;height:26px;stroke-width:2}
.mod-icon i{font-size:26px;line-height:1}
.mod-tag{font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--orange);display:block;margin-bottom:8px}
.mod-card h3{font-size:19px;font-weight:800;color:var(--navy);letter-spacing:-.01em;margin-bottom:8px}
.mod-card p{font-size:14.5px;color:var(--muted);line-height:1.55}
/* ============ SHOWCASE BAND (chamada para a demo interativa) ============ */
.showcase-band{
display:grid;grid-template-columns:1.1fr 1fr;align-items:center;gap:0;
margin-top:44px;border-radius:var(--r-lg);overflow:hidden;
background:linear-gradient(135deg,#081120 0%,#0f2540 60%,#13315c 100%);
box-shadow:0 6px 20px rgba(15,37,64,.2), 0 28px 64px -16px rgba(15,37,64,.3);
}
.showcase-band-body{padding:44px 46px}
.showcase-band-body .eyebrow{margin-bottom:14px}
.showcase-band-body h3{font-size:clamp(22px,2.6vw,30px);font-weight:800;color:#fff;letter-spacing:-.02em;line-height:1.15;margin-bottom:12px}
.showcase-band-body p{font-size:15.5px;color:rgba(255,255,255,.7);line-height:1.6;margin-bottom:24px;max-width:44ch}
.showcase-band-visual{position:relative;align-self:stretch;min-height:260px}
.showcase-band-visual img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center}
.showcase-band-visual::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,#0b1c33 0%,transparent 35%)}
@media (max-width:860px){
.showcase-band{grid-template-columns:1fr}
.showcase-band-visual{min-height:200px;order:-1}
.showcase-band-visual::before{background:linear-gradient(0deg,#0b1c33 0%,transparent 45%)}
}
/* ============ SEGMENTS (dark, foto de fundo + gradiente — padrão dos silos da home) ============ */
.seg-grid{
display:grid;grid-template-columns:repeat(3,1fr);gap:20px;
}
.seg-card{
position:relative;padding:38px 32px;border-radius:var(--r-lg);overflow:hidden;
box-shadow:0 3px 10px rgba(0,0,0,.16), 0 16px 38px -10px rgba(0,0,0,.34);
transition:transform .22s ease, box-shadow .22s ease;
}
.seg-card:hover{transform:translateY(-3px);box-shadow:0 6px 16px rgba(0,0,0,.2), 0 26px 56px -12px rgba(0,0,0,.42)}
.seg-bg,.seg-bg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;z-index:0;display:block}
.seg-ov{position:absolute;inset:0;z-index:1;background:linear-gradient(160deg,rgba(10,25,41,.93) 0%,rgba(15,37,64,.84) 55%,rgba(29,79,134,.62) 120%)}
.seg-card>.seg-icon,.seg-card>h3,.seg-card>p{position:relative;z-index:2}
/* Ícone em card ESCURO (Diretriz item 7): chip "glass" translúcido + ícone
BRANCO. Substitui o antigo ícone laranja flutuante — assim o laranja volta a
ser acento curto (link/CTA), não o ícone. Chip navy não serve aqui: sumiria
sobre o gradiente escuro. */
.seg-icon{
width:54px;height:54px;border-radius:var(--r-chip);
display:flex;align-items:center;justify-content:center;margin-bottom:22px;
color:#fff;background:rgba(255,255,255,.12);
box-shadow:inset 0 0 0 1px rgba(255,255,255,.26), inset 0 1px 0 rgba(255,255,255,.16);
}
.seg-icon svg{width:26px;height:26px;stroke-width:2}
.seg-icon i{font-size:26px;line-height:1}
.seg-card h3{font-size:21px;font-weight:800;color:#fff;letter-spacing:-.01em;margin-bottom:10px}
.seg-card p{font-size:15px;color:rgba(255,255,255,.72);line-height:1.55}
/* ============ TESTIMONIAL ============ */
.quote-card{
background:#fff;border-radius:var(--r-lg);max-width:920px;margin-inline:auto;
padding:clamp(46px,6vw,72px) clamp(36px,6vw,84px);
position:relative;overflow:hidden;
box-shadow:var(--shadow-3);
border:1px solid var(--hairline);
}
/* Aspas decorativas em navy (não gasta o orçamento de laranja) e mais discretas. */
.quote-mark{position:absolute;inset-block-start:-24px;inset-inline-start:28px;font-family:Georgia,serif;font-size:240px;line-height:1;color:var(--navy);opacity:.06;font-weight:700;pointer-events:none}
.quote-card blockquote{position:relative;z-index:1;font-size:clamp(22px,2.6vw,31px);font-weight:700;line-height:1.4;letter-spacing:-.015em;color:var(--navy)}
.quote-author{display:flex;align-items:center;gap:18px;margin-top:38px;position:relative;z-index:1}
.quote-avatar{
width:60px;height:60px;border-radius:50%;flex:none;
background:linear-gradient(135deg,var(--navy),var(--navy-mid));
color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:20px;letter-spacing:.02em;
}
.quote-author .name{font-weight:800;color:var(--navy);font-size:17px}
.quote-author .role{color:var(--muted);font-size:15px}
/* ============ VÍDEO DEPOIMENTO (facade + lightbox) ============
Prova social em vídeo SEM custo de performance: só o poster (AVIF/WebP local)
carrega; o iframe do YouTube (nocookie) é injetado por JS no clique — ver o
script global no footer.php. Silo-aware (play herda var(--orange)). Reutilizável:
*/
.vid-band{display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(24px,3vw,44px);align-items:center;margin-top:clamp(32px,4vw,48px)}
.vid-band-body .eyebrow{margin-bottom:12px}
.vid-band-body h3{font-size:clamp(20px,2.4vw,28px);font-weight:800;letter-spacing:-.02em;color:var(--navy);line-height:1.2;margin-bottom:12px}
.vid-band-body p{font-size:15.5px;color:var(--muted);line-height:1.6;max-width:46ch}
.vid-band-body .vid-cite{margin-top:16px;font-size:14px;color:var(--navy);font-weight:700}
.vid-band-body .vid-cite span{color:var(--muted);font-weight:500}
.vid-facade{position:relative;display:block;width:100%;aspect-ratio:16/9;padding:0;border:1px solid var(--hairline-strong);border-radius:var(--r-md);overflow:hidden;cursor:pointer;background:#0a1929;box-shadow:var(--shadow-2);transition:transform .22s cubic-bezier(.22,1,.36,1), box-shadow .22s ease, border-color .22s ease}
.vid-facade:hover{transform:translateY(-2px);border-color:color-mix(in srgb,var(--navy) 28%,var(--hairline-strong));box-shadow:var(--shadow-3)}
.vid-facade img{width:100%;height:100%;object-fit:cover;display:block}
.vid-facade::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,25,41,.05) 0%,rgba(10,25,41,.4) 100%)}
.vid-play{position:absolute;inset-block-start:50%;inset-inline-start:50%;transform:translate(-50%,-50%);z-index:1;width:64px;height:64px;border-radius:50%;background:var(--orange);color:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 8px 24px -6px rgba(10,25,41,.55), inset 0 1px 0 rgba(255,255,255,.25);transition:transform .22s ease}
.vid-facade:hover .vid-play{transform:translate(-50%,-50%) scale(1.08)}
.vid-play svg{width:26px;height:26px;margin-left:3px}
.vid-badge{position:absolute;inset-block-end:12px;inset-inline-start:12px;z-index:1;font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.03em;color:#fff;background:rgba(10,25,41,.6);border:1px solid rgba(255,255,255,.18);backdrop-filter:blur(6px);padding:5px 10px;border-radius:var(--r-sm)}
/* lightbox (criado por JS) */
.vid-lightbox{position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center;padding:clamp(16px,4vw,52px);background:rgba(6,12,22,.86);backdrop-filter:blur(4px)}
.vid-lightbox-inner{position:relative;width:min(100%,1040px);aspect-ratio:16/9;border-radius:var(--r-md);overflow:hidden;box-shadow:0 30px 80px -20px rgba(0,0,0,.7)}
.vid-lightbox-inner iframe{width:100%;height:100%;border:0;display:block}
.vid-lightbox-close{position:absolute;inset-block-start:-44px;inset-inline-end:0;width:36px;height:36px;border:0;border-radius:var(--r-sm);background:rgba(255,255,255,.14);color:#fff;font-size:22px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center}
.vid-lightbox-close:hover{background:rgba(255,255,255,.24)}
@media(max-width:760px){.vid-band{grid-template-columns:1fr}}
/* ============ STATS ============ */
.stats-grid{display:grid;grid-template-columns:repeat(3,1fr)}
.stat{text-align:center;padding-inline:20px;position:relative}
.stat + .stat::before{content:"";position:absolute;inset-inline-start:0;inset-block:14px;width:1px;background:var(--border)}
.stat .num{font-weight:800;font-size:clamp(50px,6.4vw,72px);line-height:1;letter-spacing:-.03em;color:var(--navy);font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}
.stat .num .plus{color:var(--orange)}
.stat .label{font-size:16px;color:var(--muted);font-weight:500;margin-top:14px}
/* ============ EDITORIAL ============ */
.art-list{display:grid;gap:0;border-block-start:1px solid var(--border)}
.art-row{
display:grid;grid-template-columns:180px 1fr auto;gap:30px;align-items:center;
padding:34px 4px;border-block-end:1px solid var(--border);
transition:background .2s ease, padding-inline .2s ease;
}
.art-row:hover{background:#fff}
.art-cat{font-family:var(--mono);font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--orange)}
.art-title{font-size:clamp(19px,1.9vw,24px);font-weight:800;letter-spacing:-.015em;color:var(--navy);line-height:1.22;margin-bottom:7px}
.art-desc{color:var(--muted);font-size:15.5px;line-height:1.5;max-width:64ch}
.art-link{color:var(--navy);font-weight:700;font-size:15px;display:inline-flex;align-items:center;gap:8px;white-space:nowrap;transition:gap .2s,color .2s}
.art-row:hover .art-link{color:var(--orange);gap:12px}
/* ============ CTA FINAL ============ */
.cta-final{
background:linear-gradient(120deg,var(--navy-deep) 0%, var(--navy) 42%, var(--navy-mid) 100%);
color:#fff;text-align:center;
}
.cta-final .wrap{padding-block:clamp(80px,11vw,128px);max-width:880px}
.cta-final h2{font-weight:800;font-size:clamp(32px,4.2vw,50px);line-height:1.07;letter-spacing:-.022em;color:#fff;margin-bottom:22px}
.cta-final p{font-size:clamp(17px,1.5vw,20px);color:rgba(255,255,255,.85);max-width:54ch;margin-inline:auto;margin-bottom:38px;line-height:1.55}
.cta-checks{display:flex;flex-wrap:wrap;justify-content:center;gap:14px 30px;margin-top:34px;font-size:15px;font-weight:600;color:rgba(255,255,255,.9)}
.cta-checks span{display:inline-flex;align-items:center;gap:9px}
.cta-checks svg{color:var(--orange-soft);flex:none}
/* ============ FOOTER (tamanho padronizado igual ao .obj-footer do tema) ============ */
.footer{background:var(--navy-deep);color:rgba(255,255,255,.66);padding-block:clamp(56px,8vw,96px) clamp(32px,4vw,48px);font-size:15px}
.foot-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:48px;margin-bottom:48px}
.foot-logo{height:44px;width:auto;margin-bottom:16px}
.foot-tag{font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--orange-soft);margin-bottom:12px}
.foot-desc{font-size:14px;color:rgba(255,255,255,.5);line-height:1.6;max-width:34ch;margin-bottom:20px}
.foot-col h4,.foot-col .foot-h{color:#fff;font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;margin-bottom:16px}
.foot-col ul{list-style:none}
.foot-col li{margin-bottom:11px}
.foot-col a{font-size:14px;color:rgba(255,255,255,.66);transition:color .15s}
.foot-col a:hover{color:#fff}
.sap-seal{display:flex;align-items:center;gap:20px;flex-wrap:wrap;margin-top:8px}
.sap-seal img{height:44px;width:auto;opacity:.85}
.foot-news{display:flex;align-items:center;justify-content:flex-end;gap:12px;flex-wrap:wrap;margin-top:4px;margin-bottom:26px}
.foot-news-label{font-size:13px;font-weight:600;color:rgba(255,255,255,.62)}
.foot-news-form{display:flex;gap:8px;align-items:center}
.foot-news-form input[type=email]{width:220px;padding:10px 14px;border-radius:8px;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.06);color:#fff;font-size:13.5px;font-family:inherit;outline:none;transition:border-color .15s,background .15s}
.foot-news-form input[type=email]::placeholder{color:rgba(255,255,255,.4)}
.foot-news-form input[type=email]:focus{border-color:var(--orange-soft);background:rgba(255,255,255,.09)}
.foot-news-form button{padding:10px 18px;border-radius:8px;border:none;background:#c94e18;color:#fff;font-size:13.5px;font-weight:700;cursor:pointer;font-family:inherit;white-space:nowrap;transition:background .2s,transform .15s}
.foot-news-form button:hover{background:#b04512;transform:translateY(-1px)}
.foot-news-ok{font-size:13.5px;color:#6ee7a8;font-weight:600;display:none}
.foot-news.is-done .foot-news-form,.foot-news.is-done .foot-news-label{display:none}
.foot-news.is-done .foot-news-ok{display:block}
.foot-bottom{
border-block-start:1px solid rgba(255,255,255,.08);
padding-block:28px 0;display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;
font-size:13px;color:rgba(255,255,255,.6);
}
.foot-bottom .loc{display:inline-flex;align-items:center;gap:8px}
/* ============ COMPARATIVE TABLE (silo-tokenizado) ============ */
.cmp-wrap{
overflow-x:auto;border:1px solid var(--hairline);border-radius:var(--r-md);background:#fff;
box-shadow:var(--shadow-2);
}
.cmp-table{width:100%;border-collapse:collapse;font-size:15px;min-width:640px}
.cmp-table th{
font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
color:var(--muted);text-align:left;padding:18px;border-bottom:2px solid var(--border);vertical-align:bottom;
}
.cmp-table th.win{color:var(--navy);border-bottom-color:var(--navy)}
.cmp-table td{padding:15px 18px;border-bottom:1px solid var(--border);color:var(--fg);vertical-align:middle}
.cmp-table tr:last-child td{border-bottom:none}
.cmp-table td.crit{font-weight:700;color:var(--navy)}
.cmp-table td.win{background:#f1f3f8;background:color-mix(in srgb,var(--navy) 7%,#fff)}
.cmp-table tbody tr:hover td{background:#faf9fc}
.cmp-table tbody tr:hover td.win{background:#e9edf5;background:color-mix(in srgb,var(--navy) 12%,#fff)}
.cmp-yes{color:#1d9e75;font-weight:800}
.cmp-mid{color:#ba7517;font-weight:600;font-size:13.5px}
.cmp-no{color:#dc2626;font-weight:800}
.cmp-badge{
display:inline-flex;align-items:center;gap:4px;background:var(--navy);color:#fff;
font-size:10px;font-weight:700;padding:3px 8px;border-radius:var(--r-sm);margin-left:6px;letter-spacing:.02em;
box-shadow:inset 0 1px 0 rgba(255,255,255,.12);
}
/* ============ TIMELINE (silo-tokenizada) ============ */
.tl{display:flex;flex-direction:column}
.tl .tl-item{display:grid;grid-template-columns:72px 24px 1fr;gap:0 16px;align-items:start;padding-bottom:34px}
.tl .tl-item:last-child{padding-bottom:0}
.tl .tl-dur{font-size:11px;font-weight:700;color:var(--navy);text-align:right;padding-top:3px}
.tl-rail{display:flex;flex-direction:column;align-items:center}
.tl .tl-dot{width:14px;height:14px;border-radius:50%;background:var(--navy);border:2px solid #fff;box-shadow:0 0 0 2px var(--navy);flex-shrink:0;margin-top:2px}
.tl-line{width:2px;flex:1;background:#cdd6e2;background:color-mix(in srgb,var(--navy) 32%,#fff);margin-top:4px;min-height:46px}
.tl-item:last-child .tl-line{display:none}
.tl .tl-phase{font-size:10px;font-weight:700;color:var(--navy);letter-spacing:.08em;text-transform:uppercase;margin-bottom:4px}
.tl .tl-title{font-size:16px;font-weight:800;letter-spacing:-.01em;color:var(--navy);margin:0 0 6px}
.tl .tl-text{font-size:14px;color:var(--muted);line-height:1.6;margin:0 0 8px}
.tl-tags{display:flex;gap:6px;flex-wrap:wrap}
.tl .tl-tag{font-size:11px;background:#eef1f6;background:color-mix(in srgb,var(--navy) 8%,#fff);color:var(--navy);border-radius:5px;padding:3px 8px;font-weight:600}
/* ============ RESPONSIVE ============ */
@media (max-width:1000px){
.mod-grid{grid-template-columns:repeat(2,1fr)}
.seg-grid{grid-template-columns:repeat(2,1fr)}
.foot-grid{grid-template-columns:1fr 1fr;gap:40px 32px}
.clients-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:0;}
}
@media (max-width:760px){
.nav-links{display:none}
.pain-grid{grid-template-columns:1fr}
.mod-grid{grid-template-columns:1fr 1fr}
.stats-grid{grid-template-columns:1fr;gap:0}
.stat + .stat::before{display:none}
.stat{padding-block:30px;border-block-start:1px solid var(--border)}
.stat:first-child{border:none}
.art-row{grid-template-columns:1fr;gap:8px;align-items:start}
.clients-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:0;}
.hero{min-height:auto;padding-bottom:10px}
.seg-grid{grid-template-columns:1fr}
}
@media (max-width:460px){
.mod-grid{grid-template-columns:1fr}
.foot-grid{grid-template-columns:1fr}
}
/* ── Silo tokens — Fase 3 (Produtos adicionais) ──────────────────────────── */
[data-silo="financialone"] {
--navy: #1A5BB5;
--navy-deep: #0D1F3C;
--navy-mid: #2E5BA8;
--orange: #E8720C;
--orange-soft:#F9BC1A;
}
[data-silo="associateone"] {
--navy: #1E3A6E;
--navy-deep: #132A52;
--navy-mid: #2E5BA8;
--orange: #C9921A;
--orange-soft:#F5C96A;
}
/* ── Silo token — MaintenanceOne ─────────────────────────────────────────── */
[data-silo="maintenanceone"] {
--navy: #7B1838;
--navy-deep: #4A0F22;
--navy-mid: #A82050;
--orange: #C41E5B;
--orange-soft:#F5A623;
}
/* ============================================================================
COMPONENTES DE CORPO DE ARTIGO (.ac-*) — jul/2026
Blocos "premium" para usar DENTRO do post_content das páginas filhas.
Tokenizados por silo (var(--navy)/var(--orange)), então o mesmo HTML muda de
cor sozinho conforme o data-silo da página.
Sem ícone de webfont de propósito: o Tabler é subset local (138 glifos) e
glifo novo exigiria regerar a fonte. Tudo aqui é desenhado em CSS.
========================================================================= */
/* Grade de números-chave */
.ac-stats.ac-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px;margin:28px 0 32px}
.ac-stats .ac-stat{background:#fff;border:1px solid #d3dae2;border-radius:12px;padding:20px 18px;
box-shadow:0 2px 6px rgba(15,37,64,.06),0 12px 30px rgba(15,37,64,.09);
transition:box-shadow .24s ease,border-color .24s ease,transform .18s ease}
.ac-stats .ac-stat:hover{border-color:#c4cdd8;transform:translateY(-2px);
box-shadow:0 5px 12px rgba(15,37,64,.10),0 22px 46px rgba(15,37,64,.16)}
.ac-stats .ac-stat-num{font-size:clamp(24px,3vw,32px);font-weight:900;letter-spacing:-.03em;color:var(--navy);line-height:1.05;margin-bottom:6px}
.ac-stats .ac-stat-label{font-size:12.5px;color:var(--muted,#5d6b7d);line-height:1.5;font-weight:600}
/* Grade de cards de conceito */
.ac-cards.ac-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:16px;margin:26px 0 32px}
.ac-cards .ac-card{background:#fff;border:1px solid #d3dae2;border-radius:12px;padding:22px;
border-top:3px solid var(--navy);
box-shadow:0 2px 6px rgba(15,37,64,.06),0 12px 30px rgba(15,37,64,.09);
transition:box-shadow .24s ease,border-color .24s ease,transform .18s ease}
.ac-cards .ac-card:hover{transform:translateY(-2px);box-shadow:0 5px 12px rgba(15,37,64,.10),0 22px 46px rgba(15,37,64,.16)}
.ac-cards .ac-card-title{font-size:15.5px;font-weight:800;color:var(--navy);letter-spacing:-.01em;margin:0 0 8px;line-height:1.3}
.ac-cards .ac-card-text{font-size:14px;color:var(--muted,#5d6b7d);line-height:1.65;margin:0}
/* Caixa de destaque */
.ac-callout.ac-callout{background:color-mix(in srgb,var(--navy) 5%,#fff);border:1px solid color-mix(in srgb,var(--navy) 16%,#fff);
border-left:4px solid var(--navy);border-radius:0 12px 12px 0;padding:20px 24px;margin:28px 0;
box-shadow:0 1px 3px rgba(15,37,64,.04),0 8px 20px rgba(15,37,64,.06)}
.ac-callout .ac-callout-label{font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--navy);margin-bottom:8px;display:block}
.ac-callout p.ac-callout-p,.ac-callout p{margin:0!important;font-size:15.5px!important;line-height:1.7!important;color:#374151}
.ac-callout.ac-callout--accent{background:color-mix(in srgb,var(--orange) 6%,#fff);border-color:color-mix(in srgb,var(--orange) 22%,#fff);border-left-color:var(--orange)}
.ac-callout.ac-callout--accent .ac-callout-label{color:#c2410c}
/* Passos numerados */
.ac-steps.ac-steps{display:flex;flex-direction:column;gap:14px;margin:26px 0 32px;counter-reset:acstep}
.ac-steps .ac-step{position:relative;background:#fff;border:1px solid #d3dae2;border-radius:12px;padding:18px 22px 18px 68px;
box-shadow:0 2px 6px rgba(15,37,64,.06),0 12px 30px rgba(15,37,64,.09)}
.ac-steps .ac-step::before{counter-increment:acstep;content:counter(acstep);position:absolute;left:20px;top:18px;
width:32px;height:32px;border-radius:50%;background:var(--navy);color:#fff;
font-size:14px;font-weight:800;display:flex;align-items:center;justify-content:center}
.ac-steps .ac-step-title{font-size:15.5px;font-weight:800;color:var(--navy);margin:0 0 6px;line-height:1.3}
.ac-steps .ac-step-text{font-size:14px;color:var(--muted,#5d6b7d);line-height:1.65;margin:0}
/* Checklist */
.ac-check{list-style:none!important;margin:22px 0 30px 0!important;padding:0;display:grid;gap:10px}
.ac-check li,ul.ac-check li{position:relative;padding:12px 16px 12px 44px;background:#fff;border:1px solid #e4e7eb;border-radius:9px;
font-size:14.5px!important;line-height:1.6!important;margin:0!important;box-shadow:0 1px 3px rgba(15,37,64,.04)}
.ac-check li::before{content:"";position:absolute;left:17px;top:17px;width:6px;height:11px;
border:solid var(--orange,#e05a20);border-width:0 2.5px 2.5px 0;transform:rotate(45deg)}
@media (max-width:640px){
.ac-stats.ac-stats{grid-template-columns:repeat(2,1fr)}
.ac-steps .ac-step{padding:16px 18px 16px 60px}
}