/* A base de uso no celular vem primeiro: alvos de toque, campos de 16px e
   tipografia mínima. Ela mora em um arquivo só para não nascer tela sem ela. */
@import url('/mobile.css');

/* Feed de criadores.
   As classes levam o prefixo fc- porque este bloco e montado dentro de tres
   paginas diferentes (o feed publico, a area do influenciador e a area da
   marca), e cada uma delas ja tem as proprias classes. Sem o prefixo, .cartao
   daqui brigaria com o .cartao de area.css. */

/* O modal entra tambem porque ele nasce em document.body, fora de .fc. Sem
   estar nesta lista, todo var(--fc-*) dentro dele resolve para nada e a caixa
   aparece sem fundo, sem borda e com o botao invisivel. */
.fc, .fc-modal {
  --fc-bg: #0c0d10;
  --fc-surface: #171a20;
  --fc-surface-2: #1e222a;
  --fc-border: #262b34;
  --fc-border-soft: #1d222a;
  --fc-ink: #e8eaf0;
  --fc-ink-dim: #9aa3b2;
  --fc-ink-faint: #6b7484;
  --fc-accent: #c9a227;
}

/* ---------- contador da vitrine ---------- */

/* As abas por faixa (nano→mega) moravam aqui e sairam com a lista unica. No
   lugar delas ficou uma linha que diz quanto ja foi visto do total — ela nao e
   navegacao, e so referencia de tamanho. */
.fc-contador {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px;
  padding: 2px 2px 12px; color: var(--fc-ink-dim); font-size: 13.5px;
}
.fc-contador b { color: var(--fc-ink); font-weight: 640; }
.fc-contador span { color: var(--fc-ink-faint); font-size: 12.5px; }

/* ---------- grade ---------- */

/* auto-fill em vez de um numero fixo de colunas por largura de TELA. As media
   queries antigas olhavam o viewport, e o mesmo componente e montado dentro da
   area do influenciador e da area da marca, onde o container tem metade da
   largura da janela: em tela cheia ele pedia cinco colunas dentro de um espaco
   que cabia tres, e a grade saia espremida. Com auto-fill quem decide e o
   espaco disponivel, que e o que sempre deveria ter decidido. */
.fc-grade {
  display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  /* dense porque os cartoes pagos ocupam mais de uma coluna: sem isto, cada
     cartao grande que nao cabe no fim da linha deixa um buraco atras dele. */
  grid-auto-flow: dense;
}

/* ---------- os quatro tamanhos ---------- */

/* O tamanho e o beneficio que o plano vende, entao ele vem do servidor em
   `plano.cartao` e a classe so obedece. Hoje toda conta esta no gratuito e a
   grade inteira sai em `fc-p`; os outros tres ja funcionam e aparecem no
   instante em que o admin muda o plano de alguem.

   E `fc-p` NAO E UM CARTAO: e uma linha. O gratuito ocupa a largura toda numa
   faixa baixa, com a foto pequena e redonda, uma pessoa por linha. Cartao
   quadrado de graca para 6,5 mil perfis nao deixa nada para o plano pago
   vender: a diferenca entre linha e cartao e o degrau que o Destaque compra. */
.fc-cartao.fc-m { grid-column: span 2; }
.fc-cartao.fc-g { grid-column: span 2; grid-row: span 2; }
.fc-cartao.fc-gg { grid-column: span 3; grid-row: span 2; }

/* A foto acompanha: em cartao alto ela cresce junto, senao sobraria um retrato
   pequeno em cima de um bloco vazio. */
.fc-cartao.fc-g .fc-retrato, .fc-cartao.fc-gg .fc-retrato { aspect-ratio: auto; flex: 1; min-height: 180px; }
/* O nome cresce junto com o cartao pago. Estas regras eram do @, que saiu do
   cartao fechado; mantê-las no @ afetaria so o texto dentro da caixa, que tem
   tamanho proprio. */
.fc-cartao.fc-m .fc-nome, .fc-cartao.fc-g .fc-nome { font-size: 15px; }
.fc-cartao.fc-gg .fc-nome { font-size: 17px; }

/* ---------- gratuito: listagem, uma pessoa por linha ---------- */

/* Na linha fechada ficam foto, NOME e o botao de indicar. O @, o tema, a
   contagem e a recomendacao desceram para a caixa que abre no clique, uma por
   vez: a linha e o que aparece dez vezes na tela, e portanto e ela que um print
   levaria inteira. */
.fc-cartao.fc-p {
  grid-column: 1 / -1;
  flex-direction: row; align-items: center; gap: 10px;
  padding: 6px 10px; border-radius: 10px; text-align: left;
  /* wrap porque a caixa aberta ocupa a largura toda e desce para a segunda
     linha do mesmo cartao, em vez de espremer foto, nome e botao. */
  flex-wrap: wrap;
}
/* min-width: 0 em todo item flex que tem ellipsis: sem isso o conteudo impoe a
   largura minima e o texto vaza em vez de cortar. */
.fc-cartao.fc-p .fc-alvo {
  display: flex; align-items: center; gap: 9px; flex: 1; min-width: 0;
  width: auto; text-align: left;
}
.fc-cartao.fc-p .fc-retrato {
  width: 34px; height: 34px; flex: none;
  aspect-ratio: auto; border-radius: 50%; margin-bottom: 0;
}
/* O nome era a legenda embaixo do @; agora e a identidade da linha, entao pega
   o tamanho e a cor que eram do @. */
.fc-cartao.fc-p .fc-nome {
  margin-top: 0; font-size: 13px; font-weight: 560; color: var(--fc-ink);
  flex: 0 1 auto; min-width: 0;
}
.fc-cartao.fc-p .fc-indicar {
  width: auto; margin-top: 0; min-height: 32px; flex: none;
  padding: 6px 12px; font-size: 11px;
}

/* A posicao fica entre o nome e o botao, encostada nele. Nao entra no `.fc-alvo`
   de proposito: ali dentro tudo e area de clique da caixa, e o numero e so
   informacao.

   Duas linhas alinhadas a direita, as duas no amarelo da marca: o numero em
   cima e, embaixo, escrito o que ele e. O rotulo vem um pouco mais apagado que
   o numero para nao competir com ele — mas continua amarelo, e nao cinza. */
.fc-posicao {
  flex: none; display: flex; flex-direction: column; align-items: flex-end;
  line-height: 1.15; text-align: right; color: var(--fc-accent);
}
.fc-posicao b {
  font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
/* A legenda numa linha so. Quebrada em duas ela virava um bloco alto repetido
   trinta vezes, que empurrava o nome para tres letras e reticencias — e o nome
   e a identidade do cartao. */
.fc-posicao i {
  font-style: normal; font-size: 10px; font-weight: 600; letter-spacing: -0.01em;
  opacity: .82; white-space: nowrap;
}

/* No celular a linha e a mesma: foto, nome, posicao e botao ja cabem sem
   empilhar, porque o @ e o tema nao disputam mais a largura com eles. Quem cede
   espaco e o nome, que ja corta com reticencias. */
@media (max-width: 560px) {
  .fc-cartao.fc-p .fc-nome { font-size: 12.5px; }
  /* 44px de altura e 12px de texto: o botao principal da tela tinha 32px de
     alto e letra de 11px, que e alvo de unha e leitura apertada. A largura nao
     muda, entao a linha continua cabendo. */
  .fc-cartao.fc-p .fc-indicar {
    padding: 8px 12px; min-height: 44px; font-size: 12px;
  }

  /* Aqui a linha tem duas alturas: nome em cima, posicao escrita embaixo dele,
     e o botao ocupando as duas a direita. Lado a lado nao cabia — a legenda
     inteira comia a largura e o nome saia em tres letras e reticencias.
     Continua uma pessoa por linha; a linha e que e mais alta. */
  .fc-cartao.fc-p {
    display: grid; grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "alvo botao" "posicao botao" "perfil perfil";
    align-items: center; column-gap: 10px; row-gap: 2px;
  }
  .fc-cartao.fc-p > .fc-alvo { grid-area: alvo; }
  .fc-cartao.fc-p > .fc-indicar { grid-area: botao; align-self: center; }
  .fc-cartao.fc-p > .fc-perfil { grid-area: perfil; margin-top: 8px; }
  /* Filho DIRETO, e nao qualquer `.fc-posicao` dentro do cartao: a caixa aberta
     tem a sua propria, e sem o `>` ela herdava o recuo de 43px e a area do
     grid, aparecendo deslocada para a direita dentro da caixa.
     Alinhada com o nome, e nao com a borda: 34px de foto + 9px do vao. */
  .fc-cartao.fc-p > .fc-posicao {
    grid-area: posicao; flex-direction: row; align-items: baseline;
    justify-content: flex-start; gap: 5px; padding-left: 43px; min-width: 0;
  }
  .fc-posicao b { font-size: 13px; }
  /* 9.5px era ilegivel de verdade — e a legenda existe justamente para dizer o
     que o numero significa. Cabe em 12px porque no celular ela fica na propria
     linha, embaixo do nome. */
  .fc-posicao i { font-size: 12px; }
}

.fc-selo-plano {
  position: absolute; top: 8px; right: 8px; z-index: 1;
  background: var(--fc-accent); color: #14161b;
  border-radius: 999px; padding: 3px 9px;
  font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
}

/* O nome era a legenda do @ e virou a identidade do cartao fechado: herda o
   peso e a cor que eram do @. */
.fc-nome {
  color: var(--fc-ink); font-size: 13.5px; font-weight: 620; letter-spacing: -0.01em;
  margin-top: 1px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.fc-nome:empty { display: none; }

/* No cartao quadrado a seta fica embaixo do nome, centralizada; na linha ela
   vai para a ponta direita, encostada no botao de indicar. */
.fc-cartao:not(.fc-p) .fc-seta { margin: 7px auto 4px; }

/* No cartao quadrado a posicao vira uma linha propria, logo acima do botao. */
.fc-cartao:not(.fc-p) .fc-posicao { margin-top: 8px; }

/* A faixa de recomendacao: cor por nivel, e nunca o numero. */
.fc-recomendacao {
  margin-top: 7px; font-size: 11px; font-weight: 600;
  border-radius: 999px; padding: 3px 8px; display: inline-block;
}
.fc-alta { background: rgba(224, 85, 97, .16); color: #ef7d86; }
.fc-media { background: var(--fc-accent); color: #14161b; }
.fc-baixa { background: rgba(63, 178, 127, .15); color: #3fb27f; }

/* No celular o cartao pago ocupa a linha toda em vez de tres colunas que nao
   existem. */
@media (max-width: 560px) {
  .fc-cartao.fc-m, .fc-cartao.fc-g, .fc-cartao.fc-gg { grid-column: span 2; }
  .fc-cartao.fc-g, .fc-cartao.fc-gg { grid-row: span 1; }
}
/* No celular o minimo cede: dois cartoes por linha continuam melhores do que um
   cartao gigante e uma rolagem infinita. */
@media (max-width: 560px) {
  .fc-grade { grid-template-columns: repeat(2, 1fr); gap: 10px; }
}

.fc-cartao {
  background: var(--fc-surface); border: 1px solid var(--fc-border-soft);
  border-radius: 14px; padding: 12px; text-align: center;
  text-decoration: none; color: var(--fc-ink);
  /* Coluna com o botao empurrado para o fim: sem isso, um cartao cujo tema
     ocupa duas linhas desalinha o botao de toda a fileira. */
  display: flex; flex-direction: column;
}
.fc-cartao:hover { border-color: var(--fc-border); }
.fc-cartao .fc-indicar { margin-top: auto; }

.fc-retrato {
  width: 100%; aspect-ratio: 1; border-radius: 12px; overflow: hidden;
  background: var(--fc-surface-2); position: relative; margin-bottom: 10px;
}
.fc-retrato img { width: 100%; height: 100%; object-fit: cover; display: block; }

.fc-arroba {
  font-size: 13.5px; font-weight: 620; letter-spacing: -0.01em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.fc-tema { color: var(--fc-ink-faint); font-size: 12px; margin-top: 2px; }

/* ---------- indicar ---------- */

/* O cartao deixou de ser um link inteiro: agora ele tem dois destinos, a caixa
   do perfil e o botao de indicar. O botao de abrir cobre a parte de cima, o de
   indicar fica embaixo, e a area de toque de cada um e obvia.

   `.fc-alvo` era um <a> e virou <button>, entao precisa desmontar o botao: sem
   isto ele chega com fundo cinza, borda, fonte do sistema e texto centralizado
   pelo navegador. */
.fc-alvo {
  display: block; text-decoration: none; color: inherit;
  background: none; border: 0; padding: 0; margin: 0;
  font: inherit; text-align: center; width: 100%; cursor: pointer;
}
.fc-alvo:focus-visible { outline: 2px solid var(--fc-accent); outline-offset: 2px; border-radius: 8px; }

/* A seta diz que ali abre alguma coisa. Sem ela o cartao vira uma foto com um
   nome e nada indica que o @ esta a um clique.

   Desenhada com borda, e nao com o caractere ▾: o triangulo unicode depende de
   a fonte do aparelho ter o glifo, e onde nao tem ele sai como o retangulo
   vazio do "tofu" — foi o que apareceu no primeiro teste. */
.fc-seta {
  display: block; flex: none; margin-left: auto; margin-top: -3px;
  width: 8px; height: 8px;
  border-right: 2px solid var(--fc-ink-dim);
  border-bottom: 2px solid var(--fc-ink-dim);
  transform: rotate(45deg);
  transition: transform .15s ease, margin-top .15s ease;
}
.fc-cartao.fc-aberto .fc-seta { transform: rotate(225deg); margin-top: 3px; }
.fc-cartao.fc-aberto { border-color: var(--fc-accent); }

/* ---------- a caixa do perfil, uma por vez ---------- */

/* Ela mora dentro do cartao e comeca com `hidden`. O JS so tira o atributo:
   nao ha posicionamento calculado, e a ordem do teclado continua a do
   documento. `[hidden]` explicito porque o cartao e um flex container e
   qualquer `display` herdado venceria o padrao do atributo. */
.fc-perfil {
  flex-basis: 100%; width: 100%; margin-top: 10px;
  background: var(--fc-surface-2); border: 1px solid var(--fc-border);
  border-radius: 12px; padding: 12px; text-align: left;
}
.fc-perfil[hidden] { display: none; }

.fc-perfil-topo { display: flex; align-items: center; gap: 12px; }
.fc-perfil-foto {
  width: 64px; height: 64px; flex: none; border-radius: 50%;
  overflow: hidden; background: var(--fc-surface);
}
.fc-perfil-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fc-perfil-dados { min-width: 0; }
.fc-perfil-nome { font-size: 14.5px; font-weight: 640; color: var(--fc-ink); }
/* Dentro da caixa o @ e o dado principal, e o unico lugar onde ele aparece:
   ganha o dourado que era da contagem. */
.fc-perfil .fc-arroba { color: var(--fc-accent); font-size: 14px; margin-top: 2px; }
.fc-perfil .fc-tema { font-size: 12.5px; margin-top: 3px; white-space: normal; }
.fc-perfil .fc-contagem { margin-top: 10px; }
/* Dentro da caixa a posicao deita: numero e legenda lado a lado, alinhados a
   esquerda com o resto do texto, logo abaixo da contagem de indicacoes. */
.fc-perfil .fc-posicao {
  flex-direction: row; align-items: baseline; justify-content: flex-start;
  gap: 5px; margin-top: 3px;
}
.fc-perfil .fc-posicao i { opacity: .9; }
.fc-perfil .fc-recomendacao { margin-top: 8px; }
.fc-perfil-aviso {
  margin-top: 10px; padding-top: 9px; border-top: 1px solid var(--fc-border);
  /* 12px e o piso de legibilidade no celular (ver mobile.css). Este aviso e a
     unica explicacao de por que a lista se renova ao fechar: ilegivel, ele
     transforma a regra da casa em comportamento estranho. */
  color: var(--fc-ink-faint); font-size: 12px;
}
.fc-perfil-link {
  display: inline-block; margin-top: 10px;
  color: var(--fc-accent); font-size: 12.5px; text-decoration: underline;
}

.fc-contagem {
  color: var(--fc-accent); font-size: 12px; font-weight: 600; margin-top: 6px;
}

.fc-indicar {
  width: 100%; margin-top: 10px; min-height: 38px; flex: 0 0 auto;
  background: var(--fc-accent); color: #14161b; border: 1px solid transparent;
  border-radius: 9px; padding: 8px 10px;
  font-family: inherit; font-size: 12px; font-weight: 700; letter-spacing: .04em;
  cursor: pointer;
}
.fc-indicar:hover { filter: brightness(1.06); }
/* Ja indicado e o proprio perfil param de gritar: viram estado, nao convite. */
.fc-indicar.fc-feito {
  background: transparent; color: var(--fc-ink-faint);
  border-color: var(--fc-border); cursor: default; font-weight: 600;
}
.fc-indicar:disabled { cursor: default; }

.fc-motivo {
  width: 100%; margin: 14px 0 4px; resize: vertical; min-height: 84px;
  background: var(--fc-bg); border: 1px solid var(--fc-border); border-radius: 10px;
  padding: 12px; color: var(--fc-ink); font-family: inherit; font-size: 15px; line-height: 1.5;
}
.fc-motivo:focus { outline: none; border-color: var(--fc-accent); }
.fc-motivo::placeholder { color: var(--fc-ink-faint); }

/* ---------- cota de indicacoes ---------- */

/* Fica ACIMA da grade, e nao no rodape: e a informacao que muda como a pessoa
   olha os cartoes, entao ela precisa chegar antes deles. */
.fc-cota {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px;
  background: var(--fc-surface); border: 1px solid var(--fc-border);
  border-radius: 11px; padding: 10px 13px; margin-bottom: 14px;
  color: var(--fc-ink-dim); font-size: 13.5px; line-height: 1.45;
}
.fc-cota b { color: var(--fc-ink); font-weight: 640; }
.fc-cota span { color: var(--fc-ink-faint); font-size: 12.5px; }
.fc-cota-cheia { border-color: var(--fc-accent); }
.fc-cota-cheia b { display: block; width: 100%; }

/* ---------- ver mais / portao ---------- */

.fc-mais { margin-top: 26px; text-align: center; }

.fc-ver-mais {
  background: var(--fc-surface); border: 1px solid var(--fc-border);
  border-radius: 10px; color: var(--fc-ink); font-family: inherit;
  font-size: 13.5px; font-weight: 600; letter-spacing: .02em;
  padding: 13px 26px; min-height: 46px; cursor: pointer; width: 100%; max-width: 340px;
}
.fc-ver-mais:hover:not(:disabled) { border-color: var(--fc-ink-faint); }
.fc-ver-mais:disabled { opacity: .55; cursor: default; }

/* O teto de profundidade para quem nao tem conta. Tem a cara de um convite, e
   nao de um erro: a lista nao acabou, e o que falta esta a um cadastro. */
.fc-portao {
  background: var(--fc-surface); border: 1px solid var(--fc-accent);
  border-radius: 14px; padding: 24px 20px; text-align: center;
}
.fc-portao strong { display: block; color: var(--fc-ink); font-size: 17px; font-weight: 640; }
.fc-portao p {
  color: var(--fc-ink-dim); font-size: 14px; margin: 8px auto 16px; max-width: 460px;
}
.fc-portao .fc-cta { display: inline-block; }

.fc-fim { color: var(--fc-ink-faint); font-size: 13.5px; padding: 8px 0 4px; }

/* ---------- paginacao ---------- */

.fc-paginacao {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  margin-top: 26px; flex-wrap: wrap;
}
.fc-paginacao button {
  background: var(--fc-surface); border: 1px solid var(--fc-border); border-radius: 9px;
  color: var(--fc-ink); font-family: inherit; font-size: 13.5px; cursor: pointer;
  min-height: 40px; padding: 8px 14px;
}
.fc-paginacao button:hover:not(:disabled) { border-color: var(--fc-ink-faint); }
.fc-paginacao button:disabled { opacity: .4; cursor: default; }
.fc-paginacao .fc-atual { color: var(--fc-ink-dim); font-size: 13.5px; padding: 0 6px; }

/* ---------- estados ---------- */

.fc-espera, .fc-vazio, .fc-erro {
  text-align: center; color: var(--fc-ink-faint); font-size: 14.5px; padding: 50px 20px;
}
.fc-vazio strong {
  display: block; color: var(--fc-ink); font-size: 17px; margin-bottom: 6px; font-weight: 620;
}
.fc-erro button {
  display: block; margin: 14px auto 0; background: var(--fc-surface);
  border: 1px solid var(--fc-border); border-radius: 9px; color: var(--fc-ink);
  font-family: inherit; font-size: 13.5px; padding: 9px 16px; cursor: pointer; min-height: 40px;
}

.fc-esqueleto .fc-cartao { pointer-events: none; }
.fc-esqueleto .fc-retrato, .fc-esqueleto .fc-linha {
  background: linear-gradient(90deg, var(--fc-surface-2), #232833, var(--fc-surface-2));
  background-size: 200% 100%; animation: fc-brilho 1.3s linear infinite;
}
.fc-esqueleto .fc-linha { height: 11px; border-radius: 5px; margin: 6px auto 0; }
.fc-esqueleto .fc-linha.fc-curta { width: 55%; }
/* O esqueleto imita a listagem do gratuito, que e o que quase sempre chega:
   um esqueleto de cartao quadrado viraria um salto de layout no primeiro
   render. */
.fc-esqueleto .fc-cartao.fc-p .fc-linha { margin: 0; width: 140px; }
.fc-esqueleto .fc-cartao.fc-p .fc-linha.fc-curta { width: 80px; }
@keyframes fc-brilho { to { background-position: -200% 0; } }

/* ---------- modal ---------- */

.fc-modal {
  position: fixed; inset: 0; z-index: 60; background: rgba(8, 9, 11, .82);
  display: flex; align-items: center; justify-content: center; padding: 22px;
}
.fc-modal .fc-caixa {
  background: var(--fc-surface); border: 1px solid var(--fc-border); border-radius: 16px;
  padding: 26px 24px; max-width: 420px; width: 100%;
}
.fc-modal h2 {
  font-size: 21px; letter-spacing: -0.02em; font-weight: 660;
  color: var(--fc-ink); text-transform: none; margin: 0;
}
.fc-modal p { color: var(--fc-ink-dim); font-size: 14.5px; margin-top: 10px; }
.fc-modal .fc-cta {
  display: block; text-align: center; background: var(--fc-accent); color: #14161b;
  border-radius: 10px; padding: 13px 18px; font-weight: 640; font-size: 14.5px;
  text-decoration: none; margin-top: 20px; min-height: 48px;
}
/* Botao e link usam a mesma classe: o modal alterna entre "dar meu ponto"
   (botao, faz uma chamada) e "criar conta" (link, sai da pagina). */
.fc-modal button.fc-cta {
  width: 100%; border: none; font-family: inherit; cursor: pointer;
}
.fc-modal button.fc-cta:disabled { opacity: .55; cursor: default; }

.fc-modal .fc-barra {
  margin-top: 16px; height: 8px; border-radius: 999px;
  background: var(--fc-border); overflow: hidden;
}
.fc-modal .fc-barra span {
  display: block; height: 100%; border-radius: 999px; background: var(--fc-accent);
}
.fc-modal .fc-progresso {
  margin-top: 8px; font-size: 13px; color: var(--fc-ink-faint);
  letter-spacing: .02em;
}
.fc-modal .fc-secundario { text-align: center; margin-top: 12px; font-size: 13.5px; }
.fc-modal .fc-secundario a { color: var(--fc-ink-dim); }
.fc-modal .fc-aviso-modal {
  margin-top: 12px; font-size: 13.5px; color: var(--fc-accent); text-align: center;
  min-height: 18px;
}
.fc-modal .fc-aviso-modal.fc-erro-texto { color: #ff8f8f; }

.fc-modal .fc-email { text-align: center; margin-top: 10px; font-size: 13px; }
.fc-modal .fc-email a { color: var(--fc-accent); text-decoration: none; }
.fc-modal .fc-temporario {
  color: var(--fc-ink-faint); font-size: 12px; margin-top: 12px; text-align: center;
}
.fc-modal .fc-temporario a { color: var(--fc-ink-faint); }
.fc-modal .fc-fechar {
  display: block; margin: 14px auto 0; background: none; border: none;
  color: var(--fc-ink-faint); font-family: inherit; font-size: 13.5px;
  cursor: pointer; min-height: 36px;
}

/* ---------- pagina publica ---------- */

body.fc-pagina {
  background: var(--fc-bg, #0c0d10); color: #e8eaf0; margin: 0;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 15px; line-height: 1.55; -webkit-font-smoothing: antialiased;
}
body.fc-pagina * { box-sizing: border-box; }
.fc-pagina .fc-topo { max-width: 1080px; margin: 0 auto; padding: 22px 20px 0; }
.fc-pagina .fc-voltar {
  /* inline-flex e 44px: era o unico jeito de voltar do feed, com 30px de altura
     e no canto superior, que e a area mais dificil de acertar com o polegar. */
  display: inline-flex; align-items: center; color: #6b7484; font-size: 13.5px;
  text-decoration: none; margin-bottom: 16px; min-height: 44px;
}
.fc-pagina .fc-voltar:hover { color: #e8eaf0; }
.fc-pagina h1 { font-size: 27px; letter-spacing: -0.03em; font-weight: 690; margin: 0; }
.fc-pagina .fc-lead { color: #9aa3b2; font-size: 14.5px; margin: 5px 0 0; max-width: 560px; }
.fc-pagina .fc { max-width: 1080px; margin: 0 auto; padding: 14px 20px 60px; }
/* O convite das redes mora fora do .fc, porque o widget do feed reescreve o
   proprio miolo a cada troca de aba e levaria o bloco junto. Aqui ele so
   repete a moldura da pagina para nao sangrar de ponta a ponta. */
/* O convite subiu para antes da lista: o respiro de 60px que fechava a pagina
   viraria um buraco entre ele e o primeiro criador. O bloco ja traz margem
   propria de 24px em cima e embaixo. */
.fc-pagina .fc-redes { max-width: 1080px; margin: 0 auto; padding: 0 20px; }

@media (prefers-reduced-motion: reduce) {
  .fc *, .fc-modal { animation: none !important; transition: none !important; }
}