/* ============================================================
   The Joker House · Componentes de artículo (CMS)
   Prefijo jha-. Vive dentro de .jh-legal-article (cms/page.tpl).
   Las reglas llevan .jh-legal-article delante y !important donde
   jh-legal-page.css fuerza display/width con !important.
   ============================================================ */
.jh-legal-article {
  --jha-ink: #111;
  --jha-text: #2a2a2a;
  --jha-muted: #5b5b5b;
  --jha-line: #e6e6e6;
  --jha-soft: #f6f6f4;
  --jha-gold: #f6c34f;
  --jha-gold-deep: #9a7420;
  --jha-gold-wash: #fff6dc;
  --jha-red: #b3122e;
  --jha-radius: 14px;
}

/* ---------- 1. Respuesta rápida ---------- */
.jh-legal-article .jha-answer {
  display: block !important;
  margin: 0 0 32px;
  padding: 24px 28px;
  background: var(--jha-ink);
  color: #f2f2f2;
  border-radius: var(--jha-radius);
  font-size: 15.5px;
  line-height: 1.65;
}
.jh-legal-article .jha-answer p { margin: 0 0 12px; }
.jh-legal-article .jha-answer p:last-child,
.jh-legal-article .jha-answer ul:last-child { margin-bottom: 0; }
.jh-legal-article .jha-answer .jha-answer__label {
  margin: 0 0 8px;
  color: var(--jha-gold);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .02em;
}
.jh-legal-article .jha-answer strong { color: #fff; }
.jh-legal-article .jha-answer a { color: var(--jha-gold); }
.jh-legal-article .jha-answer a:hover { color: #fff; }
.jh-legal-article .jha-answer ul { margin: 0 0 12px; padding-left: 20px; }
.jh-legal-article .jha-answer li { margin-bottom: 4px; }
.jh-legal-article .jha-answer ul li::marker { color: var(--jha-gold); }

/* ---------- 2. Naipes dibujados ---------- */
.jh-legal-article .jha-hand {
  display: flex !important;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 8px;
  margin: 18px 0 24px;
}
.jh-legal-article .jha-card {
  --w: 52px;
  position: relative;
  display: inline-flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  width: var(--w);
  height: calc(var(--w) * 1.4);
  flex: 0 0 auto;
  background: #fff;
  border: 1px solid #d6d6d6;
  border-radius: calc(var(--w) * .12);
  box-shadow: 0 1px 0 rgba(0, 0, 0, .04), 0 3px 8px rgba(0, 0, 0, .06);
  color: var(--jha-ink);
  font-size: calc(var(--w) * .36);
  font-weight: 800;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
  vertical-align: middle;
  transition: transform .25s cubic-bezier(.22, 1, .36, 1), box-shadow .25s cubic-bezier(.22, 1, .36, 1);
}
.jh-legal-article .jha-card,
.jh-legal-article .jha-card * { text-align: center !important; }
.jh-legal-article .jha-card b {
  display: block;
  font-size: calc(var(--w) * .42);
  font-weight: 400;
  line-height: 1;
}
.jh-legal-article .jha-card--r { color: var(--jha-red); }
.jh-legal-article .jha-card--joker {
  background: var(--jha-gold);
  border-color: #d9a83a;
  color: var(--jha-ink);
  font-size: calc(var(--w) * .17);
  letter-spacing: .06em;
  writing-mode: vertical-rl !important;
  text-orientation: upright;
}
.jh-legal-article .jha-card--back {
  background:
    repeating-linear-gradient(45deg, rgba(246, 195, 79, .55) 0 2px, transparent 2px 7px),
    repeating-linear-gradient(-45deg, rgba(246, 195, 79, .55) 0 2px, transparent 2px 7px),
    var(--jha-ink);
  border: 3px solid #fff;
  outline: 1px solid #d6d6d6;
}
.jh-legal-article .jha-hand:not(.jha-hand--sm) .jha-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 1px 0 rgba(0, 0, 0, .04), 0 10px 18px rgba(0, 0, 0, .1);
}
/* Pequeñas, en línea (párrafos y tablas) */
.jh-legal-article .jha-hand--sm {
  display: inline-flex !important;
  gap: 3px;
  margin: 0 2px;
  vertical-align: middle;
}
.jh-legal-article .jha-hand--sm .jha-card { --w: 26px; border-radius: 4px; box-shadow: none; }
/* Escala de valores con extremos rotulados */
.jh-legal-article .jha-hand--scale {
  flex-wrap: wrap;
  padding-bottom: 30px;
  position: relative;
}
.jh-legal-article .jha-hand--scale::before,
.jh-legal-article .jha-hand--scale::after {
  position: absolute;
  bottom: 0;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--jha-muted);
}
.jh-legal-article .jha-hand--scale::before { content: '← ' attr(data-high); left: 0; }
.jh-legal-article .jha-hand--scale::after { content: attr(data-low) ' →'; right: 0; }
.jh-legal-article .jha-hand--scale:not([data-high])::before { content: '← Más alta'; }
.jh-legal-article .jha-hand--scale:not([data-low])::after { content: 'Más baja →'; }
@media (max-width: 600px) {
  .jh-legal-article .jha-card { --w: 42px; }
  .jh-legal-article .jha-hand { gap: 6px; }
  .jh-legal-article .jha-hand--sm .jha-card { --w: 24px; }
}

/* ---------- 3. Tablas ---------- */
.jh-legal-article .jha-table {
  display: block !important;
  margin: 20px 0 28px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--jha-line);
  border-radius: 12px;
  background: #fff;
}
.jh-legal-article .jha-table table {
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  min-width: 520px;
  max-width: none !important;
  font-size: 14px !important;
}
.jh-legal-article .jha-table caption {
  caption-side: top;
  padding: 14px 16px 10px;
  text-align: left;
  font-size: 14px;
  font-weight: 700;
  color: var(--jha-ink);
  border-bottom: 1px solid var(--jha-line);
}
.jh-legal-article .jha-table th {
  text-transform: none;
  letter-spacing: 0;
  font-size: 13px;
  background: var(--jha-soft);
  white-space: nowrap !important;
}
.jh-legal-article .jha-table td { vertical-align: top; }
.jh-legal-article .jha-table td .jha-hand--sm { margin: 0; }

/* Etiquetas */
.jh-legal-article .jha-tag {
  display: inline-block !important;
  margin: 2px 4px 2px 0;
  padding: 2px 9px;
  border-radius: 999px;
  background: #f0f0ee;
  color: #333;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.6;
  white-space: nowrap !important;
}
.jh-legal-article .jha-tag--gold { background: var(--jha-gold-wash); color: #5e4512; }

/* ---------- 4. Notas ---------- */
.jh-legal-article .jha-note {
  display: block !important;
  margin: 24px 0;
  padding: 18px 22px;
  background: var(--jha-soft);
  border: 1px solid var(--jha-line);
  border-radius: 12px;
  font-size: 14.5px;
}
.jh-legal-article .jha-note p:last-child { margin-bottom: 0; }
.jh-legal-article .jha-note .jha-note__title {
  margin: 0 0 6px;
  font-weight: 700;
  color: var(--jha-ink);
}
.jh-legal-article .jha-note--tip {
  background: var(--jha-gold-wash);
  border-color: #efd99a;
}
.jh-legal-article .jha-note--tip .jha-note__title { color: #5e4512; }

/* ---------- 5. Barra de composición de baraja ---------- */
.jh-legal-article .jha-deckbar {
  display: flex !important;
  gap: 3px;
  height: 48px;
  margin: 18px 0 6px;
}
.jh-legal-article .jha-deckbar__seg {
  display: flex !important;
  align-items: center;
  justify-content: center;
  flex: var(--n, 1) 1 0;
  min-width: 22px;
  overflow: hidden;
  border-radius: 6px;
  background: #1c1c1c;
  color: #fff;
  font-size: 12.5px;
  font-weight: 700;
  white-space: nowrap !important;
}
.jh-legal-article .jha-deckbar__seg--r { background: var(--jha-red); }
.jh-legal-article .jha-deckbar__seg--joker { background: var(--jha-gold); color: var(--jha-ink); }
.jh-legal-article .jha-deckbar__seg--a { background: #1c1c1c; color: #fff; }
.jh-legal-article .jha-deckbar__seg--b { background: #4a4a48; color: #fff; }
.jh-legal-article .jha-deckbar__seg--c { background: #a9a9a4; color: #111; }
.jh-legal-article .jha-deckbar__seg--d { background: #d9d9d4; color: #111; }
.jh-legal-article .jha-deckbar__seg--extra { background: #c99a2e; color: #111; }
.jh-legal-article .jha-deckbar__legend {
  margin: 0 0 24px;
  font-size: 13px;
  color: var(--jha-muted);
}
@media (max-width: 600px) {
  .jh-legal-article .jha-deckbar { height: 40px; gap: 2px; }
  .jh-legal-article .jha-deckbar__seg { font-size: 11px; min-width: 16px; }
}

/* ---------- 6. Producto ---------- */
.jh-legal-article .jha-product {
  display: flex !important;
  gap: 18px;
  align-items: center;
  margin: 24px 0;
  padding: 14px;
  background: #fff;
  border: 1px solid var(--jha-line);
  border-radius: var(--jha-radius);
}
.jh-legal-article .jha-product > a {
  display: block !important;
  flex: 0 0 120px;
  border-radius: 10px;
  overflow: hidden;
  background: var(--jha-soft);
}
.jh-legal-article .jha-product img {
  display: block;
  width: 120px !important;
  height: 120px !important;
  object-fit: contain;
  transition: transform .4s cubic-bezier(.22, 1, .36, 1);
}
.jh-legal-article .jha-product:hover img { transform: scale(1.04); }
.jh-legal-article .jha-product figcaption {
  font-size: 14px;
  line-height: 1.55;
  color: var(--jha-text);
}
.jh-legal-article .jha-product figcaption strong {
  display: block !important;
  margin-bottom: 2px;
  font-size: 15.5px;
}
.jh-legal-article a.jha-product__link {
  display: inline-block !important;
  margin-top: 8px;
  padding: 7px 14px;
  border: 1px solid var(--jha-ink);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  color: var(--jha-ink);
  transition: background .2s ease, color .2s ease;
}
.jh-legal-article a.jha-product__link:hover { background: var(--jha-ink); color: #fff; }
/* Varios productos: rejilla de fichas verticales */
.jh-legal-article .jha-products {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)) !important;
  gap: 12px;
  margin: 24px 0;
}
.jh-legal-article .jha-products .jha-product {
  flex-direction: column;
  align-items: stretch;
  margin: 0;
  text-align: center !important;
}
.jh-legal-article .jha-products .jha-product figcaption { text-align: center !important; }
.jh-legal-article .jha-products .jha-product > a { flex-basis: auto; }
.jh-legal-article .jha-products .jha-product img {
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 1;
}
@media (max-width: 520px) {
  .jh-legal-article .jha-product:not(.jha-products .jha-product) { align-items: flex-start; }
  .jh-legal-article .jha-product > a { flex-basis: 92px; }
  .jh-legal-article .jha-product img { width: 92px !important; height: 92px !important; }
  .jh-legal-article .jha-products { grid-template-columns: 1fr 1fr !important; }
}

/* ---------- 7. Comparativa ---------- */
.jh-legal-article .jha-compare {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)) !important;
  gap: 14px;
  margin: 24px 0 28px;
}
.jh-legal-article .jha-compare__col {
  display: block !important;
  padding: 22px 22px 18px;
  background: var(--jha-soft);
  border: 1px solid var(--jha-line);
  border-radius: var(--jha-radius);
}
.jh-legal-article .jha-compare__name {
  margin: 0 0 14px;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -.01em;
  color: var(--jha-ink);
}
.jh-legal-article .jha-compare__col img {
  display: block;
  width: 100% !important;
  max-height: 200px;
  object-fit: contain;
  margin: 0 0 14px;
  border-radius: 10px;
  background: #fff;
}
.jh-legal-article .jha-specs {
  display: grid !important;
  grid-template-columns: minmax(90px, auto) 1fr !important;
  gap: 8px 14px;
  margin: 0 0 14px;
  font-size: 14px;
}
.jh-legal-article .jha-specs dt { color: var(--jha-muted); font-weight: 500; }
.jh-legal-article .jha-specs dd { margin: 0; color: var(--jha-ink); font-weight: 600; }
.jh-legal-article .jha-compare__fit {
  margin: 0;
  padding-top: 12px;
  border-top: 1px solid var(--jha-line);
  font-size: 14px;
}

/* ---------- 8. Llamada a la tienda ---------- */
.jh-legal-article .jha-cta {
  display: block !important;
  margin: 36px 0;
  padding: 26px 28px;
  background: var(--jha-ink);
  color: #e9e9e9;
  border-radius: 16px;
}
.jh-legal-article .jha-cta p { margin: 0 0 14px; }
.jh-legal-article .jha-cta .jha-cta__title {
  margin: 0 0 6px;
  color: #fff;
  font-size: 18px;
  font-weight: 800;
  line-height: 1.35;
}
.jh-legal-article a.jha-cta__btn {
  display: inline-block !important;
  padding: 11px 22px;
  background: var(--jha-gold);
  color: var(--jha-ink);
  border-radius: 999px;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  transition: background .2s ease, transform .2s cubic-bezier(.22, 1, .36, 1);
}
.jh-legal-article a.jha-cta__btn:hover { background: #fff; color: var(--jha-ink); transform: translateY(-1px); }

/* ---------- 9. Saltos rápidos ---------- */
.jh-legal-article .jha-jump {
  display: flex !important;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 32px;
}
.jh-legal-article .jha-jump a {
  display: inline-block !important;
  padding: 7px 14px;
  border: 1px solid var(--jha-line);
  border-radius: 999px;
  background: #fff;
  font-size: 13.5px;
  font-weight: 600;
  text-decoration: none;
  color: var(--jha-ink);
  transition: border-color .2s ease, background .2s ease;
}
.jh-legal-article .jha-jump a:hover { border-color: var(--jha-gold); background: var(--jha-gold-wash); color: var(--jha-ink); }

@media (prefers-reduced-motion: reduce) {
  .jh-legal-article .jha-card,
  .jh-legal-article .jha-product img,
  .jh-legal-article a.jha-cta__btn { transition: none; }
  .jh-legal-article .jha-hand .jha-card:hover,
  .jh-legal-article .jha-product:hover img,
  .jh-legal-article a.jha-cta__btn:hover { transform: none; }
}
@media print {
  .jh-legal-article .jha-answer,
  .jh-legal-article .jha-cta { background: #fff; color: #111; border: 1px solid #ccc; }
  .jh-legal-article .jha-cta__btn { display: none !important; }
}

/* Ajustes tras prueba en la web real */
.jh-legal-article .jha-answer p,
.jh-legal-article .jha-answer li { color: #e6e6e6 !important; }
.jh-legal-article .jha-cta p { color: #d4d4d4 !important; }
.jh-legal-article .jha-cta .jha-cta__title { color: #fff !important; }
.jh-legal-article .jha-products .jha-product figcaption {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  flex: 1;
}
.jh-legal-article .jha-products .jha-product figcaption > * { text-align: center !important; }
.jh-legal-article .jha-products .jha-product a.jha-product__link { margin-top: auto; }
.jh-legal-article .jha-products .jha-product figcaption strong + * { margin-top: 0; }
.jh-legal-article a.jha-product__link { white-space: nowrap !important; }
@media (max-width: 600px) {
  .jh-legal-layout { padding-left: 10px !important; padding-right: 10px !important; }
  .jh-legal-article { padding: 24px 16px !important; }
  .jh-legal-article .jha-answer { padding: 20px 18px; }
  .jh-legal-article .jha-cta { padding: 22px 18px; }
  .jh-legal-article .jha-products .jha-product { padding: 10px; }
  .jh-legal-article .jha-products a.jha-product__link { padding: 6px 12px; font-size: 12.5px; }
}

/* ---------- 10. Figura editorial (foto o ilustración) ---------- */
.jh-legal-article .jha-figure { display: block !important; margin: 28px 0 32px; }
.jh-legal-article .jha-figure img {
  display: block;
  width: 100% !important;
  height: auto !important;
  border-radius: var(--jha-radius);
  background: var(--jha-soft);
}
.jh-legal-article .jha-figure figcaption {
  margin-top: 10px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--jha-muted);
}
.jh-legal-article .jha-figure--narrow { max-width: 520px !important; }

/* =========================================================
   CONVERSIÓN · Vitrinas y escaleras de precio (bocetos oct-2026)
   ========================================================= */
.jh-legal-article .jhv-head { margin: 0 0 14px; }
.jh-legal-article .jhv-head__title { margin: 0 0 4px; font-size: 20px; font-weight: 800; color: var(--jha-ink); line-height: 1.3; }
.jh-legal-article .jhv-head p { margin: 0; color: var(--jha-muted); font-size: 14.5px; }
.jh-legal-article .jhv-price { font-weight: 700; color: var(--jha-ink); font-variant-numeric: tabular-nums; }
.jh-legal-article .jhv-brand { display: block !important; font-size: 11.5px; font-weight: 600; color: var(--jha-muted); }

/* --- Vitrina A: tira deslizante con volteo --- */
.jh-legal-article .jhv-strip { display: block !important; margin: 32px 0; }
.jh-legal-article .jhv-strip__track {
  display: flex !important; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory;
  padding: 4px 2px 14px; -webkit-overflow-scrolling: touch; scrollbar-width: thin;
}
.jh-legal-article a.jhv-tile {
  display: block !important; flex: 0 0 200px; scroll-snap-align: start; text-decoration: none; color: var(--jha-ink);
}
.jh-legal-article .jhv-tile__img {
  display: block !important; position: relative; aspect-ratio: 1; border-radius: 14px; overflow: hidden; background: #111;
}
.jh-legal-article .jhv-tile__img img {
  position: absolute; inset: 0; width: 100% !important; height: 100% !important; object-fit: cover;
  transition: opacity .45s cubic-bezier(.22, 1, .36, 1), transform .6s cubic-bezier(.22, 1, .36, 1);
}
.jh-legal-article .jhv-tile__img img + img { opacity: 0; }
.jh-legal-article a.jhv-tile:hover .jhv-tile__img img + img,
.jh-legal-article a.jhv-tile:focus-visible .jhv-tile__img img + img { opacity: 1; }
.jh-legal-article a.jhv-tile:hover .jhv-tile__img img { transform: scale(1.04); }
.jh-legal-article .jhv-tile__name { display: block !important; margin-top: 10px; font-size: 14px; font-weight: 700; line-height: 1.3; }
.jh-legal-article .jhv-tile__meta { display: flex !important; justify-content: space-between; gap: 8px; margin-top: 2px; font-size: 13px; }

/* --- Vitrina B: mosaico en banda oscura --- */
.jh-legal-article .jhv-mosaic {
  display: block !important; margin: 36px 0; padding: 26px; background: #0e0e0e; border-radius: 18px; color: #e9e9e9;
}
.jh-legal-article .jhv-mosaic .jhv-head__title { color: #fff; font-size: 24px; }
.jh-legal-article .jhv-mosaic .jhv-head p { color: #bdbdbd !important; }
.jh-legal-article .jhv-mosaic__grid {
  display: grid !important; grid-template-columns: repeat(4, 1fr) !important; gap: 10px; margin-top: 18px;
}
.jh-legal-article a.jhv-mtile {
  display: block !important; position: relative; aspect-ratio: 1; border-radius: 12px; overflow: hidden; background: #1b1b1b; text-decoration: none;
}
.jh-legal-article a.jhv-mtile--big { grid-column: span 2; grid-row: span 2; aspect-ratio: auto; }
.jh-legal-article a.jhv-mtile img {
  position: absolute; inset: 0; width: 100% !important; height: 100% !important; object-fit: cover;
  transition: transform .7s cubic-bezier(.22, 1, .36, 1);
}
.jh-legal-article a.jhv-mtile:hover img { transform: scale(1.05); }
.jh-legal-article .jhv-mtile__cap {
  display: block !important; position: absolute; left: 0; right: 0; bottom: 0; padding: 26px 12px 10px;
  background: linear-gradient(transparent, rgba(0, 0, 0, .85)); color: #fff; font-size: 13px; font-weight: 600; line-height: 1.3;
}
.jh-legal-article .jhv-mtile__cap b { display: block !important; color: var(--jha-gold); font-weight: 700; }
.jh-legal-article a.jhv-mosaic__more { display: inline-block !important; margin-top: 18px; color: var(--jha-gold); font-weight: 700; text-decoration: none; }
.jh-legal-article a.jhv-mosaic__more:hover { color: #fff; }
@media (max-width: 600px) {
  .jh-legal-article .jhv-mosaic { padding: 20px 14px; }
  .jh-legal-article .jhv-mosaic__grid { grid-template-columns: 1fr 1fr !important; }
}

/* --- Vitrina C: la que conoces / las que no --- */
.jh-legal-article .jhv-versus {
  display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(0, 2.4fr) !important; gap: 18px;
  margin: 36px 0; padding: 22px; border: 1px solid var(--jha-line); border-radius: 18px; background: #fff;
}
.jh-legal-article .jhv-versus__label { margin: 0 0 10px; font-size: 13px; font-weight: 700; color: var(--jha-muted); }
.jh-legal-article .jhv-versus__known a,
.jh-legal-article .jhv-versus__new a { display: block !important; text-decoration: none; color: var(--jha-ink); }
.jh-legal-article .jhv-versus__known img { display: block; width: 100% !important; aspect-ratio: 1; object-fit: cover; border-radius: 12px; filter: saturate(.8); }
.jh-legal-article .jhv-versus__new { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 12px; }
.jh-legal-article .jhv-versus__new img { display: block; width: 100% !important; aspect-ratio: 1; object-fit: cover; border-radius: 12px; transition: transform .5s cubic-bezier(.22, 1, .36, 1); }
.jh-legal-article .jhv-versus__new a:hover img { transform: translateY(-3px); }
.jh-legal-article .jhv-versus small { display: block !important; margin-top: 8px; font-size: 13px; line-height: 1.4; }
.jh-legal-article .jhv-versus small b { display: block !important; font-size: 13.5px; }
.jh-legal-article .jhv-versus__col-new { display: block !important; padding-left: 18px; border-left: 1px dashed #d6d6d6; }
@media (max-width: 700px) {
  .jh-legal-article .jhv-versus { grid-template-columns: 1fr !important; padding: 16px; }
  .jh-legal-article .jhv-versus__known { max-width: 55%; }
  .jh-legal-article .jhv-versus__col-new { padding-left: 0; border-left: 0; padding-top: 14px; border-top: 1px dashed #d6d6d6; }
  .jh-legal-article .jhv-versus__new { gap: 8px; }
}

/* --- Escalera A: escalones --- */
.jh-legal-article .jhe-steps { display: block !important; margin: 36px 0; }
.jh-legal-article .jhe-steps__row { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 12px; align-items: end; }
.jh-legal-article a.jhe-step { display: flex !important; flex-direction: column; text-decoration: none; color: var(--jha-ink); }
.jh-legal-article .jhe-step img { display: block; width: 100% !important; aspect-ratio: 1; object-fit: cover; border-radius: 12px 12px 0 0; }
.jh-legal-article .jhe-step__base {
  display: block !important; padding: 12px 12px 14px; border-radius: 0 0 12px 12px; background: var(--jha-soft); border: 1px solid var(--jha-line); border-top: 0;
}
.jh-legal-article a.jhe-step:nth-child(2) .jhe-step__base { padding-bottom: 40px; }
.jh-legal-article a.jhe-step:nth-child(3) .jhe-step__base { padding-bottom: 66px; background: #efece4; }
.jh-legal-article a.jhe-step:nth-child(4) .jhe-step__base { padding-bottom: 92px; background: #111; color: #eee; border-color: #111; }
.jh-legal-article a.jhe-step:nth-child(4) .jhe-step__tier { color: var(--jha-gold); }
.jh-legal-article a.jhe-step:nth-child(4) .jhv-price { color: #fff; }
.jh-legal-article .jhe-step__tier { display: block !important; font-size: 15px; font-weight: 800; }
.jh-legal-article .jhe-step__line { display: block !important; margin-top: 4px; font-size: 12.5px; line-height: 1.4; }
.jh-legal-article a.jhe-step:hover img { filter: brightness(1.06); }
@media (max-width: 700px) {
  .jh-legal-article .jhe-steps__row { grid-template-columns: 1fr 1fr !important; align-items: stretch; }
  .jh-legal-article a.jhe-step .jhe-step__base { padding-bottom: 14px !important; flex: 1; }
}

/* --- Escalera B: línea de precio --- */
.jh-legal-article .jhe-line { display: block !important; margin: 36px 0; padding: 24px 22px 18px; border: 1px solid var(--jha-line); border-radius: 18px; }
.jh-legal-article .jhe-line__items,
.jh-legal-article .jhe-line__ticks { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 14px; }
.jh-legal-article a.jhe-dot { display: block !important; text-decoration: none; color: var(--jha-ink); }
.jh-legal-article a.jhe-dot img {
  display: block; width: 78% !important; aspect-ratio: 1; object-fit: cover; border-radius: 50%; margin: 0 auto;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .12); transition: transform .5s cubic-bezier(.22, 1, .36, 1);
}
.jh-legal-article a.jhe-dot:hover img { transform: scale(1.05); }
.jh-legal-article .jhe-line__track {
  display: block !important; height: 6px; margin: 18px 0 14px; border-radius: 999px;
  background: linear-gradient(90deg, #d9d9d4, #c99a2e 70%, #111);
}
.jh-legal-article .jhe-line__ticks div { display: block !important; text-align: center !important; font-size: 12.5px; line-height: 1.4; color: var(--jha-muted); }
.jh-legal-article .jhe-line__ticks b { display: block !important; text-align: center !important; font-size: 15px; color: var(--jha-ink); }
.jh-legal-article .jhe-line__ticks a { display: block !important; text-align: center !important; margin-top: 4px; font-size: 12.5px; }
.jh-legal-article .jhe-line__foot { margin: 16px 0 0; padding-top: 14px; border-top: 1px solid var(--jha-line); font-size: 13.5px; color: var(--jha-muted); }
@media (max-width: 600px) {
  .jh-legal-article .jhe-line { padding: 18px 10px; }
  .jh-legal-article .jhe-line__items,
  .jh-legal-article .jhe-line__ticks { gap: 6px; }
  .jh-legal-article .jhe-line__ticks div { font-size: 11px; }
  .jh-legal-article .jhe-line__ticks b { font-size: 13px; }
}

/* --- Escalera C: tabla de niveles (dentro de .jha-table) --- */
.jh-legal-article .jhe-table th { vertical-align: bottom; white-space: normal !important; background: #fff !important; color: var(--jha-ink) !important; font-size: 14px !important; }
.jh-legal-article .jhe-table th img { display: block; width: 84px !important; height: 84px !important; object-fit: cover; border-radius: 10px; margin-bottom: 8px; }
.jh-legal-article .jhe-table td:first-child { font-weight: 600; color: var(--jha-muted); white-space: nowrap !important; }
.jh-legal-article .jhe-table a.jha-product__link { margin-top: 0; }

/* Etiqueta de boceto (solo página de prueba) */
.jh-legal-article .bc-label { display: inline-block !important; margin: 56px 0 4px; padding: 4px 12px; border-radius: 999px; background: #e8f0ff; color: #1a3d8f; font-size: 12.5px; font-weight: 700; }

@media (prefers-reduced-motion: reduce) {
  .jh-legal-article .jhv-tile__img img,
  .jh-legal-article a.jhv-mtile img,
  .jh-legal-article .jhv-versus__new img,
  .jh-legal-article a.jhe-dot img { transition: opacity .2s linear; transform: none !important; }
}
.jh-legal-article .jhv-head .jhv-head__title { font-size: 20px !important; line-height: 1.3 !important; }
.jh-legal-article .jhv-mosaic .jhv-head .jhv-head__title { font-size: 24px !important; }
.jh-legal-article a.jhv-mtile:not(.jhv-mtile--big) .jhv-mtile__cap { font-size: 12px; padding: 22px 10px 8px; }
.jh-legal-article a.jhv-mtile--big .jhv-mtile__cap { font-size: 15px; padding: 40px 16px 14px; }
.jh-legal-article .jhe-line__ticks div { display: flex !important; flex-direction: column; align-items: center; }
@media (max-width: 600px) {
  .jh-legal-article a.jhv-mtile--big { grid-row: auto; aspect-ratio: 1; }
}

/* =========================================================
   CONVERSIÓN v2 · Vitrina (V1-V3) y Niveles (N1-N3) · oct-2026
   ========================================================= */
.jh-legal-article .jx-band {
  display: block !important; margin: 40px 0; padding: 30px 28px; border-radius: 20px;
  background: radial-gradient(120% 90% at 85% 0%, #2a2214 0%, #0d0d0d 55%) #0d0d0d; color: #ececec;
}
.jh-legal-article .jx-band .jx-title { margin: 0 0 6px; color: #fff; font-size: 26px !important; font-weight: 800; line-height: 1.2 !important; letter-spacing: -.01em; }
.jh-legal-article .jx-band .jx-sub { margin: 0 0 22px; color: #bfbfbf !important; font-size: 15px; max-width: 60ch; }
.jh-legal-article a.jx-more { display: inline-block !important; margin-top: 20px; color: var(--jha-gold); font-weight: 700; text-decoration: none; }
.jh-legal-article a.jx-more:hover { color: #fff; }
.jh-legal-article .jx-light .jx-title { color: var(--jha-ink); }
.jh-legal-article .jx-light .jx-sub { color: var(--jha-muted) !important; }
.jh-legal-article .jx-light { background: none; padding: 0; color: var(--jha-text); }

/* ---------- V1 · Paneles que se expanden ---------- */
.jh-legal-article .jx-acc { display: flex !important; gap: 8px; height: 420px; }
.jh-legal-article a.jx-acc__p {
  display: block !important; position: relative; flex: 1 1 0; min-width: 0; overflow: hidden; border-radius: 16px;
  text-decoration: none; color: #fff; background: #1a1a1a;
  transition: flex-grow .7s cubic-bezier(.22, 1, .36, 1);
}
.jh-legal-article .jx-acc:not(:hover) a.jx-acc__p:first-child,
.jh-legal-article a.jx-acc__p:hover,
.jh-legal-article a.jx-acc__p:focus-visible { flex-grow: 4.2; }
.jh-legal-article a.jx-acc__p img {
  position: absolute; inset: 0; width: 100% !important; height: 100% !important; object-fit: cover;
  transform: scale(1.12); filter: brightness(.62) saturate(.9);
  transition: transform 1s cubic-bezier(.22, 1, .36, 1), filter .7s ease;
}
.jh-legal-article .jx-acc:not(:hover) a.jx-acc__p:first-child img,
.jh-legal-article a.jx-acc__p:hover img { transform: scale(1); filter: none; }
.jh-legal-article .jx-acc__cap {
  display: block !important; position: absolute; left: 0; right: 0; bottom: 0; padding: 60px 20px 18px;
  background: linear-gradient(transparent, rgba(0, 0, 0, .88));
  opacity: 0; transform: translateY(12px); transition: opacity .5s ease .1s, transform .6s cubic-bezier(.22, 1, .36, 1) .1s;
}
.jh-legal-article .jx-acc:not(:hover) a.jx-acc__p:first-child .jx-acc__cap,
.jh-legal-article a.jx-acc__p:hover .jx-acc__cap { opacity: 1; transform: none; }
.jh-legal-article .jx-acc__cap b { display: block !important; font-size: 20px; line-height: 1.2; }
.jh-legal-article .jx-acc__cap em { display: inline-block !important; margin-top: 6px; font-style: normal; color: var(--jha-gold); font-weight: 700; }
.jh-legal-article .jx-acc__cap span { display: inline-block !important; margin: 6px 0 0 10px; padding: 2px 9px; border: 1px solid rgba(246, 195, 79, .5); border-radius: 999px; font-size: 12px; color: #f3e2b5; }
.jh-legal-article .jx-acc__n {
  display: block !important; position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%) rotate(180deg);
  writing-mode: vertical-rl !important; font-size: 13px; font-weight: 700; color: rgba(255, 255, 255, .85); white-space: nowrap !important;
  transition: opacity .3s ease;
}
.jh-legal-article .jx-acc:not(:hover) a.jx-acc__p:first-child .jx-acc__n,
.jh-legal-article a.jx-acc__p:hover .jx-acc__n { opacity: 0; }
@media (max-width: 700px) {
  .jh-legal-article .jx-acc { height: auto; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 6px; }
  .jh-legal-article a.jx-acc__p { flex: 0 0 78% !important; height: 360px; scroll-snap-align: start; }
  .jh-legal-article a.jx-acc__p img { transform: none; filter: none; }
  .jh-legal-article a.jx-acc__p .jx-acc__cap { opacity: 1; transform: none; }
  .jh-legal-article .jx-acc__n { display: none !important; }
}

/* ---------- V2 · Bento grande con cambio de foto ---------- */
.jh-legal-article .jx-bento {
  display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)) !important; grid-template-rows: 210px 210px; gap: 10px;
}
.jh-legal-article a.jx-b {
  display: block !important; position: relative; overflow: hidden; border-radius: 16px; background: #1a1a1a; text-decoration: none; color: #fff;
}
.jh-legal-article a.jx-b--hero { grid-column: span 2; grid-row: span 2; }
.jh-legal-article a.jx-b--tall { grid-row: span 2; }
.jh-legal-article a.jx-b img {
  position: absolute; inset: 0; width: 100% !important; height: 100% !important; object-fit: cover;
  transition: opacity .6s ease, transform 1.2s cubic-bezier(.22, 1, .36, 1);
}
.jh-legal-article a.jx-b img + img { opacity: 0; transform: scale(1.08); }
.jh-legal-article a.jx-b:hover img:first-child { opacity: 0; transform: scale(1.06); }
.jh-legal-article a.jx-b:hover img + img { opacity: 1; transform: scale(1); }
.jh-legal-article .jx-b__cap {
  display: block !important; position: absolute; left: 12px; right: 12px; bottom: 12px; padding: 10px 12px; border-radius: 12px;
  background: rgba(10, 10, 10, .72); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  font-size: 13px; font-weight: 600; line-height: 1.3;
  transform: translateY(calc(100% + 16px)); transition: transform .55s cubic-bezier(.22, 1, .36, 1);
}
.jh-legal-article a.jx-b:hover .jx-b__cap, .jh-legal-article a.jx-b--hero .jx-b__cap { transform: none; }
.jh-legal-article .jx-b__cap b { display: block !important; color: var(--jha-gold); }
.jh-legal-article a.jx-b--hero .jx-b__cap { font-size: 16px; padding: 14px 16px; }
@media (max-width: 700px) {
  .jh-legal-article .jx-bento { grid-template-columns: 1fr 1fr !important; grid-template-rows: auto; grid-auto-rows: 170px; }
  .jh-legal-article a.jx-b--hero { grid-column: span 2; grid-row: auto; height: 300px; }
  .jh-legal-article a.jx-b--tall { grid-row: auto; }
  .jh-legal-article .jx-b__cap { transform: none; font-size: 12px; padding: 8px 10px; }
}

/* ---------- V3 · Foco: foto grande + miniaturas (CSS :has) ---------- */
.jh-legal-article .jx-spot { display: grid !important; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr) !important; gap: 14px; }
.jh-legal-article .jx-spot__stage { display: block !important; position: relative; aspect-ratio: 4 / 5; border-radius: 18px; overflow: hidden; background: #151515; }
.jh-legal-article a.jx-spot__slide { display: block !important; position: absolute; inset: 0; opacity: 0; transition: opacity .6s ease; text-decoration: none; color: #fff; pointer-events: none; }
.jh-legal-article a.jx-spot__slide img { position: absolute; inset: 0; width: 100% !important; height: 100% !important; object-fit: cover; transform: scale(1.06); transition: transform 1.4s cubic-bezier(.22, 1, .36, 1); }
.jh-legal-article .jx-spot__info {
  display: block !important; position: absolute; left: 0; right: 0; bottom: 0; padding: 70px 22px 20px; background: linear-gradient(transparent, rgba(0, 0, 0, .9));
}
.jh-legal-article .jx-spot__info b { display: block !important; font-size: 22px; line-height: 1.2; }
.jh-legal-article .jx-spot__info em { display: block !important; margin: 4px 0 12px; font-style: normal; color: #d9d9d9; font-size: 14px; }
.jh-legal-article .jx-spot__info span { display: inline-block !important; padding: 9px 16px; border-radius: 999px; background: var(--jha-gold); color: #111; font-weight: 700; font-size: 13.5px; }
/* estado por defecto: la 1 visible; al pasar por una miniatura se muestra la suya */
.jh-legal-article .jx-spot:not(:has(.jx-spot__thumbs a:hover)) a.jx-spot__slide:first-child,
.jh-legal-article .jx-spot:has(.jx-t1:hover) a.jx-s1,
.jh-legal-article .jx-spot:has(.jx-t2:hover) a.jx-s2,
.jh-legal-article .jx-spot:has(.jx-t3:hover) a.jx-s3,
.jh-legal-article .jx-spot:has(.jx-t4:hover) a.jx-s4,
.jh-legal-article .jx-spot:has(.jx-t5:hover) a.jx-s5,
.jh-legal-article .jx-spot:has(.jx-t6:hover) a.jx-s6 { opacity: 1; pointer-events: auto; }
.jh-legal-article .jx-spot:not(:has(.jx-spot__thumbs a:hover)) a.jx-spot__slide:first-child img,
.jh-legal-article .jx-spot:has(.jx-spot__thumbs a:hover) a.jx-spot__slide img { transform: scale(1); }
.jh-legal-article .jx-spot__thumbs { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 10px; align-content: start; }
.jh-legal-article .jx-spot__thumbs a { display: block !important; text-decoration: none; color: #eee; border-radius: 12px; overflow: hidden; background: #1a1a1a; outline: 2px solid transparent; transition: outline-color .3s ease; }
.jh-legal-article .jx-spot__thumbs a:hover { outline-color: var(--jha-gold); }
.jh-legal-article .jx-spot__thumbs img { display: block; width: 100% !important; aspect-ratio: 1; object-fit: cover; filter: grayscale(.35) brightness(.8); transition: filter .4s ease; }
.jh-legal-article .jx-spot__thumbs a:hover img { filter: none; }
.jh-legal-article .jx-spot__thumbs small { display: block !important; padding: 7px 9px 9px; font-size: 12px; font-weight: 600; line-height: 1.3; }
@media (max-width: 700px) {
  .jh-legal-article .jx-spot { grid-template-columns: 1fr !important; }
  .jh-legal-article .jx-spot__thumbs { grid-template-columns: repeat(3, 1fr) !important; }
}

/* ---------- N1 · Columnas con foto grande ---------- */
.jh-legal-article .jx-tiers { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 12px; }
.jh-legal-article .jx-tier {
  display: flex !important; flex-direction: column; border: 1px solid var(--jha-line); border-radius: 18px; overflow: hidden; background: #fff;
  transition: transform .5s cubic-bezier(.22, 1, .36, 1), box-shadow .5s cubic-bezier(.22, 1, .36, 1);
}
.jh-legal-article .jx-tier:hover { transform: translateY(-6px); box-shadow: 0 18px 40px rgba(0, 0, 0, .12); }
.jh-legal-article .jx-tier__img { display: block !important; position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: #111; }
.jh-legal-article .jx-tier__img img { position: absolute; inset: 0; width: 100% !important; height: 100% !important; object-fit: cover; transition: opacity .6s ease, transform 1.1s cubic-bezier(.22, 1, .36, 1); }
.jh-legal-article .jx-tier__img img + img { opacity: 0; }
.jh-legal-article .jx-tier:hover .jx-tier__img img:first-child { opacity: 0; transform: scale(1.05); }
.jh-legal-article .jx-tier:hover .jx-tier__img img + img { opacity: 1; }
.jh-legal-article .jx-tier__badge { display: block !important; position: absolute; top: 12px; left: 12px; padding: 4px 10px; border-radius: 999px; background: rgba(255, 255, 255, .92); color: #111; font-size: 12px; font-weight: 700; }
.jh-legal-article .jx-tier__body { display: flex !important; flex-direction: column; flex: 1; padding: 16px 16px 18px; }
.jh-legal-article .jx-tier__price { display: block !important; font-size: 24px; font-weight: 800; letter-spacing: -.01em; color: var(--jha-ink); font-variant-numeric: tabular-nums; }
.jh-legal-article .jx-tier__price small { font-size: 13px; font-weight: 600; color: var(--jha-muted); }
.jh-legal-article .jx-tier dl { display: block !important; margin: 12px 0 14px; font-size: 13.5px; line-height: 1.45; }
.jh-legal-article .jx-tier dt { margin-top: 8px; font-size: 11.5px; font-weight: 700; color: var(--jha-muted); }
.jh-legal-article .jx-tier dd { margin: 0; color: var(--jha-ink); }
.jh-legal-article a.jx-tier__btn { display: block !important; margin-top: auto; padding: 10px; border-radius: 999px; border: 1px solid var(--jha-ink); text-align: center !important; font-size: 13.5px; font-weight: 700; color: var(--jha-ink); text-decoration: none; transition: background .25s ease, color .25s ease; }
.jh-legal-article a.jx-tier__btn:hover { background: var(--jha-ink); color: #fff; }
.jh-legal-article .jx-tier--top { background: #0f0f0f; border-color: #0f0f0f; color: #ddd; }
.jh-legal-article .jx-tier--top .jx-tier__price, .jh-legal-article .jx-tier--top dd { color: #fff; }
.jh-legal-article .jx-tier--top dt { color: var(--jha-gold); }
.jh-legal-article .jx-tier--top .jx-tier__badge { background: var(--jha-gold); }
.jh-legal-article .jx-tier--top a.jx-tier__btn { background: var(--jha-gold); border-color: var(--jha-gold); color: #111; }
.jh-legal-article .jx-tier--top a.jx-tier__btn:hover { background: #fff; border-color: #fff; }
@media (max-width: 760px) {
  .jh-legal-article .jx-tiers { grid-template-columns: 1fr 1fr !important; }
}

/* ---------- N2 · Tabla oscura con cabeceras de foto ---------- */
.jh-legal-article .jx-dtable { display: block !important; overflow-x: auto; border-radius: 18px; }
.jh-legal-article .jx-dtable table { width: 100%; min-width: 640px; max-width: none !important; border-collapse: separate !important; border-spacing: 0; margin: 0 !important; border: 0 !important; background: transparent !important; color: #ddd; font-size: 14px !important; }
.jh-legal-article .jx-dtable th, .jh-legal-article .jx-dtable td { padding: 14px 14px !important; border: 0 !important; border-bottom: 1px solid rgba(255, 255, 255, .08) !important; background: transparent !important; color: inherit !important; text-transform: none !important; letter-spacing: 0 !important; vertical-align: top; transition: background .3s ease; }
.jh-legal-article .jx-dtable tr:nth-child(even) td { background: transparent !important; }
.jh-legal-article .jx-dtable td:first-child { color: #9a9a9a !important; font-weight: 600; font-size: 13px; white-space: nowrap !important; }
.jh-legal-article .jx-dtable th { vertical-align: bottom; }
.jh-legal-article .jx-dtable th a { display: block !important; text-decoration: none; color: #fff; }
.jh-legal-article .jx-dtable th img { display: block; width: 100% !important; aspect-ratio: 1; object-fit: cover; border-radius: 14px; margin-bottom: 12px; transition: transform .6s cubic-bezier(.22, 1, .36, 1), box-shadow .6s ease; }
.jh-legal-article .jx-dtable th a:hover img { transform: scale(1.04) rotate(-1deg); box-shadow: 0 14px 30px rgba(0, 0, 0, .5); }
.jh-legal-article .jx-dtable th b { display: block !important; font-size: 15px; color: #fff; }
.jh-legal-article .jx-dtable th em { display: block !important; font-style: normal; color: var(--jha-gold); font-weight: 700; font-size: 18px; }
.jh-legal-article .jx-dtable tr:hover td { background: rgba(255, 255, 255, .04) !important; }
.jh-legal-article .jx-dtable .jx-col4 { background: rgba(246, 195, 79, .07) !important; }
.jh-legal-article .jx-dtable a.jx-dbtn { display: inline-block !important; padding: 8px 14px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .35); color: #fff; font-size: 13px; font-weight: 700; text-decoration: none; white-space: nowrap !important; }
.jh-legal-article .jx-dtable a.jx-dbtn:hover, .jh-legal-article .jx-dtable .jx-col4 a.jx-dbtn { background: var(--jha-gold); border-color: var(--jha-gold); color: #111; }

/* ---------- N3 · Tarjetas que se giran ---------- */
.jh-legal-article .jx-flips { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 14px; }
.jh-legal-article .jx-flip { display: block !important; perspective: 1200px; aspect-ratio: 3 / 4.4; }
.jh-legal-article .jx-flip__in { display: block !important; position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform .9s cubic-bezier(.22, 1, .36, 1); }
.jh-legal-article .jx-flip:hover .jx-flip__in, .jh-legal-article .jx-flip:focus-within .jx-flip__in { transform: rotateY(180deg); }
.jh-legal-article .jx-flip__f, .jh-legal-article .jx-flip__b {
  display: block !important; position: absolute; inset: 0; border-radius: 18px; overflow: hidden; backface-visibility: hidden; -webkit-backface-visibility: hidden;
}
.jh-legal-article .jx-flip__f img { position: absolute; inset: 0; width: 100% !important; height: 100% !important; object-fit: cover; }
.jh-legal-article .jx-flip__f span { display: block !important; position: absolute; left: 0; right: 0; bottom: 0; padding: 60px 16px 16px; background: linear-gradient(transparent, rgba(0, 0, 0, .88)); color: #fff; }
.jh-legal-article .jx-flip__f b { display: block !important; font-size: 18px; }
.jh-legal-article .jx-flip__f em { display: block !important; font-style: normal; color: var(--jha-gold); font-weight: 800; font-size: 20px; }
.jh-legal-article .jx-flip__f i { display: block !important; margin-top: 6px; font-style: normal; font-size: 11.5px; color: #cfcfcf; }
.jh-legal-article .jx-flip__b { transform: rotateY(180deg); background: #111; color: #e6e6e6; padding: 20px 18px; display: flex !important; flex-direction: column; }
.jh-legal-article .jx-flip__b b { display: block !important; color: var(--jha-gold); font-size: 17px; margin-bottom: 8px; }
.jh-legal-article .jx-flip__b dl { margin: 0 0 12px; font-size: 13px; line-height: 1.45; }
.jh-legal-article .jx-flip__b dt { margin-top: 10px; font-size: 11.5px; font-weight: 700; color: #9b9b9b; }
.jh-legal-article .jx-flip__b dd { margin: 0; color: #fff; }
.jh-legal-article .jx-flip__b a { display: block !important; margin-top: auto; padding: 10px; border-radius: 999px; background: var(--jha-gold); color: #111; text-align: center !important; font-weight: 700; font-size: 13.5px; text-decoration: none; }
.jh-legal-article .jx-flip__b a + a { margin-top: 8px; background: transparent; border: 1px solid rgba(255, 255, 255, .3); color: #fff; }
@media (max-width: 760px) {
  .jh-legal-article .jx-flips { grid-template-columns: 1fr 1fr !important; }
}

@media (prefers-reduced-motion: reduce) {
  .jh-legal-article a.jx-acc__p, .jh-legal-article a.jx-acc__p img, .jh-legal-article a.jx-b img, .jh-legal-article .jx-b__cap,
  .jh-legal-article a.jx-spot__slide img, .jh-legal-article .jx-tier, .jh-legal-article .jx-tier__img img,
  .jh-legal-article .jx-dtable th img, .jh-legal-article .jx-flip__in { transition-duration: .01s !important; }
}
.jh-legal-article .jx-acc__cap { right: auto !important; width: 360px !important; max-width: none !important; }
@media (max-width: 700px) { .jh-legal-article .jx-acc__cap { width: 100% !important; right: 0 !important; } }
.jh-legal-article .jx-spot__stage { aspect-ratio: auto; min-height: 460px; }
@media (max-width: 700px) { .jh-legal-article .jx-spot__stage { min-height: 0; aspect-ratio: 4 / 5; } }
.jh-legal-article .jx-tier__price { white-space: nowrap !important; font-size: 22px; }
.jh-legal-article .jx-tier__price small { display: block !important; line-height: 1.2; }
.jh-legal-article .jx-dtable th em { white-space: nowrap !important; }
.jh-legal-article .jx-dtable th em small { display: block !important; font-size: 12px; color: #bdbdbd; font-weight: 600; }
.jh-legal-article .jx-dtable thead th { background: transparent !important; }
.jh-legal-article .jx-flip { aspect-ratio: auto !important; height: 400px !important; }
.jh-legal-article .jx-flip__in { height: 400px !important; }
.jh-legal-article .jx-flip__f em { white-space: nowrap !important; }
.jh-legal-article .jx-flip__f em small { display: block !important; font-size: 12px; color: #d8d8d8; font-weight: 600; }
@media (max-width: 760px) { .jh-legal-article .jx-flip, .jh-legal-article .jx-flip__in { height: 330px !important; } }

/* ---------- 11. Fichas de baraja agrupadas (jha-decks) ---------- */
.jh-legal-article .jha-decks {
  display: grid !important; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)) !important; gap: 14px; margin: 22px 0 34px;
}
.jh-legal-article .jha-deck {
  display: flex !important; flex-direction: column; gap: 12px; padding: 20px 20px 16px;
  background: #fff; border: 1px solid var(--jha-line); border-radius: 16px;
  transition: border-color .3s ease, box-shadow .4s cubic-bezier(.22, 1, .36, 1);
}
.jh-legal-article .jha-deck:hover { border-color: #dcd3bd; box-shadow: 0 10px 28px rgba(0, 0, 0, .06); }
.jh-legal-article .jha-deck--wide { grid-column: 1 / -1; }
.jh-legal-article .jha-deck__head { display: flex !important; align-items: baseline; justify-content: space-between; gap: 12px; }
.jh-legal-article .jha-deck__head h3 { margin: 0 !important; font-size: 17px !important; font-weight: 800; color: var(--jha-ink); }
.jh-legal-article .jha-deck__n {
  display: inline-flex !important; align-items: baseline; gap: 5px; white-space: nowrap !important;
  font-size: 30px; font-weight: 800; letter-spacing: -.02em; line-height: 1; color: var(--jha-ink); font-variant-numeric: tabular-nums;
}
.jh-legal-article .jha-deck__n small { font-size: 12.5px; font-weight: 600; letter-spacing: 0; color: var(--jha-muted); }
.jh-legal-article .jha-deck p { margin: 0 !important; font-size: 14.5px; line-height: 1.6; }
.jh-legal-article .jha-deckbar--mini { height: 10px !important; gap: 2px; margin: 0 !important; }
.jh-legal-article .jha-deckbar--mini .jha-deckbar__seg { min-width: 4px; border-radius: 3px; }
.jh-legal-article .jha-deck .jha-hand--sm { display: flex !important; flex-wrap: wrap; margin: 0; }

/* Píldoras sutiles */
.jh-legal-article ul.jha-pills { display: flex !important; flex-wrap: wrap; gap: 6px; margin: 0 !important; padding: 0 !important; list-style: none; }
.jh-legal-article ul.jha-pills li {
  margin: 0 !important; padding: 3px 10px; border: 1px solid #e3e0d8; border-radius: 999px;
  background: #faf9f6; color: #4a4a4a; font-size: 12.5px; font-weight: 500; line-height: 1.5;
}
.jh-legal-article ul.jha-pills li::marker { content: none; }

/* Detalles plegables */
.jh-legal-article details.jha-more { display: block !important; margin-top: 2px; border-top: 1px solid var(--jha-line); padding-top: 10px; }
.jh-legal-article details.jha-more summary {
  cursor: pointer; list-style: none; font-size: 13px; font-weight: 700; color: var(--jha-ink);
  display: flex !important; align-items: center; gap: 8px;
}
.jh-legal-article details.jha-more summary::-webkit-details-marker { display: none; }
.jh-legal-article details.jha-more summary::after {
  content: ''; width: 7px; height: 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translateY(-2px); transition: transform .3s ease; margin-left: 2px;
}
.jh-legal-article details.jha-more[open] summary::after { transform: rotate(-135deg) translateY(-1px); }
.jh-legal-article details.jha-more summary:hover { color: #8a6a1c; }
.jh-legal-article details.jha-more p { margin-top: 10px !important; font-size: 14px; color: var(--jha-text); }

/* ---------- 12. Índice lateral rediseñado (solo artículos) ---------- */
.jh-legal-toc { border: 0 !important; background: transparent !important; box-shadow: none !important; }
.jh-legal-toc__inner {
  position: relative; padding: 18px 16px 16px !important; background: #fff; border: 1px solid #ececec; border-radius: 16px; overflow: hidden;
}
.jh-legal-toc__inner::before {
  content: ''; position: absolute; left: 0; top: 0; height: 3px; width: calc(var(--jh-read, 0) * 100%);
  background: linear-gradient(90deg, #f6c34f, #d4a040); transition: width .15s linear;
}
.jh-legal-toc__title {
  display: flex !important; justify-content: space-between; align-items: baseline; gap: 8px;
  margin: 0 0 12px !important; padding: 0 0 12px !important; border-bottom: 1px solid #f0f0f0 !important;
  font-size: 13px !important; font-weight: 800 !important; letter-spacing: 0 !important; text-transform: none !important; color: #111 !important;
}
.jh-legal-toc__title::before { display: none !important; }
.jh-legal-toc__time { font-size: 12px; font-weight: 500; color: #8a8a8a; white-space: nowrap; }
.jh-legal-toc__list { position: relative; margin: 0 !important; padding: 0 0 0 14px !important; }
.jh-legal-toc__list::before { content: ''; position: absolute; left: 3px; top: 6px; bottom: 6px; width: 1px; background: #ececec; }
.jh-legal-toc__item { position: relative; margin: 0 !important; padding: 0 !important; list-style: none !important; }
.jh-legal-toc__item a {
  display: block !important; padding: 6px 4px 6px 8px !important; border-radius: 8px;
  font-size: 13px !important; line-height: 1.4 !important; color: #6a6a6a !important; text-decoration: none !important;
  transition: color .2s ease, background .2s ease;
}
.jh-legal-toc__item a::before {
  content: '' !important; position: absolute; left: -14px !important; top: 13px !important; width: 7px !important; height: 7px !important;
  border-radius: 50%; background: #fff !important; border: 1.5px solid #d4d4d4; transform: none !important; transition: all .25s ease;
}
.jh-legal-toc__item a:hover { color: #111 !important; background: #faf8f2; }
.jh-legal-toc__item a.is-read { color: #9a9a9a !important; }
.jh-legal-toc__item a.is-read::before { background: #d4a040 !important; border-color: #d4a040; }
.jh-legal-toc__item a.is-active { color: #111 !important; font-weight: 700 !important; background: #fbf6e8; }
.jh-legal-toc__item a.is-active::before { background: #f6c34f !important; border-color: #d4a040; box-shadow: 0 0 0 4px rgba(246, 195, 79, .25); }
@media (max-width: 900px) {
  .jh-legal-toc__inner { padding: 14px !important; }
}

/* Bloque final «Lo último en…»: tarjetas más sobrias */
.jh-legal-article .jh-prodblock a, .jh-legal-article .jh-prodblock a:hover { text-decoration: none !important; }
.jh-legal-article .jh-prodblock .jh-cat-card .jh-cat-card__body { text-align: left !important; padding: 10px 12px 12px !important; }
.jh-legal-article .jh-prodblock .jh-cat-card .jh-cat-card__body * { text-align: left !important; }
.jh-legal-article .jh-prodblock .jh-cat-card .jh-cat-card__brand {
  display: block !important; margin: 0 0 3px !important; font-size: 10.5px !important; font-weight: 600 !important; letter-spacing: .04em !important; color: #8a8a8a !important;
}
.jh-legal-article .jh-prodblock .jh-cat-card .jh-cat-card__name {
  margin: 0 0 8px !important; font-size: 13.5px !important; font-weight: 600 !important; line-height: 1.35 !important; color: #1a1a1a !important;
  min-height: calc(2 * 1.35em) !important; -webkit-line-clamp: 2;
}
.jh-legal-article .jh-prodblock .jh-cat-card .jh-cat-card__priceline { display: flex !important; justify-content: space-between !important; align-items: center !important; gap: 8px; }
.jh-legal-article .jh-prodblock .jh-cat-card .jh-cat-card__price-now { font-size: 14px !important; font-weight: 700 !important; }
.jh-legal-article .jh-prodblock .jh-cat-card .jh-cat-card__quick-add { margin: 0 !important; padding: 6px 9px !important; font-size: 12px !important; }
.jh-legal-article .jh-prodblock .jh-cat-card .jh-cat-card__quick-add-txt { display: none !important; }
.jh-legal-article .jh-prodblock .jh-cat-card .jh-cat-card__priceline { flex-direction: row !important; flex-wrap: nowrap !important; }
.jh-legal-article .jh-prodblock .jh-cat-card .jh-cat-card__price { margin: 0 !important; flex: 1; }
.jh-legal-article .jh-prodblock .jh-cat-card .jh-cat-card__quick-add { width: auto !important; flex: 0 0 auto; }
.jh-legal-article .jh-prodblock .jh-cat-card .jh-cat-card__brand { white-space: nowrap !important; overflow: hidden; text-overflow: ellipsis; }
.jh-legal-page .jh-legal-article .jh-prodblock .jh-cat-card span.jh-cat-card__brand { text-align: left !important; text-align-last: left !important; margin-left: 0 !important; margin-right: 0 !important; width: 100% !important; }
.jh-legal-article .jx-dtable td a:not(.jx-dbtn) { color: #f3e2b5 !important; text-decoration: underline !important; text-decoration-color: rgba(243, 226, 181, .35) !important; text-underline-offset: 3px; }
.jh-legal-article .jx-dtable td a:not(.jx-dbtn):hover { color: #fff !important; }
.jh-legal-article .jx-dtable th em { display: block !important; }
/* Vitrinas de cubos, kendamas, puzzles y fingerboard: fotos de producto sobre blanco */
.jh-legal-article .jx-bento[data-noprice] a.jx-b { background: #fff; }
.jh-legal-article .jx-bento[data-noprice] a.jx-b img { object-fit: contain; padding: 6%; box-sizing: border-box; }
.jh-legal-article .jx-bento[data-noprice] .jx-b__cap { background: rgba(10, 10, 10, .78); }