:root {
  --reel-fixed-h: 140px;              /* Alto fijo del carrete (cambiable) */
  --gap: 10px;
  --card-w-desktop: clamp(140px, 16vw, 240px);
  --card-w-mobile: clamp(120px, 38vw, 220px);
  --bg: transparent;
  --card-bg: #161616;
  --card-bd: #2a2a2a;
  --card-radius: 12px;
  --active: #00e1b4;
}
html, body { margin:0; padding:0; overflow:hidden; background:var(--bg); }
.reel { 
  width:100%;
  height: var(--reel-fixed-h);        /* Alto fijo */
  overflow-x:auto; overflow-y:hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  box-sizing:border-box;
}
.track {
  display:flex; flex-wrap:nowrap; gap:var(--gap);
  width:max-content; height:100%;
  padding:10px 12px;
  box-sizing:border-box;
  scroll-snap-type:x proximity;
  align-items:center;
}
.item {
  flex:0 0 var(--card-w-desktop);
  max-width:var(--card-w-desktop);
  min-width:120px;
  height:calc(100% - 2px);
  display:flex; align-items:center; justify-content:center;
  background:var(--card-bg); border:1px solid var(--card-bd);
  border-radius:var(--card-radius);
  scroll-snap-align:start;
  cursor:pointer;
}
.item img { display:block; max-width:100%; height:auto; }
.item.active { outline:2px solid var(--active); outline-offset:-2px; }
/* Mismo alto fijo también en móvil (sin vh). Se pueden ajustar anchos de cards si querés. */
@media (max-width:768px){
  .item { flex-basis:var(--card-w-mobile); max-width:var(--card-w-mobile); }
}