/* =========================================================
   nekowalls — tema escuro
   Poppins (interface) + JetBrains Mono (metadados)
   ========================================================= */

:root{
  --bg:        #0B0B12;
  --bg-2:      #10101A;
  --surf:      #15151F;
  --surf-2:    #1C1C29;
  --linha:     rgba(255,255,255,.08);
  --linha-2:   rgba(255,255,255,.14);
  --txt:       #ECECF4;
  --txt-2:     #9494AE;
  --txt-3:     #6B6B84;
  --roxo:      #7C5CFF;
  --roxo-esc:  #5B3CE0;
  --rosa:      #FF4D8D;
  --raio:      14px;
  --raio-p:    9px;
  --sombra:    0 10px 30px rgba(0,0,0,.45);
  --topo-h:    68px;
}

*{ box-sizing:border-box; }

html{ -webkit-text-size-adjust:100%; }

body{
  margin:0;
  background:
    radial-gradient(900px 480px at 12% -8%, rgba(124,92,255,.16), transparent 60%),
    radial-gradient(760px 420px at 92% 0%, rgba(255,77,141,.10), transparent 62%),
    var(--bg);
  background-attachment:fixed;
  color:var(--txt);
  font-family:'Poppins',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-size:15px;
  line-height:1.5;
  min-height:100vh;
}

body.gate-ativo{ overflow:hidden; }

a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }
button{ font-family:inherit; }

.mono{ font-family:'JetBrains Mono',ui-monospace,monospace; font-size:11.5px; letter-spacing:-.2px; }

.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

:focus-visible{ outline:2px solid var(--roxo); outline-offset:3px; border-radius:6px; }

/* ---------- aviso de idade ---------- */

.gate{
  position:fixed; inset:0; z-index:200;
  display:grid; place-items:center; padding:20px;
  background:rgba(6,6,12,.86);
  backdrop-filter:blur(22px); -webkit-backdrop-filter:blur(22px);
}

.gate__caixa{
  width:min(520px,100%);
  background:linear-gradient(180deg,var(--surf-2),var(--surf));
  border:1px solid var(--linha-2);
  border-radius:20px;
  padding:34px 30px 26px;
  text-align:center;
  box-shadow:var(--sombra);
}

.gate__selo{
  display:inline-grid; place-items:center;
  width:54px; height:54px; border-radius:50%;
  font-family:'JetBrains Mono',monospace; font-weight:600; font-size:16px;
  color:#fff; background:linear-gradient(140deg,var(--rosa),var(--roxo));
  box-shadow:0 0 0 8px rgba(124,92,255,.10);
}

.gate__titulo{ font-size:22px; font-weight:600; margin:18px 0 10px; letter-spacing:-.3px; }
.gate__texto{ color:var(--txt-2); font-size:14px; margin:0 0 22px; }
.gate__acoes{ display:grid; gap:10px; }
.gate__sair{ display:inline-block; margin-top:16px; color:var(--txt-3); font-size:13px; }
.gate__sair:hover{ color:var(--txt-2); }
.gate__legal{
  margin:20px 0 0; padding-top:16px; border-top:1px solid var(--linha);
  color:var(--txt-3); font-size:11.5px; line-height:1.6;
}

/* ---------- botões ---------- */

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:12px 20px; border-radius:var(--raio-p);
  font-size:14px; font-weight:500; cursor:pointer;
  border:1px solid transparent; transition:.16s ease;
}
.btn--primario{ background:linear-gradient(135deg,var(--roxo),var(--roxo-esc)); color:#fff; }
.btn--primario:hover{ filter:brightness(1.12); transform:translateY(-1px); }
.btn--fantasma{ background:transparent; border-color:var(--linha-2); color:var(--txt-2); }
.btn--fantasma:hover{ border-color:var(--roxo); color:var(--txt); }
.btn--pequeno{ padding:8px 14px; font-size:13px; }
.btn--bloco{ width:100%; }

.linkish{ background:none; border:0; color:inherit; cursor:pointer; font-size:inherit; padding:0; }

/* ---------- topo ---------- */

.topo{
  position:sticky; top:0; z-index:60;
  background:rgba(11,11,18,.82);
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  border-bottom:1px solid var(--linha);
}

.topo__barra{
  max-width:1400px; margin:0 auto; padding:0 22px;
  height:var(--topo-h);
  display:flex; align-items:center; gap:20px;
}

.marca{ display:flex; align-items:center; gap:10px; flex-shrink:0; }
.marca__icone{ width:30px; height:30px; color:var(--roxo); }
.marca__nome{ font-size:18px; font-weight:600; letter-spacing:-.5px; }
.marca__nome span{ color:var(--roxo); }

.busca{
  flex:1; max-width:560px; position:relative;
  display:flex; align-items:center;
  background:var(--surf); border:1px solid var(--linha);
  border-radius:999px; padding:0 6px 0 42px;
  transition:border-color .16s;
}
.busca:focus-within{ border-color:var(--roxo); }
.busca__lupa{ position:absolute; left:15px; width:17px; height:17px; color:var(--txt-3); }
.busca input{
  flex:1; background:none; border:0; color:var(--txt);
  font-family:inherit; font-size:14px; padding:11px 4px; min-width:0;
}
.busca input::placeholder{ color:var(--txt-3); }
.busca input:focus{ outline:none; }
.busca__enviar{
  background:var(--roxo); color:#fff; border:0; cursor:pointer;
  padding:8px 18px; border-radius:999px; font-size:13px; font-weight:500;
}
.busca__enviar:hover{ background:var(--roxo-esc); }

.topo__acoes{ display:flex; align-items:center; gap:14px; margin-left:auto; }

.chave{
  display:flex; align-items:center; gap:9px;
  background:none; border:0; cursor:pointer; color:var(--txt-2); font-size:13px;
}
.chave__trilho{
  width:38px; height:21px; border-radius:999px;
  background:var(--surf-2); border:1px solid var(--linha-2);
  position:relative; transition:.18s;
}
.chave__bola{
  position:absolute; top:2px; left:2px; width:15px; height:15px; border-radius:50%;
  background:var(--txt-3); transition:.18s;
}
.chave[aria-pressed="true"] .chave__trilho{ background:rgba(124,92,255,.3); border-color:var(--roxo); }
.chave[aria-pressed="true"] .chave__bola{ left:19px; background:var(--roxo); }

.hamburguer{
  display:none; flex-direction:column; gap:4px; justify-content:center;
  width:38px; height:38px; border-radius:9px;
  background:var(--surf); border:1px solid var(--linha); cursor:pointer;
}
.hamburguer span:not(.sr-only){
  display:block; width:16px; height:2px; margin:0 auto;
  background:var(--txt); border-radius:2px; transition:.2s;
}
.hamburguer[aria-expanded="true"] span:nth-child(1){ transform:translateY(6px) rotate(45deg); }
.hamburguer[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.hamburguer[aria-expanded="true"] span:nth-child(3){ transform:translateY(-6px) rotate(-45deg); }

/* ---------- menu de categorias ---------- */

.menu{ border-top:1px solid var(--linha); }
.menu__lista{
  max-width:1400px; margin:0 auto; padding:0 22px;
  display:flex; align-items:center; gap:4px;
  list-style:none; overflow-x:auto; scrollbar-width:none;
}
.menu__lista::-webkit-scrollbar{ display:none; }
.menu__lista a{
  display:flex; align-items:center; gap:7px;
  padding:13px 12px; font-size:13.5px; color:var(--txt-2);
  white-space:nowrap; border-bottom:2px solid transparent;
}
.menu__lista a:hover{ color:var(--txt); }
.menu__lista a.ativo{ color:var(--txt); border-bottom-color:var(--roxo); }
.menu__conta{
  font-family:'JetBrains Mono',monospace; font-size:10.5px;
  color:var(--txt-3); background:var(--surf-2);
  padding:1px 6px; border-radius:20px;
}
.menu__separador{ width:1px; height:16px; background:var(--linha-2); margin:0 8px; }

/* ---------- filtros ---------- */

.filtros{
  max-width:1400px; margin:0 auto; padding:10px 22px;
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  border-top:1px solid var(--linha);
}
.filtros__grupo{
  display:flex; gap:5px; padding:3px;
  background:var(--surf); border:1px solid var(--linha); border-radius:999px;
}
.pilula{
  padding:6px 14px; border-radius:999px;
  font-size:12.5px; color:var(--txt-2); white-space:nowrap; transition:.14s;
}
.pilula:hover{ color:var(--txt); background:var(--surf-2); }
.pilula--ativa{ background:var(--roxo); color:#fff; }
.pilula--ativa:hover{ background:var(--roxo); color:#fff; }

.ordenar{ margin-left:auto; }
.ordenar select{
  background:var(--surf); color:var(--txt-2);
  border:1px solid var(--linha); border-radius:999px;
  padding:8px 14px; font-family:inherit; font-size:12.5px; cursor:pointer;
}
.ordenar select:focus{ outline:none; border-color:var(--roxo); }

/* ---------- conteúdo ---------- */

.conteudo{ max-width:1400px; margin:0 auto; padding:30px 22px 60px; }

.cabecalho-galeria{
  display:flex; align-items:flex-end; justify-content:space-between; gap:16px;
  margin-bottom:22px; flex-wrap:wrap;
}
.cabecalho-galeria__titulo{ font-size:24px; font-weight:600; margin:0; letter-spacing:-.5px; }
.cabecalho-galeria__sub{ margin:6px 0 0; color:var(--txt-2); font-size:13px; }
.aviso-sfw{
  display:inline-block; margin-left:8px; padding:2px 9px; border-radius:20px;
  font-size:11px; color:var(--roxo);
  background:rgba(124,92,255,.14); border:1px solid rgba(124,92,255,.3);
}

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

.grade{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(232px,1fr));
  gap:18px;
  align-items:start;
}

/* Encaixe estilo Pinterest: o JS mede cada card e diz quantas linhas
   de 8px ele ocupa. Sem JS a grade continua funcionando no modo normal. */
.grade--encaixe{
  grid-auto-rows:8px;
  column-gap:18px;
  row-gap:0;
}
.grade--encaixe > *{
  grid-row-end:span var(--span,44);
  margin-bottom:18px;
}

.card{
  background:var(--surf);
  border:1px solid var(--linha);
  border-radius:var(--raio);
  overflow:hidden;
  display:flex; flex-direction:column;
  transition:border-color .18s, transform .18s;
}
.card:hover{ border-color:var(--linha-2); transform:translateY(-3px); }

.card__foto{
  position:relative; display:block;
  aspect-ratio:var(--ar,4/3);   /* proporção real da imagem */
  background:var(--bg-2); overflow:hidden;
}
.card__foto img{
  width:100%; height:100%; object-fit:cover;
  transition:transform .5s cubic-bezier(.2,.7,.3,1), filter .3s;
}
.card:hover .card__foto img{ transform:scale(1.06); }

.card__res,
.card__adulto{
  position:absolute; top:9px;
  padding:3px 8px; border-radius:6px;
  font-weight:600; letter-spacing:.4px;
  backdrop-filter:blur(6px);
}
.card__res{ left:9px; background:rgba(0,0,0,.55); color:#fff; border:1px solid rgba(255,255,255,.16); }
.card__adulto{ right:9px; background:rgba(255,77,141,.9); color:#fff; }

.card__corpo{ padding:12px 13px 11px; display:flex; flex-direction:column; gap:9px; flex:1; }

.card__titulo{
  font-size:13.5px; font-weight:500; margin:0; line-height:1.35;
  display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; overflow:hidden;
}

/* assinatura da casa: faixa de metadados com o formato desenhado */
.card__medidas{
  display:flex; align-items:center; gap:7px;
  color:var(--txt-3); flex-wrap:wrap;
}
.proporcao{ width:22px; height:16px; color:var(--roxo); flex-shrink:0; }
.ponto{ width:3px; height:3px; border-radius:50%; background:var(--txt-3); opacity:.6; }

.card__rodape{
  margin-top:auto; padding-top:10px; border-top:1px solid var(--linha);
  display:flex; align-items:center; justify-content:space-between; gap:8px;
}
.card__cat{
  font-size:11.5px; color:var(--txt-3); text-transform:uppercase; letter-spacing:.6px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.btn-baixar{
  display:inline-flex; align-items:center; gap:6px;
  padding:7px 13px; border-radius:8px;
  font-size:12.5px; font-weight:500;
  color:var(--txt); background:var(--surf-2); border:1px solid var(--linha-2);
  transition:.15s; flex-shrink:0;
}
.btn-baixar svg{ width:14px; height:14px; }
.btn-baixar:hover{ background:var(--roxo); border-color:var(--roxo); color:#fff; }

/* ---------- anúncio ---------- */

.card--ad{
  display:grid; place-content:center; gap:6px; text-align:center;
  min-height:220px; padding:16px;
}
.card--ad-vazio{
  border-style:dashed; border-color:var(--linha-2); background:rgba(255,255,255,.015);
}
.ad-tag{
  font-size:11px; letter-spacing:1.4px; text-transform:uppercase; color:var(--txt-3);
}
.ad-nota{ font-size:12px; color:var(--txt-3); opacity:.7; }

/* ---------- paginação ---------- */

.paginacao{
  display:flex; justify-content:center; align-items:center; gap:6px;
  margin-top:38px; flex-wrap:wrap;
}
.pag{
  min-width:38px; padding:9px 13px; border-radius:9px; text-align:center;
  font-size:13px; color:var(--txt-2);
  background:var(--surf); border:1px solid var(--linha); transition:.14s;
}
.pag:hover{ border-color:var(--roxo); color:var(--txt); }
.pag--atual{ background:var(--roxo); border-color:var(--roxo); color:#fff; }
.pag-gap{ color:var(--txt-3); padding:0 4px; }

/* ---------- vazio ---------- */

.vazio{
  text-align:center; padding:70px 20px;
  border:1px dashed var(--linha-2); border-radius:var(--raio);
}
.vazio h2{ font-size:19px; font-weight:600; margin:0 0 8px; }
.vazio p{ color:var(--txt-2); margin:0 0 20px; font-size:14px; }

/* ---------- detalhe ---------- */

.detalhe{ display:grid; grid-template-columns:1fr 300px; gap:24px; align-items:start; }
.detalhe__palco{
  background:var(--bg-2); border:1px solid var(--linha); border-radius:var(--raio);
  padding:14px; display:grid; place-items:center;
}
.detalhe__palco img{ max-height:76vh; width:auto; border-radius:8px; }
.detalhe__lado{
  background:var(--surf); border:1px solid var(--linha); border-radius:var(--raio);
  padding:20px; display:flex; flex-direction:column; gap:16px;
}
.detalhe__titulo{ font-size:19px; font-weight:600; margin:0; letter-spacing:-.3px; }

.ficha{ margin:0; display:grid; gap:1px; background:var(--linha); border-radius:10px; overflow:hidden; }
.ficha > div{
  display:flex; justify-content:space-between; align-items:center;
  background:var(--surf-2); padding:10px 13px;
}
.ficha dt{ color:var(--txt-3); font-size:12.5px; }
.ficha dd{ margin:0; color:var(--txt); }

.tags{ display:flex; flex-wrap:wrap; gap:6px; }
.tag{
  padding:5px 11px; border-radius:999px; font-size:12px;
  color:var(--txt-2); background:var(--surf-2); border:1px solid var(--linha);
}
.tag:hover{ border-color:var(--roxo); color:var(--txt); }

/* ---------- rodapé ---------- */

.rodape{
  border-top:1px solid var(--linha);
  padding:26px 22px 40px; margin-top:20px;
}
.rodape__linha{
  max-width:1400px; margin:0 auto;
  display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
}
.rodape__marca{ font-weight:600; letter-spacing:-.4px; }
.rodape__marca span{ color:var(--roxo); }
.rodape__links{ display:flex; gap:18px; flex-wrap:wrap; }
.rodape__links a,
.rodape__links button{ color:var(--txt-2); font-size:13px; }
.rodape__links a:hover,
.rodape__links button:hover{ color:var(--roxo); }
.rodape__nota{
  max-width:1400px; margin:14px auto 0;
  color:var(--txt-3); font-size:11.5px; line-height:1.7;
}

/* ---------- responsivo ---------- */

@media (max-width:980px){
  .detalhe{ grid-template-columns:1fr; }
  .chave__texto{ display:none; }
}

@media (max-width:860px){
  .topo__barra{ flex-wrap:wrap; height:auto; padding:12px 16px; gap:12px; }
  .busca{ order:3; max-width:100%; width:100%; }
  .topo__acoes{ gap:10px; }
  .hamburguer{ display:flex; }

  .menu{ display:none; }
  .menu--aberto{ display:block; }
  .menu__lista{
    flex-direction:column; align-items:stretch; gap:0;
    padding:8px 16px 14px; max-height:60vh; overflow-y:auto;
  }
  .menu__lista a{
    padding:12px 4px; border-bottom:1px solid var(--linha);
    justify-content:space-between;
  }
  .menu__lista a.ativo{ color:var(--roxo); border-bottom-color:var(--linha); }
  .menu__separador{ display:none; }

  .filtros{ padding:10px 16px; overflow-x:auto; flex-wrap:nowrap; scrollbar-width:none; }
  .filtros::-webkit-scrollbar{ display:none; }
  .ordenar{ margin-left:0; }

  .conteudo{ padding:22px 16px 50px; }
  .grade{ grid-template-columns:repeat(auto-fill,minmax(158px,1fr)); gap:12px; }
  .grade--encaixe{ column-gap:12px; row-gap:0; }
  .grade--encaixe > *{ margin-bottom:12px; }
  .card__corpo{ padding:10px; }
  .card__cat{ display:none; }
  .btn-baixar{ width:100%; justify-content:center; }
}

@media (max-width:420px){
  .grade{ grid-template-columns:repeat(2,1fr); gap:10px; }
  .grade--encaixe{ column-gap:10px; row-gap:0; }
  .grade--encaixe > *{ margin-bottom:10px; }
  .card__medidas{ gap:5px; }
  .card__medidas .ponto:last-of-type,
  .card__medidas .mono:last-of-type{ display:none; }
  .gate__caixa{ padding:26px 20px 20px; }
}

@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition:none !important; }
  .card:hover{ transform:none; }
  .card:hover .card__foto img{ transform:none; }
}