/* =============================================================================
   RIFAS SMW — base.css · Design system V2 «EL CASINO SIN VENTANAS»
   El sitio entero es UNA sala de casino de lujo de noche: sustrato negro
   CONTINUO (jamas un fondo claro, jamas un corte), profundidad por capas de
   luz calida fija + vineta. Vegas de esmoquin: oro como LUZ, rojo terciopelo
   solo urgencia/cortinas, luces medidas.
   Tipografia: Cinzel (display) + Manrope (cuerpo). Self-hosted.

   INDICE
     1 fuentes            8 loader «EL BOLETO» (aprobado v1, portado)
     2 tokens             9 reveles
     3 sustrato continuo 10 ARQ-1 marquesina de bombillos
     4 utilidades        11 ARQ-2 letrero neon
     5 botones/CTA       12 ARQ-3 contador jackpot
     6 nav persistente   13 ARQ-4 boleto perforado
     7 footer casino     14 ARQ-5 ruleta decorativa
                         15 ARQ-6 cortina de terciopelo
                         16 ARQ-7 draw-card estelar
                         17 ARQ-8 ficha de casino
                         18 ARQ-9 mesa de juego
                         19 ARQ-10 ambiente vivo (.amb)
                         20 banner interior + breadcrumb
                         21 formulario 0720-d
                         22 accesibilidad

   PRESUPUESTO DE NODOS ANIMADOS SIMULTANEOS (por viewport, meta <= 14):
     hero tipo:  3 fases marquesina + 1 halo CTA + 8 motas + 2 spots = 14
     divisor:    1 rotor ruleta + motas ambient (<=8) = 9
     transitorios (no cuentan en idle): reels jackpot, cortinas, flicker neon,
     sheen del loader. Las fases de marquesina se PAUSAN fuera de viewport
     (IO -> .is-live). Todo transform/opacity; cero filter/width/height.
   ========================================================================== */

/* ---------- 1 · FUENTES SELF-HOSTED (fontsource woff2, latin) ---------- */
@font-face {
  font-family: 'Cinzel';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../assets/fonts/cinzel-latin-400-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Cinzel';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../assets/fonts/cinzel-latin-700-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../assets/fonts/manrope-latin-400-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../assets/fonts/manrope-latin-600-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('../assets/fonts/manrope-latin-800-normal.woff2') format('woff2');
}

/* ---------- 2 · TOKENS ---------- */
:root {
  /* Paleta de la sala */
  --ink: #070304;            /* negro maestro */
  --ink-2: #110809;          /* negro elevado */
  --panel: #372517;          /* cafe calido */
  --panel-2: #241710;        /* cafe profundo */
  --gold: #D99619;           /* EL ORO — la luz de la casa */
  --gold-2: #FCD859;         /* filamento / destellos */
  --gold-deep: #8C5E0F;      /* sombra del oro */
  --red: #680406;            /* terciopelo / urgencia */
  --red-deep: #3A0203;       /* terciopelo en sombra */
  --cream: #E3DBD6;          /* texto sobre oscuro */
  --cream-muted: rgba(227, 219, 214, 0.66);
  --hairline: rgba(217, 150, 25, 0.25);
  --hairline-strong: rgba(217, 150, 25, 0.45);
  --btn-ink: #1C0F03;

  /* Gradientes de la casa */
  --grad-gold-text: linear-gradient(178deg, #FCD859 8%, #E8A926 48%, #D99619 68%, #A87413 100%);
  --grad-gold-btn: linear-gradient(165deg, #FCD859 0%, #E8A926 42%, #D99619 100%);
  --grad-sign: linear-gradient(180deg, #1A0C0D 0%, #0C0506 100%);
  --grad-velvet:
    linear-gradient(180deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0) 16%, rgba(0,0,0,0.12) 55%, rgba(0,0,0,0.6) 96%),
    repeating-linear-gradient(90deg, #3A0203 0px, #7E080B 26px, #560405 54px, #300102 82px);

  /* Tipografia */
  --font-display: 'Cinzel', 'Times New Roman', serif;
  --font-body: 'Manrope', 'Segoe UI', system-ui, sans-serif;
  --text-hero: clamp(2.6rem, 1.1rem + 6.4vw, 6.8rem);
  --text-h2: clamp(1.75rem, 1.1rem + 2.8vw, 3.3rem);
  --text-h3: clamp(1.2rem, 1rem + 1.1vw, 1.8rem);
  --text-body: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  --track-display: 0.06em;
  --track-caps: 0.32em;

  /* Ritmo y layout */
  --container: min(1200px, 92vw);
  --container-wide: min(1440px, 95vw);
  --space-section: clamp(4.5rem, 3rem + 6vw, 9.5rem);
  --space-block: clamp(2rem, 1.5rem + 2vw, 3.5rem);
  --nav-h: clamp(72px, 6.5vw, 96px);
  --radius: 14px;
  --radius-sm: 9px;

  /* Motion */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-curtain: cubic-bezier(0.77, 0, 0.18, 1);
  --dur-fast: 0.25s;
  --dur-med: 0.45s;
  --dur-reveal: 0.85s;

  /* Marquesina */
  --mq-period: 1.35s;

  /* Loader — boleto tragamonedas */
  --digit-h: clamp(58px, 9vw, 84px);
  --digit-w: calc(var(--digit-h) * 0.72);
}

/* ---------- 3 · RESET + SUSTRATO NEGRO CONTINUO ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: auto; }
body {
  font-family: var(--font-body);
  font-size: var(--text-body);
  font-weight: 400;
  line-height: 1.65;
  color: var(--cream);
  background: var(--ink);
  overflow-x: clip;                 /* jamas hidden: mata window.scrollY */
  -webkit-font-smoothing: antialiased;
}
/* La sala: capas de luz calida FIJAS (pintan una vez, cero repaint al scroll)
   + vineta perimetral. El visitante nunca ve un corte ni un fondo claro. */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(ellipse 95% 55% at 50% -12%, rgba(217, 150, 25, 0.11), transparent 62%),
    radial-gradient(ellipse 60% 44% at 10% 38%, rgba(104, 4, 6, 0.22), transparent 64%),
    radial-gradient(ellipse 62% 48% at 92% 72%, rgba(55, 37, 23, 0.4), transparent 66%),
    radial-gradient(ellipse 46% 34% at 78% 8%, rgba(217, 150, 25, 0.05), transparent 60%),
    radial-gradient(ellipse 125% 95% at 50% 50%, transparent 52%, rgba(0, 0, 0, 0.62) 100%);
}
img, svg, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
::selection { background: rgba(217, 150, 25, 0.85); color: #140A02; }
:focus-visible { outline: 2px solid var(--gold-2); outline-offset: 3px; border-radius: 3px; }

h1, h2, h3, .display {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.08;
  text-transform: uppercase;
  letter-spacing: var(--track-display);
  color: var(--cream);
}
h1 { font-size: var(--text-hero); }
h2 { font-size: var(--text-h2); }
h3 { font-size: var(--text-h3); }
p  { max-width: 62ch; }

/* ---------- 4 · UTILIDADES ---------- */
.container { width: var(--container); margin-inline: auto; }
.container-wide { width: var(--container-wide); margin-inline: auto; }
.section { padding-block: var(--space-section); position: relative; }
.text-center { text-align: center; }
.text-center p { margin-inline: auto; }

/* Velos: variacion de zona SIN romper la continuidad (translucidos, jamas
   un fondo solido claro). La transicion entre zonas es luz, no un corte. */
.veil-velvet {
  background:
    radial-gradient(ellipse 90% 70% at 50% 0%, rgba(104, 4, 6, 0.28), transparent 60%);
}
.veil-table {
  background:
    radial-gradient(ellipse 85% 65% at 50% 12%, rgba(55, 37, 23, 0.42), transparent 62%);
}
.veil-glow {
  background:
    radial-gradient(ellipse 70% 55% at 50% 45%, rgba(217, 150, 25, 0.08), transparent 62%);
}

/* Titular: relleno dorado con gradiente (palabra clave resaltada) */
.gold-text { color: var(--gold); }
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .gold-text {
    background: var(--grad-gold-text);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
}

.eyebrow {
  display: inline-block;
  font-family: var(--font-body);
  font-size: clamp(0.68rem, 0.62rem + 0.2vw, 0.8rem);
  font-weight: 600;
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 1.1rem;
}

.hairline {
  border: 0; height: 1px; width: 100%;
  background: linear-gradient(90deg, transparent, var(--hairline-strong), transparent);
}
.hairline-left {
  border: 0; height: 1px; width: min(180px, 40%);
  background: linear-gradient(90deg, var(--hairline-strong), transparent);
}

/* Tarjeta generica sobre tinta (para bloques sin arquetipo) */
.card {
  background: var(--ink-2);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  padding: clamp(1.5rem, 1.2rem + 1.5vw, 2.6rem);
}

/* Sello de urgencia (rojo SOLO urgencia) */
.chip-urgent {
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
  background: var(--red);
  color: var(--cream);
  border: 1px solid var(--hairline-strong);
  border-radius: 999px;
  padding: 0.5em 1.15em;
  font-weight: 800;
  font-size: clamp(0.68rem, 0.64rem + 0.15vw, 0.78rem);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  box-shadow: 0 4px 18px rgba(104, 4, 6, 0.5);
}
.chip-urgent::before {
  content: '';
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--gold-2);
  flex: none;
}
.chip-gold {
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
  color: var(--gold);
  border: 1px solid var(--hairline);
  background: rgba(217, 150, 25, 0.07);
  border-radius: 999px;
  padding: 0.5em 1.15em;
  font-weight: 600;
  font-size: clamp(0.68rem, 0.64rem + 0.15vw, 0.78rem);
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

/* ---------- 5 · BOTONES / CTA ---------- */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6em;
  font-family: var(--font-body);
  font-weight: 800;
  font-size: clamp(0.82rem, 0.78rem + 0.2vw, 0.95rem);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 1.02em 2.1em;
  border-radius: 999px;
  overflow: hidden;
  transition: transform var(--dur-fast) var(--ease-out);
  will-change: transform;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn-gold {
  background: var(--grad-gold-btn);
  color: var(--btn-ink);
  box-shadow: 0 6px 24px rgba(217, 150, 25, 0.28), inset 0 1px 0 rgba(255, 240, 190, 0.65);
}
.btn-gold::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0; left: -30%;
  width: 36%;
  background: linear-gradient(105deg, transparent 0%, rgba(255, 250, 225, 0.75) 50%, transparent 100%);
  transform: translateX(-140%) skewX(-18deg);
  opacity: 0;
  pointer-events: none;
  transition: transform 0.6s var(--ease-out), opacity 0.25s linear;
}
.btn-gold:hover::after { transform: translateX(460%) skewX(-18deg); opacity: 1; }

.btn-ghost {
  color: var(--gold);
  border: 1px solid var(--hairline-strong);
  background: rgba(217, 150, 25, 0.05);
}
.btn-ghost::after {
  content: '';
  position: absolute; inset: 0;
  background: rgba(217, 150, 25, 0.13);
  opacity: 0;
  transition: opacity var(--dur-fast) linear;
}
.btn-ghost:hover::after { opacity: 1; }

.btn-sm { padding: 0.72em 1.5em; font-size: 0.78rem; }

/* Letrero-boton del nav: mini cartel de casino con bombillos ENCENDIDOS
   fijos (estaticos: cero animacion permanente en el header) */
.btn-sign {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold-2);
  background: var(--grad-sign);
  border: 1px solid var(--hairline-strong);
  border-radius: 10px;
  padding: 0.95em 1.6em;
  white-space: nowrap;
  box-shadow: 0 8px 26px rgba(0, 0, 0, 0.55), inset 0 0 18px rgba(0, 0, 0, 0.5);
  transition: transform var(--dur-fast) var(--ease-out);
  will-change: transform;
}
.btn-sign::before {
  content: '';
  position: absolute;
  inset: 3px;
  border-radius: 8px;
  pointer-events: none;
  background-image:
    radial-gradient(circle closest-side, #FFF3C8 0%, rgba(252, 216, 89, 0.85) 30%, rgba(217, 150, 25, 0.55) 52%, transparent 74%),
    radial-gradient(circle closest-side, #FFF3C8 0%, rgba(252, 216, 89, 0.85) 30%, rgba(217, 150, 25, 0.55) 52%, transparent 74%);
  background-size: 14px 7px, 14px 7px;
  background-position: 4px 0, 4px 100%;
  background-repeat: repeat-x, repeat-x;
}
.btn-sign:hover { transform: translateY(-2px); }

/* ---------- 6 · NAV PERSISTENTE PREMIUM (ley 0720-c) ---------- */
.site-nav {
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 90;
  background: transparent;
}
.site-nav .nav-inner {
  width: var(--container-wide);
  margin-inline: auto;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2vw, 2.5rem);
}
.nav-logo { display: inline-flex; align-items: center; gap: 0.7rem; flex: none; }
.nav-logo img { height: clamp(48px, 4.2vw, 58px); width: auto; }
.nav-links {
  display: flex;
  align-items: center;
  gap: clamp(1.1rem, 1.8vw, 2rem);
  margin-left: auto;
}
.nav-links a {
  position: relative;
  font-size: 0.92rem;               /* ~14.7px — ley 0720-a #1 */
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--cream);
  padding: 0.4em 0;
  transition: color var(--dur-fast) linear;
}
.nav-links a:hover, .nav-links a[aria-current="page"] { color: var(--gold-2); }
.nav-links a::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 1px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-fast) var(--ease-out);
}
.nav-links a:hover::after, .nav-links a[aria-current="page"]::after { transform: scaleX(1); }

.lang-pill {
  display: inline-flex;
  border: 1px solid var(--hairline-strong);
  border-radius: 999px;
  overflow: hidden;
  flex: none;
}
.lang-pill a {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  padding: 0.45em 0.95em;
  color: var(--cream-muted);
  transition: color var(--dur-fast) linear, background-color var(--dur-fast) linear;
}
.lang-pill a:hover { color: var(--gold-2); }
.lang-pill a.is-active { background: var(--gold); color: var(--btn-ink); }

.nav-cta { flex: none; }

/* Estado pegado: fixed + tinta solida + hairline dorada + slide-down.
   CSS es el UNICO dueno del transform del header (cero tweens GSAP). */
.site-nav.is-fixed {
  position: fixed;
  background: rgba(7, 3, 4, 0.97);
  border-bottom: 1px solid var(--hairline);
  transform: translateY(-100%);
}
.site-nav.is-fixed .nav-inner { height: clamp(64px, 5.5vw, 78px); }
.site-nav.is-fixed.is-shown {
  transform: translateY(0);
  transition: transform 0.35s var(--ease-out);
}

.nav-burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  width: 46px; height: 46px;
  padding: 10px;
  margin-left: auto;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-sm);
}
.nav-burger span {
  display: block;
  height: 2px; width: 100%;
  background: var(--gold);
  border-radius: 2px;
  transition: transform 0.3s var(--ease-out), opacity 0.2s linear;
}
.nav-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.nav-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 80;
  background:
    radial-gradient(ellipse 90% 60% at 50% -10%, rgba(217, 150, 25, 0.12), transparent 60%),
    linear-gradient(180deg, #0B0505 0%, #1C1109 100%);
  display: grid;
  place-content: center;
  text-align: center;
  gap: clamp(1.2rem, 3.5vh, 2rem);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-3%);
  transition: opacity 0.35s var(--ease-out), transform 0.35s var(--ease-out), visibility 0s linear 0.35s;
}
.mobile-menu.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: opacity 0.35s var(--ease-out), transform 0.35s var(--ease-out);
}
.mobile-menu a {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.5rem, 6.5vw, 2.2rem);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--cream);
  transition: color var(--dur-fast) linear;
}
.mobile-menu a:hover, .mobile-menu a[aria-current="page"] { color: var(--gold-2); }
.mobile-menu .mobile-cta {
  margin-top: 0.8rem;
  margin-inline: auto;
  max-width: min(320px, 82vw);
  white-space: normal;
}
body.menu-open { overflow: hidden; }

@media (max-width: 900px) {
  .nav-links, .site-nav .nav-cta, .site-nav .lang-pill { display: none; }
  .nav-burger { display: flex; }
}

/* ---------- 7 · FOOTER CASINO (bloque NEGRO, NAP identico en todas) ---------- */
.site-footer {
  position: relative;
  background: linear-gradient(180deg, #0B0505 0%, #120A06 100%);
  border-top: 1px solid var(--hairline);
  overflow: clip;
}
/* Fila de bombillos dormidos sobre el borde superior (estatica, textura) */
.site-footer::before {
  content: '';
  position: absolute;
  top: 5px; left: 0; right: 0;
  height: 12px;
  pointer-events: none;
  background-image: radial-gradient(circle closest-side, rgba(252, 216, 89, 0.4) 0%, rgba(217, 150, 25, 0.2) 42%, transparent 70%);
  background-size: 34px 12px;
  background-position: 0 0;
  background-repeat: repeat-x;
}
.footer-grid {
  width: var(--container-wide);
  margin-inline: auto;
  display: grid;
  grid-template-columns: 1.4fr 1fr 1.2fr;
  gap: clamp(2rem, 4vw, 4.5rem);
  padding-block: clamp(3.2rem, 5vw, 5.2rem) clamp(2rem, 3vw, 3rem);
}
.footer-brand img { height: clamp(84px, 8vw, 116px); width: auto; margin-bottom: 1.1rem; }
.footer-brand p { font-size: 0.98rem; color: var(--cream-muted); max-width: 34ch; }
.footer-col h3 {
  font-size: 0.8rem;
  letter-spacing: var(--track-caps);
  color: var(--gold);
  margin-bottom: 1.2rem;
}
.footer-col li { margin-bottom: 0.65rem; }
.footer-col a {
  color: var(--cream-muted);
  font-size: 0.95rem;
  transition: color var(--dur-fast) linear;
}
.footer-col a:hover { color: var(--gold-2); }
.footer-contact li {
  display: flex;
  align-items: baseline;
  gap: 0.6em;
  color: var(--cream-muted);
  font-size: 0.95rem;
}
.footer-contact .tag {
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
  flex: none;
  min-width: 4.4em;
}
.footer-disclaimer {
  width: var(--container-wide);
  margin-inline: auto;
  padding-bottom: clamp(1.6rem, 2.5vw, 2.4rem);
  font-size: 0.82rem;
  line-height: 1.7;
  color: rgba(227, 219, 214, 0.5);
}
.footer-disclaimer p { max-width: 88ch; }

.footer-bleed {
  position: relative;
  height: clamp(74px, 9.5vw, 168px);
  overflow: clip;
  pointer-events: none;
  user-select: none;
}
.footer-bleed span {
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: min(15.5vw, 275px);
  line-height: 0.95;
  letter-spacing: 0.04em;
  white-space: nowrap;
  color: rgba(217, 150, 25, 0.1);
}
.footer-legal {
  position: relative;
  z-index: 2;
  background: rgba(7, 3, 4, 0.88);
  border-top: 1px solid var(--hairline);
}
.footer-legal .legal-inner {
  width: var(--container-wide);
  margin-inline: auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.6rem 2rem;
  padding-block: 1.1rem;
  font-size: 0.78rem;
  color: rgba(227, 219, 214, 0.55);
}
@media (max-width: 900px) {
  .footer-grid { grid-template-columns: 1fr; gap: 2.4rem; }
}

/* ---------- 8 · LOADER «EL BOLETO» (aprobado en v1 — portado intacto) ---------- */
.loader {
  position: fixed;
  inset: 0 0 2px 0;            /* rendija anti occlusion-culling (0714-c #1) */
  z-index: 999;
  display: grid;
  place-items: center;
  contain: strict;
  background: transparent;
  pointer-events: none;
}
.loader-curtain {
  position: absolute;
  top: 0; bottom: 0;
  width: 50.5%;
  background: linear-gradient(180deg, #070304 0%, #0D0605 100%);
  will-change: transform;
}
.loader-curtain.left  { left: 0; }
.loader-curtain.right { right: 0; }
.loader-seam {
  position: absolute;
  top: 0; bottom: 0;
  left: calc(50% - 1px);
  width: 2px;
  background: linear-gradient(180deg, transparent, var(--gold-2), transparent);
  opacity: 0.001;
}
.loader-inner {
  position: relative;
  z-index: 2;
  display: grid;
  justify-items: center;
  gap: clamp(16px, 3.6vh, 30px);
  opacity: 0.001;              /* pre-siembra pintada (0714-c #2) */
}
.loader-logo { width: clamp(120px, 17vw, 190px); height: auto; will-change: transform; }

.ticket {
  position: relative;
  display: flex;
  gap: clamp(6px, 1.1vw, 10px);
  padding: clamp(10px, 1.6vw, 16px) clamp(16px, 2.4vw, 26px);
  background: #0E0708;
  border: 1px solid var(--hairline-strong);
  border-radius: var(--radius);
  overflow: hidden;
}
.ticket::before, .ticket::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--ink);
  border: 1px solid var(--hairline);
  transform: translateY(-50%);
}
.ticket::before { left: -10px; }
.ticket::after  { right: -10px; }

.digit {
  position: relative;
  width: var(--digit-w);
  height: var(--digit-h);
  overflow: hidden;
  border-radius: var(--radius-sm);
  background: linear-gradient(180deg, #1A0F06 0%, #0B0505 55%, #150C06 100%);
  border: 1px solid rgba(217, 150, 25, 0.35);
}
.digit .reel { display: block; will-change: transform; }
.digit .reel b {
  display: grid;
  place-items: center;
  height: var(--digit-h);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: calc(var(--digit-h) * 0.56);
  line-height: 1;
  color: var(--gold);
}
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .digit .reel b {
    background: var(--grad-gold-text);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
}
.digit::after {
  content: '';
  position: absolute; inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(7, 3, 4, 0.75) 0%, transparent 26%, transparent 74%, rgba(7, 3, 4, 0.75) 100%);
}
.ticket-sheen {
  position: absolute;
  top: 0; bottom: 0; left: 0;
  width: 34%;
  background: linear-gradient(105deg, transparent 0%, rgba(252, 216, 89, 0.32) 50%, transparent 100%);
  transform: translateX(-140%) skewX(-16deg);
  opacity: 0.001;
  pointer-events: none;
  will-change: transform;
}
.loader-line {
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
  color: var(--cream-muted);
  text-align: center;
}
html.no-js .loader { display: none; }

/* ---------- 9 · SISTEMA DE REVELES (IO + CSS, compositor-only) ---------- */
html.js [data-reveal] {
  opacity: 0.001;
  transform: translateY(26px);
  transition:
    opacity var(--dur-reveal) var(--ease-out),
    transform var(--dur-reveal) var(--ease-out);
  transition-delay: calc(var(--i, 0) * 90ms);
  will-change: transform, opacity;
}
html.js [data-reveal="left"]  { transform: translateX(-32px); }
html.js [data-reveal="right"] { transform: translateX(32px); }
html.js [data-reveal="scale"] { transform: scale(0.94); }
html.js [data-reveal].is-in {
  opacity: 1;
  transform: none;
}
.mask-line { display: block; overflow: clip; }
.mask-line > span { display: inline-block; will-change: transform; }

/* =============================================================================
   ARQUETIPO 1 · MARQUESINA DE BOMBILLOS (.marquee-frame)
   Cartel de casino: marco oscuro con gutter de bombillas calidas que
   PERSIGUEN en 3 fases. Los bombillos son BACKGROUNDS (cero nodos por
   bombillo): base ::before = todos los sockets en brasa tenue; 3 capas
   .mq-lights (inyectadas por JS) = cada tercio encendido por turnos via
   keyframes de OPACITY. main.js calcula --mq-gx/--mq-gy exactos para que
   el patron cierre sin bombillo cortado, y pausa el chase fuera de viewport.
   ========================================================================== */
.marquee-frame {
  --mq-pad: clamp(26px, 3vw, 38px);
  --mq-zone: 22px;
  --mq-gx: 30px;
  --mq-gy: 30px;
  position: relative;
  display: inline-block;
  padding: var(--mq-pad);
  background:
    radial-gradient(ellipse 120% 90% at 50% -30%, rgba(217, 150, 25, 0.08), transparent 55%),
    var(--grad-sign);
  border: 1px solid var(--hairline-strong);
  border-radius: 16px;
  box-shadow:
    0 30px 80px rgba(0, 0, 0, 0.65),
    inset 0 1px 0 rgba(252, 216, 89, 0.14),
    inset 0 0 44px rgba(0, 0, 0, 0.55);
}
/* Sockets: TODOS los bombillos en brasa tenue, siempre visibles */
.marquee-frame::before,
.mq-lights {
  position: absolute;
  inset: calc((var(--mq-pad) - var(--mq-zone)) / 2);
  pointer-events: none;
  background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;
}
.marquee-frame::before {
  content: '';
  background-image:
    radial-gradient(circle closest-side, rgba(255, 220, 130, 0.5) 0%, rgba(217, 150, 25, 0.28) 34%, transparent 62%),
    radial-gradient(circle closest-side, rgba(255, 220, 130, 0.5) 0%, rgba(217, 150, 25, 0.28) 34%, transparent 62%),
    radial-gradient(circle closest-side, rgba(255, 220, 130, 0.5) 0%, rgba(217, 150, 25, 0.28) 34%, transparent 62%),
    radial-gradient(circle closest-side, rgba(255, 220, 130, 0.5) 0%, rgba(217, 150, 25, 0.28) 34%, transparent 62%);
  background-size:
    var(--mq-gx) var(--mq-zone),
    var(--mq-gx) var(--mq-zone),
    var(--mq-zone) var(--mq-gy),
    var(--mq-zone) var(--mq-gy);
  background-position: 0 0, 0 100%, 0 0, 100% 0;
}
/* Fases del chase: cada capa enciende 1 de cada 3 bombillos */
.mq-lights {
  background-image:
    radial-gradient(circle closest-side, #FFF6D6 0%, #FCD859 22%, rgba(232, 169, 38, 0.9) 40%, transparent 66%),
    radial-gradient(circle closest-side, #FFF6D6 0%, #FCD859 22%, rgba(232, 169, 38, 0.9) 40%, transparent 66%),
    radial-gradient(circle closest-side, #FFF6D6 0%, #FCD859 22%, rgba(232, 169, 38, 0.9) 40%, transparent 66%),
    radial-gradient(circle closest-side, #FFF6D6 0%, #FCD859 22%, rgba(232, 169, 38, 0.9) 40%, transparent 66%);
  background-size:
    calc(var(--mq-gx) * 3) var(--mq-zone),
    calc(var(--mq-gx) * 3) var(--mq-zone),
    var(--mq-zone) calc(var(--mq-gy) * 3),
    var(--mq-zone) calc(var(--mq-gy) * 3);
  background-position:
    calc(var(--mq-n, 0) * var(--mq-gx)) 0,
    calc(var(--mq-n, 0) * var(--mq-gx)) 100%,
    0 calc(var(--mq-n, 0) * var(--mq-gy)),
    100% calc(var(--mq-n, 0) * var(--mq-gy));
  opacity: 0;
  will-change: opacity;
  animation: mq-chase var(--mq-period) linear infinite;
  animation-delay: calc(var(--mq-n, 0) * var(--mq-period) / 3);
}
@keyframes mq-chase {
  0%, 32.9% { opacity: 1; }
  33%, 100% { opacity: 0; }
}
/* Chase pausado fuera de viewport (IO -> .is-live) */
.marquee-frame:not(.is-live) .mq-lights { animation-play-state: paused; }
.mq-content { position: relative; z-index: 2; }

/* =============================================================================
   ARQUETIPO 2 · LETRERO NEON (.neon-sign)
   Neon ambar: tubo apagado tenue -> flicker de encendido UNA vez al entrar
   en viewport -> queda fijo con glow respirando (capa duplicada ::before,
   solo opacity). Requiere data-text con el mismo texto para la capa de glow.
   ========================================================================== */
.neon-sign {
  position: relative;
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: 0.42em;
  text-indent: 0.42em;       /* compensa el tracking para centrar de verdad */
  text-transform: uppercase;
  color: #FFE9B8;
  opacity: 0.3;              /* tubo apagado: se intuye, no ilumina */
  transition: opacity 0.4s linear;
}
.neon-sign.is-lit {
  opacity: 1;
  text-shadow:
    0 0 2px rgba(255, 246, 214, 0.95),
    0 0 8px rgba(252, 216, 89, 0.75),
    0 0 22px rgba(217, 150, 25, 0.5),
    0 0 52px rgba(217, 150, 25, 0.3);
  animation: neon-flicker 1.15s linear 1;
}
@keyframes neon-flicker {
  0%   { opacity: 0.3; }
  5%   { opacity: 1; }
  9%   { opacity: 0.24; }
  14%  { opacity: 1; }
  20%  { opacity: 0.35; }
  27%  { opacity: 1; }
  34%  { opacity: 0.88; }
  40%, 100% { opacity: 1; }
}
/* Glow que respira: duplicado con sombra mas ancha, SOLO opacity */
.neon-sign::before {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  white-space: nowrap;
  pointer-events: none;
  color: transparent;
  text-shadow:
    0 0 14px rgba(252, 216, 89, 0.55),
    0 0 44px rgba(217, 150, 25, 0.4),
    0 0 90px rgba(217, 150, 25, 0.28);
  opacity: 0;
}
.neon-sign.is-lit::before {
  animation: neon-breathe 3.8s ease-in-out 1.4s infinite;
}
@keyframes neon-breathe {
  0%, 100% { opacity: 0; }
  50%      { opacity: 0.75; }
}

/* =============================================================================
   ARQUETIPO 3 · CONTADOR JACKPOT / ODOMETRO (.jackpot)
   Cifras Cinzel doradas que RUEDAN al entrar en viewport: main.js convierte
   el texto ("20,000") en ventanas overflow:hidden con columnas de digitos y
   las aterriza con GSAP (yPercent, misma tecnica del loader). Sin JS o con
   reduced-motion la cifra queda como texto normal.
   ========================================================================== */
.jackpot {
  display: inline-flex;
  align-items: baseline;
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1;
  font-size: clamp(2.6rem, 1.4rem + 5vw, 5.6rem);
  letter-spacing: 0.02em;
  color: var(--gold);
}
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .jackpot .jk-d b, .jackpot .jk-s, .jackpot.jk-flat {
    background: var(--grad-gold-text);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
}
.jackpot .jk-d {
  display: inline-block;
  height: 1.06em;
  overflow: hidden;
}
.jackpot .jk-r { display: block; will-change: transform; }
.jackpot .jk-d b {
  display: block;
  height: 1.06em;
  line-height: 1.06;
  font-weight: 700;
  text-align: center;
}
.jackpot .jk-s {
  display: inline-block;
  height: 1.06em;
  line-height: 1.06;
}
.jackpot-label {
  display: block;
  margin-top: 0.7rem;
  font-family: var(--font-body);
  font-size: clamp(0.68rem, 0.62rem + 0.2vw, 0.8rem);
  font-weight: 600;
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
  color: var(--cream-muted);
}
/* Fila de contadores con separadores hairline */
.jackpot-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr));
  gap: clamp(1.6rem, 3vw, 2.5rem);
  text-align: center;
}
.jackpot-cell { position: relative; padding-block: 0.5rem; }
@media (min-width: 901px) {
  .jackpot-cell + .jackpot-cell::before {
    content: '';
    position: absolute;
    left: calc(clamp(0.8rem, 1.5vw, 1.25rem) * -1);
    top: 12%; bottom: 12%;
    width: 1px;
    background: linear-gradient(180deg, transparent, var(--hairline-strong), transparent);
  }
}

/* =============================================================================
   ARQUETIPO 4 · BOLETO PERFORADO (.ticket-card)
   Card con forma de boleto de rifa: muescas laterales via mask punched
   (radial-gradients), talon punteado y numero de serie DECORATIVO vertical.
   Las cards de pasos / info / contacto SON boletos.
   ========================================================================== */
.ticket-card {
  --tk-hole: 7px;
  --tk-step: 26px;
  position: relative;
  background:
    radial-gradient(ellipse 130% 80% at 50% -20%, rgba(217, 150, 25, 0.1), transparent 55%),
    linear-gradient(168deg, #1B0F08 0%, #110709 55%, #180D07 100%);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  padding: clamp(1.6rem, 1.3rem + 1.4vw, 2.4rem);
  padding-right: calc(clamp(1.6rem, 1.3rem + 1.4vw, 2.4rem) + 2.9rem);
  -webkit-mask-image:
    radial-gradient(circle var(--tk-hole) at 0 50%, transparent calc(var(--tk-hole) - 0.5px), #000 var(--tk-hole)),
    radial-gradient(circle var(--tk-hole) at 100% 50%, transparent calc(var(--tk-hole) - 0.5px), #000 var(--tk-hole)),
    linear-gradient(#000 0 0);
  -webkit-mask-size:
    calc(var(--tk-hole) * 2) var(--tk-step),
    calc(var(--tk-hole) * 2) var(--tk-step),
    calc(100% - var(--tk-hole) * 2) 100%;
  -webkit-mask-position: 0 0, 100% 0, var(--tk-hole) 0;
  -webkit-mask-repeat: repeat-y, repeat-y, no-repeat;
  mask-image:
    radial-gradient(circle var(--tk-hole) at 0 50%, transparent calc(var(--tk-hole) - 0.5px), #000 var(--tk-hole)),
    radial-gradient(circle var(--tk-hole) at 100% 50%, transparent calc(var(--tk-hole) - 0.5px), #000 var(--tk-hole)),
    linear-gradient(#000 0 0);
  mask-size:
    calc(var(--tk-hole) * 2) var(--tk-step),
    calc(var(--tk-hole) * 2) var(--tk-step),
    calc(100% - var(--tk-hole) * 2) 100%;
  mask-position: 0 0, 100% 0, var(--tk-hole) 0;
  mask-repeat: repeat-y, repeat-y, no-repeat;
}
/* Talon punteado */
.ticket-card::after {
  content: '';
  position: absolute;
  top: 14px; bottom: 14px;
  right: 2.9rem;
  border-right: 1px dashed rgba(217, 150, 25, 0.4);
  pointer-events: none;
}
/* Numero de serie decorativo, vertical en el talon */
.ticket-serial {
  position: absolute;
  top: 50%; right: 0.95rem;
  transform: translateY(-50%) rotate(180deg);
  writing-mode: vertical-rl;
  font-family: var(--font-body);
  font-size: 0.64rem;
  font-weight: 600;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: rgba(217, 150, 25, 0.7);
  white-space: nowrap;
  pointer-events: none;
}
.ticket-card .eyebrow { margin-bottom: 0.7rem; }
.ticket-card h3 { margin-bottom: 0.6rem; }
.ticket-card p { color: var(--cream-muted); font-size: 0.98rem; }
/* Variante ancha (tarjetas de contacto: boletos anchos, ley 0720) */
.ticket-card.ticket-wide { padding-block: clamp(1.4rem, 1.2rem + 1vw, 2rem); }

/* =============================================================================
   ARQUETIPO 5 · RULETA DECORATIVA (.wheel-bg)
   SVG de ruleta (lo inyecta main.js en [data-wheel]) girando LENTISIMO como
   fondo de divisor. 1 solo nodo animado (rotor, CSS rotate 120s). Sutil.
   ========================================================================== */
.wheel-bg {
  position: relative;
  display: grid;
  place-items: center;
  overflow: clip;
}
.wheel-bg .wheel-svg {
  width: min(64vw, 620px);
  aspect-ratio: 1;
  opacity: 0.55;
}
.wheel-bg .wheel-rotor {
  transform-origin: 50% 50%;
  animation: wheel-spin 120s linear infinite;
  will-change: transform;
}
@keyframes wheel-spin { to { transform: rotate(360deg); } }
/* Halo dorado detras de la rueda (estatico) */
.wheel-bg::before {
  content: '';
  position: absolute;
  width: min(70vw, 700px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(217, 150, 25, 0.16) 0%, rgba(217, 150, 25, 0.05) 45%, transparent 68%);
  pointer-events: none;
}
/* Contenido montado sobre la rueda (titular del divisor) */
.wheel-bg .wheel-copy {
  position: absolute;
  z-index: 2;
  text-align: center;
  padding-inline: 6vw;
}

/* =============================================================================
   ARQUETIPO 6 · CORTINA DE TERCIOPELO (.curtain-stage + .curtain-l/.curtain-r)
   Transicion de seccion: dos panos rojos con pliegues (franjas de luz/sombra)
   que se RECOGEN al scrollear (IO -> .is-open): scaleX comprime los pliegues
   contra el borde, como tela recogida. Transform-only, transicion larga.
   ========================================================================== */
.curtain-stage {
  position: relative;
  overflow: clip;
}
.curtain-l, .curtain-r {
  position: absolute;
  top: 0; bottom: 0;
  width: 54%;
  z-index: 6;
  background: var(--grad-velvet);
  box-shadow: 0 0 90px rgba(0, 0, 0, 0.85);
  will-change: transform;
  transition: transform 1.7s var(--ease-curtain) 0.15s;
  pointer-events: none;
}
.curtain-l { left: 0;  transform-origin: left center; }
.curtain-r { right: 0; transform-origin: right center; }
/* Fleco dorado en el borde interior de cada pano */
.curtain-l::after, .curtain-r::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  width: 4px;
  background: linear-gradient(180deg, rgba(217, 150, 25, 0.65), rgba(140, 94, 15, 0.5) 50%, rgba(217, 150, 25, 0.65));
}
.curtain-l::after { right: 0; }
.curtain-r::after { left: 0; }
.curtain-stage.is-open .curtain-l { transform: scaleX(0.055); }
.curtain-stage.is-open .curtain-r { transform: scaleX(0.055); }
/* El contenido detras respira cuando la cortina abre */
.curtain-stage .stage-content {
  position: relative;
  z-index: 2;
  transform: scale(0.965);
  opacity: 0.75;
  transition: transform 1.7s var(--ease-curtain) 0.3s, opacity 1.2s linear 0.4s;
  will-change: transform, opacity;
}
.curtain-stage.is-open .stage-content { transform: scale(1); opacity: 1; }

/* =============================================================================
   ARQUETIPO 7 · DRAW-CARD ESTELAR (.draw-card)  [ADN Omaze]
   Cada premio como carta de sorteo dedicada: foto real + marco dorado doble
   + kicker GRAN PREMIO + chip rojo de urgencia + CTA propio. Hover: lift +
   dolly de foto + shimmer sweep (transform-only). Al revelarse (is-in) corre
   UN shimmer automatico.
   ========================================================================== */
.draw-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, #150A0B 0%, #0B0405 100%);
  border: 1px solid var(--hairline-strong);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 34px 90px rgba(0, 0, 0, 0.65);
  transition: transform 0.5s var(--ease-out);
  will-change: transform;
}
.draw-card:hover { transform: translateY(-8px); }
/* Marco dorado interior (doble linea de lujo) */
.draw-card::before {
  content: '';
  position: absolute;
  inset: 9px;
  border: 1px solid rgba(217, 150, 25, 0.4);
  border-radius: 12px;
  pointer-events: none;
  z-index: 3;
}
/* Shimmer sweep: hover + una pasada al revelarse */
.draw-card .dc-shine {
  position: absolute;
  top: -12%; bottom: -12%;
  left: 0;
  width: 30%;
  z-index: 4;
  background: linear-gradient(105deg, transparent 0%, rgba(252, 216, 89, 0.16) 45%, rgba(255, 246, 214, 0.22) 52%, transparent 100%);
  transform: translateX(-160%) skewX(-14deg);
  pointer-events: none;
  will-change: transform;
  transition: transform 0.95s var(--ease-out);
}
.draw-card:hover .dc-shine { transform: translateX(480%) skewX(-14deg); }
.draw-card.is-in .dc-shine { animation: dc-sweep 1.25s var(--ease-out) 0.5s 1; }
@keyframes dc-sweep {
  from { transform: translateX(-160%) skewX(-14deg); }
  to   { transform: translateX(480%) skewX(-14deg); }
}
.draw-card-media {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  margin: 14px 14px 0;
  border-radius: 10px;
}
.draw-card-media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transform: scale(1.03);
  transition: transform 1.1s var(--ease-out);
  will-change: transform;
}
.draw-card:hover .draw-card-media img { transform: scale(1.09); }
/* Luz de vitrina sobre la foto */
.draw-card-media::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 90% 55% at 50% 0%, rgba(252, 216, 89, 0.12), transparent 55%),
    linear-gradient(180deg, transparent 62%, rgba(7, 3, 4, 0.55) 100%);
}
.draw-card-body {
  position: relative;
  z-index: 2;
  padding: clamp(1.4rem, 1.1rem + 1.4vw, 2.2rem);
  display: grid;
  gap: 0.9rem;
  justify-items: start;
}
.dc-kicker {
  font-size: clamp(0.66rem, 0.6rem + 0.2vw, 0.78rem);
  font-weight: 600;
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
  color: var(--gold);
}
.draw-card-body h3 { font-size: clamp(1.4rem, 1.1rem + 1.6vw, 2.2rem); }
.draw-card-body .dc-note { color: var(--cream-muted); font-size: 0.98rem; }
.draw-card-body .btn { margin-top: 0.5rem; }
/* Par de cartas gigantes en INICIO */
.draw-pair {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr));
  gap: clamp(1.6rem, 3vw, 3rem);
}

/* =============================================================================
   ARQUETIPO 8 · FICHA DE CASINO (.chip-badge)
   Badge circular con canto dentado (repeating-conic-gradient enmascarado a
   anillo) + aro hairline interior + numeral Cinzel. Para pasos y features.
   ========================================================================== */
.chip-badge {
  --chip: clamp(88px, 9vw, 116px);
  position: relative;
  width: var(--chip);
  aspect-ratio: 1;
  border-radius: 50%;
  display: grid;
  place-content: center;
  place-items: center;
  row-gap: 0.1em;
  background:
    radial-gradient(circle at 34% 26%, rgba(217, 150, 25, 0.2), transparent 58%),
    radial-gradient(circle, #1E1009 0%, #120809 72%);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(252, 216, 89, 0.18);
}
/* Canto dentado */
.chip-badge::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: repeating-conic-gradient(
    from 8deg,
    var(--gold) 0deg 16deg,
    rgba(217, 150, 25, 0.14) 16deg 30deg
  );
  -webkit-mask: radial-gradient(circle, transparent 0 66%, #000 67%);
  mask: radial-gradient(circle, transparent 0 66%, #000 67%);
}
/* Aro interior */
.chip-badge::after {
  content: '';
  position: absolute;
  inset: 13%;
  border-radius: 50%;
  border: 1px solid var(--hairline-strong);
  pointer-events: none;
}
.chip-badge b {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: calc(var(--chip) * 0.34);
  line-height: 1;
  color: var(--gold);
}
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .chip-badge b {
    background: var(--grad-gold-text);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
}
.chip-badge small {
  font-size: calc(var(--chip) * 0.082);
  font-weight: 800;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--cream-muted);
  max-width: 72%;
  text-align: center;
  line-height: 1.25;
}
/* Item de lista: ficha + texto */
.chip-item {
  display: grid;
  justify-items: center;
  gap: 1.1rem;
  text-align: center;
}
.chip-item p { font-size: 0.95rem; color: var(--cream-muted); max-width: 26ch; }
.chip-item h3 { font-size: 1.05rem; letter-spacing: 0.1em; }

/* =============================================================================
   ARQUETIPO 9 · MESA DE JUEGO (.table-panel)
   Panel curvo oscuro con riel interior y luz cenital: el fieltro de la casa
   en negro/cafe (sin verde). Para bloques de contenido y formularios.
   ========================================================================== */
.table-panel {
  position: relative;
  background:
    radial-gradient(ellipse 110% 80% at 50% -8%, rgba(217, 150, 25, 0.11), transparent 55%),
    linear-gradient(180deg, #1D1009 0%, #0D0607 78%);
  border: 1px solid var(--hairline);
  border-radius: clamp(20px, 2.6vw, 34px);
  box-shadow:
    inset 0 0 70px rgba(0, 0, 0, 0.55),
    0 34px 80px rgba(0, 0, 0, 0.55);
  padding: clamp(2rem, 1.6rem + 2.4vw, 4rem);
}
/* Riel de la mesa: doble linea interior */
.table-panel::before {
  content: '';
  position: absolute;
  inset: 12px;
  border: 1px solid rgba(217, 150, 25, 0.18);
  border-radius: clamp(14px, 2vw, 26px);
  pointer-events: none;
}

/* =============================================================================
   ARQUETIPO 10 · AMBIENTE VIVO (.amb)  particulas + spotlights + glow
   El casino respira en TODO el sitio: motas de oro subiendo (GSAP transform +
   opacity CSS: duenos distintos), 1-2 haces de luz barriendo lentisimo
   (GSAP rotate yoyo) y halo pulsante en CTAs. Presupuesto arriba.
   ========================================================================== */
[data-gold-dust] { position: relative; }
.dust-mote {
  position: absolute;
  bottom: -3%;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(252, 216, 89, 0.9) 0%, rgba(217, 150, 25, 0.35) 55%, transparent 75%);
  opacity: 0;
  pointer-events: none;
  will-change: transform, opacity;
  animation: dust-fade 12s linear infinite;
}
@keyframes dust-fade {
  0%   { opacity: 0; }
  12%  { opacity: 0.85; }
  70%  { opacity: 0.45; }
  100% { opacity: 0; }
}
/* Haz de luz cenital (clip-path ESTATICO; GSAP solo rota) */
.amb-spot {
  position: absolute;
  top: -14%;
  width: clamp(170px, 24vw, 360px);
  height: 125%;
  background: linear-gradient(180deg, rgba(252, 216, 89, 0.22) 0%, rgba(252, 216, 89, 0.10) 42%, transparent 85%);
  clip-path: polygon(40% 0, 60% 0, 100% 100%, 0 100%);
  transform-origin: 50% 0;
  opacity: 0.55;
  pointer-events: none;
  will-change: transform;
}
/* Halo pulsante bajo un CTA (GSAP initGlow lo respira via [data-glow]) */
.glow-orb {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(217, 150, 25, 0.22) 0%, rgba(217, 150, 25, 0.07) 45%, transparent 70%);
  pointer-events: none;
  will-change: transform, opacity;
}
.cta-halo {
  position: absolute;
  left: 50%; top: 50%;
  width: 190%;
  aspect-ratio: 2.4;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(217, 150, 25, 0.28) 0%, rgba(217, 150, 25, 0.08) 48%, transparent 72%);
  pointer-events: none;
  will-change: transform, opacity;
  z-index: -1;
}

/* ---------- 20 · BANNER INTERIOR + BREADCRUMB (paginas interiores) ---------- */
.page-banner {
  position: relative;
  padding: calc(var(--nav-h) + clamp(3.5rem, 6vw, 6.5rem)) 0 clamp(3rem, 5vw, 5rem);
  overflow: clip;
}
.banner-media {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}
.banner-media img { width: 100%; height: 100%; object-fit: cover; opacity: 0.34; }
.banner-media::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 90% 70% at 50% 100%, rgba(7, 3, 4, 0.92), transparent 70%),
    linear-gradient(180deg, rgba(7, 3, 4, 0.75) 0%, rgba(7, 3, 4, 0.35) 45%, var(--ink) 100%);
}
.banner-crumb {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35em 0.7em;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--cream-muted);
  margin-bottom: 1.4rem;
}
.banner-crumb a { color: var(--gold); transition: color var(--dur-fast) linear; }
.banner-crumb a:hover { color: var(--gold-2); }
.banner-crumb .sep { color: rgba(217, 150, 25, 0.5); }

/* ---------- 21 · FORMULARIO (motor AJAX 0720-d) ---------- */
.form-note {
  margin-top: 1rem;
  padding: 0.95em 1.3em;
  border-radius: var(--radius-sm);
  font-size: 0.95rem;
  font-weight: 600;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.4s var(--ease-out), transform 0.4s var(--ease-out);
}
.form-note.is-visible { opacity: 1; transform: none; }
.form-note.is-success {
  background: rgba(217, 150, 25, 0.12);
  border: 1px solid var(--hairline-strong);
  color: var(--gold-2);
}
.form-note.is-error {
  background: rgba(104, 4, 6, 0.35);
  border: 1px solid rgba(104, 4, 6, 0.9);
  color: var(--cream);
}
/* honeypot: fuera de vista, JAMAS display:none (el JS lo vacia) */
.hp-field {
  position: absolute !important;
  left: -9999px !important;
  width: 1px; height: 1px;
  overflow: hidden;
  opacity: 0;
}
input, textarea, select {
  font: inherit;
  color: var(--cream);
  background: rgba(7, 3, 4, 0.55);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-sm);
  padding: 0.85em 1.1em;
  width: 100%;
  transition: border-color var(--dur-fast) linear;
}
input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: var(--gold);
}
input::placeholder, textarea::placeholder { color: rgba(227, 219, 214, 0.4); }
label {
  display: block;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 0.5rem;
}

/* ---------- 22 · ACCESIBILIDAD / REDUCED MOTION ---------- */
@media (prefers-reduced-motion: reduce) {
  html.js [data-reveal] { opacity: 1; transform: none; transition: none; }
  .loader { display: none !important; }
  .btn, .btn::after, .nav-links a::after, .mobile-menu, .form-note { transition: none !important; }
  .dust-mote, .glow-orb, .amb-spot, .cta-halo { display: none !important; }
  /* Marquesina: bombillas fijas encendidas (las 3 fases quedan en on) */
  .mq-lights { animation: none !important; opacity: 1 !important; }
  /* Neon: encendido fijo, sin flicker ni respiracion */
  .neon-sign { opacity: 1 !important; animation: none !important; }
  .neon-sign.is-lit::before { animation: none !important; opacity: 0.5 !important; }
  /* Ruleta quieta, cortinas abiertas */
  .wheel-bg .wheel-rotor { animation: none !important; }
  .curtain-l, .curtain-r { transform: scaleX(0.055) !important; transition: none !important; }
  .curtain-stage .stage-content { transform: none !important; opacity: 1 !important; transition: none !important; }
  .draw-card .dc-shine { animation: none !important; transition: none !important; }
  *, *::before, *::after { animation: none !important; }
}

/* Presupuesto de ambiente: la sala que no ves, se apaga (fix 120fps) */
.amb-paused .mq-lights,
.amb-paused .neon-sign,
.amb-paused .neon-sign::before,
.amb-paused .wheel-bg svg,
.amb-paused .dust-mote,
.amb-paused .glow-orb,
.amb-paused .cta-halo,
.amb-paused .dc-shine { animation-play-state: paused !important; }