/* Catálogo de skills: filtros por trilha e grade do acervo. */

.filtros{display:flex;flex-wrap:wrap;gap:8px;margin:26px 0 22px}
.filtro{
  padding:7px 14px;border:1px solid var(--hairline);border-radius:999px;
  background:transparent;color:var(--body);font:500 12px/1 var(--mono);
  cursor:pointer;transition:background-color .18s ease,color .18s ease,border-color .18s ease;
}
.filtro:hover{background:var(--card)}
.filtro.ativo{background:var(--ink);border-color:var(--ink);color:var(--canvas)}
.filtro:focus-visible{outline:2px solid var(--ink);outline-offset:2px}

.catalogo{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(268px,1fr));gap:12px;
  margin:0;padding:0;list-style:none;
}
.skill{
  display:flex;flex-direction:column;padding:18px;border:1px solid var(--hairline);
  border-radius:4px;background:var(--soft);
}
.skill-topo{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px}
.skill-trilha{color:var(--mute);font:600 10px/1.4 var(--mono);text-transform:uppercase;letter-spacing:.08em}
.skill-status{
  padding:3px 8px;border-radius:999px;font:600 9.5px/1.4 var(--mono);
  text-transform:uppercase;letter-spacing:.06em;white-space:nowrap;
}
.skill-status.pronta{background:var(--ink);color:var(--canvas)}
.skill-status.obra{border:1px solid var(--hairline);color:var(--mute)}
.skill h3{margin:0 0 8px;font:700 15px/1.35 var(--mono);letter-spacing:-.02em}
.skill p{margin:0;color:var(--body);font-size:12.5px;line-height:1.6}
.skill-saida{
  margin-top:auto!important;padding-top:12px;border-top:1px solid var(--hairline);
  color:var(--mute)!important;font-size:11px!important;
}
.skill p + .skill-saida{margin-top:14px!important}
.catalogo-vazio{margin:18px 0 0;color:var(--mute);font-size:12.5px}

@media (max-width:640px){
  .catalogo{grid-template-columns:1fr}
  .filtros{gap:6px}
  .filtro{padding:6px 12px;font-size:11.5px}
}
.filtro-n{display:inline-block;margin-left:5px;opacity:.55;font-size:10px}
.filtro.ativo .filtro-n{opacity:.7}
/* --- grupos --- */
.catalogo-resumo{margin:22px 0 0;color:var(--body);font-size:12.5px;line-height:1.6}
.catalogo-resumo b{color:var(--ink)}

.catalogo{display:flex;flex-direction:column;gap:34px;margin-top:26px}
.grupo-topo{
  display:grid;grid-template-columns:auto auto minmax(60px,1fr);align-items:center;gap:14px;
  margin-bottom:14px;
}
.grupo-topo h3{margin:0;font:700 13px/1 var(--mono);text-transform:uppercase;letter-spacing:.1em}
.grupo-resumo{color:var(--mute);font:500 11px/1 var(--mono)}
.grupo-barra{position:relative;height:2px;background:var(--hairline);border-radius:999px;overflow:hidden}
.grupo-barra i{position:absolute;inset:0 auto 0 0;display:block;background:var(--ink)}
.grupo-lista{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(258px,1fr));gap:12px;
  margin:0;padding:0;list-style:none;
}

.skill{
  display:flex;flex-direction:column;padding:17px;border:1px solid var(--hairline);
  border-radius:4px;transition:border-color .2s ease,background-color .2s ease,transform .2s ease;
}
/* o que roda hoje pesa mais que o que esta planejado */
.skill.pronta{background:var(--soft)}
.skill.obra{background:transparent;border-style:dashed}
.skill:hover{transform:translateY(-1px);border-color:var(--ink);border-style:solid}

.skill-topo{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:11px}
.skill-n{color:var(--mute);font:600 10px/1 var(--mono);letter-spacing:.08em}
.skill-status{
  padding:3px 8px;border-radius:999px;font:600 9px/1.4 var(--mono);
  text-transform:uppercase;letter-spacing:.06em;white-space:nowrap;
}
.skill-status.pronta{background:var(--ink);color:var(--canvas)}
.skill-status.obra{border:1px solid var(--hairline);color:var(--mute)}
.skill h4{margin:0 0 8px;font:700 14.5px/1.35 var(--mono);letter-spacing:-.02em}
.skill p{margin:0;color:var(--body);font-size:12px;line-height:1.6}
.skill-saida{
  margin-top:auto!important;padding-top:11px;border-top:1px solid var(--hairline);
  color:var(--mute)!important;font-size:10.5px!important;
}
.skill p + .skill-saida{margin-top:13px!important}
.grupo[hidden]{display:none}

@media (max-width:640px){
  .grupo-lista{grid-template-columns:1fr}
  .grupo-topo{grid-template-columns:auto minmax(40px,1fr);gap:10px}
  .grupo-resumo{grid-column:1/-1;grid-row:2}
}
.filtro-destaque{border-color:var(--ink)}
.filtro-destaque::before{content:"";display:inline-block;width:5px;height:5px;margin-right:7px;border-radius:999px;background:var(--ink);vertical-align:1px}
.filtro-destaque.ativo::before{background:var(--canvas)}
.skill[hidden]{display:none}

/* --- largura e grades desta pagina --- */
main.page{width:min(1120px,calc(100% - 48px))}
.page .step-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
.grupo-lista{grid-template-columns:repeat(auto-fill,minmax(252px,1fr))}
.tile-preco{margin:14px 0 0!important;padding-top:12px;border-top:1px solid var(--hairline)}
.tile-preco b{display:block;font:700 17px/1.2 var(--mono);letter-spacing:-.02em}
.tile-preco span{display:block;margin-top:3px;color:var(--mute);font-size:10.5px;line-height:1.4}
.tile.destaque{background:var(--ink);border-color:var(--ink);color:var(--canvas)}
.tile.destaque p{color:var(--on-dark-mute)}
.tile.destaque .tile-number,.tile.destaque .tile-preco span{color:var(--on-dark-mute)}
.tile.destaque .tile-preco{border-color:rgba(255,255,255,.2)}
.tile.destaque h3,.tile.destaque .tile-preco b{color:var(--canvas)}
.skill-marcas{display:flex;align-items:center;gap:8px}
.skill-preco{font:700 12px/1 var(--mono);letter-spacing:-.01em}
@media (max-width:1000px){ .page .step-grid{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:640px){ .page .step-grid{grid-template-columns:1fr} }