/* =========================================================
   STICKERBIKE — BANNER PARA RIDERS
   Debajo del slider
   ========================================================= */

.riders-subslider{
  position:relative;
  width:100%;
  height:240px;
  min-height:240px;
  display:flex;
  align-items:center;
  overflow:hidden;

  background-image:url('../img/banner-subslider.jpg');
  background-repeat:no-repeat;
  background-position:right center;
  background-size:cover;
  background-attachment:fixed;

  color:#fff;
}

.riders-subslider-overlay{
  position:absolute;
  inset:0;
  background:
    linear-gradient(
      90deg,
      rgba(5,15,27,.94) 0%,
      rgba(5,15,27,.86) 28%,
      rgba(5,15,27,.42) 58%,
      rgba(5,15,27,.08) 100%
    );
  pointer-events:none;
}

.riders-subslider-content{
  position:relative;
  z-index:2;
  width:min(100%,1500px);
  margin:0 auto;
  padding:0 clamp(30px,6vw,105px);
}

.riders-subslider-content>span{
  display:block;
  margin-bottom:5px;
  color:var(--brand-primary,#ff6413);
  font-size:10px;
  font-weight:950;
  letter-spacing:.14em;
  text-transform:uppercase;
}

.riders-subslider-content h2{
  margin:0;
  color:#fff;
  font-size:clamp(38px,4vw,66px);
  line-height:.92;
  font-weight:950;
  letter-spacing:-.045em;
}

.riders-subslider-content p{
  max-width:490px;
  margin:12px 0 0;
  color:rgba(255,255,255,.82);
  font-size:12px;
  line-height:1.5;
}

/* Safari/iOS no maneja bien background-attachment: fixed */
@media(max-width:800px){
  .riders-subslider{
    height:210px;
    min-height:210px;
    background-attachment:scroll;
    background-position:68% center;
  }

  .riders-subslider-overlay{
    background:
      linear-gradient(
        90deg,
        rgba(5,15,27,.92) 0%,
        rgba(5,15,27,.78) 55%,
        rgba(5,15,27,.28) 100%
      );
  }

  .riders-subslider-content{
    padding:0 20px;
  }

  .riders-subslider-content h2{
    font-size:39px;
  }

  .riders-subslider-content p{
    max-width:310px;
    font-size:11px;
  }
}