/*
 * OCÉANO CASINOS — Base global
 * Reset, tipografía, botones, contenedores y utilidades compartidas.
 * Todas las clases llevan prefijo .oc- para no chocar con el tema del CMS.
 */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  color-scheme: light;
}

/* El header es fijo: sin esto los enlaces con ancla dejan el titular debajo. */
:target,
[id] { scroll-margin-top: 6.5rem; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

body.oc-body {
  margin: 0;
  -webkit-tap-highlight-color: rgba(196, 154, 63, 0.24);
  background: var(--oc-paper);
  color: var(--oc-ink);
  font-family: var(--font-body);
  font-size: var(--text-md);
  line-height: var(--leading-normal);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* El reset de tipos va dentro de :where() a propósito: aporta cero
   especificidad, así que cualquier clase .oc-* posterior le gana sin tener
   que encadenar selectores ni recurrir a !important. */
.oc-body :where(h1, h2, h3, h4) {
  font-family: var(--font-display);
  font-weight: 400;
  font-variation-settings: 'SOFT' 0, 'WONK' 0, 'opsz' 96;
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  margin: 0;
  text-wrap: balance;
}

.oc-body :where(p) { margin: 0; text-wrap: pretty; }
.oc-body :where(img, svg) { display: block; max-width: 100%; }
.oc-body :where(a) { color: inherit; }

.oc-body :focus-visible {
  outline: 2px solid var(--oc-gold-ink);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

/* Grano finísimo sobre el papel. Es lo que evita que las superficies
   grandes se lean como un plano de color puro. Va en un pseudoelemento
   fijo para no repintarse al hacer scroll. */
.oc-body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.4;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.045'/%3E%3C/svg%3E");
}
.oc-body > * { position: relative; z-index: 1; }

/* ─── CONTENEDORES ──────────────────────────────────────── */
.oc-container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--container-px);
}
.oc-container--narrow { max-width: var(--container-narrow); }

.oc-section { padding-block: var(--section-py); position: relative; }

/* ─── ETIQUETA DE SECCIÓN ───────────────────────────────── */
/* Una regla fina y el rótulo en versalitas: es todo lo que necesita una
   sección para anunciarse sin levantar la voz. */
.oc-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-4);
  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-ink);
  margin-bottom: var(--space-6);
}
.oc-eyebrow::before {
  content: "";
  width: 46px;
  height: 1px;
  background: currentColor;
  opacity: 0.55;
}

/* ─── TITULARES ─────────────────────────────────────────── */
.oc-h2 { font-size: clamp(2rem, 4.4vw, var(--text-4xl)); }
.oc-h3 {
  font-size: clamp(1.3rem, 2.3vw, var(--text-xl));
  letter-spacing: var(--tracking-flat);
  font-variation-settings: 'SOFT' 0, 'WONK' 0, 'opsz' 36;
}

.oc-lead {
  font-size: clamp(1.0625rem, 1.6vw, var(--text-lg));
  line-height: 1.62;
  color: var(--oc-ink-soft);
  max-width: 60ch;
}

/* ─── BOTONES ───────────────────────────────────────────── */
.oc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  min-height: 52px;
  padding: 0 var(--space-6);
  border: 0;
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 500;
  letter-spacing: -0.005em;
  text-decoration: none;
  cursor: pointer;
  touch-action: manipulation;
  transition: transform var(--dur) var(--ease-out),
              box-shadow var(--dur) var(--ease-out),
              background-color var(--dur) var(--ease-out),
              color var(--dur) var(--ease-out);
}

.oc-btn--primary {
  background: var(--oc-ink);
  color: var(--oc-paper);
}
.oc-btn--primary:hover {
  background: var(--oc-navy);
  transform: translateY(-2px);
  box-shadow: var(--shadow-lift);
}

.oc-btn--gold {
  background: var(--oc-gold);
  color: var(--oc-ink);
}
.oc-btn--gold:hover { background: var(--oc-gold-hi); transform: translateY(-2px); }

.oc-btn--ghost {
  background: transparent;
  color: var(--oc-ink);
  box-shadow: inset 0 0 0 1px var(--oc-line);
}
.oc-btn--ghost:hover {
  box-shadow: inset 0 0 0 1px var(--oc-ink);
  transform: translateY(-2px);
}

.oc-btn__arrow { width: 15px; height: 15px; flex: none; transition: transform var(--dur) var(--ease-out); }
.oc-btn:hover .oc-btn__arrow { transform: translateX(4px); }

/* ─── FILETE DEL ISOTIPO ────────────────────────────────── */
/* Un hilo de 2 px con el degradado completo del logo. Es el único lugar
   donde el rojo y el naranja aparecen fuera de la esfera. */
.oc-rule {
  height: 2px;
  border: 0;
  border-radius: 2px;
  background: var(--oc-arc);
  margin: 0;
}

/* ─── FRANJA OSCURA ─────────────────────────────────────── */
.oc-surface-dark {
  background: var(--oc-navy);
  color: var(--oc-on-navy);
}
.oc-surface-dark .oc-lead { color: var(--oc-on-navy-2); }
.oc-surface-dark .oc-eyebrow { color: var(--oc-gold); }

/* ─── ACCESIBILIDAD ─────────────────────────────────────── */
.oc-skip {
  position: absolute;
  left: -9999px;
  top: var(--space-4);
  z-index: 200;
  background: var(--oc-ink);
  color: var(--oc-paper);
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-pill);
  font-weight: 500;
  text-decoration: none;
}
.oc-skip:focus { left: var(--space-4); }

.oc-sr {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ─── PRIMITIVAS DE ENTRADA ─────────────────────────────── */
/*
 * Cinco primitivas encadenables por `--delay`, para animar elementos DENTRO
 * de un dibujo y no solo bloques enteros. Un contenedor marcado `[data-in]`
 * recibe `.is-in` al entrar en pantalla y dispara todo lo que lleve dentro.
 *
 *   .oc-draw  traza un path — necesita `--len` con el largo del trazo
 *   .oc-pop   aparece escalando desde el centro
 *   .oc-rise  crece desde la base, para barras y marcas
 *   .oc-fade  solo opacidad
 *   .oc-up    sube 18 px, el comportamiento de bloque de siempre
 *
 * Todas cuelgan de `html.oc-js`, que pone un script en línea en el <head>:
 * si el JS no corre, la clase nunca aparece y el dibujo se ve completo en vez
 * de quedarse invisible. Es la diferencia con el sistema de V2GO, donde un
 * fallo de script deja la figura en blanco.
 */

.oc-js .oc-draw { stroke-dasharray: var(--len, 400); stroke-dashoffset: var(--len, 400); }
.oc-js .is-in .oc-draw,
.oc-js .oc-draw.is-in {
  animation: oc-draw 1700ms var(--ease-out) forwards;
  animation-delay: var(--delay, 0ms);
}
@keyframes oc-draw { to { stroke-dashoffset: 0; } }

/* `transform-box: fill-box` es lo que hace que el origen del escalado sea la
   propia forma y no el lienzo entero del SVG. Sin eso los puntos salen
   volando desde la esquina. */
.oc-js .oc-pop { opacity: 0; transform: scale(0.6); transform-origin: center; transform-box: fill-box; }
.oc-js .is-in .oc-pop,
.oc-js .oc-pop.is-in {
  animation: oc-pop 560ms var(--ease-out) forwards;
  animation-delay: var(--delay, 0ms);
}
@keyframes oc-pop { to { opacity: 1; transform: scale(1); } }

.oc-js .oc-rise { transform: scaleY(0); transform-origin: bottom; transform-box: fill-box; }
.oc-js .is-in .oc-rise,
.oc-js .oc-rise.is-in {
  animation: oc-rise 760ms var(--ease-out) forwards;
  animation-delay: var(--delay, 0ms);
}
@keyframes oc-rise { to { transform: scaleY(1); } }

.oc-js .oc-fade { opacity: 0; }
.oc-js .is-in .oc-fade,
.oc-js .oc-fade.is-in {
  animation: oc-fade 700ms var(--ease-out) forwards;
  animation-delay: var(--delay, 0ms);
}
@keyframes oc-fade { to { opacity: 1; } }

/* `.oc-reveal` es el nombre viejo y sigue vivo: las secciones ya escritas lo
   usan y no hace falta tocarlas. */
.oc-js .oc-up,
.oc-js .oc-reveal { opacity: 0; transform: translateY(18px); }
.oc-js .is-in .oc-up,
.oc-js .oc-up.is-in,
.oc-js .oc-reveal.is-in {
  animation: oc-up 860ms var(--ease-out) forwards;
  animation-delay: var(--delay, 0ms);
}
@keyframes oc-up { to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .oc-js .oc-draw { stroke-dashoffset: 0; animation: none !important; }

  /* `.oc-fade` solo anima opacidad, así que acá NO se toca el transform: hay
     elementos que lo usan para colocarse —los rótulos del mapa— y ponerlos en
     `none` los amontona encima de su punto. */
  .oc-js .oc-fade { opacity: 1; animation: none !important; }

  .oc-js .oc-pop,
  .oc-js .oc-rise,
  .oc-js .oc-up,
  .oc-js .oc-reveal { opacity: 1; transform: none; animation: none !important; }
}