/* Mentorias SAP (Creative IA > painel HubClub IA > Mentorias SAP, e o site aberto mentorias.hubclubgo.com.br, que usa
   esta mesma folha para ficar igual à aba). Tudo dentro de .hm, para não mexer no resto do painel
   (a ficha, o aviso e a dica ficam no <body>, com nome próprio). Mesmo desenho das abas Membros e Empregadores SAP:
   fundos #0D0D0D/#101010/#141414, texto branco, destaque #2E7697, texto de destaque #76B7D5, degradê #2E7697 -> #022F46.
   Nada de amarelo ou vermelho: avisos em azul, com texto. */
/* A letra dos títulos da página de vendas é a das outras páginas da HubClub (Poppins), servida daqui mesmo. */
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 600; font-display: swap; src: url('poppins-600.woff2') format('woff2'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 700; font-display: swap; src: url('poppins-700.woff2') format('woff2'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 800; font-display: swap; src: url('poppins-800.woff2') format('woff2'); }
.hm, .hm-camada {
  --hm-tit: 'Poppins', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --hm-linha-azul: rgba(118, 183, 213, .24);
  --hm-ap-topo: rgba(13, 13, 13, .92);
  --hm-fundo: #101010;
  --hm-cartao: #141414;
  --hm-cartao2: #181818;
  --hm-borda: rgba(255, 255, 255, .07);
  --hm-linha: rgba(255, 255, 255, .1);
  --hm-texto: rgba(255, 255, 255, .92);
  --hm-texto2: rgba(255, 255, 255, .66);
  --hm-mudo: rgba(255, 255, 255, .5);
  --hm-claro: #76B7D5;
  --hm-claro-forte: #8ACFF2;
  --hm-azul: #2E7697;
  --hm-degrade: linear-gradient(135deg, #2E7697, #022F46);
  --hm-apagado: #475B66;
  --hm-trilho: rgba(118, 183, 213, .13);
  color: var(--hm-texto);
  font-family: inherit;
  font-size: 13px;
  line-height: 1.45;
}
.hm { position: relative; display: flex; flex-direction: column; min-height: 0; height: 100%; }
.hm *, .hm *::before, .hm *::after, .hm-camada *, .hm-camada *::before, .hm-camada *::after { box-sizing: border-box; }
.hm button, .hm select, .hm input, .hm textarea, .hm-camada button, .hm-camada select, .hm-camada input, .hm-camada textarea { font-family: inherit; }
.hm [hidden], .hm-camada [hidden], .hm-camada[hidden] { display: none !important; }
.hm :focus-visible, .hm-camada :focus-visible { outline: 2px solid var(--hm-claro); outline-offset: 2px; }
.hm svg, .hm-camada svg { flex-shrink: 0; }

/* ── barra do topo */
.hm-topo { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  padding: 12px 20px; border-bottom: 1px solid rgba(255, 255, 255, .05); flex-shrink: 0; }
.hm-titulo { display: flex; align-items: center; gap: 12px; min-width: 0; }
.hm-icone { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; flex-shrink: 0;
  background: rgba(46, 118, 151, .12); border: 1px solid rgba(46, 118, 151, .25); color: var(--hm-claro); }
.hm-titulo strong { display: block; font-size: 14px; font-weight: 600; }
.hm-titulo span { display: block; font-size: 11.5px; color: rgba(255, 255, 255, .45); margin-top: 1px; }
.hm-acoes { display: flex; gap: 8px; flex-wrap: wrap; }
.hm-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 7px 14px; border-radius: 8px;
  font-size: 12px; font-weight: 600; border: 1px solid rgba(46, 118, 151, .35); background: rgba(46, 118, 151, .1);
  color: var(--hm-claro); cursor: pointer; text-decoration: none; white-space: nowrap; transition: background .15s, border-color .15s; }
.hm-btn:hover { background: rgba(46, 118, 151, .2); border-color: rgba(118, 183, 213, .45); }
.hm-btn:disabled { opacity: .5; cursor: default; }
.hm-btn.forte { background: var(--hm-degrade); border-color: rgba(118, 183, 213, .35); color: #fff; }
.hm-btn.forte:hover { filter: brightness(1.12); }
.hm-btn.discreto { background: transparent; border-color: rgba(255, 255, 255, .1); color: var(--hm-texto2); }
.hm-btn.discreto:hover { background: rgba(255, 255, 255, .05); color: var(--hm-texto); }
.hm-btn.pequeno { padding: 5px 10px; font-size: 11.5px; }
.hm-btn.girando svg { animation: hm-sobe 1s ease-in-out infinite; }
@keyframes hm-sobe { 50% { transform: translateY(-2px); } }
.hm-link { background: none; border: 0; padding: 0; color: var(--hm-claro); font-size: 12px; font-weight: 600; cursor: pointer;
  text-decoration: none; font-family: inherit; text-align: left; }
.hm-link:hover { text-decoration: underline; }
.hm-mudo { color: var(--hm-mudo); }

/* ── abas */
.hm-abas { display: flex; gap: 4px; padding: 10px 20px 0; border-bottom: 1px solid rgba(255, 255, 255, .06); flex-shrink: 0;
  overflow-x: auto; scrollbar-width: none; }
.hm-abas::-webkit-scrollbar { display: none; }
.hm-aba { background: none; border: 0; border-bottom: 2px solid transparent; color: var(--hm-texto2); padding: 8px 12px 10px;
  font-size: 12.5px; font-weight: 600; cursor: pointer; white-space: nowrap; display: inline-flex; align-items: center; gap: 7px; }
.hm-aba:hover { color: var(--hm-texto); }
.hm-aba[aria-selected="true"] { color: #fff; border-bottom-color: var(--hm-claro); }
.hm-aba em { font-style: normal; font-weight: 600; font-size: 10.5px; color: var(--hm-claro); background: rgba(46, 118, 151, .18);
  border-radius: 999px; padding: 1px 7px; font-variant-numeric: tabular-nums; }

/* O corpo é um contêiner com nome: a Apresentação arruma as colunas pela largura dele (o menu do painel muda a largura
   livre sem mudar a da janela). */
.hm-corpo { flex: 1; min-height: 0; overflow-y: auto; padding: 16px 20px 56px; container: hm-corpo / inline-size; }
.hm-conteudo { max-width: 1280px; margin: 0 auto; }
.hm-secao-titulo { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin: 4px 0 12px; }
.hm-secao-titulo .t { font-size: 15px; font-weight: 600; }
.hm-secao-titulo .sub { font-size: 12px; color: var(--hm-mudo); margin-top: 2px; max-width: 760px; }

/* ── avisos e estados */
.hm-faixa { display: flex; align-items: flex-start; gap: 10px; padding: 10px 14px; margin: 0 0 12px; border-radius: 10px;
  background: rgba(46, 118, 151, .08); border: 1px solid rgba(46, 118, 151, .28); font-size: 12.5px; color: var(--hm-texto2); }
.hm-faixa b { color: var(--hm-texto); }
.hm-faixa svg { margin-top: 2px; color: var(--hm-claro); }
.hm-vazio { padding: 48px 20px; text-align: center; color: var(--hm-mudo); font-size: 13px; }
.hm-vazio strong { display: block; color: var(--hm-texto); font-size: 14px; margin-bottom: 6px; }
.hm-vazio .hm-btn { margin-top: 14px; }
.hm-espera { padding: 60px 20px; text-align: center; color: rgba(255, 255, 255, .45); font-size: 13px; }
.hm-conteudo.recarregando { opacity: .6; transition: opacity .2s; }

/* ── números do alto */
.hm-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin: 0 0 14px; }
.hm-kpi { background: var(--hm-cartao); border: 1px solid var(--hm-borda); border-radius: 12px; padding: 11px 14px; min-width: 0;
  text-align: left; color: inherit; font: inherit; cursor: pointer; transition: border-color .15s, background .15s; }
.hm-kpi:hover { border-color: rgba(118, 183, 213, .35); }
.hm-kpi.sel { border-color: rgba(118, 183, 213, .6); background: rgba(46, 118, 151, .12); }
.hm-kpi .rot { display: block; font-size: 11.5px; color: var(--hm-texto2); }
.hm-kpi strong { display: block; font-size: 22px; font-weight: 600; line-height: 1.2; margin: 3px 0 1px; font-variant-numeric: tabular-nums; }
.hm-kpi .sub { display: block; font-size: 11px; color: var(--hm-mudo); }

/* ── filtros */
.hm-filtros { display: flex; flex-wrap: wrap; gap: 8px 10px; align-items: center; margin: 0 0 14px; }
.hm-busca { flex: 1 1 240px; position: relative; min-width: 0; }
.hm-busca svg { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: var(--hm-mudo); pointer-events: none; }
.hm-busca input { width: 100%; height: 34px; border-radius: 9px; border: 1px solid var(--hm-linha); background: rgba(255, 255, 255, .03);
  color: var(--hm-texto); padding: 0 12px 0 34px; font-size: 13px; }
.hm-busca input::placeholder { color: rgba(255, 255, 255, .38); }
.hm-busca input:focus { outline: none; border-color: rgba(118, 183, 213, .55); background: rgba(255, 255, 255, .05); }
.hm select, .hm-camada select { height: 32px; border-radius: 9px; border: 1px solid var(--hm-linha); background: rgba(255, 255, 255, .03);
  color: var(--hm-texto); padding: 0 8px; font-size: 12.5px; max-width: 250px; min-width: 0; }
.hm select.ativo { border-color: rgba(118, 183, 213, .55); background: rgba(46, 118, 151, .14); }
.hm option, .hm optgroup, .hm-camada option { background: #141414; color: #fff; }
.hm-contagem { font-size: 12px; color: var(--hm-mudo); margin: -4px 0 12px; }

/* ── cartões de mentor (grade) */
.hm-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 12px; }
.hm-card { background: var(--hm-cartao); border: 1px solid var(--hm-borda); border-radius: 14px; padding: 14px; min-width: 0;
  display: flex; flex-direction: column; gap: 10px; transition: border-color .15s, transform .15s; }
.hm-card:hover { border-color: rgba(118, 183, 213, .3); }
.hm-card-topo { display: flex; gap: 12px; align-items: flex-start; min-width: 0; }
.hm-avatar { width: 48px; height: 48px; border-radius: 50%; flex-shrink: 0; display: grid; place-items: center; overflow: hidden;
  background: var(--hm-degrade); color: #fff; font-weight: 600; font-size: 15px; letter-spacing: .02em; border: 1px solid rgba(118, 183, 213, .25); }
.hm-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hm-avatar.grande { width: 84px; height: 84px; font-size: 24px; }
.hm-card-nome { min-width: 0; flex: 1; }
.hm-card-nome .nome { display: block; font-size: 14px; font-weight: 600; color: var(--hm-texto); background: none; border: 0; padding: 0;
  text-align: left; cursor: pointer; overflow-wrap: anywhere; font-family: inherit; }
.hm-card-nome .nome:hover { color: #fff; text-decoration: underline; text-decoration-color: rgba(118, 183, 213, .6); }
.hm-card-nome .cargo { display: block; font-size: 12px; color: var(--hm-texto2); margin-top: 1px; overflow-wrap: anywhere; }
.hm-sit { display: inline-flex; align-items: center; gap: 5px; font-size: 10.5px; font-weight: 600; padding: 2px 8px; border-radius: 999px;
  white-space: nowrap; border: 1px solid rgba(255, 255, 255, .12); color: var(--hm-texto2); background: rgba(255, 255, 255, .04); }
.hm-sit::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .8; }
.hm-sit.s-ativo { color: #fff; background: rgba(46, 118, 151, .45); border-color: rgba(118, 183, 213, .5); }
.hm-sit.s-aceitou { color: var(--hm-claro-forte); border-color: rgba(118, 183, 213, .4); background: rgba(46, 118, 151, .14); }
.hm-sit.s-convidado { color: var(--hm-claro); border-color: rgba(118, 183, 213, .3); }
.hm-sit.s-pausado, .hm-sit.s-recusou, .hm-sit.s-arquivado { color: var(--hm-mudo); }
.hm-selos { display: flex; flex-wrap: wrap; gap: 5px; }
.hm-selo { display: inline-flex; align-items: center; gap: 4px; font-size: 10.5px; padding: 2px 7px; border-radius: 6px;
  background: rgba(255, 255, 255, .05); color: var(--hm-texto2); border: 1px solid rgba(255, 255, 255, .06); white-space: nowrap; }
.hm-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.hm-chip { font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 999px; background: rgba(46, 118, 151, .16);
  color: var(--hm-claro); border: 1px solid rgba(46, 118, 151, .3); white-space: nowrap; }
.hm-chip.sinal { background: transparent; border-style: dashed; color: var(--hm-texto2); font-weight: 500; }
.hm-card-sinais { font-size: 12px; color: var(--hm-texto2); display: flex; flex-direction: column; gap: 3px; }
.hm-card-sinais b { color: var(--hm-texto); font-weight: 600; }
.hm-card-pe { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: auto; padding-top: 8px;
  border-top: 1px solid rgba(255, 255, 255, .05); flex-wrap: wrap; }
.hm-contatos { display: flex; gap: 6px; }
.hm-ico { width: 30px; height: 30px; border-radius: 8px; display: inline-grid; place-items: center; border: 1px solid rgba(255, 255, 255, .1);
  background: transparent; color: var(--hm-texto2); cursor: pointer; text-decoration: none; }
.hm-ico:hover { color: #fff; border-color: rgba(118, 183, 213, .45); background: rgba(46, 118, 151, .14); }
.hm-ico.off { opacity: .35; pointer-events: none; }
.hm-mais { display: flex; justify-content: center; margin: 16px 0 0; }

/* ── vitrine (como o profissional SAP vê) */
.hm-vitrine .hm-card { gap: 12px; }
.hm-preco { font-size: 12px; color: var(--hm-texto2); }
.hm-preco strong { display: block; font-size: 17px; color: #fff; font-weight: 600; font-variant-numeric: tabular-nums; }
.hm-estrelas { font-size: 11.5px; color: var(--hm-claro); }
.hm-bio-curta { font-size: 12.5px; color: var(--hm-texto2); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* ── camadas sobre a tela (ficha do mentor, perfil da vitrine, cadastro) */
.hm-camada { position: fixed; inset: 0; z-index: 9000; background: rgba(0, 0, 0, .62); display: flex; justify-content: flex-end;
  animation: hm-surge .15s ease-out; }
@keyframes hm-surge { from { opacity: 0; } }
.hm-painel { width: min(760px, 100%); height: 100%; background: #0f0f0f; border-left: 1px solid rgba(255, 255, 255, .08);
  display: flex; flex-direction: column; min-height: 0; box-shadow: -20px 0 60px rgba(0, 0, 0, .45); }
.hm-camada.centro { justify-content: center; align-items: center; padding: 16px; }
.hm-camada.centro .hm-painel { height: auto; max-height: min(92vh, 900px); border: 1px solid rgba(255, 255, 255, .08); border-radius: 16px; width: min(820px, 100%); }
.hm-camada.centro .hm-painel.estreito { width: min(460px, 100%); }
.hm-painel-topo { display: flex; align-items: flex-start; gap: 14px; padding: 16px 18px 12px; border-bottom: 1px solid rgba(255, 255, 255, .06); flex-shrink: 0; }
.hm-painel-topo .quem { flex: 1; min-width: 0; }
.hm-painel-topo .quem .nome { font-size: 16px; font-weight: 600; overflow-wrap: anywhere; }
.hm-painel-topo .quem .cargo { font-size: 12.5px; color: var(--hm-texto2); margin-top: 2px; }
.hm-painel-topo .quem .linha { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 7px; }
.hm-fechar { width: 32px; height: 32px; border-radius: 8px; border: 1px solid rgba(255, 255, 255, .1); background: transparent; color: var(--hm-texto2);
  cursor: pointer; display: grid; place-items: center; flex-shrink: 0; }
.hm-fechar:hover { color: #fff; background: rgba(255, 255, 255, .06); }
.hm-painel .hm-abas { padding: 6px 18px 0; }
.hm-painel-corpo { flex: 1; min-height: 0; overflow-y: auto; padding: 16px 18px 24px; }
.hm-painel-pe { display: flex; align-items: center; justify-content: flex-end; gap: 8px; padding: 12px 18px; border-top: 1px solid rgba(255, 255, 255, .06);
  flex-shrink: 0; flex-wrap: wrap; background: #0f0f0f; }
.hm-painel-pe .msg { margin-right: auto; font-size: 12px; color: var(--hm-texto2); }
.hm-painel-pe .msg.erro { color: var(--hm-claro-forte); font-weight: 600; }

/* formulário */
.hm-bloco { background: var(--hm-cartao); border: 1px solid var(--hm-borda); border-radius: 12px; padding: 14px 14px 16px; margin: 0 0 12px; }
.hm-bloco > .t { font-size: 13px; font-weight: 600; margin: 0 0 3px; display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.hm-bloco > .sub { font-size: 11.5px; color: var(--hm-mudo); margin: 0 0 12px; }
.hm-campos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 12px; }
.hm-campos.um { grid-template-columns: 1fr; }
/* Caixa de marcar com o texto ao lado: o aceite do pedido "Quero ser mentor" do site e as chaves da janela "Site". */
.hm-chave { display: flex; align-items: flex-start; gap: 10px; margin: 12px 0 0; font-size: 12.5px; line-height: 1.45; color: var(--hm-texto2); cursor: pointer; }
.hm-chave input { width: 16px; height: 16px; margin: 2px 0 0; flex-shrink: 0; accent-color: #2E7697; }
.hm-chave b { display: block; color: var(--hm-texto); font-weight: 600; }
.hm-chave span span { display: block; }
/* Campo-isca do pedido do site: fica fora da tela (só robô preenche). */
.hm-isca { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.hm-campo { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.hm-campo.inteiro { grid-column: 1 / -1; }
.hm-campo > span { font-size: 11.5px; color: var(--hm-texto2); font-weight: 600; }
.hm-campo > span em { font-style: normal; font-weight: 500; color: var(--hm-mudo); }
.hm-campo input, .hm-campo textarea, .hm-campo select, .hm-entrada { width: 100%; max-width: none; height: 34px; border-radius: 9px; border: 1px solid var(--hm-linha);
  background: rgba(255, 255, 255, .03); color: var(--hm-texto); padding: 0 10px; font-size: 13px; }
.hm-campo textarea { height: auto; min-height: 120px; padding: 9px 10px; resize: vertical; line-height: 1.5; }
.hm-campo input:focus, .hm-campo textarea:focus, .hm-entrada:focus { outline: none; border-color: rgba(118, 183, 213, .55); background: rgba(255, 255, 255, .05); }
.hm-campo .conta { font-size: 11px; color: var(--hm-mudo); text-align: right; }
.hm-marcas { display: flex; flex-wrap: wrap; gap: 6px; }
.hm-marca { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px; border: 1px solid var(--hm-linha);
  background: transparent; color: var(--hm-texto2); font-size: 12px; cursor: pointer; font-weight: 500; }
.hm-marca:hover { border-color: rgba(118, 183, 213, .4); color: var(--hm-texto); }
.hm-marca[aria-pressed="true"] { background: rgba(46, 118, 151, .3); border-color: rgba(118, 183, 213, .55); color: #fff; font-weight: 600; }
.hm-marca.sugerido:not([aria-pressed="true"]) { border-style: dashed; border-color: rgba(118, 183, 213, .45); }
.hm-foto-linha { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }

/* serviços e pacotes no perfil */
.hm-servicos { display: flex; flex-direction: column; gap: 8px; }
.hm-servico { display: grid; grid-template-columns: 22px minmax(0, 1fr) 232px; gap: 8px 10px; align-items: center; padding: 9px 10px;
  border-radius: 10px; border: 1px solid rgba(255, 255, 255, .06); background: rgba(255, 255, 255, .02); }
.hm-servico .precos { display: grid; grid-template-columns: 128px 96px; gap: 8px; }
.hm-servico .precos label { display: flex; flex-direction: column; gap: 2px; font-size: 10.5px; color: var(--hm-mudo); }
.hm-servico.on { border-color: rgba(118, 183, 213, .35); background: rgba(46, 118, 151, .08); }
.hm-servico input[type="checkbox"] { width: 16px; height: 16px; accent-color: #2E7697; }
.hm-servico .n { font-size: 12.5px; font-weight: 600; }
.hm-servico .d { font-size: 11px; color: var(--hm-mudo); }
.hm-servico .repasse { grid-column: 2 / -1; font-size: 11px; color: var(--hm-mudo); }
.hm-servico input.hm-entrada { height: 30px; font-size: 12.5px; padding: 0 8px; }
.hm-pacotes { width: 100%; border-collapse: separate; border-spacing: 6px; margin: -6px; }
.hm-pacotes th { font-size: 11.5px; font-weight: 600; color: var(--hm-texto2); text-align: left; padding: 0 2px; }
.hm-pacotes td { vertical-align: top; }
.hm-pacotes td .hm-entrada { height: 32px; }
.hm-pacotes td .info { display: block; font-size: 10.5px; color: var(--hm-mudo); margin-top: 3px; line-height: 1.3; }

/* ficha: origem dos dados */
.hm-lista-dados { display: grid; grid-template-columns: minmax(120px, 34%) minmax(0, 1fr); gap: 6px 12px; font-size: 12.5px; }
.hm-lista-dados dt { color: var(--hm-mudo); }
.hm-lista-dados dd { margin: 0; color: var(--hm-texto); overflow-wrap: anywhere; }
.hm-titulos { margin: 6px 0 0; padding-left: 16px; font-size: 12px; color: var(--hm-texto2); }
.hm-titulos li { margin: 2px 0; }
.hm-historico { list-style: none; margin: 0; padding: 0; font-size: 12px; }
.hm-historico li { padding: 7px 0; border-bottom: 1px solid rgba(255, 255, 255, .05); color: var(--hm-texto2); }
.hm-historico li b { color: var(--hm-texto); font-weight: 600; }

/* perfil da vitrine */
.hm-publico { display: flex; flex-direction: column; gap: 14px; }
.hm-publico .bio { font-size: 13px; color: var(--hm-texto); white-space: pre-wrap; line-height: 1.6; }
.hm-tabela { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.hm-tabela th, .hm-tabela td { text-align: left; padding: 8px 8px; border-bottom: 1px solid rgba(255, 255, 255, .06); vertical-align: top; }
.hm-tabela th { font-size: 11.5px; color: var(--hm-mudo); font-weight: 600; }
.hm-tabela td.num, .hm-tabela th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.hm-pacote-grade { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.hm-pacote { border: 1px solid rgba(118, 183, 213, .22); border-radius: 12px; padding: 12px; background: rgba(46, 118, 151, .06); }
.hm-pacote .d { font-size: 11.5px; color: var(--hm-texto2); }
.hm-pacote strong { display: block; font-size: 16px; margin: 4px 0 2px; font-variant-numeric: tabular-nums; }
.hm-pacote .m { font-size: 11px; color: var(--hm-mudo); }

/* regras e simulador */
.hm-passos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; counter-reset: passo; }
.hm-passo { border: 1px solid var(--hm-borda); border-radius: 12px; padding: 12px; background: var(--hm-cartao); counter-increment: passo; }
.hm-passo::before { content: counter(passo); display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%;
  background: var(--hm-degrade); color: #fff; font-size: 11.5px; font-weight: 600; margin-bottom: 6px; }
.hm-passo b { display: block; font-size: 12.5px; }
.hm-passo span { display: block; font-size: 11.5px; color: var(--hm-mudo); margin-top: 3px; }
.hm-sim { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; }
.hm-sim-linha { display: grid; grid-template-columns: minmax(150px, 30%) minmax(0, 1fr) 110px; gap: 12px; align-items: center; font-size: 12.5px; }
.hm-sim-linha .trilho { height: 14px; background: var(--hm-trilho); border-radius: 0 4px 4px 0; position: relative; overflow: hidden; }
.hm-sim-linha .fill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 0 4px 4px 0; background: var(--hm-claro); }
.hm-sim-linha.hub .fill { background: var(--hm-apagado); }
.hm-sim-linha .v { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
.hm-sim-linha.total { border-top: 1px solid rgba(255, 255, 255, .08); padding-top: 6px; }

/* fontes */
.hm-fontes { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
.hm-fonte { background: var(--hm-cartao); border: 1px solid var(--hm-borda); border-radius: 14px; padding: 14px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.hm-fonte .t { font-size: 13.5px; font-weight: 600; display: flex; align-items: center; gap: 8px; }
.hm-fonte .n { font-size: 26px; font-weight: 600; line-height: 1.1; font-variant-numeric: tabular-nums; }
.hm-fonte .d { font-size: 12px; color: var(--hm-texto2); }
.hm-fonte .pe { margin-top: auto; display: flex; gap: 8px; flex-wrap: wrap; }
.hm-progresso { height: 8px; border-radius: 999px; background: var(--hm-trilho); overflow: hidden; }
.hm-progresso > span { display: block; height: 100%; background: var(--hm-degrade); border-radius: 999px; }
.hm-como { margin: 18px 0 0; background: var(--hm-cartao); border: 1px solid var(--hm-borda); border-radius: 12px; padding: 12px 16px; font-size: 12.5px; color: var(--hm-texto2); }
.hm-como summary { cursor: pointer; color: var(--hm-texto); font-weight: 600; }
.hm-como ul { margin: 10px 0 0; padding-left: 18px; }
.hm-como li { margin: 5px 0; }

/* catálogo */
.hm-cat-item { display: grid; grid-template-columns: minmax(0, 1fr) 150px 236px; gap: 8px 10px; align-items: start; padding: 10px;
  border-radius: 10px; border: 1px solid rgba(255, 255, 255, .06); background: rgba(255, 255, 255, .02); margin: 0 0 8px; }
.hm-cat-item.off { opacity: .55; }
.hm-cat-item textarea { grid-column: 1 / -1; min-height: 54px; height: auto; padding: 7px 10px; resize: vertical; }
.hm-cat-item .acoes { display: flex; gap: 6px; align-items: center; justify-content: flex-end; min-height: 34px; }

/* ── Calendário dos Mentores (tab da administração): as reuniões de mentoria, por mês ou em lista */
.hm-cal-topo { display: flex; align-items: center; gap: 8px 12px; flex-wrap: wrap; margin: 0 0 10px; }
.hm-cal-nav { display: flex; gap: 6px; align-items: center; }
.hm-cal-mes { font-size: 16px; font-weight: 600; min-width: 168px; padding: 0 6px; }
.hm-cal-direita { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.hm-cal-grade { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border: 1px solid var(--hm-borda); border-radius: 14px; overflow: hidden;
  background: var(--hm-cartao); }
.hm-cal-semana { padding: 8px 10px; font-size: 11px; font-weight: 600; color: var(--hm-mudo); text-transform: uppercase; letter-spacing: .06em;
  border-bottom: 1px solid var(--hm-borda); }
.hm-cal-dia { min-height: 112px; padding: 6px 6px 8px; border-right: 1px solid rgba(255, 255, 255, .05); border-bottom: 1px solid rgba(255, 255, 255, .05);
  display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.hm-cal-dia:nth-child(7n) { border-right: 0; }
.hm-cal-dia.fora { background: rgba(0, 0, 0, .2); }
.hm-cal-dia.fora .hm-cal-numero { color: rgba(255, 255, 255, .28); }
.hm-cal-dia.hoje { background: rgba(46, 118, 151, .1); }
.hm-cal-cabeca-dia { display: flex; align-items: center; justify-content: space-between; }
.hm-cal-numero { width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; font-size: 12px; font-weight: 600; color: var(--hm-texto2);
  font-variant-numeric: tabular-nums; }
.hm-cal-dia.hoje .hm-cal-numero { background: var(--hm-degrade); color: #fff; }
.hm-cal-mais-um { width: 22px; height: 22px; display: grid; place-items: center; border-radius: 6px; border: 1px solid rgba(255, 255, 255, .1); background: transparent;
  color: var(--hm-texto2); cursor: pointer; opacity: 0; transition: opacity .12s; }
.hm-cal-dia:hover .hm-cal-mais-um, .hm-cal-mais-um:focus-visible { opacity: 1; }
.hm-cal-mais-um:hover { color: #fff; border-color: rgba(118, 183, 213, .45); background: rgba(46, 118, 151, .14); }
.hm-cal-chip { display: block; width: 100%; text-align: left; border: 0; border-left: 3px solid var(--hm-claro); border-radius: 6px; padding: 3px 6px;
  background: rgba(46, 118, 151, .22); color: var(--hm-texto); font-size: 11.5px; line-height: 1.3; cursor: pointer; white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; }
.hm-cal-chip:hover { background: rgba(46, 118, 151, .36); }
.hm-cal-chip b { font-weight: 600; font-variant-numeric: tabular-nums; margin-right: 5px; }
.hm-cal-chip.s-realizada { border-left-color: var(--hm-apagado); background: rgba(255, 255, 255, .05); color: var(--hm-texto2); }
.hm-cal-chip.s-faltou { border-left-style: dashed; background: rgba(255, 255, 255, .04); color: var(--hm-texto2); }
.hm-cal-chip.s-cancelada { border-left-color: transparent; background: transparent; color: var(--hm-mudo); text-decoration: line-through; }
.hm-cal-resto { background: none; border: 0; padding: 0 6px; color: var(--hm-claro); font-size: 11px; font-weight: 600; text-align: left; cursor: pointer; }
.hm-cal-lista { display: flex; flex-direction: column; gap: 14px; }
.hm-cal-data { font-size: 12.5px; font-weight: 600; color: var(--hm-texto2); margin: 0 0 6px; }
.hm-cal-data::first-letter { text-transform: uppercase; }
/* A última coluna tem largura fixa para as colunas ficarem alinhadas de uma reunião para a outra. */
.hm-cal-item { display: grid; grid-template-columns: 72px minmax(0, .8fr) minmax(0, 1.2fr) minmax(0, 1.3fr) 290px; gap: 8px 14px; align-items: center;
  padding: 10px 12px; margin: 0 0 6px; border: 1px solid var(--hm-borda); border-radius: 12px; background: var(--hm-cartao); }
.hm-cal-item .hora { font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; }
.hm-cal-item .hora span { display: block; font-size: 11px; font-weight: 400; color: var(--hm-mudo); }
.hm-cal-item .rot { display: block; font-size: 10.5px; color: var(--hm-mudo); text-transform: uppercase; letter-spacing: .05em; }
.hm-cal-item .val { display: block; font-size: 13px; overflow-wrap: anywhere; }
.hm-cal-item .hm-mudo { display: inline-block; margin-right: 10px; font-size: 11.5px; overflow-wrap: anywhere; }
.hm-cal-item .acoes { display: flex; gap: 6px; align-items: center; justify-content: flex-end; flex-wrap: wrap; }
/* ── tab Área (quem entrou na Área do Recrutador e do Mentor) e a mudança de perfil pedida pelo mentor (na ficha) */
.hm-area-liberar { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.hm-area-liberar .hm-entrada { flex: 1 1 240px; max-width: 420px; }
.hm-area-lista { display: flex; flex-direction: column; gap: 6px; }
.hm-area-item { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr) 410px; gap: 8px 16px; align-items: center; padding: 10px 12px;
  border: 1px solid var(--hm-borda); border-radius: 12px; background: var(--hm-cartao); }
.hm-area-item.espera { border-color: rgba(118, 183, 213, .4); background: rgba(46, 118, 151, .08); }
.hm-area-item .val { display: block; font-size: 13px; overflow-wrap: anywhere; }
.hm-area-item .hm-mudo { display: block; font-size: 11.5px; overflow-wrap: anywhere; }
.hm-area-item .recado { display: block; font-size: 12px; color: var(--hm-texto2); margin-top: 3px; overflow-wrap: anywhere; }
.hm-area-item .acoes { display: flex; gap: 6px; align-items: center; justify-content: flex-end; flex-wrap: wrap; }
.hm-mudancas { margin: 0 0 12px; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; color: var(--hm-texto2); }
.hm-mudancas li { padding-left: 14px; position: relative; overflow-wrap: anywhere; }
.hm-mudancas li::before { content: ''; position: absolute; left: 2px; top: .62em; width: 5px; height: 5px; border-radius: 50%; background: var(--hm-claro); }
@container hm-corpo (max-width: 900px) {
  .hm-area-item { grid-template-columns: minmax(0, 1fr); }
  .hm-area-item .acoes { justify-content: flex-start; }
}
/* Os campos de dia e de hora com o relógio e o calendário do navegador no escuro. */
.hm-camada input[type="date"], .hm-camada input[type="time"] { color-scheme: dark; }
@container hm-corpo (max-width: 760px) {
  .hm-cal-direita { margin-left: 0; }
  .hm-cal-dia { min-height: 70px; padding: 4px; gap: 3px; }
  .hm-cal-semana { padding: 6px 4px; text-align: center; letter-spacing: 0; }
  .hm-cal-mais-um { display: none; }
  .hm-cal-chip { padding: 2px 1px; font-size: 10.5px; border-left-width: 2px; text-align: center; text-overflow: clip; }
  .hm-cal-chip b { margin-right: 0; }
  .hm-cal-chip .quem, .hm-cal-resto .quem { display: none; }
  .hm-cal-resto { padding: 0; font-size: 10.5px; text-align: center; }
}
/* Na lista, em tela estreita: a hora à esquerda e, ao lado, o mentor, o mentorado e o serviço um embaixo do outro. */
@container hm-corpo (max-width: 900px) {
  .hm-cal-item { grid-template-columns: 70px minmax(0, 1fr); align-items: start; }
  .hm-cal-item .hora { grid-row: 1 / span 3; }
  .hm-cal-item > :not(.hora):not(.acoes) { grid-column: 2; }
  .hm-cal-item .acoes { grid-column: 1 / -1; justify-content: flex-start; }
}

/* aviso rápido e dica */
.hm-aviso { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 9500; background: #1b2a33; color: #fff;
  border: 1px solid rgba(118, 183, 213, .45); border-radius: 10px; padding: 10px 16px; font-size: 13px; max-width: min(560px, calc(100vw - 32px));
  box-shadow: 0 10px 30px rgba(0, 0, 0, .4); }

/* ── Apresentação: a página de vendas da plataforma (a tab inicial do painel e a página do site aberto). Pedido do Lucca
   (09/10/2026): uma página de vendas "assim como temos para os Freelancers" e para a inicial da HubClub. O mesmo desenho
   das duas: títulos em Poppins com um trecho no "bloco" do logo, cartões de vidro, a chamada com um painel ao lado,
   passos, vantagens, dúvidas e a chamada final, para dois públicos, um de cada vez (o data-modo da página).
   As colunas e os tamanhos acompanham a largura do corpo (o contêiner hm-corpo, em cqi), e não a da janela: no painel, o
   menu ao lado muda a largura livre sem a janela mudar.
   O painel força o tamanho dos títulos das telas no celular (.page-section h2): aqui eles têm tamanho próprio, com seletor
   mais forte. */
.hm-corpo.ap { padding: 0; }
.hm-corpo.ap > .hm-conteudo { max-width: none; }
.hm-ap { position: relative; font-size: 14px; line-height: 1.5; overflow-x: clip; }
/* O que é de um público fica escondido para o outro. */
.hm-ap[data-modo="mentorado"] .hm-so-mentor, .hm-ap[data-modo="mentor"] .hm-so-mentorado { display: none !important; }
.hm-ap-cx { max-width: 1240px; margin: 0 auto; padding: 0 22px; }
.hm.hm .hm-ap h1, .hm.hm .hm-ap h2, .hm.hm .hm-ap h3 { margin: 0; color: var(--hm-texto); }
.hm.hm .hm-ap h1, .hm.hm .hm-ap h2 { font: 700 22px/1.25 var(--hm-tit) !important; letter-spacing: -.02em; text-wrap: balance; }
.hm.hm .hm-ap h3 { font: 600 16px/1.3 var(--hm-tit) !important; letter-spacing: -.01em; }
.hm-ap p { margin: 0; }
.hm-ic { display: inline-flex; align-items: center; }
.hm-ap .hm-btn { padding: 10px 18px; font-size: 13.5px; font-weight: 650; border-radius: 10px; }
.hm-ap .hm-btn.forte { box-shadow: 0 6px 18px rgba(2, 47, 70, .45); }
.hm-ap .hm-btn.pequeno { padding: 5px 10px; font-size: 11.5px; border-radius: 8px; }

/* As peças do desenho: o cartão de vidro, o rótulo acima dos títulos, o "bloco" do logo atrás de um trecho do título e os
   botões. */
.hm-vidro { position: relative; border: 1px solid rgba(255, 255, 255, .08); border-radius: 18px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .055), rgba(255, 255, 255, .016));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07), 0 28px 60px -36px rgba(0, 0, 0, .9); }
.hm-olho { display: inline-flex; align-items: center; gap: 10px; margin: 0; font: 600 11.5px/1.2 var(--hm-tit); letter-spacing: .15em; text-transform: uppercase;
  color: var(--hm-claro); }
.hm-olho::before { content: ""; width: 18px; height: 9px; border-radius: 2px; transform: skewX(-18deg); background: linear-gradient(90deg, #0b3a52, #3aa0d8); flex: none; }
/* O trecho fica inteiro numa linha sempre que cabe (se não couber, quebra dentro do próprio bloco). No celular o fundo é
   reto; com 760 px ou mais, inclinado como no logo. */
.hm-ap-marcado { display: inline-block; max-width: 100%; color: #fff; padding: .02em .2em; border-radius: .14em;
  background: linear-gradient(100deg, #072a3f 0%, #1c5c7c 55%, #2e7da3 100%); }
.hm-bt { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 46px; padding: 0 20px; border-radius: 13px;
  border: 1px solid transparent; background: none; color: var(--hm-texto); font: 600 14.5px/1.1 var(--hm-tit); text-decoration: none; text-align: center;
  cursor: pointer; white-space: nowrap; transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease, border-color .18s ease; }
.hm-bt .hm-ic { transition: transform .18s ease; }
.hm-bt:hover .hm-ic { transform: translateX(3px); }
.hm-bt.g { min-height: 54px; padding: 0 26px; font-size: 15.5px; border-radius: 15px; }
.hm-bt.m { min-height: 40px; padding: 0 16px; font-size: 13px; border-radius: 11px; }
/* No topo, o botão em destaque é o do público da página. */
.hm-bt.p, .hm-ap[data-modo="mentorado"] .hm-ap-topo-ver, .hm-ap[data-modo="mentor"] .hm-ap-topo-quero { color: #fff;
  background: linear-gradient(135deg, #3f97bd 0%, #2e7697 45%, #0c4a69 100%); border-color: transparent;
  box-shadow: 0 14px 34px -14px rgba(58, 160, 216, .9), inset 0 1px 0 rgba(255, 255, 255, .26); }
.hm-bt.p:hover, .hm-ap[data-modo="mentorado"] .hm-ap-topo-ver:hover, .hm-ap[data-modo="mentor"] .hm-ap-topo-quero:hover { transform: translateY(-2px);
  box-shadow: 0 20px 40px -14px rgba(58, 160, 216, 1), inset 0 1px 0 rgba(255, 255, 255, .3); }
.hm-bt.s, .hm-ap[data-modo="mentorado"] .hm-ap-topo-quero, .hm-ap[data-modo="mentor"] .hm-ap-topo-ver { background: rgba(255, 255, 255, .05);
  border-color: rgba(255, 255, 255, .16); }
.hm-bt.s:hover, .hm-ap[data-modo="mentorado"] .hm-ap-topo-quero:hover, .hm-ap[data-modo="mentor"] .hm-ap-topo-ver:hover { background: rgba(118, 183, 213, .12);
  border-color: rgba(118, 183, 213, .5); transform: translateY(-2px); }
.hm-bt .hm-ic.zap svg { width: 18px; height: 18px; }
.hm-bt:hover .hm-ic.zap { transform: none; }
.hm-ap-caixa-ic { width: 44px; height: 44px; border-radius: 13px; display: grid; place-items: center; flex: none; color: #dff3ff;
  background: linear-gradient(135deg, rgba(46, 118, 151, .55), rgba(12, 74, 105, .55)); border: 1px solid rgba(118, 183, 213, .3); }
.hm-ap-caixa-ic.p { width: 40px; height: 40px; border-radius: 12px; }
.hm-ap-caixa-ic.p svg { width: 19px; height: 19px; }

/* O topo: a marca, os atalhos e os dois botões, sempre à vista. */
.hm-ap-topo { position: sticky; top: 0; z-index: 6; border-bottom: 1px solid rgba(255, 255, 255, .08); background: var(--hm-ap-topo);
  -webkit-backdrop-filter: blur(16px) saturate(150%); backdrop-filter: blur(16px) saturate(150%); }
.hm-ap-topo > .hm-ap-cx { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 18px; padding-top: 10px; padding-bottom: 10px; }
.hm-ap-marca { display: flex; align-items: center; gap: 10px; min-width: 0; }
/* No site, a marca é um botão que volta para a página inicial. */
.hm-ap-marca.clica { background: none; border: 0; padding: 0; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.hm-ap-logo { width: 42px; height: 42px; object-fit: contain; flex: none; }
.hm-ap-marca strong { display: block; font: 700 15.5px/1.15 var(--hm-tit); letter-spacing: -.01em; white-space: nowrap; }
.hm-ap-marca span { display: block; font-size: 10.5px; color: var(--hm-claro); letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; }
.hm-ap-nav { display: flex; gap: 2px; flex: 1; min-width: 0; }
.hm-ap-nav-item { background: none; border: 0; color: var(--hm-texto2); font-size: 13px; font-weight: 550; padding: 7px 11px; border-radius: 8px; cursor: pointer;
  white-space: nowrap; }
.hm-ap-nav-item:hover { background: rgba(255, 255, 255, .05); color: var(--hm-texto); }
.hm-ap-topo-acoes { margin-left: auto; display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 8px 10px; }
.hm-ap-previa { font-size: 11px; font-weight: 600; color: var(--hm-claro); border: 1px dashed rgba(118, 183, 213, .5); border-radius: 999px;
  padding: 3px 10px; white-space: nowrap; cursor: help; }

/* A chamada: o texto de um lado, o painel de vidro do outro, sobre a grade e as luzes. */
.hm-ap-heroi { position: relative; overflow: hidden; padding: 40px 0 44px; }
.hm-ap-heroi-fundo, .hm-ap-final-fundo { position: absolute; inset: 0; pointer-events: none; }
.hm-ap-grade-fundo { position: absolute; inset: 0;
  background-image: linear-gradient(rgba(118, 183, 213, .075) 1px, transparent 1px), linear-gradient(90deg, rgba(118, 183, 213, .075) 1px, transparent 1px);
  background-size: 58px 58px; -webkit-mask-image: radial-gradient(ellipse 75% 70% at 55% 28%, #000 15%, transparent 72%);
  mask-image: radial-gradient(ellipse 75% 70% at 55% 28%, #000 15%, transparent 72%); }
.hm-ap-luz { position: absolute; border-radius: 50%; }
.hm-ap-luz-1 { width: 760px; height: 760px; right: -220px; top: -300px; background: radial-gradient(circle, rgba(58, 160, 216, .3), rgba(58, 160, 216, 0) 64%); }
.hm-ap-luz-2 { width: 620px; height: 620px; left: -260px; top: 300px; background: radial-gradient(circle, rgba(46, 118, 151, .22), rgba(46, 118, 151, 0) 66%); }
.hm-ap-heroi-grade { position: relative; display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); gap: 52px; align-items: center; }
.hm-ap-heroi-texto { min-width: 0; }
.hm.hm .hm-ap-heroi h1 { font: 800 clamp(30px, 3.4cqi + 8px, 54px)/1.08 var(--hm-tit) !important; letter-spacing: -.03em; margin: 16px 0 18px; }
.hm-ap-sub { color: var(--hm-texto2); font-size: clamp(15px, .3cqi + 13.5px, 17.5px); line-height: 1.62; max-width: 58ch; }
.hm-ap-chave { position: relative; display: grid; grid-template-columns: 1fr 1fr; width: min(370px, 100%); padding: 4px; margin-bottom: 26px; border-radius: 999px;
  background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .08); }
.hm-ap-chave-bt { position: relative; z-index: 1; min-height: 38px; padding: 0 10px; border: 0; background: none; border-radius: 999px;
  font: 600 12.5px var(--hm-tit); color: var(--hm-mudo); cursor: pointer; white-space: nowrap; transition: color .25s; }
.hm-ap-chave-bt[aria-pressed="true"] { color: #fff; }
.hm-ap-chave-fundo { position: absolute; left: 4px; top: 4px; bottom: 4px; width: calc(50% - 4px); border-radius: 999px;
  background: linear-gradient(135deg, #3a8fb5, #1d5f80 60%, #0c4a69); box-shadow: 0 8px 22px -10px rgba(58, 160, 216, .9), inset 0 1px 0 rgba(255, 255, 255, .22);
  transition: transform .4s cubic-bezier(.3, 1.2, .4, 1); }
.hm-ap[data-modo="mentor"] .hm-ap-chave-fundo { transform: translateX(100%); }
.hm-ap-acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 14px; margin-top: 24px; }
.hm-ap-acoes.centro { justify-content: center; margin-top: 26px; }
.hm-ap-garantias { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 20px 0 0; padding: 0; list-style: none; font-size: 13.5px; color: var(--hm-texto2); }
.hm-ap-garantias li { display: inline-flex; align-items: center; gap: 7px; }
.hm-ap-garantias .hm-ic { color: var(--hm-claro); }
/* A busca da chamada (só aparece com mentor na vitrine). */
.hm-ap-busca { display: flex; align-items: center; gap: 8px; padding: 6px 6px 6px 14px; margin-top: 24px; border-radius: 14px; background: rgba(255, 255, 255, .045);
  border: 1px solid rgba(255, 255, 255, .14); max-width: 640px; box-shadow: 0 10px 30px rgba(0, 0, 0, .35); }
.hm-ap-busca:focus-within { border-color: rgba(118, 183, 213, .6); }
.hm-ap-busca > svg { color: var(--hm-mudo); }
.hm-ap-busca input { flex: 1; min-width: 0; height: 40px; border: 0; background: transparent; color: var(--hm-texto); font-size: 14.5px; }
.hm-ap-busca input:focus { outline: none; }
.hm-ap-busca input::placeholder { color: rgba(255, 255, 255, .38); }
.hm-ap-atalhos { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 14px; font-size: 12.5px; color: var(--hm-mudo); }
.hm-ap-atalho { background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .08); color: var(--hm-texto2); font-size: 12px; font-weight: 600;
  padding: 5px 11px; border-radius: 999px; cursor: pointer; }
.hm-ap-atalho:hover { border-color: rgba(118, 183, 213, .5); color: var(--hm-claro); }

/* O painel ao lado da chamada. */
.hm-ap-heroi-visual { position: relative; min-width: 0; }
.hm-ap-painel { padding: 20px; border-radius: 24px; border-color: var(--hm-linha-azul); background: linear-gradient(160deg, rgba(20, 48, 66, .78), rgba(5, 14, 21, .84));
  box-shadow: 0 50px 130px -50px rgba(58, 160, 216, .7), 0 34px 70px -34px #000, inset 0 1px 0 rgba(255, 255, 255, .13); }
.hm-ap-painel-topo { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.hm-ap-painel-titulo { font: 600 12.5px var(--hm-tit); color: var(--hm-mudo); }
.hm-ap-pilula { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 10px; border-radius: 999px; font: 600 10.5px/1 var(--hm-tit);
  letter-spacing: .13em; text-transform: uppercase; color: #c9ebff; background: rgba(58, 160, 216, .14); border: 1px solid rgba(58, 160, 216, .38); white-space: nowrap; }
.hm-ap-pilula i { width: 8px; height: 8px; border-radius: 50%; background: #62cbff; animation: hm-pulso 1.9s ease-out infinite; }
.hm-ap-pilula.fixa { padding-left: 12px; }
@keyframes hm-pulso { 0% { box-shadow: 0 0 0 0 rgba(98, 203, 255, .75); } 70% { box-shadow: 0 0 0 9px rgba(98, 203, 255, 0); } 100% { box-shadow: 0 0 0 0 rgba(98, 203, 255, 0); } }
.hm-ap-numero { min-width: 0; }
.hm-ap-numero strong { display: block; font: 700 20px/1.1 var(--hm-tit); font-variant-numeric: tabular-nums; color: #fff; }
.hm-ap-numero span { display: block; font-size: 11.5px; color: var(--hm-mudo); line-height: 1.3; margin-top: 3px; }
.hm-ap-numero.grande { margin: 16px 0 14px; display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 14px; }
.hm-ap-numero.grande strong { font: 800 clamp(44px, 4.4cqi + 14px, 66px)/.95 var(--hm-tit); letter-spacing: -.04em;
  background: linear-gradient(180deg, #fff 30%, #9fd3ee 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hm-ap-numero.grande span { font: 600 14.5px var(--hm-tit); color: var(--hm-texto2); margin: 0; }
.hm-ap-trio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0 0 12px; }
.hm-ap-trio .hm-ap-numero { padding: 10px 12px; border-radius: 14px; background: rgba(255, 255, 255, .045); border: 1px solid rgba(255, 255, 255, .06); }
.hm-ap-painel-lista { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.hm-ap-painel-linha { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: center; gap: 12px; min-height: 58px; padding: 8px 12px 8px 10px;
  border-radius: 14px; background: rgba(255, 255, 255, .045); border: 1px solid rgba(255, 255, 255, .07); }
.hm-ap-linha-txt { display: grid; min-width: 0; }
.hm-ap-linha-txt b { font: 600 14px/1.3 var(--hm-tit); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hm-ap-linha-txt em { font-style: normal; font-size: 12px; color: var(--hm-mudo); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hm-ap-linha-tag { font: 600 11.5px var(--hm-tit); color: var(--hm-claro); padding: 5px 9px; border-radius: 999px; background: rgba(118, 183, 213, .12); white-space: nowrap; }
.hm-ap-painel-pe { margin-top: 12px; font-size: 12px; color: var(--hm-mudo); }
/* O perfil de exemplo da página do recrutador (sem nome nem preço de ninguém). */
.hm-ap-exemplo { display: grid; gap: 12px; margin-top: 16px; padding: 16px; border-radius: 16px; background: rgba(255, 255, 255, .04); border: 1px solid rgba(118, 183, 213, .3); }
.hm-ap-exemplo-topo { display: flex; align-items: center; gap: 12px; min-width: 0; }
.hm-ap-exemplo-topo .hm-avatar svg { width: 24px; height: 24px; }
.hm-ap-exemplo-nome { min-width: 0; }
.hm-ap-exemplo-nome b { display: block; font: 600 15px/1.3 var(--hm-tit); }
.hm-ap-exemplo-nome span { display: block; font-size: 12.5px; color: var(--hm-texto2); }
.hm-ap-exemplo-servicos { display: grid; gap: 8px; margin: 0; padding: 12px 0 0; list-style: none; border-top: 1px solid rgba(255, 255, 255, .07); font-size: 13px; }
.hm-ap-exemplo-servicos li { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.hm-ap-exemplo-servicos .v { font: 600 11.5px var(--hm-tit); color: var(--hm-claro); white-space: nowrap; }
/* As duas etiquetas sentadas na borda do painel, sem cobrir o que ele mostra (só em tela larga). */
.hm-ap-flutua { position: absolute; display: none; align-items: center; gap: 11px; padding: 10px 14px 10px 11px; border-radius: 15px; border-color: var(--hm-linha-azul);
  background: rgba(9, 24, 35, .9); box-shadow: 0 24px 50px -22px #000; }
.hm-ap-flutua > .hm-ic { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; color: #dff3ff; background: linear-gradient(135deg, #2e7697, #0c4a69); }
.hm-ap-flutua > .hm-ic svg { width: 18px; height: 18px; }
.hm-ap-flutua > span:last-child { display: grid; font-size: 11.5px; color: var(--hm-mudo); line-height: 1.3; }
.hm-ap-flutua b { font: 600 13px var(--hm-tit); color: var(--hm-texto); }
.hm-ap-flutua-1 { left: -26px; top: -40px; }
.hm-ap-flutua-2 { right: -14px; bottom: -40px; }

/* As seções. */
.hm-ap-secao { padding: 46px 0 10px; }
.hm-ap-cabeca { display: grid; gap: 12px; justify-items: center; text-align: center; max-width: 760px; margin: 0 auto 28px; }
.hm.hm .hm-ap-cabeca h2, .hm.hm .hm-ap-final h2 { font: 700 clamp(24px, 1.8cqi + 14px, 38px)/1.16 var(--hm-tit) !important; }
.hm-ap-cabeca-sub { color: var(--hm-texto2); font-size: 15px; line-height: 1.6; }
.hm-ap-cabeca.esq { justify-items: start; text-align: left; max-width: none; margin: 0 0 18px; gap: 8px; }
.hm-ap-passos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin: 0; padding: 0; list-style: none; }
.hm-ap-passo { padding: 22px 20px 20px; min-width: 0; }
.hm-ap-passo-n { position: absolute; top: 14px; right: 18px; font: 800 38px/1 var(--hm-tit); color: rgba(118, 183, 213, .16); }
.hm.hm .hm-ap-passo h3, .hm.hm .hm-ap-ganho h3 { margin: 14px 0 6px; }
.hm-ap-passo p, .hm-ap-ganho p { color: var(--hm-texto2); font-size: 13.5px; line-height: 1.55; }
.hm-ap-ganhos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin: 0; padding: 0; list-style: none; }
.hm-ap-ganho { padding: 20px 18px; min-width: 0; }
.hm-ap-ganho.destaque { grid-column: span 2; padding: 24px 22px; border-color: var(--hm-linha-azul); background: linear-gradient(160deg, rgba(20, 48, 66, .6), rgba(5, 14, 21, .5)); }
.hm-ap-etiquetas { display: flex; flex-wrap: wrap; gap: 6px; margin: 14px 0 0; padding: 0; list-style: none; }
.hm-ap-etiquetas li { padding: 5px 11px; border-radius: 999px; font: 600 11.5px var(--hm-tit); color: #cde9f6; background: rgba(46, 118, 151, .2); border: 1px solid rgba(46, 118, 151, .4); }
.hm-ap-servicos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.hm-ap-servico { display: flex; flex-direction: column; align-items: flex-start; gap: 7px; text-align: left; min-width: 0; padding: 18px 18px 16px; cursor: pointer;
  color: var(--hm-texto); font-size: 14px; transition: border-color .15s, transform .15s; }
.hm-ap-servico:hover { border-color: rgba(118, 183, 213, .5); transform: translateY(-2px); }
.hm-ap-servico .cat { font: 600 10.5px var(--hm-tit); letter-spacing: .12em; text-transform: uppercase; color: var(--hm-claro); }
.hm-ap-servico strong { font: 600 15.5px/1.3 var(--hm-tit); overflow-wrap: anywhere; }
.hm-ap-servico .d { font-size: 13px; line-height: 1.5; color: var(--hm-texto2); }
.hm-ap-servico .pe { margin-top: auto; padding-top: 8px; display: inline-flex; align-items: center; gap: 4px; font: 600 12.5px var(--hm-tit); color: var(--hm-claro); }
.hm-ap-pacotes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.hm-ap-pacote { padding: 20px 18px; min-width: 0; }
.hm-ap-pacote .t { display: block; font: 600 10.5px var(--hm-tit); letter-spacing: .12em; text-transform: uppercase; color: var(--hm-claro); }
.hm-ap-pacote strong { display: block; font: 700 26px/1.1 var(--hm-tit); letter-spacing: -.02em; margin: 8px 0 10px; color: #fff; }
.hm-ap-pacote ul { margin: 0; padding: 0; list-style: none; font-size: 13.5px; color: var(--hm-texto2); }
.hm-ap-pacote li { padding: 3px 0; }
.hm-ap-pacote li b { color: var(--hm-texto); font-weight: 650; font-variant-numeric: tabular-nums; }
/* Recado para a equipe (só no painel). */
.hm-ap-nota { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; max-width: 860px; margin: 0 auto; padding: 16px 18px;
  border-radius: 14px; border: 1px dashed rgba(118, 183, 213, .4); color: var(--hm-texto2); font-size: 13px; }
.hm-ap-nota > div { flex: 1 1 320px; }
/* De um público para o outro. */
.hm-ap-ponte { display: flex; align-items: center; justify-content: space-between; gap: 18px 26px; flex-wrap: wrap; margin-top: 46px; padding: 26px 28px; }
.hm-ap-ponte > div { display: grid; gap: 8px; max-width: 700px; }
.hm.hm .hm-ap-ponte h2 { font-size: 21px !important; line-height: 1.25 !important; }
.hm-ap-ponte p:not(.hm-olho) { color: var(--hm-texto2); }
/* Dúvidas: o título e o WhatsApp de um lado, as perguntas do outro. */
.hm-ap-faq-grade { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 20px 44px; align-items: start; }
.hm-ap-faq-grade > .hm-ap-cabeca.esq { margin: 0; gap: 12px; }
.hm.hm .hm-ap-faq-grade > .hm-ap-cabeca.esq h2 { font: 700 clamp(24px, 1.8cqi + 14px, 34px)/1.16 var(--hm-tit) !important; }
.hm-ap-faq-grade .hm-ap-marcado { white-space: normal; max-width: 100%; }
.hm-ap-faq-grade .hm-bt { justify-self: start; margin-top: 6px; }
.hm-ap-faq { display: grid; gap: 10px; }
.hm-ap-faq details { border: 1px solid rgba(255, 255, 255, .08); border-radius: 14px; background: rgba(255, 255, 255, .03); }
.hm-ap-faq details[open] { border-color: var(--hm-linha-azul); background: rgba(46, 118, 151, .08); }
.hm-ap-faq summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 16px 18px; cursor: pointer;
  font: 600 14.5px/1.4 var(--hm-tit); }
.hm-ap-faq summary::-webkit-details-marker { display: none; }
.hm-ap-faq summary .hm-ic { color: var(--hm-claro); transition: transform .2s; }
.hm-ap-faq details[open] summary .hm-ic { transform: rotate(180deg); }
.hm-ap-faq details > div { padding: 0 18px 16px; color: var(--hm-texto2); font-size: 14px; line-height: 1.65; }
/* A chamada final. */
.hm-ap-final { position: relative; overflow: hidden; margin-top: 54px; padding: 70px 0; text-align: center; border-top: 1px solid rgba(255, 255, 255, .08); }
.hm-ap-final-fundo .hm-ap-luz-1 { right: 50%; top: -420px; transform: translateX(50%); }
.hm-ap-final-fundo .hm-ap-luz-2 { display: none; }
.hm-ap-final-caixa { position: relative; display: grid; gap: 16px; justify-items: center; }
.hm-ap-final-caixa > p { color: var(--hm-texto2); font-size: 16px; max-width: 56ch; }
.hm-ap-final-caixa .hm-ap-acoes { margin-top: 10px; }
/* O rodapé. */
.hm-ap-pe { padding: 44px 0 26px; border-top: 1px solid rgba(255, 255, 255, .08); background: rgba(0, 0, 0, .28); font-size: 13.5px; color: var(--hm-texto2); }
.hm-ap-cx + .hm-ap-pe { margin-top: 46px; }
.hm-ap-pe-grade { display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr)); gap: 30px; }
.hm-ap-pe-marca { display: grid; gap: 10px; align-content: start; }
.hm-ap-pe-marca p { max-width: 36ch; }
.hm-ap-pe-lema { font: 600 11px var(--hm-tit); letter-spacing: .14em; text-transform: uppercase; color: var(--hm-claro); }
.hm-ap-pe nav { display: grid; gap: 9px; align-content: start; justify-items: start; }
.hm.hm .hm-ap-pe h3 { margin: 0 0 4px; font: 600 11.5px var(--hm-tit) !important; letter-spacing: .12em; text-transform: uppercase; color: var(--hm-mudo); }
.hm-ap-pe-elo { background: none; border: 0; padding: 0; color: var(--hm-texto2); font: inherit; text-align: left; text-decoration: none; cursor: pointer; }
.hm-ap-pe-elo:hover { color: #fff; }
.hm-ap-pe-fim { display: grid; gap: 6px; margin-top: 30px; padding-top: 18px; border-top: 1px solid rgba(255, 255, 255, .08); font-size: 12px; color: var(--hm-mudo); }
/* O botão do WhatsApp, parado no canto da tela (só no site). É o único verde da página, como nas outras páginas da
   HubClub. */
.hm-ap-whats { position: absolute; right: 18px; bottom: 18px; z-index: 30; width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center;
  color: #fff; background: #25d366; box-shadow: 0 14px 30px -10px rgba(0, 0, 0, .8); transition: transform .18s ease; }
.hm-ap-whats:hover { transform: translateY(-2px) scale(1.04); }

@container hm-corpo (min-width: 760px) {
  .hm-ap-marcado { position: relative; display: inline-block; white-space: nowrap; background: none; padding: 0 .22em; isolation: isolate; }
  .hm-ap-marcado::before { content: ""; position: absolute; inset: .1em 0 .04em; z-index: -1; border-radius: .13em; transform: skewX(-11deg);
    background: linear-gradient(100deg, #062538 0%, #1b5a7a 55%, #2e7da3 100%);
    box-shadow: 0 16px 44px -16px rgba(58, 160, 216, .75), inset 0 1px 0 rgba(255, 255, 255, .2); }
}
@container hm-corpo (min-width: 1180px) {
  .hm-ap-flutua { display: flex; }
  .hm-ap-heroi { padding: 62px 0 70px; }
}
/* Os atalhos somem antes de o topo quebrar em duas linhas: no painel ele ainda leva "Prévia interna" e "Site". */
@container hm-corpo (max-width: 1120px) {
  .hm-ap-nav { display: none; }
}
@container hm-corpo (max-width: 1000px) {
  .hm-ap-heroi-grade { grid-template-columns: 1fr; gap: 30px; }
  .hm-ap-ganhos, .hm-ap-servicos, .hm-ap-pacotes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hm-ap-faq-grade { grid-template-columns: 1fr; }
  .hm-ap-pe-grade { grid-template-columns: 1fr 1fr; }
}
@container hm-corpo (max-width: 820px) {
  .hm-ap-passos { grid-template-columns: 1fr; }
}
/* No celular os dois botões continuam no topo: fica só o bloco do logo ao lado deles. */
@container hm-corpo (max-width: 560px) {
  .hm-ap-cx { padding-left: 14px; padding-right: 14px; }
  .hm-ap-topo > .hm-ap-cx { gap: 8px 10px; }
  .hm-ap-topo .hm-ap-marca > div { display: none; }
  .hm-ap-topo .hm-ap-logo { width: 38px; height: 38px; }
  .hm-ap-topo-acoes { gap: 8px; }
  .hm-ap-topo .hm-bt.m { min-height: 38px; padding: 0 12px; font-size: 12.5px; }
  .hm-ap-heroi { padding: 26px 0 34px; }
  .hm-ap-chave { width: 100%; }
  .hm-ap-acoes .hm-bt.g { width: 100%; }
  .hm-ap-busca { flex-wrap: wrap; padding: 8px 8px 8px 12px; }
  .hm-ap-busca input { flex: 1 1 60%; }
  .hm-ap-busca .hm-btn { flex: 1 1 100%; }
  .hm-ap-painel { padding: 16px; border-radius: 20px; }
  .hm-ap-trio .hm-ap-numero { padding: 9px 10px; }
  .hm-ap-trio .hm-ap-numero strong { font-size: 17px; }
  .hm-ap-linha-tag { display: none; }
  .hm-ap-painel-linha { grid-template-columns: 40px minmax(0, 1fr); }
  .hm-ap-ganhos, .hm-ap-servicos, .hm-ap-pacotes { grid-template-columns: 1fr; }
  .hm-ap-ganho.destaque { grid-column: auto; }
  .hm-ap-ponte { padding: 20px; }
  .hm-ap-final { padding: 50px 0; }
  .hm-ap-pe-grade { grid-template-columns: 1fr; gap: 24px; }
  .hm-ap-pe { padding-bottom: 86px; }
}
@container hm-corpo (max-width: 380px) {
  .hm-ap-topo .hm-bt.m { padding: 0 9px; font-size: 12px; }
  .hm-ap-topo-acoes { gap: 6px; }
}
@media (prefers-reduced-motion: reduce) {
  .hm-ap-pilula i { animation: none; }
  .hm-bt, .hm-bt .hm-ic, .hm-ap-chave-fundo { transition: none; }
}

@media (max-width: 900px) {
  .hm-fontes { grid-template-columns: 1fr; }
  .hm-passos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .hm-topo, .hm-abas { padding-left: 16px; padding-right: 16px; }
  .hm-corpo { padding: 14px 16px 64px; }
  .hm-grade { grid-template-columns: 1fr; }
  .hm-campos { grid-template-columns: 1fr; }
  .hm-servico { grid-template-columns: 22px minmax(0, 1fr); }
  .hm-servico .precos { grid-column: 2 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .hm-pacote-grade { grid-template-columns: 1fr; }
  .hm-sim-linha { grid-template-columns: minmax(0, 1fr) 96px; }
  .hm-sim-linha .trilho { grid-column: 1 / -1; order: 3; }
  .hm-cat-item { grid-template-columns: 1fr; }
  .hm-painel-topo { padding: 14px 14px 10px; }
  .hm-painel-corpo { padding: 14px 14px 20px; }
  .hm-lista-dados { grid-template-columns: 1fr; gap: 2px 0; }
  .hm-lista-dados dd { margin-bottom: 6px; }
  .hm-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}