/* =====================================================================
   FRONTAL: site institucional (index.html)
   Mesma identidade do sistema: cores por tema e fonte Figtree vêm de tokens.css
   (tema claro/escuro em [data-tema] no <html>, escolha salva em localStorage "frontal_tema").
   As "telas de exemplo" (.mk) imitam os componentes do sistema com dados fictícios.

   Escala (nada cresce só porque o monitor é grande; o que sobra de largura vira margem):
   - Texto: 12 (selos e telas de exemplo), 14 (apoio), 15-16 (corpo), 18 (destaque), 20 (título de cartão),
            26-34 (título de seção), 32-50 (título do início). Pesos: 400, 500, 600.
   - Espaço: 4, 8, 12, 16, 24, 32, 48, 64.   Raios: 8 (etiqueta), 10 (controle), 16 (cartão), 99 (pílula).
   - Controles: 40px (cabeçalho), 44px (botão), 48px (botão grande do início). Largura máxima do conteúdo: --max.
   ===================================================================== */

:root{
  --max:1440px;
  --topo-h:56px;
  --mk-sombra:0 24px 60px -28px rgba(0,0,0,.65),0 2px 6px rgba(0,0,0,.25);
  --glow:rgba(99,212,77,.11);
}
[data-tema="light"]{
  --mk-sombra:0 24px 50px -26px rgba(16,24,40,.30),0 2px 6px rgba(16,24,40,.06);
  --glow:rgba(99,212,77,.20);
}

/* ---------- Base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--topo-h) + 12px);-webkit-text-size-adjust:100%;background:var(--outer)}
html,body{margin:0}
body{background:var(--outer);color:var(--text);font-family:var(--font);font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4,p,ul,ol,figure{margin:0}
ul,ol{list-style:none;padding:0}
button{font:inherit;color:inherit}
b,strong{font-weight:600}
:where(a,button,summary,[tabindex]):focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.pular{position:absolute;left:12px;top:-60px;z-index:100;background:var(--accent);color:var(--accent-ink);padding:10px 14px;border-radius:var(--r-ctl);font-weight:600}
.pular:focus{top:12px}
.i{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex:none}
.i.fill{fill:currentColor;stroke:none}

/* Moldura do app (só em tela larga): painel arredondado sobre o fundo externo, como no sistema */
.pagina{background:var(--app);position:relative}
@media(min-width:960px){
  body{padding:24px}
  .pagina{border-radius:24px;overflow:clip}
}
.wrap{max-width:var(--max);margin:0 auto;padding:0 clamp(16px,3vw,48px)}

/* ---------- Botões ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:44px;padding:0 16px;border-radius:var(--r-ctl);border:1px solid var(--border);background:transparent;color:var(--text);font-weight:600;font-size:15px;line-height:1;cursor:pointer;white-space:nowrap;transition:filter .15s,background .15s,border-color .15s}
.btn.g{background:var(--card)}
.btn.p{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.btn.sm{height:40px;padding:0 14px;font-size:14px}
.btn.lg{height:48px;padding:0 20px;font-size:16px}
.btn .i{width:18px;height:18px}
@media(hover:hover){
  .btn:hover{background:var(--hover);border-color:var(--ring)}
  .btn.g:hover{background:var(--tile)}
  .btn.p:hover{background:var(--accent);border-color:var(--accent);filter:brightness(1.07)}
}
.ib{display:inline-grid;place-items:center;width:40px;height:40px;border-radius:var(--r-ctl);border:1px solid var(--border);background:var(--card);color:var(--text);cursor:pointer;flex:none}
.ib .i{width:19px;height:19px}
@media(hover:hover){.ib:hover{background:var(--tile);border-color:var(--ring)}}
.ib.tema .i-sol{display:block}.ib.tema .i-lua{display:none}
[data-tema="light"] .ib.tema .i-sol{display:none}[data-tema="light"] .ib.tema .i-lua{display:block}

/* ---------- Cabeçalho ---------- */
.top{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--app) 88%,transparent);-webkit-backdrop-filter:saturate(1.4) blur(14px);backdrop-filter:saturate(1.4) blur(14px);border-bottom:1px solid transparent;transition:border-color .2s}
.top.rolou{border-bottom-color:var(--rule)}
.top>.wrap{display:flex;align-items:center;gap:8px;height:var(--topo-h)}
.marca{display:flex;align-items:center;flex:none;border-radius:var(--r-tag)}
.marca img{width:104px;height:auto}
[data-tema="light"] .marca img{filter:brightness(0);opacity:.88} /* o logotipo é creme: no tema claro vira silhueta escura */
.menu-d{display:none;align-items:center;gap:4px;margin-left:24px}
.menu-d a{display:inline-flex;align-items:center;height:36px;padding:0 12px;border-radius:var(--r-ctl);color:var(--muted);font-size:15px;font-weight:500}
.menu-d a.on{color:var(--text);background:var(--green-bg)}
@media(hover:hover){.menu-d a:hover{color:var(--text);background:var(--hover)}.menu-d a.on:hover{background:var(--green-bg)}}
.acoes{margin-left:auto;display:flex;align-items:center;gap:8px}
.acoes .ent{display:none}
.burger{display:inline-grid}
.gaveta{position:absolute;left:0;right:0;top:100%;background:var(--app);border-bottom:1px solid var(--rule);box-shadow:0 18px 30px -18px rgba(0,0,0,.4);padding:4px 16px 16px}
.gaveta[hidden]{display:none}
.gaveta a:not(.btn){display:flex;align-items:center;height:48px;border-bottom:1px solid var(--rule);font-weight:500;font-size:16px}
.gaveta .btn{width:100%;margin-top:12px}
@media(max-width:359px){.acoes .btn.p{display:none}}
@media(min-width:900px){
  .menu-d{display:flex}
  .acoes .ent{display:inline-flex}
  .burger,.gaveta{display:none!important}
}

/* ---------- Seções ---------- */
.sec{padding:clamp(48px,5vw,80px) 0}
.sec.alt{background:var(--outer)}
.sup{margin-bottom:8px;color:var(--accent-text);font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase}
.sec-cab{margin-bottom:clamp(24px,2.5vw,40px);max-width:720px}
.sec-cab.c{margin-left:auto;margin-right:auto;text-align:center}
h2{font-size:clamp(26px,1.2vw + 20px,34px);font-weight:600;letter-spacing:-.03em;line-height:1.15}
.sec-cab p:not(.sup){margin-top:8px;color:var(--muted);font-size:clamp(16px,.2vw + 15px,18px)}
h2 em,h1 em{font-style:normal;color:var(--accent-text)}

/* ---------- Início ---------- */
.hero{position:relative;padding:32px 0 44px;background:radial-gradient(60% 55% at 85% -5%,var(--glow),transparent 72%),radial-gradient(40% 40% at 0% 30%,var(--glow),transparent 75%)}
.hero .wrap{display:grid;gap:32px;align-items:center}
@media(min-width:1000px){
  .hero{padding:clamp(40px,5vw,72px) 0 clamp(48px,5vw,80px)}
  .hero .wrap{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(32px,4vw,64px)}
}
.etq{display:inline-flex;align-items:center;gap:8px;height:30px;padding:0 12px 0 10px;border:1px solid var(--border);border-radius:99px;background:var(--card);color:var(--muted);font-size:14px;font-weight:500}
.etq i{width:7px;height:7px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 3px var(--green-bg)}
h1{margin-top:16px;font-size:clamp(32px,2vw + 22px,50px);font-weight:600;letter-spacing:-.035em;line-height:1.08}
.lead{margin-top:16px;max-width:46ch;color:var(--muted);font-size:clamp(16px,.3vw + 15px,18px);line-height:1.55}
.cta-linha{display:flex;flex-wrap:wrap;gap:8px;margin-top:24px}
@media(max-width:480px){.cta-linha .btn.lg{flex:1 1 auto;padding:0 12px;font-size:15px}.so-lg{display:none}}
.fatos{display:flex;flex-wrap:wrap;gap:8px 16px;margin-top:16px;color:var(--muted);font-size:14px}
.fatos li{display:inline-flex;align-items:center;gap:8px}
.fatos .i{width:16px;height:16px;color:var(--accent-text);stroke-width:2.3}
.mk-nota{margin-top:12px;color:var(--muted);font-size:14px;text-align:center}

/* ---------- Telas de exemplo (imitam o sistema) ---------- */
.mk{container-type:inline-size;background:var(--card);border:1px solid var(--border);border-radius:var(--r-card);box-shadow:var(--mk-sombra);overflow:hidden;font-size:13px;line-height:1.35;text-align:left;-webkit-user-select:none;user-select:none}
.mk-top{display:flex;align-items:center;gap:8px;min-height:48px;padding:8px 12px;border-bottom:1px solid var(--rule)}
.mk-top>div:first-child{min-width:0}
.mk-top b{display:block;font-size:14px;font-weight:600}
.mk-top small{display:block;color:var(--muted);font-size:12px;font-weight:400}
.mk-top .dir{margin-left:auto;display:flex;align-items:center;gap:8px;flex:none}
.mk-chip{display:inline-flex;align-items:center;gap:8px;height:28px;padding:0 10px;border:1px solid var(--border);border-radius:var(--r-tag);font-size:12px;font-weight:500;white-space:nowrap}
.mk-chip .i{width:14px;height:14px}
.mk-chip.sq{padding:0;width:28px;justify-content:center}
.mk-seg{display:inline-flex;padding:2px;gap:2px;border:1px solid var(--border);border-radius:var(--r-ctl);background:var(--field)}
.mk-seg span{display:inline-flex;align-items:center;height:24px;padding:0 10px;border-radius:var(--r-tag);color:var(--muted);font-size:12px;font-weight:500;white-space:nowrap}
.mk-seg span.on{background:var(--card);color:var(--text);font-weight:600;box-shadow:0 0 0 1px var(--border)}
.mk-corpo{display:grid;grid-template-columns:148px minmax(0,1fr)}
.mk-nav{display:flex;flex-direction:column;gap:2px;padding:8px;border-right:1px solid var(--rule)}
.mk-nl{display:flex;align-items:center;gap:8px;height:32px;padding:0 8px;border-radius:var(--r-tag);color:var(--muted);font-size:12px;font-weight:500;white-space:nowrap}
.mk-nl .i{width:15px;height:15px}
.mk-nl.on{background:var(--green-bg);color:var(--text);font-weight:600}
.mk-nl.on .i{color:var(--accent-text)}
.mk-main{display:grid;gap:12px;align-content:start;min-width:0;padding:12px}
@container (max-width:560px){.mk-corpo{grid-template-columns:minmax(0,1fr)}.mk-nav{display:none}}

/* indicadores (KPI): nome em cima; ícone, número e variação embaixo */
.mk-kpis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.kc{display:grid;gap:8px;align-content:start;min-width:0;padding:8px 12px 12px;border:1px solid var(--border);border-radius:var(--r-ctl)}
.kc>span{padding-top:4px;color:var(--muted);font-size:12px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kc>div{display:flex;align-items:center;flex-wrap:wrap;gap:4px 8px}
.kc .ic{display:grid;place-items:center;width:26px;height:26px;border-radius:var(--r-tag);flex:none}
.kc .ic .i{width:15px;height:15px}
.kc b{font-size:18px;font-weight:600;letter-spacing:-.02em;font-variant-numeric:tabular-nums;white-space:nowrap}
.kc .c{display:none}
@container (max-width:470px){.kc .ic{display:none}.kc b{font-size:16px}.kc .l{display:none}.kc .c{display:inline}}
@container (max-width:420px){.mk-chip.sq{display:none}}

.ic.gn,.av.gn{background:var(--green-bg);color:var(--green-fg)}
.ic.bl,.av.bl{background:var(--blue-bg);color:var(--blue-fg)}
.ic.vi,.av.vi{background:var(--vio-bg);color:var(--vio-fg)}
.ic.am,.av.am{background:var(--amber-bg);color:var(--amber-fg)}
.ic.tl,.av.tl{background:var(--teal-bg);color:var(--teal-fg)}
.ic.rd,.av.rd{background:var(--red-bg);color:var(--red-fg)}

.pill{display:inline-flex;align-items:center;gap:6px;height:22px;padding:0 8px;border-radius:var(--r-tag);font-size:12px;font-weight:500;white-space:nowrap}
.pill i{width:6px;height:6px;border-radius:50%;background:currentColor;flex:none}
.pill .i{width:12px;height:12px;stroke-width:2.4}
.pill.gn{background:var(--green-bg);color:var(--green-fg)}
.pill.bl{background:var(--blue-bg);color:var(--blue-fg)}
.pill.am{background:var(--amber-bg);color:var(--amber-fg)}
.pill.vi{background:var(--vio-bg);color:var(--vio-fg)}
.pill.tl{background:var(--teal-bg);color:var(--teal-fg)}
.pill.rd{background:var(--red-bg);color:var(--red-fg)}
.pill.gy{background:var(--gray-bg);color:var(--gray-fg)}

/* listas: cliente em negrito, negócio em cor mais clara na mesma linha */
.mk-lista{border:1px solid var(--border);border-radius:var(--r-ctl);overflow:hidden}
.mk-lh{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px 12px;border-bottom:1px solid var(--rule);font-size:13px;font-weight:600}
.mk-lh small{color:var(--muted);font-size:12px;font-weight:400}
.lr{display:grid;grid-template-columns:28px minmax(0,1fr) auto auto;align-items:center;gap:12px;padding:8px 12px;border-bottom:1px solid var(--rule)}
.lr:last-child{border-bottom:0}
.lr.sel{background:var(--hover)}
.av{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;font-size:11px;font-weight:600;flex:none}
.nm{display:flex;align-items:baseline;gap:8px;min-width:0}
.nm b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600}
.nm span{color:var(--muted);white-space:nowrap}
.vl{font-weight:500;font-variant-numeric:tabular-nums;white-space:nowrap}
@container (max-width:420px){.lr{grid-template-columns:28px minmax(0,1fr) auto}.lr .vl{display:none}.nm span{display:none}}
.mk-acoes{display:flex;flex-wrap:wrap;gap:8px;padding:12px;border-top:1px solid var(--rule)}
.mk-btn{display:inline-flex;align-items:center;gap:8px;height:30px;padding:0 12px;border:1px solid var(--border);border-radius:var(--r-tag);font-size:12px;font-weight:600;white-space:nowrap}
.mk-btn .i{width:14px;height:14px}
.mk-btn.p{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}

/* precificação */
.pr{padding:12px;display:grid;gap:12px}
.pr-bl{border:1px solid var(--border);border-radius:var(--r-ctl);overflow:hidden}
.pr-l{display:flex;justify-content:space-between;gap:12px;padding:8px 12px;border-bottom:1px solid var(--rule)}
.pr-l:last-child{border-bottom:0}
.pr-l span{color:var(--muted)}
.pr-l b{font-weight:500;font-variant-numeric:tabular-nums;white-space:nowrap}
.pr-res{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.pr-res>div{padding:8px 12px 12px;border:1px solid var(--border);border-radius:var(--r-ctl);min-width:0}
.pr-res small{display:block;color:var(--muted);font-size:12px}
.pr-res b{display:block;margin-top:4px;font-size:16px;font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}
.pr-res .fim{background:var(--green-bg);border-color:transparent}
.pr-res .fim b{color:var(--green-fg);font-size:18px}
.pr-res .fim small{color:var(--green-fg)}
@container (max-width:440px){.pr-res{grid-template-columns:1fr 1fr}.pr-res .fim{grid-column:1/-1}}

/* funil de vendas */
.fn{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(130px,1fr);gap:8px;padding:12px;overflow-x:auto;overscroll-behavior-x:contain}
.fn-c{display:flex;flex-direction:column;gap:8px;padding:8px;border-radius:var(--r-ctl);background:var(--field);border:1px solid var(--rule);min-width:0}
.fn-c h4{display:flex;align-items:flex-start;justify-content:space-between;gap:8px;min-height:34px;padding:0 0 0 4px;font-size:12px;font-weight:600;line-height:1.3}
.fn-c h4 em{font-style:normal;flex:none;min-width:20px;height:20px;padding:0 6px;display:grid;place-items:center;border-radius:var(--r-tag);background:var(--tile);color:var(--muted);font-size:12px;font-weight:600}
.fn-k{display:grid;gap:4px;padding:8px 12px;border:1px solid var(--border);border-radius:var(--r-ctl);background:var(--card)}
.fn-k b{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fn-k span{color:var(--muted);font-size:12px}
.fn-k .v{color:var(--text);font-size:12px;font-weight:600;font-variant-numeric:tabular-nums}

/* tarefas */
.tk{display:grid;grid-template-columns:20px minmax(0,1fr) auto auto;align-items:center;gap:12px;padding:12px;border-bottom:1px solid var(--rule)}
.tk:last-child{border-bottom:0}
.tk .ck{width:18px;height:18px;border:1.7px solid var(--ring);border-radius:50%;display:grid;place-items:center}
.tk .ck.ok{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.tk .ck .i{width:11px;height:11px;stroke-width:3}
.tk.feita .nm b{color:var(--muted);text-decoration:line-through}
.subs{display:grid;gap:8px;padding:0 12px 12px 44px;border-bottom:1px solid var(--rule)}
.sub-i{display:flex;align-items:center;gap:8px;color:var(--muted)}
.sub-i .ck{width:15px;height:15px;border:1.6px solid var(--ring);border-radius:50%;display:grid;place-items:center;flex:none}
.sub-i.ok{color:var(--text)}
.sub-i.ok .ck{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.sub-i .ck .i{width:9px;height:9px;stroke-width:3.2}
@container (max-width:420px){.tk{grid-template-columns:20px minmax(0,1fr) auto}.tk .av{display:none}}

/* financeiro */
.bars{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px;align-items:end;height:112px;padding:0 4px}
.bars div{display:grid;gap:8px;align-items:end;height:100%;grid-template-rows:1fr auto;text-align:center}
.bars i{display:block;border-radius:var(--r-tag) var(--r-tag) 4px 4px;background:var(--track)}
.bars div.now i{background:var(--accent)}
.bars span{color:var(--muted);font-size:12px}
.mk-card{border:1px solid var(--border);border-radius:var(--r-ctl);padding:12px}
.mk-card>small{display:block;margin-bottom:12px;color:var(--muted);font-size:12px;font-weight:500}

/* visita técnica */
.vt{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:12px;padding:12px}
@container (max-width:520px){.vt{grid-template-columns:minmax(0,1fr)}}
.vt h4{margin-bottom:8px;color:var(--muted);font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase}
.vt-med{border:1px solid var(--border);border-radius:var(--r-ctl);overflow:hidden}
.vt-med div{display:flex;justify-content:space-between;gap:12px;padding:8px 12px;border-bottom:1px solid var(--rule)}
.vt-med div:last-child{border-bottom:0}
.vt-med span{color:var(--muted)}
.vt-med b{font-weight:500;font-variant-numeric:tabular-nums;white-space:nowrap}
.fotos{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.foto{aspect-ratio:1;display:grid;place-items:center;border-radius:var(--r-ctl);border:1px solid var(--border);background:linear-gradient(135deg,var(--tile),var(--field));color:var(--muted)}
.foto .i{width:20px;height:20px}
.vt-obs{margin-top:8px;padding:8px 12px;border:1px solid var(--border);border-radius:var(--r-ctl);color:var(--muted)}
.vt-obs b{color:var(--text)}
.vt-trava{grid-column:1/-1;display:flex;align-items:center;gap:8px;padding:8px 12px;border-radius:var(--r-ctl);background:var(--gray-bg);color:var(--gray-fg);font-size:12px}
.vt-trava .i{width:15px;height:15px}

/* ---------- Sobre ---------- */
.sobre{display:grid;gap:32px;align-items:center}
@media(min-width:900px){.sobre{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,5vw,80px)}}
.sobre p.t{margin-top:16px;color:var(--muted);font-size:clamp(16px,.2vw + 15px,18px);max-width:52ch}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:24px}
.chips li{display:inline-flex;align-items:center;height:32px;padding:0 12px;border:1px solid var(--border);border-radius:99px;background:var(--card);font-size:14px;font-weight:500}
.pilares{display:grid;gap:12px}
.pilar{display:grid;grid-template-columns:44px minmax(0,1fr);gap:16px;align-items:start;padding:16px;background:var(--card);border:1px solid var(--border);border-radius:var(--r-card);box-shadow:var(--shadow)}
.pilar .ic{display:grid;place-items:center;width:44px;height:44px;border-radius:var(--r-ctl)}
.pilar .ic .i{width:20px;height:20px}
.pilar h3{font-size:18px;font-weight:600;letter-spacing:-.01em}
.pilar p{margin-top:4px;color:var(--muted);font-size:15px}

/* ---------- O sistema (abas) ---------- */
.xp{display:grid;gap:16px}
@media(min-width:900px){.xp{grid-template-columns:220px minmax(0,1fr);gap:32px;align-items:start}}
.xp-abas{display:flex;gap:8px;overflow-x:auto;margin:0 calc(-1 * clamp(16px,3vw,48px));padding:2px clamp(16px,3vw,48px) 4px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.xp-abas::-webkit-scrollbar{display:none}
@media(min-width:900px){.xp-abas{flex-direction:column;gap:4px;margin:0;padding:0;overflow:visible;position:sticky;top:calc(var(--topo-h) + 16px)}}
.xp-aba{display:flex;align-items:center;gap:12px;flex:none;height:44px;padding:0 16px;border:1px solid var(--border);border-radius:var(--r-ctl);background:var(--card);color:var(--muted);font-weight:500;font-size:15px;white-space:nowrap;cursor:pointer;text-align:left;-webkit-tap-highlight-color:transparent}
.xp-aba[aria-selected="true"]{background:var(--green-bg);border-color:transparent;color:var(--text);font-weight:600}
.xp-aba[aria-selected="true"] .i{color:var(--accent-text)}
@media(min-width:900px){.xp-aba{height:44px;border-color:transparent;background:transparent}.xp-aba[aria-selected="true"]{background:var(--green-bg)}}
@media(hover:hover){.xp-aba:hover{color:var(--text);background:var(--hover)}.xp-aba[aria-selected="true"]:hover{background:var(--green-bg)}}
.xp-painel{min-width:0;animation:entra .28s ease}
.xp-painel[hidden]{display:none}
@keyframes entra{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.xp-painel h3{font-size:clamp(20px,.6vw + 16px,24px);font-weight:600;letter-spacing:-.02em;line-height:1.25}
.xp-painel>p{margin:8px 0 16px;max-width:56ch;color:var(--muted);font-size:16px}
.xp-painel>.mk{max-width:920px}
/* tela larga: o texto fica à esquerda e a tela de exemplo ao lado */
@media(min-width:1400px){
  .xp-painel{display:grid;grid-template-columns:240px minmax(0,1fr);grid-template-rows:auto 1fr;column-gap:32px;align-items:start}
  .xp-painel h3{grid-column:1;grid-row:1}
  .xp-painel>p{grid-column:1;grid-row:2;margin:8px 0 0}
  .xp-painel>.mk{grid-column:2;grid-row:1/3;max-width:none}
}
.tambem{margin-top:32px;padding-top:24px;border-top:1px solid var(--rule)}
.tambem h3{margin-bottom:12px;color:var(--muted);font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase}
.tambem .chips{margin-top:0}
.tambem .chips li{gap:8px;padding:0 12px 0 10px}
.tambem .chips .i{width:16px;height:16px;color:var(--accent-text)}

/* ---------- Equipe ---------- */
.papeis{display:grid;gap:12px}
@media(min-width:800px){.papeis{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}}
.papel{display:flex;flex-direction:column;gap:8px;padding:24px;background:var(--card);border:1px solid var(--border);border-radius:var(--r-card);box-shadow:var(--shadow)}
.papel .ic{display:grid;place-items:center;width:44px;height:44px;border-radius:var(--r-ctl);margin-bottom:4px}
.papel .ic .i{width:20px;height:20px}
.papel h3{font-size:20px;font-weight:600;letter-spacing:-.015em}
.papel p{color:var(--muted);font-size:15px}
.papel .pill{align-self:flex-start;margin-top:auto}
.papel p+.pill{margin-top:8px}
@media(max-width:799px){
  .papel{display:grid;grid-template-columns:44px minmax(0,1fr);column-gap:16px;row-gap:4px;align-content:start;padding:16px}
  .papel .ic{grid-row:1/4;margin:0}
  .papel h3,.papel p,.papel .pill{grid-column:2}
  .papel p+.pill{margin-top:8px}
}

/* ---------- Como funciona ---------- */
.passos{display:grid;gap:12px;counter-reset:passo}
@media(min-width:700px){.passos{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1000px){.passos{grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}}
.passo{position:relative;padding:24px;background:var(--card);border:1px solid var(--border);border-radius:var(--r-card);box-shadow:var(--shadow)}
.passo::before{counter-increment:passo;content:"0" counter(passo);display:block;margin-bottom:16px;color:var(--accent-text);font-size:24px;font-weight:600;letter-spacing:-.03em;line-height:1}
.passo h3{font-size:18px;font-weight:600;letter-spacing:-.01em}
.passo p{margin-top:4px;color:var(--muted);font-size:15px}
@media(max-width:699px){ /* celular: os quatro passos viram uma lista só, mais curta */
  .passos{gap:0;overflow:hidden;background:var(--card);border:1px solid var(--border);border-radius:var(--r-card);box-shadow:var(--shadow)}
  .passo{display:grid;grid-template-columns:40px minmax(0,1fr);column-gap:12px;padding:12px 16px;border:0;border-bottom:1px solid var(--rule);border-radius:0;box-shadow:none;background:transparent}
  .passo:last-child{border-bottom:0}
  .passo::before{grid-row:1/3;margin:0;font-size:20px;line-height:1.3}
  .passo p{margin-top:0}
}

/* ---------- Planos ---------- */
.planos{display:grid;gap:16px;align-items:stretch}
@media(min-width:700px){.planos{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(min-width:1100px){.planos{grid-template-columns:repeat(4,minmax(0,1fr))}}
.pl{position:relative;display:flex;flex-direction:column;padding:24px;background:var(--card);border:1px solid var(--border);border-radius:var(--r-card);box-shadow:var(--shadow)}
.pl.rec{border:2px solid var(--accent);padding:23px}
.selo{position:absolute;top:-12px;left:24px;padding:2px 12px;border-radius:99px;background:var(--accent);color:var(--accent-ink);font-size:12px;font-weight:600;letter-spacing:.02em}
.pl h3{font-size:20px;font-weight:600;letter-spacing:-.015em}
.pl .pra{margin-top:4px;color:var(--muted);font-size:15px}
.preco{display:flex;align-items:baseline;gap:4px;margin:16px 0}
.preco b{font-size:36px;font-weight:600;letter-spacing:-.035em;line-height:1;font-variant-numeric:tabular-nums}
.preco span{color:var(--muted);font-size:15px}
.pl .btn{width:100%}
.pl ul{display:grid;gap:12px;margin-top:24px;padding-top:16px;border-top:1px solid var(--rule)}
.pl li{display:grid;grid-template-columns:20px minmax(0,1fr);gap:12px;font-size:15px;line-height:1.4}
.pl li .i{width:18px;height:18px;margin-top:1px;color:var(--accent-text);stroke-width:2.2}
.pl li.base{color:var(--muted);font-weight:500}
.pl-nota{margin:24px auto 0;max-width:60ch;color:var(--muted);font-size:15px;text-align:center}
.pl-nota a{color:var(--accent-text);font-weight:600}
.comp{margin-top:24px;border:1px solid var(--border);border-radius:var(--r-card);background:var(--card)}
.comp summary{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:52px;padding:0 20px;font-weight:600;cursor:pointer;list-style:none}
.comp summary::-webkit-details-marker{display:none}
.comp summary .i{transition:transform .2s}
.comp[open] summary .i{transform:rotate(180deg)}
.comp-rolo{overflow-x:auto;border-top:1px solid var(--rule)}
.comp table{width:100%;min-width:640px;border-collapse:collapse;font-size:15px}
.comp th,.comp td{padding:12px 16px;border-bottom:1px solid var(--rule);text-align:center;vertical-align:middle}
.comp tr:last-child td{border-bottom:0}
.comp th:first-child,.comp td:first-child{text-align:left;color:var(--text);font-weight:500}
.comp thead th{color:var(--muted);font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap}
.comp thead th.rec{color:var(--accent-text)}
.comp td{color:var(--muted)}
.comp .i{display:inline-block;width:18px;height:18px;color:var(--accent-text);stroke-width:2.4;vertical-align:middle}
.comp .nao{color:var(--ring)}

/* ---------- Dúvidas ---------- */
.faq{display:grid;gap:12px;align-items:start}
@media(min-width:1000px){.faq{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}}
.faq details{background:var(--card);border:1px solid var(--border);border-radius:var(--r-card);box-shadow:var(--shadow)}
.faq summary{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:56px;padding:12px 20px;font-weight:600;font-size:16px;cursor:pointer;list-style:none;-webkit-tap-highlight-color:transparent}
.faq summary::-webkit-details-marker{display:none}
.faq summary .i{color:var(--muted);transition:transform .2s}
.faq details[open] summary .i{transform:rotate(45deg);color:var(--accent-text)}
.faq details p{padding:0 20px 16px;color:var(--muted);font-size:15px;max-width:64ch}
@media(hover:hover){.faq summary:hover{background:var(--hover);border-radius:var(--r-card)}}

/* ---------- Contato ---------- */
.contato{display:grid;gap:24px;padding:32px;background:var(--card);border:1px solid var(--border);border-radius:var(--r-card);box-shadow:var(--shadow)}
@media(min-width:860px){.contato{grid-template-columns:minmax(0,1fr) minmax(0,.9fr);gap:48px;align-items:center;padding:40px 48px}}
@media(max-width:480px){.contato{padding:24px 16px}}
.contato h2{font-size:clamp(24px,1vw + 19px,30px)}
.contato p.t{margin-top:8px;color:var(--muted);font-size:16px;max-width:44ch}
.contato .cta-linha{margin-top:24px}
.vias{display:grid;gap:8px}
.via{display:grid;grid-template-columns:44px minmax(0,1fr) 18px;gap:16px;align-items:center;min-height:64px;padding:10px 16px 10px 10px;border:1px solid var(--border);border-radius:var(--r-ctl);background:var(--app)}
.via .ic{display:grid;place-items:center;width:44px;height:44px;border-radius:var(--r-ctl)}
.via .ic .i{width:20px;height:20px}
.via small{display:block;color:var(--muted);font-size:14px}
.via b{display:block;font-size:16px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.via>.i{color:var(--muted);width:16px;height:16px}
@media(hover:hover){.via:hover{border-color:var(--ring);background:var(--tile)}}

/* ---------- Rodapé ---------- */
.rodape{border-top:1px solid var(--rule);padding:40px 0 24px}
.rod-grade{display:grid;gap:32px}
@media(min-width:800px){.rod-grade{grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,1fr));gap:48px}}
.rod-grade .marca img{width:112px}
.rod-grade p{margin-top:12px;max-width:34ch;color:var(--muted);font-size:14px}
.rod-col h4{margin-bottom:8px;color:var(--muted);font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase}
.rod-col a{display:block;padding:4px 0;font-size:15px;color:var(--text)}
@media(max-width:799px){
  .rod-grade{grid-template-columns:repeat(3,minmax(0,1fr));gap:24px 12px}
  .rod-grade>div:first-child{grid-column:1/-1}
  .rod-col a{font-size:14px}
}
@media(hover:hover){.rod-col a:hover{color:var(--accent-text)}}
.rod-fim{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 24px;margin-top:32px;padding-top:16px;border-top:1px solid var(--rule);color:var(--muted);font-size:14px}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}