/* ══════════════════════════════════════════════════════════════════════
Lumied — Design System compartilhado (páginas internas)
Direção "Papel Timbrado": tema CLARO QUENTE com ÂNCORAS ESCURAS
(cabeçalho, rodapé, bloco de CTA). Source Serif 4 no que é título,
Instrument Sans na interface, IBM Plex Mono só no dado numérico.
Carregar junto:
Os nomes de classe são os mesmos de antes de propósito: as páginas não
precisam mudar a marcação. Os aliases no fim do :root remapeiam os nomes
antigos (--void, --w, --teal…) para os tokens novos.
══════════════════════════════════════════════════════════════════════ */
:root{
/* superfícies */
--paper:#F6F4EE; --paper-2:#FFFFFF; --paper-3:#E9E5DA; --paper-4:#DCD7C9;
--navy:#0F1B2D; --navy-2:#172740;
/* texto sobre papel */
--ink-1:#17161A; --ink-2:#3F3D45; --ink-3:#5E5B66;
/* texto sobre navy */
--on-navy:#F4F1EA; --on-navy-2:#C5CBD6; --on-navy-3:#9AA3B2;
/* bordas */
--line:#DDD9CF; --line-2:#C6C1B5; --line-strong:#8A857A;
--line-navy:rgba(255,255,255,.12); --line-navy-2:rgba(255,255,255,.22);
/* primária: teal do logo, escurecido até AA */
--primary:#0B6E60; --primary-hover:#095A4F; --primary-soft:#DDF5EF; --primary-line:#A9D9CF;
--primary-on-navy:#3FE0C6; --on-primary:#FFFFFF; --primary-glow:none;
--focus:0 0 0 3px rgba(11,110,96,.35);
/* semânticas */
--ok:#15663F; --ok-soft:#E1F3E8; --ok-line:#9CD0B4;
--warn:#B34A00; --warn-soft:#FDEBDC; --warn-line:#F0BE8E;
--bad:#B3261E; --bad-soft:#FDECEA; --bad-line:#EFA9A3;
--ok-on-navy:#5EDDC3; --warn-on-navy:#F5C451; --bad-on-navy:#FF8A80;
/* a faixa do header: uma cor com intenção (o teal do logo), não um
degradê de quatro. As outras três cores viraram sistema, ver --acc-* */
--brand-stripe:#00D9BE;
--grad:var(--primary); --on-grad:#FFFFFF;
/* sombra neutra, sem cor */
--shadow-1:0 1px 2px rgba(23,22,26,.06),0 1px 3px rgba(23,22,26,.08);
--shadow-2:0 4px 16px -6px rgba(23,22,26,.14);
--radius-card:12px; --radius-btn:8px; --radius-chip:6px;
/* tipografia */
--serif:'Source Serif 4',Georgia,'Times New Roman',serif;
--sans:'Instrument Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
--mono:'IBM Plex Mono',ui-monospace,Consolas,'SF Mono',Menlo,monospace;
--fs-xs:.75rem; --fs-sm:.875rem; --fs-base:1rem; --fs-md:1.0625rem; --fs-lg:1.25rem;
--fs-xl:1.5rem;
--fs-2xl:clamp(1.9375rem,1.25rem + 2.9vw,2.875rem);
--fs-3xl:clamp(2.3125rem,1.55rem + 3.4vw,4.25rem);
--fs-4xl:clamp(2.75rem,1.6rem + 5.4vw,5rem);
--lh-tight:1.15; --lh-body:1.6; --lh-read:1.7; --track-h:-.015em;
--w-max:1180px;
/* ── SISTEMA DE ACENTO — as quatro cores do logo, cada uma com um papel ──
teal = AÇÃO o que a escola faz: botão, link, confirmação
azul = DADO o sistema falando: número, gráfico, integração, conciliação
violeta = GENTE pedagógico, família, portal, Lumi (IA)
laranja = RISCO dinheiro parado, prazo vencido, custo de não agir
Todos verificados em AA sobre papel e sobre branco (ver relatório). */
--acc-teal:#0B6E60; --acc-teal-2:#DDF5EF; --acc-teal-l:#A9D9CF; --acc-teal-nv:#3FE0C6;
--acc-blue:#0B5BD3; --acc-blue-2:#DCE9FF; --acc-blue-l:#A8C6F5; --acc-blue-nv:#7FB2FF;
--acc-violet:#6B21C8; --acc-violet-2:#EDE3FE; --acc-violet-l:#CBB0F0; --acc-violet-nv:#C9A6FF;
--acc-orange:#B34A00; --acc-orange-2:#FDEBDC; --acc-orange-l:#F0BE8E; --acc-orange-nv:#FFB067;
/* acento corrente — cada bloco redefine --acc e tudo dentro dele segue */
--acc:var(--acc-teal); --acc-2:var(--acc-teal-2); --acc-l:var(--acc-teal-l);
/* faixas de cor cheia: é isto que dá ritmo de seção, não 4% de luminância */
--band-navy:#0F1B2D; --band-teal:#08423A;
--on-band:#F4F1EA; --on-band-2:#C9E8E1; --on-band-3:#9FC7BF;
--line-band:rgba(255,255,255,.14); --line-band-2:rgba(255,255,255,.26);
/* ── aliases de compatibilidade: nomes antigos → tokens novos ── */
--void:var(--paper); --ink-900:var(--paper-2); --ink-800:var(--paper-3);
--ink-700:var(--paper-4); --ink-600:var(--line-2);
--w:var(--ink-1); --w-2:var(--ink-2); --w-3:var(--ink-3); --w-4:var(--ink-3);
--teal:var(--acc-teal); --blue:var(--acc-blue); --violet:var(--acc-violet);
--lift:var(--navy); --orange:var(--warn); --green:var(--ok); --red:var(--bad);
--bg-dark:var(--navy); --bg-dark-alt:var(--navy-2); --bg-light:var(--paper);
--bg-card-light:var(--paper-2);
--text-heading:var(--ink-1); --text-body:var(--ink-2); --text-muted:var(--ink-3);
--text-white:var(--on-navy); --text-white-muted:var(--on-navy-3);
--border-light:var(--line); --border-dark:var(--line-navy);
--primary-dark:var(--primary-hover); --primary-light:var(--primary-soft);
--gradient-primary:var(--primary); --gradient:var(--primary);
--gradient-hero:var(--paper); --gradient-warm:var(--warn);
--glass:var(--paper-2); --glass-border:var(--line); --surface:var(--paper-2);
--accent:var(--acc-orange); --accent-dark:var(--acc-orange);
--dark:var(--navy); --dark-2:var(--navy-2); --dark-3:var(--navy-2);
--text:var(--ink-1); --text-dark:var(--ink-1); --bg:var(--paper);
--bg2:var(--paper-3); --card:var(--paper-2); --border:var(--line); --muted:var(--ink-3);
--heading:var(--ink-1); --gold:#8A5A00; --silver:#5E5B66; --bronze:#8A4A1F;
--glow:var(--shadow-2);
}
/* ── âncoras escuras: os blocos que invertem o tema ─────────────────── */
.hd,.header,.ft,.footer,.end,.cta-section,.sticky,
.article-hero,.blog-hero,.cta{
--paper:var(--navy); --paper-2:var(--navy-2); --paper-3:var(--navy-2); --paper-4:var(--navy-2);
--ink-1:var(--on-navy); --ink-2:var(--on-navy-2); --ink-3:var(--on-navy-3);
--line:var(--line-navy); --line-2:var(--line-navy-2);
--primary:var(--primary-on-navy); --on-primary:var(--navy);
--primary-soft:rgba(63,224,198,.12);
--ok:var(--ok-on-navy); --warn:var(--warn-on-navy); --bad:var(--bad-on-navy);
--acc-teal:var(--acc-teal-nv); --acc-blue:var(--acc-blue-nv);
--acc-violet:var(--acc-violet-nv); --acc-orange:var(--acc-orange-nv);
--acc:var(--acc-teal-nv); --acc-2:rgba(63,224,198,.14); --acc-l:rgba(63,224,198,.42);
background:var(--navy); color:var(--ink-2);
}
/* ══ acento por bloco — troque a classe, todo o bloco muda de cor ══════ */
.acc-teal {--acc:var(--acc-teal); --acc-2:var(--acc-teal-2); --acc-l:var(--acc-teal-l)}
.acc-blue {--acc:var(--acc-blue); --acc-2:var(--acc-blue-2); --acc-l:var(--acc-blue-l)}
.acc-violet{--acc:var(--acc-violet);--acc-2:var(--acc-violet-2);--acc-l:var(--acc-violet-l)}
.acc-orange{--acc:var(--acc-orange);--acc-2:var(--acc-orange-2);--acc-l:var(--acc-orange-l)}
/* ══ faixas de cor cheia — o ritmo de seção ════════════════════════════
Papel e branco diferem 4%: ninguém vê a alternância. Estas faixas são
a alternância de verdade. Dentro delas todo token de superfície e de
texto se inverte, então o conteúdo herdado continua legível. */
.band-navy,.band-teal{
--paper-2:rgba(255,255,255,.06); --paper-3:rgba(255,255,255,.09); --paper-4:rgba(255,255,255,.12);
--line:var(--line-band); --line-2:var(--line-band-2); --line-strong:rgba(255,255,255,.4);
--acc-teal:var(--acc-teal-nv); --acc-blue:var(--acc-blue-nv);
--acc-violet:var(--acc-violet-nv); --acc-orange:var(--acc-orange-nv);
--acc:var(--acc-teal-nv); --acc-2:rgba(255,255,255,.09); --acc-l:rgba(255,255,255,.26);
--ok:var(--ok-on-navy); --warn:var(--warn-on-navy); --bad:var(--bad-on-navy);
--shadow-1:none; --shadow-2:none;
}
.band-navy{
--paper:var(--band-navy);
--ink-1:var(--on-navy); --ink-2:var(--on-navy-2); --ink-3:var(--on-navy-3);
--primary:var(--primary-on-navy); --on-primary:var(--navy); --primary-line:rgba(63,224,198,.42);
background:var(--band-navy); color:var(--ink-2);
}
.band-teal{
--paper:var(--band-teal);
--ink-1:var(--on-band); --ink-2:var(--on-band-2); --ink-3:var(--on-band-3);
--primary:var(--acc-teal-nv); --on-primary:var(--band-teal); --primary-line:rgba(63,224,198,.42);
background:var(--band-teal); color:var(--ink-2);
}
.band-navy h1,.band-navy h2,.band-navy h3,.band-teal h1,.band-teal h2,.band-teal h3{color:var(--ink-1)}
/* ══ régua de acento — 3px de cor cheia no topo de um bloco ═══════════ */
.rule-acc{border-top:3px solid var(--acc)}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;overflow-x:hidden;width:100%;background:var(--paper);-webkit-text-size-adjust:100%}
body{font-family:var(--sans);color:var(--ink-2);line-height:var(--lh-body);background:var(--paper);overflow-x:hidden;width:100%;font-size:16px;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit}
:focus-visible{outline:2px solid var(--primary);outline-offset:3px;border-radius:3px}
header,section,footer,.phero{position:relative;z-index:2}
/* reveal — visível por padrão; o JS da página só esconde se for animar.
REGRA DURA: o que está acima da dobra (header, .phero, .breadcrumb)
NUNCA é escondido. Era isto que deixava o topo em branco enquanto o
observer não rodava. Nada acima da dobra depende de JS para existir. */
.fade-up{opacity:1;transform:none;transition:opacity .5s cubic-bezier(.2,.8,.3,1),transform .5s cubic-bezier(.2,.8,.3,1)}
.js-anim .fade-up{opacity:0;transform:translateY(20px)}
.js-anim .fade-up.visible{opacity:1;transform:none}
.js-anim .header .fade-up,.js-anim .phero .fade-up,.js-anim .breadcrumb.fade-up,
.js-anim .article-hero .fade-up,.js-anim .blog-hero .fade-up{
opacity:1!important;transform:none!important;transition:none}
@media (prefers-reduced-motion:reduce){
html{scroll-behavior:auto}
.js-anim .fade-up{opacity:1;transform:none;transition:none}
}
/* ── cabeçalho ─────────────────────────────────────────────────────── */
.header{position:fixed;top:0;left:0;right:0;z-index:60;background:var(--navy);padding:0 30px;height:74px;display:flex;align-items:center;justify-content:space-between;transition:border-color .3s;border-bottom:1px solid var(--line);max-width:100vw}
/* a única faixa de marca do site */
.header::before{content:'';position:absolute;left:0;right:0;top:0;height:3px;background:var(--brand-stripe)}
.header.scrolled{background:var(--navy);border-bottom-color:var(--line-2)}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none}
.logo-icon{flex-shrink:0;height:30px;width:auto}
.nav{display:flex;align-items:center;gap:30px}
.nav a{color:var(--ink-2);text-decoration:none;font-size:14.5px;font-weight:500;transition:color .2s;white-space:nowrap}
.nav a:hover{color:var(--ink-1)}
/* o link-botão não pode herdar a cor do link do menu (especificidade) */
.nav a.nav-cta,.nav a.nav-cta:hover{color:var(--on-primary)}
.nav-cta{padding:11px 20px;background:var(--primary);border-radius:var(--radius-btn);font-weight:600;transition:background .2s,color .2s}
.nav a.nav-cta:hover{background:var(--primary-hover);color:var(--on-navy)}
.hamburger{display:none;background:var(--paper-3);border:1px solid var(--line-2);border-radius:var(--radius-btn);color:var(--ink-1);font-size:22px;cursor:pointer;padding:6px 10px}
@media(max-width:880px){
.header{padding:0 20px}
.nav{position:fixed;top:74px;left:0;right:0;flex-direction:column;align-items:stretch;gap:0;background:var(--navy);padding:8px 20px 20px;border-bottom:1px solid var(--line);transform:translateY(-130%);transition:transform .35s ease}
.nav.open{transform:translateY(0)}
.nav a{width:100%;padding:15px 0;font-size:15.5px;border-bottom:1px solid var(--line)}
.nav-cta{margin-top:16px;text-align:center;justify-content:center;border-bottom:0}
.hamburger{display:block}
}
/* ── botões ────────────────────────────────────────────────────────── */
.btn-primary{display:inline-flex;align-items:center;gap:9px;padding:15px 28px;background:var(--primary);color:var(--on-primary);border:1px solid transparent;border-radius:var(--radius-btn);font-family:var(--sans);font-size:15.5px;font-weight:600;cursor:pointer;transition:background .2s,color .2s;text-decoration:none}
.btn-primary:hover{background:var(--primary-hover);color:var(--on-navy)}
.btn-ghost{display:inline-flex;align-items:center;gap:9px;padding:15px 28px;background:var(--paper-3);color:var(--ink-1);border:1px solid var(--line-2);border-radius:var(--radius-btn);font-family:var(--sans);font-size:15.5px;font-weight:600;cursor:pointer;transition:background .2s,border-color .2s;text-decoration:none}
.btn-ghost:hover{background:var(--paper-4);border-color:var(--line-strong);color:var(--ink-1)}
/* ── layout ────────────────────────────────────────────────────────── */
.container{max-width:var(--w-max);margin:0 auto;width:100%;padding:0 30px}
.section{padding:104px 0}
/* §5c: invertem de propósito — a alternância continua, sem virar navy */
.section-light{background:var(--paper-2)}
.section-dark{background:var(--paper-3)}
.section + .section{border-top:1px solid var(--line)}
.section-header{max-width:760px;margin:0 auto 52px;text-align:center}
.section-badge{display:inline-flex;align-items:center;gap:10px;background:none;border:0;border-radius:0;padding:0;font:600 .8125rem var(--sans);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);margin-bottom:18px}
.section-badge-dark{background:none;color:var(--ink-3)}
.section-title{font-family:var(--serif);font-weight:600;font-size:var(--fs-2xl);line-height:var(--lh-tight);letter-spacing:var(--track-h);margin-bottom:18px;color:var(--ink-1)}
.section-title-light,.section-title-dark{color:var(--ink-1)}
.section-sub{font-size:var(--fs-md);line-height:var(--lh-read);color:var(--ink-2)}
.section-sub-light,.section-sub-dark{color:var(--ink-2)}
@media(max-width:700px){.section{padding:74px 0}.container{padding:0 20px}.header{padding:0 20px}}
/* ── hero das páginas internas ─────────────────────────────────────── */
.phero{padding:150px 30px 84px;background:var(--paper);border-bottom:3px solid var(--acc-teal)}
.phero-inner{max-width:900px;margin:0 auto;position:relative;z-index:2;text-align:center}
.eyebrow{font:600 .8125rem var(--sans);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);margin-bottom:18px;display:inline-flex;align-items:center;gap:10px}
.phero h1{font-family:var(--serif);font-weight:600;font-size:var(--fs-3xl);line-height:var(--lh-tight);letter-spacing:var(--track-h);margin-bottom:22px;color:var(--ink-1);-webkit-text-fill-color:currentColor;background:none}
.phero h1 em{font-style:normal;color:var(--primary)}
.phero p{font-size:var(--fs-md);color:var(--ink-2);line-height:var(--lh-read);max-width:640px;margin:0 auto 32px}
.phero-ctas{display:flex;gap:13px;justify-content:center;flex-wrap:wrap}
.breadcrumb{position:relative;z-index:2;max-width:900px;margin:0 auto 20px;font:600 .8125rem var(--sans);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);text-align:center}
.breadcrumb a{color:var(--ink-3);text-decoration:none}
.breadcrumb a:hover{color:var(--primary)}
@media(max-width:700px){.phero{padding:118px 20px 64px}}
/* ── superfície padrão dos cartões ─────────────────────────────────── */
.mod-card,.step,.faq-item,.dor,.dcard,.scard,.quote-card,.hl-strip,.frow-media,.cmp-wrap{
background:var(--paper-2);
border:1px solid var(--line);
box-shadow:var(--shadow-1);
}
/* módulos */
.mod-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;max-width:1120px;margin:0 auto}
.mod-card{border-radius:var(--radius-card);padding:28px 26px;transition:background .2s,border-color .2s}
.mod-card:hover{background:var(--paper-3);border-color:var(--line-2)}
/* o ícone do card não é emoji colorido: dessatura e recua para marca discreta */
.mod-ico{font:500 13px/1 var(--mono);color:var(--ink-3);letter-spacing:.04em;margin-bottom:12px}
.mod-card h3{font-family:var(--sans);font-size:17.5px;font-weight:600;letter-spacing:-.01em;color:var(--ink-1);margin-bottom:9px}
.mod-card p{font-size:14.5px;line-height:1.65;color:var(--ink-2)}
.section-dark .mod-card h3,.section-light .mod-card h3{color:var(--ink-1)}
.section-dark .mod-card p,.section-light .mod-card p{color:var(--ink-2)}
@media(max-width:920px){.mod-grid{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.mod-grid{grid-template-columns:1fr}}
/* linhas alternadas de feature */
.frow{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;max-width:1100px;margin:0 auto 72px}
.frow:last-child{margin-bottom:0}
.frow:nth-of-type(even) .frow-media{order:-1}
.frow-media{border-radius:var(--radius-card);overflow:hidden;padding:12px}
.section-light .frow-media{background:var(--paper-2);border-color:var(--line)}
.frow-media img{width:100%;border-radius:8px;display:block}
/* os mocks nasceram na paleta papel (assets/mock/*.svg): só precisam de
uma borda que os assente na página, como print de sistema real */
img[src*="/assets/mock/"]{border-radius:8px;border:1px solid var(--line)}
.frow .eyebrow{margin-bottom:12px}
.frow h3{font-family:var(--serif);font-weight:600;font-size:var(--fs-xl);line-height:var(--lh-tight);letter-spacing:var(--track-h);margin-bottom:16px;color:var(--ink-1)}
.section-dark .frow h3,.section-light .frow h3{color:var(--ink-1)}
.frow ul{list-style:none;padding:0}
.frow ul li{font-size:15.5px;line-height:1.65;padding:9px 0 9px 24px;position:relative;color:var(--ink-2);border-bottom:1px solid var(--line)}
.frow ul li:last-child{border-bottom:0}
.section-dark .frow ul li,.section-light .frow ul li{color:var(--ink-2)}
.frow ul li::before{content:'';position:absolute;left:0;top:19px;width:10px;height:1px;background:var(--primary)}
@media(max-width:768px){.frow{grid-template-columns:1fr;gap:28px;margin-bottom:52px}.frow:nth-of-type(even) .frow-media{order:0}}
/* faixa de destaque */
.hl-strip{max-width:1020px;margin:0 auto;border-radius:var(--radius-card);padding:44px 46px}
.hl-inner{max-width:1020px;margin:0 auto}
@media(max-width:600px){.hl-strip{padding:30px 24px}}
/* passos */
.steps{max-width:900px;margin:0 auto;display:grid;gap:16px}
.step{display:grid;grid-template-columns:52px 1fr;gap:20px;align-items:start;border-radius:var(--radius-card);padding:24px 26px}
.step-num{width:44px;height:44px;border-radius:50%;background:var(--primary);color:var(--on-primary);font-family:var(--mono);font-size:15px;font-weight:500;display:flex;align-items:center;justify-content:center}
.step h4{font-family:var(--sans);font-size:17.5px;font-weight:600;color:var(--ink-1);margin-bottom:6px;letter-spacing:-.01em}
.step p{font-size:15px;color:var(--ink-2);line-height:1.62}
/* dores (páginas de solução) */
.dor-grid,.dores-grid,.seg-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;max-width:1120px;margin:0 auto}
@media(max-width:920px){.dor-grid,.dores-grid,.seg-grid{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.dor-grid,.dores-grid,.seg-grid{grid-template-columns:1fr}}
.dor,.dcard,.scard{border-radius:var(--radius-card);padding:24px;border-left:2px solid var(--bad);transition:background .2s,border-color .2s}
.dor:hover,.dcard:hover,.scard:hover{background:var(--paper-3)}
.dor .q,.dcard .q,.scard .q{font:500 13px/1 var(--mono);color:var(--ink-3);letter-spacing:.04em;margin-bottom:10px;display:block}
.dor h3,.dcard h3,.scard h3{font-family:var(--sans);font-size:16.5px;font-weight:600;color:var(--ink-1);margin-bottom:8px;letter-spacing:-.01em}
.dor p,.dcard p,.scard p{font-size:14.5px;color:var(--ink-2);line-height:1.65}
.pain{color:var(--ink-2)}
.fix{color:var(--ink-1);font-weight:500}
.ic{color:var(--primary)}
/* navegação entre dores/segmentos */
.dores-nav,.seg-nav,.hero-chips{max-width:1080px;margin:0 auto;display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.dores-nav a,.seg-nav a,.hero-chips span,.hero-chips a{
font-family:var(--sans);font-size:13px;font-weight:500;color:var(--ink-2);background:var(--paper-3);
border:1px solid var(--line-2);border-radius:var(--radius-chip);padding:9px 16px;text-decoration:none;transition:border-color .2s,color .2s;
}
.dores-nav a:hover,.seg-nav a:hover,.hero-chips a:hover{border-color:var(--line-strong);color:var(--ink-1)}
/* citação */
.quote-card{max-width:840px;margin:0 auto;border-radius:var(--radius-card);border-left:2px solid var(--primary);padding:36px 40px}
.quote-card p{font-family:var(--serif);font-weight:600;font-style:normal;color:var(--ink-1);font-size:var(--fs-lg);line-height:1.45;letter-spacing:-.01em}
.quote-card cite{display:block;margin-top:18px;font-family:var(--sans);font-size:13px;color:var(--ink-3);font-weight:500;font-style:normal}
.intro-q{font-family:var(--serif);font-weight:600;font-size:var(--fs-xl);line-height:1.35;color:var(--ink-1);max-width:840px;margin:0 auto;text-align:center;letter-spacing:-.01em}
@media(max-width:600px){.quote-card{padding:26px 22px}.quote-card p{font-size:var(--fs-md)}}
/* comparativo */
.cmp-wrap{max-width:1000px;margin:0 auto;overflow-x:auto;border-radius:var(--radius-card)}
.cmp{width:100%;border-collapse:collapse;background:none;border:0;border-radius:var(--radius-card);overflow:hidden;font-size:14.5px;min-width:560px;max-width:none;margin:0}
.cmp table{width:100%;border-collapse:collapse}
.cmp th,.cmp td{padding:15px 18px;text-align:left;border-bottom:1px solid var(--line);vertical-align:top;color:var(--ink-2)}
.cmp thead th{background:var(--paper-3);color:var(--ink-1);font-family:var(--sans);font-size:.8125rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase}
.cmp thead th.l{background:var(--primary);color:var(--on-primary)}
.cmp td.bad,.cmp .bad{color:var(--bad)}
.cmp td.good,.cmp .good{color:var(--ok);font-weight:500}
.cmp td.yes{color:var(--ok);font-weight:500}
.cmp td.no{color:var(--ink-3)}
.cmp tbody tr:nth-child(even){background:var(--paper-3)}
.cmp tbody tr:last-child td{border-bottom:0}
.go{color:var(--ok)}
@media(max-width:600px){.cmp th,.cmp td{padding:12px 13px;font-size:13.5px}}
/* FAQ */
.faq,.faq-list{max-width:820px;margin:0 auto;display:flex;flex-direction:column;gap:0}
.faq details,.faq-item{border:0;border-bottom:1px solid var(--line);border-radius:0;padding:0;margin:0;background:none;box-shadow:none}
.faq details:first-child,.faq-item:first-child{border-top:1px solid var(--line)}
.faq summary,.faq-item summary{padding:22px 46px 22px 0;font-family:var(--serif);font-weight:600;color:var(--ink-1);cursor:pointer;list-style:none;font-size:var(--fs-md);position:relative;transition:color .2s}
.faq summary:hover,.faq-item summary:hover{color:var(--primary)}
.faq summary::-webkit-details-marker,.faq-item summary::-webkit-details-marker{display:none}
.faq summary::after,.faq-item summary::after{content:'+';position:absolute;right:4px;top:20px;float:none;font-family:var(--sans);font-size:20px;color:var(--primary);font-weight:400}
.faq details[open] summary::after,.faq-item[open] summary::after{content:'–'}
.faq details p,.faq-item p{padding:0 46px 24px 0;margin-top:0;color:var(--ink-2);font-size:var(--fs-base);line-height:var(--lh-read)}
.faq details p a,.faq-item p a{color:var(--primary);border-bottom:1px solid var(--primary-line);text-decoration:none}
@media(max-width:600px){.faq summary,.faq-item summary{font-size:var(--fs-base);padding-right:36px}.faq details p,.faq-item p{padding-right:16px}}
/* CTA — âncora navy */
.cta-section{padding:110px 30px;text-align:center;background:var(--navy);position:relative;border-top:1px solid var(--line)}
.cta-section > *{position:relative;z-index:2}
.cta-section h2{font-family:var(--serif);font-weight:600;font-size:var(--fs-2xl);line-height:var(--lh-tight);letter-spacing:var(--track-h);color:var(--ink-1);margin-bottom:18px}
.cta-section p{color:var(--ink-2);font-size:var(--fs-md);margin:0 auto 32px;max-width:580px;line-height:var(--lh-read)}
@media(max-width:700px){.cta-section{padding:80px 20px}}
/* rodapé — âncora navy */
.footer{background:var(--navy);border-top:1px solid var(--line);padding:64px 30px 32px}
.footer-grid{max-width:var(--w-max);margin:0 auto 40px;display:grid;grid-template-columns:1.7fr 1fr 1fr 1fr 1fr;gap:32px}
.footer-brand p{color:var(--ink-3);font-size:14.5px;line-height:1.65;margin-top:16px;max-width:32ch}
.footer h4{font:600 .8125rem var(--sans);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);margin-bottom:18px}
.footer a{display:block;color:var(--ink-2);text-decoration:none;font-size:13.5px;padding:0 0 12px;transition:color .2s}
.footer a:hover{color:var(--ink-1)}
.footer-bottom{max-width:var(--w-max);margin:0 auto;padding-top:26px;border-top:1px solid var(--line);display:flex;justify-content:space-between;font-family:var(--sans);color:var(--ink-3);font-size:12.5px;flex-wrap:wrap;gap:10px}
@media(max-width:880px){.footer-grid{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.footer-grid{grid-template-columns:1fr}.footer{padding:52px 20px 28px}}
/* vídeo */
.vshow{max-width:980px;margin:0 auto}
.vframe{position:relative;border-radius:var(--radius-card);overflow:hidden;border:1px solid var(--line);background:#000;box-shadow:var(--shadow-1)}
.vframe video{width:100%;display:block}
.vcap{text-align:center;font-family:var(--sans);font-size:13px;color:var(--ink-3);margin-top:16px}
.section-light .vcap,.section-dark .vcap{color:var(--ink-3)}
/* WhatsApp flutuante */
.whatsapp-float{position:fixed;bottom:24px;right:24px;z-index:58}
.wa-btn{width:56px;height:56px;border-radius:50%;background:#25D366;display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow-2);transition:transform .2s}
.wa-btn:hover{transform:scale(1.07)}
.wa-btn svg{width:28px;height:28px;fill:#fff}
/* ══════════════════════════════════════════════════════════════════════
CAMADA DE COR — páginas internas (as 187 que herdam esta folha)
Mesmas quatro cores da home, mesmo critério: cor onde há significado.
══════════════════════════════════════════════════════════════════════ */
/* a etiqueta institucional ganha o traço da cor do bloco */
.eyebrow::before,.section-badge::before,.frow .eyebrow::before{
content:'';display:inline-block;flex:0 0 auto;width:22px;height:3px;background:var(--acc)
}
/* grade de módulos: as frentes do produto não são a mesma coisa —
a cor faz a leitura em diagonal funcionar */
.mod-grid .mod-card{border-top:3px solid var(--acc)}
.mod-grid .mod-card:nth-child(4n+1){--acc:var(--acc-teal)}
.mod-grid .mod-card:nth-child(4n+2){--acc:var(--acc-blue)}
.mod-grid .mod-card:nth-child(4n+3){--acc:var(--acc-violet)}
.mod-grid .mod-card:nth-child(4n+4){--acc:var(--acc-orange)}
.mod-ico{color:var(--acc);font-weight:500}
/* linhas de feature: o marcador segue a cor do bloco */
.frow:nth-of-type(4n+1){--acc:var(--acc-teal)}
.frow:nth-of-type(4n+2){--acc:var(--acc-blue)}
.frow:nth-of-type(4n+3){--acc:var(--acc-violet)}
.frow:nth-of-type(4n+4){--acc:var(--acc-orange)}
.frow ul li::before{background:var(--acc)}
/* faixa de destaque: era papel sobre papel, vira bloco navy de verdade.
Redefine também --bg-card-light e --border-light porque as páginas
trazem esses dois no style inline do próprio .hl-strip. */
.hl-strip{
--paper:var(--band-navy); --paper-2:var(--band-navy); --paper-3:rgba(255,255,255,.07);
--bg-card-light:var(--band-navy); --border-light:var(--line-band);
--ink-1:var(--on-navy); --ink-2:var(--on-navy-2); --ink-3:var(--on-navy-3);
--line:var(--line-band); --line-2:var(--line-band-2);
--primary:var(--primary-on-navy); --on-primary:var(--navy);
--acc:var(--acc-teal-nv);
background:var(--band-navy); border-color:var(--line-band);
color:var(--on-navy-2); box-shadow:none
}
.hl-strip .section-title,.hl-strip .section-title-light,.hl-strip h2,.hl-strip h3{color:var(--on-navy)}
.hl-strip .section-sub,.hl-strip .section-sub-light,.hl-strip p{color:var(--on-navy-2)}
.hl-strip .btn-ghost{background:rgba(255,255,255,.1);color:var(--on-navy);border-color:var(--line-band-2)}
/* citação: bloco teal cheio e tipo maior — é o momento humano da página */
.quote-card{
--paper-2:var(--band-teal); --paper-3:rgba(255,255,255,.08);
--ink-1:var(--on-band); --ink-2:var(--on-band-2); --ink-3:var(--on-band-3);
--line:var(--line-band); --primary:var(--acc-teal-nv);
background:var(--band-teal); border:0; border-left:0;
color:var(--on-band-2); box-shadow:none; padding:44px 46px
}
.quote-card p{color:var(--on-band);font-size:var(--fs-xl);line-height:1.35}
.quote-card cite{color:var(--on-band-3)}
@media(max-width:600px){.quote-card{padding:30px 24px}.quote-card p{font-size:var(--fs-md)}}
/* dores: a pergunta que dói é laranja, não cinza */
.dor,.dcard,.scard{border-left:3px solid var(--acc-orange)}
.dor .q,.dcard .q,.scard .q{color:var(--acc-orange)}
.fix{color:var(--ok)}
/* comparativo: sim/não com peso de cor */
.cmp td.yes,.cmp td.good,.cmp .good,.go{color:var(--ok);font-weight:600}
.cmp td.bad,.cmp .bad{color:var(--bad);font-weight:600}
.cmp thead th.l{background:var(--primary);color:var(--on-primary)}
/* passos: a numeração vira a régua de cor */
.steps .step:nth-child(4n+1){--acc:var(--acc-teal)}
.steps .step:nth-child(4n+2){--acc:var(--acc-blue)}
.steps .step:nth-child(4n+3){--acc:var(--acc-violet)}
.steps .step:nth-child(4n+4){--acc:var(--acc-orange)}
.step-num{background:var(--acc)}
/* chips de navegação: o traço de cor devolve a marca à barra de filtros */
.dores-nav a,.seg-nav a,.hero-chips a,.hero-chips span{border-left:3px solid var(--acc-teal-l)}
.dores-nav a:hover,.seg-nav a:hover,.hero-chips a:hover{border-left-color:var(--acc-teal)}