/* TEMA CUME CAPITAL — escuro, roxo
   ==========================================================================
   A estrutura é a que foi aprovada (grade de cartões, chips, cartão com capa,
   coluna de painéis). O que mudou é a pele, e ela não foi inventada: as cores
   e a fonte saíram medidas de www.cumecapital.com.br e do padrão de
   apresentação da casa.

     #1B1226  quase-preto roxo, a cor de texto do site, que aqui vira o fundo
     #512A8C  violeta da marca, usado nos botões e no que está ativo
     #C9B6E8  lilás claro, para texto de realce sobre o escuro
     #BBAFCE  lilás apagado, para texto secundário
     #FF6300  laranja da marca, reservado para UMA coisa por cartão: o motivo
              de venda, que é o que faz pegar o telefone. Laranja em tudo
              deixa de significar qualquer coisa.
     #371B4C  roxo profundo, para as superfícies elevadas
   Fonte Hanken Grotesk, a mesma do site. */

@import url('https://fonts.googleapis.com/css2?family=Hanken+Grotesk:wght@400;500;600;700;800&display=swap');

:root {
  --fundo: #140d1c;
  --carta: #211634;
  --carta-2: #2a1b40;
  --elevado: #371b4c;
  --linha: #3b2a52;
  --linha-forte: #4c3768;

  --violeta: #512a8c;
  --violeta-claro: #6b3bb0;
  --lilas: #c9b6e8;
  --lilas-fraco: #bbafce;

  --laranja: #ff6300;
  --laranja-claro: #ff8534;

  --tinta: #f4f0fa;
  --tinta-forte: #ffffff;
  --tinta-fraca: #9d93ad;

  --verde: #4ade80;
  --alerta: #fb7185;
  --ambar: #fbbf24;

  /* Apelidos do tema antigo. As telas de mandato, equipe e convite foram
     escritas com estes nomes; mapear aqui migra as tres de uma vez, sem
     caca aos seletores arquivo por arquivo. */
  --fraco: #9d93ad;
  --destaque: #ff6300;
  --bom: #4ade80;
}

* { box-sizing: border-box; }
body {
  margin: 0; background: var(--fundo); color: var(--tinta);
  font-family: 'Hanken Grotesk', system-ui, sans-serif; font-size: 16px; line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }

/* ------------------------------------------------------------------ topo */
.topo-barra { border-bottom: 1px solid var(--linha); background: rgba(20, 13, 28, .92);
              backdrop-filter: blur(8px); position: sticky; top: 0; z-index: 30; }
.topo-dentro { max-width: 1280px; margin: 0 auto; display: flex; align-items: center; gap: 26px; padding: 13px 22px; }
/* O logo é o arquivo do designer, variante horizontal branca, com o quadro
   recortado no conteúdo (o original é uma prancheta 1920x1080 com o desenho
   no meio). Proporção 4,96:1. */
.logo { display: flex; align-items: center; }
.logo img { height: 26px; width: auto; display: block; }
.topo-barra nav { display: flex; gap: 22px; font-size: 14.5px; }
.topo-barra nav a { color: var(--tinta-fraca); padding: 4px 0; border-bottom: 2px solid transparent; }
.topo-barra nav a:hover { color: var(--tinta); }
.topo-barra nav a.aqui { color: var(--lilas); border-color: var(--violeta-claro); font-weight: 600; }
.cresce { flex: 1; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 40px; padding: 0 20px; border-radius: 9999px; border: 0; cursor: pointer;
  font-family: inherit; font-size: 14.5px; font-weight: 600;
  background: var(--violeta); color: #fff; transition: background .15s;
}
.btn:hover { background: var(--violeta-claro); }
.btn.vazio { background: transparent; color: var(--lilas-fraco); border: 1px solid var(--linha-forte); }
.btn.vazio:hover { background: var(--carta-2); color: var(--tinta); border-color: var(--violeta-claro); }
.btn.laranja { background: var(--laranja); color: #1b1226; }
.btn.laranja:hover { background: var(--laranja-claro); }

.pagina { max-width: 1280px; margin: 0 auto; padding: 26px 22px 70px; }

/* ---------------------------------------------------------------- busca */
.caixa-busca { display: flex; gap: 10px; align-items: center; margin-bottom: 22px; }
.caixa-busca input {
  flex: 1; height: 50px; padding: 0 22px; font-family: inherit; font-size: 15.5px;
  color: var(--tinta); background: var(--carta); border: 1px solid var(--linha); border-radius: 9999px;
}
.caixa-busca input::placeholder { color: var(--tinta-fraca); }
.caixa-busca input:focus { outline: none; border-color: var(--violeta-claro);
                           box-shadow: 0 0 0 3px rgba(107, 59, 176, .22); }
.caixa-busca .funil { width: 50px; height: 50px; border-radius: 15px; background: var(--violeta);
                      color: #fff; border: 0; cursor: pointer; font-size: 18px; }
.caixa-busca .funil:hover { background: var(--violeta-claro); }

.sugestao { text-align: center; color: var(--tinta-fraca); font-size: 14px; margin: 18px 0 10px; }
.chips { display: flex; flex-wrap: wrap; gap: 9px; justify-content: center; }
.chip {
  display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 16px;
  border-radius: 9999px; border: 1px solid var(--linha); background: var(--carta);
  font-family: inherit; font-size: 14px; color: var(--tinta); cursor: pointer;
  transition: border-color .15s, background .15s; white-space: nowrap;
}
.chip:hover { border-color: var(--violeta-claro); background: var(--carta-2); }
.chip.ativo { background: var(--violeta); border-color: var(--violeta); color: #fff; font-weight: 600; }
.chip .x { opacity: .75; font-weight: 700; }

.titulo-secao { display: flex; align-items: center; gap: 12px; margin: 34px 0 16px; flex-wrap: wrap; }
.titulo-secao h2 { font-size: 20px; font-weight: 700; color: var(--tinta-forte); margin: 0; letter-spacing: -.01em; }
.titulo-secao .conta { color: var(--tinta-fraca); font-size: 14px; }

/* --------------------------------------------------------------- cartões */
.grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(248px, 1fr)); gap: 20px; }
.cartao {
  border: 1px solid var(--linha); background: var(--carta); border-radius: 24px;
  overflow: hidden; cursor: pointer; display: flex; flex-direction: column;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.cartao:hover { transform: scale(1.03); border-color: var(--violeta-claro);
                box-shadow: 0 16px 38px rgba(0, 0, 0, .45); }
.capa { position: relative; aspect-ratio: 16 / 10; background: var(--carta-2); overflow: hidden; }
.capa img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Logo quase sempre vem desenhado para fundo claro. Sobre o roxo escuro ele
   some, então o logo ganha a sua própria placa clara, como um crachá. */
.capa.logo { display: flex; align-items: center; justify-content: center; padding: 20px;
             background: linear-gradient(140deg, var(--marca-a, #2a1b40), var(--marca-b, #371b4c)); }
.capa.logo img { width: auto; height: auto; max-width: 74%; max-height: 66%; object-fit: contain;
                 background: #fff; border-radius: 10px; padding: 9px; }
.capa.marca { display: flex; align-items: center; justify-content: center; font-size: 46px;
              background: linear-gradient(140deg, var(--marca-a, #2a1b40), var(--marca-b, #371b4c)); }
.guardar {
  position: absolute; right: 14px; bottom: 14px; width: 38px; height: 38px; border-radius: 9999px;
  border: 1px solid var(--linha-forte); background: rgba(20, 13, 28, .78); backdrop-filter: blur(5px);
  cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 16px;
  color: var(--lilas-fraco); transition: color .15s, background .15s;
}
.guardar:hover { background: #140d1c; color: var(--alerta); }
.guardar.on { color: var(--alerta); }
.selo-capa {
  position: absolute; left: 14px; top: 14px; padding: 4px 11px; border-radius: 9999px;
  font-size: 11.5px; font-weight: 600; background: rgba(20, 13, 28, .82); color: var(--lilas);
  border: 1px solid var(--linha-forte); backdrop-filter: blur(5px);
}
.selo-capa.quente { background: var(--laranja); color: #1b1226; border-color: var(--laranja); }
.corpo-cartao { padding: 15px 17px 17px; display: flex; flex-direction: column; gap: 7px; flex: 1; }
.corpo-cartao h3 {
  font-size: 14.5px; font-weight: 700; line-height: 1.4; color: var(--tinta-forte); margin: 0 0 2px;
}
.linha-cartao { display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--tinta-fraca); }
.linha-cartao i { font-style: normal; color: var(--violeta-claro); }
.motivo-cartao {
  margin-top: auto; padding-top: 10px; font-size: 15px; font-weight: 700; color: var(--laranja-claro);
  line-height: 1.35;
}
.motivo-cartao small { display: block; font-weight: 400; font-size: 12px; color: var(--tinta-fraca); margin-top: 3px; }

.vazio-grade { grid-column: 1/-1; text-align: center; padding: 60px 20px; color: var(--tinta-fraca); }
.carregando-grade { grid-column: 1/-1; text-align: center; padding: 50px; color: var(--tinta-fraca); }

/* ------------------------------------------------------ página da empresa */
.empresa-topo { display: grid; grid-template-columns: 1fr 330px; gap: 34px; align-items: start; }
@media (max-width: 920px) { .empresa-topo { grid-template-columns: 1fr; } }
.empresa-capa { border-radius: 24px; overflow: hidden; border: 1px solid var(--linha);
                background: var(--carta-2); aspect-ratio: 16/7; display: flex;
                align-items: center; justify-content: center; }
.empresa-capa img { max-width: 70%; max-height: 72%; object-fit: contain;
                    background: #fff; border-radius: 12px; padding: 12px; }
.empresa-capa.foto img { max-width: 100%; max-height: 100%; width: 100%; height: 100%;
                         object-fit: cover; background: none; border-radius: 0; padding: 0; }
h1.nome-empresa { font-size: 29px; font-weight: 800; color: var(--tinta-forte); margin: 20px 0 6px;
                  line-height: 1.22; letter-spacing: -.02em; }
.sub-empresa { color: var(--tinta-fraca); font-size: 14.5px; }

.painel { border: 1px solid var(--linha); border-radius: 20px; background: var(--carta); padding: 20px; }
.painel h4 { margin: 0 0 12px; font-size: 11.5px; text-transform: uppercase; letter-spacing: .07em;
             color: var(--lilas-fraco); font-weight: 700; }
.painel + .painel { margin-top: 18px; }
.canal { display: flex; align-items: center; gap: 9px; padding: 10px 0; border-top: 1px solid var(--linha); font-size: 14px; }
.canal:first-of-type { border-top: 0; }
.canal a { color: var(--lilas); font-weight: 500; }
.canal a:hover { color: var(--laranja-claro); }

.secao { margin-top: 38px; }
.secao h2 { font-size: 20px; font-weight: 700; color: var(--tinta-forte); margin: 0 0 4px; letter-spacing: -.01em; }
.secao p.ajuda { color: var(--tinta-fraca); font-size: 14px; margin: 0 0 16px; }
.quadro { border: 1px solid var(--linha); border-radius: 18px; background: var(--carta); padding: 18px 20px; }
.quadro + .quadro { margin-top: 12px; }
.quadro h3 { margin: 0 0 4px; font-size: 16.5px; font-weight: 700; color: var(--tinta-forte); }
.quadro p { margin: 0 0 9px; line-height: 1.6; font-size: 14.5px; }
.quadro ul { margin: 10px 0 0; padding-left: 18px; }
.quadro li { font-size: 14px; margin-bottom: 6px; line-height: 1.55; color: var(--tinta); }
.numeros { display: flex; flex-wrap: wrap; gap: 14px 34px; }
.numero b { display: block; font-size: 11.5px; text-transform: uppercase; letter-spacing: .05em;
            color: var(--tinta-fraca); font-weight: 600; }
.numero span { font-size: 17px; font-weight: 700; color: var(--tinta-forte); }
.etq { display: inline-block; padding: 3px 11px; border-radius: 9999px; font-size: 12px; font-weight: 600; }
.etq.rosa { background: rgba(255, 99, 0, .15); color: var(--laranja-claro); }
.etq.cinza { background: var(--carta-2); color: var(--lilas-fraco); }
.etq.verde { background: rgba(74, 222, 128, .13); color: var(--verde); }
.fonte-linha { font-size: 11.5px; color: #6f6580; margin-top: 10px; line-height: 1.5; }

/* Com quem falar, no cartão da grade. Vem depois do motivo porque a ordem da
   decisão é: por que ela venderia, e então com quem eu falo. */
.contato-cartao { display:flex; align-items:baseline; gap:8px; flex-wrap:wrap;
                  margin-top:10px; padding-top:10px; border-top:1px solid var(--linha);
                  font-size:12.5px; }
.contato-cartao b { color:var(--lilas); font-weight:600; font-size:12.5px; }
.contato-cartao a { color:var(--tinta); }
.contato-cartao a:hover { color:var(--laranja-claro); }
.contato-cartao em { font-style:normal; color:var(--tinta-fraca); }
.contato-cartao.vazio { color:var(--tinta-fraca); }

/* FICHA DE PESSOA
   Nome, cargo e canais juntos. Antes eram linhas soltas e nada dizia que o
   telefone e o e-mail eram da mesma pessoa. */
.ficha { padding:12px 0; border-top:1px solid var(--linha); }
.ficha:first-child { border-top:0; padding-top:0; }
.ficha.empresa { margin-top:6px; border-top:1px dashed var(--linha-forte); }
.rotulo-ficha { font-size:10.5px; text-transform:uppercase; letter-spacing:.08em;
                color:var(--tinta-fraca); margin-bottom:8px; font-weight:700; }
.campo { display:grid; grid-template-columns:76px 1fr; gap:10px; align-items:baseline;
         font-size:13.5px; padding:2px 0; }
.campo b { font-size:11px; text-transform:uppercase; letter-spacing:.04em;
           color:var(--tinta-fraca); font-weight:600; }
.campo span { color:var(--tinta); word-break:break-word; }
.campo a { color:var(--lilas); }
.campo a:hover { color:var(--laranja-claro); }
.campo .sem { color:var(--tinta-fraca); font-style:italic; }
.de-onde { font-size:10.5px; color:#6f6580; margin-top:6px; line-height:1.5; }

/* ------------------------------------------------------------------ funil */
.funil { display:grid; grid-template-columns:repeat(5, minmax(216px, 1fr)); gap:14px;
         align-items:start; overflow-x:auto; padding-bottom:12px; }
.coluna { background:var(--carta); border:1px solid var(--linha); border-radius:18px; min-height:150px; }
.coluna.recebendo { border-color:var(--violeta-claro); background:var(--carta-2); }
.coluna h5 { margin:0; padding:12px 14px; font-size:11px; text-transform:uppercase;
             letter-spacing:.07em; color:var(--tinta-fraca); font-weight:700;
             border-bottom:1px solid var(--linha); display:flex; justify-content:space-between; }
.coluna h5 span { color:var(--tinta-forte); }
.fichas { padding:10px; display:flex; flex-direction:column; gap:9px; }
.ficha-funil { background:var(--carta-2); border:1px solid var(--linha); border-radius:12px;
               padding:11px 12px; cursor:grab; font-size:12.5px; transition:border-color .15s; }
.ficha-funil:hover { border-color:var(--violeta-claro); }
.ficha-funil.arrastando { opacity:.4; }
.ficha-funil b { display:block; color:var(--tinta-forte); font-size:13px; font-weight:700;
                 line-height:1.3; margin-bottom:5px; }
.ficha-funil .meta { color:var(--tinta-fraca); font-size:11.5px; line-height:1.55; }
.ficha-funil .meta.destaque { color:var(--laranja-claro); font-weight:600; }
.ficha-funil .meta.parado { color:var(--alerta); }

/* --------------------------------------------- formularios (mandato, equipe) */
.pergunta { margin:26px 0 8px; }
.pergunta h2 { font-size:22px; font-weight:700; margin:0 0 4px; color:var(--tinta-forte); }
.pergunta p { color:var(--tinta-fraca); font-size:13.5px; margin:0 0 18px; }
.escolhas { display:grid; grid-template-columns:repeat(auto-fill, minmax(190px,1fr)); gap:11px; }
.rotulo { display:block; font-size:11.5px; text-transform:uppercase; letter-spacing:.06em;
          color:var(--tinta-fraca); font-weight:700; margin:22px 0 9px; }
.campo { } /* ja definido pela ficha de pessoa */
input.campo, select.campo, .campo-texto {
  width:100%; box-sizing:border-box; padding:12px 14px; font-size:15px; font-family:inherit;
  color:var(--tinta); background:var(--carta); border:1px solid var(--linha); border-radius:10px;
  display:block; }
input.campo:focus, select.campo:focus { outline:none; border-color:var(--violeta-claro); }
.marca { background:var(--carta); border:1px solid var(--linha); border-radius:10px; padding:11px 13px;
         cursor:pointer; text-align:left; font-family:inherit; color:var(--tinta); font-size:13.5px; }
.marca:hover { border-color:var(--violeta-claro); }
.marca.on { background:var(--violeta); border-color:var(--violeta); color:#fff; font-weight:600; }
.salvar { margin-top:26px; padding:12px 24px; font-size:15px; font-weight:600; font-family:inherit;
          border:0; border-radius:9999px; cursor:pointer; background:var(--violeta); color:#fff; }
.salvar:hover { background:var(--violeta-claro); }
.pessoa-linha { display:flex; gap:14px; align-items:baseline; flex-wrap:wrap;
                padding:12px 0; border-bottom:1px solid var(--linha); }
.pessoa-linha b { font-size:14.5px; color:var(--tinta-forte); font-weight:600; }
.pessoa-linha span { font-size:12.5px; color:var(--tinta-fraca); }
.link-convite { margin-top:14px; padding:14px; background:var(--carta-2);
                border:1px dashed var(--violeta-claro); border-radius:12px; font-size:13px;
                color:var(--tinta); word-break:break-all; }
.etiqueta { background:var(--carta); color:var(--tinta); border:1px solid var(--linha);
            border-radius:9999px; padding:6px 14px; font-size:13px; font-family:inherit; cursor:pointer; }
.etiqueta:hover { border-color:var(--violeta-claro); }