/* OCÉANO CASINOS — Juego responsable
   La única franja oscura del cuerpo de la home. El cambio de superficie es
   deliberado: este contenido tiene que pesar más que el resto y separarse
   de lo que viene antes y después. */

.oc-jr {
  position: relative;
  background: var(--oc-navy);
  color: var(--oc-on-navy);
}

/* Filete del isotipo cerrando la franja por arriba y por abajo */
.oc-jr::before,
.oc-jr::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  height: 2px;
  background: var(--oc-arc);
}
.oc-jr::before { top: 0; }
.oc-jr::after  { bottom: 0; }

.oc-jr .oc-eyebrow { color: var(--oc-gold); }
.oc-jr .oc-lead { color: var(--oc-on-navy-2); }

.oc-jr__layout {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: var(--space-10);
  align-items: start;
}

.oc-jr__intro .oc-h2 { max-width: 17ch; }
.oc-jr__intro .oc-lead { margin-top: var(--space-5); }
.oc-jr__parrafo {
  margin-top: var(--space-5);
  color: var(--oc-on-navy-2);
  max-width: 54ch;
}
.oc-jr__intro .oc-btn { margin-top: var(--space-7); }

/* ── Panel ─────────────────────────────────────────────── */
.oc-jr__panel {
  padding: var(--space-8) var(--space-7);
  border-radius: var(--radius-lg);
  background: rgba(245, 243, 238, 0.055);
  box-shadow: inset 0 0 0 1px var(--oc-navy-line);
}

.oc-jr__subtitulo {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--oc-gold);
  margin: 0 0 var(--space-5);
}

.oc-jr__senales,
.oc-jr__compromisos {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-4);
  font-size: var(--text-base);
}

.oc-jr__senales li {
  position: relative;
  padding-left: var(--space-6);
  color: var(--oc-on-navy-2);
}
.oc-jr__senales li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.66em;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--oc-iso-ember);
}

.oc-jr .oc-rule { margin-block: var(--space-7); }

.oc-jr__compromisos li { color: var(--oc-on-navy-2); }
.oc-jr__compromisos strong {
  display: block;
  color: var(--oc-on-navy);
  font-weight: 600;
  margin-bottom: 3px;
}

@media (max-width: 900px) {
  .oc-jr__layout { grid-template-columns: 1fr; gap: var(--space-8); }
  .oc-jr__panel { padding: var(--space-6); }
}