/* =========================================================================
   CATÁLOGOS  ·  /cronogramas e /todas-as-apostilas
   Duas páginas com a mesma estrutura: uma lista de materiais do mesmo
   tipo, agrupada por concurso. Nascem com um grupo só, PCMG, e o dia em
   que a PRF existir é só acrescentar outro <section class="cat-grupo">.

   O vidro é o mesmo da página de links, em versão mais sóbria: aqui não
   há foto em tela cheia por trás, porque estas páginas têm o menu do site
   no topo e precisam que ele continue legível.
   ========================================================================= */
body{background:var(--ink);color:#f4f2ec}

.cat{max-width:760px;margin-inline:auto;padding:0 20px 20px}
@media(min-width:700px){.cat{padding:0 24px 28px}}

/* clarão dourado, o mesmo das outras páginas escuras */
.cat-topo{position:relative;padding:52px 0 10px;text-align:center}
@media(min-width:700px){.cat-topo{padding:72px 0 14px}}
.cat-topo::before{
  content:"";position:absolute;left:50%;top:-26%;translate:-50% 0;z-index:-1;
  width:min(92vw,580px);aspect-ratio:1;border-radius:50%;
  background:#c9a25e;filter:blur(110px);opacity:.14;pointer-events:none;
}
.cat-topo h1{font-size:clamp(30px,7.4vw,48px);letter-spacing:-.05em;line-height:1.06}
.cat-topo p{
  margin:16px auto 0;max-width:46ch;
  font-size:15.5px;line-height:1.7;color:rgba(244,242,237,.72);
}

.cat-grupo{padding:40px 0 0}
@media(min-width:700px){.cat-grupo{padding:52px 0 0}}
.cat-grupo h2{
  font-size:clamp(21px,4.6vw,28px);letter-spacing:-.04em;line-height:1.15;
}
.cat-grupo>p{
  margin-top:10px;max-width:52ch;
  font-size:14.5px;line-height:1.68;color:rgba(244,242,237,.64);
}

.cat-lista{display:grid;gap:12px;margin-top:22px}
@media(min-width:720px){.cat-lista{gap:14px}}

/* ------------------------------------------------------------- o vidro */
.cat-item{
  position:relative;display:flex;align-items:center;gap:16px;
  padding:16px;border-radius:20px;text-decoration:none;color:inherit;
  background:rgba(255,255,255,.055);
  border:1px solid rgba(255,255,255,.13);
  backdrop-filter:blur(14px) saturate(150%);
  -webkit-backdrop-filter:blur(14px) saturate(150%);
  box-shadow:0 10px 28px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.16);
  overflow:hidden;isolation:isolate;
  -webkit-tap-highlight-color:transparent;
  transition:transform .3s var(--e),box-shadow .3s var(--e),
             border-color .3s ease,background .3s ease;
}
.cat-item::before{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:1;
  background:linear-gradient(180deg,rgba(255,255,255,.13) 0%,rgba(255,255,255,0) 52%);
}
.cat-item::after{
  content:"";position:absolute;inset:-1px;border-radius:inherit;pointer-events:none;z-index:2;
  opacity:0;transition:opacity .35s ease;
  background:radial-gradient(240px circle at var(--mx,50%) var(--my,0%),
    rgba(255,255,255,.17),rgba(255,255,255,.04) 40%,transparent 64%);
}
.cat-item:hover{
  transform:translateY(-3px);
  border-color:rgba(201,162,94,.5);background:rgba(255,255,255,.085);
  box-shadow:0 20px 44px rgba(0,0,0,.46), inset 0 1px 0 rgba(255,255,255,.24);
}
.cat-item:hover::after,.cat-item:focus-visible::after{opacity:1}
.cat-item:active{transform:translateY(-1px) scale(.995)}

@supports not ((backdrop-filter:blur(2px)) or (-webkit-backdrop-filter:blur(2px))){
  .cat-item{background:rgba(22,22,26,.92)}
}

.cat-capa{
  position:relative;z-index:3;
  flex:0 0 76px;height:76px;border-radius:15px;overflow:hidden;background:#08080a;
  box-shadow:0 4px 14px rgba(0,0,0,.45), inset 0 0 0 1px rgba(255,255,255,.12);
}
@media(min-width:560px){.cat-capa{flex-basis:92px;height:92px}}
.cat-capa img{width:100%;height:100%;object-fit:cover;display:block}
.cat-capa.desenho{
  display:grid;place-items:center;text-align:center;padding:7px;
  background:radial-gradient(120% 90% at 76% 8%,rgba(201,162,94,.34) 0%,transparent 62%),
             linear-gradient(200deg,#2f2719 0%,#0a0a0c 100%);
  font:700 9px/1.45 var(--sans);letter-spacing:.08em;color:var(--gold-lt);
}

.cat-txt{position:relative;z-index:3;flex:1;min-width:0}
.cat-selo{
  display:inline-block;margin-bottom:7px;
  font:700 9.5px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;
  color:#171208;background:var(--gold);border-radius:999px;padding:6px 11px;
}
.cat-txt b{display:block;font-size:17px;font-weight:800;letter-spacing:-.035em;color:#fff}
@media(min-width:560px){.cat-txt b{font-size:18.5px}}
.cat-txt small{display:block;margin-top:5px;font-size:13.5px;line-height:1.55;color:rgba(244,242,237,.7)}
.cat-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.cat-tags span{
  font:600 11px/1 var(--sans);color:rgba(244,242,237,.78);
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);
  border-radius:999px;padding:6px 10px;
}

.cat-seta{
  position:relative;z-index:3;
  flex:0 0 34px;height:34px;border-radius:50%;
  display:grid;place-items:center;font-size:15px;
  background:rgba(255,255,255,.1);color:rgba(244,242,237,.8);
  border:1px solid rgba(255,255,255,.14);
  transition:transform .3s var(--e),color .3s,background .3s;
}
.cat-item:hover .cat-seta{color:#171208;background:var(--gold);transform:translateX(3px)}

/* o combo, que vale mais que a soma das partes */
.cat-item--combo{border-color:rgba(201,162,94,.4)}
.cat-item--combo:hover{border-color:rgba(201,162,94,.72)}

/* aviso honesto de que ainda não existe mais nada aqui */
.cat-breve{
  margin-top:26px;padding:20px;border-radius:18px;
  border:1px dashed rgba(255,255,255,.2);background:rgba(255,255,255,.03);
  font-size:14px;line-height:1.68;color:rgba(244,242,237,.62);
}
.cat-breve b{color:#f4f2ec;font-weight:700}
.cat-breve a{color:var(--gold);text-decoration:underline;text-underline-offset:3px}
.cat-breve a:hover{color:var(--gold-lt)}

/* chamada final para o gratuito */
.cat-fim{
  margin-top:40px;padding:26px 22px;border-radius:20px;text-align:center;
  background:linear-gradient(168deg,rgba(201,162,94,.12),rgba(255,255,255,.03));
  border:1px solid rgba(201,162,94,.34);
}
.cat-fim h2{font-size:clamp(20px,4.4vw,26px);letter-spacing:-.035em;line-height:1.18}
.cat-fim p{margin:11px auto 0;max-width:44ch;font-size:14.5px;line-height:1.65;color:rgba(244,242,237,.72)}
.cat-fim .btn{margin-top:20px;border-radius:999px;justify-content:center;width:100%;max-width:340px}