/* =====================================================================
   DUALL — Coverflow de reels (video central grande + laterales chicos)
   Carrusel con transform (fluido en todos los navegadores).
   ===================================================================== */
.cf{
  position:relative; width:100%; overflow:hidden;
  padding-block:clamp(2rem,5vw,3.4rem);
  cursor:grab; touch-action:pan-y; -webkit-user-select:none; user-select:none;
}
.cf.dragging{ cursor:grabbing; }
.cf-track{
  display:flex; align-items:center; gap:clamp(1rem,2.4vw,2rem);
  width:max-content; will-change:transform;
}

/* tarjeta base = lateral (chica, un poco atenuada — no tan oscura) */
.cf .reel{
  flex:0 0 auto;
  width:clamp(170px,19vw,250px);
  aspect-ratio:9/16;
  transform:scale(.78);
  opacity:.72;
  filter:brightness(.82) saturate(.98);
  transition:transform .85s cubic-bezier(.16,.84,.32,1),
             opacity .85s cubic-bezier(.16,.84,.32,1),
             filter .85s cubic-bezier(.16,.84,.32,1);
}
.cf .reel:hover{ transform:scale(.78); }

/* tarjeta central = grande, nítida, al frente */
.cf .reel.is-active{
  transform:scale(1.14);
  opacity:1;
  filter:none;
  z-index:3;
  box-shadow:0 34px 80px -30px rgba(0,0,0,.7), var(--hi);
  cursor:pointer;
}
.cf .reel.is-active:hover{ transform:scale(1.14); }

/* puntos indicadores */
.cf-dots{ display:flex; gap:.55rem; justify-content:center; margin-top:clamp(1.2rem,3vw,2rem); }
.cf-dots b{
  width:7px; height:7px; border-radius:50%; background:var(--cream);
  opacity:.28; cursor:pointer; transition:opacity .3s, width .3s, border-radius .3s;
}
.cf-dots b.on{ opacity:1; width:22px; border-radius:4px; }

@media (max-width:600px){
  .cf .reel{ width:clamp(150px,52vw,200px); }
  .cf .reel.is-active{ transform:scale(1.1); }
  .cf .reel.is-active:hover{ transform:scale(1.1); }
}