/* Comparador interactivo Hincha vs Jugador */
.version-comparison{padding:clamp(72px,8vw,120px) 0;background:linear-gradient(180deg,#07090d 0%,#0a0e14 100%);overflow:hidden}
.version-comparison__head{display:flex;justify-content:space-between;align-items:end;gap:40px;margin-bottom:36px}
.version-comparison__head h2{font-family:Oswald,sans-serif;font-size:clamp(44px,5.4vw,80px);line-height:.92;text-transform:uppercase;margin:12px 0 0;letter-spacing:-.03em}
.version-comparison__head p{max-width:470px;color:#aab4c2;line-height:1.7;margin:0}
.version-comparison__grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(340px,.75fr);gap:28px;align-items:stretch}
.compare-slider{position:relative;min-height:620px;border-radius:28px;overflow:hidden;background:#080b10;border:1px solid rgba(255,255,255,.11);box-shadow:0 35px 90px rgba(0,0,0,.42);isolation:isolate;touch-action:pan-y}
.compare-slider__image{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;user-select:none;pointer-events:none}
.compare-slider__after{position:absolute;inset:0;clip-path:inset(0 0 0 var(--position,50%));will-change:clip-path}
.compare-slider__shade{position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(0,0,0,.12),transparent 30%,rgba(0,0,0,.2));z-index:2}
.compare-slider__label{position:absolute;top:22px;z-index:6;padding:10px 15px;border-radius:999px;background:rgba(7,9,13,.78);border:1px solid rgba(255,255,255,.18);backdrop-filter:blur(12px);font:700 12px/1 'DM Sans',sans-serif;letter-spacing:.12em;text-transform:uppercase;color:#fff;box-shadow:0 10px 30px rgba(0,0,0,.25)}
.compare-slider__label--before{left:22px}.compare-slider__label--after{right:22px}
.compare-slider__line{position:absolute;z-index:7;top:0;bottom:0;left:var(--position,50%);width:3px;transform:translateX(-50%);background:#e3222e;box-shadow:0 0 22px rgba(227,34,46,.7);pointer-events:none}
.compare-slider__handle{position:absolute;z-index:8;top:50%;left:var(--position,50%);width:58px;height:58px;transform:translate(-50%,-50%);border-radius:50%;display:grid;place-items:center;background:#e3222e;color:#07090d;border:5px solid rgba(7,9,13,.85);box-shadow:0 15px 35px rgba(0,0,0,.45),0 0 0 1px rgba(255,255,255,.2);pointer-events:none;transition:transform .15s ease}
.compare-slider.is-dragging .compare-slider__handle{transform:translate(-50%,-50%) scale(1.08)}
.compare-slider__handle svg{width:25px;height:25px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.compare-slider__input{position:absolute;z-index:10;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize;margin:0;touch-action:pan-y}
.compare-slider__hint{position:absolute;left:50%;bottom:22px;z-index:6;transform:translateX(-50%);white-space:nowrap;padding:10px 14px;border-radius:999px;background:rgba(7,9,13,.76);border:1px solid rgba(255,255,255,.14);color:#d8dfe8;font-size:12px;backdrop-filter:blur(10px);pointer-events:none;transition:opacity .25s ease}
.compare-slider.has-interacted .compare-slider__hint{opacity:0}
.version-guide{border-radius:28px;padding:clamp(28px,3vw,42px);background:linear-gradient(145deg,#e3222e 0%,#f4efe6 100%);color:#080b0f;display:flex;flex-direction:column;justify-content:center;box-shadow:0 35px 80px rgba(0,0,0,.25)}
.version-guide .kicker{color:#526117}.version-guide h3{font-family:Oswald,sans-serif;font-size:clamp(38px,4vw,60px);line-height:.95;text-transform:uppercase;margin:12px 0 18px}
.version-guide>p{line-height:1.65;margin:0 0 24px;max-width:540px}
.version-cards{display:grid;gap:12px;margin:8px 0 26px}
.version-card{padding:18px;border:1px solid rgba(8,11,15,.18);border-radius:18px;background:rgba(255,255,255,.3)}
.version-card__top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px}
.version-card b{font-family:Oswald,sans-serif;font-size:22px;text-transform:uppercase}.version-card small{font-size:10px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;padding:6px 8px;border-radius:999px;background:#0b0e13;color:#fff}
.version-card ul{list-style:none;padding:0;margin:0;display:grid;gap:7px;font-size:13px}
.version-card li:before{content:'✓';font-weight:900;margin-right:8px}
.version-guide .btn{align-self:flex-start;background:#090c11;color:#fff;border:0;min-width:210px}
.version-guide .btn:hover{transform:translateY(-2px);box-shadow:0 15px 30px rgba(0,0,0,.18)}
@media(max-width:980px){.version-comparison__head{display:block}.version-comparison__head p{margin-top:20px}.version-comparison__grid{grid-template-columns:1fr}.compare-slider{min-height:620px}.version-guide{min-height:auto}.version-cards{grid-template-columns:1fr 1fr}}
@media(max-width:640px){.version-comparison{padding:70px 0}.version-comparison__head{margin-bottom:24px}.version-comparison__grid{gap:16px}.compare-slider{min-height:480px;border-radius:20px}.compare-slider__image{object-position:center}.compare-slider__label{top:14px;padding:8px 10px;font-size:10px}.compare-slider__label--before{left:12px}.compare-slider__label--after{right:12px}.compare-slider__handle{width:50px;height:50px}.compare-slider__hint{bottom:14px;font-size:11px}.version-guide{border-radius:20px;padding:26px 20px}.version-cards{grid-template-columns:1fr}.version-guide .btn{width:100%}}
@media(prefers-reduced-motion:reduce){.compare-slider__handle{transition:none}}

/* JERSIX Paso 15 — Original vs Réplica G5 Premium */
.version-comparison{background:linear-gradient(180deg,#07101b 0%,#050a11 100%)!important}
.version-guide{
  background:linear-gradient(145deg,#0b1726 0%,#07101b 72%,#111827 100%)!important;
  color:#fff!important;border:1px solid rgba(255,255,255,.12)!important;
  box-shadow:0 24px 70px rgba(0,0,0,.35)!important
}
.version-guide .kicker{color:#e3222e!important}
.version-guide h3,.version-guide p,.version-card,.version-card b,.version-card li{color:#fff!important}
.version-guide p,.version-card li{color:#b6c0ce!important}
.version-card{background:rgba(255,255,255,.035)!important;border:1px solid rgba(255,255,255,.12)!important}
.version-card__top small{background:#e3222e!important;color:#fff!important}
.version-guide .btn{background:#e3222e!important;color:#fff!important}
.version-guide .btn:hover{background:#c91d28!important}
.compare-slider__divider{background:#e3222e!important}
.compare-slider__handle{background:#e3222e!important;color:#fff!important;border-color:#fff!important}

/* JERSIX Paso 16 — Diferenciar Original y G5 Premium */
.compare-mark{
  display:inline-grid;
  place-items:center;
  width:27px;
  height:27px;
  border-radius:50%;
  margin-right:8px;
  font:800 16px/1 Arial,sans-serif;
  vertical-align:2px;
}
.compare-mark--bad{
  background:#e3222e;
  color:#fff;
  box-shadow:0 0 0 4px rgba(227,34,46,.12);
}
.compare-mark--good{
  background:#27c76f;
  color:#06110b;
  box-shadow:0 0 0 4px rgba(39,199,111,.13);
}
.version-card li.negative-point{
  color:#f0a4aa!important;
}
.version-card li.negative-point::marker{
  color:#e3222e;
}
.version-card li.positive-point{
  color:#b9eacb!important;
}
.version-card li.positive-point::marker{
  color:#27c76f;
}

/* JERSIX Paso 17 — ORIGINAL negativo / G5 recomendada */
.original-negatives,
.g5-positives{
  list-style:none!important;
  padding-left:0!important;
}
.original-negatives li,
.g5-positives li{
  position:relative;
  padding-left:0!important;
  margin:7px 0!important;
}
.original-negatives li::marker,
.g5-positives li::marker{
  content:""!important;
}
.original-negatives .negative-point{
  color:#f1a1a7!important;
}
.g5-positives .positive-point{
  color:#b9eacb!important;
}

/* Paso 19: comparativa replicas */
#comparar-versiones .compare-slider{background:#0b1018}
#comparar-versiones .compare-slider__image{object-fit:contain;background:#0b1018}
#comparar-versiones .compare-slider__label{max-width:44%;text-align:center}

/* Paso 21: en replicas de otros mostramos solamente una X por punto */
#comparar-versiones .replicas-otros-negativas .negative-point.no-auto-symbol::before{
  content:none !important;
  display:none !important;
}


/* PASO 22 — Réplicas de otros: impedir cualquier tilde automática */
#comparar-versiones .replicas-otros-negativas .replicas-otros-item::before,
#comparar-versiones .replicas-otros-negativas .replicas-otros-item::after,
.version-comparison .replicas-otros-negativas .replicas-otros-item::before,
.version-comparison .replicas-otros-negativas .replicas-otros-item::after {
    content: none !important;
    display: none !important;
}
#comparar-versiones .replicas-otros-negativas .replicas-otros-item {
    list-style: none !important;
}


/* PASO 24 — Fondo JERSIX para comparativa */
#comparar-versiones.version-comparison{
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(circle at 14% 18%, rgba(227,34,46,.16) 0, rgba(227,34,46,.05) 22%, transparent 42%),
    radial-gradient(circle at 88% 78%, rgba(227,34,46,.12) 0, rgba(227,34,46,.025) 26%, transparent 46%),
    linear-gradient(135deg, rgba(255,255,255,.025) 1px, transparent 1px),
    linear-gradient(45deg, rgba(255,255,255,.018) 1px, transparent 1px),
    linear-gradient(180deg,#06101d 0%,#081525 48%,#050b13 100%) !important;
  background-size:auto,auto,36px 36px,36px 36px,auto !important;
  border-top:1px solid rgba(255,255,255,.08);
  border-bottom:1px solid rgba(227,34,46,.18);
}
#comparar-versiones.version-comparison::before{
  content:"JERSIX";
  position:absolute;
  right:-30px;
  top:48px;
  font:900 clamp(100px,15vw,260px)/1 Oswald,sans-serif;
  letter-spacing:-.055em;
  color:rgba(255,255,255,.018);
  pointer-events:none;
  user-select:none;
}
#comparar-versiones.version-comparison::after{
  content:"NBA  •  NFL  •  MLB  •  NHL";
  position:absolute;
  left:40px;
  bottom:24px;
  font:700 11px/1 'DM Sans',sans-serif;
  letter-spacing:.28em;
  color:rgba(227,34,46,.28);
  pointer-events:none;
  user-select:none;
}
#comparar-versiones .version-comparison__head,
#comparar-versiones .version-comparison__grid{
  position:relative;
  z-index:1;
}


/* PASO 27 — Comparativa: ambas fotos iguales, alineadas y sin fondo negro */
#comparar-versiones .compare-slider{
  background:transparent !important;
}
#comparar-versiones .compare-slider__after{
  background:transparent !important;
}
#comparar-versiones .compare-slider__image{
  width:100% !important;
  height:100% !important;
  inset:0 !important;
  object-fit:cover !important;
  object-position:center center !important;
  background:transparent !important;
  display:block !important;
}
#comparar-versiones .compare-slider__shade{
  background:linear-gradient(180deg,rgba(0,0,0,.04),transparent 30%,rgba(0,0,0,.08)) !important;
}