/* ============================================================
   CASINO — "El casino dentro de la app".
   Anatomy unlike siblings: NO photograph. A typographic room —
   a large opening measure with the figure + houses set in the
   display face, then a left-ruled "aparte" note carrying the
   second paragraph and the CTA. Verbatim prose; type does the work.
   ============================================================ */

.casino {
  border-top: 1px solid var(--rule);
  padding-block: var(--rhythm);
}

.casino__head { max-width: 48ch; }
.casino__head h2 { margin-top: 1rem; }

/* opening measure — set larger than body, like a lead column */
.casino__lede {
  margin-top: clamp(30px, 3.6vw, 52px);
}
.casino__lede p {
  margin: 0;
  max-width: 58ch;
  font-size: clamp(1.18rem, 1.9vw, 1.62rem);
  line-height: 1.5;
  color: var(--ink-soft);
}

/* the catalogue figure, raised into the display face inside the sentence */
.casino__lede .figure {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.1em;
  letter-spacing: 0.005em;
  color: var(--ember);
}
/* provider houses — small caps credit set within the prose */
.casino__lede .houses {
  font-family: var(--display);
  font-weight: 600;
  font-size: 0.92em;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink);
}

/* aparte — left-ruled standout note (distinct from bordered fichas) */
.aparte {
  margin-top: clamp(28px, 3.5vw, 48px);
  max-width: 58ch;
  border-left: 3px solid var(--ember);
  background: var(--night-2);
  padding: clamp(1.4rem, 2.6vw, 2.2rem) clamp(1.6rem, 3vw, 2.6rem);
}
.aparte p {
  margin: 0;
  color: var(--ink);
  font-size: clamp(1.05rem, 1.5vw, 1.26rem);
  line-height: 1.5;
}
.aparte .ticket { margin-top: 1.5rem; }

/* ===== mobile ===== */
@media (max-width: 880px) {
  .casino__head { max-width: none; }
  .casino__lede p,
  .aparte { max-width: none; }
}
@media (max-width: 520px) {
  .aparte .ticket { width: 100%; justify-content: center; }
}