/* top-categories.css — sección universal top_categories (carrusel de categorías). */
.tc { padding: 48px 0; }
.tc__header {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: 10px; margin-bottom: 28px;
}
.tc__title {
  font-size: clamp(20px, 3vw, 34px); letter-spacing: .06em;
  text-transform: uppercase; font-weight: 700; margin: 0;
}
.tc__viewall {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  letter-spacing: .08em; text-transform: uppercase; font-size: 13px;
  text-decoration: none; color: inherit; white-space: nowrap;
}
.tc__viewall:hover { opacity: .7; }

/* .tc__viewport reserva espacio lateral para las flechas pero NO recorta
   (si recortara aquí, el padding quedaría "dentro" del área de clip y
   dejaría asomar fragmentos de los tiles clonados del loop). El recorte
   real ocurre en .tc__clip, sin padding, pegado al borde exacto de 6 tiles. */
.tc__viewport { position: relative; padding: 0 52px; }
.tc__clip { overflow: hidden; }
.tc__track { display: flex; will-change: transform; touch-action: pan-y; cursor: grab; }
.tc__track:active { cursor: grabbing; }
.tc__tile {
  flex: 0 0 calc(100% / var(--tc-cols, 6)); box-sizing: border-box;
  display: block; padding: 0 20px; text-decoration: none; color: inherit;
}
.tc__img {
  position: relative; width: 100%; aspect-ratio: 1 / 1;
  background-size: cover; background-position: center; overflow: hidden;
}
.tc__track.is-round .tc__img { border-radius: 50%; }
.tc__track.is-square .tc__img { border-radius: 10px; }

/* Nombre de la categoría: overlay oculto, aparece con scrim al hacer hover.
   font-size en clamp para no verse desproporcionado cuando el tile encoge
   (tablet/móvil, ver media queries). */
.tc__label {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  padding: 0 14%; text-align: center;
  font-size: clamp(10px, 1.6vw, 15px); font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: #fff; background: rgba(20, 20, 16, .38);
  opacity: 0; transition: opacity .25s ease; pointer-events: none;
}
.tc__tile:hover .tc__label,
.tc__tile:focus-visible .tc__label { opacity: 1; }

.tc__nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  z-index: 2; width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, .12); background: rgba(255, 255, 255, .88);
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  font-size: 16px; line-height: 1; color: #111;
}
.tc__nav:hover { background: #fff; }
.tc__nav--prev { left: 4px; }
.tc__nav--next { right: 4px; }

@media (max-width: 1024px) {
  .tc__tile { flex-basis: 25%; }                 /* tablet: 4 */
  .tc__label { font-size: 11px; padding: 0 10%; }
}
@media (max-width: 640px) {
  .tc__tile { flex-basis: 40%; }                 /* móvil: ~2.5, drag */
  .tc__viewport { padding: 0 8px; }
  .tc__nav { display: none; }
  .tc__label { font-size: 10px; padding: 0 8%; letter-spacing: .03em; }
}