/* ==========================================================================
   Partner ERP — downloads.html
   Só o que é exclusivo da central de downloads; todo o resto (tokens, nav,
   botões, rodapé, responsivo) vem de style.css, que carrega antes.

   Conceito: um catálogo técnico sobre uma superfície escura contínua. O fundo
   é um só do topo até o rodapé — o gradiente termina exatamente no --navy-900
   do rodapé, então não existe emenda. Navy domina, o âmbar é a única cor
   quente da página (é sempre a ação: baixar) e os ícones dos módulos são o
   outro ponto de cor. Mobile first, na mesma cadeia de degraus do style.css.
   ========================================================================== */

/* ------------------------------- 1. Menu -------------------------------- */
/* o item da página atual fica aceso, reaproveitando o sublinhado do menu */
.nav__links a[aria-current="page"]{color:#fff}
.nav__links a[aria-current="page"]::after{transform:scaleX(1)}

/* ------------------------------- 2. Superfície -------------------------- */
/* o que sobra abaixo do rodapé em telas altas continua escuro */
body{background:var(--navy-900)}

.fundo{
  position:relative;isolation:isolate;overflow:hidden;
  color:#fff;
  background:
    radial-gradient(120% 55% at 80% 0%,rgba(38,182,198,.20) 0%,transparent 55%),
    radial-gradient(90% 45% at 2% 26%,rgba(45,156,219,.15) 0%,transparent 60%),
    linear-gradient(180deg,var(--navy-800) 0%,var(--navy-850) 46%,var(--navy-900) 100%);
}
/* a malha técnica desce do topo e se dissolve antes dos cartões, para não
   competir com eles */
.fundo__malha{
  position:absolute;inset:0;z-index:-2;pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);
  background-size:44px 44px;
  mask-image:linear-gradient(180deg,#000 0%,rgba(0,0,0,.5) 42%,transparent 80%);
  -webkit-mask-image:linear-gradient(180deg,#000 0%,rgba(0,0,0,.5) 42%,transparent 80%);
}
.fundo__ruido{
  position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.45;
  background-image:var(--noise);background-size:180px;mix-blend-mode:overlay;
}

/* ------------------------------- 3. Topo da página ---------------------- */
.pagina__topo{
  position:relative;
  padding:calc(var(--nav-h) + clamp(30px,7vw,62px)) 0 clamp(26px,4vw,38px);
}
.pagina__h1{
  font-size:clamp(1.75rem,6.4vw,3rem);
  font-weight:900;line-height:1.04;letter-spacing:-.035em;
  margin:0 0 14px;
}
.pagina__lead{
  font-size:clamp(.97rem,1.15vw + .72rem,1.16rem);
  color:rgba(255,255,255,.78);max-width:58ch;margin:0;
}

/* ------------------------------- 4. Catálogo ---------------------------- */
.pagina__corpo{position:relative;padding:0 0 clamp(56px,9vw,110px)}

/* faixa de cabeçalho do catálogo, no jeito de etiqueta de prateleira */
.baixas__cab{
  display:flex;align-items:baseline;justify-content:space-between;
  gap:10px 20px;flex-wrap:wrap;
  padding-bottom:12px;margin-bottom:16px;
  border-bottom:1px solid rgba(255,255,255,.12);
  font-family:var(--f-mono);font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;
}
.baixas__rot{display:flex;align-items:center;gap:9px;color:var(--teal-bright)}
.baixas__rot i{width:8px;height:8px;flex:none;background:var(--teal);transform:rotate(45deg)}
.baixas__meta{color:rgba(255,255,255,.38)}

.baixas{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,278px),1fr));
  gap:12px;
}

.baixa{
  position:relative;display:flex;flex-direction:column;
  background:rgba(255,255,255,.035);
  border:1px solid rgba(255,255,255,.10);
  border-radius:var(--r);
  /* o overflow é quem recorta o filete do topo na curva do canto — sem ele
     a barra sai reta para fora do arredondamento */
  overflow:hidden;
  padding:22px 20px 20px;
  transition:border-color .25s,background .25s,transform .25s var(--ease);
}
/* filete âmbar no topo do cartão: aceso quando o cartão está sob o cursor */
.baixa::before{
  content:'';position:absolute;left:0;right:0;top:0;height:2px;
  background:linear-gradient(90deg,var(--amber),rgba(247,178,51,0) 75%);
  opacity:.3;transition:opacity .25s;
}
.baixa:hover{
  background:rgba(255,255,255,.055);border-color:rgba(247,178,51,.42);
  transform:translateY(-3px);
}
.baixa:hover::before{opacity:1}

.baixa__topo{display:flex;align-items:center;gap:14px;margin-bottom:16px}
/* o ladrilho é CLARO de propósito: normaliza ícones de origens diferentes e
   impede que o ícone escuro do Helpers suma no fundo do cartão */
.baixa__ico{
  width:54px;height:54px;flex:none;
  display:grid;place-items:center;
  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.12);
  border-radius:var(--r-sm);
}
.baixa__ico img{width:34px;height:34px;object-fit:contain}
.baixa h2{
  font-size:1.05rem;font-weight:700;letter-spacing:-.02em;color:#fff;line-height:1.2;
}
/* Carimbo de versão, logo acima do botão. Preenchido em runtime; vazio, some.
   Os botões continuam alinhados entre os cartões porque quem absorve a
   diferença de altura é a descrição (flex:1), não o carimbo. */
.baixa__ver{
  align-self:flex-start;margin:0 0 10px;
  font-family:var(--f-mono);font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;
  padding:3px 8px;border-radius:3px;
  color:var(--amber);
  background:rgba(247,178,51,.1);border:1px solid rgba(247,178,51,.3);
}
.baixa__ver:empty{display:none}

.baixa__desc{
  margin:0 0 16px;font-size:.9rem;line-height:1.6;
  color:rgba(255,255,255,.64);
  flex:1 1 auto;
}
.baixa:hover .baixa__desc{color:rgba(255,255,255,.8)}

/* ------------------------------- 5. Botão âmbar ------------------------- */
/* única cor quente da página — é sempre a ação */
.btn--baixar{
  background:var(--amber);color:var(--navy-900);
  box-shadow:0 6px 20px rgba(247,178,51,.2);
}
.btn--baixar:hover{background:#FFC65A;box-shadow:0 10px 28px rgba(247,178,51,.34)}
.ico-baixar{width:16px;height:16px;flex:none;transition:transform .2s var(--ease)}
.btn--baixar:hover .ico-baixar{transform:translateY(2px)}

/* ------------------------------- 6. Responsivo -------------------------- */
@media (min-width:640px){
  .baixa{padding:24px 22px 22px}
  .baixa__ico{width:58px;height:58px}
  .baixa__ico img{width:38px;height:38px}
}

@media (min-width:900px){
  .baixas{gap:14px}
  .baixa{padding:26px 24px 24px}
  .baixas__cab{margin-bottom:20px}
}

/* sem hover (toque): nada de estado preso, e o filete fica sempre aceso */
@media (hover:none){
  .baixa:hover{transform:none}
  .baixa::before{opacity:.75}
}