/* hub-freelas.css · Estilos do Hub de Freelancers (?sub=freelas) */

.hf-bloco {
  display: flex;
  flex-direction: column;
  gap: var(--esp-bloco);
  width: 100%;
}

.hf-filtros {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 18px 22px;
  border-radius: 16px;
  background: var(--sup-1);
  border: 1px solid var(--linha-suave);
}

.hf-filtro-linha {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.hf-filtro-rotulo {
  font: 600 12px/1 var(--fonte-texto);
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--texto-rotulo);
  min-width: 68px;
  flex: none;
}

.hf-chips {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}

.hf-chip {
  cursor: pointer;
  background: transparent;
  transition: border-color .15s, color .15s, background .15s;
  user-select: none;
}

.hf-chip:hover {
  border-color: var(--linha-ouro);
  color: var(--texto);
}

.hf-chip.on {
  background: rgba(245, 197, 66, .12);
  border-color: var(--ouro);
  color: var(--ouro);
  font-weight: 700;
}

.hf-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(460px, 1fr));
  gap: var(--esp-painel);
  align-items: start;
}

@media (min-width: 1500px) {
  .hf-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 980px) {
  .hf-grid {
    grid-template-columns: 1fr;
  }
}

.hf-card {
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  transition: border-color .2s;
}

.hf-card:hover {
  border-color: rgba(245, 197, 66, .35);
}

.hf-card-topo {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}

.hf-card-ident {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.hf-card-nome {
  font: 700 24px/1.2 var(--fonte-titulo);
  color: var(--texto);
  margin: 0;
  word-break: break-word;
}

.hf-card-local {
  font: 500 14px/1.3 var(--fonte-texto);
  color: var(--texto-dim);
}

.hf-card-badges {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
  flex: none;
}

.hf-status-tag {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: var(--r-pill);
  font: 600 11px/1 var(--fonte-texto);
  text-transform: uppercase;
  letter-spacing: .05em;
  white-space: nowrap;
}

.hf-status-tag.status-ativo {
  background: rgba(53, 200, 120, .12);
  color: var(--val-good);
  border: 1px solid rgba(53, 200, 120, .28);
}

.hf-status-tag.status-pausa {
  background: rgba(255, 176, 32, .12);
  color: var(--val-warn);
  border: 1px solid rgba(255, 176, 32, .28);
}

.hf-status-tag.status-descartado {
  background: rgba(248, 113, 113, .12);
  color: var(--val-bad);
  border: 1px solid rgba(248, 113, 113, .28);
}

.hf-trabalhou-tag {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: var(--r-pill);
  font: 500 11px/1 var(--fonte-texto);
  border: 1px solid var(--linha-suave);
  color: var(--texto-dim);
  white-space: nowrap;
}

.hf-trabalhou-tag.sim {
  border-color: var(--linha-ouro);
  color: var(--ouro);
  background: rgba(245, 197, 66, .08);
}

.hf-card-servicos {
  margin-top: -2px;
}

.hf-card-servicos .pd-chip {
  font-size: 11.5px;
  padding: 5px 11px;
}

.hf-card-dados {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 11px 0;
  border-top: 1px solid var(--linha-fraca);
  border-bottom: 1px solid var(--linha-fraca);
  font: 500 13px/1.4 var(--fonte-texto);
}

.hf-dado-linha {
  display: flex;
  gap: 6px;
  align-items: baseline;
}

.hf-dado-rotulo {
  color: var(--texto-rotulo);
  font-weight: 600;
  flex: none;
}

.hf-dado-valor {
  color: var(--texto);
  word-break: break-word;
}

.hf-vol-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin: 2px 0;
}

.hf-vol-grid .vol-card {
  padding: 12px 6px;
  border-radius: 12px;
  gap: 6px;
  background: var(--sup-1);
  border: 1px solid var(--linha-suave);
}

.hf-vol-grid .vol-card b {
  font: 700 24px/1 var(--fonte-titulo);
  color: var(--texto);
}

.hf-vol-grid .vol-card.dour b {
  color: var(--ouro);
}

.hf-vol-grid .vol-card.alerta b {
  color: var(--amarelo);
}

.hf-vol-grid .vol-card.ruim b {
  color: var(--val-bad);
}

.hf-vol-grid .vol-card span {
  font: 600 10px/1.1 var(--fonte-texto);
  color: var(--texto-rotulo);
  text-transform: uppercase;
  letter-spacing: .04em;
  text-align: center;
}

.hf-vol-grid .vol-card b.hf-b-data {
  font-size: 17px;
}

.hf-card-acoes {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: auto;
  padding-top: 6px;
}

.hf-link-acervo {
  font: 600 13px/1 var(--fonte-texto);
  color: var(--texto-dim);
  text-decoration: none;
  border: 1px solid var(--linha-suave);
  border-radius: var(--r-pill);
  padding: 8px 14px;
  transition: border-color .15s, color .15s, background .15s;
}

.hf-link-acervo:hover {
  color: var(--ouro);
  border-color: var(--linha-ouro);
  background: rgba(245, 197, 66, .08);
}

.hf-btn-expand {
  font: 600 13px/1 var(--fonte-texto);
  color: var(--ouro);
  background: rgba(245, 197, 66, .08);
  border: 1px solid var(--linha-ouro);
  border-radius: var(--r-pill);
  padding: 8px 16px;
  cursor: pointer;
  transition: border-color .15s, background .15s, color .15s;
}

.hf-btn-expand:hover {
  background: rgba(245, 197, 66, .18);
  border-color: var(--ouro);
}

.hf-card-expansao {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 10px;
  padding-top: 16px;
  border-top: 1px solid var(--linha-ouro);
  animation: hfFadeIn .2s ease;
}

.hf-card-expansao[hidden] {
  display: none !important;
}

@keyframes hfFadeIn {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.hf-exp-bloco {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.hf-exp-tit {
  font: 700 13px/1.2 var(--fonte-titulo);
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--ouro);
  margin: 0;
}

.hf-exp-txt {
  font: 400 13.5px/1.5 var(--fonte-texto);
  color: var(--texto-dim);
  background: var(--sup-1);
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid var(--linha-fraca);
}

.hf-tabela-scroll {
  overflow-x: auto;
  border: 1px solid var(--linha-suave);
  border-radius: 10px;
  background: var(--sup-1);
}

.hf-tabela {
  min-width: 640px;
  width: 100%;
  border-collapse: collapse;
  font: 500 12.5px/1.3 var(--fonte-texto);
  text-align: left;
}

.hf-tabela th {
  padding: 8px 10px;
  font: 600 11px/1 var(--fonte-texto);
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--texto-rotulo);
  background: rgba(255, 255, 255, .04);
  border-bottom: 1px solid var(--linha-suave);
  white-space: nowrap;
}

.hf-tabela td {
  padding: 8px 10px;
  border-bottom: 1px solid var(--linha-fraca);
  color: var(--texto-dim);
  vertical-align: top;
}

.hf-tabela tr:last-child td {
  border-bottom: none;
}

.hf-tabela td.num {
  font-variant-numeric: tabular-nums;
}

.hf-tabela td.nota-dour {
  color: var(--ouro);
  font-weight: 700;
}

.hf-anexos-lista {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0;
  padding: 0;
}

.hf-anexo-link {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font: 500 12.5px/1.3 var(--fonte-texto);
  color: var(--texto-dim);
  text-decoration: none;
  padding: 7px 12px;
  border-radius: 8px;
  background: var(--sup-1);
  border: 1px solid var(--linha-fraca);
  transition: border-color .15s, color .15s, background .15s;
}

.hf-anexo-link:hover {
  color: var(--texto);
  border-color: var(--linha-ouro);
  background: rgba(245, 197, 66, .06);
}

.hf-anexo-nome {
  word-break: break-all;
}

.hf-anexo-tam {
  font-size: 11px;
  color: var(--texto-rotulo);
  flex: none;
}

.hf-aval-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: 8px;
}

.hf-aval-item {
  padding: 8px 10px;
  border-radius: 8px;
  background: var(--sup-1);
  border: 1px solid var(--linha-fraca);
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.hf-aval-rot {
  font: 600 10.5px/1 var(--fonte-texto);
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--texto-rotulo);
}

.hf-aval-val {
  font: 700 12.5px/1 var(--fonte-texto);
  color: var(--texto-dim);
  text-transform: uppercase;
}

.hf-aval-val.ok {
  color: var(--val-good);
}

.hf-contatos-grid {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.hf-contato-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 12px;
  border-radius: var(--r-pill);
  font: 500 12px/1 var(--fonte-texto);
  color: var(--texto-dim);
  text-decoration: none;
  border: 1px solid var(--linha-suave);
  background: var(--sup-1);
  transition: border-color .15s, color .15s;
}

.hf-contato-link:hover {
  border-color: var(--linha-ouro);
  color: var(--ouro);
}

.hf-sem-itens {
  font: 400 13px/1.4 var(--fonte-texto);
  color: var(--texto-apagado);
  padding: 6px 0;
  margin: 0;
}

/* Bloco de Freelancers na aba do setor Design (?sub=design) */

.hf-setor-bloco {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid var(--linha-suave);
}

.hf-setor-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  flex-wrap: wrap;
}

.hf-setor-tit-bloco {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.hf-setor-tit {
  font: 700 20px/1.2 var(--fonte-titulo);
  color: var(--texto);
  margin: 0;
  letter-spacing: -.01em;
}

.hf-setor-sub {
  font: 400 13px/1.4 var(--fonte-texto);
  color: var(--texto-dim);
  margin: 0;
}

.hf-setor-link-hub {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font: 600 12.5px/1 var(--fonte-texto);
  color: var(--ouro);
  text-decoration: none;
  border: 1px solid var(--linha-ouro);
  border-radius: var(--r-pill);
  padding: 8px 14px;
  background: rgba(245, 197, 66, .08);
  white-space: nowrap;
  transition: border-color .15s, background .15s, color .15s;
  flex: none;
}

.hf-setor-link-hub:hover {
  background: rgba(245, 197, 66, .18);
  border-color: var(--ouro);
  color: var(--ouro);
}

.hf-setor-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 16px;
}

@media (max-width: 768px) {
  .hf-setor-grid {
    grid-template-columns: 1fr;
  }
}

.hf-setor-card {
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  border-radius: 14px;
  border: 1px solid var(--linha-suave);
  background: var(--sup-1);
  transition: border-color .2s;
}

.hf-setor-card:hover {
  border-color: rgba(245, 197, 66, .35);
}

.hf-setor-card-topo {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
}

.hf-setor-card-ident {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.hf-setor-card-nome {
  font: 700 17px/1.25 var(--fonte-titulo);
  color: var(--texto);
  margin: 0;
  word-break: break-word;
}

.hf-setor-card-area {
  font: 500 12.5px/1.3 var(--fonte-texto);
  color: var(--texto-dim);
}

.hf-setor-card-badges {
  display: flex;
  gap: 6px;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
  flex: none;
}

.hf-setor-tag-trabalhou {
  display: inline-flex;
  align-items: center;
  padding: 3px 8px;
  border-radius: var(--r-pill);
  font: 500 10.5px/1 var(--fonte-texto);
  border: 1px solid var(--linha-suave);
  color: var(--texto-dim);
  white-space: nowrap;
}

.hf-setor-tag-trabalhou.sim {
  border-color: var(--linha-ouro);
  color: var(--ouro);
  background: rgba(245, 197, 66, .08);
}

.hf-setor-nota {
  display: inline-flex;
  align-items: center;
  padding: 3px 8px;
  border-radius: var(--r-pill);
  font: 600 11px/1 var(--fonte-texto);
  border: 1px solid var(--linha-suave);
  color: var(--texto-dim);
  white-space: nowrap;
}

.hf-setor-nota.tem-nota {
  color: var(--ouro);
  border-color: var(--linha-ouro);
  background: rgba(245, 197, 66, .08);
  font-weight: 700;
}

.hf-setor-card-servicos {
  margin: 0;
}

.hf-setor-card-servicos .pd-chip {
  font-size: 11px;
  padding: 4px 9px;
}

.hf-setor-card-rodape {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin-top: auto;
  padding-top: 6px;
  border-top: 1px solid var(--linha-fraca);
}

.hf-setor-link-ficha {
  font: 600 12px/1 var(--fonte-texto);
  color: var(--texto-dim);
  text-decoration: none;
  border: 1px solid var(--linha-suave);
  border-radius: var(--r-pill);
  padding: 5px 12px;
  transition: border-color .15s, color .15s, background .15s;
}

.hf-setor-link-ficha:hover {
  color: var(--ouro);
  border-color: var(--linha-ouro);
  background: rgba(245, 197, 66, .08);
}

/* ===================================================================
   v3 — ficha de personagem + painel de setor (freelas.json versao 2)
   =================================================================== */

.hf-card-v2 .hf-card-classe {
  font-size: 13px;
  color: var(--texto-dim);
  margin-top: 2px;
}

.hf-nivel-selo {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .02em;
  border: 1px solid rgba(245,243,236,.18);
  background: rgba(245,243,236,.06);
  color: var(--texto);
}

.hf-nivel-selo.hf-selo-mestre {
  border-color: rgba(255,176,32,.55);
  background: rgba(255,176,32,.14);
  color: var(--amarelo);
}

.hf-nivel-selo.hf-selo-veterano {
  border-color: rgba(53,200,120,.4);
  background: rgba(53,200,120,.12);
  color: var(--verde);
}

.hf-nivel-selo.hf-selo-aprendiz {
  border-color: rgba(245,243,236,.22);
  background: rgba(245,243,236,.08);
}

.hf-nivel-selo.hf-selo-recruta {
  border-color: rgba(245,243,236,.14);
  background: rgba(245,243,236,.04);
  color: var(--texto-dim);
}

.hf-nivel-nota {
  font-size: 12px;
  color: var(--texto-dim);
  margin-left: 4px;
}

.hf-atributos {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 12px 0;
}

.hf-atributo-linha {
  display: grid;
  grid-template-columns: 108px 1fr 44px;
  align-items: center;
  gap: 10px;
}

.hf-atributo-rotulo {
  font-size: 12px;
  color: var(--texto-dim);
}

.hf-atributo-barra {
  position: relative;
  height: 8px;
  border-radius: 999px;
  background: rgba(245,243,236,.10);
  overflow: hidden;
}

.hf-atributo-preenchido {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--amarelo), var(--verde));
}

.hf-atributo-valor {
  font-size: 12px;
  font-weight: 700;
  text-align: right;
  color: var(--texto);
}

.hf-bompara-evitar {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin: 8px 0;
}

.hf-bompara, .hf-evitar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.hf-bompara-rot {
  font-size: 12px;
  font-weight: 700;
  color: var(--verde);
}

.hf-evitar-rot {
  font-size: 12px;
  font-weight: 700;
  color: var(--val-bad);
}

.hf-conquistas {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 10px 0;
}

.hf-conquista {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(255,176,32,.10);
  border: 1px solid rgba(255,176,32,.28);
  color: var(--texto);
}

.hf-penalidade {
  font-size: 13px;
  font-weight: 600;
  color: var(--val-bad);
  margin: 8px 0;
}

.hf-ultimos-clientes {
  font-size: 13px;
  color: var(--texto-dim);
  margin: 8px 0;
}

.hf-observacoes {
  margin-top: 8px;
  color: var(--texto-dim);
}

.hf-contato-ressalva {
  font-size: 12px;
  color: var(--val-warn);
  margin-left: -4px;
}

.hf-atraso-cel {
  color: var(--val-bad);
  font-weight: 700;
}

/* Painel de setor (tabela ordenável) */

.hf-painel-setor {
  margin-bottom: var(--esp-painel);
}

.hf-tabela-setor th.hf-th-ordenavel {
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}

.hf-tabela-setor th.hf-th-ordenavel:hover {
  color: var(--amarelo);
}

@media (max-width: 720px) {
  .hf-atributo-linha {
    grid-template-columns: 90px 1fr 36px;
  }
}

/* =====================================================================
   F19 (05/09/2026) — tela ?sub=freelas na estrutura da FOLHA D.
   Só AJUSTE DE GRADE sobre os componentes já medidos do Hub
   (HUB-PADRAO.md §3/§6): nenhuma cor, raio, sombra ou família nova.
   Nada acima desta linha foi alterado — as classes .hf-card*, .hf-setor*
   e .hf-tabela* continuam servindo a ficha e as abas de setor.
   ===================================================================== */

button.st-chip { color: var(--texto); font-family: inherit; cursor: pointer; }
button.st-chip:hover { border-color: var(--linha-ouro); }

.hf-chips-setor { margin-bottom: 4px; }

.hf-fita {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 2px 0 10px;
  font: 500 13px/1.4 var(--fonte-texto); color: var(--texto-apagado);
}
.hf-fita .hf-voltar-lista {
  background: none; border: 0; padding: 0; cursor: pointer;
  font: 600 13px/1.4 var(--fonte-texto); color: #d9a3ff;
}
.hf-fita .hf-voltar-lista:hover { color: #eaddff; }

.hf-nota { padding: 12px 4px 2px; font: 500 13px/1.4 var(--fonte-texto); color: var(--texto-apagado); }
.hf-rodape { padding-top: 4px; }
.hf-degradado { padding: 16px 22px; }

/* --- bloco A: grade de 7 colunas do Audiovisual (sem a coluna de foto) --- */
.hf-av-tabela { padding: 0; }
.hf-av .st-head,
.hf-av .st-linha {
  grid-template-columns: minmax(0,1fr) 118px 148px 148px 116px 116px 104px;
  padding: 11px 22px;
}
.hf-av .st-nome { font: 600 18px/1.2 var(--fonte-texto); }
.hf-av .hf-cel {
  font: 500 14.5px/1.3 var(--fonte-texto); color: var(--texto-dim);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.hf-av .hf-cel b { color: var(--texto); font-weight: 600; }
.hf-av .hf-cel.hf-vazio { color: var(--texto-apagado); }
.hf-av .hf-cel.ruim { color: var(--val-bad); }
.hf-av .hf-quando { font-style: normal; color: var(--texto-apagado); }
.hf-av .hf-quando.ruim { color: var(--val-bad); }
.hf-av .st-linha[data-href] { cursor: pointer; }
.hf-av .st-linha:hover { background: rgba(245,197,66,.05); }
.hf-av .val-mot { margin-left: 0; }
.hf-av .hf-det .st-linha:first-of-type { border-top: 1px solid var(--linha-suave); }
.hf-freela-link {
  background: none; border: 0; padding: 0; cursor: pointer;
  font: inherit; color: #f5c542; text-decoration: underline;
  text-underline-offset: 2px;
}
.hf-freela-link:hover { color: var(--texto); }
.hf-chip-sem-freela {
  font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em;
  color: var(--texto-apagado); border: 1px solid var(--linha-suave); border-radius: 999px;
  padding: 1px 8px; margin-left: 6px; white-space: nowrap;
}

@media (max-width: 1180px) {
  .hf-av .st-head { display: none; }
  .hf-av .st-linha { grid-template-columns: minmax(0,1fr) 118px; row-gap: 4px; }
  .hf-av .st-linha > .hf-cel { grid-column: 1 / 3; }
  .hf-av .hf-cel::before {
    content: attr(data-rot) ': ';
    color: var(--texto-rotulo); font-size: 12.5px;
    text-transform: uppercase; letter-spacing: .06em;
  }
}

/* --- bloco B: linha de pessoa da Home, com o avatar do Hub em 38px --- */
.hf-b .avatar { width: 38px; height: 38px; border-width: 2px; font-size: 14px; }
.hf-b .val-sub b { color: var(--texto); }
.hf-b .val-sub b.ruim { color: var(--val-bad); }
.hf-b .val-mot { margin-left: 0; }
.hf-b .hf-pessoa { cursor: pointer; }
.hf-b .hf-nome-btn {
  background: none; border: 0; padding: 0; cursor: pointer;
  font: inherit; color: inherit; text-align: left;
}

/* --- bloco C: lista rankeada; o nome precisa de espaço para o setor --- */
.hf-rank .st-hitem { grid-template-columns: 210px minmax(0,1fr) auto; cursor: pointer; }
@media (max-width: 640px) { .hf-rank .st-hitem { grid-template-columns: 150px minmax(0,1fr) auto; } }
.hf-hlista { padding: 10px 0 4px; }

/* --- F19-2 (05/09/2026 17h33): foto no avatar, iniciais como queda -----------
   Mesmo círculo, mesma borda e mesmo tamanho do `.avatar` do Hub — só o miolo
   muda de letra para imagem. Quem não tem foto não muda em nada. */
.avatar.avatar-foto { padding: 0; overflow: hidden; }
.avatar.avatar-foto img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 50%; }

/* topo da ficha: a mesma foto, um pouco maior, acima do cartão */
.hf-ficha-topo { display: flex; align-items: center; padding: 0 0 10px 2px; }
.hf-ficha-topo .avatar { width: 64px; height: 64px; font-size: 22px; border-width: 2.4px; }