/* ============================================================
   MonaiAds , pele da marca
   Carregado DEPOIS de styles.css. Redefine tokens e inverte o
   tema para dark, sem editar o CSS de estrutura herdado.
   ============================================================ */

@font-face{font-family:"Space Grotesk";font-style:normal;font-weight:400 700;font-display:swap;
  src:url("../assets/fonts/space-grotesk-latin.woff2") format("woff2")}
@font-face{font-family:"DM Sans";font-style:normal;font-weight:400 700;font-display:swap;
  src:url("../assets/fonts/dm-sans-latin.woff2") format("woff2")}

/* ---------- 1. TOKENS ---------- */
:root{
  --ground:#09090B; --ground-2:#050505; --surface:#0F0F12; --surface-2:#141418;
  --line:#27272A;   --line-2:#3F3F46;
  --ink:#FAFAFA;    --ink-2:#D4D4D8;   --muted:#A1A1AA;

  /* Verde MonaiAds herdado da NOEDS. O roxo do original vira verde
     para que todo componente que o usava assuma a nova marca. */
  --brand:#22C55E;  --brand-2:#16A34A; --brand-ink:#04140A;
  --violet:#22C55E; --violet-2:#4ADE80; --violet-soft:rgba(34,197,94,.10);
  --signal:#F87171;
  --dark:#050505;   --dark-2:#0F0F12;

  --ff-display:"Space Grotesk",system-ui,-apple-system,"Segoe UI",sans-serif;
  --ff-body:"DM Sans",system-ui,-apple-system,"Segoe UI",sans-serif;

  color-scheme:dark;
}

html,body{background:var(--ground);color:var(--ink)}

/* Grid de fundo e halo verde , assinatura visual da NOEDS. */
body::before{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.024) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.024) 1px,transparent 1px);
  background-size:64px 64px;
}
body::after{
  content:"";position:fixed;left:0;right:0;top:0;height:70vh;z-index:0;pointer-events:none;
  background:radial-gradient(80% 50% at 50% 0%,rgba(34,197,94,.08),transparent 70%);
}
body > *{position:relative;z-index:1}

/* ---------- 2. INVERSÃO DAS SUPERFÍCIES CLARAS ---------- */
/* O CSS herdado traz 33 usos de #fff fixo, escritos para tema claro.
   Aqui eles passam a apontar para as superfícies escuras. */
.sec,.hero,section,footer{background-color:transparent}
.nav,.stickytop{background:rgba(9,9,11,.82)!important;backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line)}

.card,.pcard,.plan,.qcard,.fcard,.tcard,.ccard,.acard,
.shot,.panel,.box,.tile,.item,.feat,.step,.stat,
.comp-card,.cmp,.integration,.chip,.badge,
[class*="card"],[class*="panel"],[class*="tile"]{
  background-color:var(--surface);
  border-color:var(--line);
  color:var(--ink);
}

/* Elementos que o original pintava de branco puro. */
.sec .wrap [style*="background:#fff"],
.plan,.price-sec .plan{background:var(--surface)!important}

/* Seções de fundo alternado, invertidas para o tema escuro. */
.mn-fx-sec,.awards-sec,.auto-proof-sec,.mobile-app-sec,
.post-payment-sec,.price-sec,.testimonial-sec{
  background:var(--ground-2);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}

/* ---------- 3. TIPOGRAFIA ---------- */
/* Display pesado com tracking negativo , marca registrada da NOEDS. */
h1,h2,h3,.h1,.h2,.display{
  font-family:var(--ff-display);
  font-weight:700;
  letter-spacing:-.03em;
}
h1,.hero h1{letter-spacing:-.045em;line-height:1}

/* Gradiente branco→cinza nos títulos, como no site da NOEDS. */
.hero h1,.sec > .wrap > h2{
  background:linear-gradient(#FFFFFF,#A3A3A3);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
}
/* A palavra em destaque mantém o verde sólido. */
.hero h1 .swap,.hero h1 b,.hero h1 em,.hero h1 .accent{
  -webkit-text-fill-color:var(--brand);color:var(--brand);
  background:none;
}

.mono,.tag,.eyebrow,[class*="mono"]{
  font-family:var(--ff-mono);
  letter-spacing:.14em;text-transform:uppercase;
  color:var(--brand);
}

/* ---------- 4. BOTÕES ---------- */
.btn-p,.btn-primary{
  background:var(--brand);color:var(--brand-ink);border:0;font-weight:700;
}
.btn-p:hover,.btn-primary:hover{background:var(--brand-2)}
.btn-g,.btn-ghost,.btn-s{
  background:transparent;color:var(--ink);border:1px solid var(--line-2);
}
.btn-g:hover,.btn-ghost:hover{border-color:var(--brand);color:var(--brand)}

/* ---------- 5. DETALHES HERDADOS ---------- */
.tick{color:var(--brand)}
hr,.rule,.divider{border-color:var(--line);background:var(--line)}
details,summary{border-color:var(--line)}
input,select,textarea{
  background:var(--surface-2);border:1px solid var(--line);color:var(--ink);
}
input::placeholder,textarea::placeholder{color:var(--muted)}
input:focus,textarea:focus{outline:2px solid var(--brand);outline-offset:1px;border-color:var(--brand)}

.logo-image img,.brand-logo-clip img{filter:none}

/* Correção do corte da logo , styles.css recorta a logo com posição
   absoluta e offset fixo em pixel (top:-18px etc.), calibrado para uma
   versão antiga do SVG. A logo atual (monaiads-logo.svg / -claro.svg,
   viewBox 0 0 260 48) usa quase toda a altura do viewBox na marca
   circular, então aquele offset corta o topo do ícone e da palavra.
   Aqui a imagem passa a preencher a caixa por inteiro (sem posição
   fixa em pixel), o que não corta conteúdo mesmo se o SVG for
   reexportado de novo. */
.brand-logo-clip{overflow:hidden;width:152px;height:28px}
.brand-logo-clip img{position:absolute;inset:0;top:0;left:0;width:100%;height:100%;max-width:none}
@media(max-width:640px){
  .brand-logo-clip{width:130px;height:24px}
  .brand-logo-clip img{width:100%;height:100%;left:0;top:0}
}

/* ============================================================
   SEÇÕES EXCLUSIVAS MONAIADS
   ============================================================ */

/* ---------- MÉTODO , 4 fases ---------- */
.metodo{display:grid;grid-template-columns:minmax(240px,300px) 1fr;gap:clamp(20px,3vw,44px);align-items:start}
.metodo-nav{position:relative;display:flex;flex-direction:column;gap:8px;padding-left:18px}
.mt-rail{position:absolute;left:0;top:6px;bottom:6px;width:2px;background:var(--line);border-radius:2px;overflow:hidden}
.mt-rail i{position:absolute;left:0;top:0;width:100%;height:25%;background:linear-gradient(var(--brand),var(--brand-2));
  border-radius:2px;transition:transform .5s cubic-bezier(.4,0,.2,1)}
.mt-step{display:flex;align-items:center;gap:12px;width:100%;text-align:left;cursor:pointer;
  background:transparent;border:1px solid transparent;border-radius:var(--r-m);
  padding:13px 15px;color:var(--muted);font-family:var(--ff-body);font-size:15px;transition:.25s}
.mt-step .mt-n{font-family:var(--ff-mono);font-size:12px;letter-spacing:.1em;color:var(--line-2);transition:.25s}
.mt-step b{font-weight:600;letter-spacing:-.01em}
.mt-step:hover{color:var(--ink-2);background:var(--surface)}
.mt-step.is-active{background:var(--surface);border-color:var(--line);color:var(--ink)}
.mt-step.is-active .mt-n{color:var(--brand)}

.metodo-painel{position:relative;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-l);padding:clamp(22px,3vw,38px);min-height:340px;overflow:hidden}
.metodo-painel::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(70% 60% at 100% 0%,rgba(34,197,94,.07),transparent 70%)}
.mt-fase{display:none;position:relative}
.mt-fase.active{display:block;animation:mtIn .45s cubic-bezier(.2,.7,.3,1) both}
@keyframes mtIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.mt-fase > .mono{color:var(--brand);font-size:11.5px}
.mt-fase h3{font-family:var(--ff-display);font-size:clamp(19px,2.3vw,27px);font-weight:700;
  letter-spacing:-.03em;line-height:1.2;margin:12px 0 10px;color:var(--ink)}
.mt-fase p{color:var(--muted);font-size:15px;line-height:1.6;margin-bottom:22px;max-width:56ch}
.mt-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:9px;list-style:none;padding:0;margin:0}
.mt-list li{display:flex;align-items:center;gap:9px;padding:11px 13px;font-size:14px;color:var(--ink-2);
  background:var(--ground-2);border:1px solid var(--line);border-radius:var(--r-s)}
.mt-list li::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--brand);flex:none}
@media(max-width:860px){
  .metodo{grid-template-columns:1fr}
  .metodo-nav{flex-direction:row;overflow-x:auto;padding:0 0 10px;gap:8px;scrollbar-width:none}
  .metodo-nav::-webkit-scrollbar{display:none}
  .mt-rail{display:none}
  .mt-step{flex:none;border-color:var(--line);white-space:nowrap}
}

/* ---------- PAINEL EXECUTIVO ---------- */
.painel-sec{background:var(--ground-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.painel{display:grid;gap:22px}

/* ---------- PARA QUEM É ---------- */
.publico{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:820px){.publico{grid-template-columns:1fr}}
.pb-col{padding:clamp(22px,3vw,32px);border-radius:var(--r-l);border:1px solid var(--line);background:var(--surface)}
.pb-col h3{display:flex;align-items:center;gap:10px;font-family:var(--ff-display);font-size:17px;
  font-weight:700;letter-spacing:-.02em;margin:0 0 18px;color:var(--ink)}
.pb-ic{display:grid;place-items:center;width:25px;height:25px;border-radius:50%;font-size:13px;font-weight:700}
.pb-sim{border-color:rgba(34,197,94,.32)}
.pb-sim .pb-ic{background:rgba(34,197,94,.15);color:var(--brand)}
.pb-nao .pb-ic{background:rgba(248,113,113,.13);color:var(--signal)}
.pb-col ul{list-style:none;padding:0;margin:0;display:grid;gap:11px}
.pb-col li{display:flex;gap:11px;font-size:14.5px;line-height:1.55;color:var(--ink-2)}
.pb-col li::before{content:"";margin-top:8px;width:5px;height:5px;border-radius:50%;flex:none}
.pb-sim li::before{background:var(--brand)}
.pb-nao li::before{background:var(--line-2)}
.pb-nao li{color:var(--muted)}

/* ---------- GRADE DE PLANOS , ver bloco no fim do arquivo ---------- */

/* selo e grade de planos , bloco unico no fim do arquivo */

/* 3º card , Operação Completa (sob consulta) */
.plan-op{position:relative;border-color:rgba(34,197,94,.42)!important;
  background:linear-gradient(180deg,rgba(34,197,94,.07),var(--surface))!important}
.plan-op::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:radial-gradient(100% 60% at 50% 0%,rgba(34,197,94,.12),transparent 70%)}
.op-tag{background:var(--brand)!important;color:var(--brand-ink)!important;border:0!important}


/* ---------- FORMULÁRIO DE ANÁLISE ---------- */
.analise-sec{background:var(--ground-2);border-top:1px solid var(--line)}
.analise{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,60px);align-items:center}
@media(max-width:900px){.analise{grid-template-columns:1fr}}
.an-copy h2{margin:14px 0 14px}
.an-bullets{list-style:none;padding:0;margin:24px 0 0;display:grid;gap:11px}
.an-bullets li{display:flex;gap:11px;font-size:14.5px;color:var(--ink-2);line-height:1.5}
.an-bullets li::before{content:"✓";color:var(--brand);font-weight:700;flex:none}

.an-box{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-l);
  padding:clamp(22px,3vw,34px)}
.fm-passo{font-family:var(--ff-mono);font-size:11px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--brand);margin:0 0 20px}
.fm-etapa{display:none;flex-direction:column;gap:15px}
.fm-etapa.active{display:flex;animation:mtIn .35s ease both}
.fm-campo{display:flex;flex-direction:column;gap:7px}
.fm-campo label{font-size:12px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
.fm-campo input,.fm-campo select{width:100%;padding:13px 15px;border-radius:var(--r-s);
  font-family:var(--ff-body);font-size:15px}
.fm-campo select{appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A1A1AA' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 13px center;background-size:17px;padding-right:42px}
.fm-erro{font-size:12.5px;color:var(--signal)}
.fm-campo input[aria-invalid="true"],.fm-campo select[aria-invalid="true"]{border-color:var(--signal)}
.fm-acoes{display:grid;grid-template-columns:auto 1fr;gap:10px}
.fm-acoes .btn{justify-content:center}
.btn-full{width:100%;justify-content:center}

.fm-sucesso{text-align:center;padding:14px 0;outline:none}
.fm-check{display:grid;place-items:center;width:52px;height:52px;margin:0 auto 16px;border-radius:50%;
  background:rgba(34,197,94,.15);color:var(--brand);font-size:24px;font-weight:700}
.fm-sucesso h3{font-family:var(--ff-display);font-size:21px;font-weight:700;letter-spacing:-.03em;
  color:var(--ink);margin:0 0 9px}
.fm-sucesso p{color:var(--muted);font-size:14.5px;line-height:1.6;max-width:42ch;margin:0 auto}

/* ---------- BARRA DE OFERTA ---------- */
.topbar{background:linear-gradient(90deg,var(--brand-2),var(--brand))!important;color:var(--brand-ink)!important}
.topbar b,.topbar .tb-main{color:var(--brand-ink)!important}
.prog{background:var(--brand)!important}
.topbar .tb-main{font-family:var(--ff-body);font-size:13px;font-weight:500;letter-spacing:.01em}
.topbar .tb-main b{font-weight:700}

/* ---------- CONTENÇÃO HORIZONTAL ---------- */
/* O marquee e alguns halos extrapolam a viewport por design.
   A página nunca deve rolar na horizontal por causa disso. */
html,body{max-width:100%;overflow-x:hidden}
.mn-fx-sec,.hero,.sec{overflow-x:clip}

/* ==========================================================================
   PAINEL DE CRM AO VIVO , MonaiAds
   ========================================================================== */
.crm{margin-top:clamp(26px,3.4vw,40px);border:1px solid var(--line);border-radius:20px;
  background:linear-gradient(178deg,var(--surface) 0%,var(--ground-2) 100%);overflow:hidden;
  box-shadow:0 34px 70px -44px rgba(0,0,0,.92),inset 0 1px 0 rgba(255,255,255,.05)}

.crm-chrome{display:flex;align-items:center;gap:14px;padding:12px 16px;
  border-bottom:1px solid var(--line);background:rgba(255,255,255,.018)}
.crm-dots{display:flex;gap:6px}
.crm-dots i{width:9px;height:9px;border-radius:50%;background:var(--line-2)}
.crm-dots i:first-child{background:#3F3F46}
.crm-title{flex:1;font:600 13px/1 var(--ff-body);color:var(--ink-2);
  display:flex;align-items:center;gap:9px}
.crm-title b{font:500 11px/1 var(--ff-mono);color:var(--muted);padding:4px 8px;
  border:1px solid var(--line);border-radius:6px}
.crm-live{display:inline-flex;align-items:center;gap:6px;font:500 10.5px/1 var(--ff-mono);
  letter-spacing:.06em;text-transform:uppercase;color:var(--violet-2)}
.crm-live i{width:6px;height:6px;border-radius:50%;background:var(--brand);
  box-shadow:0 0 0 0 rgba(34,197,94,.55);animation:crmPulse 2.4s ease-out infinite}
@keyframes crmPulse{0%{box-shadow:0 0 0 0 rgba(34,197,94,.5)}70%,100%{box-shadow:0 0 0 7px rgba(34,197,94,0)}}

.crm-bar{display:flex;align-items:center;gap:6px;padding:11px 14px;border-bottom:1px solid var(--line)}
.crm-tab{padding:7px 14px;border:1px solid transparent;border-radius:9px;background:none;
  color:var(--muted);font:600 12.5px/1 var(--ff-body);cursor:pointer;
  transition:color .22s,background .22s,border-color .22s}
.crm-tab:hover{color:var(--ink-2);background:rgba(255,255,255,.04)}
.crm-tab.is-on{color:var(--ink);background:var(--violet-soft);border-color:rgba(34,197,94,.3)}
.crm-tab:focus-visible{outline:2px solid var(--brand);outline-offset:2px}

.crm-tela{position:relative;padding:16px;min-height:300px;display:flex;flex-direction:column}
.crm-vista{display:none;opacity:0}
.crm-vista.is-on{display:block;animation:crmVista .5s cubic-bezier(.2,.75,.25,1) forwards}
@keyframes crmVista{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}}

/* --- kanban --- */
.crm-kanban{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:11px}
.kb-col{min-width:0;padding:11px;border:1px solid var(--line);border-radius:13px;
  background:rgba(255,255,255,.016)}
.kb-col header{display:flex;align-items:center;gap:7px;margin-bottom:10px;
  font:600 11.5px/1 var(--ff-body);color:var(--ink-2)}
.kb-pt{width:7px;height:7px;border-radius:50%;background:var(--pt,#A1A1AA)}
.kb-col header b{margin-left:auto;font:500 10.5px/1 var(--ff-mono);color:var(--muted);
  padding:3px 6px;border-radius:5px;background:rgba(255,255,255,.05)}
.kb-card{position:relative;display:grid;gap:3px;padding:10px;margin-bottom:8px;
  border:1px solid var(--line);border-radius:10px;background:var(--surface-2);
  transition:transform .3s cubic-bezier(.2,.8,.3,1),border-color .3s}
.kb-card:last-child{margin-bottom:0}
.kb-card b{font:600 12.5px/1.2 var(--ff-body);color:var(--ink)}
.kb-card span{font-size:11px;color:var(--muted)}
.kb-tag{justify-self:start;font:500 9.5px/1 var(--ff-mono);letter-spacing:.04em;
  text-transform:uppercase;color:var(--muted);padding:3px 6px;border-radius:5px;
  background:rgba(255,255,255,.05);font-style:normal}
.kb-card u{text-decoration:none;font:600 12px/1 var(--ff-mono);color:var(--violet-2);margin-top:2px}
.kb-when{font:500 10px/1 var(--ff-mono);color:var(--brand);margin-top:3px}
.kb-hot{border-color:rgba(34,197,94,.34);box-shadow:0 0 0 1px rgba(34,197,94,.1)}
.kb-win{border-color:rgba(34,197,94,.4);background:linear-gradient(160deg,rgba(34,197,94,.1),var(--surface-2))}
.kb-ok{position:absolute;top:9px;right:9px;width:17px;height:17px;display:grid;place-items:center;
  border-radius:50%;background:var(--brand);color:var(--brand-ink);font-size:10px;font-weight:700}

/* card que sobe de coluna quando a vista entra */
.crm-vista.is-on .kb-hot{animation:kbEntra .62s .18s cubic-bezier(.2,.85,.28,1) backwards}
@keyframes kbEntra{from{opacity:0;transform:translateY(26px) scale(.96)}to{opacity:1;transform:none}}

/* --- conversas --- */
.cv-wrap{display:grid;grid-template-columns:minmax(0,232px) minmax(0,1fr);gap:12px}
.cv-lista{list-style:none;margin:0;padding:0;display:grid;gap:5px;align-content:start}
.cv-lista li{position:relative;display:grid;grid-template-columns:32px minmax(0,1fr);
  column-gap:9px;padding:9px;border:1px solid transparent;border-radius:10px;
  transition:background .22s,border-color .22s}
.cv-lista li.is-on{background:var(--violet-soft);border-color:rgba(34,197,94,.26)}
.cv-av{grid-row:span 2;width:32px;height:32px;display:grid;place-items:center;border-radius:9px;
  background:rgba(255,255,255,.06);font:600 11px/1 var(--ff-mono);color:var(--ink-2)}
.cv-lista b{font:600 12.5px/1.3 var(--ff-body);color:var(--ink)}
.cv-lista small{font-size:11px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cv-nao{position:absolute;top:11px;right:10px;min-width:17px;height:17px;display:grid;place-items:center;
  border-radius:9px;background:var(--brand);color:var(--brand-ink);
  font:700 10px/1 var(--ff-mono);font-style:normal}

.cv-thread{display:grid;gap:8px;align-content:start;padding:13px;
  border:1px solid var(--line);border-radius:13px;background:rgba(255,255,255,.016)}
.cv-msg{position:relative;max-width:84%;padding:9px 12px;border-radius:13px;
  font-size:12.5px;line-height:1.45;color:var(--ink-2)}
.cv-msg time{display:block;margin-top:4px;font:500 9.5px/1 var(--ff-mono);color:var(--muted)}
.cv-in{justify-self:start;border:1px solid var(--line);background:var(--surface-2);border-bottom-left-radius:4px}
.cv-bot{justify-self:end;border:1px solid rgba(34,197,94,.28);border-bottom-right-radius:4px;
  background:linear-gradient(150deg,rgba(34,197,94,.14),rgba(34,197,94,.05));color:var(--ink)}
.cv-ia{display:block;margin-bottom:4px;font:600 9px/1 var(--ff-mono);letter-spacing:.09em;
  text-transform:uppercase;color:var(--violet-2)}
.cv-pts{display:flex;gap:4px;padding:2px 0}
.cv-pts s{width:5px;height:5px;border-radius:50%;background:var(--violet-2);text-decoration:none;
  animation:cvPt 1.25s ease-in-out infinite}
.cv-pts s:nth-child(2){animation-delay:.16s}
.cv-pts s:nth-child(3){animation-delay:.32s}
@keyframes cvPt{0%,60%,100%{opacity:.28;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}
.cv-acao{display:flex;align-items:center;gap:8px;margin-top:2px;padding:9px 11px;
  border:1px dashed rgba(34,197,94,.34);border-radius:10px;
  font-size:11.5px;color:var(--ink-2);background:rgba(34,197,94,.05)}
.cv-acao b{color:var(--violet-2)}
.cv-ok{width:16px;height:16px;flex:none;display:grid;place-items:center;border-radius:50%;
  background:var(--brand);color:var(--brand-ink);font-size:9.5px;font-weight:700}
.crm-vista.is-on .cv-msg{animation:cvIn .42s cubic-bezier(.2,.8,.3,1) backwards}
.crm-vista.is-on .cv-msg:nth-child(2){animation-delay:.1s}
.crm-vista.is-on .cv-msg:nth-child(3){animation-delay:.2s}
.crm-vista.is-on .cv-msg:nth-child(4){animation-delay:.3s}
.crm-vista.is-on .cv-acao{animation:cvIn .42s .44s cubic-bezier(.2,.8,.3,1) backwards}
@keyframes cvIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* --- agenda --- */
.ag-grade{display:grid;gap:2px}
.ag-hora{display:grid;grid-template-columns:46px minmax(0,1fr);align-items:stretch;gap:10px}
.ag-hora>span{font:500 10.5px/1 var(--ff-mono);color:var(--muted);padding-top:12px}
.ag-slot{min-height:36px;border-top:1px solid var(--line);padding:4px 0}
.ag-ev{display:grid;gap:2px;padding:7px 11px;border-radius:9px;
  border-left:2.5px solid var(--line-2);background:rgba(255,255,255,.035);
  font:600 12px/1.2 var(--ff-body);color:var(--ink-2)}
.ag-ev small{font-weight:500;font-size:10.5px;color:var(--muted)}
.ag-ev2{border-left-color:#4ADE80}
.ag-ev3{border-left-color:var(--brand);background:linear-gradient(100deg,rgba(34,197,94,.15),rgba(34,197,94,.05));color:var(--ink)}
.ag-novo{position:relative}
.ag-flag{position:absolute;top:7px;right:9px;font:600 9px/1 var(--ff-mono);letter-spacing:.09em;
  text-transform:uppercase;color:var(--brand-ink);background:var(--brand);
  padding:3px 6px;border-radius:5px;font-style:normal}
.crm-vista.is-on .ag-novo{animation:agNovo .7s .3s cubic-bezier(.2,.85,.28,1) backwards}
@keyframes agNovo{from{opacity:0;transform:translateX(-16px)}to{opacity:1;transform:none}}
.ag-nota{margin:13px 0 0;font-size:12px;color:var(--muted);text-align:center}

@media(max-width:900px){
  .crm-kanban{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cv-wrap{grid-template-columns:1fr}
  .cv-lista{grid-auto-flow:column;grid-auto-columns:minmax(178px,1fr);
    overflow-x:auto;scrollbar-width:none}
  .cv-lista::-webkit-scrollbar{display:none}
}
@media(max-width:560px){
  /* O funil rola de lado em vez de esconder as duas últimas etapas:
     um kanban pela metade não mostra o que o cliente quer ver , para
     onde o negócio anda e onde ele fecha. */
  .crm-kanban{
    grid-template-columns:repeat(4,minmax(216px,1fr));
    overflow-x:auto;overflow-y:hidden;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    padding-bottom:8px;
    scrollbar-width:none;
  }
  .crm-kanban::-webkit-scrollbar{display:none}
  .kb-col{scroll-snap-align:start}
  .crm-tela{padding:12px;min-height:0}
}
@media(prefers-reduced-motion:reduce){
  .crm-vista.is-on,.crm-vista.is-on *{animation:none!important}
  .crm-live i{animation:none}
}

/* ==========================================================================
   MOVIMENTO MONAIADS , assinatura própria
   Revelação por máscara vertical: o conteúdo é "revelado" de baixo para cima
   por um gradiente que se abre, não um fade-up deslocado.
   ========================================================================== */
.rv{
  opacity:1;
  transform:none;
  -webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 var(--rv-p,0%),transparent calc(var(--rv-p,0%) + 16%));
  mask-image:linear-gradient(to bottom,#000 0%,#000 var(--rv-p,0%),transparent calc(var(--rv-p,0%) + 16%));
  clip-path:inset(0 0 var(--rv-c,14%) 0);
  transition:--rv-p 1.05s cubic-bezier(.16,.84,.24,1),
             clip-path .92s cubic-bezier(.16,.84,.24,1),
             filter .8s ease-out;
  filter:blur(.6px)
}
.rv.in{--rv-p:100%;--rv-c:0%;filter:none}
@property --rv-p{syntax:"<percentage>";inherits:false;initial-value:0%}
@property --rv-c{syntax:"<percentage>";inherits:false;initial-value:14%}

/* navegadores sem @property: degrada para máscara estática, sem sumir conteúdo */
@supports not (background:paint(x)){
  .rv{-webkit-mask-image:none;mask-image:none;opacity:0;transform:translateY(14px);
      transition:opacity .7s cubic-bezier(.16,.84,.24,1),transform .7s cubic-bezier(.16,.84,.24,1)}
  .rv.in{opacity:1;transform:none}
}

/* cascata dentro de grades , filhos entram em sequência, não em bloco */
.rv.in > .prob-card,
.rv.in > .kb-col,
.rv.in > .pb-col,
.rv.in .pn-cell{animation:mnRise .66s cubic-bezier(.18,.82,.26,1) backwards}
.rv.in > *:nth-child(1),.rv.in .pn-cell:nth-child(1){animation-delay:.04s}
.rv.in > *:nth-child(2),.rv.in .pn-cell:nth-child(3){animation-delay:.12s}
.rv.in > *:nth-child(3),.rv.in .pn-cell:nth-child(5){animation-delay:.2s}
.rv.in > *:nth-child(4),.rv.in .pn-cell:nth-child(7){animation-delay:.28s}
.rv.in > *:nth-child(5),.rv.in .pn-cell:nth-child(9){animation-delay:.36s}
@keyframes mnRise{from{opacity:0;transform:translateY(17px)}to{opacity:1;transform:none}}

/* títulos: a linha se firma junto com um traço que corre por baixo */
.head.rv .h2{position:relative}
.head.rv .h2::after{content:"";position:absolute;left:0;bottom:-11px;height:2px;width:0;
  background:linear-gradient(90deg,var(--brand),transparent);
  transition:width 1s .22s cubic-bezier(.16,.84,.24,1)}
.head.rv.in .h2::after{width:88px}

@media(prefers-reduced-motion:reduce){
  .rv,.rv.in{-webkit-mask-image:none;mask-image:none;clip-path:none;filter:none;
    opacity:1;transform:none;transition:none}
  .rv.in > *,.rv.in .pn-cell{animation:none}
  .head.rv.in .h2::after{transition:none;width:88px}
}

/* colunas do kanban com altura própria , sem vazio à direita */
.crm-kanban{align-items:start}
.kb-col{display:flex;flex-direction:column}

/* ==========================================================================
   ACESSIBILIDADE , contraste AA sobre fundo escuro
   ========================================================================== */
/* textos auxiliares pequenos: sobem de #A1A1AA para um cinza legível */
.demo-placeholder-note,.mn-ct-dica,.pn-nota,.ag-nota,
.cv-lista small,.kb-card span{color:#B4B4BD}

/* numeração de etapa do método: era #3F3F46 (1.91:1) */
.mt-n{color:#8B8B95}
.mt-step.is-active .mt-n{color:var(--violet-2)}

/* rótulos verdes pequenos: #22C55E em 9-11px não passa AA */
.crm-live,.cv-ia,.mono.eyebrow,.save,.demo-placeholder-tag{color:#5FE08C}
.kb-card u{color:#5FE08C}

/* marca de comparativo */
.cmp-brand{color:#8A93A3}

/* check dentro do círculo verde precisa do tom escuro, não cinza */
.kb-ok,.cv-ok{color:var(--brand-ink)}

/* selo de garantia e contadores de herança */
.seal-kicker,.mn-pl-herda,.mn-pl-herda b{color:#7FE3A3}

/* “Incluso” da tabela comparativa: oliva escuro virava ilegível */
.cmp-yes,.cmp-in{color:#5FE08C}

/* foco visível consistente em toda a página */
a:focus-visible,button:focus-visible,input:focus-visible,
select:focus-visible,summary:focus-visible,[tabindex]:focus-visible{
  outline:2px solid var(--brand);outline-offset:3px;border-radius:6px}

/* correções finais de contraste , casos sobre fundo pintado */
.kb-ok,.cv-ok,.fm-check{color:#04140A}          /* check escuro dentro do círculo verde */
.toggle .save{color:#15803D}             /* tag sobre halo verde translúcido */
.mt-step .mt-n{color:#8B8B95}
.mt-step.is-active .mt-n{color:#4ADE80}

/* tabela comparativa: #046728 dava 2.7:1 sobre a superfície escura */
.cmp td,.cmp th,.cmp .cmp-in,.cmp-yes{color:#4ADE80}
.cmp td b,.cmp th b{color:#86EFAC}

/* .rv aninhado nunca deve ficar mascarado: só o ancestral anima */
.rv .rv{-webkit-mask-image:none;mask-image:none;clip-path:none;filter:none;opacity:1;transform:none}

/* o termo rotativo precisa do seu próprio preenchimento: o gradiente do h1
   é recortado no elemento pai e não alcança este span posicionado */
h1 .mn-troca-termo{
  -webkit-text-fill-color:var(--ink);
  color:var(--ink);
  background:none
}
.mn-troca{overflow:visible}

/* ------------------------------------------------------------------
   Topo em telas estreitas
   O termo mais longo ("não perde lead no meio") passava de 375px e
   encostava nas duas bordas. Aqui o título cede um pouco de corpo e o
   marca-texto acompanha, mantendo a frase inteira dentro da tela.
   ------------------------------------------------------------------ */
@media (max-width:480px){
  h1{font-size:clamp(27px,7.6vw,34px);line-height:1.12}
  .mn-troca{max-width:100%}
  .mn-troca-termo{white-space:nowrap}
  .mn-marca{left:-.08em;right:-.08em;height:.38em}
}
@media (max-width:360px){
  h1{font-size:clamp(24px,7.2vw,29px)}
}

/* ------------------------------------------------------------------
   Diagnóstico , atribuição de fonte
   Cada número do bloco cita o estudo e o tamanho da amostra. A citação
   fica discreta, mas legível: é o que separa dado de alegação solta.
   ------------------------------------------------------------------ */
.prob{display:flex;flex-direction:column}
.prob .stat{margin-top:auto}
.prob-fonte{
  display:block;margin-top:11px;padding-top:10px;
  border-top:1px solid var(--line);
  font-family:var(--ff-mono,ui-monospace,monospace);
  font-size:9.6px;line-height:1.45;letter-spacing:.03em;
  font-style:normal;color:var(--muted);text-transform:uppercase;
}
.prob-nota{
  margin:22px auto 0;max-width:64ch;text-align:center;
  font-size:11.6px;line-height:1.6;color:var(--muted);
}
@media (max-width:720px){
  .prob-fonte{font-size:9.2px}
  .prob-nota{font-size:11px;text-align:left}
}

/* ==================================================================
   PAINEL , indicadores, arrasto do funil, automações e origem
   Os KPIs no topo leem o kanban: mover um card recalcula os quatro.
   ================================================================== */
.crm-kpis{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:1px;background:var(--line);border-bottom:1px solid var(--line);
}
.kpi{padding:13px 15px;background:var(--surface);min-width:0}
.kpi>span{
  display:block;font:500 9.6px/1 var(--ff-mono);letter-spacing:.07em;
  text-transform:uppercase;color:var(--muted);
}
.kpi>b{
  display:block;margin:7px 0 3px;
  font:600 19px/1 var(--ff-body);letter-spacing:-.02em;color:var(--ink);
  font-variant-numeric:tabular-nums;
}
.kpi>b.kpi-verde{color:var(--violet-2)}
.kpi>small{display:block;font-size:10.4px;line-height:1.35;color:var(--muted)}
.kpi-alerta>b{color:#FBBF24}
@media (max-width:820px){
  .crm-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* dica de interação */
.crm-dica{
  margin:0 0 11px;display:flex;align-items:center;gap:7px;
  font:500 10.6px/1.4 var(--ff-mono);letter-spacing:.03em;color:var(--muted);
}
.crm-dica span{color:var(--violet-2);font-size:12px}

/* --- arrasto no funil --- */
.kb-col{display:flex;flex-direction:column}
.kb-fila{flex:1;min-height:58px;display:flex;flex-direction:column;gap:8px;
  border-radius:10px;transition:background .18s ease,box-shadow .18s ease}
.kb-card{margin-bottom:0;cursor:grab;touch-action:none;
  transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease,opacity .18s ease}
.kb-card:active{cursor:grabbing}
.kb-card:hover{transform:translateY(-2px);border-color:var(--line-2)}
.kb-card.arrastando{opacity:.42;transform:scale(.97) rotate(-1.4deg)}
.kb-col.alvo .kb-fila{
  background:rgba(34,197,94,.07);
  box-shadow:inset 0 0 0 1.5px rgba(34,197,94,.34);
}
/* card que acabou de mudar de etapa */
.kb-card.pousou{animation:kbPousa .58s cubic-bezier(.2,.85,.28,1)}
@keyframes kbPousa{
  0%{transform:scale(1.04);box-shadow:0 0 0 3px rgba(34,197,94,.24)}
  100%{transform:none;box-shadow:0 0 0 0 rgba(34,197,94,0)}
}
/* selo de contato parado */
.kb-alerta{
  position:absolute;top:9px;right:9px;
  padding:2.5px 6px;border-radius:6px;
  font:600 9px/1 var(--ff-mono);letter-spacing:.04em;
  color:#FBBF24;background:rgba(251,191,36,.13);
  box-shadow:inset 0 0 0 1px rgba(251,191,36,.3);
}

/* --- automações --- */
.au-lista{display:grid;gap:8px}
.au-item{
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;gap:13px;padding:13px 15px;
  border:1px solid var(--line);border-radius:12px;background:var(--surface-2);
}
.au-luz{
  width:8px;height:8px;border-radius:50%;background:var(--brand);
  box-shadow:0 0 0 4px rgba(34,197,94,.14);
}
.crm-vista.is-on .au-luz{animation:auPulsa 2.6s ease-in-out infinite}
@keyframes auPulsa{50%{box-shadow:0 0 0 7px rgba(34,197,94,.05)}}
.au-txt b{display:block;font:600 13px/1.25 var(--ff-body);color:var(--ink)}
.au-txt span{display:block;margin-top:3px;font-size:11.6px;line-height:1.5;color:var(--ink-2)}
.au-n{text-align:right;flex:none}
.au-n b{display:block;font:600 16px/1 var(--ff-mono);color:var(--violet-2);font-variant-numeric:tabular-nums}
.au-n small{display:block;margin-top:2px;font:500 9.4px/1 var(--ff-mono);
  letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
@media (max-width:640px){
  .au-item{grid-template-columns:auto minmax(0,1fr);gap:10px}
  .au-n{grid-column:2;text-align:left;display:flex;align-items:baseline;gap:6px;margin-top:2px}
  .au-n small{margin-top:0}
}

/* --- origem do que fecha --- */
.or-grade{display:grid;gap:13px;width:min(100%,760px);margin-inline:auto;padding:6px 0 2px}
.or-linha{
  display:grid;grid-template-columns:minmax(96px,132px) minmax(0,1fr) minmax(96px,auto);
  align-items:center;gap:16px;
}
.or-nome{font:600 12px/1.3 var(--ff-body);color:var(--ink-2)}
.or-barra{
  position:relative;height:10px;border-radius:999px;
  background:var(--surface-2);box-shadow:inset 0 0 0 1px var(--line);overflow:hidden;
}
.or-barra i{
  display:block;height:100%;width:var(--w);border-radius:999px;
  background:linear-gradient(90deg,var(--brand-2),var(--violet-2));
  transform-origin:left center;transform:scaleX(0);
}
.crm-vista.is-on .or-barra i{animation:orCresce .82s cubic-bezier(.2,.8,.25,1) forwards}
.crm-vista.is-on .or-linha:nth-child(2) .or-barra i{animation-delay:.07s}
.crm-vista.is-on .or-linha:nth-child(3) .or-barra i{animation-delay:.14s}
.crm-vista.is-on .or-linha:nth-child(4) .or-barra i{animation-delay:.21s}
.crm-vista.is-on .or-linha:nth-child(5) .or-barra i{animation-delay:.28s}
@keyframes orCresce{to{transform:scaleX(1)}}
.or-val{
  text-align:right;flex:none;
  font:600 12.5px/1 var(--ff-mono);color:var(--ink);font-variant-numeric:tabular-nums;
}
.or-val small{display:block;margin-top:3px;font:500 9.6px/1 var(--ff-mono);
  letter-spacing:.04em;color:var(--muted)}
@media (max-width:560px){
  .or-linha{grid-template-columns:minmax(0,1fr) auto;gap:5px 11px}
  .or-barra{grid-column:1/-1;order:3}
}

@media (prefers-reduced-motion:reduce){
  .crm-vista.is-on .or-barra i{animation:none;transform:scaleX(1)}
  .crm-vista.is-on .au-luz{animation:none}
  .kb-card.pousou{animation:none}
}

/* A tela do painel acompanha o conteúdo. Uso grid (não flex) porque a
   vista Origem tem grade interna de três colunas , o flex colapsava a
   coluna das barras e elas sumiam da tela. */
.crm-vista.is-on{display:grid;align-content:center;justify-items:stretch;gap:0}
.crm-vista.is-on > *{min-width:0}
.crm-vista[data-crm-vista="funil"].is-on{align-content:start}

/* Números do Diagnóstico em verde de marca, não em vermelho de alarme:
   são dados de mercado, não erro do sistema. O card também passa a ter
   altura uniforme, com a citação sempre colada na base. */
.prob .stat b{color:var(--violet-2);-webkit-text-fill-color:var(--violet-2)}
.prob-grid{align-items:stretch}
.prob .stat{margin-top:16px}

/* No celular o arrasto compete com a rolagem lateral do funil, então
   lá o card avança de etapa por toque simples. A dica muda junto. */
@media (max-width:560px){
  .kb-card{cursor:pointer}
  .crm-dica .dica-desktop{display:none}
}
@media (min-width:561px){
  .crm-dica .dica-mobile{display:none}
}

@media (max-width:560px){
  /* A dica não pode competir com o conteúdo do painel. */
  .crm-dica{font-size:9.8px;line-height:1.45;gap:6px;margin-bottom:9px;align-items:flex-start}
  .crm-dica span[aria-hidden]{margin-top:1px}
  /* As abas rolam de lado: "Origem" não pode ficar fora de alcance. */
  .crm-bar{
    overflow-x:auto;scrollbar-width:none;
    flex-wrap:nowrap;padding:9px 12px;gap:4px;
  }
  .crm-bar::-webkit-scrollbar{display:none}
  .crm-tab{flex:none;padding:6px 11px;font-size:12px}
}

/* O card do funil é acionável: precisa de foco visível para teclado. */
.kb-card:focus-visible{
  outline:2.5px solid var(--brand);outline-offset:3px;
  border-color:rgba(34,197,94,.5);
}

/* Botão de avançar etapa: discreto até o card receber atenção.
   O card reserva a faixa da direita para ele (padding-right), então o
   botão nunca fica por cima do valor em R$ que a linha de baixo mostra. */
.kb-card{padding-right:38px}
.kb-mover{
  position:absolute;right:8px;bottom:8px;
  width:24px;height:24px;display:grid;place-items:center;
  border:1px solid var(--line);border-radius:7px;
  background:var(--surface);color:var(--muted);
  font-size:12px;line-height:1;cursor:pointer;
  opacity:0;transition:opacity .18s ease,color .18s ease,border-color .18s ease;
}
.kb-card:hover .kb-mover,
.kb-mover:focus-visible{opacity:1}
.kb-mover:hover{color:var(--violet-2);border-color:rgba(34,197,94,.45)}
.kb-mover:focus-visible{outline:2.5px solid var(--brand);outline-offset:2px}
/* No celular não existe hover: o botão fica sempre visível. */
@media (max-width:560px){ .kb-mover{opacity:.65} }
@media (prefers-reduced-motion:reduce){ .kb-mover{transition:none} }

/* ==================================================================
   ANTES E DEPOIS , painel do topo
   Duas leituras do mesmo dia. A da esquerda é o que o lead vive hoje.
   ================================================================== */
.ad{
  position:relative;overflow:hidden;
  border:1px solid var(--line);border-radius:19px;
  background:linear-gradient(178deg,var(--surface),var(--surface-2));
  box-shadow:0 26px 60px -34px rgba(0,0,0,.72);
}
.ad-topo{
  display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  padding:14px 18px;border-bottom:1px solid var(--line);
}
.ad-dia{
  flex:1;min-width:180px;
  font:500 10.6px/1.3 var(--ff-mono);letter-spacing:.06em;
  text-transform:uppercase;color:var(--muted);
}

.ad-palco{position:relative;padding:18px}

.ad-linhas{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.ad-linhas li{
  display:grid;grid-template-columns:auto minmax(0,1fr);
  align-items:start;gap:12px;padding:13px 15px;
  border:1px solid var(--line);border-radius:12px;background:var(--surface-2);
}
@keyframes adEntra{from{opacity:0;transform:translateY(9px)}}

.ad-ic{
  width:20px;height:20px;flex:none;display:grid;place-items:center;
  border-radius:6px;font-size:11px;line-height:1;font-weight:700;margin-top:1px;
}
.ad-ruim .ad-ic{color:#FBBF24;background:rgba(251,191,36,.13);box-shadow:inset 0 0 0 1px rgba(251,191,36,.28)}
.ad-bom  .ad-ic{color:var(--brand-ink);background:var(--brand)}
.ad-txt{min-width:0}
.ad-txt b{display:block;font:600 13.4px/1.3 var(--ff-body);color:var(--ink)}
.ad-txt small{display:block;margin-top:3px;font-size:11.8px;line-height:1.5;color:var(--ink-2)}
.ad-ruim .ad-txt b{color:var(--ink-2)}

.ad-fecho{
  display:grid;gap:6px;padding:15px 17px;border-radius:13px;
  border:1px solid var(--line);background:var(--surface-2);
}
.ad-fecho-rot{
  font:500 9.6px/1 var(--ff-mono);letter-spacing:.08em;
  text-transform:uppercase;color:var(--muted);
}
.ad-fecho b{font:600 15.4px/1.42 var(--ff-body);letter-spacing:-.018em;color:var(--ink)}
.ad-fecho-ruim{border-color:rgba(251,191,36,.24);background:rgba(251,191,36,.05)}
.ad-fecho-ruim b{color:var(--ink-2)}

.ad-nota{
  margin:0;padding:12px 18px;border-top:1px solid var(--line);
  font-size:11.4px;line-height:1.5;color:var(--muted);text-align:center;
}
/* a moldura esquenta quando o cenário bom está na tela */
.ad{transition:border-color .45s ease}

@media (max-width:620px){
  .ad-topo{padding:12px 14px;gap:11px}
  .ad-dia{font-size:9.8px;min-width:0;flex-basis:100%}
  .ad-palco{padding:14px}
  .ad-linhas li{padding:11px 13px;gap:10px}
  .ad-linhas b{font-size:12.8px}
  .ad-linhas small{font-size:11.2px}
  .ad-fecho b{font-size:14px}
}
@media (prefers-reduced-motion:reduce){
  .ad{transition:none}
}


/* ==================================================================
   CENA DA AUTOMAÇÃO , acompanha a trilha de etapas
   ================================================================== */
.fx{
  height:100%;display:flex;flex-direction:column;gap:0;
  border:1px solid var(--line);border-radius:15px;overflow:hidden;
  background:linear-gradient(178deg,var(--surface),var(--surface-2));
}
.fx-topo{
  display:flex;align-items:center;gap:10px;
  padding:13px 16px;border-bottom:1px solid var(--line);
}
.fx-luz{
  width:8px;height:8px;flex:none;border-radius:50%;background:var(--brand);
  box-shadow:0 0 0 4px rgba(34,197,94,.15);
}
.fx-nome{flex:1;font:600 13px/1 var(--ff-body);color:var(--ink)}
.fx-hora{font:500 10.2px/1 var(--ff-mono);letter-spacing:.04em;color:var(--muted)}

.fx-passos{list-style:none;margin:0;padding:16px;display:grid;gap:0;flex:1;align-content:start}
.fx-passo{
  position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);
  align-items:start;gap:13px;padding:0 0 17px 0;
}
.fx-passo:last-child{padding-bottom:0}
/* fio ligando um passo ao seguinte */
.fx-passo:not(:last-child)::before{
  content:"";position:absolute;left:5.5px;top:16px;bottom:5px;
  width:1.5px;background:linear-gradient(180deg,rgba(34,197,94,.42),rgba(34,197,94,.1));
}
.fx-pt{
  width:13px;height:13px;flex:none;margin-top:2px;border-radius:50%;
  background:var(--surface-2);box-shadow:inset 0 0 0 2px var(--brand);
}
.fx-txt{min-width:0}
.fx-txt b{display:block;font:600 12.8px/1.32 var(--ff-body);color:var(--ink)}
.fx-txt small{display:block;margin-top:3px;font-size:11.4px;line-height:1.48;color:var(--ink-2)}

.fx-passos.entra .fx-passo{animation:fxEntra .5s cubic-bezier(.2,.8,.25,1) backwards}
.fx-passos.entra .fx-passo:nth-child(2){animation-delay:.09s}
.fx-passos.entra .fx-passo:nth-child(3){animation-delay:.18s}
@keyframes fxEntra{from{opacity:0;transform:translateX(-10px)}}

.fx-saida{
  display:flex;align-items:center;gap:9px;
  margin:0 16px 16px;padding:12px 14px;border-radius:11px;
  border:1px solid rgba(34,197,94,.3);
  background:linear-gradient(150deg,rgba(34,197,94,.1),transparent);
  font:600 12.4px/1.4 var(--ff-body);color:var(--ink);
}
.fx-ok{
  width:19px;height:19px;flex:none;display:grid;place-items:center;
  border-radius:50%;background:var(--brand);color:var(--brand-ink);
  font-size:11px;font-weight:700;line-height:1;
}
@media (max-width:620px){
  .fx-passos{padding:14px}
  .fx-saida{margin:0 14px 14px;font-size:11.8px}
}
@media (prefers-reduced-motion:reduce){
  .fx-passos.entra .fx-passo{animation:none}
}

/* ==================================================================
   SEÇÕES CLARAS
   O site é escuro; cinco blocos de leitura densa passam para o claro.
   A troca é feita nos tokens, não componente a componente: tudo que
   já usa --surface, --ink, --line herda o tema novo sem reescrita.
   Verdes ficam mais escuros para manter contraste AA sobre o claro.
   ================================================================== */
.sec.claro{
  --ground:#F6F7F9;   --ground-2:#EDEFF3;
  --surface:#FFFFFF;  --surface-2:#F3F4F7;
  --line:#E3E6EC;     --line-2:#CBD1DA;
  --ink:#0B1220;      --ink-2:#414B5C;  --muted:#6B7484;

  --brand:#16A34A;    --brand-2:#15803D; --brand-ink:#FFFFFF;
  --violet:#15803D;   --violet-2:#15803D;
  --violet-soft:rgba(22,163,74,.09);
  --dark:#0B1220;     --dark-2:#111826;

  position:relative;z-index:1;
  background:var(--ground);
  color:var(--ink);
  border-block:1px solid var(--line);
}
/* Fundo próprio: sem isto o grid e o halo do body atravessam a faixa. */
.sec.claro::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(120% 80% at 50% 0%,rgba(22,163,74,.05),transparent 62%),
    linear-gradient(180deg,var(--ground),var(--ground-2));
}
/* Faixas coladas não repetem a borda entre elas. */
.sec.claro + .sec.claro{border-top:0}

/* Títulos usam gradiente de texto no tema escuro; no claro isso
   apagaria a letra, então voltam à cor sólida. */
.sec.claro h2,.sec.claro .h2,.sec.claro h3,.sec.claro .h3{
  background:none;-webkit-text-fill-color:var(--ink);color:var(--ink);
}
.sec.claro .lede{color:var(--ink-2)}
.sec.claro .mono.eyebrow,.sec.claro .eyebrow{color:var(--brand-2)}
.sec.claro .tick{color:var(--brand)}

/* Botão principal: no claro o verde escuro com texto branco é o que
   passa em contraste e continua sendo o elemento mais forte da faixa. */
.sec.claro .btn-p{background:var(--brand);color:#FFF;box-shadow:none}
.sec.claro .btn-p:hover{background:var(--brand-2)}
.sec.claro .btn-g{
  background:var(--surface);color:var(--ink);
  box-shadow:inset 0 0 0 1px var(--line-2);
}
.sec.claro .btn-g:hover{background:var(--surface-2)}

/* Cartões e tabela ganham peso com sombra, não com brilho. */
.sec.claro .f,.sec.claro .plan,.sec.claro .q,.sec.claro .cmp{
  background:var(--surface);
  box-shadow:0 1px 2px rgba(11,18,32,.05),0 12px 28px -22px rgba(11,18,32,.5);
}
.sec.claro .f:hover{box-shadow:0 2px 4px rgba(11,18,32,.07),0 18px 36px -24px rgba(11,18,32,.55)}
.sec.claro .plan{box-shadow:inset 0 0 0 1px var(--line),0 14px 34px -26px rgba(11,18,32,.55)}
.sec.claro .plan.hot,.sec.claro .plan.complete{
  box-shadow:inset 0 0 0 1.6px var(--brand),0 18px 40px -26px rgba(22,163,74,.4);
}
.sec.claro .plan-tag{background:var(--brand);color:#FFF}
.sec.claro .pnum .val,.sec.claro .pnum .cur{color:var(--ink)}
.sec.claro .anchor s{color:var(--muted)}
.sec.claro .dband,.sec.claro .dsave{background:var(--violet-soft)}
.sec.claro .dpct b,.sec.claro .dsave b{color:var(--brand-2)}
.sec.claro .inherit{background:var(--surface-2)}

.sec.claro .cmp th{background:var(--surface-2);color:var(--ink)}
.sec.claro .cmp td{color:var(--ink-2)}
.sec.claro .cmp tr.total{background:var(--violet-soft)}
.sec.claro .cmp tr.total td{color:var(--ink);font-weight:600}
.sec.claro .cmp-price{color:var(--muted)}
.sec.claro .cmp-logos{background:#FFF;box-shadow:inset 0 0 0 1px var(--line)}
.sec.claro .cmp-disclaimer{color:var(--muted)}

.sec.claro .q summary{color:var(--ink)}
.sec.claro .q .a{color:var(--ink-2)}
.sec.claro .q summary::after{color:var(--brand-2)}

/* O painel do CRM tem chrome próprio: no claro ele vira app de tela
   clara, com o mesmo desenho e os mesmos estados. */
.sec.claro .crm{
  background:var(--surface);
  box-shadow:0 2px 4px rgba(11,18,32,.05),0 26px 60px -34px rgba(11,18,32,.42);
}
.sec.claro .crm-chrome,.sec.claro .kpi{background:var(--surface-2)}
.sec.claro .crm-dots i{background:var(--line-2)}
.sec.claro .crm-dots i:first-child{background:#CBD1DA}
.sec.claro .kb-col{background:var(--surface-2)}
.sec.claro .kb-card{background:#FFF;box-shadow:0 1px 2px rgba(11,18,32,.06)}
.sec.claro .kb-card:hover{border-color:var(--line-2)}
.sec.claro .kb-win{background:linear-gradient(160deg,rgba(22,163,74,.09),#FFF)}
.sec.claro .kb-ok{background:var(--brand);color:#FFF}
.sec.claro .kb-mover{background:#FFF}
.sec.claro .kb-alerta{color:#B45309;background:rgba(180,83,9,.1);box-shadow:inset 0 0 0 1px rgba(180,83,9,.24)}
.sec.claro .kpi-alerta>b{color:#B45309}
.sec.claro .cv-lista li,.sec.claro .cv-msg,.sec.claro .ag-slot,
.sec.claro .au-item,.sec.claro .or-barra{background:var(--surface-2)}
.sec.claro .cv-msg.cv-bot{background:rgba(22,163,74,.09)}
.sec.claro .cv-av{background:var(--line);color:var(--ink-2)}
.sec.claro .fx,.sec.claro .ad{background:var(--surface)}

@media (prefers-reduced-motion:reduce){
  .sec.claro{transition:none}
}

/* ==================================================================
   CONTRASTE NAS SEÇÕES CLARAS
   O bloco de acessibilidade acima fixa cores pensadas para fundo
   escuro (verdes claros, cinzas altos). Sobre o claro elas invertem
   o problema, então aqui vem a contrapartida , mesma hierarquia,
   tons rebaixados até passar AA sobre branco.
   ================================================================== */
.sec.claro .mn-ct-dica,.sec.claro .ag-nota,
.sec.claro .cv-lista small,.sec.claro .kb-card span,
.sec.claro .kb-when,.sec.claro .cmp-na{color:#5A6373}

.sec.claro .crm-live,.sec.claro .cv-ia,
.sec.claro .mono.eyebrow,.sec.claro .save,
.sec.claro .kb-card u,.sec.claro .cmp-yes,.sec.claro .cmp-in,
.sec.claro .seal-kicker,.sec.claro .mn-pl-herda,
.sec.claro .mn-pl-herda b,.sec.claro .ic{color:#15803D}

.sec.claro .cmp-brand{color:#4B5565}
.sec.claro .mt-n{color:#5A6373}

/* Verde de fundo com texto branco: #16A34A dá 3,3:1. Escurecer o
   fundo é o que resolve sem perder a leitura da marca. */
.sec.claro .btn-p,
.sec.claro .kb-ok,.sec.claro .cv-ok,.sec.claro .cv-nao,
.sec.claro .ag-flag,.sec.claro .plan-tag,
.sec.claro .dsave-icon,.sec.claro .fx-ok,.sec.claro .ad-bom .ad-ic{
  background:#137038;color:#FFFFFF;
}
.sec.claro .btn-p:hover{background:#0F5C2E}
.sec.claro .tick{color:#137038}
.sec.claro .toggle .save{color:#0F5C2E}
.sec.claro .inherit span,.sec.claro .inherit b{color:#374151}
.sec.claro .cmp-disclaimer,.sec.claro .prob-fonte{color:#5A6373}
.sec.claro .crm-tab:not(.is-on),.sec.claro .kpi>span,
.sec.claro .kpi>small,.sec.claro .kb-tag,
.sec.claro .crm-title b,.sec.claro .or-val small,
.sec.claro .au-n small{color:#5A6373}
.sec.claro .kpi-verde{color:#137038}
.sec.claro .dpct b,.sec.claro .dsave b,
.sec.claro .or-nome,.sec.claro .au-n b{color:#137038}
.sec.claro .mt-step.is-active .mt-n{color:#137038}

/* Últimos casos: o check herdou o cinza da regra genérica de rótulos,
   os selos de plano e o verificado da Meta ficaram sobre verde/azul
   claros demais, e o contador da coluna precisa de um tom a mais. */
.sec.claro .kb-ok,.sec.claro .cv-ok,.sec.claro .fx-ok{color:#FFFFFF}
.sec.claro .plan-tag,.sec.claro .plan-tag span,
.sec.claro .op-tag,.sec.claro .complete-tag{background:#137038;color:#FFFFFF}
.sec.claro .wa-verified > i{background:#0A5FB8;color:#FFFFFF}
.sec.claro .kb-col header b{color:#4B5565}

/* A trilha de automações já vinha desenhada em claro no CSS herdado
   (moldura branca, destaque #F1FEF6). Em vez de repintá-la de escuro,
   a seção assume o tema claro por inteiro , e a cena dentro da janela
   acompanha, para não ficar um bloco escuro solto no meio do branco. */
.sec.claro .automation-showroom{background:var(--surface);border-color:var(--line)}
.sec.claro .mn-ct-texto{border-right-color:var(--line)}
.sec.claro .mn-ct-texto h3{color:var(--ink);-webkit-text-fill-color:var(--ink);background:none}
.sec.claro .mn-ct-texto p{color:var(--ink-2)}
.sec.claro .mn-ct-texto article > span{color:#15803D}
.sec.claro .mn-ct-texto b{background:#EBF9F0;color:#14532D;border-left-color:#137038}
.sec.claro .mn-ct-rota button b{color:var(--ink-2)}
.sec.claro .mn-ct-rota button.is-active b{color:var(--ink)}
.sec.claro .mn-ct-rota button > i{background:var(--surface);color:#5A6373;box-shadow:0 0 0 4px var(--surface)}
.sec.claro .mn-ct-rota button.is-active > i,
.sec.claro .mn-ct-rota button.is-complete > i{background:#137038;color:#FFF}
.sec.claro .mn-ct-dica{color:#5A6373}
.sec.claro .auto-signature span{color:var(--ink-2)}
.sec.claro .auto-signature b{color:var(--ink)}

/* a cena de etapas vira clara junto com a seção */
.sec.claro .fx{background:var(--surface);border-color:var(--line)}
.sec.claro .fx-topo{border-bottom-color:var(--line)}
.sec.claro .fx-nome{color:var(--ink)}
.sec.claro .fx-hora{color:#5A6373}
.sec.claro .fx-txt b{color:var(--ink)}
.sec.claro .fx-txt small{color:var(--ink-2)}
.sec.claro .fx-pt{background:var(--surface);box-shadow:inset 0 0 0 2px #137038}
.sec.claro .fx-luz{background:#137038;box-shadow:0 0 0 4px rgba(19,112,56,.16)}
.sec.claro .fx-saida{
  background:linear-gradient(150deg,rgba(19,112,56,.09),transparent);
  border-color:rgba(19,112,56,.3);color:var(--ink);
}

/* O check dentro do círculo verde estava perdendo para a regra genérica
   de rótulos cinza da seção clara. Especificidade suficiente para vencer. */
.sec.claro .kb-card .kb-ok,
.sec.claro .cv-thread .cv-ok,
.sec.claro .fx-saida .fx-ok{color:#FFFFFF}


/* ============================================================
   CORREÇÃO: FUNDOS CLAROS HERDADOS DENTRO DE SEÇÕES ESCURAS
   O template de origem era tema claro. Sobraram gradientes com
   paradas brancas/quase brancas escritas para página branca. Em
   seção escura o texto (que virou claro) some por cima delas.
   Os overrides ficam sob :not(.claro) para que, se a seção virar
   clara depois, o desenho original volte sozinho.
   ============================================================ */

/* Faixa da IA: era linear-gradient(130deg,#E7FBEE,...), menta quase opaca. */
.sec:not(.claro) .ai-band{
  background:linear-gradient(130deg,rgba(34,197,94,.10),rgba(34,197,94,.03) 62%,transparent);
  box-shadow:inset 0 0 0 1.2px var(--line);
}
.sec:not(.claro) .ai-band .lede{color:var(--ink-2)}
.sec:not(.claro) .ai-list div{color:var(--ink-2)}

/* Trilha da primeira semana: a parada rgba(255,255,255,.98) a 48% pintava
   uma faixa branca no meio do card e engolia o texto. */
.sec:not(.claro) .tl-i,
.sec:not(.claro) .tl-i.is-active,
.sec:not(.claro) .tl-i.is-complete{
  background:linear-gradient(115deg,rgba(34,197,94,.09) 0%,var(--surface) 46%,rgba(34,197,94,.05) 100%);
  box-shadow:inset 0 0 0 1.2px var(--line);
}
.sec:not(.claro) .tl-i.is-active,
.sec:not(.claro) .tl-i.is-complete{
  box-shadow:inset 0 0 0 1.2px rgba(34,197,94,.34),0 16px 34px -22px rgba(34,197,94,.28);
}
.sec:not(.claro) .tl-i b{color:var(--ink)}
.sec:not(.claro) .tl-i p{color:var(--ink-2)}
.sec:not(.claro) .tl-i .n{box-shadow:inset 0 0 0 1.2px var(--violet-2),0 0 0 7px var(--ground)}
.sec:not(.claro) .tl-i.is-complete .n{background:var(--brand);color:var(--brand-ink)}
.sec:not(.claro) .tl-i.is-complete .n::after{box-shadow:0 0 0 3px var(--ground)}

/* Barra fixa do mobile: gradiente branco animado com texto claro por cima. */
.sticky{
  background:rgba(9,9,11,.94)!important;
  border-top:1px solid rgba(34,197,94,.28);
  box-shadow:0 -10px 30px -18px rgba(0,0,0,.9);
  animation:none;
}
.sticky .p{color:var(--muted)}
.sticky .p b{color:var(--ink)}

/* Modal dos agentes de IA: painel branco com texto claro por cima. */
.ai-modal-panel{
  background:linear-gradient(135deg,var(--surface) 0%,var(--surface-2) 52%,rgba(34,197,94,.07) 100%);
  border-color:rgba(34,197,94,.22);
}
.ai-modal-list>div{background:rgba(255,255,255,.035);border-color:var(--line)}
.ai-modal-list>div b{color:var(--ink)}
.ai-modal-list>div small{color:var(--ink-2)}
.ai-modal-close{background:var(--surface-2);color:var(--ink);border-color:var(--line)}
.ai-modal-close:hover{background:var(--surface)}

/* O .op-tag define background com !important lá em cima, então o override
   da seção clara perdia e o selo ficava branco sobre verde médio (3,3:1). */
.sec.claro .plan-op .op-tag{background:#0F5C2E!important;color:#FFFFFF!important}
.sec.claro .seal-kicker{color:#0F5C2E}

/* ==================================================================
   ARQUITETURA CLARO / ESCURO , 73% claro, 27% escuro
   ------------------------------------------------------------------
   Base medida em 15 sites B2B/SaaS reais (Attio, Vanta, HubSpot,
   Ramp, Gong, Kommo, Pipedrive, RD, folk, Intercom, Ashby, Clay,
   Linear, Mercury, Close) em 06/set/2026, viewport 1440.

   Três decisões que vêm da medição, não de gosto:

   1. HERO CLARO. 11 dos 15 têm hero claro. Hero escuro quase nunca é
      pontual: dos 4 escuros, 3 mantêm escuro até o rodapé. Hero claro
      também integra o print do CRM (que é uma UI clara) em vez de
      abrir um buraco de luz nele.

   2. NADA DE CORTE DIAGONAL. Zero dos 15 usa clip-path diagonal como
      divisor. É padrão de 2016-2019. O que se usa hoje é corte seco
      de background-color (Vanta, HubSpot, Kommo, Gong), fio de 1px um
      degrau acima do fundo (Attio) e fade por gradiente (Clay, Ramp).

   3. PREÇO SEMPRE NO CLARO. Nenhum dos 15 põe preço no escuro, e a
      evidência de legibilidade explica: a vantagem do fundo claro
      cresce conforme a fonte diminui (Piepenbrock 2013, n=169), e
      tabela de preço é justamente onde a fonte é menor.

   Três âncoras escuras, na ordem: a dor (#problema), o cinturão de
   plataforma + dossiê (#aplicativo → #agentes-ia → #dossie) e o
   fechamento (#analise + rodapé).
   ================================================================== */

/* O escuro é o padrão do :root, então .escuro só precisa marcar a
   costura. O fio de 1px é o truque do Attio: um degrau acima do fundo,
   o que dá a impressão de chapa encaixada em vez de borda desenhada. */
.sec.escuro{
  position:relative;
  border-top:1px solid #23262B;
  border-bottom:1px solid #23262B;
}
/* Âncoras coladas (o cinturão do meio) não repetem o fio entre elas. */
.sec.escuro + .sec.escuro{border-top:0}
.sec.escuro:has(+ .sec.escuro){border-bottom:0}

/* Fade de entrada: a seção escura dissolve os primeiros 180px a partir
   da cor da faixa clara anterior, em vez de cortar seco. Só quando a
   seção anterior é clara , entre duas escuras não há salto a suavizar. */
.sec.claro + .sec.escuro::after,
.hero.claro + .sec.escuro::after{
  content:"";position:absolute;inset-inline:0;top:0;height:170px;
  z-index:0;pointer-events:none;
  background:linear-gradient(#F6F7F9,rgba(9,9,11,0));
  opacity:.14;
}
/* Saída: a última faixa escura do cinturão devolve a luz para a
   seção clara seguinte pelo mesmo mecanismo, invertido. */
.sec.escuro:has(+ .sec.claro)::before{
  content:"";position:absolute;inset-inline:0;bottom:0;height:150px;
  z-index:0;pointer-events:none;
  background:linear-gradient(rgba(9,9,11,0),#F6F7F9);
  opacity:.10;
}
.sec.escuro > *{position:relative;z-index:1}

@media(prefers-reduced-motion:reduce){
  .sec.escuro::after,.sec.escuro::before{display:none}
}

/* ==================================================================
   HERO CLARO
   ------------------------------------------------------------------
   O hero era escuro e trazia decoração pensada para fundo escuro:
   dois blobs verdes, um halo e um grid de linhas brancas. No claro
   isso vira mancha suja , glow só funciona por adição de luminância,
   e fundo branco já está no teto: não sobra headroom para a luz
   vazar. Então a decoração some e entra o glow radial na BASE do
   hero, medido no Attio, que é onde o claro aceita cor sem sujar.
   ================================================================== */
.hero.claro{
  border-top:0;
  padding-bottom:clamp(52px,6vw,86px);
}
.hero.claro .blob,
.hero.claro .hero-glow,
.hero.claro .hero-spot{display:none}

/* Grid decorativo: as linhas de styles.css:179 são quase pretas, e
   foram escritas justamente para um hero branco. Agora funcionam. */
.hero.claro .hero-grid{opacity:.9}

/* Glow de marca subindo do rodapé do hero (valores derivados do
   Attio: um radial de cor em baixo, um lavando o topo de volta ao
   branco atrás do menu, para o logo não flutuar sobre cor). */
.hero.claro::after{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(72% 104% at 50% 0%,var(--surface) 30%,rgba(255,255,255,0) 66%),
    radial-gradient(96% 74% at 50% 100%,rgba(22,163,74,.16) 0%,rgba(22,163,74,.07) 44%,rgba(255,255,255,0) 78%);
}

/* O h1 usava gradiente branco→cinza, que no claro apagaria a letra. */
.hero.claro h1{
  background:none;-webkit-text-fill-color:var(--ink);color:var(--ink);
}
.hero.claro h1 .swap,.hero.claro h1 b,.hero.claro h1 em,.hero.claro h1 .accent{
  -webkit-text-fill-color:var(--brand-2);color:var(--brand-2);
}
/* A marca é um traço de marca-texto que cobre só o terço de baixo da
   letra (styles.css:249). No escuro isso funcionava porque o texto era
   claro; no claro, texto verde sobre traço verde sumiria e texto branco
   ficaria branco no branco na metade de cima. Então o termo volta para
   a tinta do tema e o traço vira o acento verde por baixo dele. */
.hero.claro .mn-troca-termo{-webkit-text-fill-color:var(--ink);color:var(--ink)}
.hero.claro .mn-marca{background:rgba(22,163,74,.24);border-radius:3px}
.hero.claro .hero-kicker{color:var(--ink-2)}
/* branco sobre #16A34A da 3,3:1 a 13px , o selo usa o verde escuro */
.hero.claro .hero-kicker strong{background:var(--brand-2);color:#FFF}
.hero.claro .hero-kicker span{border-bottom-color:rgba(22,163,74,.34)}
.hero.claro .hero-micro{color:var(--ink-2)}
.hero.claro .mn-ci-passo b{color:var(--muted)}
.hero.claro .mn-ci-passo.hot b{color:var(--brand-2)}
.hero.claro .mn-ci-passo i{background:var(--surface);box-shadow:inset 0 0 0 1.6px var(--line-2)}
.hero.claro .mn-ci-passo.hot i{background:var(--brand);box-shadow:inset 0 0 0 1.6px var(--brand)}
.hero.claro .mn-ci-linha{background:var(--line)}
.hero.claro .mn-ci-tag{color:var(--muted)}
.hero.claro .mn-ci-volta svg path{stroke:var(--line-2)}
.hero.claro .mn-ci-seta path{stroke:var(--line-2)}

/* ------------------------------------------------------------------
   O painel do produto continua ESCURO dentro do hero claro.
   É o padrão do Ramp: a âncora dramática não é uma seção inteira, é
   o próprio print do produto , retângulo escuro arredondado
   respirando dentro de um hero claro. Dá o contraste da faixa escura
   já na primeira dobra sem gastar a carta de uma seção.
   ------------------------------------------------------------------ */
.hero.claro .interactive-shot{
  --ground:#09090B;   --ground-2:#050505; --surface:#0F0F12; --surface-2:#141418;
  --line:#27272A;     --line-2:#3F3F46;
  --ink:#FAFAFA;      --ink-2:#D4D4D8;    --muted:#A1A1AA;
  --brand:#22C55E;    --brand-2:#16A34A;  --brand-ink:#04140A;
  --violet:#22C55E;   --violet-2:#4ADE80; --violet-soft:rgba(34,197,94,.10);

  background:var(--ground);
  color:var(--ink);
  border-radius:18px;
  padding:clamp(14px,1.6vw,22px);
  box-shadow:
    inset 0 0 0 1px #23262B,
    0 34px 70px -30px rgba(9,11,18,.45),
    0 4px 14px -8px rgba(9,11,18,.22);
}
.hero.claro .interactive-shot .ad{background:transparent}
.hero.claro .interactive-shot .ad-dia,
.hero.claro .interactive-shot .ad-nota{color:var(--muted)}

/* ------------------------------------------------------------------
   Topo do site sobre hero claro.
   O nav era escuro porque o hero era escuro. Com o hero claro ele
   virava uma tarja pesada sem função. Vira claro, com fio de 1px.
   A tarja de autoridade sai do verde chapado e vira escura: verde
   deve ficar reservado ao CTA e a 3-5 números , se ele também for
   fundo de faixa, de ícone e de selo, o botão verde deixa de isolar
   (efeito Von Restorff; foi isso que decidiu o teste da HubSpot).
   ------------------------------------------------------------------ */
.nav,.stickytop{
  background:rgba(255,255,255,.86)!important;
  border-bottom:1px solid #E3E6EC;
}
.nav .btn-g{color:#0B1220;border-color:#CBD1DA;background:#FFF}
.nav .btn-g:hover{background:#F3F4F7;border-color:#16A34A;color:#15803D}
.nav .btn-p{background:#16A34A;color:#FFF}
.nav .btn-p:hover{background:#15803D}
.logo-image img,.brand-logo-clip img{filter:none}

.topbar{
  background:#09090B!important;
  color:#D4D4D8!important;
  border-bottom:1px solid #23262B;
}
.topbar .tb-main{color:#D4D4D8!important}
.topbar b,.topbar .tb-main b{color:#4ADE80!important}

/* ==================================================================
   DOSSIÊ , o entregável de serviço
   ------------------------------------------------------------------
   Fecha o cinturão escuro do meio. É o bloco que sustenta o
   posicionamento: empresa de serviço que entrega software. Dois
   cards vêm marcados como âncora (Diagnóstico e Playbook) porque
   são os dois que mais mudam por cliente e os que mais geram ação
   imediata , o resto do dossiê é metodologia aplicada.
   ================================================================== */
.dossie-grade{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:14px;
  margin-top:40px;
}
.dossie-card{
  grid-column:span 1;
  display:flex;flex-direction:column;gap:9px;
  padding:24px 21px 22px;
  border-radius:var(--r-lg,16px);
  background:var(--surface);
  box-shadow:inset 0 0 0 1.2px var(--line);
  min-width:0;
}
/* As duas âncoras marcam por tratamento, não por tamanho: 8 cards em
   4 colunas fecham duas linhas cheias, e qualquer span deixaria uma
   coluna órfã (10 unidades não dividem por 4). */
.dossie-ancora{
  background:linear-gradient(150deg,rgba(34,197,94,.09),var(--surface) 58%);
  box-shadow:inset 0 0 0 1.4px rgba(34,197,94,.30);
}
.dossie-n{
  font-family:var(--ff-mono,var(--ff-display));
  font-size:11px;letter-spacing:.16em;font-weight:600;
  color:var(--brand);
}
.dossie-ancora .dossie-n{color:var(--violet-2)}
.dossie-card b{
  font-family:var(--ff-display);font-size:17.5px;letter-spacing:-.02em;
  color:var(--ink);line-height:1.2;
}
.dossie-card p{margin:0;font-size:13.6px;line-height:1.55;color:var(--ink-2)}
.dossie-card p b{font-family:inherit;font-size:inherit;letter-spacing:normal;color:var(--ink)}
.dossie-pay{
  margin-top:auto;padding-top:12px;
  border-top:1px solid var(--line);
  font-size:13px;line-height:1.5;color:var(--ink-2);
}
.dossie-pay b{color:var(--violet-2);font-weight:700}

.dossie-fecho{
  margin-top:22px;
  display:flex;align-items:center;justify-content:space-between;gap:26px;
  padding:26px 26px 26px 28px;
  border-radius:var(--r-lg,16px);
  background:linear-gradient(120deg,rgba(34,197,94,.11),rgba(34,197,94,.03) 64%,transparent);
  box-shadow:inset 0 0 0 1.2px rgba(34,197,94,.24);
}
.dossie-fecho-txt{display:flex;flex-direction:column;gap:7px;min-width:0}
.dossie-fecho-txt b{
  font-family:var(--ff-display);font-size:clamp(17px,1.9vw,21px);
  letter-spacing:-.025em;color:var(--ink);line-height:1.22;
}
.dossie-fecho-txt span{font-size:13.6px;line-height:1.55;color:var(--ink-2)}
.dossie-fecho .btn{flex:none;white-space:nowrap}

@media(max-width:1080px){.dossie-grade{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){
  .dossie-grade{grid-template-columns:1fr;gap:12px}
  .dossie-fecho{flex-direction:column;align-items:flex-start;gap:18px}
  .dossie-fecho .btn{width:100%;justify-content:center}
}

/* Na faixa clara o mesmo bloco continua legível , usado quando o
   dossiê é citado fora do cinturão escuro. */
.sec.claro .dossie-card{background:var(--surface);box-shadow:inset 0 0 0 1px var(--line),0 12px 28px -24px rgba(11,18,32,.5)}
.sec.claro .dossie-ancora{background:linear-gradient(150deg,rgba(22,163,74,.07),#FFF 58%);box-shadow:inset 0 0 0 1.4px rgba(22,163,74,.30)}
.sec.claro .dossie-n,.sec.claro .dossie-ancora .dossie-n{color:var(--brand-2)}
.sec.claro .dossie-pay b{color:var(--brand-2)}

/* ==================================================================
   PLANOS , proporção, alinhamento e o 3º card
   ------------------------------------------------------------------
   Sete causas somadas deixavam os três cards desalinhados:

   1. o card 1 não tinha selo, então começava 29px acima dos outros;
   2. .plan.hot usava transform:translateY(-10px), que move o card
      DEPOIS do layout , nada interno pode alinhar com isso ligado;
   3. o card 3 tinha parágrafo no lugar do preço: 26px contra 50px de
      peso visual, e altura variando de 24 a 84px conforme a largura;
   4. cada .plan era um contexto de layout isolado , align-items:
      stretch iguala caixas, não linhas;
   5. .for tinha min-height de 2 linhas, e as três descrições quebram
      em números de linha diferentes;
   6. o véu verde do card 3 (::before sem z-index em pai sem stacking
      context) pintava POR CIMA do texto, lavando o card;
   7. o clip-path do .rv cortava a sombra e a elevação do card do meio
      exatamente na border-box , o destaque não lia como destaque.

   A regra de projeto que resolve o conflito: presença por escala
   tipográfica, nunca por deslocamento. "Meio deslocado para cima" e
   "linhas internas alinhadas" são requisitos mutuamente exclusivos.
   ================================================================== */

.plans{
  --pscale:1;
  --pscale-hot:1.15;          /* os 15% pedidos, num número só */

  display:grid;
  grid-template-columns:repeat(3,1fr);
  column-gap:16px;row-gap:15px;
  align-items:stretch;
  /* as quatro faixas que precisam bater nos três cards */
  grid-template-rows:[head] auto [price] auto [cta] auto [rest] 1fr;
}
.plan{--ps:var(--pscale)}
.plan.hot{--ps:var(--pscale-hot)}

/* --- o card adota as faixas do pai em vez de empilhar sozinho ------ */
.plan{
  display:grid;
  grid-row:head / -1;
  grid-template-rows:subgrid;
  position:relative;
  isolation:isolate;                 /* devolve o véu verde para trás */
  padding:58px 25px 27px;            /* topo idêntico nos três */
  min-width:0;
}
/* Itens de grade têm min-width:auto por padrão e não encolhem abaixo do
   conteúdo , sem isto a descrição estoura a caixa do card. */
.plan > *{min-width:0}
.plan > .plan-head {grid-row:head}
.plan > .plan-price{grid-row:price}
.plan > .btn       {grid-row:cta}
.plan > .plan-rest {grid-row:rest;display:flex;flex-direction:column;gap:15px;min-width:0}

/* --- escala tipográfica: é o que o olho lê como "maior" ------------ */
.plan .nm  {font-size:calc(20px * var(--ps))}
.pnum .cur {font-size:calc(18px * var(--ps))}
.pnum .val {font-size:calc(clamp(40px,4.6vw,50px) * var(--ps))}
.pnum .per {font-size:calc(14px * var(--ps))}
.plan .btn {font-size:calc(15.5px * var(--ps));padding-block:calc(13px * var(--ps))}

/* --- as três linhas de preço apoiam na MESMA linha de base --------- */
.price-row{
  display:flex;align-items:flex-end;justify-content:space-between;
  gap:11px;width:100%;
  min-height:calc(clamp(40px,4.6vw,50px) * var(--pscale-hot));
}

/* --- descrição com teto, não só piso ------------------------------- */
.plan .for{min-height:calc(13.5px * 1.46 * 3)}

/* --- elevação sem sair da caixa da grade --------------------------- */
.plan.hot{
  transform:none;
  background:linear-gradient(180deg,rgba(34,197,94,.06),var(--surface));
  box-shadow:
    inset 0 0 0 2px var(--violet),
    0 34px 64px -34px rgba(34,197,94,.55),
    0 6px 18px -8px rgba(0,0,0,.45);
}
/* O .rv corta na border-box; a folga interna com margem negativa
   devolve ao layout o espaço que a sombra precisa para vazar. */
@media(min-width:1181px){
  .plans{padding:46px 34px;margin:-46px -34px}
}
.price-sec{overflow-x:clip}

/* --- selos: os três cards têm topo idêntico ------------------------ */
.plan-tag{top:12px;z-index:4}
.start-tag{
  background:var(--surface-2)!important;color:var(--ink-2)!important;
  box-shadow:inset 0 0 0 1px var(--line-2);border:0!important;
}
.sec.claro .start-tag{background:#F3F4F7!important;color:#414B5C!important;box-shadow:inset 0 0 0 1px #CBD1DA}

/* --- 3º card ------------------------------------------------------ */
/* O véu verde volta para trás do conteúdo (era ::before sem z-index
   num pai sem stacking context, logo pintava sobre os filhos). */
.plan-op::before{z-index:-1}

/* Faixa superior: mesma caixa do .dband, leitura neutra em vez de OFF. */
.dband-op{background:var(--surface-2);border-color:var(--line-2);color:var(--ink-2)}
.dband-op .discount-label{color:var(--ink-2)}
.dband-op .discount-label>svg{stroke:var(--brand)}
.dpct-op{
  border-color:var(--line-2);background:transparent;color:var(--ink);
  font-family:var(--ff-body);font-size:11px;font-weight:700;letter-spacing:.06em;
}
/* O número: mesma família, mesmo peso e mesmo tamanho do preço dos
   vizinhos. "38" a 50px é fisicamente o mesmo objeto que "497" a 50px;
   um parágrafo a 26px não é, e o olho não achava âncora na 3ª coluna.
   O prazo já era afirmado no próprio card, então não é promessa nova. */
.plan-op .pnum .val{color:var(--ink)}
.plan-op .pnum .per{font-size:calc(20px * var(--ps));font-weight:600;color:var(--ink-2)}
.dsave-op{border-color:var(--line-2);background:var(--surface-2);color:var(--ink-2)}
.dsave-op .dsave-icon{background:var(--brand);color:var(--brand-ink)}
.dsave-op b{color:var(--ink);font-weight:700}
.sec.claro .dband-op,.sec.claro .dsave-op{background:var(--surface-2)}
.sec.claro .dsave-op b,.sec.claro .dpct-op{color:var(--ink)}

/* --- navegador sem subgrid ---------------------------------------- */
@supports not (grid-template-rows:subgrid){
  .plan{display:flex;flex-direction:column;gap:15px}
  .plan > .plan-rest{flex:1}
  .plan > .plan-price{min-height:172px}
}

/* --- coluna única: sem escala, não há o que comparar --------------- */
@media(max-width:1180px){
  .plans{
    grid-template-columns:1fr;grid-template-rows:none;
    max-width:480px;margin-inline:auto;padding:0;
  }
  .plan{display:flex;flex-direction:column;gap:15px;grid-row:auto;--ps:1}
  /* .plan.hot tem especificidade maior que .plan, entao zerar a escala
     no .plan sozinho nao bastava , o card do meio continuava 15% maior
     empilhado, onde nao ha com o que comparar. */
  .plan.hot{transform:none;--ps:1}
  .plan > .plan-rest{flex:1}
}

/* O selo de economia tinha white-space:nowrap e ficava em linha única:
   "Você deixa de pagar" + "R$ 300/mês" pedem 221px numa coluna de 313px
   que já tem o preço do lado. Era essa a origem do texto cortado no meio
   da palavra. O próprio styles.css já traz a versão em duas linhas, mas
   só sob .price-sec.is-annual , aqui ela passa a valer sempre. */
.dsave{
  display:grid;
  grid-template-columns:17px auto;
  grid-template-areas:"icon label" ". amount";
  column-gap:4px;row-gap:1px;
  align-items:center;
  padding-block:6px;line-height:1.15;
  white-space:normal;
  min-width:0;
}
.dsave>.dsave-icon{grid-area:icon}
.dsave-label{grid-area:label}
.dsave-amount{grid-area:amount;white-space:nowrap}
.price-row>*{min-width:0}
.pnum{flex:0 0 auto}
.dband{min-width:0}
.dband .discount-label{min-width:0;overflow:hidden;text-overflow:ellipsis}
.dpct,.dpct-op{flex:0 0 auto;white-space:nowrap}
.pfoot a{color:inherit;text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1px}
.pfoot a:hover{color:var(--brand)}
.sec.claro .pfoot a:hover{color:var(--brand-2)}

/* ==================================================================
   FUNDOS CLAROS HERDADOS QUE SOBRARAM NAS FAIXAS ESCURAS
   ------------------------------------------------------------------
   O site nasceu de um template claro e foi repintado escuro por
   tokens. Sobraram cores fixas escritas para página branca, que
   continuam valendo dentro das faixas escuras , com texto claro por
   cima. Cada regra abaixo é escopada em .sec:not(.claro) para que,
   se a faixa mudar de lado, o override se desfaça sozinho.
   ================================================================== */

/* Botão secundário: brand.css redefine .btn-g e o hover, mas não o
   background do hover , o `background:#fff` de styles.css:99 seguia
   valendo e o botão virava branco sólido com texto verde (2,3:1). */
.sec:not(.claro) .btn-g:hover,
.hero:not(.claro) .btn-g:hover{background:var(--surface-2);color:var(--brand)}

/* Medalhão da garantia: gradiente branco fixo com o texto "Garantia"
   pintado em verde claro por cima (1,6:1 , a palavra sumia). */
.sec:not(.claro) .seal-inner{
  background:linear-gradient(155deg,var(--surface),var(--surface-2));
  box-shadow:inset 0 0 0 1.2px rgba(34,197,94,.28),inset 0 0 0 3px rgba(34,197,94,.10);
  color:var(--violet-2);
}
.sec:not(.claro) .seal-kicker{color:#5FE08C}

/* Selos das lojas: fundo branco fixo com "Baixe para" em --muted, que
   no escuro é cinza claro , cinza claro sobre branco, 1,9:1. */
.sec:not(.claro) .store-badge{
  background:var(--surface);border-color:var(--line);box-shadow:none;color:var(--ink);
}
.sec:not(.claro) .store-badge small{color:var(--ink-2)}
.sec:not(.claro) .store-ios b,.sec:not(.claro) .store-android b{color:var(--ink)}

/* Subtítulo do app em verde escuro fixo (#068434) sobre --ground-2. */
.sec:not(.claro) .mobile-app-copy h3{color:var(--ink)}

/* Mockup do celular: fundo claro fixo com color:var(--ink), que no
   escuro é quase branco , qualquer texto novo ali nasceria invisível. */
.app-phone-ui{color:#11182B}

/* Grade decorativa do hero: linhas quase pretas para hero branco.
   Com o hero claro elas voltam a funcionar, mas se a faixa virar
   escura de novo, aqui está a inversão. */
.hero:not(.claro) .hero-grid{
  background-image:
    linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px);
}

/* Bombas armadas: peças que hoje só existem em faixa clara, mas cujo
   CSS de origem assume página branca. Com a arquitetura nova as
   faixas mudam de lado, então elas ganham par para os dois temas. */
.toggle button[aria-pressed="true"]{color:var(--ground)}
.toggle .save{background:var(--surface)}
.cmp tr.total td{background:var(--violet-soft)}
.sec:not(.claro) .plist .meta-deliverable{
  background:rgba(8,123,234,.10);border-color:rgba(8,123,234,.32);box-shadow:none;
}
.sec:not(.claro) .meta-deliverable .new b{color:#7FC3FF}
.sec:not(.claro) .automation-showroom{background:var(--surface);border-color:var(--line)}
.sec:not(.claro) .mn-ct-palco{
  background:linear-gradient(135deg,var(--surface) 0,var(--surface-2) 42%,var(--ground-2) 100%);
}
.sec:not(.claro) .mn-ct-rota{background:linear-gradient(110deg,var(--surface),var(--surface-2))}
.sec:not(.claro) .dpct{
  background:var(--violet-soft);color:var(--violet-2);border-color:rgba(34,197,94,.34);
}

/* ==================================================================
   CONTRASTE AA NA ARQUITETURA NOVA
   Medido no navegador com luminância relativa, sobre o fundo efetivo
   de cada elemento. Cinco reprovações reais , o resto do relatório
   era o mockup do celular, que é UI simulada de 6-7px.
   ================================================================== */

/* --muted claro dava 4,40:1 sobre #F6F7F9. Falta pouco, mas falta:
   rótulos do ciclo do hero e nomes das fases do método usam esse token. */
.sec.claro{--muted:#616A79}

/* Verde de marca como TEXTO sobre claro: #16A34A dá 3,07:1 a 11px.
   O texto verde passa a usar sempre o tom rebaixado; o #16A34A
   continua sendo o verde de PREENCHIMENTO (botão, selo, ponto). */
.sec.claro .mono,.sec.claro .mono.muted,.hero.claro .mono{color:var(--brand-2)}
.sec.claro .tick{color:var(--brand-2)}

/* CTA do topo: branco sobre #16A34A dá 3,3:1 a 15px. O botão do nav
   fica sobre fundo claro, então usa o verde escuro. */
.nav .btn-p{background:#15803D;color:#FFF}
.nav .btn-p:hover{background:#116331}

/* ==================================================================
   AS CINCO TAREFAS , o peso de cada uma
   ------------------------------------------------------------------
   A provocação não vem de adjetivo, vem de aritmética que o dono
   consegue refazer com os números dele. Cada etapa mostra a conta, o
   horário em que a tarefa realmente cai (nenhuma das cinco é em
   horário comercial) e o que some quando ela falha.
   ================================================================== */
.mn-ct-texto{align-items:flex-start;overflow-y:auto;padding-block:34px 30px}
.mn-ct-texto article{gap:10px}
.mn-ct-texto h3{font-size:clamp(21px,1.9vw,26px);line-height:1.08}
.mn-ct-texto p{font-size:13.4px}

.ct-peso{
  width:100%;margin-top:2px;
  display:flex;flex-direction:column;gap:9px;
  padding:14px 15px 13px;
  border-radius:13px;
  background:rgba(34,197,94,.06);
  box-shadow:inset 0 0 0 1px var(--line);
}
/* --- a conta, armada na vertical como no papel --------------------- */
/* styles.css:522 pinta TODO <b> dentro de .mn-ct-texto com borda verde,
   padding e fundo , era a caixa de resumo da etapa. Os números da conta
   também são <b>, então herdavam a caixa inteira e a conta virava uma
   pilha de blocos. Aqui eles voltam a ser só número. */
.ct-conta b,.auto-soma b,.ct-hora,.ct-ferida{
  margin:0!important;padding:0!important;border:0!important;
  background:none!important;border-radius:0!important;
}
.ct-conta{
  display:grid;gap:3px;
  padding-bottom:10px;
}
.ct-linha{
  display:grid;
  grid-template-columns:14px auto 1fr;
  align-items:baseline;gap:0 7px;
}
.ct-linha > i{
  font-style:normal;font-family:var(--ff-display);font-size:15px;font-weight:600;
  color:var(--muted);text-align:center;
}
.ct-linha > b{
  font-family:var(--ff-display);font-size:21px;font-weight:700;
  letter-spacing:-.035em;color:var(--ink)!important;
  font-variant-numeric:tabular-nums;text-align:right;min-width:2.4ch;
}
.ct-linha > small{font-size:10.5px;line-height:1.3;color:var(--muted)}

/* o traço da conta e o resultado */
.ct-linha-total{
  margin-top:5px;padding-top:9px;
  border-top:1.5px solid var(--line-2);
}
.ct-linha-total > i{color:var(--brand)}
.ct-linha-total > b{
  font-size:30px;font-weight:800;letter-spacing:-.05em;
  color:var(--brand)!important;
}
.ct-linha-total > small{color:var(--ink-2);font-weight:600}

/* --- o horário que ninguém tem ------------------------------------ */
.ct-hora{
  margin:0!important;font-size:11.5px!important;line-height:1.4!important;
  font-weight:600;color:var(--ink)!important;
  display:flex;align-items:flex-start;gap:6px;
}
.ct-hora > span{color:var(--brand);flex:none;font-size:12px;line-height:1.25}

/* --- o que some quando falha -------------------------------------- */
.ct-ferida{margin:0!important;font-size:12.4px!important;line-height:1.5!important;color:var(--ink-2)!important}
.ct-fonte{
  font-style:normal;font-size:10px;line-height:1.38;color:var(--muted);
  padding-top:8px;border-top:1px solid var(--line);
}

/* --- a soma das cinco, no cabeçalho da seção ---------------------- */
.auto-soma{
  margin:20px auto 0;max-width:600px;
  display:flex;align-items:center;gap:16px;text-align:left;
  padding:16px 20px;border-radius:15px;
  background:var(--surface);
  box-shadow:inset 0 0 0 1px var(--line),0 14px 32px -26px rgba(11,18,32,.5);
}
.auto-soma-n b{
  font-family:var(--ff-display);font-size:clamp(38px,4.4vw,52px);font-weight:800;
  letter-spacing:-.055em;line-height:.9;color:var(--brand);
  font-variant-numeric:tabular-nums;display:block;
}
.auto-soma-txt{display:flex;flex-direction:column;gap:4px;min-width:0}
.auto-soma-txt b{font-size:14.5px;line-height:1.3;color:var(--ink)}
.auto-soma-txt span{font-size:12.6px;line-height:1.48;color:var(--ink-2)}

@media(max-width:900px){
  .mn-ct-texto{min-height:0;overflow:visible}
  .ct-fator b{font-size:18px}
  .ct-total b{font-size:30px}
}
@media(max-width:552px){
  .auto-soma{flex-direction:column;align-items:flex-start;gap:9px;padding:15px 17px}
  .ct-peso{padding:12px 13px 11px}
  .ct-fator small,.ct-total small{font-size:9px}
}

/* ==================================================================
   A CENA , na mão vs. com a estrutura
   O passo automatizado sozinho não provoca nada: é só uma lista de
   coisas boas. O peso aparece quando a mesma tarefa é mostrada do
   jeito que ela acontece hoje, com hora e com o custo no fim.
   ================================================================== */
.fx-mao{
  margin:16px 16px 0;padding:13px 14px 12px;
  border-radius:12px;
  background:rgba(248,113,113,.07);
  box-shadow:inset 0 0 0 1px rgba(248,113,113,.26);
  display:flex;flex-direction:column;gap:9px;
}
.fx-mao-rot{
  display:flex;align-items:center;gap:7px;
  font-family:var(--ff-mono,var(--ff-body));
  font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;font-weight:600;
  color:#B91C1C;
}
.fx-mao-rot > i{
  font-style:normal;display:grid;place-items:center;
  width:14px;height:14px;border-radius:50%;flex:none;
  background:#DC2626;color:#FFF;font-size:8px;font-weight:800;
}
.fx-mao-lista{list-style:none;margin:0;padding:0;display:grid;gap:7px}
.fx-mao-lista li{display:flex;flex-direction:column;gap:1px;padding-left:13px;position:relative}
.fx-mao-lista li::before{
  content:"";position:absolute;left:0;top:6px;
  width:5px;height:5px;border-radius:50%;
  background:rgba(185,28,28,.42);
}
.fx-mao-lista b{font-size:12.4px;line-height:1.32;color:var(--ink);font-weight:600}
.fx-mao-lista small{font-size:11px;line-height:1.36;color:var(--muted)}
.fx-mao-custo{
  margin-top:1px;padding-top:9px;
  border-top:1px dashed rgba(185,28,28,.3);
  font-size:12px;line-height:1.4;font-weight:700;color:#B91C1C;
}
.fx-corte{
  display:flex;align-items:center;gap:7px;
  margin:15px 16px -4px;
  font-family:var(--ff-mono,var(--ff-body));
  font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;font-weight:600;
  color:var(--brand-2);
}
.fx-corte > i{
  font-style:normal;display:grid;place-items:center;
  width:14px;height:14px;border-radius:50%;flex:none;
  background:var(--brand);color:#FFF;font-size:8px;font-weight:800;
}
.fx-passos{padding-top:12px!important}

/* A cena escura (caso a faixa volte para o escuro) mantém a leitura. */
.sec:not(.claro) .fx-mao{background:rgba(248,113,113,.09);box-shadow:inset 0 0 0 1px rgba(248,113,113,.3)}
.sec:not(.claro) .fx-mao-rot,.sec:not(.claro) .fx-mao-custo{color:#FCA5A5}
.sec:not(.claro) .fx-mao-lista b{color:var(--ink)}
.sec:not(.claro) .fx-corte{color:var(--violet-2)}

@media(max-width:552px){
  .fx-mao{margin:11px 11px 0;padding:11px 12px 10px}
  .fx-corte{margin:11px 11px -4px}
  .fx-mao-lista b{font-size:11.8px}
  .fx-mao-lista small{font-size:10.4px}
}

/* A janela da cena tinha altura fixa (520px em tablet, 360px no
   celular), dimensionada para os 3 passos que existiam antes. Com o
   bloco "na mão" a cena passa de 500px e o conteúdo era cortado sem
   aviso, porque .mn-ct-janela e .fx são overflow:hidden. A altura
   passa a acompanhar o conteúdo nas duas faixas estreitas. */
@media(max-width:900px){
  .mn-ct-janela{height:auto;min-height:0}
  .fx{height:auto}
}
@media(max-width:552px){
  .mn-ct-janela{height:auto}
}

/* ==================================================================
   PAINEL DO HERO , console de operação
   ------------------------------------------------------------------
   Era uma lista de quatro frases dentro de uma moldura. O hero
   promete "a operação que não depende de você", então o painel
   precisa SER a operação rodando, não descrevê-la: contatos com
   nome, canal e hora, com o estado de cada um, e uma faixa de
   números que muda entre os dois cenários , é a mudança dos números
   que faz o argumento, não a lista.
   ================================================================== */
.ad{
  border-radius:16px;
  background:
    radial-gradient(120% 90% at 50% -10%,rgba(34,197,94,.08),transparent 58%),
    linear-gradient(178deg,var(--surface),var(--ground));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.05),
    0 30px 70px -40px rgba(0,0,0,.85);
}

/* --- chrome de janela --------------------------------------------- */
.ad-topo{padding:12px 16px;gap:13px;flex-wrap:nowrap}
.ad-janela{display:flex;gap:5px;flex:none}
.ad-janela i{width:8px;height:8px;border-radius:50%;background:var(--line-2);display:block}
.ad-janela i:first-child{background:#3F3F46}
.ad-dia{
  display:flex;align-items:center;gap:8px;
  min-width:0;font-size:10.4px;
}
.ad-pulso{
  width:7px;height:7px;border-radius:50%;flex:none;
  background:var(--brand);
  box-shadow:0 0 0 0 rgba(34,197,94,.55);
  animation:adPulso 2.4s ease-out infinite;
}
@keyframes adPulso{
  0%{box-shadow:0 0 0 0 rgba(34,197,94,.5)}
  70%{box-shadow:0 0 0 7px rgba(34,197,94,0)}
  100%{box-shadow:0 0 0 0 rgba(34,197,94,0)}
}


/* --- faixa de números: o argumento mora aqui ---------------------- */
.ad-kpis{
  display:grid;grid-template-columns:repeat(4,1fr);
  border-bottom:1px solid var(--line);
}
.ad-kpi{
  padding:13px 16px;display:flex;flex-direction:column;gap:3px;min-width:0;
  border-left:1px solid var(--line);
}
.ad-kpi:first-child{border-left:0}
.ad-kpi-r{
  font:500 9.4px/1.2 var(--ff-mono,var(--ff-body));letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted);
}
.ad-kpi-v{
  font-family:var(--ff-display);font-size:23px;font-weight:700;
  letter-spacing:-.04em;line-height:1;color:var(--ink);
  font-variant-numeric:tabular-nums;
  transition:color .3s ease;
}
.ad-kpi-v.ad-vira{animation:adVira .42s cubic-bezier(.2,.8,.25,1)}
@keyframes adVira{
  0%{opacity:0;transform:translateY(-8px) scale(.94)}
  100%{opacity:1;transform:none}
}

/* --- as linhas viram contatos de verdade -------------------------- */
.ad-palco{padding:14px 16px 16px}
.ad-linhas{gap:7px}
.ad-linhas li{
  grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;gap:12px;padding:11px 13px;border-radius:11px;
  background:rgba(255,255,255,.022);
  box-shadow:inset 0 0 0 1px var(--line);
  border:0;
  transition:box-shadow .3s ease,background .3s ease;
}
.ad-bom{background:rgba(34,197,94,.045)!important;box-shadow:inset 0 0 0 1px rgba(34,197,94,.20)!important}

.ad-av{
  position:relative;width:34px;height:34px;flex:none;
  display:grid;place-items:center;border-radius:10px;
  background:var(--surface-2);
  box-shadow:inset 0 0 0 1px var(--line);
  font:700 11.5px/1 var(--ff-body);letter-spacing:.02em;color:var(--ink-2);
}
.ad-bom .ad-av{box-shadow:inset 0 0 0 1px rgba(34,197,94,.28);color:var(--ink)}
.ad-av-mais{color:var(--muted);font-size:12px}
/* selo do canal, encostado no canto do avatar */
.ad-ca{
  position:absolute;right:-3px;bottom:-3px;
  width:14px;height:14px;border-radius:50%;
  box-shadow:0 0 0 2.5px var(--ground);
}
.ad-ca-wa{background:#25D366}
.ad-ca-ig{background:linear-gradient(45deg,#F09433,#DC2743 55%,#BC1888)}

.ad-txt b{font-size:13px}
.ad-txt small{margin-top:2px;font-size:11.6px;color:var(--muted)}
.ad-bom .ad-txt small{color:var(--ink-2)}

.ad-meta{display:flex;flex-direction:column;align-items:flex-end;gap:5px;flex:none;text-align:right}
.ad-hora{
  font:500 9.6px/1 var(--ff-mono,var(--ff-body));letter-spacing:.07em;color:var(--muted);
}
.ad-pill{
  padding:4px 9px;border-radius:999px;white-space:nowrap;
  font:600 10.2px/1.15 var(--ff-body);letter-spacing:-.005em;
}
.ad-pill-mal{color:#FCA5A5;background:rgba(248,113,113,.11);box-shadow:inset 0 0 0 1px rgba(248,113,113,.28)}
.ad-pill-frio{color:var(--muted);background:rgba(255,255,255,.04);box-shadow:inset 0 0 0 1px var(--line)}
.ad-pill-bom{color:#052E16;background:var(--violet-2);box-shadow:none}

.ad-fecho{padding:14px 16px;border-radius:12px;border:0;box-shadow:inset 0 0 0 1px var(--line)}
.ad-fecho-ruim{box-shadow:inset 0 0 0 1px rgba(251,191,36,.24)}
.ad-fecho b{font-size:14.6px}

/* --- estreito ------------------------------------------------------ */
@media(max-width:820px){
  .ad-kpis{grid-template-columns:repeat(2,1fr)}
  .ad-kpi:nth-child(3){border-left:0}
  .ad-kpi:nth-child(n+3){border-top:1px solid var(--line)}
}
@media(max-width:600px){
  .ad-topo{flex-wrap:wrap;gap:10px}
  .ad-janela{display:none}
  .ad-dia{flex-basis:100%;order:-1}
  .ad-linhas li{grid-template-columns:auto minmax(0,1fr);gap:10px;padding:10px 11px}
  .ad-meta{grid-column:1 / -1;flex-direction:row;align-items:center;justify-content:space-between;width:100%}
  .ad-kpi-v{font-size:20px}
}
@media(prefers-reduced-motion:reduce){
  .ad-pulso{animation:none}
  .ad-kpi-v.ad-vira{animation:none}
}


/* ==================================================================
   PAINEL DO HERO , diagnóstico das três etapas
   ------------------------------------------------------------------
   O painel mostra só o ANTES. O depois já mora logo abaixo, no
   próprio CRM, e repetir os dois aqui gastava a primeira dobra
   explicando em vez de acusar.

   A ideia da peça: um funil que vaza à vista. Cada etapa declara
   quantos entram e quantos seguem, e a barra de vazamento cresce de
   uma para a outra , 7 viram 5, 5 viram 2, 2 viram 0. O leitor
   percebe a perda antes de ler qualquer linha.
   ================================================================== */
.ad-diag .ad-topo{gap:13px}
.ad-dia b{color:var(--ink-2);font-weight:600;font-variant-numeric:tabular-nums}
.ad-selo{
  flex:none;padding:5px 11px;border-radius:999px;
  font:600 9.6px/1 var(--ff-mono,var(--ff-body));letter-spacing:.11em;text-transform:uppercase;
  color:#FBBF24;background:rgba(251,191,36,.10);
  box-shadow:inset 0 0 0 1px rgba(251,191,36,.28);
}
/* Sem alternância, os quatro números são todos de alarme. */
.ad-diag .ad-kpi-alvo .ad-kpi-v{color:#FBBF24}

/* --- as três etapas ----------------------------------------------- */
.ad-fases{
  display:grid;grid-template-columns:repeat(3,1fr);
}
.ad-fase{
  display:flex;flex-direction:column;gap:11px;
  padding:16px 15px 15px;
  border-left:1px solid var(--line);
  min-width:0;
}
.ad-fase:first-child{border-left:0}
/* a dor aprofunda da esquerda para a direita: o fundo escurece junto */
.ad-fase:nth-child(2){background:rgba(248,113,113,.022)}
.ad-fase:nth-child(3){background:rgba(248,113,113,.045)}

.ad-fase-topo{display:grid;grid-template-columns:auto minmax(0,1fr);gap:2px 10px;align-items:center}
.ad-fase-n{
  grid-row:1 / 3;
  width:30px;height:30px;display:grid;place-items:center;border-radius:9px;
  font:700 11.5px/1 var(--ff-mono,var(--ff-body));letter-spacing:.06em;
  color:var(--muted);background:rgba(255,255,255,.035);
  box-shadow:inset 0 0 0 1px var(--line);
}
.ad-fase-id{min-width:0;display:flex;flex-direction:column;gap:1px}
.ad-fase-id b{font:700 13.6px/1.15 var(--ff-display);letter-spacing:-.025em;color:var(--ink)}
.ad-fase-id small{font-size:10.6px;line-height:1.3;color:var(--muted)}

/* --- a barra que vaza: o funil, literalmente ---------------------- */
/* O verde é quem segue, o vermelho é quem some. De uma etapa para a
   outra o verde encolhe e o vermelho toma a barra , 71%, 40%, 0%.
   A perda aparece antes de o leitor ler qualquer linha. */
.ad-vaza{grid-column:1 / -1;margin-top:9px;display:flex;flex-direction:column;gap:6px}
.ad-vaza-txt{
  display:flex;align-items:center;gap:7px;
  font:500 10px/1 var(--ff-mono,var(--ff-body));letter-spacing:.07em;
  text-transform:uppercase;color:var(--muted);
}
.ad-vaza-txt b{color:var(--ink);font-weight:700;font-size:11.5px}
.ad-vaza-seta{color:var(--line-2)}
.ad-perda{
  margin-left:auto;padding:3px 7px;border-radius:6px;
  font:700 10.5px/1 var(--ff-body);letter-spacing:0;
  color:#FCA5A5;background:rgba(248,113,113,.13);
  box-shadow:inset 0 0 0 1px rgba(248,113,113,.3);
}
.ad-vaza-barra{
  display:block;height:6px;border-radius:999px;position:relative;overflow:hidden;
  background:linear-gradient(90deg,#F87171,#DC2626);
}
.ad-vaza-barra::after{
  content:"";position:absolute;inset:0 auto 0 0;
  width:var(--segue,0%);
  border-radius:999px;
  background:linear-gradient(90deg,var(--brand),var(--brand-2));
  animation:adVaza 1.15s cubic-bezier(.2,.8,.25,1) backwards;
}
.ad-fase:nth-child(2) .ad-vaza-barra::after{animation-delay:.16s}
.ad-fase:nth-child(3) .ad-vaza-barra::after{animation-delay:.32s}
@keyframes adVaza{from{width:100%}}

/* --- as linhas de cada etapa --------------------------------------- */
.ad-fases .ad-linhas{gap:6px;flex:1;align-content:start}
.ad-fases .ad-linhas li{
  grid-template-columns:auto minmax(0,1fr);
  align-items:start;gap:10px;padding:10px 11px;
}
.ad-fases .ad-av{width:28px;height:28px;border-radius:8px;font-size:10.5px;margin-top:1px}
.ad-av-glifo{font-size:13px;color:var(--muted);font-weight:400}
.ad-fases .ad-txt b{font-size:12.4px;line-height:1.3}
.ad-fases .ad-txt small{font-size:11px;line-height:1.42;margin-top:3px}
.ad-fases .ad-pill{grid-column:1 / -1;justify-self:start;margin-top:2px}

.ad-fase-dor{
  margin:0;margin-top:auto;padding-top:11px;
  border-top:1px dashed rgba(248,113,113,.26);
  display:flex;align-items:flex-start;gap:7px;
  font-size:11.8px;line-height:1.45;color:var(--ink-2);
}
.ad-fase-dor > span{color:#F87171;font-weight:700;flex:none;line-height:1.35}

/* --- fecho --------------------------------------------------------- */
.ad-diag .ad-fecho{margin:14px 16px 0}
.ad-fecho-p{font-size:12.4px;line-height:1.5;color:var(--muted)}
.ad-diag .ad-nota{color:var(--muted)}

/* --- estreito ------------------------------------------------------- */
@media(max-width:900px){
  .ad-fases{grid-template-columns:1fr}
  .ad-fase{border-left:0;border-top:1px solid var(--line)}
  .ad-fase:first-child{border-top:0}
}
@media(max-width:600px){
  .ad-selo{display:none}
  .ad-fase{padding:14px 13px 13px}
}
@media(prefers-reduced-motion:reduce){
  .ad-vaza-barra::after{animation:none}
}

/* Sem alternancia, os tres indicadores que mudavam ficam em alarme. */
.ad-kpi-alvo .ad-kpi-v{color:#FBBF24}
/* Nas fases o avatar é 28px, e o selo de canal de 14px encobria a
   segunda inicial. Encolhe junto. */
.ad-fases .ad-ca{width:11px;height:11px;right:-2px;bottom:-2px;box-shadow:0 0 0 2px var(--ground)}

/* ==================================================================
   PLANOS , a caixa do card em destaque
   ------------------------------------------------------------------
   A escala tipografica (--pscale-hot) resolvia a leitura, nao a
   geometria: os tres cards mediam 363x1016. Aqui a caixa do meio
   cresce de fato, sem quebrar o subgrid.

   Largura: a coluna do meio vale 1.15fr. Nao ha transbordo, a soma
   continua dentro da grade.

   Altura: margem de bloco negativa tira o card da faixa e o padding
   devolve exatamente a mesma medida, entao o conteudo continua
   pousando nas trilhas do subgrid , alinhado com os vizinhos.
   Os 22px cabem na folga de 46px que .plans reserva para a sombra,
   logo o clip-path do .rv nao corta nada.
   ================================================================== */
@media (min-width:1181px){
  .plans{grid-template-columns:1fr 1.15fr 1fr}
  .plan.hot{
    margin-block:-22px;
    padding-block:80px 49px;   /* 58+22 e 27+22 */
    padding-inline:28px;
    z-index:2;                 /* a sombra do destaque passa por cima */
    border-radius:18px;
  }
}

/* Coluna unica: a caixa volta ao normal, nao ha vizinho para comparar. */
@media (max-width:1180px){
  .plan.hot{margin-block:0;padding-block:58px 27px;padding-inline:25px}
}

/* ==================================================================
   DOSSIE TRANSVERSAL
   ------------------------------------------------------------------
   O entregavel que define a MonaiAds como empresa de servico vivia
   so na secao #dossie e na linha de rodape dos planos. Esta faixa
   repete a promessa dentro de cada secao onde ela responde uma
   objecao diferente, sempre apontando para #dossie.
   Um componente so, tema resolvido por token.
   ================================================================== */
.dossie-strip{
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:16px;
  margin-top:26px;
  padding:16px 20px;
  border-radius:14px;
  text-decoration:none;
  background:linear-gradient(100deg,rgba(34,197,94,.10),var(--surface) 62%);
  box-shadow:inset 0 0 0 1px var(--line-2);
  transition:box-shadow .22s ease,transform .22s ease,background .22s ease;
  /* Varias secoes hospedeiras sao grade de duas colunas (#aplicativo
     e o painel de #resultados). Sem isto a faixa cai numa coluna so e
     o texto quebra em palavra por linha. Ignorado fora de grade. */
  grid-column:1 / -1;
}
.dossie-strip:hover{
  transform:translateY(-2px);
  box-shadow:inset 0 0 0 1px var(--brand),0 16px 32px -22px rgba(34,197,94,.6);
}
.ds-tag{
  font-family:var(--ff-body);font-size:10.5px;font-weight:800;
  letter-spacing:.10em;text-transform:uppercase;white-space:nowrap;
  padding:6px 10px;border-radius:999px;
  background:var(--brand);color:var(--brand-ink);
}
.ds-txt{display:flex;flex-direction:column;gap:3px;min-width:0}
.ds-txt b{font-size:14.5px;font-weight:700;color:var(--ink);line-height:1.35}
.ds-txt > span{font-size:13px;color:var(--ink-2);line-height:1.45}
.ds-txt > span b{font-size:inherit;color:var(--ink)}
.ds-go{
  flex:none;width:32px;height:32px;border-radius:999px;
  display:grid;place-items:center;font-size:16px;
  color:var(--brand-2);box-shadow:inset 0 0 0 1px var(--line-2);
  transition:transform .22s ease,color .22s ease;
}
.dossie-strip:hover .ds-go{transform:translateX(3px);color:var(--brand)}

/* Secoes claras: o gradiente verde some no branco, entao a base e
   cinza e a borda ganha peso. */
.sec.claro .dossie-strip{
  background:linear-gradient(100deg,rgba(34,197,94,.09),#F4F6F9 62%);
  box-shadow:inset 0 0 0 1px #D3DAE3;
}
.sec.claro .ds-tag{background:var(--brand);color:#FFF}
.sec.claro .ds-go{color:#0F5C2E;box-shadow:inset 0 0 0 1px #C7D0DB}

@media (max-width:720px){
  .dossie-strip{grid-template-columns:1fr;gap:10px;padding:15px 16px}
  .ds-tag{justify-self:start}
  .ds-go{display:none}
}

/* Linha do dossie no comparativo: nao ha logotipo de terceiro,
   a marca e a propria categoria. */
.cmp-brand-solo{font-style:italic}
.cmp-price small{display:block;font-weight:600;opacity:.72;font-size:11px}