/* enxut v3 (19/10/2026): direção A "Painel" (seo/auditoria-design-2026-10.md). Branco, produto à mostra,
   preto-esverdeado da marca nos botões, verde só como sinal; faixa escura neutra na conversa.
   Folha única, sem build. Tokens em :root (o site/form.css usa os mesmos). Contraste medido (WCAG):
   texto #0A1412 / branco 18,7:1 · secundário #4B5653 / branco 7,6:1, / #F3F5F4 7,0:1 · branco / ação #0D1F1C 17,1:1
   verde #067647 / branco 5,7:1, / #F3F5F4 5,2:1 · borda de campo #8A9491 / branco 3,1:1
   escuro: texto #EDEFEE / #0B0D0C 16,9:1 · secundário #9BA3A0 7,6:1 · sinal #3CCB7F 9,3:1 */

@font-face{font-family:'Inter';font-style:normal;font-weight:400 600;font-display:swap;src:url(/fonts/inter.woff2) format('woff2')}
@font-face{font-family:'Inter Tight';font-style:normal;font-weight:400 700;font-display:swap;src:url(/fonts/inter-tight.woff2) format('woff2')}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400 500;font-display:swap;src:url(/fonts/jetbrains-mono.woff2) format('woff2')}

:root{
  --fundo:#FFFFFF;          /* superfície da página */
  --fundo-2:#F3F5F4;        /* faixas alternadas, fundo de ícone */
  --cartao:#FFFFFF;         /* cartões e campos */
  --texto:#0A1412;          /* conteúdo */
  --texto-2:#4B5653;        /* secundário */
  --linha:#E3E8E6;          /* divisórias e borda de cartão */
  --borda:#C9D1CE;          /* borda do botão secundário (o texto identifica o botão) */
  --borda-campo:#8A9491;    /* limite de campo e caixa de seleção, 3:1 */
  --acao:#0D1F1C;           /* botão principal (a cor da marca) */
  --acao-hover:#1F3631;
  --verde:#067647;          /* sinal como texto: rótulo, link, marca de ok */
  --sinal:#12B76A;          /* sinal só como ponto ou preenchimento, nunca texto */
  --erro:#A4262C;

  --escuro:#0B0D0C;         /* faixa da conversa, chamada final e rodapé */
  --escuro-2:#151918;
  --escuro-texto:#EDEFEE;
  --escuro-sec:#9BA3A0;
  --escuro-sinal:#3CCB7F;
  --linha-escura:rgba(237,239,238,.12);

  /* conversa no celular */
  --chat-fundo:#111413;
  --chat-barra:#181C1B;
  --chat-ag:#202624;        /* bolha do agente */
  --chat-lead:#0F5A3C;      /* bolha do cliente */
  --chat-hora:#A9B2AF;      /* hora sobre a bolha do agente: 7,1:1 */
  --chat-lead-hora:#BFD6CB; /* hora sobre a bolha do cliente: 5,4:1 */

  --display:'Inter Tight','Inter',system-ui,sans-serif;
  --corpo:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  --mono:'JetBrains Mono',ui-monospace,monospace;

  --r-peq:8px;
  --r-btn:10px;
  --r-card:16px;
  --gutter:clamp(20px,5vw,32px);
  --largura:1160px;
  --s-grande:clamp(56px,9vw,128px);
  --s-media:clamp(48px,7vw,88px);
}

/* o site só tem aparência clara: sem isto, o modo escuro forçado de alguns navegadores de celular inverte as cores */
:root{color-scheme:only light}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:84px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{background:var(--fundo);color:var(--texto);font-family:var(--corpo);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
@media (max-width:560px){body{font-size:16px}}
img{max-width:100%;height:auto;display:block}
h1,h2,h3{font-family:var(--display);font-weight:600;line-height:1.08;letter-spacing:-.02em;text-wrap:balance}
h1{font-size:clamp(2rem,5.2vw,4.1rem);line-height:1.04}
h2{font-size:clamp(1.5rem,3.4vw,2.6rem)}
h3{font-size:1.2rem;line-height:1.3;letter-spacing:-.01em}
p{text-wrap:pretty}
strong,b{font-weight:600}

a{color:var(--verde)}
a:hover{color:var(--texto)}
p a,li a,dd a,.faq-resp a{text-decoration:underline;text-underline-offset:.18em;text-decoration-thickness:.07em}
:focus-visible{outline:2px solid var(--verde);outline-offset:3px;border-radius:4px}
.escuro :focus-visible,.on-dark :focus-visible{outline-color:var(--escuro-sinal)}

.skip{position:absolute;left:12px;top:-60px;background:var(--texto);color:var(--fundo);padding:10px 14px;border-radius:var(--r-peq);z-index:100}
.skip:focus{top:12px;color:var(--fundo)}
.oculto{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

.wrap{max-width:calc(var(--largura) + 2*var(--gutter));margin:0 auto;padding-left:var(--gutter);padding-right:var(--gutter)}
.wrap-doc{max-width:calc(760px + 2*var(--gutter));margin:0 auto;padding-left:var(--gutter);padding-right:var(--gutter)}
.s-lg{padding-top:var(--s-grande);padding-bottom:var(--s-grande)}
.s-md{padding-top:var(--s-media);padding-bottom:var(--s-media)}
.mb-s{margin-bottom:12px}.mb-m{margin-bottom:20px}.mb-l{margin-bottom:32px}
.funda{background:var(--fundo-2);border-top:1px solid var(--linha);border-bottom:1px solid var(--linha)}

/* rótulo de seção: texto curto em verde, sem caixa alta nem mono (o mono fica para horário e dado) */
.eyebrow{font-size:14px;font-weight:600;color:var(--verde);letter-spacing:0}
.mono{font-family:var(--mono);font-size:13px;color:var(--texto-2)}
.lede{font-size:clamp(1.0625rem,1.6vw,1.22rem);line-height:1.55;color:var(--texto-2);max-width:60ch}
.sec{color:var(--texto-2)}
.menor{font-size:15px;color:var(--texto-2)}
.titulo-sec{max-width:22ch;margin-bottom:16px}
.intro-sec{margin-bottom:40px}

/* ---------- botões ---------- */
.acoes{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:12px 22px;border-radius:var(--r-btn);
  font-family:var(--corpo);font-weight:600;font-size:16px;text-decoration:none;border:1px solid transparent;cursor:pointer;transition:background .15s,color .15s,border-color .15s,transform .1s}
.btn:active{transform:translateY(1px)}
.btn-pri{background:var(--acao);color:#fff}
.btn-pri:hover{background:var(--acao-hover);color:#fff}
.btn-sec{background:var(--cartao);color:var(--texto);border-color:var(--borda)}
.btn-sec:hover{border-color:var(--texto);color:var(--texto)}
.btn-luz{background:var(--escuro-texto);color:var(--escuro)}
.btn-luz:hover{background:#fff;color:var(--escuro)}
.btn-contorno-luz{background:transparent;color:var(--escuro-texto);border-color:rgba(237,239,238,.35)}
.btn-contorno-luz:hover{border-color:var(--escuro-texto);color:#fff}
.btn .seta{transition:transform .15s}
.btn:hover .seta{transform:translateX(3px)}
.confianca{display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:22px;font-size:14.5px;color:var(--texto-2)}
.confianca span::before{content:"✓";color:var(--verde);font-weight:700;margin-right:7px}
@media (max-width:560px){.hero .acoes .btn{flex:1 1 100%}}

/* ---------- topo ---------- */
.topo{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.88);backdrop-filter:saturate(1.4) blur(12px);-webkit-backdrop-filter:saturate(1.4) blur(12px);border-bottom:1px solid var(--linha)}
.topo nav{max-width:calc(var(--largura) + 2*var(--gutter));margin:0 auto;padding:12px var(--gutter);display:flex;align-items:center;justify-content:space-between;gap:20px}
.wordmark{display:inline-flex;align-items:center;gap:8px;font-family:var(--display);font-weight:700;font-size:21px;color:var(--texto);text-decoration:none;letter-spacing:-.02em}
.wordmark:hover{color:var(--texto)}
.marca{width:18px;height:18px;flex:none;color:var(--acao)}
.nav-dir{display:flex;align-items:center;gap:26px}
.nav-links{display:flex;gap:24px}
.nav-links a{color:var(--texto);text-decoration:none;font-size:15.5px;font-weight:500}
.nav-links a:hover,.nav-links a[aria-current="page"]{color:var(--verde)}
.btn-nav{min-height:42px;padding:9px 18px;font-size:15px}
@media (max-width:760px){.nav-links{display:none}}

/* ---------- migalha ---------- */
.migalha{font-size:14px;color:var(--texto-2);margin-bottom:22px}
.migalha a{color:var(--texto-2)}
.migalha span[aria-hidden]{margin:0 6px}

/* ---------- topo das páginas ---------- */
.hero{padding-top:clamp(24px,6vw,88px);padding-bottom:clamp(56px,8vw,104px)}
.hero-grade{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(32px,5vw,72px);align-items:center}
.hero h1{margin:14px 0 20px;max-width:16ch}
.hero .lede{margin-bottom:28px}
@media (max-width:900px){.hero-grade{grid-template-columns:minmax(0,1fr)}.hero h1{max-width:20ch}}

/* tela de bloqueio: o que chega no celular do escritório enquanto ninguém está online.
   No celular ela sobe para logo depois do título (o .hero-texto vira display:contents e cada peça ganha ordem). */
.bloqueio{position:relative;background:linear-gradient(170deg,#1F2624 0%,var(--escuro) 72%);border-radius:28px;padding:30px 20px 24px;color:var(--escuro-texto);
  box-shadow:0 30px 60px -24px rgba(10,20,18,.45);max-width:420px;justify-self:end;width:100%}
.bloqueio-hora{text-align:center;font-family:var(--display);font-weight:600;font-size:clamp(3rem,6vw,4.2rem);line-height:1;letter-spacing:-.03em}
.bloqueio-dia{text-align:center;font-size:14px;color:var(--escuro-sec);margin:6px 0 22px}
.notifs{list-style:none;display:flex;flex-direction:column;gap:10px}
.notif{background:rgba(237,239,238,.09);border:1px solid rgba(237,239,238,.1);border-radius:16px;padding:12px 14px;display:grid;grid-template-columns:34px 1fr auto;gap:2px 12px;align-items:start;
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.notif-ic{grid-row:span 2;width:34px;height:34px;border-radius:9px;background:var(--verde);display:grid;place-items:center}
.notif-ic svg{width:18px;height:18px;stroke:#fff;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.notif b{font-size:14.5px;font-weight:600;color:#fff}
.notif time{font-size:12px;color:var(--escuro-sec);font-family:var(--mono)}
.notif p{grid-column:2 / span 2;font-size:14px;line-height:1.4;color:rgba(237,239,238,.84)}
.bloqueio-nota{text-align:center;font-family:var(--mono);font-size:11px;color:var(--escuro-sec);margin-top:16px}
@media (prefers-reduced-motion:no-preference){
  .notif{animation:notif-entra .6s cubic-bezier(.2,.8,.2,1) both}
  .notif:nth-child(2){animation-delay:.45s}.notif:nth-child(3){animation-delay:.9s}
}
@keyframes notif-entra{from{opacity:0;transform:translateY(-10px) scale(.98)}to{opacity:1;transform:none}}
@media (max-width:900px){
  .hero-grade:has(.bloqueio){display:flex;flex-direction:column;align-items:stretch;gap:0}
  .hero-texto{display:contents}
  .hero-texto .eyebrow{order:1}.hero-texto h1{order:2}
  .bloqueio{order:3;justify-self:stretch;max-width:none;margin:4px 0 28px}
  .hero-texto .lede{order:4}.hero-texto .acoes{order:5}.hero-texto .confianca{order:6}
}

/* ---------- números: um relatório com divisórias, a fonte embaixo de cada coluna ---------- */
.numeros{display:grid;grid-template-columns:repeat(3,1fr);background:var(--cartao);border:1px solid var(--linha);border-radius:var(--r-card)}
.numero{padding:clamp(20px,3vw,28px);display:flex;flex-direction:column;gap:10px}
.numero + .numero{border-left:1px solid var(--linha)}
.numero strong{font-family:var(--display);font-weight:600;font-variant-numeric:tabular-nums;font-size:clamp(2.1rem,4vw,3rem);line-height:1;letter-spacing:-.04em}
.numero p{color:var(--texto-2);font-size:16px}
.numero .fonte{margin-top:auto;padding-top:12px;border-top:1px dashed var(--linha);font-size:13px;color:var(--texto-2)}
.numeros-nota{margin-top:24px;font-size:15px;color:var(--texto-2);max-width:70ch}
@media (max-width:820px){.numeros{grid-template-columns:1fr}.numero + .numero{border-left:0;border-top:1px solid var(--linha)}}

/* ---------- linha do tempo (as etapas, com a hora em que acontecem na conversa) ---------- */
.linha-tempo{list-style:none;display:grid;grid-template-columns:repeat(5,1fr);gap:0;border-top:1px solid var(--linha)}
.linha-tempo li{position:relative;padding:26px 20px 0 0}
.linha-tempo li::before{content:"";position:absolute;top:-6px;left:0;width:11px;height:11px;border-radius:50%;background:var(--acao);box-shadow:0 0 0 4px var(--fundo)}
.funda .linha-tempo li::before{box-shadow:0 0 0 4px var(--fundo-2)}
.linha-tempo li:last-child::before{background:var(--sinal)}
.linha-tempo time{font-family:var(--mono);font-size:13px;color:var(--texto-2)}
.linha-tempo h3{margin:6px 0 8px}
.linha-tempo p{font-size:15.5px;color:var(--texto-2)}
@media (max-width:980px){
  .linha-tempo{grid-template-columns:1fr;border-top:0;border-left:1px solid var(--linha);margin-left:5px}
  .linha-tempo li{padding:0 0 24px 26px}
  .linha-tempo li::before{top:4px;left:-6px}
}

/* ---------- cartões, colunas ---------- */
.duas-col{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,5vw,72px);align-items:start}
@media (max-width:860px){.duas-col{grid-template-columns:minmax(0,1fr)}}
.cartao{background:var(--cartao);border:1px solid var(--linha);border-radius:var(--r-card);padding:clamp(20px,3vw,30px)}
.cartoes{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media (max-width:860px){.cartoes{grid-template-columns:1fr}}
.lista-check{list-style:none;display:flex;flex-direction:column;gap:14px}
.lista-check li{padding-left:30px;position:relative}
.lista-check li::before{content:"";position:absolute;left:0;top:.42em;width:16px;height:9px;border-left:2px solid var(--verde);border-bottom:2px solid var(--verde);transform:rotate(-45deg)}
.limites{list-style:none;display:flex;flex-direction:column;gap:18px}
.limites li{border-left:3px solid var(--acao);padding-left:16px}
.limites b{display:block;margin-bottom:2px}

/* ---------- planos ---------- */
.plano{display:flex;flex-direction:column;gap:6px}
.plano .nome{font-size:14px;font-weight:600;color:var(--verde)}
.plano .preco{font-family:var(--display);font-size:2.4rem;font-weight:600;letter-spacing:-.04em;line-height:1.1}
.plano .preco small{font-family:var(--corpo);font-size:16px;font-weight:400;color:var(--texto-2);letter-spacing:0}
.plano p{color:var(--texto-2)}
.plano.destaque{border-color:var(--acao);box-shadow:0 0 0 1px var(--acao)}
.planos-nota{margin-top:22px;color:var(--texto-2);max-width:72ch}

/* ---------- faixa escura (conversa e chamada final) ---------- */
.escuro{background:var(--escuro);color:var(--escuro-texto)}
.escuro h2,.escuro h3{color:var(--escuro-texto)}
.escuro .lede,.escuro .sec{color:var(--escuro-sec)}
.escuro .eyebrow{color:var(--escuro-sinal)}
.escuro a{color:var(--escuro-texto)}
.escuro a:hover{color:#fff}
.escuro a.btn-luz,.escuro a.btn-luz:hover{color:var(--escuro)}
.faixa-conversa{padding-top:var(--s-media)}
.faixa-conversa .intro{text-align:center;max-width:720px;margin:0 auto}
.faixa-conversa .intro h2{margin:12px auto 14px;max-width:20ch}
.faixa-conversa .intro .lede{margin:0 auto}
.faixa-conversa .palco{background:transparent;padding-top:36px}
.faixa-conversa .depois{max-width:760px;margin:0 auto;text-align:center;padding:0 var(--gutter) var(--s-media)}
.faixa-conversa .depois p{color:var(--escuro-sec);margin-bottom:10px}
.faixa-conversa .depois strong{color:var(--escuro-texto)}

/* ---------- IA sob medida (chamada na home) ---------- */
.sob-medida{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:clamp(24px,4vw,56px);align-items:center}
.sob-medida ul{list-style:none;display:flex;flex-direction:column;gap:10px}
.sob-medida li{background:var(--fundo-2);border-radius:10px;padding:12px 14px;font-size:15.5px}
@media (max-width:860px){.sob-medida{grid-template-columns:minmax(0,1fr)}}

/* ---------- cenas (IA sob medida) ---------- */
.cenas{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.cenas .cartao h3{margin-bottom:8px}
.cenas .cartao p{color:var(--texto-2);font-size:16px}
@media (max-width:760px){.cenas{grid-template-columns:1fr}}
.passos{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:16px;counter-reset:p}
.passos li{counter-increment:p}
.passos li::before{content:counter(p);display:grid;place-items:center;width:32px;height:32px;border-radius:10px;background:var(--acao);color:#fff;font-weight:600;font-size:15px;margin-bottom:14px}
.passos h3{margin-bottom:6px}
.passos p{color:var(--texto-2);font-size:15.5px}
@media (max-width:900px){.passos{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.passos{grid-template-columns:1fr}}

/* ---------- perguntas frequentes ---------- */
.faq{max-width:820px}
.faq-item{border-bottom:1px solid var(--linha)}
.faq-item summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:16px;align-items:center;padding:20px 0;font-family:var(--display);font-weight:600;font-size:1.15rem;line-height:1.35;letter-spacing:-.01em}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"";flex:none;width:12px;height:12px;border-right:2px solid var(--texto);border-bottom:2px solid var(--texto);transform:rotate(45deg) translateY(-3px);transition:transform .2s}
.faq-item[open] summary::after{transform:rotate(-135deg) translateY(-3px)}
.faq-resp{padding:0 0 22px;color:var(--texto-2);max-width:68ch}
.faq-resp p+p{margin-top:10px}

/* ---------- chamada final ---------- */
.cta-final{text-align:center}
.cta-final h2{max-width:20ch;margin:0 auto 14px}
.cta-final .lede{margin:0 auto 30px}
.cta-final h2+.acoes{margin-top:30px}
.cta-final .acoes{justify-content:center}

/* ---------- sobre ---------- */
.dados{display:grid;grid-template-columns:max-content 1fr;gap:8px 24px;font-size:16px}
.dados dt{color:var(--texto-2)}
@media (max-width:420px){.dados{grid-template-columns:1fr;gap:2px}.dados dd{margin-bottom:10px}}

/* ---------- documento (privacidade) ---------- */
.doc h2{font-size:clamp(1.35rem,2.6vw,1.7rem);margin:44px 0 14px;padding-top:28px;border-top:1px solid var(--linha)}
.doc h2:first-of-type{margin-top:0;padding-top:0;border-top:0}
.doc h3{margin:26px 0 10px}
.doc p{color:var(--texto-2);line-height:1.7;margin-bottom:14px;max-width:68ch}
.doc ul{margin:0 0 16px 20px;max-width:68ch;color:var(--texto-2)}
.doc li{margin-bottom:8px}
.doc strong{color:var(--texto)}

/* ---------- rodapé ---------- */
.rodape{background:var(--escuro);color:var(--escuro-sec);font-size:15px}
.rodape a{color:var(--escuro-texto);text-decoration:none}
.rodape a:hover{color:#fff}
.rodape .wordmark{color:var(--escuro-texto);margin-bottom:14px}
.rodape .marca{color:var(--escuro-texto)}
.rodape .colunas{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:32px;padding-top:64px}
.rodape .rot{font-size:13px;font-weight:600;color:var(--escuro-sec);margin-bottom:14px}
.rodape .pilha{display:flex;flex-direction:column;gap:10px;align-items:flex-start}
.rodape p{max-width:34ch}
.rodape .base{margin-top:48px;padding:22px 0 40px;border-top:1px solid var(--linha-escura);display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px 24px;font-size:13.5px}
@media (max-width:760px){.rodape .colunas{grid-template-columns:1fr;gap:28px;padding-top:48px}}
.num{font-variant-numeric:tabular-nums}

/* ---------- blog (mantido para o gerador do blog) ---------- */
.on-dark{background:var(--escuro);color:var(--escuro-texto)}
.on-dark a{color:var(--escuro-texto)}
.banda{padding:var(--s-media) 0}
.forte{font-family:var(--display);font-weight:600}
.post-topo{padding-top:var(--s-media)}
.post-corpo{padding-bottom:var(--s-media)}
.post-corpo h2{margin:44px 0 14px;font-size:clamp(1.4rem,2.8vw,1.8rem)}
.post-corpo h3{margin:28px 0 10px}
.post-corpo p,.post-corpo li{color:var(--texto-2);line-height:1.75}
.post-corpo p{margin-bottom:16px}
.post-corpo ul,.post-corpo ol{margin:0 0 18px 22px}
.modelo{background:var(--fundo-2);border-left:3px solid var(--verde);border-radius:0 10px 10px 0;padding:14px 18px;margin:0 0 16px}
.sumario,.autor-bio,.resposta{background:var(--cartao);border:1px solid var(--linha);border-radius:var(--r-card);padding:20px;margin:24px 0}
.sumario .rot{font-size:14px;font-weight:600;color:var(--verde);margin-bottom:8px}
.on-dark .resposta{background:var(--escuro-2);border-color:var(--linha-escura)}
.lista-posts{list-style:none}
.lista-posts>div+div{margin-top:28px;padding-top:28px;border-top:1px solid var(--linha)}
.lista-posts h2{font-size:clamp(1.3rem,2.4vw,1.65rem);line-height:1.2;margin-bottom:10px}
.lista-posts h2 a{color:var(--texto);text-decoration:none}
.lista-posts h2 a:hover{text-decoration:underline}
.lista-posts p{color:var(--texto-2)}
.lista-posts .assinatura{margin-top:8px}
.assinatura{font-size:14px;color:var(--texto-2)}
.topo-link{font-size:14px}

/* ---------- conversa no celular (componente; ver conteudo/componentes/conversa.html e site/conversa.js) ---------- */
/* Sem JS: a conversa aparece inteira e rolável. Com JS: toca em loop, com pausa.
   Nada abaixo de 11 px; a hora de cada bolha tem 4,5:1 ou mais sobre a própria bolha. */

.palco{position:relative;background:var(--escuro);color:var(--escuro-texto);overflow:hidden;padding:clamp(48px,8vw,96px) var(--gutter)}
.palco::before{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(rgba(237,239,238,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(237,239,238,.045) 1px,transparent 1px);
  background-size:44px 44px;
  mask-image:radial-gradient(ellipse 70% 60% at 50% 45%,#000 30%,transparent 80%);
  -webkit-mask-image:radial-gradient(ellipse 70% 60% at 50% 45%,#000 30%,transparent 80%)}
.palco::after{content:"";position:absolute;width:520px;height:520px;left:50%;top:46%;transform:translate(-50%,-50%);
  background:radial-gradient(circle,rgba(60,203,127,.16),transparent 65%);pointer-events:none}

.palco-grade{position:relative;z-index:1;max-width:var(--largura);margin:0 auto;display:grid;
  grid-template-columns:minmax(0,1fr) 340px minmax(0,1fr);gap:28px;align-items:center}
.palco-lado{display:flex;flex-direction:column;gap:22px}
.palco-lado.esq{align-items:flex-end}
.palco-lado.dir{align-items:flex-start}

/* ---------- celular ---------- */
.cel{width:340px;justify-self:center;position:relative;border-radius:46px;padding:10px;
  background:linear-gradient(160deg,#262C2A,#0E1110 60%);
  box-shadow:0 0 0 1px rgba(237,239,238,.14),0 40px 80px -20px rgba(0,0,0,.65),0 0 60px -10px rgba(60,203,127,.22)}
@media (min-width:980px){.cel{transform:perspective(1400px) rotateY(-9deg) rotateX(3deg)}}
.cel-ilha{position:absolute;top:20px;left:50%;transform:translateX(-50%);width:96px;height:26px;border-radius:14px;background:#000;z-index:3}
.cel-tela{border-radius:37px;overflow:hidden;background:var(--chat-fundo);height:640px;display:flex;flex-direction:column}
.cel-barra{padding:52px 16px 12px;background:var(--chat-barra);display:flex;align-items:center;gap:11px;border-bottom:1px solid rgba(255,255,255,.08)}
.cel-avatar{width:36px;height:36px;border-radius:50%;background:var(--verde);display:grid;place-items:center;
  font-family:var(--display);font-weight:700;font-size:15px;color:#fff;flex:none}
.cel-barra b{display:block;font-family:var(--corpo);font-weight:600;font-size:15px;line-height:1.2;color:var(--escuro-texto)}
.cel-status{font-family:var(--mono);font-size:11px;color:var(--escuro-sinal)}
.cel-status::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--escuro-sinal);margin-right:6px;vertical-align:1px}

.cel-chat{flex:1;overflow-y:auto;padding:16px 12px 18px;display:flex;flex-direction:column;gap:8px;
  scrollbar-width:none;overscroll-behavior:contain}
.cel-chat::-webkit-scrollbar{display:none}
.cel-chat .bolha{max-width:84%;font-size:14px;line-height:1.45;padding:9px 12px 7px;color:var(--escuro-texto)}
.cel-chat .b-lead{align-self:flex-end;background:var(--chat-lead);color:#F1F5F3;border-radius:16px 16px 4px 16px}
.cel-chat .b-ag{align-self:flex-start;background:var(--chat-ag);border-radius:16px 16px 16px 4px}
.bolha time{display:block;text-align:right;font-family:var(--mono);font-size:11px;color:var(--chat-hora);margin-top:3px}
.b-lead time{color:var(--chat-lead-hora)}
.b-audio{display:flex;align-items:center;gap:9px;min-width:190px}
.b-audio .play{width:26px;height:26px;border-radius:50%;background:rgba(255,255,255,.16);display:grid;place-items:center;flex:none}
.b-audio .play::after{content:"";border-left:8px solid currentColor;border-top:5px solid transparent;border-bottom:5px solid transparent;margin-left:2px}
.b-audio .onda{flex:1;height:22px;display:block}
.b-audio .onda svg{width:100%;height:22px;display:block;fill:currentColor;opacity:.65}
.b-audio .dur{font-family:var(--mono);font-size:11px;color:var(--chat-lead-hora)}
.cel-chat .chat-dia{align-self:center;font-family:var(--mono);font-size:11px;color:var(--chat-hora);background:var(--chat-ag);padding:4px 10px;border-radius:20px;margin-bottom:4px}
.cel-chat .chat-fim{align-self:center;text-align:center;font-family:var(--mono);font-size:11px;color:var(--escuro-sinal);
  border:1px solid var(--escuro-sinal);border-radius:8px;padding:7px 10px;margin-top:8px}
.digitando{align-self:flex-start;background:var(--chat-ag);border-radius:16px 16px 16px 4px;padding:11px 14px;display:none;gap:4px}
.digitando i{width:6px;height:6px;border-radius:50%;background:var(--chat-hora);animation:pulo 1.1s infinite}
.digitando i:nth-child(2){animation-delay:.15s}.digitando i:nth-child(3){animation-delay:.3s}
@keyframes pulo{0%,60%,100%{transform:translateY(0);opacity:.5}30%{transform:translateY(-3px);opacity:1}}

/* ---------- selos ---------- */
.selo{position:relative;background:rgba(21,25,24,.82);border:1px solid rgba(60,203,127,.35);border-radius:12px;
  padding:12px 14px;display:flex;gap:11px;align-items:flex-start;max-width:250px;
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);box-shadow:0 12px 30px -12px rgba(0,0,0,.5)}
.selo svg{flex:none;width:18px;height:18px;margin-top:2px;stroke:var(--escuro-sinal);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.selo small{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--escuro-sec);margin-bottom:2px}
.selo strong{display:block;font-family:var(--display);font-weight:500;font-size:15px;line-height:1.3;color:var(--escuro-texto)}
.selo .fonte{display:block;font-family:var(--mono);font-size:11px;color:var(--escuro-sec);margin-top:4px;line-height:1.4}
.selo.ev{transition:opacity .5s ease,transform .5s ease}

/* ---------- controle ---------- */
.palco-controle{position:relative;z-index:1;display:flex;justify-content:center;margin-top:26px}
.btn-pausa{font-family:var(--mono);font-size:12px;color:var(--escuro-sec);background:transparent;border:1px solid rgba(255,255,255,.16);
  border-radius:20px;padding:8px 14px;min-height:44px;cursor:pointer;display:none;align-items:center}
.btn-pausa:hover{color:var(--escuro-texto);border-color:rgba(255,255,255,.4)}
.btn-pausa:focus-visible{outline:2px solid var(--escuro-sinal);outline-offset:2px}

/* ---------- modo animado (ligado pelo JS) ---------- */
.palco.anim .btn-pausa{display:inline-flex}
.palco.anim .cel-chat > .msg,.palco.anim .cel-chat > .chat-dia,.palco.anim .cel-chat > .chat-fim{display:none}
.palco.anim .cel-chat > .msg.on{display:block;animation:entra .35s ease-out both}
.palco.anim .cel-chat > .chat-dia.on,.palco.anim .cel-chat > .chat-fim.on{display:block}
.palco.anim .digitando.on{display:flex}
.palco.anim .selo.ev{opacity:0;transform:translateY(8px)}
.palco.anim .selo.ev.on{opacity:1;transform:none}
.palco.anim .cel-chat.sai{opacity:0;transition:opacity .6s}
@keyframes entra{from{opacity:0;transform:translateY(8px) scale(.98)}to{opacity:1;transform:none}}

@media (max-width:979px){
  .palco-grade{grid-template-columns:1fr;justify-items:center}
  .palco-lado{display:grid;grid-template-columns:1fr 1fr;gap:12px;width:100%;max-width:520px;order:2}
  .palco-lado.esq,.palco-lado.dir{align-items:stretch}
  .selo{max-width:none}
  .selo.ev{display:none}
  .cel{order:1}
}
@media (max-width:400px){
  .cel{width:100%;max-width:330px}
  .cel-tela{height:560px}
  .palco-lado{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  .cel{transform:none}
  .palco.anim .cel-chat > .msg.on{animation:none}
  .digitando i{animation:none}
}

/* ---------- o problema (home) e o que ele faz ---------- */
.dor-grade{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,5vw,72px);align-items:start}
.dor-dado{border-left:3px solid var(--verde);padding:4px 0 4px 16px;color:var(--texto);font-size:16px}
.dor-dado strong{font-weight:600}
.dor-dado span{display:block;margin-top:6px;font-size:13.5px;color:var(--texto-2)}
.dor-lista{list-style:none;display:flex;flex-direction:column;gap:12px}
.dor-item{display:grid;grid-template-columns:40px 1fr;gap:14px;align-items:start;background:var(--cartao);border:1px solid var(--linha);border-left:3px solid var(--borda);border-radius:var(--r-card);padding:16px 18px}
.dor-item b{display:block;font-family:var(--display);font-weight:600;font-size:16.5px;line-height:1.3;margin-bottom:4px}
.dor-item p{font-size:15px;color:var(--texto-2);line-height:1.5}
.dor-ic{width:40px;height:40px;border-radius:10px;display:grid;place-items:center;background:var(--fundo-2)}
.dor-ic svg{width:20px;height:20px;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.dor-item.antes{border-left-color:var(--erro)}
.dor-item.antes b{text-decoration:line-through;text-decoration-thickness:1.5px;text-decoration-color:var(--erro)}
.dor-item.antes .dor-ic svg{stroke:var(--erro)}
.dor-item.depois{border-left-color:var(--verde)}
.dor-item.depois .dor-ic{background:var(--acao)}
.dor-item.depois .dor-ic svg{stroke:#fff}
@media (max-width:860px){.dor-grade{grid-template-columns:1fr}}

.capac{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.capac-item h3{margin:14px 0 8px;font-size:1.1rem}
.capac-item p{color:var(--texto-2);font-size:15.5px}
.capac-ic{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;background:var(--acao)}
.capac-ic svg{width:22px;height:22px;fill:none;stroke:#fff;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
@media (max-width:900px){.capac{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.capac{grid-template-columns:1fr}}

/* o problema: cada cartão é um par "hoje, sem o agente" → "com o agente" (substitui os cartões riscados) */
.dor-par{list-style:none;background:var(--cartao);border:1px solid var(--linha);border-radius:var(--r-card);overflow:hidden}
.dor-hoje{padding:16px 20px}
.dor-com{padding:16px 20px;background:var(--fundo-2);border-top:1px solid var(--linha)}
.dor-rot{display:flex;align-items:center;gap:8px;font-size:12.5px;font-weight:600;letter-spacing:.02em;text-transform:uppercase;margin-bottom:8px}
.dor-hoje .dor-rot{color:var(--erro)}
.dor-com .dor-rot{color:var(--verde)}
.dor-par .dor-ic{width:20px;height:20px;border-radius:6px;background:transparent}
.dor-par .dor-ic svg{width:14px;height:14px;stroke-width:2.6}
.dor-hoje .dor-ic{background:rgba(164,38,44,.1)}.dor-hoje .dor-ic svg{stroke:var(--erro)}
.dor-com .dor-ic{background:rgba(6,118,71,.12)}.dor-com .dor-ic svg{stroke:var(--verde)}
.dor-par b{display:block;font-family:var(--display);font-weight:600;font-size:16.5px;line-height:1.3;margin-bottom:4px}
.dor-par p{font-size:15px;color:var(--texto-2);line-height:1.5}
.dor-com p{color:var(--texto)}
.dor-fim{list-style:none;background:var(--acao);color:#fff;border-radius:var(--r-card);padding:18px 20px 18px 48px}
.dor-fim b{display:block;font-family:var(--display);font-weight:600;font-size:17px;margin-bottom:4px}
.dor-fim p{color:rgba(255,255,255,.82);font-size:15px}

/* cartões lado a lado com a mesma altura */
.duas-col:has(> .cartao){align-items:stretch}
/* texto do cartão alinhado ao texto do rótulo (ícone 20 + espaço 8), o ícone fica na margem; coluna da esquerda acompanha a lista */
.dor-par b,.dor-par p{padding-left:28px}
@media (min-width:861px){.dor-grade>div{position:sticky;top:96px}}

/* chatbot de menu × agente (/agente-ia-whatsapp): listas com ✗ e ✓, no visual dos pares de "O problema" */
.ck-rot{font-size:12.5px;font-weight:600;letter-spacing:.02em;text-transform:uppercase;margin-bottom:10px}
.ck-rot.nao{color:var(--erro)}.ck-rot.sim{color:var(--verde)}
.ck{list-style:none;display:flex;flex-direction:column;gap:10px}
.ck li{display:flex;gap:10px;align-items:flex-start;font-size:15.5px;line-height:1.5}
.ck .dor-ic{flex:none;width:20px;height:20px;border-radius:6px;margin-top:2px}
.ck .dor-ic svg{width:14px;height:14px;stroke-width:2.6}
.ck-nao li{color:var(--texto-2)}
.ck-nao .dor-ic{background:rgba(164,38,44,.1)}.ck-nao .dor-ic svg{stroke:var(--erro)}
.ck-sim .dor-ic{background:rgba(6,118,71,.12)}.ck-sim .dor-ic svg{stroke:var(--verde)}
.ck-nao+.ck-rot{margin-top:20px;padding-top:18px;border-top:1px solid var(--linha)}

/* ===================== passada anti-cara-de-IA, versão A (19/10/2026, ok do Inti) =====================
   Origem: prototipos/direcoes/anti-ia-comum.css + prototipos/direcoes/anti-ia-a/estilo.css. Auditoria: seo/auditoria-cara-de-ia.md */
/* ===== anti-cara-de-IA (19/10/2026): o que as versões A e B dividem. Entra depois do site.css (tools/gerar-prototipo.mjs).
   Auditoria: seo/auditoria-cara-de-ia.md. A ousadia fica no elemento-assinatura (.sig); o resto é quieto:
   sem quadrado de ícone, sem número sobre rótulo, sem par hoje/com em cartão, sem mono em horário, celular reto. ===== */

/* topo: a faixa de três ✓ vira uma frase */
.confianca{display:block;font-size:15px}

/* topo: o elemento-assinatura no lugar da tela de bloqueio; no celular ele vem logo depois do título */
.sig{margin:0;justify-self:end;width:100%;max-width:560px}
.sig figcaption{margin-top:10px;font-size:13px;color:var(--texto-2)}
@media (max-width:900px){
  .hero-grade:has(.sig){display:flex;flex-direction:column;align-items:stretch;gap:0}
  .hero-grade:has(.sig) .hero-texto{display:contents}
  .hero-texto .eyebrow{order:1}.hero-texto h1{order:2}
  .sig{order:3;justify-self:stretch;max-width:none;margin:4px 0 28px}
  .hero-texto .lede{order:4}.hero-texto .acoes{order:5}.hero-texto .confianca{order:6}
}

/* o problema: texto corrido com divisória, sem cartão, ícone nem rótulo colorido */
.dor-texto{list-style:none;border-top:1px solid var(--linha)}
.dor-texto li{padding:20px 0 22px;border-bottom:1px solid var(--linha)}
.dor-texto li > b{font-family:var(--display);font-weight:600;font-size:18px;line-height:1.3}
.dor-texto li > span{color:var(--texto-2)}
.dor-texto .com{margin-top:10px;padding-left:14px;border-left:2px solid var(--verde);color:var(--texto)}
.dor-texto .com-rot{display:block;font-size:14px;font-weight:600;color:var(--verde)}
.dor-texto .dor-fim{border-bottom:0}
.dor-texto .dor-fim > span{color:var(--texto)}

/* números: cada um abre uma frase; sem caixa, sem número sobre rótulo */
.numeros{display:block;background:none;border:0;border-radius:0;max-width:62ch}
.numero{display:block;padding:18px 0;border-top:1px solid var(--linha);font-size:clamp(1.0625rem,1.6vw,1.22rem);line-height:1.5;color:var(--texto-2)}
.numero + .numero{border-left:0}
.numero strong{font-family:var(--display);font-weight:600;font-size:1.5em;letter-spacing:-.02em;color:var(--texto);font-variant-numeric:tabular-nums}
.numero .fonte{display:inline;margin:0;padding:0;border:0;font-size:15px;color:var(--texto-2);white-space:nowrap}
@media (max-width:820px){.numero + .numero{border-top:1px solid var(--linha)}}

/* hora: Inter com algarismos de largura fixa, não mono */
.linha-tempo time{font-family:var(--corpo);font-variant-numeric:tabular-nums;font-size:14px;font-weight:600;color:var(--verde)}

/* o que ele faz: ficha técnica em linhas, cada uma com um recorte do produto */
.faz{list-style:none;border-top:1px solid var(--linha)}
.faz li{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:16px clamp(24px,4vw,56px);align-items:center;padding:22px 0;border-bottom:1px solid var(--linha)}
.faz h3{font-size:1.1rem;margin-bottom:6px}
.faz p{color:var(--texto-2);font-size:15.5px;max-width:58ch}
.recorte{display:flex;justify-content:flex-start}
@media (max-width:760px){.faz li{grid-template-columns:minmax(0,1fr)}}

.rc-bolha{display:inline-block;max-width:300px;background:var(--cartao);border:1px solid var(--linha);border-radius:var(--r-peq);padding:9px 12px;font-size:14px;line-height:1.45;color:var(--texto)}
.rc-audio{display:inline-flex;align-items:center;gap:10px;min-width:220px}
.rc-audio svg{flex:1;height:20px;fill:var(--texto-2)}
.rc-play{width:24px;height:24px;border-radius:50%;border:1px solid var(--borda);display:grid;place-items:center;flex:none}
.rc-play::after{content:"";border-left:7px solid var(--texto);border-top:4.5px solid transparent;border-bottom:4.5px solid transparent;margin-left:2px}
.rc-dur{font-size:13px;font-variant-numeric:tabular-nums;color:var(--texto-2)}
.rc-linha{display:inline-flex;flex-wrap:wrap;align-items:center;gap:6px 12px;background:var(--cartao);border:1px solid var(--linha);border-radius:var(--r-peq);padding:9px 12px;font-size:14px;color:var(--texto-2);font-variant-numeric:tabular-nums}
.rc-linha b{color:var(--texto);font-weight:600}
.rc-fup,.regua-fup{display:flex;flex-wrap:wrap;gap:6px;list-style:none}
.rc-fup span,.regua-fup li{font-size:12.5px;font-weight:600;letter-spacing:.04em;padding:5px 9px;border:1px solid var(--linha);border-radius:var(--r-peq);color:var(--texto-2);background:var(--cartao)}
.rc-fup .atual,.regua-fup .atual{background:var(--acao);border-color:var(--acao);color:#fff}
.regua-fup .fim{border-style:dashed}
.regua-nota{margin-top:10px;font-size:14px;color:var(--texto-2)}

/* status como no painel: ponto colorido + rótulo em caixa alta (cores de enxut-dashboard/src/app/globals.css) */
.pill{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--texto);white-space:nowrap}
.pill::before{content:"";width:6px;height:6px;border-radius:50%;background:#5F5E5A}
.p-ag::before{background:#3E6C55}.p-eq::before{background:#786018}.p-dq::before{background:#92514A}

/* funil do painel (/agente) */
.funil{border-top:1px solid var(--linha)}
.funil div{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:12px 0;border-bottom:1px solid var(--linha)}
.funil dt{color:var(--texto-2);font-size:15px}
.funil dd{font-family:var(--display);font-weight:600;font-size:1.6rem;letter-spacing:-.02em}

/* conversa: celular reto, sem grade, brilho nem selos; a conversa e o conversa.js ficam iguais */
.palco::before,.palco::after{display:none}
.palco-grade{grid-template-columns:minmax(0,1fr)}
.palco-lado{display:none}
.cel{transform:none;box-shadow:0 0 0 1px rgba(237,239,238,.16)}

/* planos: três iguais, sem o do meio destacado */
.plano .nome{color:var(--texto-2)}

/* IA sob medida: texto e lista com divisórias, sem cartão */
.sob-medida li{background:none;border-radius:0;padding:12px 0;border-top:1px solid var(--linha)}
.sob-medida li:last-child{border-bottom:1px solid var(--linha)}

/* chatbot de menu × agente (/agente): duas colunas de texto, ✗ e ✓ como caractere */
.menu-agente .ck-rot{text-transform:none;letter-spacing:0;font-size:15px;color:var(--texto)}
.menu-agente .ck-nao+.ck-rot{margin-top:0;padding-top:0;border-top:0}
.ck-marca{flex:none;width:1.1em;font-weight:700;line-height:1.5}
.ck-nao .ck-marca{color:var(--erro)}.ck-sim .ck-marca{color:var(--verde)}
.ck li{font-size:16px}
.nota-lateral{padding-left:16px;border-left:2px solid var(--linha)}

/* fechamento alinhado à esquerda */
.cta-final{text-align:left}
.cta-final h2,.cta-final .lede{margin-left:0;margin-right:0}
.cta-final .acoes{justify-content:flex-start}

/* o fim de "O problema" no mesmo texto corrido, sem a caixa escura */
.dor-texto .dor-fim{background:none;color:var(--texto);border-radius:0;padding:20px 0 0}
.dor-texto .dor-fim b{display:inline;font-size:18px;margin:0}

/* mono fica fora da conversa: hora, status e botão em Inter com algarismos fixos */
.cel-status,.cel-chat .chat-dia,.bolha time,.cel-chat .chat-fim,.b-audio .dur,.btn-pausa{font-family:var(--corpo);font-variant-numeric:tabular-nums}

/* com o elemento-assinatura ao lado, o título do topo fica um pouco menor para não passar de 5 linhas */
@media (min-width:901px){.hero-grade:has(.sig) h1{font-size:clamp(2.2rem,4.3vw,3.5rem)}}

/* relatórios semanais (/agente): cada relatório como a capa e o sumário do PDF que o escritório recebe */
.relatorios{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(20px,3vw,32px)}
.rel{background:var(--cartao);border:1px solid var(--linha);border-top:3px solid var(--acao);border-radius:var(--r-peq);padding:clamp(20px,3vw,28px);display:flex;flex-direction:column}
.rel-capa{font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--texto-2);margin-bottom:10px}
.rel-capa span{text-transform:none;letter-spacing:-.02em;font-family:var(--display);font-weight:700;font-size:15px;color:var(--texto);margin-right:6px}
.rel h3{font-size:1.45rem;margin-bottom:6px}
.rel-pergunta{color:var(--texto-2);margin-bottom:16px}
.rel-itens{list-style:none;border-top:1px solid var(--linha);margin-bottom:18px}
.rel-itens li{padding:10px 0 10px 18px;border-bottom:1px solid var(--linha);font-size:15.5px;line-height:1.5;position:relative}
.rel-itens li::before{content:"";position:absolute;left:0;top:1.05em;width:6px;height:6px;border-radius:50%;background:var(--verde)}
.rel-trecho{margin-top:auto;background:var(--fundo-2);border-left:3px solid var(--verde);border-radius:0 var(--r-peq) var(--r-peq) 0;padding:12px 14px;font-size:14.5px}
.rel-trecho b{display:block;margin:6px 0 4px}
.rel-trecho q{color:var(--texto-2)}
.rel-tag{display:inline-block;font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--texto-2);border:1px solid var(--borda);border-radius:var(--r-peq);padding:2px 7px}
.rel-nota{margin-top:16px;font-size:14px;color:var(--texto-2)}
@media (max-width:860px){.relatorios{grid-template-columns:minmax(0,1fr)}}
#relatorios .sec{max-width:68ch}

/* ===== Versão A · Painel. A decisão de marca é a cor: tudo sai do petróleo do logo (#0D1F1C) e do acento real do painel
   (#2E7D6E, enxut-dashboard/src/app/globals.css). O verde inventado (#067647, #12B76A) sai. Tipografia igual à de hoje.
   Contraste (WCAG): texto #0D1F1C / branco 17,1:1 · acento #2E7D6E / branco 4,9:1, / #F6F8F7 4,6:1
   secundário #4B5653 / #F6F8F7 7,2:1 · escuro: #EDEFEE / #0D1F1C 14,8:1, #A3B5B0 / #0D1F1C 8,0:1, #7FC4B3 / #0D1F1C 8,5:1
   conversa: lead #F1F5F3 / #1F6B5C 5,8:1, hora #D2E6E0 / #1F6B5C 4,9:1 · agente #EDEFEE / #1A302B 12,1:1, hora #A9B8B3 6,8:1
   painel (areia do produto): #5F5E5A / #EFEAE0 5,4:1, / #E8E2D5 5,0:1, / #E5DFD1 4,9:1 · status #3E6C55, #786018, #92514A só como ponto ===== */

:root{
  --texto:#0D1F1C;
  --fundo-2:#F6F8F7;
  --linha:#DEE5E3;
  --borda:#C5D0CD;
  --acao:#0D1F1C;
  --acao-hover:#1A302B;
  --verde:#2E7D6E;
  --sinal:#2E7D6E;

  --escuro:#0D1F1C;
  --escuro-2:#152B27;
  --escuro-sec:#A3B5B0;
  --escuro-sinal:#7FC4B3;

  --chat-fundo:#0A1815;
  --chat-barra:#11241F;
  --chat-ag:#1A302B;
  --chat-lead:#1F6B5C;
  --chat-hora:#A9B8B3;
  --chat-lead-hora:#D2E6E0;

  /* o raio do painel: 4 px em tudo */
  --r-peq:4px;
  --r-btn:4px;
  --r-card:4px;
}
.cel{border-radius:40px}
.cel-tela{border-radius:31px}

/* no topo, a coluna do painel é um pouco mais larga */
@media (min-width:901px){.hero-grade:has(.sig){grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr)}.sig{max-width:none}}

/* ---------- o elemento-assinatura: simulação da lista de leads do painel do escritório, nas cores do site ---------- */
.painel-janela{display:grid;grid-template-columns:112px minmax(0,1fr);background:var(--cartao);border:1px solid var(--linha);border-radius:var(--r-card);overflow:hidden;text-align:left;
  box-shadow:0 24px 48px -32px rgba(13,31,28,.35)}
.painel-lado{background:var(--fundo-2);border-right:1px solid var(--linha);padding:16px 10px;display:flex;flex-direction:column;gap:2px;font-size:13.5px;color:var(--texto-2)}
.painel-lado span{padding:7px 8px;border-radius:var(--r-peq)}
.painel-lado .atual{background:var(--cartao);color:var(--texto);font-weight:600;box-shadow:inset 2px 0 0 var(--verde)}
.painel-marca{display:flex;align-items:center;gap:6px;font-family:var(--display);font-weight:700;font-size:15px;color:var(--texto);margin-bottom:12px}
.painel-marca svg{color:var(--acao)}
.painel-lista{padding:16px 16px 14px;min-width:0}
.painel-cab{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:8px 16px;margin-bottom:12px;font-size:13.5px;color:var(--texto-2)}
.painel-cab b{font-family:var(--display);font-size:18px;font-weight:600;color:var(--texto);margin-right:6px}
.painel-totais{display:flex;gap:14px}
.painel-tab{width:100%;border-collapse:collapse;font-size:13.5px;line-height:1.35}
.painel-tab th{text-align:left;font-size:11.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--texto-2);padding:8px;border-bottom:1px solid var(--linha)}
.painel-tab td{padding:9px 8px;border-bottom:1px solid var(--linha);vertical-align:top;color:var(--texto-2)}
.painel-tab tr:last-child td{border-bottom:0}
.painel-tab td b{display:block;font-weight:600;color:var(--texto)}
.painel-tab .tel{display:block;font-family:var(--mono);font-size:12px;color:var(--texto-2)}
.painel-tab .det{display:block;margin-top:3px;font-size:12.5px;color:var(--texto-2);font-variant-numeric:tabular-nums}
.painel-tab .pill{font-size:11px;letter-spacing:.05em}
/* status nas cores do site: agendado no acento, contrato assinado na cor da marca com ✓, qualificação em cinza */
.pill.p-ag::before{background:var(--verde)}
.pill.p-eq::before{background:var(--texto-2)}
.pill.p-as::before{content:"✓";width:auto;height:auto;border-radius:0;background:none;color:var(--acao);font-weight:700;letter-spacing:0}

@media (max-width:1080px){.painel-janela{grid-template-columns:minmax(0,1fr)}.painel-lado{display:none}}
@media (max-width:560px){
  .painel-tab th:nth-child(2),.painel-tab td:nth-child(2){display:none}
  .painel-tab tbody tr:nth-child(n+5){display:none}
  .painel-lista{padding:12px}
}
.recortes{max-width:72ch}

/* auditoria 19/10: no celular, botão e confiança antes do painel; links do rodapé com alvo de 32 px */
@media (max-width:900px){
  .hero-grade:has(.sig) .hero-texto .lede{order:3}
  .hero-grade:has(.sig) .hero-texto .acoes{order:4}
  .hero-grade:has(.sig) .hero-texto .confianca{order:5;margin:16px 0 28px}
  .hero-grade:has(.sig) .sig{order:6;margin:0}
}
.rodape .pilha{gap:2px}
.rodape .pilha a{display:inline-flex;align-items:center;min-height:32px}
/* blog: tabela (gerar-blog.mjs); rola dentro da própria caixa no celular, nunca a página */
.post-corpo .tabela{overflow-x:auto;margin:4px 0 22px;border:1px solid var(--linha);border-radius:var(--r-card)}
.post-corpo table{width:100%;border-collapse:collapse;font-size:15.5px;line-height:1.45}
.post-corpo th{text-align:left;font-weight:600;color:var(--texto);background:var(--fundo-2);padding:10px 14px;border-bottom:1px solid var(--linha)}
.post-corpo td{color:var(--texto-2);padding:10px 14px;border-bottom:1px solid var(--linha);vertical-align:top}
.post-corpo tr:last-child td{border-bottom:0}