:root{ --tile-min-xs:72%; --tile-min-md:38%; --tile-min-lg:22%; }


  /* Rail Netflix */
  .rail{ position:relative; overflow:hidden; }
  .rail-title{ font-weight:700; margin:0 0 .6rem; }
  .rail-track{
    display:flex; gap:.75rem; overflow-x:auto; scroll-behavior:smooth;
    padding:0 .5rem .5rem;
  }
  .rail-track::-webkit-scrollbar{ height:6px; }
  .rail-track::-webkit-scrollbar-thumb{ background:#20568d; border-radius:10px; }

  .tile{ flex:0 0 var(--tile-min-xs); }
  @media (min-width:768px){ .tile{ flex-basis:var(--tile-min-md); } }
  @media (min-width:1200px){ .tile{ flex-basis:var(--tile-min-lg); } }

  .tile-card{
    background:#20568d !important; border:0; border-radius:.5rem; overflow:hidden; position:relative;
    transition:transform .18s ease, box-shadow .18s ease;
  }
  .tile-card:hover{ transform:translateY(-4px) scale(1.03); box-shadow:0 8px 24px rgba(12, 83, 160, 0.45); }
  .poster{ width:100%; aspect-ratio:16/9; object-fit:cover; object-position:center; display:block; }
  .tile-body{ padding:.75rem; }
  .tile-body .title{ font-size:.95rem; margin:0 0 .25rem; line-height:1.2; }
  .tile-body .meta{ font-size:.8rem; color:#bbb; }
  .overlay{
    position:absolute; inset:0; display:flex; align-items:end; padding:.75rem;
    background:linear-gradient(180deg, transparent 45%, rgba(23, 128, 232, 0.65));
    opacity:0; transition:opacity .18s ease;
  }
  .tile-card:hover .overlay{ opacity:1; }

  .rail-btn{
    position:absolute; top:50%; transform:translateY(-50%);
    width:44px; height:44px; border:0; border-radius:50%; background:rgb(32 86 141);
    display:grid; place-items:center; color:#fff;
  }
  .rail-btn:hover{ background:rgb(32 86 141); }
  .rail-btn.prev{ left:.25rem; }      /* sin valores negativos */
  .rail-btn.next{ right:.25rem; }

  /* ==== FIX VISIBILIDAD FLECHAS ==== */
.rail{ position:relative; overflow:visible; }                 /* no las recortes */
.rail-btn{
  position:absolute; top:50%; transform:translateY(-50%);
  width:44px; height:44px; border:0; border-radius:50%;
  background:#20568d; color:#fff; display:grid; place-items:center;
  z-index:10;                                                /* por arriba del track */
  box-shadow:0 6px 18px rgba(0,0,0,.25);
}
.rail-btn:hover{ background:#1b4c7a; }
.rail-btn.prev{ left:.25rem; }
.rail-btn.next{ right:.25rem; }

/* Si las deshabilitas, que se note */
.rail-btn:disabled{ opacity:.35; pointer-events:none; }

/* El overlay de cada tarjeta no debe tapar clics de las flechas */
.overlay{ pointer-events:none; }

/* Track por debajo de las flechas */
.rail-track{ position:relative; z-index:1; }

/* En móvil, mantén flechas visibles (o cámbialas a none si quieres) */
@media (max-width:576px){
  .rail-btn{ display:grid; }
}

  @media (max-width:576px){ .rail-btn{ display:block; } } /* en móvil: gesto táctil */