/* ══════════════════════════════════════════════════════════════════════
Lumied — folha das páginas de comparativo (/vs/*)
Direção "Papel Timbrado": mesma linguagem da home e do lumied.css.
O topo (`header` sem classe), o `.cta` e o `footer` são âncoras navy;
o resto é papel.
Carregar junto:
══════════════════════════════════════════════════════════════════════ */
: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: aqui o topo é `header` sem classe, o CTA é `.cta`
e o rodapé é `footer` sem classe ──────────────────────────────── */
.hd,.header,header,.ft,.footer,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)}
*{margin:0;padding:0;box-sizing:border-box}
html{background:var(--paper);scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:var(--sans);color:var(--ink-2);background:var(--paper);line-height:var(--lh-body);overflow-x:hidden;-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{position:relative;z-index:2}
.container{max-width:var(--w-max);margin:0 auto;padding:0 30px}
/* ── topo — âncora navy ────────────────────────────────────────────── */
header{background:var(--navy);color:var(--ink-1);padding:120px 0 76px;text-align:center}
/* 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 > *{position:relative;z-index:2}
header .container{position:relative;z-index:2}
header 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:20px;color:var(--ink-1)}
header p{font-size:var(--fs-md);line-height:var(--lh-read);color:var(--ink-2);max-width:780px;margin:0 auto}
.breadcrumb{font:600 .8125rem var(--sans);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);margin-bottom:26px}
.breadcrumb a{color:var(--ink-3);text-decoration:none}
.breadcrumb a:hover{color:var(--primary)}
section{padding:88px 0}
section + section{border-top:1px solid var(--line)}
h2{font-family:var(--serif);font-weight:600;font-size:var(--fs-2xl);line-height:var(--lh-tight);letter-spacing:var(--track-h);margin-bottom:14px;color:var(--ink-1)}
h3{font-family:var(--sans);font-weight:600;color:var(--ink-1);letter-spacing:-.01em}
p{color:var(--ink-2)}
.sub{color:var(--ink-3);margin-bottom:36px;font-size:var(--fs-md);line-height:var(--lh-body)}
/* ── tabela comparativa ────────────────────────────────────────────── */
table{width:100%;border-collapse:collapse;background:var(--paper-2);border:1px solid var(--line);border-radius:var(--radius-card);overflow:hidden;font-size:14.5px}
th,td{padding:15px 17px;text-align:left;border-bottom:1px solid var(--line);color:var(--ink-2)}
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}
th.lumied{background:var(--primary);color:var(--on-primary)}
th.comp{background:var(--paper-3);color:var(--ink-2)}
td.check{color:var(--ok);font-weight:600;text-align:center}
td.cross{color:var(--bad);font-weight:600;text-align:center}
td.extra{color:var(--warn);font-weight:500;text-align:center;font-size:12.5px}
tr:nth-child(even){background:var(--paper-3)}
tbody tr:last-child td{border-bottom:0}
@media(max-width:640px){th,td{padding:12px 12px;font-size:13.5px}}
/* ── comparativo de preço ──────────────────────────────────────────── */
.pricing-comp{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px;margin-top:36px}
.price-card{background:var(--paper-2);border:1px solid var(--line);padding:30px 26px;border-radius:var(--radius-card);box-shadow:var(--shadow-1)}
/* §5d: bloco tingido — fundo primary-soft, texto continua ink */
.price-card.lumied{border-color:var(--primary-line);background:var(--primary-soft)}
.price-card h3{font-size:19px;margin-bottom:8px}
.price-card .price{font-family:var(--sans);font-size:34px;font-weight:600;letter-spacing:-.03em;color:var(--ink-1);margin:14px 0;font-variant-numeric:tabular-nums}
.price-card.comp .price{color:var(--ink-2)}
.price-card .price span,.price-card .price small{color:var(--ink-2);font-size:15px;font-weight:500}
.price-card ul{list-style:none;font-size:13.5px;color:var(--ink-2)}
.price-card li{padding:6px 0;border-bottom:1px solid var(--line)}
.price-card li:last-child{border-bottom:0}
/* ── comparativo de pilha (classapp) ───────────────────────────────── */
.stack-comp{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px;margin-top:36px}
.stack-col{background:var(--paper-2);border:1px solid var(--line);border-radius:var(--radius-card);padding:28px 26px;box-shadow:var(--shadow-1)}
/* §5d */
.stack-col.lumied{border-color:var(--primary-line);background:var(--primary-soft)}
.stack-col h3{font-size:18px;margin-bottom:16px}
.stack-item{display:flex;justify-content:space-between;gap:12px;padding:11px 0;border-bottom:1px solid var(--line);font-size:14px;color:var(--ink-2)}
.stack-item:last-child{border-bottom:0}
.stack-total{margin-top:16px;padding-top:16px;border-top:1px solid var(--line-2);font-family:var(--sans);font-size:22px;font-weight:600;letter-spacing:-.02em;color:var(--ink-1);font-variant-numeric:tabular-nums}
.stack-total.lumied{color:var(--ink-1)}
/* ── hub /vs/ ──────────────────────────────────────────────────────── */
.comparisons{padding:88px 0}
.comp-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px}
.comp-card{background:var(--paper-2);border:1px solid var(--line);border-radius:var(--radius-card);padding:30px 28px;box-shadow:var(--shadow-1);transition:background .2s,border-color .2s;text-decoration:none;display:block}
.comp-card:hover{background:var(--paper-3);border-color:var(--line-2)}
.comp-card h2{font-family:var(--sans);font-weight:600;font-size:22px;letter-spacing:-.015em;margin-bottom:10px;color:var(--ink-1)}
.comp-card p{font-size:14.5px;color:var(--ink-2);line-height:1.65}
/* o ícone do card não é emoji colorido: dessatura e recua para marca discreta */
.comp-icon{font:500 13px/1 var(--mono);color:var(--ink-3);letter-spacing:.04em;margin-bottom:12px}
.comp-highlights{list-style:none;margin-top:18px}
.comp-highlights li{font-size:13.5px;color:var(--ink-2);padding:7px 0 7px 22px;position:relative;border-bottom:1px solid var(--line)}
.comp-highlights li:last-child{border-bottom:0}
.comp-highlights li::before{content:'';position:absolute;left:0;top:16px;width:10px;height:1px;background:var(--primary)}
.comp-link{display:inline-block;margin-top:18px;font-family:var(--sans);font-size:13.5px;font-weight:600;color:var(--primary);text-decoration:none;border-bottom:1px solid var(--primary-line);padding-bottom:3px}
.comp-link:hover{color:var(--primary-hover);border-color:var(--primary-hover)}
.summary{background:var(--paper-2);border:1px solid var(--line);border-radius:var(--radius-card);padding:48px 44px;text-align:center;margin:48px 0;box-shadow:var(--shadow-1)}
.summary h2{color:var(--ink-1)}
.summary p{color:var(--ink-2);font-size:var(--fs-md);margin-bottom:26px;max-width:640px;margin-left:auto;margin-right:auto}
/* ── CTA / botões / veredito — .cta é âncora navy ──────────────────── */
.cta{background:var(--navy);border:1px solid var(--line);color:var(--ink-1);padding:68px 30px;text-align:center;border-radius:var(--radius-card);margin:52px 0;position:relative}
.cta > *{position:relative;z-index:2}
.cta h2{color:var(--ink-1)}
.cta p{color:var(--ink-2);margin-bottom:28px;font-size:var(--fs-md)}
.btn{display:inline-block;padding:15px 32px;background:var(--primary);color:var(--on-primary);text-decoration:none;border-radius:var(--radius-btn);font-family:var(--sans);font-weight:600;font-size:15.5px;margin:6px;transition:background .2s,color .2s}
.btn:hover{background:var(--primary-hover);color:var(--on-navy)}
.summary .btn:hover{color:var(--on-navy)}
.verdict{background:var(--warn-soft);border:1px solid var(--warn-line);border-left:2px solid var(--warn);padding:22px 24px;border-radius:var(--radius-card);margin:28px 0;color:var(--ink-2);font-size:var(--fs-base);line-height:1.65}
.verdict strong{color:var(--warn)}
/* ── cartões e formulários (usados por /demo/ e /roi/) ─────────────── */
.card,.calc-card,.fallback-form,.calendly-wrap,.what-to-expect,.proof-card,
.result-box,.capture-form,.tier-detail,.assumptions{
background:var(--paper-2);
border:1px solid var(--line);border-radius:var(--radius-card);
box-shadow:var(--shadow-1);
}
/* §5b: input NUNCA sobre navy. Dentro de `.cta` o formulário vira card branco. */
.cta .capture-form,.cta .fallback-form,.cta .card,.cta .calc-card,.cta .result-box{
--paper-2:#FFFFFF;--ink-1:#17161A;--ink-2:#3F3D45;--ink-3:#5E5B66;--line:#DDD9CF;
--line-2:#8A857A;--primary:#0B6E60;--on-primary:#FFFFFF;
background:var(--paper-2);color:var(--ink-2);text-align:left
}
.field{margin-bottom:14px}
.field label{display:block;font:600 .8125rem var(--sans);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);margin-bottom:8px}
.field label b{color:var(--ink-1)}
.field input,.field select,.field textarea{
width:100%;padding:13px 16px;border:1px solid var(--line-strong);border-radius:var(--radius-btn);
font-size:15px;font-family:var(--sans);background:var(--paper-2);color:var(--ink-1);
}
.field input::placeholder,.field textarea::placeholder{color:var(--ink-3)}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--primary);box-shadow:var(--focus)}
.field select option{background:var(--paper-2);color:var(--ink-1)}
.field textarea{resize:vertical;min-height:90px}
.field small{display:block;font-family:var(--sans);font-size:12.5px;color:var(--ink-3);margin-top:6px}
.btn-main,.btn-calc{
width:100%;padding:16px;background:var(--primary);color:var(--on-primary);border:0;border-radius:var(--radius-btn);
font-family:var(--sans);font-size:15.5px;font-weight:600;cursor:pointer;transition:background .2s,color .2s;
}
.btn-main:hover,.btn-calc:hover{background:var(--primary-hover);color:var(--on-navy)}
.btn-main:disabled,.btn-calc:disabled{opacity:.45;cursor:not-allowed}
.error{color:var(--bad);font-size:13px;margin-top:8px}
/* ── rodapé — âncora navy ──────────────────────────────────────────── */
footer{background:var(--navy);border-top:1px solid var(--line);color:var(--ink-3);padding:44px 30px;text-align:center;font-family:var(--sans);font-size:13px;line-height:2}
footer a{color:var(--ink-2);text-decoration:none}
footer a:hover{color:var(--ink-1)}
@media(max-width:700px){
header{padding:100px 0 60px}
section,.comparisons{padding:64px 0}
.container{padding:0 20px}
.cta{padding:48px 22px}
.summary{padding:34px 24px}
}
/* ══ CAMADA DE COR — páginas de comparativo ═══════════════════════════ */
.breadcrumb::before{content:'';display:inline-block;width:22px;height:3px;background:var(--acc-teal-nv);vertical-align:middle;margin-right:10px}
.comp-grid .comp-card{border-top:3px solid var(--acc)}
.comp-grid .comp-card:nth-child(3n+1){--acc:var(--acc-teal)}
.comp-grid .comp-card:nth-child(3n+2){--acc:var(--acc-blue)}
.comp-grid .comp-card:nth-child(3n+3){--acc:var(--acc-violet)}
.comp-icon{color:var(--acc);font-weight:500}
.comp-highlights li::before{background:var(--acc)}
/* a coluna do Lumied deixa de ser um bege levemente esverdeado */
.price-card.lumied,.stack-col.lumied{
--paper-2:var(--band-navy); --paper-3:rgba(255,255,255,.08);
--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);
background:var(--band-navy); border:0; color:var(--on-navy-2); box-shadow:none
}
.price-card.lumied h3,.stack-col.lumied h3,.price-card.lumied .price,.stack-total.lumied{color:var(--on-navy)}
.price-card.lumied .price span,.price-card.lumied .price small{color:var(--acc-teal-nv)}
.verdict strong{color:var(--warn)}
td.check{color:var(--ok)}
td.cross{color:var(--bad)}