/* ===========================================================================
   Central de Downloads — página pública
   Paleta e tipografia herdadas do protótipo, com os contrastes corrigidos
   (todo texto pequeno agora passa no WCAG AA sobre branco).
   =========================================================================== */

:root {
  --fundo:        #ECEEF1;
  --cartao:       #FFFFFF;
  --lateral:      #FBFAFD;
  --borda:        #ECE9F4;
  --borda-fraca:  #F1EFF7;
  --tinta:        #1E1533;
  --tinta-2:      #241A3D;
  --tinta-3:      #4A4360;
  --apagado:      #6B6484;  /* 5,5:1 sobre branco */
  --tenue:        #7A7191;  /* 4,6:1 sobre branco */
  --acento:       #6D28D9;
  --acento-suave: #F3EEFB;
  --acento-ativo: #EFEAFB;
  --marca-fundo:  #E4D9FB;
  --marca-tinta:  #341A6B;
  --raio:         20px;
  --sombra:       0 20px 50px rgba(40, 25, 70, .10);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

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

body {
  background: var(--fundo);
  color: var(--tinta-2);
  font: 400 15px/1.5 Manrope, system-ui, -apple-system, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }

/* Foco visível e consistente — nunca removido, só redesenhado. */
:where(a, button, input, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--acento);
  outline-offset: 2px;
  border-radius: 8px;
}

.pular {
  position: absolute; left: -9999px;
  background: var(--acento); color: #fff;
  padding: 10px 16px; border-radius: 0 0 10px 0;
  font: 600 13px Manrope; z-index: 50;
}
.pular:focus { left: 0; top: 0; }

/* --------------------------------------------------------------- estrutura */

.pagina { min-height: 100vh; padding: 56px 32px; overflow-x: hidden; }

.cartao {
  width: 100%; max-width: 980px; margin: 0 auto;
  background: var(--cartao);
  border-radius: var(--raio);
  box-shadow: var(--sombra);
  overflow: hidden;
  display: flex; flex-direction: column;
}

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

.topo {
  padding: 32px 44px;
  border-bottom: 1px solid var(--borda);
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; flex-wrap: wrap;
}

.topo h1 {
  font: 700 26px/1.2 "Space Grotesk", Manrope, sans-serif;
  color: var(--tinta);
}

.topo-sub { margin-top: 4px; font-size: 13px; color: var(--apagado); }

.topo-busca { display: flex; align-items: center; gap: 20px; }

.busca {
  display: flex; align-items: center; gap: 10px;
  width: 300px;
  background: var(--lateral);
  border: 1.5px solid #E7E2F2;
  border-radius: 12px;
  padding: 9px 12px;
  color: var(--apagado);
  transition: border-color .15s, box-shadow .15s, background .15s;
}
.busca:focus-within {
  background: #fff;
  border-color: var(--acento);
  box-shadow: 0 0 0 3px rgba(109, 40, 217, .12);
}
.busca svg { flex-shrink: 0; }

.busca input {
  flex: 1; min-width: 0;
  border: none; outline: none; background: transparent;
  font: 500 13.5px Manrope; color: var(--tinta-2);
}
.busca input::-webkit-search-cancel-button { display: none; }

.busca kbd {
  font: 600 10.5px Manrope; color: var(--tenue);
  border: 1px solid #E7E2F2; border-radius: 5px; padding: 2px 6px;
}

.busca-limpar {
  display: flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; flex-shrink: 0;
  border-radius: 99px; background: var(--borda-fraca);
  color: var(--apagado); font: 600 13px Manrope; line-height: 1;
}
.busca-limpar:hover { background: var(--acento); color: #fff; }

/* Só aparece para quem navega sem JS/teclado; o Enter já envia o form. */
.busca-enviar {
  position: absolute; left: -9999px;
  width: 1px; height: 1px; overflow: hidden;
}
.busca-enviar:focus {
  position: static; width: auto; height: auto;
  background: var(--acento); color: #fff; border: none;
  border-radius: 8px; padding: 6px 12px; font: 600 12px Manrope; cursor: pointer;
}

.topo-total { font-size: 13.5px; color: var(--apagado); white-space: nowrap; }

/* Selo "downloads feitos": prova social no lugar da contagem de arquivos (que
   já aparece na pílula da seção). O número nasce pronto no HTML; o site.js só
   o faz subir de 0 na primeira visita da sessão. */
.selo-dl {
  display: flex; align-items: center; gap: 12px;
  background: var(--lateral);
  border: 1px solid var(--borda);
  border-radius: 14px;
  padding: 8px 16px 8px 8px;
  white-space: nowrap;
}
.selo-dl-ico {
  display: flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; flex-shrink: 0;
  background: var(--acento-ativo); color: var(--acento);
  border-radius: 10px;
}
.selo-dl-txt { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.selo-dl-num {
  display: inline-block;
  font: 700 22px/1.1 "Space Grotesk", Manrope, sans-serif;
  color: var(--acento);
  font-variant-numeric: tabular-nums;
}
.selo-dl-pe {
  display: flex; align-items: center;
  font-size: 11.5px; color: var(--apagado);
}
.selo-dl-sep { margin: 0 6px; color: #C9C2DC; }

/* Ponto verde "ao vivo" ao lado do número de hoje. A onda some com o
   prefers-reduced-motion (regra geral no fim do arquivo). */
.selo-dl-ponto {
  position: relative;
  width: 7px; height: 7px; margin-right: 6px; flex-shrink: 0;
  border-radius: 50%; background: #16A34A;
}
.selo-dl-ponto::after {
  content: ""; position: absolute; inset: 0;
  border-radius: 50%; background: #16A34A;
  animation: selo-onda 1.8s ease-out infinite;
}
@keyframes selo-onda {
  from { transform: scale(1);   opacity: .55; }
  to   { transform: scale(2.8); opacity: 0; }
}

/* ------------------------------------------------------------------- corpo */

.corpo { display: flex; }

/* --------------------------------------------------------------- navegação */

.lateral {
  width: 250px; flex-shrink: 0;
  border-right: 1px solid var(--borda);
  background: var(--lateral);
  padding: 26px 18px;
}

.nav-movel > summary { display: none; }

.lateral-rotulo {
  font: 600 11px "Space Grotesk", Manrope, sans-serif;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--apagado);
  padding: 0 14px 10px;
}

.arv, .arv-sub { list-style: none; }

.arv-sub {
  margin: 2px 0 6px 14px;
  padding-left: 10px;
  border-left: 1.5px solid #E7E2F2;
}
.arv-sub .arv-sub { margin-left: 8px; }

.arv-a {
  display: flex; align-items: center; gap: 8px;
  padding: 11px 14px;
  border-left: 3px solid transparent;
  border-radius: 0 10px 10px 0;
  color: var(--tinta-3);
  transition: background .12s;
}
.arv-a:hover { background: #F3F1F7; }

.arv-a.ativo {
  background: var(--acento-ativo);
  border-left-color: var(--acento);
  color: #2B2340;
  font-weight: 700;
}

.nivel1 { font: 600 13px "Space Grotesk", Manrope, sans-serif; letter-spacing: .02em; }
.nivel2 { font: 600 14px Manrope; }
.nivel3 { font: 600 13px Manrope; padding: 8px 12px; border-left-width: 2px; }

.cont { margin-left: auto; font: 400 12px Manrope; color: var(--apagado); }
.arv-a.ativo .cont { color: #3B3350; }

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

.conteudo { flex: 1; min-width: 0; padding: 20px 32px 32px; }

.trilha {
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
  padding: 6px 16px 14px;
  font-size: 12.5px; color: var(--apagado);
}
.trilha a:hover { color: var(--acento); text-decoration: underline; }
.trilha .sep { color: #A79EBF; }

.chip {
  display: inline-flex; align-items: center; gap: 7px;
  background: #F3F1F7; color: #2B2340; font-weight: 600;
  border-radius: 99px; padding: 4px 6px 4px 12px;
}
.chip a {
  display: flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; border-radius: 99px;
  background: #E4E0EC; color: #3B3350; font: 600 11px Manrope; line-height: 1;
}
.chip a:hover { background: #6B5F8C; color: #fff; }

.secao {
  display: flex; align-items: flex-end; gap: 16px; flex-wrap: wrap;
  border-bottom: 1px solid var(--borda);
  padding: 0 4px 0 16px;
  margin-bottom: 8px;
}
.secao h2 {
  font: 700 20px "Space Grotesk", Manrope, sans-serif;
  color: var(--tinta);
  padding-bottom: 12px;
}
.secao .pilula { align-self: center; margin-bottom: 12px; margin-left: -8px; line-height: 1; }

.pilula {
  font: 600 11.5px Manrope; color: var(--tinta-3);
  background: #EDEAF3; border-radius: 99px; padding: 3px 9px;
}
.pilula.peq { font-size: 11px; padding: 2px 7px; color: #6B6484; background: #F5F4F8; }

.abas { display: flex; align-items: stretch; gap: 2px; flex-wrap: wrap; }

/* A contagem de cada aba precisa de forma própria, não só de espaço: os nomes
   das categorias terminam em dígito (CEL1, CEL2, BAS1…), então "CEL1" seguido
   de "8" lê-se "CEL18" por mais gap que se dê. O selo desfaz a ambiguidade.
   Diferente da primeira versão, é cinza e centrado — não roxo e sobrescrito. */
.aba {
  display: inline-flex; align-items: center;
  border-bottom: 2px solid transparent;
  color: var(--apagado); font: 500 13.5px/1 Manrope;
  padding: 12px 10px;
}
.aba .pilula.peq {
  margin-left: 8px;
  background: var(--borda-fraca); color: var(--tenue);
  border-radius: 99px; padding: 2px 7px;
  font: 600 11px/1 Manrope;
  font-variant-numeric: tabular-nums;
}
.aba:hover { color: #2B2340; }
.aba.ativa { color: #2B2340; font-weight: 700; border-bottom-color: var(--acento); }
.aba.ativa .pilula.peq { background: var(--acento-suave); color: var(--acento); }

/* ------------------------------------------------------------------ lista */

.lista { list-style: none; }

/* Três colunas: ícone, texto, ação. Tamanho, páginas e downloads moram todos
   na linha de apoio do texto — antes eram colunas próprias e os números
   acabavam disputando espaço entre si. */
.linha {
  display: grid;
  grid-template-columns: 38px 1fr auto;
  align-items: center; gap: 16px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--borda-fraca);
  border-radius: 10px;
}
.linha:hover { background: #F7F5FB; }

.linha-icone {
  display: flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; flex-shrink: 0;
  background: var(--borda-fraca); color: var(--tenue);
  border-radius: 10px;
}
.linha:hover .linha-icone { background: var(--acento-suave); color: var(--acento); }

.linha-texto { display: flex; flex-direction: column; gap: 3px; min-width: 0; }

.linha-titulo { font-weight: 600; font-size: 14.5px; color: var(--tinta-2); line-height: 1.35; }
.linha-titulo mark { background: var(--marca-fundo); color: var(--marca-tinta); border-radius: 3px; }

/* A linha de apoio: acervo · tamanho · páginas, e o contador ao final. */
.linha-meta {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  font-size: 12.5px; color: var(--apagado);
  font-variant-numeric: tabular-nums;
}

/* O contador é a única informação de outra natureza — quantas pessoas já
   baixaram. Ganha fundo próprio para não se misturar aos dados do arquivo. */
.linha-dl {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 1px 8px 1px 6px;
  border-radius: 99px;
  background: var(--borda-fraca);
  color: var(--tenue);
  font-size: 11.5px; font-weight: 600;
  white-space: nowrap;
}
.linha-dl svg { flex-shrink: 0; opacity: .8; }

/* O rótulo (descrição curta ou categoria) tem um tom acima dos números:
   diz o que a linha é, e não quanto ela mede. */
.linha-rot { color: var(--tinta-3); }
.linha-rot:not(:last-child)::after { content: "·"; margin-left: 8px; color: #C9C2DC; }

.linha-desc { font-size: 12.5px; color: var(--tenue); }

/* Só para leitor de tela: dá sentido ao número solto do contador. */
.sr {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.baixar {
  display: flex; align-items: center; gap: 7px;
  font: 600 13px Manrope; color: var(--acento);
  background: var(--acento-suave);
  border-radius: 10px; padding: 9px 16px;
  white-space: nowrap;
  transition: background .12s, color .12s;
}
.baixar:hover, .baixar:focus-visible { background: var(--acento); color: #fff; }

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

.vazio {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: 64px 0 56px; text-align: center;
}
.vazio-icone {
  display: flex; align-items: center; justify-content: center;
  width: 52px; height: 52px; border-radius: 14px;
  background: #F7F5FB; color: var(--tenue);
}
.vazio-titulo { font: 600 15px "Space Grotesk", Manrope, sans-serif; color: var(--tinta-2); }
.vazio-texto { font-size: 13px; color: var(--apagado); max-width: 300px; }
.btn-vazio {
  margin-top: 6px;
  background: var(--acento-suave); color: var(--acento);
  font: 600 13px Manrope; border-radius: 10px; padding: 9px 16px;
}
.btn-vazio:hover { background: var(--acento); color: #fff; }

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

.rodape {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
  border-top: 1px solid var(--borda);
  padding: 18px 44px;
  font-size: 12.5px; color: var(--apagado);
}
.rodape a:hover { color: var(--acento); text-decoration: underline; }
.rodape-marca { font-weight: 600; color: var(--tinta-3); }

/* =========================================================== responsividade
   Dois pontos de quebra, iguais aos do protótipo: 1060px e 760px.          */

@media (max-width: 1060px) {
  .pagina   { padding: 32px 24px 56px; }
  .topo     { padding: 26px 28px; }
  .lateral  { width: 218px; }
  .conteudo { padding: 20px 24px 28px; }
  .busca    { width: 240px; }
  .rodape   { padding: 18px 28px; }
}

@media (max-width: 760px) {
  .pagina { padding: 14px 12px 40px; }
  .cartao { border-radius: 14px; box-shadow: 0 8px 24px rgba(40, 25, 70, .08); }

  .topo { flex-direction: column; align-items: stretch; padding: 20px 18px; gap: 14px; }
  .topo h1 { font-size: 20px; }
  .topo-busca { flex-direction: column; align-items: stretch; gap: 10px; }
  .busca { width: 100%; }
  .selo-dl { padding: 6px 14px 6px 6px; }
  .selo-dl-ico { width: 34px; height: 34px; }
  .selo-dl-num { font-size: 20px; }

  .corpo { flex-direction: column; }

  .lateral {
    width: auto;
    border-right: none;
    border-bottom: 1px solid var(--borda);
    padding: 16px 12px;
  }

  /* No celular a navegação vira um acordeão nativo (<details>). */
  .nav-movel > summary {
    display: flex; align-items: center; gap: 10px;
    list-style: none; cursor: pointer;
    min-height: 44px; padding: 12px 14px;
    background: #F3F1F7; border-radius: 10px;
    font: 600 13.5px Manrope; color: #2B2340;
  }
  .nav-movel > summary::-webkit-details-marker { display: none; }
  .nav-movel > summary::before {
    content: "▸"; font-size: 10px; color: var(--apagado);
  }
  .nav-movel[open] > summary::before { content: "▾"; }
  .nav-movel-rot {
    font: 600 10.5px Manrope; letter-spacing: .14em;
    text-transform: uppercase; color: var(--apagado);
  }
  .lateral-rotulo { display: none; }
  .nav-movel[open] .arv { padding-top: 8px; }

  .arv-a  { min-height: 44px; padding: 13px 14px; }
  .nivel3 { padding: 12px 12px; }

  /* No celular a linha vira duas: texto em cima, botão embaixo, ocupando
     a largura toda — alvo de toque confortável. A linha de apoio continua a
     mesma, só quebra em mais linhas. */
  .linha {
    grid-template-columns: 38px 1fr;
    padding: 14px 6px; gap: 10px 12px;
    align-items: start;
  }
  .linha-meta { gap: 6px 8px; }
  .baixar { grid-column: 2; justify-content: center; padding: 11px 16px; min-height: 44px; }

  .baixar { padding: 12px 16px; min-height: 44px; }

  .secao { padding: 0 2px; }
  .secao h2 { font-size: 17px; }
  .trilha { padding: 6px 2px 12px; }
  .rodape { padding: 16px 18px; }
}

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