/* =========================================================
   STICKERBIKE — PREFOOTER RIDER
   ========================================================= */
.rider-prefooter{
  width:100%;
  background:
    linear-gradient(
      135deg,
      var(--brand-secondary,#0b1f3a) 0%,
      color-mix(in srgb,var(--brand-secondary,#0b1f3a) 86%,black) 100%
    );
  color:#fff;
}

.rider-prefooter-grid{
  width:100%;
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
}

.rider-benefit{
  position:relative;
  min-width:0;
  min-height:185px;
  display:flex;
  align-items:center;
  gap:16px;
  padding:28px clamp(18px,2.4vw,42px);
  border-right:1px solid rgba(255,255,255,.11);
  overflow:hidden;
}

.rider-benefit:last-child{
  border-right:0;
}

.rider-benefit::before{
  content:'';
  position:absolute;
  left:0;
  top:0;
  width:0;
  height:3px;
  background:var(--brand-primary,#ff6413);
  transition:width .22s ease;
}

.rider-benefit-icon{
  width:52px;
  height:52px;
  flex:0 0 52px;
  display:grid;
  place-items:center;
  border:1px solid rgba(255,255,255,.18);
  border-radius:14px;
  background:rgba(255,255,255,.055);
  color:var(--brand-primary,#ff6413);
}

.rider-benefit-icon svg{
  width:31px;
  height:31px;
  fill:none;
  stroke:currentColor;
  stroke-width:2;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.rider-benefit>div:last-child,
.rider-tracking-content{
  min-width:0;
}

.rider-benefit span{
  display:block;
  margin-bottom:5px;
  color:rgba(255,255,255,.52);
  font-size:7.5px;
  font-weight:900;
  letter-spacing:.12em;
  text-transform:uppercase;
}

.rider-benefit h3{
  margin:0;
  color:#fff;
  font-size:14px;
  line-height:1.08;
  font-weight:950;
  letter-spacing:-.015em;
}

.rider-benefit p{
  max-width:245px;
  margin:7px 0 0;
  color:rgba(255,255,255,.68);
  font-size:10px;
  line-height:1.45;
}

.rider-benefit-tracking{
  background:rgba(0,0,0,.12);
}

.rider-benefit-tracking .rider-benefit-icon{
  align-self:flex-start;
  margin-top:2px;
}

.rider-tracking-content{
  flex:1 1 auto;
}

.rider-ot-form{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:6px;
  margin-top:11px;
}

.rider-ot-form input{
  width:100%;
  min-width:0;
  height:38px;
  padding:0 10px;
  border:1px solid rgba(255,255,255,.18);
  border-radius:8px;
  outline:none;
  background:rgba(255,255,255,.095);
  color:#fff;
  font-size:10px;
  font-weight:800;
}

.rider-ot-form input::placeholder{
  color:rgba(255,255,255,.46);
}

.rider-ot-form input:focus{
  border-color:var(--brand-primary,#ff6413);
  background:rgba(255,255,255,.13);
}

.rider-ot-form button{
  min-height:38px;
  padding:0 11px;
  border:0;
  border-radius:8px;
  background:var(--brand-primary,#ff6413);
  color:#fff;
  font-size:8px;
  font-weight:950;
  letter-spacing:.04em;
  cursor:pointer;
  white-space:nowrap;
}

@media (hover:hover) and (pointer:fine){
  .rider-benefit:hover::before{
    width:100%;
  }

  .rider-benefit:hover .rider-benefit-icon{
    background:color-mix(in srgb,var(--brand-primary,#ff6413) 12%,transparent);
    border-color:color-mix(in srgb,var(--brand-primary,#ff6413) 42%,transparent);
  }
}

@media(max-width:1120px){
  .rider-prefooter-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .rider-benefit{
    border-bottom:1px solid rgba(255,255,255,.11);
  }

  .rider-benefit:nth-child(2){
    border-right:0;
  }

  .rider-benefit:nth-child(3),
  .rider-benefit:nth-child(4){
    border-bottom:0;
  }
}

@media(max-width:620px){
  .rider-prefooter-grid{
    grid-template-columns:1fr;
  }

  .rider-benefit{
    min-height:auto;
    padding:20px;
    border-right:0;
    border-bottom:1px solid rgba(255,255,255,.11) !important;
  }

  .rider-benefit:last-child{
    border-bottom:0 !important;
  }

  .rider-benefit-icon{
    width:46px;
    height:46px;
    flex-basis:46px;
  }

  .rider-benefit-icon svg{
    width:27px;
    height:27px;
  }

  .rider-benefit h3{
    font-size:13px;
  }

  .rider-benefit p{
    font-size:10px;
  }

  .rider-ot-form{
    grid-template-columns:1fr;
  }

  .rider-ot-form input{
    height:44px;
    font-size:16px;
  }

  .rider-ot-form button{
    min-height:44px;
  }
}


/* =========================================================
   PREFOOTER RIDER v2 — WALLPAPER + TIPOGRAFÍA MAYOR
   ========================================================= */

.rider-prefooter{
  position:relative;
  background:
    linear-gradient(
      rgba(8,45,89,.82),
      rgba(8,45,89,.82)
    ),
    url('../img/prefooter.jpg') center center / cover no-repeat !important;
  color:#fff;
}

.rider-prefooter::before{
  content:'';
  position:absolute;
  inset:0;
  background:
    linear-gradient(
      90deg,
      rgba(4,22,42,.20) 0%,
      rgba(4,22,42,.08) 50%,
      rgba(4,22,42,.20) 100%
    );
  pointer-events:none;
}

.rider-prefooter-grid{
  position:relative;
  z-index:1;
}

.rider-benefit{
  min-height:205px !important;
  padding:32px clamp(22px,2.6vw,46px) !important;
  background:rgba(6,37,74,.08);
  backdrop-filter:saturate(110%);
}

.rider-benefit-icon{
  width:58px !important;
  height:58px !important;
  flex-basis:58px !important;
  border-color:rgba(255,255,255,.22) !important;
  background:rgba(255,255,255,.07) !important;
}

.rider-benefit-icon svg{
  width:34px !important;
  height:34px !important;
}

.rider-benefit span{
  margin-bottom:6px !important;
  color:rgba(255,255,255,.68) !important;
  font-size:8.8px !important;
  letter-spacing:.13em !important;
}

.rider-benefit h3{
  font-size:16px !important;
  line-height:1.1 !important;
}

.rider-benefit p{
  max-width:290px !important;
  margin-top:8px !important;
  color:rgba(255,255,255,.82) !important;
  font-size:11.5px !important;
  line-height:1.5 !important;
}

.rider-benefit-tracking{
  background:rgba(4,28,58,.24) !important;
}

.rider-ot-form{
  margin-top:13px !important;
}

.rider-ot-form input{
  height:42px !important;
  font-size:11px !important;
  background:rgba(255,255,255,.12) !important;
}

.rider-ot-form button{
  min-height:42px !important;
  padding:0 14px !important;
  font-size:8.8px !important;
}

@media(max-width:1120px){
  .rider-prefooter{
    background-position:center center !important;
  }
}

@media(max-width:620px){
  .rider-prefooter{
    background:
      linear-gradient(
        rgba(8,45,89,.86),
        rgba(8,45,89,.86)
      ),
      url('../img/prefooter.jpg') 72% center / cover no-repeat !important;
  }

  .rider-benefit{
    min-height:auto !important;
    padding:22px 20px !important;
  }

  .rider-benefit-icon{
    width:50px !important;
    height:50px !important;
    flex-basis:50px !important;
  }

  .rider-benefit-icon svg{
    width:29px !important;
    height:29px !important;
  }

  .rider-benefit span{
    font-size:8.5px !important;
  }

  .rider-benefit h3{
    font-size:14px !important;
  }

  .rider-benefit p{
    font-size:11px !important;
  }
}


/* =========================================================
   PREFOOTER RIDER v3 — VER OT SIMPLE
   ========================================================= */
.rider-benefit-ot-simple{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  padding:0 !important;
  background:rgba(4,28,58,.18) !important;
}

.rider-ot-simple-link{
  width:100%;
  min-height:205px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  padding:28px;
  color:#fff !important;
  text-decoration:none;
  transition:background .18s ease;
}

.rider-ot-simple-link span{
  margin:0 !important;
  color:#fff !important;
  font-size:18px !important;
  font-weight:950 !important;
  letter-spacing:.035em !important;
}

.rider-ot-simple-link b{
  color:var(--brand-primary,#ff6413);
  font-size:24px;
  line-height:1;
  transition:transform .18s ease;
}

@media (hover:hover) and (pointer:fine){
  .rider-ot-simple-link:hover{
    background:rgba(255,255,255,.055);
  }

  .rider-ot-simple-link:hover b{
    transform:translateX(4px);
  }
}

@media(max-width:620px){
  .rider-ot-simple-link{
    min-height:92px;
  }

  .rider-ot-simple-link span{
    font-size:16px !important;
  }
}


/* =========================================================
   PREFOOTER RIDER v4 — VER OT + FORMULARIO COMPACTO
   ========================================================= */

.rider-benefit-ot-form-only{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  padding:24px 28px !important;
  background:rgba(4,28,58,.20) !important;
}

.rider-ot-only-wrap{
  width:100%;
  max-width:390px;
}

.rider-ot-only-wrap h3{
  margin:0 0 10px !important;
  color:#fff !important;
  font-size:17px !important;
  line-height:1 !important;
  font-weight:950 !important;
  letter-spacing:.02em !important;
}

.rider-ot-form-compact{
  display:grid !important;
  grid-template-columns:minmax(0,1fr) auto !important;
  gap:7px !important;
  margin:0 !important;
}

.rider-ot-form-compact input{
  height:40px !important;
  min-width:0;
  padding:0 11px !important;
  border:1px solid rgba(255,255,255,.22) !important;
  border-radius:8px !important;
  background:rgba(255,255,255,.11) !important;
  color:#fff !important;
  font-size:10.5px !important;
  font-weight:800 !important;
}

.rider-ot-form-compact input::placeholder{
  color:rgba(255,255,255,.50) !important;
}

.rider-ot-form-compact button{
  min-height:40px !important;
  padding:0 13px !important;
  border:0 !important;
  border-radius:8px !important;
  background:var(--brand-primary,#ff6413) !important;
  color:#fff !important;
  font-size:8.5px !important;
  font-weight:950 !important;
  letter-spacing:.04em !important;
  cursor:pointer;
}

@media(max-width:620px){
  .rider-benefit-ot-form-only{
    padding:20px !important;
  }

  .rider-ot-only-wrap{
    max-width:none;
  }

  .rider-ot-only-wrap h3{
    font-size:15px !important;
  }

  .rider-ot-form-compact{
    grid-template-columns:1fr !important;
  }

  .rider-ot-form-compact input{
    height:44px !important;
    font-size:16px !important;
  }

  .rider-ot-form-compact button{
    min-height:44px !important;
  }
}