/* ==========================================================================
   CIUTEK - Painel de conta (Velvet Nexus)
   Ordem: foto / nome / profissao / biografia / link / botoes
          / destaques / banner / grade de publicacoes
   Grade: 3 colunas no celular, 5 no computador.
   ========================================================================== */

:root{
  --ck-conta-largura:975px;
  --ck-grade-vao:3px;
  --ck-destaque-tam:74px;
}

/* --------------------------------------------------------------------------
   1. Enquanto o painel novo esta sendo montado, o antigo nao pisca na tela.
   Se a API falhar, a classe e removida e o perfil original volta inteiro.
   -------------------------------------------------------------------------- */
body.ck-perfil-novo .profile-container .card.hovercard{ visibility:hidden; }
body.ck-perfil-novo.ck-perfil-pronto .profile-container .card.hovercard{ visibility:visible; }

/* --------------------------------------------------------------------------
   2. Sem capa no fundo (pedido do projeto)
   -------------------------------------------------------------------------- */
.ctk-app .ck-cartao-antigo .cardheader.user-cover,
.ctk-app .ck-cartao-antigo .problackback,
.ctk-app .ck-cartao-antigo .user-cover-reposition-container,
.ctk-app .ck-cartao-antigo .user-cover-reposition-w,
.ctk-app .ck-cartao-antigo .pic-info-cont{
  display:none !important;
}
.ctk-app .ck-cartao-antigo{
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  margin:0 !important;
  padding:0 !important;
  min-height:0 !important;
  height:0 !important;
  overflow:hidden;
}

/* --------------------------------------------------------------------------
   3. Cabecalho do painel
   -------------------------------------------------------------------------- */
.ctk-app .ck-conta{
  width:100%;
  max-width:var(--ck-conta-largura);
  margin:0 auto var(--ck-e-6, 24px);
  padding:var(--ck-e-6, 24px) var(--ck-e-4, 16px) 0;
  box-sizing:border-box;
}

.ctk-app .ck-conta__topo{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap:var(--ck-e-4, 16px);
}

.ctk-app .ck-conta__foto{
  flex:0 0 auto;
  line-height:0;
}
.ctk-app .ck-conta__foto .user-avatar,
.ctk-app .ck-conta__foto .ck-conta__foto-simples{
  width:104px !important;
  height:104px !important;
  border-radius:999px;
  overflow:visible;
  position:relative;
}
.ctk-app .ck-conta__foto .user-avatar img,
.ctk-app .ck-conta__foto .ck-conta__foto-simples{
  width:104px !important;
  height:104px !important;
  border-radius:999px;
  object-fit:cover;
  display:block;
}

.ctk-app .ck-conta__corpo{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:var(--ck-e-2, 8px);
  width:100%;
  min-width:0;
}

.ctk-app .ck-conta__nome{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  margin:0;
  font-family:var(--ck-fonte-titulo, inherit);
  font-size:var(--ck-t-titulo, 22px);
  font-weight:700;
  line-height:1.2;
  color:var(--ck-texto, inherit);
  flex-wrap:wrap;
}
.ctk-app .ck-conta__nome a{
  font-size:inherit !important;
  font-weight:inherit !important;
  color:inherit !important;
}

.ctk-app .ck-conta__usuario{
  margin:0;
  font-size:14px;
  color:var(--ck-texto-fraco, #8b8b8b);
}

.ctk-app .ck-conta__profissao{
  margin:0;
  font-size:14px;
  font-weight:600;
  letter-spacing:.01em;
  color:var(--ck-roxo-300, #b79cf5);
}

.ctk-app .ck-conta__bio{
  margin:0;
  max-width:44ch;
  font-size:14px;
  line-height:1.5;
  color:var(--ck-texto, inherit);
  white-space:pre-line;
  overflow-wrap:anywhere;
}

.ctk-app .ck-conta__link{
  font-size:14px;
  font-weight:600;
  color:var(--ck-roxo-400, #a07ef0);
  text-decoration:none;
  overflow-wrap:anywhere;
}
.ctk-app .ck-conta__link:hover{ text-decoration:underline; }

/* numeros */
.ctk-app .ck-conta__numeros{
  display:flex;
  gap:var(--ck-e-5, 20px);
  margin-top:var(--ck-e-1, 4px);
  flex-wrap:wrap;
  justify-content:center;
}
.ctk-app .ck-conta__numero{
  display:flex;
  align-items:baseline;
  gap:5px;
  font-size:14px;
  color:var(--ck-texto-fraco, #8b8b8b);
}
.ctk-app .ck-conta__numero b{
  font-size:15px;
  font-weight:700;
  color:var(--ck-texto, inherit);
}
.ctk-app .ck-conta__numero i{ font-style:normal; }

/* botoes de acao */
.ctk-app .ck-conta__acoes{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:var(--ck-e-2, 8px);
  flex-wrap:wrap;
  width:100%;
  margin-top:var(--ck-e-2, 8px);
}
.ctk-app .ck-conta__acoes .options-buttons{
  display:flex;
  align-items:center;
  gap:var(--ck-e-2, 8px);
  flex-wrap:wrap;
  justify-content:center;
  float:none !important;
  width:auto !important;
  margin:0 !important;
}
.ctk-app .ck-conta__acoes .btn-glossy{
  display:inline-flex !important;
  height:auto !important;
  margin:0 !important;
}
.ctk-app .ck-conta__acoes .btn,
.ctk-app .ck-conta__editar{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:36px;
  padding:0 16px;
  border-radius:var(--ck-raio-2, 12px);
  font-size:14px;
  font-weight:600;
  text-decoration:none;
  white-space:nowrap;
}
.ctk-app .ck-conta__editar{
  background:var(--ck-superficie-2, rgba(255,255,255,.08));
  color:var(--ck-texto, inherit);
  border:1px solid var(--ck-borda, rgba(255,255,255,.14));
}
.ctk-app .ck-conta__editar:hover{
  background:var(--ck-superficie-3, rgba(255,255,255,.14));
  color:var(--ck-texto, inherit);
}

/* --------------------------------------------------------------------------
   4. Destaques
   -------------------------------------------------------------------------- */
.ctk-app .ck-conta__destaques{
  margin-top:var(--ck-e-6, 24px);
  width:100%;
}
.ctk-app .ck-destaques{
  display:flex;
  gap:var(--ck-e-4, 16px);
  overflow-x:auto;
  padding:var(--ck-e-1, 4px) 0 var(--ck-e-2, 8px);
  scrollbar-width:thin;
  -webkit-overflow-scrolling:touch;
}
.ctk-app .ck-destaque{
  flex:0 0 auto;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
  width:calc(var(--ck-destaque-tam) + 8px);
  text-decoration:none;
  color:inherit;
}
.ctk-app .ck-destaque__anel{
  width:var(--ck-destaque-tam);
  height:var(--ck-destaque-tam);
  border-radius:999px;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  background:var(--ck-superficie-2, rgba(255,255,255,.06));
  box-shadow:
    0 0 0 2px var(--ck-fundo, #0d0a16),
    0 0 0 4px var(--ck-borda-forte, rgba(255,255,255,.22));
}
.ctk-app .ck-destaque:hover .ck-destaque__anel{
  box-shadow:
    0 0 0 2px var(--ck-fundo, #0d0a16),
    0 0 0 4px var(--ck-roxo-500, #7c4dff);
}
.ctk-app .ck-destaque__capa{
  width:100%; height:100%; object-fit:cover; display:block;
}
.ctk-app .ck-destaque__vazio,
.ctk-app .ck-destaque__mais{
  font-size:24px;
  font-weight:600;
  color:var(--ck-texto-fraco, #8b8b8b);
  line-height:1;
}
.ctk-app .ck-destaque__anel--novo{
  border:1px dashed var(--ck-borda-forte, rgba(255,255,255,.22));
  box-shadow:none;
}
.ctk-app .ck-destaque__titulo{
  font-size:12px;
  line-height:1.3;
  max-width:100%;
  text-align:center;
  color:var(--ck-texto-fraco, #8b8b8b);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

/* --------------------------------------------------------------------------
   5. Banner (nao e publicacao)
   -------------------------------------------------------------------------- */
.ctk-app .ck-banner{
  position:relative;
  display:block;
  margin-top:var(--ck-e-5, 20px);
  border-radius:var(--ck-raio-3, 16px);
  overflow:hidden;
  text-decoration:none;
  color:#fff;
  background:var(--ck-superficie-2, rgba(255,255,255,.06));
  aspect-ratio:3 / 1;
}
.ctk-app .ck-banner__imagem{
  width:100%; height:100%; object-fit:cover; display:block;
}
.ctk-app .ck-banner__legenda{
  position:absolute; left:0; right:0; bottom:0;
  display:flex; flex-direction:column; gap:2px;
  padding:var(--ck-e-4, 16px);
  background:linear-gradient(to top, rgba(6,4,12,.86), rgba(6,4,12,0));
}
.ctk-app .ck-banner__titulo{ font-size:16px; font-weight:700; }
.ctk-app .ck-banner__texto{ font-size:13px; opacity:.9; }

/* --------------------------------------------------------------------------
   6. Grade de publicacoes
   -------------------------------------------------------------------------- */
/* na aba principal, a coluna lateral e a caixa de publicar saem do caminho
   para a grade poder usar a largura inteira */
body.ck-perfil-grade .wo_user_profile .col-md-4{ display:none !important; }
body.ck-perfil-grade .wo_user_profile .col-md-8{
  width:100% !important;
  float:none !important;
  max-width:var(--ck-conta-largura);
  margin:0 auto !important;
  padding-left:0 !important;
  padding-right:0 !important;
}
body.ck-perfil-grade .wo_user_profile .col-md-8 > form.publisher-box,
body.ck-perfil-grade .wo_user_profile .col-md-8 > .list-group.filterby,
body.ck-perfil-grade #posts_load,
body.ck-perfil-grade .posts_load{
  display:none !important;
}

.ctk-app .ck-grade{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:var(--ck-grade-vao);
  width:100%;
  padding:0 var(--ck-e-1, 4px);
  box-sizing:border-box;
}
.ctk-app .ck-grade__celula{
  position:relative;
  display:block;
  aspect-ratio:1 / 1;
  overflow:hidden;
  background:var(--ck-superficie-2, rgba(255,255,255,.06));
  border-radius:2px;
  text-decoration:none;
  color:var(--ck-texto, inherit);
}
.ctk-app .ck-grade__imagem{
  width:100%; height:100%; object-fit:cover; display:block;
  transition:transform var(--ck-tempo-2, 160ms) ease;
}
.ctk-app .ck-grade__celula:hover .ck-grade__imagem{ transform:scale(1.03); }
.ctk-app .ck-grade__texto{
  display:-webkit-box;
  -webkit-line-clamp:5;
  -webkit-box-orient:vertical;
  overflow:hidden;
  padding:10px;
  font-size:12px;
  line-height:1.4;
  color:var(--ck-texto-fraco, #8b8b8b);
}
.ctk-app .ck-grade__marca{
  position:absolute; top:6px; right:6px;
  width:16px; height:16px; border-radius:3px;
  background:rgba(6,4,12,.55);
}
.ctk-app .ck-grade__marca--video{
  clip-path:polygon(20% 12%, 20% 88%, 88% 50%);
  background:#fff;
  width:12px; height:12px;
}
.ctk-app .ck-grade__marca--album{
  border:2px solid #fff;
  background:transparent;
  box-shadow:3px -3px 0 -1px rgba(255,255,255,.55);
}
.ctk-app .ck-grade .ctk-esqueleto,
.ctk-app .ck-grade__celula.ck-esqueleto{
  aspect-ratio:1 / 1;
  background:var(--ck-superficie-2, rgba(255,255,255,.06));
  animation:ck-pulsa 1.2s ease-in-out infinite;
}
@keyframes ck-pulsa{ 0%,100%{opacity:.55} 50%{opacity:.95} }
@media (prefers-reduced-motion: reduce){
  .ctk-app .ck-grade__celula.ck-esqueleto{ animation:none; }
}

.ctk-app .ck-grade-vazia{
  text-align:center;
  padding:var(--ck-e-9, 48px) var(--ck-e-4, 16px);
}
.ctk-app .ck-grade-vazia__titulo{
  margin:0 0 6px; font-size:18px; font-weight:700;
  color:var(--ck-texto, inherit);
}
.ctk-app .ck-grade-vazia__texto{
  margin:0; font-size:14px; color:var(--ck-texto-fraco, #8b8b8b);
}

/* --------------------------------------------------------------------------
   7. Abas do perfil
   -------------------------------------------------------------------------- */
body.ck-perfil-novo .profile-container .user-bottom-nav{
  max-width:var(--ck-conta-largura);
  margin:0 auto !important;
  width:100% !important;
  float:none !important;
}

/* --------------------------------------------------------------------------
   8. Computador: foto maior e grade de 5
   -------------------------------------------------------------------------- */
@media (min-width:768px){
  :root{ --ck-destaque-tam:88px; --ck-grade-vao:4px; }

  .ctk-app .ck-grade{ grid-template-columns:repeat(5, 1fr); }

  .ctk-app .ck-conta__foto .user-avatar,
  .ctk-app .ck-conta__foto .user-avatar img,
  .ctk-app .ck-conta__foto .ck-conta__foto-simples{
    width:132px !important;
    height:132px !important;
  }
  .ctk-app .ck-conta__nome{ font-size:26px; }
  .ctk-app .ck-banner{ aspect-ratio:4 / 1; }
}

/* --------------------------------------------------------------------------
   9. Ajustes finos
   -------------------------------------------------------------------------- */
/* faixa de destaques centralizada quando cabe; "safe" evita cortar o comeco
   quando ela precisa rolar */
.ctk-app .ck-destaques{ justify-content:center; }
.ctk-app .ck-destaques{ justify-content:safe center; }

/* selo PRO: era um azul fora da identidade e herdava o tamanho do nome */
.ctk-app .ck-conta__nome .badge-pro{
  display:inline-flex; align-items:center;
  background:var(--ck-roxo-500, #7c4dff) !important;
  border-radius:999px; padding:3px 9px; line-height:1;
}
.ctk-app .ck-conta__nome .badge-pro,
.ctk-app .ck-conta__nome .badge-pro a{
  font-size:11px !important; font-weight:700 !important;
  letter-spacing:.06em; color:#fff !important; text-decoration:none;
}

/* a vitrine acompanha a largura do painel */
body.ck-perfil-novo .ctk-vitrine{
  max-width:var(--ck-conta-largura);
  width:100% !important;
  float:none !important;
  margin-left:auto !important;
  margin-right:auto !important;
}

/* --------------------------------------------------------------------------
   10. Celular estreito: os tres numeros precisam caber na mesma linha
   -------------------------------------------------------------------------- */
@media (max-width:420px){
  .ctk-app .ck-conta__numeros{ gap:14px; }
  .ctk-app .ck-conta__numero{ font-size:13px; }
  .ctk-app .ck-conta__numero b{ font-size:14px; }
}

/* --------------------------------------------------------------------------
   11. Botoes de acao
   O tema posiciona .options-buttons com position:absolute, ancorado no
   cartao antigo. Dentro do painel novo ele precisa voltar ao fluxo normal,
   senao o botao "Seguir" escapa para o canto da tela.
   -------------------------------------------------------------------------- */
.ctk-app .ck-conta__acoes .options-buttons{
  position:static !important;
  top:auto !important; right:auto !important;
  bottom:auto !important; left:auto !important;
  transform:none !important;
}
.ctk-app .ck-conta__acoes .options-buttons > *{
  position:relative;
}

/* --------------------------------------------------------------------------
   12. Espaco entre o painel e as abas
   A linha das abas tem margin-top negativo no tema, porque antes ela subia
   por cima da capa. Sem capa, esse recuo faz os botoes encostarem nas abas.
   -------------------------------------------------------------------------- */
body.ck-perfil-novo .profile-container > .row{
  margin-top:0 !important;
}
.ctk-app .ck-conta{
  margin-bottom:var(--ck-e-7, 32px);
}

/* ==========================================================================
   13. Vitrine em tres quadrados
   Mesma linguagem dos Destaques: moldura arredondada, foto cobrindo o
   espaco e o texto embaixo, para continuar legivel nas telas estreitas.
   ========================================================================== */
.ctk-app .ctk-vitrine{
  width:100%;
  max-width:var(--ck-conta-largura);
  margin:0 auto var(--ck-e-6, 24px);
  padding:0 var(--ck-e-4, 16px);
  box-sizing:border-box;
  background:none !important;
  border:0 !important;
  box-shadow:none !important;
}
.ctk-app .ctk-vitrine__topo{
  display:flex; align-items:center; justify-content:space-between;
  gap:var(--ck-e-3, 12px); margin-bottom:var(--ck-e-3, 12px);
}
.ctk-app .ctk-vitrine__titulo{
  margin:0; font-size:15px; font-weight:700; letter-spacing:.01em;
  color:var(--ck-texto, inherit);
}
.ctk-app .ctk-vitrine__editar{
  font-size:13px; font-weight:600; text-decoration:none;
  color:var(--ck-roxo-300, #b79cf5);
  padding:6px 12px; border-radius:999px;
  background:var(--ck-superficie-2, rgba(255,255,255,.06));
}
.ctk-app .ctk-vitrine__editar:hover{
  background:var(--ck-superficie-3, rgba(255,255,255,.12));
  color:var(--ck-roxo-300, #b79cf5);
}

.ctk-app .ctk-vitrine__lista{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:var(--ck-e-3, 12px);
  align-items:start;
}
.ctk-app .ctk-vitrine__item{
  display:flex; flex-direction:column; gap:8px;
  text-decoration:none; color:inherit;
  min-width:0;
}
.ctk-app .ctk-vitrine__quadro{
  position:relative; display:flex;
  align-items:center; justify-content:center;
  aspect-ratio:1 / 1; width:100%;
  border-radius:22px; overflow:hidden;
  background:var(--ck-superficie-2, rgba(255,255,255,.06));
  box-shadow:
    0 0 0 1px var(--ck-borda, rgba(255,255,255,.12)),
    0 10px 24px -18px rgba(0,0,0,.9);
  transition:transform var(--ck-tempo-2, 160ms) ease,
             box-shadow var(--ck-tempo-2, 160ms) ease;
}
.ctk-app a.ctk-vitrine__item:hover .ctk-vitrine__quadro{
  transform:translateY(-2px);
  box-shadow:
    0 0 0 1px var(--ck-roxo-500, #7c4dff),
    0 16px 30px -18px rgba(0,0,0,.95);
}
.ctk-app .ctk-vitrine__foto{
  position:absolute; inset:0;
  width:100%; height:100%; object-fit:cover; display:block;
}
.ctk-app .ctk-vitrine__inicial{
  font-size:34px; font-weight:700; line-height:1;
  color:var(--ck-roxo-300, #b79cf5);
}
.ctk-app .ctk-vitrine__marca{
  font-size:30px; font-weight:400; line-height:1;
  color:var(--ck-texto-fraco, #8b8b8b);
}
.ctk-app .ctk-vitrine__item--vazio .ctk-vitrine__quadro{
  background:transparent;
  box-shadow:none;
  border:1px dashed var(--ck-borda-forte, rgba(255,255,255,.22));
}
.ctk-app .ctk-vitrine__corpo{
  display:flex; flex-direction:column; gap:2px;
  padding:0 2px; min-width:0;
}
.ctk-app .ctk-vitrine__nome{
  font-size:13px; font-weight:600; line-height:1.3;
  color:var(--ck-texto, inherit);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.ctk-app .ctk-vitrine__texto{
  font-size:12px; line-height:1.35;
  color:var(--ck-texto-fraco, #8b8b8b);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden;
}

@media (min-width:768px){
  .ctk-app .ctk-vitrine__lista{ gap:var(--ck-e-4, 16px); }
  .ctk-app .ctk-vitrine__quadro{ border-radius:26px; }
  .ctk-app .ctk-vitrine__nome{ font-size:15px; }
  .ctk-app .ctk-vitrine__texto{ font-size:13px; }
  .ctk-app .ctk-vitrine__titulo{ font-size:17px; }
}

/* ==========================================================================
   14. Linha de acoes: Seguir, Enviar mensagem e Site
   ========================================================================== */
.ctk-app .ck-conta__acoes{
  max-width:420px;
  margin-left:auto; margin-right:auto;
}
.ctk-app .ck-conta__acoes .options-buttons,
.ctk-app .ck-conta__acoes{
  row-gap:var(--ck-e-2, 8px);
}
.ctk-app .ck-conta__site{
  display:inline-flex; align-items:center; gap:7px;
  min-height:36px; padding:0 16px;
  border-radius:var(--ck-raio-2, 12px);
  font-size:14px; font-weight:600; text-decoration:none;
  background:var(--ck-superficie-2, rgba(255,255,255,.08));
  color:var(--ck-texto, inherit);
  border:1px solid var(--ck-borda, rgba(255,255,255,.14));
  max-width:100%;
}
.ctk-app .ck-conta__site:hover{
  background:var(--ck-superficie-3, rgba(255,255,255,.14));
  border-color:var(--ck-roxo-500, #7c4dff);
  color:var(--ck-texto, inherit);
}
.ctk-app .ck-conta__site svg{ flex:0 0 auto; }
.ctk-app .ck-conta__site b{
  font-weight:600; overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap;
}

/* ==========================================================================
   15. Numeros clicaveis
   ========================================================================== */
.ctk-app a.ck-conta__numero{
  text-decoration:none;
  border-radius:var(--ck-raio-2, 12px);
  padding:6px 8px; margin:-6px -2px;
  transition:background var(--ck-tempo-1, 100ms) ease;
}
.ctk-app a.ck-conta__numero:hover{
  background:var(--ck-superficie-2, rgba(255,255,255,.07));
  color:var(--ck-texto-fraco, #8b8b8b);
}
.ctk-app a.ck-conta__numero:hover b{ color:var(--ck-roxo-300, #b79cf5); }

/* ==========================================================================
   16. Biografia com "ver mais"
   ========================================================================== */
.ctk-app .ck-conta__bio--dobravel{
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical;
  overflow:hidden;
}
.ctk-app .ck-conta__bio--aberta{
  display:block; -webkit-line-clamp:none;
}
.ctk-app .ck-conta__maisbio{
  background:none; border:0; padding:2px 4px; margin:0;
  font:inherit; font-size:13px; font-weight:600; cursor:pointer;
  color:var(--ck-roxo-300, #b79cf5);
  border-radius:8px;
}
.ctk-app .ck-conta__maisbio:hover{ text-decoration:underline; }

/* ==========================================================================
   17. Celular: alvos maiores, abas que acompanham a rolagem
   ========================================================================== */
@media (max-width:767px){
  .ctk-app .ck-conta{ padding-top:var(--ck-e-5, 20px); }

  /* botoes ocupam a largura util e ficam faceis de acertar com o polegar */
  .ctk-app .ck-conta__acoes{ max-width:none; padding:0 4px; }
  .ctk-app .ck-conta__acoes .options-buttons{
    width:100% !important;
    display:grid !important;
    grid-template-columns:1fr 1fr auto;
    gap:8px;
  }
  .ctk-app .ck-conta__acoes .options-buttons > .btn-glossy{
    width:100% !important;
    min-width:0;
  }
  .ctk-app .ck-conta__acoes .options-buttons .btn,
  .ctk-app .ck-conta__acoes .options-buttons > .btn-glossy > *{
    width:100%;
    min-height:42px;
    justify-content:center;
  }
  .ctk-app .ck-conta__editar,
  .ctk-app .ck-conta__site{
    flex:1 1 46%;
    min-height:42px;
    justify-content:center;
  }

  /* as abas acompanham a rolagem, logo abaixo do cabecalho */
  body.ck-perfil-novo .profile-container .user-bottom-nav{
    position:sticky;
    top:var(--ck-cabecalho-celular, 48px);
    z-index:var(--ck-z-superficie, 100);
    background:var(--ck-vidro-fundo, rgba(16,12,28,.94));
    backdrop-filter:blur(var(--ck-desfoque, 18px));
    -webkit-backdrop-filter:blur(var(--ck-desfoque, 18px));
  }

  .ctk-app .ck-destaques{
    scroll-snap-type:x proximity;
    padding-left:var(--ck-e-1, 4px);
    padding-right:var(--ck-e-1, 4px);
  }
  .ctk-app .ck-destaque{ scroll-snap-align:center; }

  .ctk-app .ctk-vitrine__lista{ gap:10px; }
  .ctk-app .ctk-vitrine__quadro{ border-radius:18px; }

  /* a grade encosta nas bordas, como manda o formato de mosaico */
  .ctk-app .ck-grade{ padding:0; }
}

/* ==========================================================================
   18. Proporcao da vitrine no computador
   Tres quadrados na largura inteira ficavam grandes demais e roubavam a
   atencao da grade de publicacoes. A faixa e limitada e centralizada.
   ========================================================================== */
@media (min-width:768px){
  .ctk-app .ctk-vitrine__lista{
    max-width:690px;
    margin-left:auto; margin-right:auto;
  }
  .ctk-app .ctk-vitrine__topo{
    max-width:690px;
    margin-left:auto; margin-right:auto;
  }
}

/* ==========================================================================
   19. Limpeza do cartao antigo da vitrine
   A versao anterior desenhava cada espaco como cartao: moldura, fundo,
   altura minima de 180px e overflow escondido. Isso agora cercava tambem
   o texto e cortava a descricao. A moldura passou a ser so do quadrado.
   ========================================================================== */
.ctk-app .ctk-vitrine__item{
  background:none !important;
  border:0 !important;
  box-shadow:none !important;
  padding:0 !important;
  min-height:0 !important;
  height:auto !important;
  overflow:visible !important;
}

/* ==========================================================================
   20. Celular: linha de botoes em duas colunas e numeros na mesma linha
   ========================================================================== */
@media (max-width:767px){
  .ctk-app .ck-conta__acoes{
    display:flex; flex-wrap:wrap; gap:8px;
    align-items:stretch;
  }
  .ctk-app .ck-conta__acoes > *{
    flex:1 1 calc(50% - 4px);
    min-width:0;
    margin:0 !important;
  }
  /* quando ha Seguir + Mensagem + mais, o bloco ocupa a linha inteira */
  .ctk-app .ck-conta__acoes .options-buttons:has(> :nth-child(2)){
    flex-basis:100%;
  }
}

@media (max-width:420px){
  /* o toque continua confortavel pelo ::after invisivel de 44px,
     entao o espacamento visivel pode encolher e caber numa linha so */
  .ctk-app a.ck-conta__numero{ padding:4px 2px; margin:-4px 0; }
  .ctk-app .ck-conta__numeros{ gap:12px; flex-wrap:nowrap; }
  .ctk-app .ck-conta__numero i{ white-space:nowrap; }
}

/* ==========================================================================
   21. Celular: os botoes do sistema ocupam a linha por igual
   O tema alinha .options-buttons a direita. Sozinho na linha, o botao
   "Editar" ficava encostado na borda; com Seguir + Mensagem, os dois
   precisam dividir a largura em partes iguais.
   ========================================================================== */
@media (max-width:767px){
  .ctk-app .ck-conta__acoes .options-buttons{
    display:flex !important;
    justify-content:center !important;
    align-items:stretch;
    gap:8px;
    grid-template-columns:none !important;
    text-align:center;
  }
  .ctk-app .ck-conta__acoes .options-buttons > *{
    flex:1 1 0 !important;
    min-width:0;
    float:none !important;
  }
  /* o menu de tres pontos nao precisa de metade da tela */
  .ctk-app .ck-conta__acoes .options-buttons > .dropdown{
    flex:0 0 52px !important;
  }
}

/* ==========================================================================
   22. Espacos vazios de botao
   No proprio perfil o tema ainda imprime os invólucros de "Seguir" e
   "Enviar mensagem", so que vazios. Eles ocupavam duas das tres colunas e
   empurravam o botao "Editar" para a beirada. Some quem nao tem conteudo.
   ========================================================================== */
.ctk-app .ck-conta__acoes .options-buttons > *:not(:has(> *)){
  display:none !important;
}

/* ==========================================================================
   23. Perfil sem a barra de abas
   A faixa com Publicacoes / Comunidades / Curtiu / Seguindo / Seguidores /
   Fotos / Videos / Carretel saiu do perfil. O acesso a essas secoes continua:
   os numeros levam a Seguidores e Seguindo, e o botao "Mais" abre o resto.
   ========================================================================== */
body.ck-perfil-novo .profile-container .user-bottom-nav,
body.ck-perfil-novo .profile-container > .row{
  display:none !important;
}

/* a conclusao do perfil sai da aba de perfil; ela continua no menu lateral */
body.ck-perfil-novo .profile-completion-bar{
  display:none !important;
}

/* ==========================================================================
   24. Banner fino, no lugar que era da barra de abas
   ========================================================================== */
.ctk-app .ck-banner{
  margin-top:var(--ck-e-6, 24px);
  aspect-ratio:20 / 3;
  min-height:96px;
  max-height:210px;
  border-radius:var(--ck-raio-3, 16px);
}
.ctk-app .ck-banner__imagem{
  object-position:center;
}
.ctk-app .ck-banner__legenda{
  padding:var(--ck-e-3, 12px) var(--ck-e-4, 16px);
}
.ctk-app .ck-banner__titulo{ font-size:15px; }
.ctk-app .ck-banner__texto{ font-size:12.5px; }

@media (min-width:768px){
  .ctk-app .ck-banner{ aspect-ratio:20 / 3; }
  .ctk-app .ck-banner__titulo{ font-size:17px; }
  .ctk-app .ck-banner__texto{ font-size:13.5px; }
}
@media (max-width:767px){
  /* no celular a faixa e recortada pelas laterais para nao virar um fio */
  .ctk-app .ck-banner{
    aspect-ratio:3 / 1;
    min-height:96px;
    max-height:140px;
    border-radius:14px;
  }
}

/* ==========================================================================
   25. Botao "Mais": leva as secoes que estavam na barra de abas
   ========================================================================== */
.ctk-app .ck-conta__mais{
  position:relative;
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  min-height:36px; padding:0 14px;
  border-radius:var(--ck-raio-2, 12px);
  font:inherit; font-size:14px; font-weight:600;
  background:var(--ck-superficie-2, rgba(255,255,255,.08));
  color:var(--ck-texto, inherit);
  border:1px solid var(--ck-borda, rgba(255,255,255,.14));
  cursor:pointer;
}
.ctk-app .ck-conta__mais:hover{
  background:var(--ck-superficie-3, rgba(255,255,255,.14));
  border-color:var(--ck-roxo-500, #7c4dff);
}
.ctk-app .ck-menu-secoes{
  position:absolute; z-index:var(--ck-z-flutuante, 700);
  min-width:190px; padding:6px;
  border-radius:var(--ck-raio-3, 16px);
  background:var(--ck-superficie-1, #171327);
  border:1px solid var(--ck-borda, rgba(255,255,255,.14));
  box-shadow:0 24px 48px -24px rgba(0,0,0,.95);
  list-style:none; margin:0;
}
.ctk-app .ck-menu-secoes a{
  display:block; padding:10px 12px;
  border-radius:10px;
  font-size:14px; text-decoration:none;
  color:var(--ck-texto, inherit);
}
.ctk-app .ck-menu-secoes a:hover{
  background:var(--ck-superficie-2, rgba(255,255,255,.08));
  color:var(--ck-roxo-300, #b79cf5);
}

/* ==========================================================================
   26. Rodape de Sobre / Contato / Privacidade / Idioma
   Fica so para quem ainda nao entrou na conta.
   ========================================================================== */
body.ck-logado .footer-wrapper,
body.ck-logado .footer-powered{
  display:none !important;
}

/* ==========================================================================
   27. Cabecalho: "Criar" na mesma altura e proporcao de "Inicio"
   ========================================================================== */
.ctk-app .header-fixed1000 .navbar-nav > li > a,
.ctk-app .header-fixed1000 .btn-main{
  min-height:34px;
  height:34px;
  display:inline-flex !important;
  align-items:center;
  justify-content:center;
  line-height:1 !important;
  padding:0 14px !important;
  box-sizing:border-box;
}
.ctk-app .header-fixed1000 .btn-main{
  border-radius:999px;
  gap:6px;
}
.ctk-app .header-fixed1000 .navbar-nav > li{
  display:flex;
  align-items:center;
}
.ctk-app .header-fixed1000 .btn-main svg,
.ctk-app .header-fixed1000 .navbar-nav > li > a svg{
  flex:0 0 auto;
  vertical-align:middle;
}

/* ==========================================================================
   28. Aviso de medidas de imagem
   ========================================================================== */
.ck-medida-fundo{
  position:fixed; inset:0; z-index:var(--ck-z-modal, 900);
  display:flex; align-items:center; justify-content:center;
  padding:20px;
  background:rgba(6,4,12,.72);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
}
.ck-medida-caixa{
  width:100%; max-width:420px;
  padding:22px;
  border-radius:20px;
  background:var(--ck-superficie-1, #171327);
  border:1px solid var(--ck-borda, rgba(255,255,255,.14));
  box-shadow:0 30px 70px -30px rgba(0,0,0,.95);
  color:var(--ck-texto, #efecf7);
  font-family:var(--ck-fonte-texto, inherit);
  text-align:left;
}
.ck-medida-caixa h3{
  margin:0 0 8px; font-size:18px; font-weight:700;
}
.ck-medida-caixa p{
  margin:0 0 12px; font-size:14px; line-height:1.5;
  color:var(--ck-texto-fraco, #9b93b4);
}
.ck-medida-lista{
  margin:0 0 16px; padding:12px 14px;
  border-radius:12px;
  background:var(--ck-superficie-2, rgba(255,255,255,.06));
  font-size:13.5px; line-height:1.7;
}
.ck-medida-lista b{ color:var(--ck-texto, #efecf7); }
.ck-medida-caixa button{
  width:100%; min-height:44px;
  border:0; border-radius:12px;
  background:var(--ck-roxo-500, #7c4dff); color:#fff;
  font:inherit; font-size:15px; font-weight:700; cursor:pointer;
}

.ctk-app .ck-conta__maisenvolve{ position:relative; display:inline-flex; }
@media (max-width:767px){
  .ctk-app .ck-conta__maisenvolve{ display:flex; }
  .ctk-app .ck-conta__mais{ width:100%; min-height:42px; }
}

/* ==========================================================================
   29. Largura da linha de acoes
   Com Editar, Destaques e banner, Site e Mais, o limite de 420px jogava o
   ultimo botao para a linha de baixo no computador.
   ========================================================================== */
@media (min-width:768px){
  .ctk-app .ck-conta__acoes{ max-width:620px; }
}

/* ==========================================================================
   30. Telas muito estreitas (320px)
   A linha do perfil herda margens negativas do sistema de grade. Ate 360px
   isso vazava 7px para fora da tela e criava rolagem horizontal.
   ========================================================================== */
@media (max-width:360px){
  body.ck-perfil-novo .row.wo_user_profile{
    margin-left:0 !important;
    margin-right:0 !important;
  }
  .ctk-app .ck-conta,
  .ctk-app .ctk-vitrine{
    padding-left:12px; padding-right:12px;
  }
}


/* ==========================================================================
   O banner estourando o cartao em tela estreita

   O banner tem aspect-ratio e min-height, e nao tinha largura definida. Em
   tela de 320 px o cartao deixa 246 px de espaco: a proporcao pediria 82 px
   de altura, mas o min-height de 96 px vencia - e, com a largura em aberto,
   o navegador devolvia a largura a partir da altura (96 x 3 = 288 px). O
   banner ficava maior que o cartao que o contem e empurrava a pagina para
   o lado.

   Fixando a largura, a proporcao deixa de mandar nela: sobra so o efeito
   sobre a altura, que e o que se queria desde o inicio.
   ========================================================================== */
.ctk-app .ck-banner {
  width: 100%;
  max-width: 100%;
}


/* ==========================================================================
   Os botoes de acao do perfil em tela estreita

   Em 320 px a fileira deixa 246 px, entao cada botao da dupla ficava com
   115 px. "Destaques e banner" precisa de 124 px e esta com white-space:
   nowrap e overflow visivel: o texto nao encolhia nem quebrava, ele
   simplesmente transbordava por cima do botao vizinho.

   A saida nao e apertar mais nem cortar o nome com reticencias - o nome
   inteiro importa. E dar a cada botao uma largura minima abaixo da qual a
   dupla prefere empilhar. A fileira ja tem flex-wrap, entao quando os dois
   nao cabem lado a lado cada um passa a ocupar a linha inteira.
   ========================================================================== */
@media (max-width: 991px) {
  .ctk-app .ck-conta__acoes > * {
    min-width: 132px;
  }
}