:root{
  --tinta:#0f172a; --tinta-2:#475569; --tinta-3:#94a3b8;
  --fundo:#f1f5f9; --carta:#ffffff; --linha:#e2e8f0;
  --acento:#0d9488; --acento-esc:#0f766e;
  --alerta:#dc2626; --aviso:#d97706; --ok:#16a34a; --info:#2563eb;
  --raio:12px; --sombra:0 1px 2px rgba(15,23,42,.06), 0 4px 12px rgba(15,23,42,.05);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font:15px/1.5 -apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  background:var(--fundo); color:var(--tinta);
  -webkit-text-size-adjust:100%;
}
.oculto{display:none !important}
button,input,select,textarea{font:inherit;color:inherit}

/* ------------------------------------------------ topo e abas */
.topo{
  position:sticky; top:0; z-index:30; display:flex; align-items:center;
  justify-content:space-between; gap:12px; padding:12px 16px;
  background:var(--tinta); color:#fff;
}
.marca{font-weight:700; letter-spacing:-.02em}
.marca span{color:#5eead4; font-weight:500}
.topo-acoes{display:flex; gap:8px}

.abas{
  position:sticky; top:52px; z-index:29; display:flex; gap:2px;
  background:var(--carta); border-bottom:1px solid var(--linha); padding:0 8px;
  overflow-x:auto;
}
.aba{
  border:0; background:none; padding:12px 14px; cursor:pointer;
  color:var(--tinta-2); font-weight:600; border-bottom:2px solid transparent; white-space:nowrap;
}
.aba.ativa{color:var(--acento-esc); border-bottom-color:var(--acento)}
.aba b{
  display:inline-block; min-width:20px; padding:1px 6px; margin-left:4px;
  background:var(--alerta); color:#fff; border-radius:99px; font-size:11px;
}
.aba b:empty{display:none}

/* A tela do Marcelo é larga. Prender tudo em 1200px deixava ~800px vazios de
   cada lado enquanto as colunas do funil se espremiam. Cada aba decide sua
   largura: funil e listas usam a tela toda, o Guia fica estreito porque texto
   longo em linha larga não se lê. */
main{padding:16px 24px}

/* ------------------------------------------------ ajuda sempre visível
   Uma linha sob as abas dizendo para que serve a tela em que ele está. */
.explica{
  padding:9px 24px; background:#f0fdfa; border-bottom:1px solid #ccfbf1;
  color:var(--acento-esc); font-size:13.5px; font-weight:500;
}
.explica:empty{display:none}
.ajuda-btn{
  margin-left:auto; align-self:center; width:26px; height:26px; flex:0 0 auto;
  border:1px solid var(--linha); background:var(--carta); color:var(--tinta-2);
  border-radius:99px; cursor:pointer; font-weight:800; font-size:13px; line-height:1;
}
.ajuda-btn:hover{border-color:var(--acento); color:var(--acento-esc)}

/* ------------------------------------------------ tour de primeira vez */
.tour{position:fixed; inset:0; z-index:60; display:grid; place-items:center}
.tour .fundo{position:absolute; inset:0; background:rgba(15,23,42,.62)}
.caixa-tour{
  position:relative; background:var(--carta); border-radius:16px; padding:28px;
  width:min(480px, 92vw); box-shadow:0 24px 60px rgba(15,23,42,.35);
}
.tour-passo{font-size:11.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--tinta-3)}
.caixa-tour h2{margin:6px 0 10px; font-size:22px; letter-spacing:-.02em}
.caixa-tour p{margin:0 0 10px; font-size:15px; color:var(--tinta-2)}
.tour-rodape{
  font-size:13.5px !important; background:#f8fafc; border-left:3px solid var(--acento);
  padding:9px 12px; border-radius:0 8px 8px 0; color:var(--tinta) !important;
}
.tour-pontos{display:flex; gap:5px; margin:16px 0 14px}
.tour-pontos i{width:18px; height:3px; border-radius:99px; background:var(--linha)}
.tour-pontos i.ativo{background:var(--acento); width:26px}
.tour-acoes{display:flex; gap:8px; align-items:center}
.tour-acoes .primario{margin-left:auto}

/* trechos a preencher no script genérico de nicho novo */
mark{background:#fef3c7; color:#92400e; padding:1px 5px; border-radius:4px; font-weight:600}
.fala{
  background:#f8fafc; border-left:3px solid var(--acento); padding:11px 14px;
  border-radius:0 9px 9px 0; color:var(--tinta) !important; font-size:15.5px !important;
}
.obs-fala{font-size:13.5px !important; color:var(--tinta-3) !important}

/* ------------------------------------------------ botões */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  border:1px solid var(--linha); background:var(--carta); color:var(--tinta);
  padding:9px 14px; border-radius:9px; cursor:pointer; font-weight:600;
  text-decoration:none; font-size:14px;
}
.btn:hover{border-color:var(--tinta-3)}
.btn.primario{background:var(--acento); border-color:var(--acento); color:#fff}
.btn.primario:hover{background:var(--acento-esc)}
.btn.fantasma{background:transparent; border-color:rgba(255,255,255,.25); color:#fff}
.btn.fantasma:hover{background:rgba(255,255,255,.12)}
.btn.perigo{color:var(--alerta); border-color:#fecaca}
.btn.pequeno{padding:6px 10px; font-size:13px}

/* ------------------------------------------------ blocos */
.bloco{margin-bottom:24px}
.bloco > h2{
  font-size:13px; text-transform:uppercase; letter-spacing:.06em;
  color:var(--tinta-2); margin:0 0 10px;
}
.bloco > h2 em{font-style:normal; color:var(--tinta-3); font-weight:500; text-transform:none; letter-spacing:0}
.vazio{color:var(--tinta-3); padding:14px; background:var(--carta); border-radius:var(--raio); border:1px dashed var(--linha)}

/* ------------------------------------------------ cartão de lead */
.grade-leads{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(330px, 1fr)); gap:8px;
}
.grade-leads .lead{margin-bottom:0}
.lead{
  background:var(--carta); border:1px solid var(--linha); border-left:4px solid var(--linha);
  border-radius:var(--raio); padding:12px 14px; margin-bottom:8px; cursor:pointer;
  box-shadow:var(--sombra); display:block; width:100%; text-align:left;
}
.lead:hover{border-color:var(--tinta-3)}
.lead.vencido{border-left-color:var(--alerta)}
.lead.hoje{border-left-color:var(--aviso)}
.lead.quente{border-left-color:var(--ok)}
.lead.abriu{border-left-color:var(--ok); background:#f6fffb}
.proposta{border:1px solid var(--linha); border-radius:10px; padding:12px; margin-bottom:8px}
.proposta.aberta{border-color:#bbf7d0; background:#f0fdf4}
.proposta .lin1{display:flex; justify-content:space-between; align-items:center; gap:8px}
.proposta .qd{font-size:12.5px; color:var(--tinta-3); margin-top:3px}
.lead .lin1{display:flex; justify-content:space-between; gap:10px; align-items:baseline}
.lead .nome{font-weight:700; letter-spacing:-.01em}
.lead .meta{color:var(--tinta-2); font-size:13px; margin-top:2px}
.lead .acao{
  margin-top:8px; font-size:13.5px; color:var(--tinta); background:#f8fafc;
  border-radius:8px; padding:7px 9px; border:1px solid var(--linha);
}
.lead .acao b{color:var(--acento-esc)}
.selo{
  display:inline-block; padding:2px 8px; border-radius:99px; font-size:11.5px;
  font-weight:700; background:#f1f5f9; color:var(--tinta-2); white-space:nowrap;
}

/* ------------------------------------------------ tags
   Campo fixo cobre o que é sempre igual; tag cobre o que aparece sem avisar. */
.tags{display:flex; flex-wrap:wrap; gap:5px; margin-top:7px}
.tag{
  display:inline-flex; align-items:center; gap:4px; font-size:11px; font-weight:600;
  background:#eef2ff; color:#4338ca; border:1px solid #e0e7ff;
  border-radius:6px; padding:2px 7px; white-space:nowrap; line-height:1.5;
}
.tags.editaveis .tag{font-size:12.5px; padding:4px 9px; cursor:pointer}
.tag.removivel i{font-style:normal; color:#818cf8; font-size:14px}
.tag.removivel:hover{background:#fee2e2; color:#b91c1c; border-color:#fecaca}
.tag.removivel:hover i{color:#b91c1c}
.tag.sugerida{background:transparent; color:var(--tinta-2); border-color:var(--linha); cursor:pointer}
.tag.sugerida:hover{background:#eef2ff; color:#4338ca; border-color:#e0e7ff}
.tags.sugestoes{margin-top:2px}
.coluna .lead .tags{margin-top:5px}
.coluna .lead .tag{font-size:10px; padding:1px 5px}
.selo.vermelho{background:#fee2e2; color:#b91c1c}
.selo.laranja{background:#ffedd5; color:#c2410c}
.selo.verde{background:#dcfce7; color:#15803d}
.selo.azul{background:#dbeafe; color:#1d4ed8}
.selo.roxo{background:#ede9fe; color:#6d28d9}

/* ------------------------------------------------ kanban
   As 8 etapas cabem na tela sem rolagem lateral: no desktop viram colunas de
   fração igual. A cor de cada coluna codifica o avanço no funil — frio à
   esquerda, quente à direita — então dá para ler o estado de longe. */
/* as 6 etapas de trabalho ganham espaço; Ganho e Perdido são placar, não fila */
.kanban{
  display:grid; grid-template-columns:repeat(6, minmax(0, 1fr)) 0.62fr 0.62fr;
  gap:10px; align-items:start;
}
.coluna{
  background:var(--carta); border:1px solid var(--linha); border-radius:var(--raio);
  padding:0 0 8px; min-width:0; overflow:hidden;
}
.col-topo{padding:10px 10px 8px; border-bottom:1px solid var(--linha); background:#fbfdfe}
.col-nome{
  font-size:11px; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
  color:var(--tinta-2); line-height:1.25; min-height:2.5em;
}
.col-num{display:flex; align-items:baseline; gap:6px; margin-top:4px; flex-wrap:wrap}
.col-num b{font-size:22px; font-weight:800; letter-spacing:-.03em; font-variant-numeric:tabular-nums}
.col-num span{font-size:11px; color:var(--tinta-3); font-variant-numeric:tabular-nums}
.col-barra{height:3px; background:var(--linha); border-radius:99px; margin-top:8px; overflow:hidden}
.col-barra i{display:block; height:100%; background:var(--etapa, var(--tinta-3))}
.coluna .col-topo{border-top:3px solid var(--etapa, var(--linha))}
.col-corpo{padding:8px 8px 0; max-height:62vh; overflow-y:auto}
.col-vazia{font-size:12px; color:var(--tinta-3); padding:6px 2px}
.coluna .lead{
  padding:8px 9px; margin-bottom:6px; box-shadow:none; border-left-width:3px;
  border-radius:9px;
}
.coluna .lead .nome{font-size:13px; line-height:1.3}
.coluna .lead .meta{font-size:11.5px; margin-top:3px}
.coluna .lead .lin1{flex-direction:column; align-items:flex-start; gap:3px}
.coluna .lead .selo{font-size:10.5px; padding:1px 6px}

/* cada etapa tem seu tom: a leitura do funil vira visual, não textual */
.coluna[data-etapa="a_prospectar"]     {--etapa:#94a3b8}
.coluna[data-etapa="tentando_contato"] {--etapa:#60a5fa}
.coluna[data-etapa="gatekeeper"]       {--etapa:#818cf8}
.coluna[data-etapa="decisor"]          {--etapa:#2dd4bf}
.coluna[data-etapa="proposta"]         {--etapa:#fbbf24}
.coluna[data-etapa="negociacao"]       {--etapa:#fb923c}
.coluna[data-etapa="ganho"]            {--etapa:#22c55e}
.coluna[data-etapa="perdido"]          {--etapa:#cbd5e1}
.coluna[data-etapa="ganho"] .col-num b {color:#15803d}
.coluna[data-etapa="perdido"]          {opacity:.72}
.coluna[data-etapa="perdido"]:hover    {opacity:1}

@media (max-width:1180px){
  .kanban{grid-template-columns:none; display:flex; overflow-x:auto; padding-bottom:10px}
  .coluna{flex:0 0 210px}
  .col-corpo{max-height:none}
}

/* ------------------------------------------------ filtros */
.filtro-linha{display:flex; gap:8px; margin-bottom:10px; flex-wrap:wrap}
.filtro-linha input[type=text], .filtro-linha input:not([type]), #busca{
  flex:1 1 220px; padding:10px 12px; border:1px solid var(--linha);
  border-radius:9px; background:var(--carta);
}
.filtro-linha select{
  padding:10px 12px; border:1px solid var(--linha); border-radius:9px; background:var(--carta);
}
.chips{gap:10px}
.chip{
  display:inline-flex; align-items:center; gap:6px; background:var(--carta);
  border:1px solid var(--linha); border-radius:99px; padding:6px 12px; font-size:13.5px; cursor:pointer;
}
.chip.alerta{border-color:#fecaca; color:#b91c1c}

/* ------------------------------------------------ painel */
.numeros{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:10px; margin-bottom:20px}
.num{background:var(--carta); border:1px solid var(--linha); border-radius:var(--raio); padding:14px; box-shadow:var(--sombra)}
.num .v{font-size:26px; font-weight:800; letter-spacing:-.03em}
.num .r{font-size:12.5px; color:var(--tinta-2); margin-top:2px}
.num .obs{font-size:11.5px; color:var(--tinta-3); margin-top:4px}
.num.destaque .v{color:var(--acento-esc)}
.num.risco .v{color:var(--alerta)}

table{width:100%; border-collapse:collapse; background:var(--carta); border-radius:var(--raio); overflow:hidden; box-shadow:var(--sombra)}
th,td{padding:9px 12px; text-align:left; border-bottom:1px solid var(--linha); font-size:14px}
th{background:#f8fafc; font-size:12px; text-transform:uppercase; letter-spacing:.04em; color:var(--tinta-2)}
td.n, th.n{text-align:right; font-variant-numeric:tabular-nums}
tr:last-child td{border-bottom:0}

.barra{height:8px; background:#e2e8f0; border-radius:99px; overflow:hidden; min-width:60px}
.barra i{display:block; height:100%; background:var(--acento)}
.funil-linha{display:flex; align-items:center; gap:10px; margin-bottom:7px}
.funil-linha .rot{flex:0 0 150px; font-size:13.5px}
.funil-linha .barra{flex:1}
.funil-linha .qtd{flex:0 0 34px; text-align:right; font-weight:700; font-variant-numeric:tabular-nums}

/* ------------------------------------------------ gaveta */
.gaveta{position:fixed; inset:0; z-index:50}
.gaveta .fundo{position:absolute; inset:0; background:rgba(15,23,42,.45)}
.painel-gaveta{
  position:absolute; right:0; top:0; bottom:0; width:min(560px,100%);
  background:var(--fundo); overflow-y:auto; padding:16px 16px 60px;
  box-shadow:-8px 0 30px rgba(15,23,42,.2);
}
.gaveta-topo{display:flex; justify-content:space-between; align-items:flex-start; gap:12px; margin-bottom:14px}
.gaveta-topo h2{margin:0; font-size:20px; letter-spacing:-.02em}
.fechar{border:0; background:none; font-size:26px; line-height:1; cursor:pointer; color:var(--tinta-2); padding:0 4px}

.cartao{background:var(--carta); border:1px solid var(--linha); border-radius:var(--raio); padding:14px; margin-bottom:12px; box-shadow:var(--sombra)}
.cartao h3{margin:0 0 10px; font-size:13px; text-transform:uppercase; letter-spacing:.06em; color:var(--tinta-2)}
.campo{margin-bottom:10px}
.campo label{display:block; font-size:12.5px; color:var(--tinta-2); margin-bottom:3px; font-weight:600}
.campo input, .campo select, .campo textarea{
  width:100%; padding:9px 11px; border:1px solid var(--linha); border-radius:9px; background:#fff;
}
.campo textarea{min-height:70px; resize:vertical}
.dupla{display:grid; grid-template-columns:1fr 1fr; gap:10px}
.linha-dados{display:flex; justify-content:space-between; gap:12px; padding:6px 0; border-bottom:1px dashed var(--linha); font-size:14px}
.linha-dados:last-child{border-bottom:0}
.linha-dados span{color:var(--tinta-2)}
.linha-dados a{color:var(--info); text-decoration:none; font-weight:600}

.hist{list-style:none; margin:0; padding:0}
.hist li{padding:9px 0 9px 14px; border-left:2px solid var(--linha); margin-left:4px; position:relative}
.hist li:before{content:""; position:absolute; left:-5px; top:14px; width:8px; height:8px; border-radius:99px; background:var(--tinta-3)}
.hist .qd{font-size:12px; color:var(--tinta-3)}
.hist .rs{font-weight:600; font-size:13.5px}
.hist .nt{font-size:13.5px; color:var(--tinta-2)}

.avisar{background:#fff7ed; border:1px solid #fed7aa; color:#9a3412; border-radius:9px; padding:10px 12px; font-size:13.5px; margin-bottom:12px}
.acoes-rapidas{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:12px}
.erro{color:var(--alerta); font-size:13.5px; min-height:18px}

/* ------------------------------------------------ login */
.login{position:fixed; inset:0; display:grid; place-items:center; background:var(--tinta)}
.caixa-login{background:var(--carta); padding:28px; border-radius:16px; width:min(340px,90%); display:grid; gap:12px}
.caixa-login h1{margin:0; font-size:20px}
.caixa-login input{padding:11px; border:1px solid var(--linha); border-radius:9px}

/* ------------------------------------------------ saude da operacao */
.saude{
  display:flex; gap:20px; align-items:flex-start; background:var(--carta);
  border:1px solid var(--linha); border-left:5px solid var(--tinta-3);
  border-radius:var(--raio); padding:20px; margin-bottom:20px; box-shadow:var(--sombra);
}
.saude.bom{border-left-color:var(--ok)}
.saude.medio{border-left-color:var(--acento)}
.saude.atencao{border-left-color:var(--aviso)}
.saude.ruim{border-left-color:var(--alerta)}
.saude-nota{text-align:center; flex:0 0 92px; padding-top:4px}
.saude-nota b{display:block; font-size:46px; font-weight:800; letter-spacing:-.04em; line-height:1}
.saude-nota span{font-size:11.5px; color:var(--tinta-3)}
.saude.bom .saude-nota b{color:var(--ok)}
.saude.medio .saude-nota b{color:var(--acento-esc)}
.saude.atencao .saude-nota b{color:var(--aviso)}
.saude.ruim .saude-nota b{color:var(--alerta)}
.saude-texto{flex:1; min-width:0}
.saude-texto h3{margin:0 0 2px; font-size:13px; text-transform:uppercase; letter-spacing:.07em; color:var(--tinta-2)}
.saude-texto > p{margin:0 0 14px; font-size:16.5px; font-weight:700; letter-spacing:-.02em}
.saude-itens{display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:12px}
.si-topo{display:flex; justify-content:space-between; font-size:12.5px; margin-bottom:4px}
.si-topo b{font-variant-numeric:tabular-nums}
.si-det{font-size:11.5px; color:var(--tinta-3); margin-top:4px}

/* ------------------------------------------------ sinais / pendencias */
.sinais{display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:10px}
.sinal{
  display:flex; flex-direction:column; align-items:flex-start; gap:2px;
  background:var(--carta); border:1px solid var(--linha); border-radius:var(--raio);
  padding:14px; cursor:pointer; text-align:left; box-shadow:var(--sombra);
}
.sinal:hover{border-color:var(--tinta-3)}
.sinal b{font-size:26px; font-weight:800; letter-spacing:-.03em; line-height:1.1}
.sinal span{font-size:12.5px; color:var(--tinta-2)}
.sinal.risco{border-left:4px solid var(--alerta)} .sinal.risco b{color:var(--alerta)}
.sinal.aviso{border-left:4px solid var(--aviso)}  .sinal.aviso b{color:var(--aviso)}
.sinal.bom{border-left:4px solid var(--ok)}       .sinal.bom b{color:var(--ok)}

/* ------------------------------------------------ variacao e gargalo */
.delta{font-weight:700; white-space:nowrap}
.delta.sobe{color:var(--ok)} .delta.desce{color:var(--alerta)} .delta.neutro{color:var(--tinta-3); font-weight:500}
.gargalo{
  background:#fff7ed; border:1px solid #fed7aa; color:#9a3412;
  border-radius:var(--raio); padding:12px 14px; font-size:14px; margin-bottom:20px;
}

/* ------------------------------------------------ seletor de nicho */
.seletor-nicho{
  background:rgba(255,255,255,.12); color:#fff; border:1px solid rgba(255,255,255,.25);
  border-radius:9px; padding:7px 10px; font-weight:600; max-width:180px;
}
.seletor-nicho option{color:var(--tinta); background:#fff}
.acoes-rapidas.links{margin-top:-6px}
.ajuda{font-size:13.5px; color:var(--tinta-2); margin:0 0 10px}
h4.sub{
  margin:16px 0 8px; font-size:12px; text-transform:uppercase; letter-spacing:.06em;
  color:var(--tinta-3); border-top:1px solid var(--linha); padding-top:12px;
}

/* ------------------------------------------------ guia */
/* O Guia usa a tela toda, mas sem esticar a linha de texto: os cartões de um
   mesmo bloco se dividem em colunas. Cada cartão mantém a medida de leitura;
   o que cresce é a quantidade visível, não o comprimento da linha. */
.guia{max-width:1600px; margin:0 auto}
/* 3 colunas no máximo: os blocos do guia têm 3 itens (as 3 regras, os 3
   achados), então 3 preenche certo e a linha de texto fica em ~70 caracteres */
.guia .bloco{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(440px, 1fr));
  gap:12px; align-items:start;
}
.guia .bloco > h2{grid-column:1 / -1; margin-bottom:2px}
.guia .cartao{margin-bottom:0}
/* cartão sozinho ocupa a linha inteira em vez de deixar 2/3 vazios... */
.guia .bloco > .cartao:only-of-type{grid-column:1 / -1}
/* ...e o texto dentro dele para de esticar: quem cresce é o cartão, não a linha */
.guia .cartao p, .guia .cartao li, .guia .rodape{max-width:78ch}
.guia .capa{max-width:none}
.guia .capa p{max-width:70ch}
/* tabelas e listas longas ficam melhor inteiras, sem partir em coluna */
.guia .bloco:has(table.cadencia), .guia .bloco:has(.par){grid-template-columns:1fr}
.guia .capa{
  background:linear-gradient(135deg,var(--tinta),#134e4a); color:#fff;
  border-radius:var(--raio); padding:22px; margin-bottom:24px;
}
.guia .capa h1{margin:0 0 8px; font-size:23px; letter-spacing:-.03em}
.guia .capa p{margin:0; color:#cbd5e1; font-size:14.5px; max-width:60ch}
.guia .capa b{color:#5eead4}

.guia .cartao h3{
  font-size:15.5px; text-transform:none; letter-spacing:-.01em;
  color:var(--tinta); margin-bottom:8px;
}
.guia .cartao p{margin:0 0 10px; font-size:14.5px}
.guia .cartao p:last-child{margin-bottom:0}
.guia .rodape{font-size:13.5px; color:var(--tinta-2); border-top:1px dashed var(--linha); padding-top:10px; margin-top:12px}
.guia .lig{background:#f0fdfa; border-left:3px solid var(--acento); padding:9px 12px; border-radius:0 8px 8px 0}

.guia .regra{border-left:4px solid var(--acento)}
.guia .achado{border-left:4px solid var(--info)}
/* achado que virou boa notícia muda de cor — o guia deixa de brigar com o dado */
.guia .achado.resolvido{border-left-color:var(--ok)}
.guia .achado.resolvido .numerao{color:var(--ok)}
.guia .achado.resolvido .lig{background:#f0fdf4; border-left-color:var(--ok)}
.guia .numerao{font-size:30px; font-weight:800; letter-spacing:-.03em; color:var(--info); margin-bottom:6px}

.passos{margin:0; padding-left:20px}
.passos li{margin-bottom:10px; font-size:14.5px}
.passos li:last-child{margin-bottom:0}
.dicas{margin:0; padding-left:18px}
.dicas li{margin-bottom:9px; font-size:14.5px}
.dicas li:last-child{margin-bottom:0}

table.comparar, table.cadencia{box-shadow:none; border:1px solid var(--linha); margin:12px 0}
table.comparar td, table.cadencia td{vertical-align:top; font-size:13.5px}
table.cadencia td:first-child{font-weight:800; color:var(--acento-esc); width:38px}
.cvermelho{color:var(--alerta)}

.par{display:grid; grid-template-columns:1fr 1fr; gap:12px; margin:12px 0}
.par h4{margin:0 0 8px; font-size:12px; text-transform:uppercase; letter-spacing:.06em}
.par > div{border-radius:9px; padding:12px}
.par .ruim{background:#fef2f2; border:1px solid #fecaca}
.par .ruim h4{color:#b91c1c}
.par .bom{background:#f0fdf4; border:1px solid #bbf7d0}
.par .bom h4{color:#15803d}
.par p{font-size:13.5px; margin:0 0 8px; color:var(--tinta-2)}
.par p:last-child{margin-bottom:0}

.assinatura{
  text-align:center; color:var(--tinta-2); font-size:13.5px;
  border-top:1px solid var(--linha); padding-top:16px; margin-top:8px;
}

@media (max-width:640px){
  main{padding:12px}
  .abas{top:52px}
  .dupla{grid-template-columns:1fr}
  .funil-linha .rot{flex:0 0 110px; font-size:12.5px}
  .topo{flex-wrap:wrap; gap:8px}
  .abas{top:auto; position:static}
  .seletor-nicho{order:3; flex:1 1 100%; max-width:none}
  .par{grid-template-columns:1fr}
  .guia .capa h1{font-size:20px}
  .guia .numerao{font-size:26px}
  .saude{flex-direction:column; gap:12px; padding:16px}
  .saude-nota{display:flex; align-items:baseline; gap:8px; flex:0 0 auto; padding-top:0}
  .saude-nota b{font-size:38px}
  .saude-itens{grid-template-columns:1fr}
  .sinais{grid-template-columns:1fr 1fr}
  .sinal b{font-size:22px}
}