/* ============================================================
   08 · CASINO ("El casino online, también disponible")
   Anatomy unlike siblings: feature texto-izquierda / foto-derecha
   (orientación invertida respecto a la banda de "cómo juega"),
   con un disco "alternar" pegado a la foto. Dos párrafos textuales.
   ============================================================ */

.casino {
  padding: var(--tramo) var(--calle);
  background: var(--cal);
  border-top: 1px solid var(--linea);
}
.casino__caja {
  width: var(--cancha); max-width: 1300px; margin-inline: auto;
  display: grid; grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(2rem, 4vw, 4.5rem); align-items: center;
}
.casino__volante { margin-bottom: 1.2rem; }
.casino__titulo { font-size: var(--t-titular); margin-bottom: 1.4rem; max-width: 15ch; }
.casino__p { color: var(--tinta-media); max-width: 58ch; margin-bottom: 1.1rem; }
.casino__cta { margin-top: 0.6rem; }

.casino__media { position: relative; }
.casino__media .pizarra-plano { aspect-ratio: 4 / 3.4; }
.casino__alternar {
  position: absolute; right: -1rem; top: 1.6rem; z-index: 3;
  width: 3.4rem; height: 3.4rem; border-radius: 50%;
  background: var(--cal-claro); border: 1px solid var(--linea);
  box-shadow: var(--sombra-plano);
  display: grid; place-items: center;
  transform: rotate(6deg);
}
.casino__alternar::after { content: "\21C4"; font-size: 1.5rem; color: var(--cesped); font-weight: 700; }

@media (max-width: 1024px) {
  .casino__caja { grid-template-columns: 1fr; gap: 2rem; }
  .casino__titulo, .casino__p { max-width: none; }
  .casino__media { order: -1; }
  .casino__media .pizarra-plano { aspect-ratio: 4 / 2.6; }
}