/* ============================================================
   PALETA E FONTES DO DEMÉTRIO
   origem: SYSLED-Precificacao-2026-08-18.html (tokens :root)

   O que veio dele, literal:
     ink / ink-2 / ink-3 · paper · paper-blue · blue · blue-deep
     lime · aqua · coral · gold · purple · line · muted
     Bricolage Grotesque (títulos) + Manrope (corpo)
     radius 20px · sombra 0 32px 90px rgba(2,14,25,.19)

   O que eu calculei em cima:
     a versão ESCURA de cada acento, para quando ele precisa ser
     TEXTO sobre fundo claro. Os originais têm L 67-73% e só
     funcionam sobre o ink — medido: 1,06 a 2,75 sobre o paper,
     contra 5,89 a 15,35 sobre o ink.
   ============================================================ */
:root{
  /* ---------- escuros ---------- */
  --ink:#071827;
  --ink-2:#0d2538;
  --ink-3:#16344b;

  /* ---------- superfícies ---------- */
  --paper:#f2f4ef;
  --paper-blue:#eaf1f7;
  --branco:#ffffff;

  /* ---------- azul da marca ---------- */
  --blue:#2f72f4;
  --blue-deep:#1e55b9;

  /* ---------- acentos originais: feitos para FUNDO ESCURO ---------- */
  --lime:#c8ff65;
  --aqua:#72e4d1;
  --coral:#ff8d72;
  --gold:#f2ca76;
  --purple:#9b83ef;

  /* ---------- os mesmos acentos em versão TEXTO sobre claro (4,6:1) ---------- */
  --lime-tx:#58781C;
  --aqua-tx:#1D7B6C;
  --coral-tx:#BD472C;
  --gold-tx:#8A6920;
  --purple-tx:#7358D8;

  /* ---------- linhas e texto de apoio ---------- */
  --line:#d8e0e5;
  --line-dark:rgba(255,255,255,.13);
  --muted:#60707d;
  --muted-light:#9fb0bd;

  /* ---------- forma ---------- */
  --shell:1280px;
  --radius:20px;
  --shadow-dem:0 32px 90px rgba(2,14,25,.19);

  /* ---------- tipografia ---------- */
  --display:'Bricolage Grotesque','Manrope',sans-serif;
  --body:'Manrope',sans-serif;
}

/* ============================================================
   OS TOKENS DO SITE PASSAM A APONTAR PARA A PALETA DO DEMÉTRIO
   ============================================================ */
:root{
  /* neutros: os cinzas dele (H 203-208, mesma família do azul) */
  --n-0:var(--branco);
  --n-50:var(--paper);
  --n-100:var(--paper-blue);
  --n-200:var(--line);
  --n-300:var(--muted-light);
  --n-500:var(--muted);
  --n-700:var(--ink-3);
  --n-900:var(--ink);

  /* marca: o azul dele */
  --m-50:#EAF1FB;
  --m-100:#D6E4FA;
  --m-200:#AFC9F6;
  --m-300:#7BA5F7;
  --m-400:#2f72f4;
  --m-500:#1e55b9;
  --m-600:#19489C;
  --m-700:#16344b;
  --m-900:#071827;

  /* acentos como texto sobre claro */
  --a-ok:#1D7B6C;
  --a-atencao:#8A6920;
  --a-erro:#BD472C;
  --a-extra:#7358D8;

  /* preenchimento de gráfico: acentos dele em peso médio */
  --g-azul:#5B93F6;
  --g-ok:#3FBBA6;
  --g-atencao:#D4A63F;
  --g-erro:#E0705A;
  --g-extra:#8B72E2;

  /* acento claro para fundo escuro: os originais dele */
  --a-ok-claro:#72e4d1;
  --a-atencao-claro:#f2ca76;
  --a-erro-claro:#ff8d72;
  --a-extra-claro:#9b83ef;

  /* fontes */
  --font-heading:var(--display);
  --font-body:var(--body);

  /* forma */
  --s-r-lg:var(--radius);
  --s-r-md:12px;
  --s-r-sm:6px;
  --r-card:var(--radius);
}

/* ============================================================
   TIPOGRAFIA
   Bricolage Grotesque é variável: peso 400-800, largura 75-100
   ============================================================ */
body{font-family:var(--body)}
h1,h2,h3,h4,.kpi-num,.pn b,.fc-num b,.versus-num,.rosca-mini-num b,
.slogan,.fc-slogan,.mod b,.bob-nome,.etapa-card b,.p-card-topo h3{
  font-family:var(--display);
  font-variation-settings:'wdth' 92;
}
h1{font-weight:800;letter-spacing:-.038em}
h2{font-weight:800;letter-spacing:-.03em}
h3{font-weight:700;letter-spacing:-.018em}

/* ============================================================
   SUPERFÍCIES: o paper dele no lugar do branco puro
   ============================================================ */
body{background:var(--branco)}
.segmentos,.habito,#agentes,#comparativo,#clientes,.faixa-cred{background:var(--branco)}
.virada,.produto,.metodo,#integracoes,#fechar{background:var(--paper)}
.duvidas{background:var(--paper);background-image:none}
.dor{background:linear-gradient(150deg,#071827 0%,#0d2538 55%,#16344b 100%)}

/* seção escura com os acentos vivos dele */
.dor h2,.dor .kpi-num{color:var(--branco)}
.dor .section-head p,.dor .grafico-nota{color:#C9D8E4}
.dor .eyebrow{color:var(--lime);background:rgba(200,255,101,.14)}
.dor .fonte,.dor .p-card-topo span,.dor .grafico-canal .p-card-topo span{color:#9FB4C4}
.dor .sintoma{background:rgba(255,255,255,.06);border-color:var(--line-dark);color:#DCE6EE}
.dor .sintoma svg{stroke:var(--coral)}
.dor .p-card,.dor .grafico-canal{background:rgba(255,255,255,.05);border-color:var(--line-dark)}
.dor .barras-canal .barra-l b,.dor .barras-canal i{color:#E4ECF2}
.dor .barras-canal .barra-t{background:rgba(255,255,255,.10)}
.dor .barras-canal .barra-l.verde .barra-p{background:var(--aqua)}
.dor .barras-canal .barra-l.azul .barra-p{background:var(--m-300)}
.dor .barras-canal .barra-l.laranja .barra-p{background:var(--gold)}
.dor .barras-canal .barra-l.roxo .barra-p{background:var(--purple)}
.dor .dor-pergunta{background:var(--branco);color:var(--ink)}

/* ============================================================
   SOMBRA, RAIO E LARGURA
   ============================================================ */
.tela-pc,.tela-hero,.fecha-bloco,.bob-resposta{box-shadow:var(--shadow-dem)}
.p-card,.placar-c,.quote,.agente,.col-bloco,.bob-cabeca,.seg-grid,
.kpi,.mod,.pn,.fc-num > div,.etapa-card{border-radius:var(--radius)}
.wrap{max-width:var(--shell)}

/* ============================================================
   ONDE A COR VIVA DELE ENTRA
   ============================================================ */
.kpi-leg.ok,.placar-leg.bom,.pn .pn-zero,.fc-num .fc-zero{color:#1D7B6C}
.kpi-leg.aviso,.placar-leg.medio{color:#8A6920}
.kpi-leg.alerta,.placar-leg.ruim{color:#BD472C}
.ic-sim{stroke:#1D7B6C}
.ic-nao{stroke:var(--muted-light)}
.agente .selo{color:#1D7B6C;background:rgba(114,228,209,.18)}
.agente.copiloto .selo{color:#1D7B6C}
.pl-cab .destaque{color:#1D7B6C}
.placar-c.vence{border-color:var(--aqua);box-shadow:0 12px 36px rgba(114,228,209,.26)}
.pn b,.fc-num b{color:var(--blue-deep)}
.slogan{color:var(--blue-deep);background:rgba(47,114,244,.10)}
.tx-grad{
  color:var(--blue-deep);
  background:linear-gradient(90deg,#1e55b9,#2f72f4,#1D7B6C,#2f72f4,#1e55b9);
  background-size:200% auto;
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
.mod-ic{background:var(--paper-blue)}
.mod-ic svg{stroke:var(--blue-deep)}
.etapa-card .n{background:var(--paper-blue);color:var(--blue-deep)}
.bob-avatar{background:linear-gradient(150deg,#2f72f4,#1e55b9)}
.bob-online{background:#3FBBA6}
.logo-chip i{background:var(--blue)}
.forma.azul,.forma.lilas{background:radial-gradient(circle,#7BA5F7,transparent 70%)}
.forma.verde,.forma.ambar{background:radial-gradient(circle,#AFC9F6,transparent 70%)}

/* funil: escala do azul dele, do escuro ao claro, texto branco sempre 4,5+ */
.funil-e.f1{background:#0d2538}
.funil-e.f2{background:#16344b}
.funil-e.f3{background:#1B4680}
.funil-e.f4{background:#1e55b9}
.funil-e.f5{background:#2661CE}

/* botão com o azul vivo dele */
.btn-primary,.btn-adesivo.primario{
  background:var(--blue-deep);
  box-shadow:0 4px 16px rgba(30,85,185,.3);
}
.btn-primary:hover,.btn-adesivo.primario:hover{
  background:var(--blue);
  box-shadow:0 8px 24px rgba(47,114,244,.36);
}

/* ============================================================
   AJUSTE FINO — 3 casos ficaram em 4,48-4,49 (0,02 do mínimo).
   Um passo mais escuro, mantendo o matiz do Demétrio.
   ============================================================ */
:root{
  --muted:#5E6D7A;   /* era #60707d — agora 4,81 sobre o paper */
  --n-500:#5E6D7A;
}
.kpi-leg.ok,.placar-leg.bom,.pn .pn-zero,.fc-num .fc-zero,
.ic-sim,.agente .selo,.pl-cab .destaque,.agente.copiloto .selo{color:#1E806F}
.ic-sim{stroke:#1E806F}
.p-card-topo span,.placar-rot,.kpi-rot,.pl-cab .pl-c{color:#5E6D7A}

/* selo do agente: o fundo aqua .18 clareia o cartão, então o texto escurece */
.agente .selo,.agente.copiloto .selo,.agente.auto .selo{color:#186B5C}

/* ===== INTEGRAÇÕES: indicadores da conexão ===== */
.conecta-kpi{margin-top:26px}
.kpi-num .kpi-zero{color:#1E806F;font-size:.82em}

/* ===== DÚVIDAS: números antes das perguntas ===== */
.duvida-num{
  display:grid;gap:12px;margin:20px 0 22px;
  grid-template-columns:repeat(auto-fit,minmax(158px,1fr));
}
.duvida-num > div{
  background:var(--branco);border:1px solid var(--line);border-radius:var(--radius);
  padding:18px 16px;text-align:center;
}
.duvida-num b{
  display:block;font-family:var(--display);font-weight:800;
  font-size:1.7rem;line-height:1;color:var(--blue-deep);
  font-variant-numeric:tabular-nums;white-space:nowrap;
}
.duvida-num .d-zero{color:#1E806F}
.duvida-num small{display:block;margin-top:8px;font-size:.78rem;line-height:1.4;color:var(--muted)}

/* ===== FECHAMENTO: os 3 passos do que acontece depois ===== */
.fecha-passos{display:grid;gap:10px;margin:22px 0 24px}
@media(min-width:640px){.fecha-passos{grid-template-columns:repeat(3,1fr)}}
.fecha-passos > div{
  background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.16);
  border-radius:14px;padding:14px 15px;
}
.fecha-passos span{
  display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;
  background:rgba(255,255,255,.22);color:#fff;
  font-family:var(--display);font-weight:800;font-size:.72rem;margin-bottom:8px;
}
.fecha-passos b{display:block;font-size:.86rem;color:#fff;line-height:1.35}
.fecha-passos small{display:block;margin-top:4px;font-size:.75rem;color:#C9D8E4}

/* numeral dos passos: o círculo translúcido clareava demais o texto */
.fecha-passos span{background:rgba(255,255,255,.30);color:#0d2538;font-weight:800}

/* ============================================================
   NUMERAÇÃO DE SEÇÃO (padrão .plan-index do Demétrio)
   ele: color #98a2aa · font-size .59rem · letter-spacing .09em
   ============================================================ */
.sec-num{
  font-family:var(--display);
  font-size:.62rem;font-weight:700;letter-spacing:.16em;
  color:#61707D;   /* o tom mais discreto que ainda passa: 5,09 branco - 4,60 paper */
  margin-bottom:10px;
}
.sec-num::after{
  content:'';display:inline-block;vertical-align:middle;
  width:26px;height:1px;background:var(--line);margin-left:10px;
}
.dor .sec-num{color:#96AFC4}  /* 4,6 sobre o ink-3 */
.dor .sec-num::after{background:rgba(255,255,255,.18)}

/* ============================================================
   PULSO (keyframe exato do Demétrio)
   0%,35% opacity .75 scale .6  →  85%,100% opacity 0 scale 1.8
   ============================================================ */
@keyframes pulseDem{
  0%,35%   {opacity:.75;transform:scale(.6)}
  85%,100% {opacity:0;transform:scale(1.8)}
}
.tem-pulso{position:relative}
.tem-pulso::after{
  content:'';position:absolute;inset:0;border-radius:inherit;
  background:currentColor;opacity:0;pointer-events:none;
}
@media(prefers-reduced-motion:no-preference){
  .tem-pulso::after{animation:pulseDem 2.4s ease-out infinite}
}

/* o selo verde do BOB ganha a onda */
.bob-online{position:relative;color:#3FBBA6}
.bob-online::after{
  content:'';position:absolute;inset:-2px;border-radius:50%;
  background:#3FBBA6;opacity:0;pointer-events:none;
}
@media(prefers-reduced-motion:no-preference){
  .bob-online::after{animation:pulseDem 2.4s ease-out infinite}
}

/* o ponto de conexão dos sistemas também pulsa */
.conecta-selo{position:relative;overflow:visible}
.conecta-selo::before{
  content:'';position:absolute;inset:0;border-radius:9999px;
  background:var(--blue);opacity:0;pointer-events:none;z-index:-1;
}
@media(prefers-reduced-motion:no-preference){
  .conecta-selo::before{animation:pulseDem 2.8s ease-out infinite}
}

/* ============================================================
   TRANSIÇÃO DE 180ms (a dele; a nossa era 280ms)
   interface responde mais rápido ao toque
   ============================================================ */
.kpi,.mod,.pn,.etapa-card,.placar-c,.quote,.agente,.logo-chip,.pastilha,
.btn,.btn-adesivo,.fc-num > div,.fc-linha span,.p-card,.duvida-num > div,
.bob-pastilhas button,.abas button,.seg-lista button{
  transition:transform 180ms ease,box-shadow 180ms ease,
             border-color 180ms ease,background-color 180ms ease,color 180ms ease;
}

/* ============================================================
   ROLAGEM — correção do conflito medido
   `scroll-behavior:smooth` do CSS brigava com o lenis: os dois
   controlavam a rolagem ao mesmo tempo, e o resultado era o
   movimento estranho. O lenis assume; o CSS sai do caminho.
   ============================================================ */
html{scroll-behavior:auto}
html.lenis,html.lenis body{height:auto}
html.lenis{overflow-x:clip}          /* clip contém sem virar container de rolagem */
body{overflow-x:clip}
.lenis.lenis-smooth{scroll-behavior:auto}
.lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain}
.lenis.lenis-stopped{overflow:hidden}