/* ============================================
   FICHA DE PRODUCTO ROGSTAR
   Plantilla unica para todos los productos
   ============================================ */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800;900&display=swap');

.rgpr {
  --navy: #07253C;
  --navy-lt: #0a3250;
  --leather: #6b5349;
  --tan: #c9a227;
  --cream: #f7f6f3;
  --line: #e0ddd8;
  --muted: #8a8580;
  --green: #2e7d32;
  --green-bg: #e8f5e9;
  --red: #c62828;
  --red-bg: #fdecec;

  font-family: 'Montserrat', -apple-system, sans-serif;
  color: #111;
  position: relative;
  max-width: 1280px;
  margin: 0 auto;
  padding: 24px 0;
}
.rgpr *, .rgpr *::before, .rgpr *::after { box-sizing: border-box; }

/* Selector de idioma */
.rgpr-lang {
  position: absolute; top: 24px; right: 0;
  display: flex; gap: 3px; z-index: 5;
  background: var(--cream); padding: 4px; border-radius: 30px;
}
.rgpr-lang button {
  border: none !important; background: transparent !important;
  padding: 7px 14px !important; border-radius: 30px !important;
  font-family: 'Montserrat', sans-serif !important;
  font-size: 0.68rem !important; font-weight: 800 !important;
  letter-spacing: .8px; cursor: pointer; color: var(--muted) !important;
  transition: all .2s; text-transform: none !important;
  box-shadow: none !important; line-height: 1 !important;
  display: flex; align-items: center; gap: 5px;
}
.rgpr-lang button.is-on { background: var(--navy) !important; color: #fff !important; }

/* Layout */
.rgpr-layout {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0;
}

/* ===== GALERÍA ===== */
.rgpr-gallery { position: sticky; top: 30px; height: fit-content; }
.rgpr-gallery-in { display: flex; gap: 16px; }

.rgpr-thumbs {
  display: flex; flex-direction: column; gap: 10px;
  max-height: 560px; overflow-y: auto;
  scrollbar-width: thin; scrollbar-color: #ccc transparent;
  padding-right: 2px;
}
.rgpr-thumbs::-webkit-scrollbar { width: 3px; }
.rgpr-thumbs::-webkit-scrollbar-thumb { background: #ccc; border-radius: 10px; }

.rgpr-thumb {
  width: 76px; height: 76px; flex-shrink: 0;
  border-radius: 12px; overflow: hidden;
  border: 2px solid transparent; cursor: pointer;
  background: #fff; transition: all .2s;
}
.rgpr-thumb img { width: 100%; height: 100%; object-fit: contain; display: block; padding: 4px; }
.rgpr-thumb.is-on, .rgpr-thumb:hover {
  border-color: #111; box-shadow: 0 2px 10px rgba(0,0,0,.12);
}

.rgpr-main {
  flex: 1; background: #fff; border-radius: 24px;
  overflow: hidden; position: relative; aspect-ratio: 1/1;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 32px rgba(0,0,0,.07);
}
/* --- Escritorio: imagen única con hover --- */
.rgpr-main-img {
  width: 100%; height: 100%; object-fit: contain; padding: 24px;
  transition: transform .4s ease, opacity .25s ease; display: block;
}
.rgpr-main-img:hover { transform: scale(1.03); }

/* La pista deslizante y las flechas sólo se usan en móvil */
.rgpr-track { display: none; }
.rgpr-nav { display: none; }

.rgpr-counter {
  position: absolute; bottom: 14px; right: 14px;
  background: rgba(0,0,0,.65); backdrop-filter: blur(8px);
  color: #fff; font-size: .65rem; font-weight: 700;
  font-family: monospace; padding: 4px 10px; border-radius: 30px;
  pointer-events: none;
}

/* ===== INFO ===== */
.rgpr-info { padding: 0 0 0 52px; }

.rgpr-cat {
  font-size: .7rem; font-weight: 700; letter-spacing: 2.5px;
  text-transform: uppercase; color: var(--muted); margin-bottom: 10px;
}
.rgpr-title {
  font-family: 'Montserrat', sans-serif !important;
  font-size: 3.4rem !important; font-weight: 800 !important;
  letter-spacing: -1px; line-height: 1 !important;
  margin: 0 0 6px !important; padding: 0 !important;
  text-transform: uppercase; color: #111 !important;
}
.rgpr-sub { font-size: .9rem; color: #555; margin: 0 0 18px; font-weight: 500; }

.rgpr-rating { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; }
.rgpr-stars { font-size: 15px; color: #111; letter-spacing: 2px; }
.rgpr-rcount { font-size: .75rem; color: var(--muted); }

.rgpr-price { font-size: 1.5rem; font-weight: 800; color: var(--navy); margin-bottom: 18px; }
.rgpr-price del { color: #bbb; font-size: .7em; font-weight: 500; margin-right: 8px; }
.rgpr-price ins { text-decoration: none; }

.rgpr-color {
  padding: 18px 0; border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line); margin-bottom: 20px;
}
.rgpr-label {
  font-size: .7rem; font-weight: 700; letter-spacing: 1.5px;
  text-transform: uppercase; color: #666; margin-bottom: 12px;
}
.rgpr-color-row { display: flex; gap: 14px; align-items: center; }
.rgpr-swatch {
  width: 46px; height: 46px; border-radius: 50%;
  border: 2px solid transparent; background-size: cover; background-position: center;
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px #111;
}
.rgpr-color-name { font-size: .8rem; font-weight: 600; color: #333; }

.rgpr-desc { margin-bottom: 16px; }
.rgpr-desc-text p { font-size: .9rem; line-height: 1.6; color: #333; margin: 0 0 10px; }
.rgpr-feats {
  list-style: none; padding: 0; margin: 12px 0 0;
  display: grid; grid-template-columns: 1fr 1fr; gap: 7px 16px;
}
.rgpr-feats li { font-size: .82rem; line-height: 1.4; color: #333; }

/* ===== TALLAS ===== */
.rgpr-sizes { margin: 18px 0 16px; }
.rgpr-sizes strong {
  font-size: .85rem; font-weight: 700; display: block;
  margin-bottom: 12px; text-transform: uppercase; letter-spacing: .5px;
}
.rgpr-size-grid { display: flex; flex-wrap: wrap; gap: 8px; }
.rgpr-size {
  padding: 9px 16px !important;
  border: 1.8px solid #d0d0d0 !important;
  border-radius: 40px !important;
  cursor: pointer; background: #fff !important;
  transition: all .18s; font-size: .85rem !important;
  font-weight: 600 !important; min-width: 52px; text-align: center;
  font-family: 'Montserrat', sans-serif !important;
  color: #111 !important; line-height: 1.3 !important;
  height: auto !important; text-transform: none !important;
}
.rgpr-size:hover:not(.is-out) {
  border-color: var(--navy) !important; background: #f0f3f6 !important; color: var(--navy) !important;
}
.rgpr-size.is-on {
  background: var(--navy) !important; color: #fff !important; border-color: var(--navy) !important;
}
.rgpr-size.is-out {
  opacity: .35; cursor: not-allowed; text-decoration: line-through;
}

/* ===== CARRITO ===== */
.rgpr-cart { margin: 20px 0 16px; }
.rgpr-cart-row { display: flex; gap: 10px; align-items: stretch; margin-bottom: 10px; }

.rgpr-qty {
  display: flex; align-items: center;
  border: 1.8px solid #d0d0d0; border-radius: 40px;
  background: #fff; overflow: hidden; min-width: 100px;
}
.rgpr-qty button {
  background: none !important; border: none !important;
  width: 34px; height: 44px; font-size: 1.1rem; cursor: pointer;
  color: #111 !important; font-family: 'Montserrat', sans-serif !important;
  transition: background .15s; padding: 0 !important;
}
.rgpr-qty button:hover { background: #f0f3f6 !important; }
.rgpr-qty-val { flex: 1; text-align: center; font-size: .88rem; font-weight: 700; }

.rgpr-add {
  flex: 1; height: 44px; padding: 0 16px !important;
  background: #fff !important; border: 1.8px solid var(--navy) !important;
  border-radius: 40px !important; font-size: .72rem !important;
  font-weight: 700 !important; letter-spacing: 1.5px; cursor: pointer;
  color: var(--navy) !important; font-family: 'Montserrat', sans-serif !important;
  transition: all .2s; text-transform: uppercase; white-space: nowrap;
  line-height: 1.3 !important;
}
.rgpr-add:hover { background: var(--navy) !important; color: #fff !important; }
.rgpr-add:disabled { opacity: .6; cursor: not-allowed; }

.rgpr-buy {
  width: 100%; height: 44px;
  background: var(--navy) !important; border: none !important;
  border-radius: 40px !important; font-size: .75rem !important;
  font-weight: 700 !important; letter-spacing: 2px; cursor: pointer;
  color: #fff !important; font-family: 'Montserrat', sans-serif !important;
  transition: background .2s; text-transform: uppercase;
  line-height: 1.3 !important;
}
.rgpr-buy:hover { background: var(--navy-lt) !important; }

.rgpr-toast, .rgpr-err {
  display: none; margin-top: 8px; padding: 10px 16px;
  border-radius: 40px; font-size: .75rem; font-weight: 700;
  letter-spacing: .5px; text-transform: uppercase; text-align: center;
}
.rgpr-toast.show { display: block; background: var(--green-bg); border: 1px solid #a5d6a7; color: var(--green); }
.rgpr-err.show { display: block; background: var(--red-bg); border: 1px solid #ef9a9a; color: var(--red); }

.rgpr-spin {
  display: inline-block; width: 12px; height: 12px;
  border: 2px solid rgba(7,37,60,.2); border-top-color: var(--navy);
  border-radius: 50%; animation: rgprSpin .7s linear infinite;
  vertical-align: middle; margin-right: 6px;
}
.rgpr-add:hover .rgpr-spin { border-color: rgba(255,255,255,.3); border-top-color: #fff; }
@keyframes rgprSpin { to { transform: rotate(360deg); } }

/* ===== GUÍA ===== */
.rgpr-guide { margin: 16px 0 12px; }
.rgpr-guide-btn {
  text-transform: uppercase;
  width: 100%; background: #fff !important;
  border: 2px solid var(--navy) !important; padding: 13px 0 !important;
  font-size: .82rem !important; font-weight: 700 !important;
  border-radius: 50px !important; cursor: pointer;
  transition: all .2s; color: var(--navy) !important;
  font-family: 'Montserrat', sans-serif !important;
  letter-spacing: 1px; line-height: 1.3 !important;
}
.rgpr-guide-btn:hover { background: var(--navy) !important; color: #fff !important; }

.rgpr-guide-box {
  max-height: 0; overflow: hidden;
  transition: max-height .5s cubic-bezier(.4,0,.2,1);
  border-radius: 20px;
}
.rgpr-guide-box.open {
  max-height: 900px; margin-top: 16px; padding: 20px;
  background: #f0efec;
}
.rgpr-guide-box h3 {
  font-size: 1rem !important; font-weight: 800 !important;
  margin: 0 0 16px !important; text-transform: uppercase; letter-spacing: .5px;
}
.rgpr-table-wrap { overflow-x: auto; }
.rgpr-table { width: 100%; border-collapse: collapse; font-size: .78rem; }
.rgpr-table th, .rgpr-table td { border: 1px solid #ddd; padding: 7px 10px; text-align: center; }
.rgpr-table th { background: var(--navy); color: #fff; font-weight: 700; }
.rgpr-table td { background: #fff; }

.rgpr-foot {
  font-size: .72rem; color: var(--muted); margin-top: 14px;
  padding-top: 12px; border-top: 1px solid var(--line);
}

/* ===== RESPONSIVE ===== */
@media (max-width: 900px) {
  .rgpr { padding: 16px 0 40px; }
  .rgpr-layout { grid-template-columns: 1fr; gap: 24px; }
  .rgpr-gallery { position: static; }
  .rgpr-gallery-in { flex-direction: column-reverse; }
  .rgpr-thumbs {
    flex-direction: row; max-height: none;
    overflow-x: auto; overflow-y: visible; padding-bottom: 6px;
  }
  .rgpr-info { padding: 0; }
  .rgpr-feats { grid-template-columns: 1fr; }
  .rgpr-title { font-size: 2.2rem !important; }
  .rgpr-lang { position: static; margin: 0 0 16px; width: fit-content; }
}


/* ============================================
   MÓVIL: la misma estructura se convierte en
   deslizador táctil. Sin duplicar HTML.
   ============================================ */
@media (max-width: 900px) {

  .rgpr-gallery-in { flex-direction: column; gap: 0; }

  .rgpr-main {
    border-radius: 28px 28px 0 0;
    box-shadow: none;
    touch-action: pan-y pinch-zoom;
    overflow: hidden;
  }

  /* Imagen única fuera, pista dentro */
  .rgpr-main-img { display: none; }

  .rgpr-track {
    display: flex;
    height: 100%;
    width: 100%;
    transition: transform .3s cubic-bezier(.2,.9,.4,1.1);
    will-change: transform;
  }
  .rgpr-slide { min-width: 100%; height: 100%; }
  .rgpr-slide img {
    width: 100%; height: 100%; object-fit: contain;
    padding: 20px; background: #fafafa;
    pointer-events: none; user-select: none;
  }

  /* Flechas */
  .rgpr-nav {
    display: flex;
    position: absolute; top: 50%; transform: translateY(-50%);
    width: 40px; height: 40px;
    background: rgba(7,37,60,.75) !important;
    backdrop-filter: blur(8px);
    border: none !important; border-radius: 60px !important;
    align-items: center; justify-content: center;
    color: #fff !important; font-size: 1.6rem;
    cursor: pointer; z-index: 15;
    transition: all .2s; padding: 0 !important;
    font-family: 'Montserrat', sans-serif !important;
    line-height: 1 !important;
  }
  .rgpr-nav:active { transform: translateY(-50%) scale(.92); background: rgba(7,37,60,.95) !important; }
  .rgpr-prev { left: 12px; }
  .rgpr-next { right: 12px; }

  /* Miniaturas en tira horizontal, debajo */
  .rgpr-thumbs {
    flex-direction: row;
    max-height: none;
    overflow-x: auto; overflow-y: hidden;
    padding: 12px;
    background: #fff;
    border-top: 1px solid #eee;
    border-radius: 0 0 28px 28px;
    -webkit-overflow-scrolling: touch;
    order: 2;
  }
  .rgpr-thumbs::-webkit-scrollbar { height: 3px; }
  .rgpr-thumb { width: 68px; height: 68px; }
  .rgpr-thumb.is-on { border-color: var(--navy); box-shadow: 0 2px 8px rgba(7,37,60,.2); }

  .rgpr-gallery {
    background: #fff;
    border-radius: 28px;
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(0,0,0,.07);
  }

  /* Botones más cómodos con el dedo */
  .rgpr-size { min-width: 54px; padding: 11px 17px !important; }
  .rgpr-add, .rgpr-buy { height: 48px; }
  .rgpr-qty button { height: 48px; width: 38px; }
  .rgpr-size:active, .rgpr-add:active, .rgpr-buy:active { transform: scale(.97); }
}

/* ============================================
   VÍDEO
   ============================================ */
.rgpr-video { margin: 22px 0 16px; }
.rgpr-video-box {
  position: relative; width: 100%; aspect-ratio: 16/9;
  background: #000; border-radius: 18px; overflow: hidden;
  cursor: pointer;
}
.rgpr-video-box img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .4s ease, opacity .2s;
}
.rgpr-video-box:hover img { transform: scale(1.03); opacity: .85; }
.rgpr-video-box iframe { width: 100%; height: 100%; border: 0; display: block; }


.rgpr-video-file {
  width: 100%; border-radius: 18px; display: block; background: #000;
}

/* ============================================
   PRODUCTOS DESTACADOS
   ============================================ */
.rgpr-featured {
  margin-top: 48px; padding-top: 36px;
  border-top: 1px solid var(--line);
}
.rgpr-featured-title {
  font-family: 'Montserrat', sans-serif !important;
  font-size: 1.4rem !important; font-weight: 800 !important;
  text-transform: uppercase; letter-spacing: -.3px;
  margin: 0 0 22px !important; color: #111 !important;
}
.rgpr-featured-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 18px;
}
.rgpr-fcard {
  background: #fff; border: 1px solid var(--line);
  border-radius: 18px; overflow: hidden;
  text-decoration: none; color: inherit;
  transition: transform .2s, box-shadow .2s, border-color .2s;
  display: block;
}
.rgpr-fcard:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(7,37,60,.1);
  border-color: var(--tan);
}
.rgpr-fimg {
  position: relative; aspect-ratio: 1/1;
  background: var(--cream);
  display: flex; align-items: center; justify-content: center;
}
.rgpr-fimg img { width: 100%; height: 100%; object-fit: contain; padding: 10px; }
.rgpr-fbadge {
  position: absolute; top: 10px; right: 10px;
  background: rgba(198,40,40,.92); color: #fff;
  font-size: .58rem; font-weight: 800; letter-spacing: .8px;
  text-transform: uppercase; padding: 4px 10px; border-radius: 20px;
}
.rgpr-fbody { padding: 13px 15px 16px; }
.rgpr-fname {
  display: block; font-size: .85rem; font-weight: 800;
  text-transform: uppercase; color: #111; margin-bottom: 5px;
  letter-spacing: -.2px;
}
.rgpr-fprice { display: block; font-size: .82rem; font-weight: 700; color: var(--navy); }
.rgpr-fprice del { color: #bbb; font-weight: 500; font-size: .9em; margin-right: 5px; }
.rgpr-fprice ins { text-decoration: none; }

@media (max-width: 640px) {
  .rgpr-featured-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
  .rgpr-featured-title { font-size: 1.15rem !important; }
  .rgpr-fbody { padding: 11px 12px 13px; }
  .rgpr-fname { font-size: .78rem; }
}

/* ============================================
   AJUSTES AL MODELO APROBADO (v3.2)
   ============================================ */

/* Barra superior azul con el nombre */
.rgpr-bar {
  background: var(--navy);
  border-radius: 14px;
  padding: 16px 26px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 22px;
  flex-wrap: wrap;
}
.rgpr-bar-name {
  color: #fff;
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: 3px;
  text-transform: uppercase;
}
.rgpr-bar-crumb {
  color: rgba(255,255,255,.55);
  font-size: 0.72rem;
  letter-spacing: 0.4px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.rgpr-bar-crumb em { font-style: normal; color: #fff; }
.rgpr-bar-crumb i { font-style: normal; opacity: .5; }

/* Contenedor con fondo crema, como el modelo */
.rgpr {
  background: var(--cream);
  padding: 26px 30px 34px;
  border-radius: 20px;
}

/* Tipografía más contenida */
.rgpr-cat {
  font-size: 0.62rem !important;
  letter-spacing: 2.2px;
  color: var(--navy) !important;
  opacity: .75;
  margin-bottom: 7px;
}
.rgpr-title {
  font-size: 1.15rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.5px;
  color: var(--navy) !important;
  margin-bottom: 5px !important;
}
.rgpr-sub {
  font-size: 0.8rem;
  color: #5a5f66;
  margin-bottom: 14px;
}
.rgpr-stars { color: var(--navy); font-size: 12px; letter-spacing: 3px; }

/* Separadores finos */
.rgpr-color {
  padding: 14px 0;
  border-top: 1px solid #dfe3e8;
  border-bottom: 1px solid #dfe3e8;
  margin-bottom: 16px;
}
.rgpr-label {
  font-size: 0.6rem;
  letter-spacing: 1.6px;
  color: var(--navy);
  opacity: .7;
  margin-bottom: 9px;
}
.rgpr-swatch {
  width: 38px; height: 38px;
  box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px var(--navy);
}
.rgpr-color-name { font-size: 0.75rem; color: #444; }

/* Descripción y características */
.rgpr-desc-text p { font-size: 0.8rem; line-height: 1.65; color: #4a5058; }
.rgpr-feats { gap: 6px 18px; margin-top: 10px; }
.rgpr-feats li {
  font-size: 0.74rem;
  line-height: 1.45;
  color: #4a5058;
}

/* Tallas del modelo: pastillas claras, activa en azul */
.rgpr-sizes strong {
  font-size: 0.68rem !important;
  letter-spacing: 1.4px;
  color: var(--navy);
  margin-bottom: 10px;
}
.rgpr-size-grid { gap: 7px; }
.rgpr-size {
  min-width: 40px !important;
  padding: 8px 0 !important;
  width: 40px;
  border-radius: 50px !important;
  border: 1.5px solid #d6dbe1 !important;
  font-size: 0.78rem !important;
  color: #3d444d !important;
}
.rgpr-size.is-on {
  background: var(--navy) !important;
  border-color: var(--navy) !important;
  color: #fff !important;
}

/* Botones */
.rgpr-qty { border-color: #d6dbe1; border-radius: 50px; }
.rgpr-add {
  border-width: 1.5px !important;
  border-radius: 50px !important;
  font-size: 0.68rem !important;
  letter-spacing: 1.8px;
}
.rgpr-buy { border-radius: 50px !important; font-size: 0.7rem !important; letter-spacing: 2px; }
.rgpr-guide-btn {
  border-width: 1.5px !important;
  font-size: 0.7rem !important;
  letter-spacing: 1.4px;
  padding: 12px 0 !important;
}

/* Pie */
.rgpr-foot {
  font-size: 0.68rem;
  color: #7b8189;
  border-top: 1px solid #dfe3e8;
}

/* Galería sobre fondo blanco */
.rgpr-main { box-shadow: 0 2px 14px rgba(7,37,60,.06); border-radius: 18px; }
.rgpr-thumb { border-radius: 10px; width: 62px; height: 62px; }
.rgpr-thumb.is-on, .rgpr-thumb:hover {
  border-color: var(--navy);
  box-shadow: 0 2px 8px rgba(7,37,60,.15);
}
.rgpr-counter { background: rgba(7,37,60,.7); font-size: .6rem; }

/* Aviso para el administrador */
.rgpr-admin-warn {
  background: #fff8e8;
  border: 1px solid #ffd98a;
  border-left: 3px solid #e0a02a;
  border-radius: 10px;
  padding: 10px 14px;
  font-size: 0.74rem;
  color: #7a5a10;
  line-height: 1.5;
  margin-bottom: 14px;
}

/* Destacados con el aire del modelo */
.rgpr-featured { border-top-color: #dfe3e8; }
.rgpr-featured-title {
  font-size: 1.1rem !important;
  color: var(--navy) !important;
  text-align: center;
  letter-spacing: 0;
}
.rgpr-fcard { border-radius: 12px; }
.rgpr-fimg { background: #fff; }
.rgpr-fname { font-size: 0.72rem; letter-spacing: 0.8px; }
.rgpr-fbody { text-align: center; padding: 11px 10px 14px; }

@media (max-width: 900px) {
  .rgpr { padding: 16px; border-radius: 14px; }
  .rgpr-bar { padding: 13px 18px; }
  .rgpr-bar-name { font-size: 1rem; letter-spacing: 2px; }
  .rgpr-bar-crumb { display: none; }
  .rgpr-title { font-size: 1.05rem !important; }
}

/* ============================================
   BOTONES ALINEADOS (v3.3)
   Los tres bloques comparten ancho y altura,
   con jerarquía clara: comprar destaca, la guía
   es una acción secundaria.
   ============================================ */

.rgpr-cart { margin: 22px 0 12px; }

.rgpr-cart-row {
  display: flex;
  gap: 10px;
  align-items: stretch;
  margin-bottom: 10px;
}

/* Cantidad: ancho fijo para que no baile */
.rgpr-qty {
  flex: 0 0 112px;
  height: 46px;
  border: 1.5px solid #d6dbe1;
  border-radius: 50px;
  background: #fff;
}
.rgpr-qty button { height: 44px; width: 36px; }

/* Añadir: ocupa el resto de la fila */
.rgpr-add {
  flex: 1 1 auto;
  height: 46px !important;
  min-width: 0;
}

/* Comprar: ancho completo, es la acción principal */
.rgpr-buy {
  display: block;
  width: 100% !important;
  height: 46px !important;
  margin-bottom: 10px;
}

/* Guía: mismo ancho, pero visualmente secundaria */
.rgpr-guide { margin: 0 0 14px; }
.rgpr-guide-btn {
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100% !important;
  height: 46px !important;
  padding: 0 !important;
  border-width: 1.5px !important;
  border-color: #c9d0d8 !important;
  color: #4a5058 !important;
  background: transparent !important;
  font-size: 0.7rem !important;
  letter-spacing: 1.4px;
}
.rgpr-guide-btn:hover {
  border-color: var(--navy) !important;
  color: var(--navy) !important;
  background: #fff !important;
}

/* Mensajes debajo, sin romper la alineación */
.rgpr-toast, .rgpr-err { margin-top: 10px; }

/* Barra superior: sin choque con el selector */
.rgpr-bar {
  padding: 15px 26px;
  position: relative;
  z-index: 1;
}
.rgpr-bar-crumb {
  max-width: 55%;
  text-align: right;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* Si se fuerza el selector, que no pise la barra */
.rgpr-lang {
  position: static;
  margin: 0 0 14px auto;
  width: fit-content;
}

@media (max-width: 900px) {
  .rgpr-qty { flex: 0 0 100px; height: 48px; }
  .rgpr-add, .rgpr-buy, .rgpr-guide-btn { height: 48px !important; }
  .rgpr-add { font-size: 0.64rem !important; letter-spacing: 1px; }
}

/* ============================================================
   IDIOMA: MOSTRAR SOLO EL ACTIVO (v4.0.2)

   Los dos idiomas van completos en el HTML y el CSS oculta el que
   no toca. Ventajas sobre reescribir el texto por JavaScript:

   - El cambio es instantáneo, sin reconstruir nada
   - No se pueden destruir las listas ni los párrafos
   - Si el JavaScript falla, siempre se ve uno de los dos
   - Google indexa el idioma principal como contenido normal

   IMPORTANTE: se usa !important en la ocultación.

   Sin él, .rgpr-feats { display: grid } de más arriba gana por
   estar declarada después con la misma especificidad, y las
   características salían duplicadas: las del idioma activo y las
   del otro, una debajo de otra.
   ============================================================ */

.rgpr .rgpr-i18n {
  display: none !important;
}

/* Español activo */
.rgpr.rgpr-lang-es > * .rgpr-i18n[data-lang="es"],
.rgpr.rgpr-lang-es .rgpr-i18n[data-lang="es"] {
  display: block !important;
}
.rgpr.rgpr-lang-es ul.rgpr-feats.rgpr-i18n[data-lang="es"] {
  display: grid !important;
}

/* Inglés activo */
.rgpr.rgpr-lang-en > * .rgpr-i18n[data-lang="en"],
.rgpr.rgpr-lang-en .rgpr-i18n[data-lang="en"] {
  display: block !important;
}
.rgpr.rgpr-lang-en ul.rgpr-feats.rgpr-i18n[data-lang="en"] {
  display: grid !important;
}

/* Respaldo: sin clase de idioma se muestra el español, para que
   una ficha nunca quede en blanco. */
.rgpr:not(.rgpr-lang-es):not(.rgpr-lang-en) .rgpr-i18n[data-lang="es"] {
  display: block !important;
}
.rgpr:not(.rgpr-lang-es):not(.rgpr-lang-en) ul.rgpr-feats.rgpr-i18n[data-lang="es"] {
  display: grid !important;
}

/* En móvil las características van en una columna */
@media (max-width: 900px) {
  .rgpr.rgpr-lang-es ul.rgpr-feats.rgpr-i18n[data-lang="es"],
  .rgpr.rgpr-lang-en ul.rgpr-feats.rgpr-i18n[data-lang="en"],
  .rgpr:not(.rgpr-lang-es):not(.rgpr-lang-en) ul.rgpr-feats.rgpr-i18n[data-lang="es"] {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   VÍDEO A TODO EL ANCHO (v4.1)

   Antes iba dentro de la columna de información, debajo de los
   botones. Ahí quedaba estrecho y competía con la compra: lo
   primero que debe ver el cliente al llegar al final de la ficha
   es el botón, no un reproductor.

   Ahora es una sección propia, a todo el ancho, después de la
   ficha y antes de los relacionados.
   ============================================================ */

.rgpr .rgpr-video {
  margin: 44px 0 8px;
  padding-top: 36px;
  border-top: 1px solid #dfe3e8;
  width: 100%;
}

.rgpr .rgpr-video .rgpr-label {
  text-align: center;
  font-size: 0.68rem;
  letter-spacing: 2.4px;
  color: var(--navy);
  opacity: .8;
  margin-bottom: 20px;
}

.rgpr .rgpr-video-box {
  max-width: 900px;
  margin: 0 auto;
  border-radius: 20px;
  box-shadow: 0 10px 40px rgba(7, 37, 60, .14);
  aspect-ratio: 16 / 9;
}

.rgpr .rgpr-video-file {
  max-width: 900px;
  margin: 0 auto;
  border-radius: 20px;
  box-shadow: 0 10px 40px rgba(7, 37, 60, .14);
}


@media (max-width: 900px) {
  .rgpr .rgpr-video {
    margin: 32px 0 4px;
    padding-top: 26px;
  }
  .rgpr .rgpr-video-box,
  .rgpr .rgpr-video-file {
    border-radius: 16px;
  }
}


/* ============================================================
   BOTÓN DE REPRODUCCIÓN (v4.2)

   El anterior salía como un rectángulo azul: el tema pisaba el
   border-radius y el resto de propiedades. Ahora todo va con
   !important y el triángulo es un SVG en el fondo, que ningún
   tema puede deformar.
   ============================================================ */

.rgpr .rgpr-play {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;

  width: 78px !important;
  height: 78px !important;
  min-width: 0 !important;
  max-width: none !important;
  padding: 0 !important;
  margin: 0 !important;

  border: none !important;
  border-radius: 50% !important;

  /* Blanco translúcido con desenfoque: se ve sobre cualquier
     fotograma, claro u oscuro, sin tapar la imagen. */
  background: rgba(255, 255, 255, .92) !important;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);

  box-shadow:
    0 8px 30px rgba(0, 0, 0, .28),
    0 0 0 1px rgba(255, 255, 255, .5) inset !important;

  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  transition: transform .28s cubic-bezier(.34, 1.56, .64, 1),
              box-shadow .28s ease,
              background .2s ease !important;

  /* Anula cualquier decoración que meta el tema */
  outline: none !important;
  text-decoration: none !important;
  font-size: 0 !important;
  line-height: 0 !important;
  overflow: visible !important;
}

/* Triángulo dibujado en SVG: no depende de bordes, así que ningún
   tema puede deformarlo. Va desplazado 3px para compensar el peso
   visual: un triángulo centrado geométricamente parece torcido. */
.rgpr .rgpr-play span {
  display: block !important;
  width: 26px !important;
  height: 26px !important;
  margin-left: 4px !important;
  border: none !important;
  background: no-repeat center / contain
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 5.5v13a1 1 0 0 0 1.54.84l10-6.5a1 1 0 0 0 0-1.68l-10-6.5A1 1 0 0 0 8 5.5z' fill='%2307253C'/%3E%3C/svg%3E") !important;
}

.rgpr .rgpr-play:hover {
  background: #fff !important;
  transform: translate(-50%, -50%) scale(1.09) !important;
  box-shadow:
    0 12px 40px rgba(0, 0, 0, .34),
    0 0 0 1px rgba(255, 255, 255, .7) inset !important;
}

.rgpr .rgpr-play:active {
  transform: translate(-50%, -50%) scale(.96) !important;
}

/* Aro que late alrededor, para que el botón se note sobre un
   fotograma con mucho detalle. */
.rgpr .rgpr-video-box::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 78px;
  height: 78px;
  margin: -39px 0 0 -39px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, .55);
  pointer-events: none;
  animation: rgprPulse 2.6s ease-out infinite;
}
.rgpr .rgpr-video-box:hover::after { animation-play-state: paused; opacity: 0; }

@keyframes rgprPulse {
  0%   { transform: scale(1);    opacity: .7; }
  70%  { transform: scale(1.45); opacity: 0; }
  100% { transform: scale(1.45); opacity: 0; }
}

/* Al insertarse el reproductor, el aro desaparece.
   Se usa una clase en vez de :has(), que no funciona en navegadores
   algo antiguos y dejaría el aro encima del vídeo. */
.rgpr .rgpr-video-box.is-playing::after { display: none; }

@media (max-width: 900px) {
  .rgpr .rgpr-play {
    width: 62px !important;
    height: 62px !important;
  }
  .rgpr .rgpr-play span {
    width: 21px !important;
    height: 21px !important;
    margin-left: 3px !important;
  }
  .rgpr .rgpr-video-box::after {
    width: 62px;
    height: 62px;
    margin: -31px 0 0 -31px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .rgpr .rgpr-video-box::after { animation: none; }
  .rgpr .rgpr-play:hover { transform: translate(-50%, -50%) !important; }
}

/* ============================================================
   TIRA EN MOVIMIENTO INFINITA (v4.5)

   Separador entre el vídeo y los productos relacionados.

   CÓMO SE CONSIGUE EL BUCLE SIN CORTE

   El HTML lleva DOS grupos idénticos, uno detrás de otro. La
   animación desplaza exactamente el ancho de un grupo (-100% del
   grupo, no de la pista).

   Cuando el primer grupo termina de salir por la izquierda, el
   segundo ocupa exactamente su posición inicial. Al reiniciarse la
   animación, la imagen es idéntica: no hay salto ni hueco.

   La versión anterior repetía el texto en una sola pista y
   desplazaba el 50%. Eso solo funciona si el contenido llena más
   del doble del ancho de la pantalla; en monitores anchos se veía
   el corte.
   ============================================================ */

.rgpr .rgpr-marquee {
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  overflow: hidden;
  background: #fff;
  border-top: 1px solid #e6e9ed;
  border-bottom: 1px solid #e6e9ed;
  padding: 15px 0;
  margin-top: 40px;
  user-select: none;

  /* La pista es un contenedor flexible; los dos grupos van dentro */
  display: flex;
  flex-wrap: nowrap;
}

.rgpr .rgpr-marquee-group {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  min-width: 100%;          /* cada grupo cubre al menos la pantalla */
  animation: rgprMarquee 30s linear infinite;
  will-change: transform;
}

.rgpr .rgpr-marquee-item {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 3px;
  color: var(--navy);
  white-space: nowrap;
  padding: 0 26px;
  flex: 0 0 auto;
}

/* Punto separador en dorado, para no cansar con solo texto */
.rgpr .rgpr-marquee-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--tan);
  flex: 0 0 auto;
}

/* Se desplaza el ancho de UN grupo, no de la pista entera */
@keyframes rgprMarquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-100%); }
}

/* Se pausa al pasar el ratón: si alguien quiere leerlo, puede */
.rgpr .rgpr-marquee:hover .rgpr-marquee-group {
  animation-play-state: paused;
}

/* Los destacados van pegados a la tira */
.rgpr .rgpr-marquee + .rgpr-featured {
  margin-top: 40px;
  padding-top: 0;
  border-top: none;
}

@media (max-width: 900px) {
  .rgpr .rgpr-marquee {
    padding: 12px 0;
    margin-top: 30px;
  }
  .rgpr .rgpr-marquee-item {
    font-size: 0.72rem;
    letter-spacing: 2.2px;
    padding: 0 18px;
  }
  .rgpr .rgpr-marquee-group {
    animation-duration: 20s;
  }
  .rgpr .rgpr-marquee + .rgpr-featured {
    margin-top: 28px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .rgpr .rgpr-marquee-group {
    animation: none;
  }
  /* Sin animación sobra el segundo grupo */
  .rgpr .rgpr-marquee-group:nth-child(2) {
    display: none;
  }
  .rgpr .rgpr-marquee-group:first-child {
    justify-content: center;
  }
}