/* =============================
   RR Productos Slider (Front)
   Scope: .rrps
   ============================= */
.rrps{
  background: var(--rrps-bg);
  padding: 52px 18px;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Inter, Arial, sans-serif;
}
.rrps__inner{
  max-width: var(--rrps-maxw);
  margin: 0 auto;
  position: relative;
}
.rrps__head{
  text-align: center;
  margin-bottom: 18px;
}
.rrps__title{
  margin: 0;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--rrps-primary);
  font-size: clamp(26px, 3.4vw, 44px);
}
.rrps__kicker{
  margin-top: 8px;
  color: var(--rrps-primary);
  opacity: .78;
  font-weight: 600;
  font-size: 14px;
}

.rrps__stage{
  position: relative;
}

.rrps__track{
  display: flex;
  gap: var(--rrps-gap);
  padding: 10px 6px 22px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-left: 6px;
  scrollbar-width: none;
}
.rrps__track::-webkit-scrollbar{ display:none; }

.rrps--grid .rrps__track{
  overflow: visible;
  flex-wrap: wrap;
  justify-content: center;
  scroll-snap-type: none;
}
.rrps.is-centered .rrps__track{
  justify-content: center;
}
.rrps--slider.is-centered .rrps__nav{
  display:none;
}

.rrps__nav{
  position: absolute;
  top: 50%;
  transform: translateY(-56%);
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 0;
  background: var(--rrps-nav-bg);
  color: var(--rrps-nav-ink);
  box-shadow: 0 18px 40px -22px rgba(0,0,0,.5);
  cursor: pointer;
  display: grid;
  place-items: center;
  z-index: 5;
  transition: transform .15s ease, opacity .15s ease;
}
.rrps__nav span{
  font-size: 28px;
  line-height: 1;
  transform: translateY(-1px);
}
.rrps__nav:hover{ transform: translateY(-56%) scale(1.04); }
.rrps__nav:active{ transform: translateY(-56%) scale(.98); }
.rrps__nav--prev{ left: -8px; }
.rrps__nav--next{ right: -8px; }

.rrps__card{
  flex: 0 0 var(--rrps-cardw);
  max-width: var(--rrps-cardw);
  background: var(--rrps-cardbg);
  border-radius: var(--rrps-radius);
  box-shadow: var(--rrps-shadow);
  padding: 14px 14px 16px;
  scroll-snap-align: center;
  position: relative;
}
.rrps__img{
  display: block;
  margin-bottom: 14px;
  position: relative;
  border-radius: calc(var(--rrps-radius) - 6px);
  overflow: hidden;
  background: #fff;
  aspect-ratio: var(--rrps-imgratio);
  box-shadow: 0 16px 24px -20px rgba(0,0,0,.35) inset;
}
.rrps__imgtag{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display:block;
  transform: scale(1.001);
  transition: transform .35s ease;
}
.rrps__img:hover .rrps__imgtag{
  transform: scale(1.05);
}
.rrps__imgph{
  position: absolute;
  inset: 0;
  display:grid;
  place-items:center;
  color: var(--rrps-muted);
  font-weight: 700;
  background: linear-gradient(135deg, rgba(24,112,128,.10), rgba(240,152,168,.10));
}

.rrps__badge{
  position: absolute;
  top: 10px;
  left: 10px;
  padding: 8px 12px;
  border-radius: 999px;
  background: var(--rrps-badge-bg);
  color: var(--rrps-badge-ink);
  font-weight: 800;
  font-size: 12px;
  letter-spacing: .06em;
  text-transform: uppercase;
  box-shadow: 0 18px 26px -20px rgba(0,0,0,.55);
}

.rrps__name{
  margin: 12px 6px 6px;
  font-size: 16px;
  line-height: 1.2;
  font-weight: 800;
  text-align: center;
}
.rrps__name a{
  color: var(--rrps-ink);
  text-decoration: none;
}
.rrps__name a:hover{
  color: var(--rrps-primary);
}

.rrps__price{
  text-align: center;
  margin: 2px 6px 14px;
  padding: 6px 0 4px;
  font-weight: 900;
  font-size: 20px;
  letter-spacing: .01em;
  color: var(--rrps-btn-bg);
}
.rrps__price del{
  opacity: .55;
  margin-right: 6px;
  font-weight: 700;
}
.rrps__price ins{
  text-decoration: none;
  color: var(--rrps-btn-bg);
}

.rrps__actions{
  display: grid;
  gap: 10px;
  margin-top: 10px;
}

.rrps__cart{
  display: grid;
  gap: 10px;
}

.rrps__qty{
  display:flex;
  align-items:center;
  justify-content: center;
  border: 1px solid rgba(14,34,57,.14);
  border-radius: 999px;
  overflow: hidden;
  height: 40px;
  background: rgba(255,255,255,.7);
}
.rrps__qtybtn{
  width: 44px;
  height: 40px;
  border: 0;
  background: transparent;
  color: var(--rrps-ink);
  font-size: 18px;
  font-weight: 800;
  cursor: pointer;
}
.rrps__qtybtn:hover{
  background: rgba(24,112,128,.10);
}
.rrps__qtyin{
  width: 54px !important;
  text-align: center;
  border: 0 !important;
  outline: none;
  background: transparent !important;
  font-weight: 800;
  color: var(--rrps-ink);
  -moz-appearance: textfield;
}
.rrps__qtyin::-webkit-outer-spin-button,
.rrps__qtyin::-webkit-inner-spin-button{
  -webkit-appearance: none;
  margin: 0;
}

.rrps__btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width: 100%;
  height: 44px;
  padding: 0 16px;
  border-radius: 999px;
  border: 2px solid var(--rrps-btn-bg);
  background: var(--rrps-btn-bg);
  color: var(--rrps-btn-ink);
  font-weight: 900;
  letter-spacing: .02em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  box-sizing: border-box;
  box-shadow: 0 22px 36px -24px rgba(0,0,0,.55);
  transition: transform .15s ease, background .15s ease, color .15s ease, border-color .15s ease;
}
.rrps__btn:hover{
  transform: translateY(-1px);
  background: #ffffff;
  color: var(--rrps-btn-bg);
  border-color: var(--rrps-btn-bg);
}
.rrps__btn:active{ transform: translateY(0px); }

.rrps__btn--alt{
  background: var(--rrps-btn2-bg);
  color: var(--rrps-btn2-ink);
}

@media (max-width: 520px){
  .rrps__nav{ display:none; }
  .rrps__track{ padding-left: 2px; padding-right: 2px; }
  .rrps__card{ flex-basis: min(84vw, 320px); max-width: min(84vw, 320px); }
}


.rrps__btn--wa{
  background: var(--rrps-secondary);
  color: #ffffff;
  border-color: var(--rrps-secondary);
}
.rrps__btn--wa:hover{
  background:#ffffff;
  color: var(--rrps-secondary);
  border-color: var(--rrps-secondary);
}
/* Hover tarjeta: elevación + sombra rosada */
.rrps__card{
  transition: transform .18s ease, box-shadow .18s ease;
}
.rrps__card:hover{
  transform: translateY(-4px);
  box-shadow: 0 28px 64px -32px rgba(245, 118, 160, .55);
}

.rrps__btn--alt{
  background: var(--rrps-btn2-bg);
  color: var(--rrps-btn2-ink);
  border-color: var(--rrps-btn2-bg);
}
.rrps__btn--alt:hover{
  background:#ffffff;
  color: var(--rrps-btn2-bg);
  border-color: var(--rrps-btn2-bg);
}