/* que-hay-debajo · JUEGOS MOTORES (30 oct): la escena del clásico (de código, hasta el arte de Franco). */
.cl-que-hay-debajo { --cl-fondo: #4a2f66; --cl-acento: #ffd24a; --cl-acento-sombra: #b9851a; --cl-papel: #fff8e8; --cl-tinta: #2b1d0e;
  --cl-suave: rgba(255,248,232,.16); --cl-borde: rgba(255,226,140,.5); --cl-titulo-color: #ffe38a; }
.cl-que-hay-debajo .cl-fondo { overflow: hidden; background: radial-gradient(70% 55% at 50% 40%, #7a4fa0 0%, #4a2f66 70%, #2e1c44 100%); }
.cl-polvo { position: absolute; inset: 0; background: radial-gradient(2px 2px at 20% 30%, #ffe38a 50%, transparent 51%) 0 0 / 61px 47px, radial-gradient(1.5px 1.5px at 70% 60%, #fff6c8 50%, transparent 51%) 0 0 / 43px 59px; opacity: .55; animation: cl-dh-polvo 9s linear infinite; }
@keyframes cl-dh-polvo { to { background-position: 0 -94px, 0 -118px; } }
.cl-que-hay-debajo .cl-nombre { text-shadow: 0 3px 0 #2e1c44, 0 0 20px rgba(255,210,74,.5); }
.cl-que-hay-debajo .ds { --ds-noche: rgba(46,28,68,.75); --ds-noche-2: transparent; background: transparent; }

.cl-tm-tarjeta { width: min(46vw, 180px); margin: 0 auto; } .cl-tm-tarjeta svg { width: 100%; height: auto; border-radius: 22%; box-shadow: 0 8px 18px rgba(0,0,0,.25); }

/* el fondo pintado (arte de Franco); la escena de CSS de arriba queda como respaldo */
.cl-que-hay-debajo .cl-fondo { background-image: url(fondo-mesa.webp); background-position: center; background-size: cover; background-repeat: no-repeat; }


/* las piezas del arte de Franco */
.cl-lumi { position: absolute; right: 11%; bottom: 7%; width: clamp(70px, 11vw, 150px); height: auto; filter: drop-shadow(0 0 14px rgba(255,210,74,.55)); animation: cl-dh-flota 4s ease-in-out infinite; }
@keyframes cl-dh-flota { 50% { transform: translateY(-8px); } }
@media (max-width: 700px) and (orientation: portrait) { .cl-lumi { display: none; } }