/* =============================================================
Inteligência Municipal — Landing institucional (site publico)
Reescrita 2026-05-08 sobre skills/design_system/references/ui_kits/marketing/index.html.
Cores/tipografia/spacing/radius/shadows vem de colors_and_type.css
(single source of truth dos tokens). Sem hex hardcoded fora dos
mask-stops (#000) e tokens de marca (WhatsApp via --whatsapp).
Headlines usam --font-marketing (Poppins 800) — corpo --font-sans (Inter).
Vive separado do shell autenticado (platform-shell.css) — landing tem
layout fluido full-bleed; shell e fixed grid.
============================================================= */
/* ========== Page wrapper ========== */
.landing-page {
min-height: 100vh;
display: flex;
flex-direction: column;
background: var(--bg);
color: var(--fg);
font-family: var(--font-sans);
line-height: var(--leading-normal);
overflow-x: hidden;
}
.landing-page main { flex: 1; }
/* Headlines marketing (Poppins) — corpo herda Inter via --font-sans no body */
.landing-hero h1,
.landing-section .head h2,
.stack h3,
.about h2,
.cta-band h2,
.ms-h .logo b {
font-family: var(--font-marketing);
}
/* =================== HEADER =================== */
.landing-nav {
height: 64px;
display: flex;
align-items: center;
padding: 0 var(--s-8);
gap: var(--s-8);
background: color-mix(in oklab, var(--bg) 75%, transparent);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
position: sticky;
top: 0;
z-index: 50;
border-bottom: 1px solid var(--border);
}
.landing-nav-logo {
display: flex;
align-items: center;
gap: var(--s-2);
flex-shrink: 0;
text-decoration: none;
color: var(--fg);
}
/* Logo theme-aware: dark mode mostra a versao branca; light mode a colorida.
Os dois ![]()
sao renderizados, CSS controla qual aparece (display block).
Evita FOUC + nao depende de JS pra trocar src. */
.landing-logo {
display: none;
height: 32px;
width: auto;
}
[data-theme="dark"] .landing-logo-dark { display: block; }
[data-theme="light"] .landing-logo-light { display: block; }
/* Fallback se data-theme nao tiver sido aplicado (ex: ate o bootstrap rodar) */
:root:not([data-theme]) .landing-logo-dark { display: block; }
.landing-nav-links {
display: flex;
gap: var(--s-1);
list-style: none;
margin: 0;
padding: 0;
}
.landing-nav-links a {
padding: var(--s-2) var(--s-3);
border-radius: var(--radius-xs);
font-size: 13.5px;
color: var(--fg-muted);
text-decoration: none;
white-space: nowrap;
display: inline-flex;
align-items: center;
gap: 5px;
transition: color var(--dur-base) var(--ease-out), background var(--dur-base) var(--ease-out);
}
.landing-nav-links a:hover {
color: var(--fg);
background: var(--bg-elevated);
}
.landing-nav-links a i {
font-size: 9px;
opacity: 0.6;
}
/* Item da nav sem link (ex: Contribuinte enquanto portal nao esta liberado pro publico).
Replica o layout/altura dos siblings de .landing-nav-links pra alinhar verticalmente. */
.landing-nav-links .landing-nav-disabled {
padding: var(--s-2) var(--s-3);
border-radius: var(--radius-xs);
font-size: 13.5px;
color: var(--fg-subtle);
cursor: default;
white-space: nowrap;
display: inline-flex;
align-items: center;
gap: 5px;
opacity: 0.55;
}
.landing-nav-spacer {
flex: 1;
}
.landing-nav-cta {
display: flex;
gap: var(--s-2);
align-items: center;
}
/* Theme toggle (sun/moon) na nav. Alterna light <-> dark. Default sem clique
= preferencia do sistema (resolvida pelo theme-bootstrap.php).
Icone exibido = ACAO do clique (lua = "ir pra dark"; sol = "ir pra light").
Logo, em modo light mostra LUA; em modo dark mostra SOL.
data-theme em manda — sem state interno no botao. */
.landing-theme-btn {
width: 36px;
height: 36px;
display: inline-flex;
align-items: center;
justify-content: center;
background: transparent;
border: 1px solid var(--border-strong);
border-radius: var(--radius-xs);
color: var(--fg-muted);
cursor: pointer;
padding: 0;
font-size: 14px;
transition: color var(--dur-base) var(--ease-out),
background var(--dur-base) var(--ease-out),
border-color var(--dur-base) var(--ease-out);
}
.landing-theme-btn:hover {
color: var(--fg);
background: var(--bg-card);
border-color: var(--fg-subtle);
}
.landing-theme-btn:focus-visible {
outline: 2px solid var(--focus-sky-color);
outline-offset: 2px;
}
/* Especificidade dupla (.landing-theme-btn .landing-theme-icon-*) pra beat a
regra do FontAwesome 6 (`.fa-solid { display: var(--fa-display, inline-block) }`)
que carrega depois do landing.css. Sem isso, ambos icones aparecem. */
.landing-theme-btn .landing-theme-icon-light,
.landing-theme-btn .landing-theme-icon-dark { display: none; }
/* Light mode -> mostra LUA (clicar vai pra dark) */
[data-theme="light"] .landing-theme-btn .landing-theme-icon-dark { display: inline-block; }
/* Dark mode -> mostra SOL (clicar vai pra light) */
[data-theme="dark"] .landing-theme-btn .landing-theme-icon-light { display: inline-block; }
/* Fallback antes do theme-bootstrap aplicar data-theme — mostra o sol (assume dark default) */
:root:not([data-theme]) .landing-theme-btn .landing-theme-icon-light { display: inline-block; }
.landing-nav-toggle {
display: none;
background: none;
border: 0;
color: var(--fg);
cursor: pointer;
padding: var(--s-2);
}
@media (max-width: 980px) {
.landing-nav-links { display: none; }
.landing-nav-toggle { display: inline-flex; }
}
/* =================== Buttons =================== */
.landing-btn {
height: 38px;
padding: 0 18px;
border-radius: 7px;
line-height: 1;
font-family: inherit;
font-size: 13.5px;
font-weight: 600;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 7px;
border: 1px solid transparent;
text-decoration: none;
transition: background var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out), filter var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
.landing-btn-primary {
background: var(--primary);
color: var(--primary-fg);
border-color: var(--primary);
}
.landing-btn-primary:hover { background: var(--primary-active); }
.landing-btn-secondary,
.landing-btn-ghost {
background: transparent;
color: var(--fg);
border-color: var(--border-strong);
}
.landing-btn-secondary:hover,
.landing-btn-ghost:hover { background: var(--bg-card); }
.landing-btn-whatsapp {
background: var(--whatsapp);
color: var(--whatsapp-fg);
border-color: var(--whatsapp);
}
.landing-btn-whatsapp:hover {
background: var(--whatsapp-hover);
border-color: var(--whatsapp-hover);
filter: brightness(1.04);
}
.landing-btn-lg {
height: 48px;
padding: 0 24px;
font-size: 14.5px;
border-radius: 9px;
}
.landing-btn .ico { width: 1em; height: 1em; }
/* Header-specific compact CTAs (36px to match nav height) */
.landing-nav-cta .landing-btn {
height: 36px;
padding: 0 14px;
font-size: 13px;
}
/* =================== HERO =================== */
.landing-hero {
padding: 110px var(--s-8) 90px;
position: relative;
overflow: hidden;
}
.landing-hero::before {
content: "";
position: absolute;
inset: -100px 0 0 0;
pointer-events: none;
background:
radial-gradient(60% 50% at 50% 0%, rgba(87, 73, 244, 0.32), transparent 60%),
radial-gradient(40% 30% at 50% 0%, rgba(28, 108, 220, 0.16), transparent 60%);
}
.landing-hero::after {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
opacity: 0.32;
background-image:
linear-gradient(to right, rgba(255, 255, 255, 0.04) 1px, transparent 1px),
linear-gradient(to bottom, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
background-size: 56px 56px;
/* mask precisa de cor solida pro stop — alpha eh o que importa */
mask-image: radial-gradient(60% 60% at 50% 30%, #000 0%, transparent 80%);
-webkit-mask-image: radial-gradient(60% 60% at 50% 30%, #000 0%, transparent 80%);
}
.landing-hero-grid {
position: relative;
max-width: 1280px;
margin: 0 auto;
display: grid;
grid-template-columns: 1.05fr 1fr;
gap: 56px;
align-items: center;
}
.landing-hero-copy { text-align: left; }
.landing-hero-eyebrow {
display: inline-flex;
align-items: center;
gap: var(--s-2);
background: var(--primary-soft);
border: 1px solid rgba(87, 73, 244, 0.35);
padding: 7px 16px;
border-radius: var(--radius-pill);
font-size: var(--text-2xs);
color: var(--primary-hover);
margin-bottom: var(--s-6);
font-weight: 600;
letter-spacing: var(--tracking-allcaps);
text-transform: uppercase;
}
.landing-hero-title {
font-weight: 800;
font-size: clamp(var(--text-3xl), 6vw, var(--text-4xl));
letter-spacing: var(--tracking-tight);
line-height: var(--leading-tight);
margin: 0 0 var(--s-5);
max-width: 580px;
color: var(--fg);
}
.landing-hero-title em {
font-style: normal;
display: inline-block;
background: linear-gradient(120deg, var(--primary) 0%, var(--brand-sky) 50%, var(--accent-cyan) 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.landing-hero-lead {
font-size: var(--text-lg);
color: var(--fg-muted);
max-width: 540px;
margin: 0 0 var(--s-8);
line-height: var(--leading-loose);
}
.landing-hero-ctas {
display: flex;
gap: var(--s-3);
flex-wrap: wrap;
}
/* Hero shell mockup (right column) */
.landing-hero-mock {
position: relative;
aspect-ratio: 4/3;
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: 14px;
box-shadow: 0 40px 90px -25px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(87, 73, 244, 0.10);
overflow: hidden;
transform: perspective(1600px) rotateY(-5deg) rotateX(2deg);
}
.landing-hero-mock::before {
content: "";
position: absolute;
inset: -25% -30% auto auto;
width: 70%;
height: 70%;
background: radial-gradient(60% 60% at 50% 50%, rgba(87, 73, 244, 0.30), transparent 70%);
pointer-events: none;
}
.hm-h {
height: 34px;
padding: 0 12px;
display: flex;
align-items: center;
gap: 10px;
border-bottom: 1px solid var(--border);
background: var(--bg);
font-size: 10.5px;
}
.hm-crumb { display: flex; align-items: center; gap: 5px; color: var(--fg-muted); }
.hm-crumb .it { padding: 2px 6px; border-radius: 4px; }
.hm-crumb .it.act { color: var(--fg); background: var(--bg-elevated); font-weight: 600; }
.hm-crumb i { font-size: 7px; opacity: 0.5; }
.hm-h .sp { flex: 1; }
.hm-pill {
font-size: 9.5px;
padding: 3px 8px;
border-radius: var(--radius-pill);
background: var(--primary-soft);
color: var(--primary);
font-weight: 700;
}
.hm-av {
width: 18px;
height: 18px;
border-radius: 50%;
background: linear-gradient(135deg, var(--primary), var(--brand-sky));
}
.hm-tabs {
display: flex;
gap: 1px;
padding: 6px 8px 0;
background: var(--bg);
border-bottom: 1px solid var(--border);
}
.hm-tab {
height: 22px;
padding: 0 8px;
border-radius: 5px 5px 0 0;
display: inline-flex;
align-items: center;
gap: 4px;
font-size: 9.5px;
color: var(--fg-muted);
white-space: nowrap;
border: 1px solid transparent;
}
.hm-tab i { font-size: 7px; opacity: 0.7; }
.hm-tab.act {
background: var(--bg-card);
color: var(--fg);
font-weight: 600;
border-color: var(--border);
border-bottom-color: var(--bg-card);
margin-bottom: -1px;
}
.hm-tab.fix i { color: var(--primary); opacity: 1; }
.hm-body {
display: grid;
grid-template-columns: 32px 1fr 124px;
height: calc(100% - 62px);
}
.hm-rail {
background: var(--bg);
border-right: 1px solid var(--border);
padding: 8px 0;
display: flex;
flex-direction: column;
gap: 5px;
align-items: center;
}
.hm-r-it {
width: 22px;
height: 22px;
border-radius: 5px;
display: flex;
align-items: center;
justify-content: center;
font-size: 9.5px;
color: var(--fg-subtle);
}
.hm-r-it.act { background: var(--primary-soft); color: var(--primary); }
.hm-work {
padding: 10px;
background: var(--bg-card);
display: flex;
flex-direction: column;
gap: 8px;
min-width: 0;
}
.hm-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.hm-kpi {
background: var(--bg);
border: 1px solid var(--border);
border-radius: 6px;
padding: 8px 10px;
}
.hm-k-l {
font-size: 7.5px;
color: var(--fg-subtle);
text-transform: uppercase;
letter-spacing: 0.06em;
font-weight: 600;
}
.hm-k-v {
font-size: 14px;
font-weight: 700;
color: var(--fg);
margin-top: 3px;
font-variant-numeric: tabular-nums;
letter-spacing: -0.01em;
}
.hm-k-d {
font-size: 8px;
color: var(--color-positive);
margin-top: 2px;
font-weight: 700;
}
.hm-chart {
flex: 1;
background: var(--bg);
border: 1px solid var(--border);
border-radius: 6px;
padding: 8px 10px;
display: flex;
flex-direction: column;
gap: 6px;
min-height: 0;
}
.hm-chart-h {
font-size: 8px;
color: var(--fg-muted);
text-transform: uppercase;
letter-spacing: 0.06em;
font-weight: 600;
}
.hm-chart svg { width: 100%; flex: 1; min-height: 0; }
.hm-drawer {
background: var(--bg);
border-left: 1px solid var(--border);
padding: 6px;
display: flex;
flex-direction: column;
gap: 1px;
min-width: 0;
}
.hm-d-tb {
display: flex;
align-items: center;
gap: 5px;
padding: 3px 4px 6px;
border-bottom: 1px solid var(--border);
margin-bottom: 5px;
font-size: 8.5px;
color: var(--fg-muted);
}
.hm-d-tb i { font-size: 8px; }
.hm-d-tb .ph { flex: 1; color: var(--fg-subtle); }
.hm-d-tb .ct {
font-weight: 700;
color: var(--fg);
font-variant-numeric: tabular-nums;
}
.hm-d-r {
padding: 5px 6px;
border-radius: 4px;
border: 1px solid transparent;
min-width: 0;
}
.hm-d-nm {
font-size: 9.5px;
font-weight: 700;
color: var(--fg);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.hm-d-sub {
font-size: 7.5px;
color: var(--fg-subtle);
margin-top: 1px;
font-variant-numeric: tabular-nums;
letter-spacing: 0.02em;
}
.hm-d-r.act {
background: var(--primary-soft);
border-color: rgba(87, 73, 244, 0.25);
}
.hm-d-r.act .hm-d-nm { color: var(--primary); }
.hm-d-r.act .hm-d-sub { color: rgba(193, 186, 255, 0.85); }
.hm-d-r.ia .hm-d-sub::before {
content: "IA \B7 ";
color: var(--accent-cyan);
font-weight: 700;
}
/* =================== Section scaffold =================== */
.landing-section {
padding: 88px var(--s-8);
}
.landing-section.bord { border-top: 1px solid var(--border); }
/* Section head — eyebrow tag + h2 title + p description.
Usado por: .landing-section, .landing-diff, .landing-inside.
Tokens do design system (--text-*, --tracking-*, --leading-*) em todo lugar
pra manter hierarquia consistente. */
.landing-section .head,
.landing-diff .head,
.landing-inside .head {
max-width: 1100px;
margin: 0 auto var(--s-12);
text-align: center;
}
.landing-section .head .tag,
.landing-diff .head .tag,
.landing-inside .head .tag {
font-size: var(--text-2xs);
font-weight: 600;
letter-spacing: var(--tracking-allcaps);
text-transform: uppercase;
color: var(--primary);
margin-bottom: var(--s-3);
display: block;
}
.landing-section .head h2,
.landing-diff .head h2,
.landing-inside .head h2 {
font-family: var(--font-marketing);
font-size: clamp(var(--text-2xl), 4vw, var(--text-3xl));
font-weight: 700;
letter-spacing: var(--tracking-tight);
line-height: var(--leading-tight);
color: var(--fg);
margin: 0 auto var(--s-3);
max-width: 800px;
}
.landing-section .head h2 em,
.landing-diff .head h2 em,
.landing-inside .head h2 em {
font-style: normal;
background: linear-gradient(120deg, var(--primary), var(--accent-cyan));
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.landing-section .head p,
.landing-diff .head p,
.landing-inside .head p {
font-size: var(--text-md);
color: var(--fg-muted);
max-width: 700px;
margin: 0 auto;
line-height: var(--leading-loose);
}
.landing-section .body {
max-width: 1200px;
margin: 0 auto;
}
/* =================== TRUST BAND =================== */
.landing-trust {
padding: 56px var(--s-8);
border-top: 1px solid var(--border);
border-bottom: 1px solid var(--border);
background: var(--bg-card);
}
.landing-trust-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 12px;
max-width: 1100px;
margin: 0 auto;
}
.landing-trust-it {
background: var(--bg);
border: 1px solid var(--border);
border-radius: var(--radius-md);
padding: 24px 22px;
}
.landing-trust-v {
font-family: var(--font-marketing);
font-weight: 800;
font-size: 46px;
line-height: 1;
letter-spacing: -0.04em;
background: linear-gradient(120deg, var(--fg) 0%, var(--primary) 110%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
font-variant-numeric: tabular-nums;
}
.landing-trust-v small {
font-size: 18px;
font-weight: 700;
opacity: 0.75;
margin-left: 3px;
letter-spacing: 0;
}
.landing-trust-l {
font-size: var(--text-xs);
color: var(--fg-muted);
margin-top: var(--s-3);
line-height: var(--leading-snug);
}
.landing-trust-logos {
max-width: 1100px;
margin: 36px auto 0;
padding-top: 28px;
border-top: 1px solid var(--border);
display: flex;
flex-wrap: wrap;
gap: 22px 36px;
justify-content: center;
font-size: var(--text-2xs);
font-weight: 600;
letter-spacing: var(--tracking-allcaps);
color: var(--fg-subtle);
text-transform: uppercase;
}
.landing-trust-logos b { color: var(--fg-muted); font-weight: 700; }
/* =================== DIFERENCIAL (IA + CONSULTORIA) =================== */
.landing-diff { padding: 88px var(--s-8); border-top: 1px solid var(--border); }
.landing-diff-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
max-width: 1200px;
margin: 0 auto;
}
.landing-diff-card {
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: 14px;
padding: 36px;
display: flex;
flex-direction: column;
gap: 14px;
position: relative;
overflow: hidden;
}
.landing-diff-card.ia {
background: linear-gradient(155deg, rgba(87, 73, 244, 0.18), var(--bg-card) 55%);
border-color: rgba(87, 73, 244, 0.3);
}
.landing-diff-card.cons {
background: linear-gradient(155deg, rgba(28, 108, 220, 0.16), var(--bg-card) 55%);
border-color: rgba(28, 108, 220, 0.3);
}
.landing-diff-ic {
width: 52px;
height: 52px;
border-radius: var(--radius-md);
display: flex;
align-items: center;
justify-content: center;
font-size: 22px;
flex-shrink: 0;
}
.landing-diff-card.ia .landing-diff-ic { background: var(--primary-soft); color: var(--primary); }
.landing-diff-card.cons .landing-diff-ic { background: var(--brand-sky-soft); color: var(--brand-sky-bright, var(--brand-sky)); }
.landing-diff-card .cap {
font-size: var(--text-2xs);
font-weight: 600;
letter-spacing: var(--tracking-allcaps);
text-transform: uppercase;
}
.landing-diff-card.ia .cap { color: var(--primary); }
.landing-diff-card.cons .cap { color: var(--brand-sky-bright, var(--brand-sky)); }
.landing-diff-card h3 {
font-family: var(--font-marketing);
font-size: var(--text-xl);
font-weight: 700;
color: var(--fg);
margin: 0;
line-height: var(--leading-snug);
letter-spacing: var(--tracking-tight);
}
.landing-diff-card p {
font-size: var(--text-base);
color: var(--fg-muted);
margin: 0;
line-height: var(--leading-loose);
}
.landing-diff-card p b { color: var(--fg); font-weight: 600; }
.landing-diff-mock {
margin-top: 14px;
background: var(--bg);
border: 1px solid var(--border);
border-radius: 10px;
padding: 14px 16px;
}
.ia-row {
display: grid;
grid-template-columns: 1fr auto auto;
gap: 12px;
align-items: center;
padding: 8px 0;
font-size: 12.5px;
color: var(--fg-muted);
border-bottom: 1px solid var(--border);
}
.ia-row:last-child { border-bottom: none; }
.ia-row.h {
font-size: 9px;
color: var(--fg-subtle);
text-transform: uppercase;
letter-spacing: 0.08em;
padding-bottom: 6px;
padding-top: 0;
font-weight: 700;
}
.ia-row .nm { color: var(--fg); font-weight: 600; }
.ia-row .nm small {
color: var(--fg-subtle);
font-weight: 400;
font-size: 11px;
}
.ia-row .conf {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 12px;
font-weight: 700;
color: var(--primary);
font-variant-numeric: tabular-nums;
}
.ia-row .conf::before {
content: "";
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--primary);
box-shadow: 0 0 8px rgba(87, 73, 244, 0.6);
}
.ia-row .val {
font-variant-numeric: tabular-nums;
font-weight: 700;
color: var(--fg);
}
.cons-step {
display: flex;
gap: 12px;
padding: 8px 0;
align-items: flex-start;
}
.cons-step .num {
width: 24px;
height: 24px;
border-radius: 50%;
background: var(--brand-sky-soft);
color: var(--brand-sky-bright, var(--brand-sky));
display: flex;
align-items: center;
justify-content: center;
font-size: 11px;
font-weight: 700;
flex-shrink: 0;
}
.cons-step .num.done {
background: var(--brand-sky);
color: var(--primary-fg);
}
.cons-step .body { flex: 1; }
.cons-step .ttl {
font-size: 12.5px;
color: var(--fg);
font-weight: 600;
}
.cons-step .desc {
font-size: 11px;
color: var(--fg-subtle);
margin-top: 2px;
line-height: 1.45;
}
/* =================== POR DENTRO DO PRODUTO =================== */
.landing-inside {
background: var(--bg-card);
border-top: 1px solid var(--border);
border-bottom: 1px solid var(--border);
padding: 88px var(--s-8);
}
.landing-inside .head .tag { color: var(--accent-cyan); }
.landing-inside-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
max-width: 1200px;
margin: 0 auto;
}
.ins-card {
background: var(--bg);
border: 1px solid var(--border);
border-radius: var(--radius-md);
padding: 22px;
display: flex;
flex-direction: column;
gap: 10px;
}
.ins-card .cap {
font-size: var(--text-2xs);
font-weight: 600;
letter-spacing: var(--tracking-allcaps);
text-transform: uppercase;
color: var(--accent-cyan);
}
.ins-card h3 {
font-family: var(--font-marketing);
font-size: var(--text-lg);
font-weight: 700;
color: var(--fg);
margin: 0;
line-height: var(--leading-snug);
letter-spacing: var(--tracking-tight);
}
.ins-card p {
font-size: var(--text-sm);
color: var(--fg-muted);
margin: 0;
line-height: var(--leading-snug);
}
.ins-mock {
margin-top: 8px;
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: 8px;
padding: 10px 12px;
}
.ins-mock .r {
display: flex;
align-items: center;
gap: 8px;
padding: 5px 0;
font-size: 10.5px;
color: var(--fg-muted);
}
.ins-mock .r.h {
color: var(--fg-subtle);
font-size: 8.5px;
text-transform: uppercase;
letter-spacing: 0.08em;
padding-bottom: 6px;
border-bottom: 1px solid var(--border);
margin-bottom: 2px;
font-weight: 700;
}
.ins-mock .r .d {
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--primary);
flex-shrink: 0;
}
.ins-mock .r.act {
color: var(--fg);
font-weight: 600;
background: var(--primary-soft);
margin: 0 -6px;
padding: 5px 6px;
border-radius: 4px;
}
.ins-mock .n {
color: var(--fg);
font-weight: 600;
font-variant-numeric: tabular-nums;
margin-left: auto;
font-size: 10px;
}
.ins-mock .pill {
font-size: 8.5px;
padding: 1px 6px;
border-radius: var(--radius-pill);
background: var(--status-success);
color: var(--status-success-fg);
font-weight: 700;
margin-left: auto;
}
.ins-mock.detail {
display: flex;
flex-direction: column;
gap: 4px;
}
.ins-mock.detail .tabs {
display: flex;
gap: 2px;
border-bottom: 1px solid var(--border);
padding-bottom: 6px;
margin-bottom: 6px;
}
.ins-mock.detail .tab {
font-size: 9px;
padding: 3px 7px;
border-radius: 4px;
color: var(--fg-muted);
}
.ins-mock.detail .tab.act {
color: var(--fg);
background: var(--bg-elevated);
font-weight: 700;
}
.ins-mock.detail .field {
display: flex;
justify-content: space-between;
padding: 3px 0;
font-size: 10px;
}
.ins-mock.detail .field .k { color: var(--fg-subtle); }
.ins-mock.detail .field .v {
color: var(--fg);
font-weight: 600;
font-variant-numeric: tabular-nums;
}
/* =================== BENTO DE PRODUTOS =================== */
.prods-bento .bento {
display: grid;
gap: 16px;
grid-template-columns: repeat(8, 1fr);
}
.prods-bento .b-card {
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: var(--radius-md);
padding: 24px;
display: flex;
flex-direction: column;
gap: 14px;
transition: border-color 0.15s;
text-decoration: none;
color: inherit;
}
.prods-bento .b-card:hover {
border-color: rgba(87, 73, 244, 0.55);
}
.prods-bento .b-wide { grid-column: span 4; }
.prods-bento .b-card:nth-child(2),
.prods-bento .b-card:nth-child(3) { grid-column: span 2; }
.prods-bento .b-card:nth-child(n+4) { grid-column: span 2; }
.prods-bento .b-head {
display: flex;
align-items: center;
gap: 10px;
font-size: var(--text-lg);
font-weight: 700;
color: var(--fg);
letter-spacing: var(--tracking-tight);
}
.prods-bento .b-head i { color: var(--primary); font-size: 15px; }
.prods-bento .b-body {
display: flex;
gap: 18px;
flex: 1;
align-items: flex-start;
}
.prods-bento .b-body.col { flex-direction: column; }
.prods-bento .b-body p {
margin: 0;
font-size: var(--text-sm);
color: var(--fg-muted);
line-height: var(--leading-snug);
}
.prods-bento .b-body p b { color: var(--fg); font-weight: 600; }
.prods-bento .b-text {
flex: 1;
display: flex;
flex-direction: column;
gap: 12px;
}
.prods-bento .b-checks {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 7px;
}
.prods-bento .b-checks li {
display: flex;
align-items: center;
gap: 8px;
font-size: 12.5px;
color: var(--fg-muted);
}
.prods-bento .b-checks li i { color: var(--primary); font-size: 10px; }
.prods-bento .b-viz {
flex: 0 0 160px;
display: flex;
align-items: center;
justify-content: center;
}
.prods-bento svg.donut { width: 140px; height: 140px; }
.prods-bento svg.donut.sm { width: 110px; height: 110px; }
.prods-bento svg.line { width: 100%; height: 64px; margin-top: auto; }
.prods-bento svg.bars { width: 100%; height: 80px; margin-top: auto; }
.prods-bento svg.gauge { width: 100%; max-width: 160px; height: 80px; margin: auto auto 0; }
.prods-bento .donut-v {
font-size: 19px;
font-weight: 700;
fill: var(--fg);
font-family: var(--font-sans);
}
.prods-bento .donut-l {
font-size: 8px;
fill: var(--fg-subtle);
text-transform: uppercase;
letter-spacing: 0.08em;
}
.prods-bento .bar-l { font-size: 8px; fill: var(--fg-subtle); }
.prods-bento .b-illust {
display: flex;
align-items: center;
justify-content: center;
flex: 1;
padding: 12px 0;
opacity: 0.85;
}
.prods-bento .ill { width: 100px; height: 80px; }
/* =================== "USE UM OU TODOS" =================== */
.stack {
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: 14px;
padding: 48px;
max-width: 1100px;
margin: 0 auto;
display: grid;
grid-template-columns: 1fr 1.1fr;
gap: 56px;
align-items: center;
}
.stack h3 {
font-family: var(--font-marketing);
font-size: clamp(var(--text-2xl), 3vw, var(--text-3xl));
font-weight: 700;
letter-spacing: var(--tracking-tight);
color: var(--fg);
margin: 0 0 var(--s-3);
line-height: var(--leading-tight);
}
.stack p {
font-size: var(--text-base);
color: var(--fg-muted);
line-height: var(--leading-loose);
margin: 0 0 var(--s-5);
}
.stack .stat-row {
display: flex;
gap: 28px;
margin-top: 24px;
padding-top: 22px;
border-top: 1px solid var(--border);
}
.stack .stat-row .v {
font-size: 22px;
font-weight: 700;
color: var(--fg);
font-family: var(--font-mono);
font-variant-numeric: tabular-nums;
line-height: 1;
}
.stack .stat-row .l {
font-size: var(--text-2xs);
color: var(--fg-muted);
margin-top: 6px;
}
.stack .visual {
position: relative;
min-height: 280px;
}
.stack .puz {
position: absolute;
background: var(--bg-elevated);
border: 1px solid var(--border-strong);
border-radius: 10px;
padding: 14px 16px;
display: flex;
align-items: center;
gap: 10px;
font-size: 12.5px;
font-weight: 600;
color: var(--fg);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}
.stack .puz i {
width: 28px;
height: 28px;
border-radius: 6px;
background: var(--primary-soft);
color: var(--primary);
display: flex;
align-items: center;
justify-content: center;
font-size: 13px;
}
.stack .puz.p1 { top: 0; left: 0; }
.stack .puz.p2 {
top: 56px;
left: 130px;
border-color: rgba(87, 73, 244, 0.4);
background: var(--primary-soft);
}
.stack .puz.p2 i {
background: rgba(255, 255, 255, 0.18);
color: var(--fg);
}
.stack .puz.p3 { top: 130px; left: 30px; }
.stack .puz.p4 { top: 200px; left: 170px; }
/* =================== PILARES (3 colunas) =================== */
.pillars {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 18px;
}
.pillar {
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: var(--radius-md);
padding: 30px;
display: flex;
flex-direction: column;
gap: 14px;
transition: border-color 0.15s, transform 0.15s;
text-decoration: none;
}
.pillar:hover {
border-color: var(--primary);
transform: translateY(-2px);
}
.pillar .ic {
width: 48px;
height: 48px;
border-radius: 10px;
background: var(--primary-soft);
color: var(--primary);
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
}
.pillar h3 {
font-family: var(--font-marketing);
font-size: var(--text-lg);
font-weight: 700;
color: var(--fg);
margin: 0;
letter-spacing: var(--tracking-tight);
}
.pillar p {
font-size: var(--text-base);
color: var(--fg-muted);
margin: 0;
line-height: var(--leading-loose);
flex: 1;
}
.pillar .lk {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 13px;
font-weight: 600;
color: var(--primary);
margin-top: 4px;
text-decoration: none;
}
/* =================== SOBRE / CONHEÇA =================== */
.about {
display: grid;
grid-template-columns: 1.05fr 1fr;
gap: 56px;
max-width: 1100px;
margin: 0 auto;
align-items: center;
}
.about .tag {
font-size: var(--text-2xs);
font-weight: 600;
letter-spacing: var(--tracking-allcaps);
text-transform: uppercase;
color: var(--primary);
margin-bottom: var(--s-3);
display: block;
}
.about h2 {
font-family: var(--font-marketing);
font-size: clamp(var(--text-2xl), 4vw, var(--text-3xl));
font-weight: 700;
letter-spacing: var(--tracking-tight);
line-height: var(--leading-tight);
color: var(--fg);
margin: 0 0 var(--s-4);
}
.about p {
font-size: 15px;
color: var(--fg-muted);
line-height: 1.65;
margin: 0 0 16px;
}
.about p b { color: var(--fg); font-weight: 600; }
.about .tags {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 22px;
}
.about .tags span {
font-size: 12px;
font-weight: 600;
color: var(--fg);
background: var(--bg-elevated);
border: 1px solid var(--border);
padding: 6px 12px;
border-radius: var(--radius-pill);
}
.about-vis {
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: 14px;
padding: 32px;
position: relative;
overflow: hidden;
}
.about-vis .grid-bg {
position: absolute;
inset: 0;
background-image:
linear-gradient(to right, rgba(255, 255, 255, 0.025) 1px, transparent 1px),
linear-gradient(to bottom, rgba(255, 255, 255, 0.025) 1px, transparent 1px);
background-size: 24px 24px;
/* mask precisa de cor solida — alpha eh o que importa */
mask-image: radial-gradient(60% 60% at 50% 50%, #000, transparent 80%);
-webkit-mask-image: radial-gradient(60% 60% at 50% 50%, #000, transparent 80%);
pointer-events: none;
}
.about-vis .nums {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 18px;
position: relative;
}
.about-vis .num {
background: var(--bg-elevated);
border: 1px solid var(--border);
border-radius: 10px;
padding: 18px;
}
.about-vis .num .v {
font-size: 30px;
font-weight: 700;
font-family: var(--font-mono);
font-variant-numeric: tabular-nums;
background: linear-gradient(120deg, var(--primary), var(--accent-cyan));
-webkit-background-clip: text;
background-clip: text;
color: transparent;
line-height: 1;
}
.about-vis .num .l {
font-size: var(--text-2xs);
color: var(--fg-muted);
margin-top: 8px;
line-height: var(--leading-snug);
}
/* =================== CTA WHATSAPP + FORM =================== */
.cta-band {
background:
radial-gradient(60% 80% at 100% 50%, rgba(87, 73, 244, 0.22), transparent 60%),
radial-gradient(60% 80% at 0% 50%, rgba(28, 108, 220, 0.15), transparent 60%),
var(--bg-card);
border: 1px solid var(--border);
border-radius: 16px;
max-width: 1100px;
margin: 0 auto;
padding: 56px;
display: grid;
grid-template-columns: 1.1fr 1fr;
gap: 56px;
align-items: center;
}
.cta-band h2 {
font-family: var(--font-marketing);
font-size: clamp(var(--text-2xl), 4vw, var(--text-3xl));
font-weight: 700;
letter-spacing: var(--tracking-tight);
line-height: var(--leading-tight);
color: var(--fg);
margin: 0 0 var(--s-3);
}
.cta-band p {
font-size: var(--text-base);
color: var(--fg-muted);
line-height: var(--leading-loose);
margin: 0 0 var(--s-6);
}
.cta-band p b { color: var(--fg); font-weight: 600; }
.cta-band .row { display: flex; gap: 12px; flex-wrap: wrap; }
/* Form embed */
.cta-form {
background: var(--bg-elevated);
border: 1px solid var(--border);
border-radius: var(--radius-md);
padding: 24px;
}
.cta-form h4 {
font-size: var(--text-base);
font-weight: 700;
color: var(--fg);
margin: 0 0 var(--s-4);
letter-spacing: var(--tracking-tight);
}
.cta-form .field { margin-bottom: var(--s-3); }
.cta-form label {
font-size: var(--text-2xs);
font-weight: 600;
color: var(--fg-muted);
text-transform: uppercase;
letter-spacing: var(--tracking-wide);
display: block;
margin-bottom: 6px;
}
.cta-form input,
.cta-form select,
.cta-form textarea {
width: 100%;
box-sizing: border-box;
background: var(--bg);
border: 1px solid var(--border-strong);
border-radius: 7px;
padding: 10px 12px;
font-size: 13px;
color: var(--fg);
font-family: inherit;
}
.cta-form input:focus,
.cta-form select:focus,
.cta-form textarea:focus {
outline: none;
border-color: var(--primary);
box-shadow: var(--ring-focus);
}
.cta-form textarea { resize: vertical; min-height: 70px; }
.cta-form .landing-btn {
width: 100%;
justify-content: center;
margin-top: 6px;
}
.cta-form .row2 {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
}
.cta-form-honeypot {
position: absolute;
left: -9999px;
width: 1px;
height: 1px;
opacity: 0;
pointer-events: none;
}
.cta-form-msg {
margin-top: 10px;
padding: 10px 12px;
border-radius: 7px;
font-size: 12.5px;
}
.cta-form-msg-ok { background: var(--status-success); color: var(--status-success-fg); }
.cta-form-msg-error { background: var(--status-error); color: var(--status-error-fg); }
/* =================== SELOS LGPD / BR =================== */
.seals {
display: flex;
gap: 14px;
justify-content: center;
flex-wrap: wrap;
padding: 36px var(--s-8) 0;
max-width: 1100px;
margin: 0 auto;
}
.seal {
display: inline-flex;
align-items: center;
gap: 10px;
background: var(--bg-card);
border: 1px solid var(--border);
padding: 10px 16px;
border-radius: var(--radius-pill);
font-size: 12px;
color: var(--fg-muted);
font-weight: 500;
}
.seal i { color: var(--primary); font-size: 13px; }
.seal b { color: var(--fg); font-weight: 600; }
/* =================== FOOTER =================== */
.landing-footer {
padding: 64px var(--s-8) 28px;
border-top: 1px solid var(--border);
background: var(--bg);
margin-top: 80px;
}
.landing-footer-cols {
display: grid;
grid-template-columns: 1.4fr 1fr 1fr 1.1fr;
gap: 48px;
max-width: 1100px;
margin: 0 auto 36px;
}
.landing-footer h4 {
font-size: var(--text-2xs);
font-weight: 600;
text-transform: uppercase;
letter-spacing: var(--tracking-allcaps);
color: var(--fg);
margin: 0 0 var(--s-3);
}
.landing-footer ul {
list-style: none;
padding: 0;
margin: 0;
}
.landing-footer li {
font-size: 13px;
color: var(--fg-muted);
padding: 5px 0;
}
.landing-footer li a {
color: inherit;
text-decoration: none;
}
.landing-footer li a:hover { color: var(--fg); }
.landing-footer-contact {
display: flex;
gap: 10px;
align-items: flex-start;
padding: 5px 0;
font-size: 13px;
color: var(--fg-muted);
line-height: 1.5;
}
.landing-footer-contact i {
color: var(--primary);
font-size: 12px;
margin-top: 4px;
flex-shrink: 0;
width: 14px;
}
.landing-footer-blurb {
font-size: 13px;
color: var(--fg-muted);
line-height: 1.6;
margin: 14px 0 18px;
max-width: 270px;
}
.landing-footer-socials {
display: flex;
gap: 8px;
}
.landing-footer-socials a {
width: 32px;
height: 32px;
border-radius: 6px;
background: var(--bg-card);
border: 1px solid var(--border);
display: flex;
align-items: center;
justify-content: center;
color: var(--fg-muted);
font-size: 13px;
text-decoration: none;
transition: color var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out);
}
.landing-footer-socials a:hover {
color: var(--fg);
border-color: var(--border-strong);
}
.landing-footer-bottom {
max-width: 1100px;
margin: 0 auto;
padding-top: 22px;
border-top: 1px solid var(--border);
display: flex;
justify-content: space-between;
align-items: center;
font-size: 12px;
color: var(--fg-subtle);
flex-wrap: wrap;
gap: 8px;
}
/* =================== Partners carousel (mantido — DB-driven) =================== */
.hero-partners {
width: 100%;
padding: var(--s-10) 0 0;
position: relative;
}
.hero-partners-viewport {
overflow: hidden;
width: 100%;
max-width: 900px;
margin: 0 auto;
/* mask-image precisa de cor solida — alpha eh o que importa */
mask-image: linear-gradient(90deg, transparent 0, #000 12%, #000 88%, transparent 100%);
-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 12%, #000 88%, transparent 100%);
}
.hero-partners-track {
display: flex;
flex-wrap: nowrap;
align-items: center;
gap: var(--s-12);
width: max-content;
animation: partners-scroll 35s linear infinite;
}
.hero-partners-viewport:hover .hero-partners-track,
.hero-partners-viewport:focus-within .hero-partners-track {
animation-play-state: paused;
}
.hero-partners-label {
text-align: center;
color: color-mix(in oklab, var(--fg) 35%, transparent);
font-size: var(--text-sm);
margin: var(--s-5) 0 0;
}
.partner-item {
flex: 0 0 auto;
height: 56px;
display: flex;
align-items: center;
justify-content: center;
color: var(--fg-muted);
opacity: 0.7;
transition: opacity var(--dur-base) var(--ease-out);
}
.partner-item:hover { opacity: 1; }
.partner-item img {
max-height: 56px;
max-width: 140px;
object-fit: contain;
filter: grayscale(0.4);
}
.partner-fallback {
font-weight: 600;
color: var(--fg-muted);
white-space: nowrap;
}
@keyframes partners-scroll {
0% { transform: translateX(0); }
100% { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
.hero-partners-track { animation: none; }
.reveal { opacity: 1; transform: none; }
}
/* =================== Reveal-on-scroll =================== */
.reveal {
opacity: 0;
transform: translateY(20px);
transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out);
}
.reveal.is-visible {
opacity: 1;
transform: translateY(0);
}
/* =================== Sub-paginas (site.php) =================== */
.site-page {
padding: var(--s-12) var(--s-6) var(--s-16);
max-width: 920px;
margin: 0 auto;
}
.site-page h1 {
font-family: var(--font-marketing);
font-weight: 800;
font-size: clamp(var(--text-2xl), 5vw, var(--text-3xl));
line-height: var(--leading-tight);
margin: 0 0 var(--s-3);
}
.site-page h2 {
font-family: var(--font-marketing);
font-weight: 700;
font-size: var(--text-xl);
margin: var(--s-8) 0 var(--s-3);
}
.site-page p {
font-size: var(--text-md);
line-height: var(--leading-loose);
color: var(--fg-muted);
margin: 0 0 var(--s-4);
}
.site-page ul {
margin: 0 0 var(--s-5) var(--s-5);
padding: 0;
color: var(--fg-muted);
line-height: var(--leading-loose);
}
.site-page-eyebrow {
color: var(--primary);
font-size: var(--text-xs);
font-weight: 600;
letter-spacing: var(--tracking-allcaps);
text-transform: uppercase;
margin-bottom: var(--s-3);
}
/* =================== RESPONSIVE =================== */
@media (max-width: 980px) {
.landing-hero { padding: 64px 24px 56px; }
.landing-hero-grid { grid-template-columns: 1fr; gap: 40px; }
.landing-hero-copy { text-align: center; }
.landing-hero-lead { margin-left: auto; margin-right: auto; }
.landing-hero-ctas { justify-content: center; }
.landing-hero-mock {
transform: none;
max-width: 540px;
margin: 0 auto;
}
.landing-section,
.landing-inside,
.landing-diff { padding: 64px 24px; }
.stack,
.about,
.cta-band {
grid-template-columns: 1fr;
gap: 32px;
padding: 32px;
}
.pillars { grid-template-columns: 1fr; }
.prods-bento .bento { grid-template-columns: 1fr; }
.prods-bento .b-wide,
.prods-bento .b-card:nth-child(2),
.prods-bento .b-card:nth-child(3),
.prods-bento .b-card:nth-child(n+4) { grid-column: 1; }
.landing-footer-cols { grid-template-columns: 1fr 1fr; gap: 32px; }
.landing-trust-grid { grid-template-columns: repeat(2, 1fr); }
.landing-inside-grid { grid-template-columns: 1fr; }
.landing-diff-grid { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
.landing-footer-cols { grid-template-columns: 1fr; }
.cta-form .row2 { grid-template-columns: 1fr; }
.landing-trust-grid { grid-template-columns: 1fr; }
}
/* =============================================================
COMPAT — sub-paginas (site.php) reusam markup antigo:
contato-form.php, cta-duplo.php, apresentacao.php, partners-carousel.php,
produtos-grid.php, servicos-cards.php. Manter classes pra nao quebrar.
Reescrita scopeada apenas na landing principal (`/`).
============================================================= */
.landing-container {
max-width: 1200px;
margin: 0 auto;
padding: 0 var(--s-6);
width: 100%;
box-sizing: border-box;
}
.landing-section-tight { padding: var(--s-12) var(--s-6); }
.landing-section-header {
text-align: center;
max-width: 760px;
margin: 0 auto var(--s-12);
}
.landing-section-eyebrow {
color: var(--primary);
font-size: var(--text-xs);
font-weight: 600;
letter-spacing: var(--tracking-allcaps);
text-transform: uppercase;
margin-bottom: var(--s-2);
}
.landing-section-title {
font-family: var(--font-marketing);
font-weight: 700;
font-size: clamp(var(--text-2xl), 4vw, var(--text-3xl));
line-height: var(--leading-tight);
margin: 0 0 var(--s-3);
color: var(--fg);
}
.landing-section-sub {
color: var(--fg-muted);
font-size: var(--text-md);
line-height: var(--leading-snug);
}
/* Landing buttons compat (header anterior usava landing-btn-secondary com border-fg) */
.landing-btn-secondary { /* sub-paginas usam variante mais discreta */
background: transparent;
color: var(--fg);
border-color: var(--border-strong);
}
.landing-btn-secondary:hover {
border-color: var(--fg);
background: transparent;
}
/* Servico cards (3-col) — usado em pages/contato.php e site.php landing antiga */
.servicos-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--s-5);
}
@media (max-width: 880px) { .servicos-grid { grid-template-columns: 1fr; } }
.servico-card {
padding: var(--s-6);
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: var(--radius-md);
display: flex;
flex-direction: column;
gap: var(--s-3);
}
.servico-card-icon {
width: 48px;
height: 48px;
display: flex;
align-items: center;
justify-content: center;
background: var(--primary-soft);
color: var(--primary);
border-radius: var(--radius-sm);
}
.servico-card-icon .ico { width: 26px; height: 26px; }
.produto-card-title {
font-size: var(--text-lg);
font-weight: 700;
margin: 0;
color: var(--fg);
}
.produto-card-desc {
color: var(--fg-muted);
font-size: var(--text-sm);
line-height: var(--leading-snug);
margin: 0;
}
/* Apresentacao (video YouTube) */
.apresentacao-frame {
position: relative;
aspect-ratio: 16 / 9;
border-radius: var(--radius-lg);
overflow: hidden;
border: 1px solid var(--border);
background: var(--bg-accent);
box-shadow: var(--shadow-lg);
}
.apresentacao-frame iframe {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
border: 0;
}
/* CTA duplo (cta-duplo.php) */
.cta-block {
text-align: center;
padding: var(--s-12) var(--s-6);
background: linear-gradient(135deg, var(--primary-soft) 0%, var(--brand-sky-soft) 100%);
border-radius: var(--radius-lg);
margin: var(--s-8) auto;
max-width: 1200px;
}
/* Contato form (sub-pagina /contato) — partial contato-form.php */
.contato-form {
max-width: 640px;
margin: 0 auto;
display: grid;
gap: var(--s-3);
}
.contato-form-row {
display: grid;
gap: var(--s-3);
grid-template-columns: 1fr 1fr;
}
@media (max-width: 600px) { .contato-form-row { grid-template-columns: 1fr; } }
.contato-form label {
font-size: var(--text-sm);
font-weight: 500;
color: var(--fg-muted);
display: block;
margin-bottom: var(--s-1);
}
.contato-form input,
.contato-form textarea {
width: 100%;
padding: var(--s-3) var(--s-4);
border: 1px solid var(--border-strong);
border-radius: var(--radius-sm);
background: var(--bg-card);
color: var(--fg);
font-family: inherit;
font-size: var(--text-base);
box-sizing: border-box;
transition: border-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.contato-form textarea {
min-height: 120px;
resize: vertical;
}
.contato-form input:focus,
.contato-form textarea:focus {
outline: 0;
border-color: var(--primary);
box-shadow: var(--ring-focus);
}
.contato-form-honeypot {
position: absolute;
left: -9999px;
width: 1px;
height: 1px;
opacity: 0;
pointer-events: none;
}
.contato-form-actions {
display: flex;
justify-content: flex-end;
margin-top: var(--s-2);
}
.contato-form-msg {
padding: var(--s-3) var(--s-4);
border-radius: var(--radius-sm);
font-size: var(--text-sm);
}
.contato-form-msg-ok { background: var(--status-success); color: var(--status-success-fg); }
.contato-form-msg-error { background: var(--status-error); color: var(--status-error-fg); }
/* Partners carousel — variant 'default' (usado em sub-paginas; variant 'hero' ja
coberto na sessao principal acima) */
.partners-carousel {
overflow: hidden;
padding: var(--s-6) 0;
/* mask precisa de cor solida — alpha eh o que importa */
mask-image: linear-gradient(90deg, transparent 0, #000 80px, #000 calc(100% - 80px), transparent 100%);
-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 80px, #000 calc(100% - 80px), transparent 100%);
}
.partners-track {
display: flex;
gap: var(--s-12);
width: max-content;
animation: partners-scroll 60s linear infinite;
}
.partners-track:hover { animation-play-state: paused; }
/* Produtos legacy grid (produtos-grid.php — sub-paginas /produtos /servicos) */
.produtos-shell {
max-width: 1280px;
margin: 0 auto;
}
.produtos-grid {
display: grid;
grid-template-columns: repeat(12, 1fr);
gap: 16px;
}
.produto-card {
position: relative;
display: flex;
gap: var(--s-5);
min-height: 100%;
overflow: hidden;
padding: 22px 24px;
border: 1px solid var(--border);
border-radius: 16px;
background: var(--bg-card);
box-shadow: none;
text-decoration: none;
color: var(--fg);
transition: border-color var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
.produto-card:hover {
border-color: var(--primary);
transform: translateY(-3px);
}
.produto-card-hero {
grid-column: span 6;
min-height: 364px;
}
.produto-card-stack,
.produto-card-compact {
grid-column: span 3;
flex-direction: column;
}
.produto-card-stack { min-height: 364px; }
.produto-card-compact { min-height: 300px; }
.produto-card-copy {
display: flex;
flex: 1;
flex-direction: column;
min-width: 0;
}
.produto-card-head {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 14px;
}
.produto-card-icon {
flex: 0 0 auto;
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
background: var(--brand-sky-soft);
color: var(--brand-sky-bright, var(--brand-sky));
border-radius: var(--radius-sm);
}
.produto-card-icon .ico { width: 22px; height: 22px; }
.produto-card-bullets {
list-style: none;
padding: 0;
margin: auto 0 0;
display: grid;
gap: 6px;
color: var(--fg-muted);
font-size: var(--text-sm);
}
.produto-card-bullets li::before {
content: "\2713";
color: var(--primary);
margin-right: 8px;
}
.produto-visual {
position: relative;
flex: 0 0 36%;
min-height: 168px;
align-self: stretch;
opacity: 0.34;
transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
.produto-card-stack .produto-visual,
.produto-card-compact .produto-visual {
flex-basis: auto;
min-height: 148px;
margin-top: auto;
}
.produto-card:hover .produto-visual {
opacity: 0.58;
transform: translateY(-2px);
}
.produto-visual-donut { display: flex; align-items: center; justify-content: center; }
.produto-donut {
position: relative;
width: 170px;
height: 170px;
border-radius: 50%;
background:
radial-gradient(circle at center, var(--bg-card) 0 48px, transparent 50px),
conic-gradient(var(--primary) var(--produto-progress), color-mix(in srgb, var(--primary) 16%, transparent) 0);
}
.produto-donut::before,
.produto-donut::after {
content: "";
position: absolute;
border-radius: var(--radius-pill);
background: color-mix(in srgb, var(--primary) 22%, transparent);
}
.produto-donut::before { top: 12px; left: 20px; width: 32px; height: 32px; }
.produto-donut::after { top: 38px; right: -4px; width: 42px; height: 42px; }
.produto-donut span {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
color: var(--fg);
font-size: 1.9rem;
font-weight: 700;
}
.produto-donut small {
margin-top: 2px;
color: var(--fg-muted);
font-size: var(--text-xs);
font-weight: 500;
}
.produto-donut-87 { --produto-progress: 313deg; }
.produto-donut-64 { --produto-progress: 230deg; }
.produto-visual-chart::before {
content: "";
position: absolute;
inset: 24px 14px 18px;
background: linear-gradient(180deg, transparent 0, color-mix(in srgb, var(--primary) 12%, transparent) 100%);
clip-path: polygon(6% 84%, 26% 72%, 40% 76%, 54% 54%, 70% 46%, 84% 24%, 94% 28%, 94% 100%, 6% 100%);
}
.produto-chart-line::before {
content: "";
position: absolute;
inset: 24px 18px 22px;
background: color-mix(in srgb, var(--primary) 42%, transparent);
clip-path: polygon(5% 83%, 24% 71%, 39% 75%, 54% 52%, 70% 44%, 84% 20%, 95% 25%, 95% 28%, 84% 23%, 70% 47%, 54% 55%, 39% 78%, 24% 74%, 5% 86%);
}
.produto-visual-bars {
display: flex;
align-items: end;
justify-content: center;
gap: 18px;
padding-bottom: 12px;
}
.produto-visual-bars span {
display: block;
width: 40px;
border-radius: 8px 8px 4px 4px;
background: color-mix(in srgb, var(--primary) 30%, transparent);
}
.produto-visual-bars span:nth-child(1) { height: 62px; }
.produto-visual-bars span:nth-child(2) { height: 92px; }
.produto-visual-bars span:nth-child(3) { height: 116px; }
.produto-visual-gauge { display: flex; align-items: end; justify-content: center; }
.produto-gauge {
position: relative;
width: 180px;
height: 104px;
border-top-left-radius: 180px;
border-top-right-radius: 180px;
border: 16px solid color-mix(in srgb, var(--primary) 14%, transparent);
border-bottom: 0;
}
.produto-gauge::before {
content: "";
position: absolute;
left: 50%;
bottom: -8px;
width: 6px;
height: 74px;
transform: translateX(-50%) rotate(36deg);
transform-origin: bottom center;
border-radius: var(--radius-pill);
background: color-mix(in srgb, var(--primary) 44%, transparent);
}
.produto-gauge::after {
content: "";
position: absolute;
left: 50%;
bottom: -8px;
width: 18px;
height: 18px;
margin-left: -9px;
border-radius: 50%;
background: color-mix(in srgb, var(--primary) 50%, transparent);
}
.produto-gauge span {
position: absolute;
left: 50%;
bottom: 10px;
transform: translateX(-50%);
color: var(--fg);
font-size: 1.8rem;
font-weight: 700;
}
.produto-visual-building { display: flex; align-items: end; justify-content: center; }
.produto-building-roof,
.produto-building-body,
.produto-building-door { position: absolute; }
.produto-building-roof {
bottom: 104px;
width: 132px;
height: 50px;
background: color-mix(in srgb, var(--primary) 18%, transparent);
clip-path: polygon(50% 0, 100% 100%, 0 100%);
}
.produto-building-body {
bottom: 14px;
width: 112px;
height: 112px;
border: 2px solid color-mix(in srgb, var(--primary) 28%, transparent);
border-radius: 6px;
}
.produto-building-door {
bottom: 14px;
width: 28px;
height: 36px;
border: 2px solid color-mix(in srgb, var(--primary) 22%, transparent);
border-bottom: 0;
border-top-left-radius: 16px;
border-top-right-radius: 16px;
}
.produto-visual-scale { display: flex; align-items: end; justify-content: center; }
.produto-scale-bar,
.produto-scale-post,
.produto-scale-base {
position: absolute;
background: color-mix(in srgb, var(--primary) 24%, transparent);
border-radius: var(--radius-pill);
}
.produto-scale-bar { bottom: 106px; width: 170px; height: 6px; }
.produto-scale-post { bottom: 18px; width: 10px; height: 110px; }
.produto-scale-base { bottom: 10px; width: 86px; height: 10px; }
.produto-visual-scale::before,
.produto-visual-scale::after {
content: "";
position: absolute;
bottom: 74px;
width: 44px;
height: 22px;
border: 2px solid color-mix(in srgb, var(--primary) 24%, transparent);
border-top: 0;
border-bottom-left-radius: 22px;
border-bottom-right-radius: 22px;
}
.produto-visual-scale::before { left: 34px; }
.produto-visual-scale::after { right: 34px; }
.produtos-tagline {
margin: var(--s-10) 0 0;
text-align: center;
font-size: clamp(1.4rem, 2.2vw, 2rem);
line-height: var(--leading-snug);
color: var(--fg-muted);
}
.produtos-tagline strong { color: var(--fg); }
@media (max-width: 880px) {
.produto-card-hero,
.produto-card-stack,
.produto-card-compact {
grid-column: span 12;
min-height: auto;
}
.produto-card { flex-direction: column; }
.produto-visual {
flex-basis: auto;
min-height: 140px;
}
}
/* Theme toggle (legacy nav) — sub-paginas podem ainda usar */
.landing-theme-toggle {
background: transparent;
border: 0;
color: var(--fg-muted);
cursor: pointer;
padding: var(--s-2);
display: inline-flex;
align-items: center;
border-radius: var(--radius-sm);
transition: color var(--dur-base) var(--ease-out), background var(--dur-base) var(--ease-out);
}
.landing-theme-toggle:hover {
color: var(--fg);
background: var(--bg-secondary);
}
.landing-theme-toggle .ico { width: 18px; height: 18px; }