/* ==========================================================================
   Acessos do Grupo BCM — atalhos para os sites e sistemas das empresas
   (02/11/2026). Arquivo à parte, carregado só pela página inicial, para não
   mexer no style.css que as outras páginas usam. Usa os tokens do style.css.
   ========================================================================== */

/* Botão "Acessos" no cabeçalho */
.btn-acessos { gap: 8px; }
.btn-acessos svg { width: 17px; height: 17px; }

/* Grade de cartões */
.acessos {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}
.acessos li { margin: 0; display: flex; }

.acesso {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: linear-gradient(165deg, rgba(255,255,255,.05), rgba(255,255,255,.014));
  padding: clamp(22px, 2.2vw, 28px);
  color: var(--text);
  overflow: hidden;
  transition: transform .26s ease, border-color .26s ease, box-shadow .26s ease;
}
.acesso::after {
  content: '';
  position: absolute;
  inset: -1px -1px auto;
  height: 3px;
  background: var(--grad-brand);
  opacity: 0;
  transition: opacity .26s ease;
}
.acesso:hover,
.acesso:focus-visible {
  color: var(--text);
  transform: translateY(-5px);
  border-color: rgba(46, 99, 214, .38);
  box-shadow: var(--shadow);
}
.acesso:hover::after,
.acesso:focus-visible::after { opacity: 1; }
.acesso:focus-visible { outline: 2px solid var(--blue-soft); outline-offset: 3px; }

.acesso__topo {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 18px;
}
.acesso__ico {
  width: 50px; height: 50px;
  display: grid;
  place-items: center;
  border-radius: 15px;
  background: rgba(46, 99, 214, .12);
  border: 1px solid rgba(46, 99, 214, .28);
  color: var(--blue-soft);
  flex: 0 0 auto;
}
.acesso__ico svg { width: 24px; height: 24px; }
.acesso--verde .acesso__ico {
  background: rgba(34, 164, 74, .12);
  border-color: rgba(34, 164, 74, .30);
  color: var(--green-soft);
}

.acesso__tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--muted);
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, .03);
  border-radius: 999px;
  padding: 5px 10px;
  white-space: nowrap;
}
.acesso__tag svg { width: 13px; height: 13px; }
.acesso__tag--restrito { color: var(--warn); border-color: rgba(245, 185, 66, .32); background: var(--warn-bg); }

.acesso h3 { margin: 0 0 8px; color: var(--text-strong); font-size: 1.14rem; }
.acesso p { margin: 0; color: var(--muted); font-size: .93rem; line-height: 1.6; }

.acesso__ir {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  padding-top: 20px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: .92rem;
  color: var(--blue-soft);
}
.acesso__ir svg { width: 16px; height: 16px; transition: transform .2s ease; }
.acesso:hover .acesso__ir { color: var(--green-soft); }
.acesso:hover .acesso__ir svg { transform: translateX(4px); }

.acesso__dominio {
  display: block;
  margin-top: 6px;
  font-size: .8rem;
  color: var(--muted-2);
  word-break: break-all;
}

/* Responsivo
   Entre 1201 e 1400 px o menu completo já ocupa o cabeçalho inteiro: o botão
   vira só o ícone e, abaixo de 1280 px, sai do cabeçalho (o atalho continua
   no menu do celular, no rodapé e na própria seção). Abaixo de 1201 px o menu
   recolhe e sobra espaço de novo para o botão com texto. */
/* (só max-width, em cascata: com zoom a largura pode ser fracionada, e um
   intervalo "min 1201 / max 1200" deixaria um vão em que nenhuma regra vale) */
@media (max-width: 1400px) {
  .header-actions .btn-acessos { padding: 11px; }
  .header-actions .btn-acessos span { display: none; }
}
@media (max-width: 1279.98px) {
  .header-actions .btn-acessos { display: none; }
}
@media (max-width: 1200px) {
  .header-actions .btn-acessos { display: inline-flex; padding: 12px 20px; }
  .header-actions .btn-acessos span { display: inline; }
  .acessos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .acessos { grid-template-columns: minmax(0, 1fr); }
}

@media (forced-colors: active) {
  .acesso { border: 1px solid CanvasText; }
}