/* OCÉANO CASINOS — Hero
   Es la única pantalla oscura de la parte alta del sitio, y existe para dar
   profundidad: luz radial, aros de oro a distintas opacidades y el logotipo
   como pieza iluminada en el centro. Después de esto la página abre a papel.

   El logotipo nunca pasa de 168 px de ancho en pantalla. El archivo del
   cliente mide 335 px, así que a ese tamaño va al doble de densidad y se ve
   nítido en pantallas retina. Toda la escala la carga la rueda. */

.oc-hero {
  position: relative;
  isolation: isolate;
  padding-block: 9.5rem var(--space-9);
  background: var(--oc-navy-deep);
  color: var(--oc-on-navy);
  overflow: hidden;
}

/* Luz que baja desde detrás de la rueda */
.oc-hero__luz {
  position: absolute;
  z-index: -1;
  inset: -20% -10% auto auto;
  width: min(94vw, 1100px);
  aspect-ratio: 1;
  background:
    radial-gradient(circle, rgba(196, 154, 63, 0.20) 0%, rgba(196, 154, 63, 0) 46%),
    radial-gradient(circle, rgba(43, 58, 140, 0.42) 0%, rgba(13, 17, 48, 0) 62%);
  pointer-events: none;
}

.oc-hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr);
  align-items: center;
  gap: var(--space-9);
}

.oc-hero__texto { position: relative; z-index: 1; }
.oc-hero .oc-eyebrow { color: var(--oc-gold); }

.oc-hero__title {
  font-size: clamp(2.5rem, 5.4vw, var(--text-5xl));
  font-variation-settings: 'SOFT' 0, 'WONK' 0, 'opsz' 144;
  color: var(--oc-on-navy);
  margin-bottom: var(--space-6);
}

.oc-hero__lead { max-width: 48ch; color: var(--oc-on-navy-2); }

.oc-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin-top: var(--space-7);
}

/* Botón de línea sobre fondo oscuro */
.oc-btn--linea {
  background: transparent;
  color: var(--oc-on-navy);
  box-shadow: inset 0 0 0 1px var(--oc-navy-line);
}
.oc-btn--linea:hover {
  box-shadow: inset 0 0 0 1px var(--oc-gold);
  color: var(--oc-gold);
  transform: translateY(-2px);
}

/* ── La rueda ──────────────────────────────────────────── */
.oc-hero__rueda {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  width: 100%;
  max-width: 520px;
  margin-inline: auto;
}

.oc-hero__aro { position: absolute; inset: 0; width: 100%; height: 100%; }

/* Arranca a tres vueltas y frena como una ruleta: mucha velocidad al
   principio y una cola larguísima al final. Termina y se queda quieta —una
   rueda girando para siempre distrae y, pasados cinco segundos, la WCAG
   pediría un control para pararla. */
.oc-hero__aro-gira {
  transform-origin: 300px 300px;
  animation: oc-ruleta 4.6s cubic-bezier(0.12, 0.74, 0.05, 1) 1 both;
}
@keyframes oc-ruleta {
  from { transform: rotate(-1080deg); }
  to   { transform: rotate(0deg); }
}

/* El halo respira detrás del logotipo */
.oc-hero__rueda::before {
  content: "";
  position: absolute;
  width: 60%; aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(196, 154, 63, 0.30) 0%, rgba(196, 154, 63, 0) 70%);
  animation: oc-respirar 7s ease-in-out infinite;
}
@keyframes oc-respirar {
  0%, 100% { transform: scale(1);    opacity: 0.75; }
  50%      { transform: scale(1.14); opacity: 1; }
}

/* El logotipo completo, no solo la esfera: suelta, la esfera con su estela
   se lee como cualquier cosa menos como una marca. El PNG mide 1181 px de
   ancho, así que a 400 px va a más del triple de densidad. */
.oc-hero__logo {
  position: relative;
  width: 72%;
  max-width: 400px;
  height: auto;
  filter: drop-shadow(0 14px 30px rgba(0, 0, 0, 0.55));
  animation: oc-flotar 9s ease-in-out infinite;
}
@keyframes oc-flotar {
  0%, 100% { transform: translateY(0);    }
  50%      { transform: translateY(-9px); }
}

@media (prefers-reduced-motion: reduce) {
  .oc-hero__aro-gira, .oc-hero__logo, .oc-hero__rueda::before { animation: none; }
}

/* ── Cifras ────────────────────────────────────────────── */
/* Dos cifras, cada una con su rótulo y la línea que dice de dónde sale.
   Sin esa línea una cifra grande es solo un adorno tipográfico. */
.oc-hero__stats {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-10);
  list-style: none;
  margin: var(--space-8) 0 0;
  padding: var(--space-6) 0 0;
  border-top: 1px solid var(--oc-navy-line);
}
.oc-hero__stats li {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  max-width: 34ch;
}

.oc-hero__cifra {
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 4.2vw, 3rem);
  font-variation-settings: 'SOFT' 0, 'WONK' 0, 'opsz' 96;
  line-height: 1;
  letter-spacing: var(--tracking-tight);
  font-variant-numeric: tabular-nums;
  color: var(--oc-on-navy);
}

.oc-hero__rotulo {
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--oc-on-navy);
}

.oc-hero__metodo {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-variation-settings: normal;
  letter-spacing: 0;
  line-height: 1.45;
  color: var(--oc-on-navy-2);
}

/* Rodillos: cada dígito es una tira 0-9 que baja hasta su cifra.
   `--oc-paso` es a la vez el alto de la ventanilla, el alto de cada dígito y
   la distancia que recorre la tira. Vive en una sola variable para que no se
   desincronicen: si difieren, los números se ven cortados por arriba. */
.oc-rodillo {
  --oc-paso: 1.18em;
  display: inline-flex;
}
.oc-rodillo__col {
  display: block;
  overflow: hidden;
  height: var(--oc-paso);
}
.oc-rodillo__tira {
  display: block;
  transition: transform 1.5s cubic-bezier(0.18, 0.9, 0.12, 1);
  will-change: transform;
}
.oc-rodillo__tira span {
  display: block;
  height: var(--oc-paso);
  line-height: var(--oc-paso);
}

@media (max-width: 900px) {
  .oc-hero { padding-block: 7.5rem var(--space-8); }
  .oc-hero__inner { grid-template-columns: 1fr; gap: var(--space-7); }
  .oc-hero__rueda { order: -1; max-width: 340px; }
  .oc-hero__logo { width: 80%; }
  .oc-hero__brk { display: none; }
  .oc-hero__title { font-size: clamp(2.3rem, 9.5vw, 3.4rem); }
  .oc-hero__stats { gap: var(--space-6) var(--space-8); margin-top: var(--space-7); }
}