/* Ferramentas: faixa de logótipos em movimento e grupos por uso.
   Logótipos Simple Icons (CC0) em assets/ferramentas/, a navy e locais (a CSP só
   aceita imagens do próprio site). A faixa são duas listas iguais lado a lado; a
   segunda só existe para o laço não ter salto e está escondida dos leitores de ecrã. */

.tool { display: inline-flex; align-items: center; gap: var(--space-2xs); flex: none; font-weight: var(--weight-semibold); white-space: nowrap; }
.tool img { width: 1.75rem; height: 1.75rem; }
.tool__mono { display: grid; place-items: center; width: 1.75rem; height: 1.75rem; border-radius: var(--radius-pill); background: var(--bmd-navy); color: var(--color-text-invert); font-size: var(--text-sm); font-weight: var(--weight-bold); }

/* ---- Faixa ---- */
.tools-marquee { display: flex; overflow: hidden; margin-block: var(--space-lg); padding-block: var(--space-sm); -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent); }
.tools-track { display: flex; flex: none; gap: var(--space-xl); margin: 0; padding: 0 var(--space-xl) 0 0; list-style: none; animation: tools-desliza 50s linear infinite; }
.tools-marquee:hover .tools-track, .tools-marquee:focus-within .tools-track { animation-play-state: paused; }
.tools-track .tool { opacity: .78; transition: opacity var(--dur-base) var(--ease-out); }
.tools-track .tool:hover { opacity: 1; }
@keyframes tools-desliza { to { transform: translateX(-100%); } }

/* Sem movimento: uma lista parada, que quebra linha, e sem a cópia. */
@media (prefers-reduced-motion: reduce) {
  .tools-marquee { -webkit-mask-image: none; mask-image: none; }
  .tools-track { flex-wrap: wrap; flex: 1; justify-content: center; gap: var(--space-sm) var(--space-lg); padding: 0; animation: none; }
  .tools-track[aria-hidden="true"] { display: none; }
}

/* ---- Grupos (Como trabalho) ---- */
.tool-groups { margin-top: var(--space-lg); }
.tool-group h3 { font-size: var(--text-lg); }
.tool-list { display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-md); margin: var(--space-sm) 0 0; padding: 0; list-style: none; }
.tool-list .tool { font-size: var(--text-sm); }
.tool-list .tool img, .tool-list .tool__mono { width: 1.4rem; height: 1.4rem; font-size: var(--text-xs); }

/* ---- Faixa na página inicial ---- */
.tools-band { padding-block: var(--space-xl) var(--space-lg); border-top: 1px solid var(--color-border); }
.tools-band__head { display: grid; gap: var(--space-2xs); }
.tools-band__head h2 { font-size: var(--text-2xl); }
.tools-band__head p { color: var(--color-text-muted); }
@media (min-width: 55em) { .tools-band__head { grid-template-columns: auto 1fr; align-items: baseline; gap: var(--space-lg); } }

/* Logótipo que já é o nome (Wix): o ícone é quadrado com a palavra ao meio, por isso
   cresce nas duas medidas, sem aumentar a altura da linha. */
.tool--wordmark img { width: 2.75rem; height: 2.75rem; margin-block: -.5rem; }
.tool-list .tool--wordmark img { width: 2.25rem; height: 2.25rem; margin-block: -.425rem; }