/* Slider de herramientas de la portada */

.tools-slider { max-width: 1100px; margin: 28px auto 0; padding: 0 20px; }
.ts-head { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.ts-head h2 { margin: 0; font-size: 1.5rem; text-transform: uppercase; letter-spacing: .02em; }
.ts-all {
  background: var(--accent); color: #1a1405; font-weight: 800; font-size: .78rem; text-transform: uppercase;
  padding: 8px 16px; border-radius: 8px; text-decoration: none;
}
.ts-all:hover { filter: brightness(1.1); }
.ts-arrows { margin-left: auto; display: flex; gap: 8px; }
.ts-group { margin-bottom: 8px; }
.ts-sub { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin: 6px 0 8px; }
.ts-sub h3 { margin: 0; font-size: 1.05rem; color: var(--text); }
.ts-ver { font-size: .72rem; font-weight: 700; color: var(--accent); border: 1px solid var(--accent); border-radius: 999px; padding: 1px 8px; margin-left: 6px; vertical-align: middle; }
.ts-tag { color: var(--text-dim); font-size: .85rem; }
.ts-sub .ts-arrows { align-self: center; }
.ts-arrow {
  width: 40px; height: 40px; border-radius: 10px; border: 1px solid var(--border); background: var(--bg-elevated);
  color: var(--text); font-size: 1.2rem; cursor: pointer; display: grid; place-items: center; font: inherit; font-size: 1.2rem;
}
.ts-arrow:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.ts-arrow:disabled { opacity: .35; cursor: default; }

.ts-track {
  display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x proximity; scroll-behavior: smooth;
  padding: 4px 2px 12px; scrollbar-width: none;
}
.ts-track::-webkit-scrollbar { display: none; }
.ts-track:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 2px; border-radius: 12px; }

.ts-card {
  flex: 0 0 118px; scroll-snap-align: start; display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 14px 8px 10px; background: var(--bg-card); border: 1px solid var(--border); border-radius: 14px;
  color: var(--text); text-decoration: none; text-align: center;
}
.ts-card:hover { border-color: var(--accent); transform: translateY(-2px); }
.ts-card { transition: border-color .15s, transform .15s; }
.ts-icon { width: 56px; height: 56px; display: grid; place-items: center; font-size: 2.2rem; line-height: 1; }
.ts-icon img { width: 56px; height: 56px; border-radius: 12px; border: 1px solid var(--border); object-fit: cover; }
.ts-label {
  font-size: .76rem; line-height: 1.25; color: var(--text-dim);
  display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.ts-card:hover .ts-label { color: var(--text); }

@media (max-width: 640px) {
  .tools-slider { padding: 0 14px; }
  .ts-head h2 { font-size: 1.15rem; }
  .ts-arrow { width: 34px; height: 34px; }
  .ts-card { flex-basis: 104px; }
}
@media (prefers-reduced-motion: reduce) {
  .ts-track { scroll-behavior: auto; }
  .ts-card { transition: none; }
}

.ts-sublabel { font-size: .68rem; font-weight: 700; color: var(--accent); }
.ts-card { flex-basis: 150px; }
@media (max-width: 640px) { .ts-card { flex-basis: 128px; } }