/* letras-en-la-arena · JUEGOS MOTORES (30 oct): la escena del clásico (de código, hasta el arte de Franco). */
.cl-letras-en-la-arena { --cl-fondo: #3aa0c8; --cl-acento: #ffd24a; --cl-acento-sombra: #b9851a; --cl-papel: #fff8e8; --cl-tinta: #2b1d0e;
  --cl-suave: rgba(255,248,232,.2); --cl-borde: rgba(255,248,232,.55); --cl-titulo-color: #fff8e8; }
.cl-letras-en-la-arena .cl-fondo { overflow: hidden; background: linear-gradient(180deg, #ffcf8a 0%, #ffe3b5 28%, #3aa0c8 28%, #3aa0c8 40%, #f1d9a6 40%, #e9c98a 100%); }
.cl-la-ola { position: absolute; left: -10%; right: -10%; top: 36%; height: 9%; background: radial-gradient(30px 18px at 30px 0, transparent 96%, #bfe9f5) 0 0 / 60px 100%; opacity: .9; animation: cl-ar-ola 6s ease-in-out infinite; }
@keyframes cl-ar-ola { 50% { transform: translateY(12px); } }
.cl-letras-en-la-arena .cl-nombre { text-shadow: 0 3px 0 #7a4a22, 0 0 18px rgba(255,210,74,.5); }
/* el motor sobre la arena */
.cl-letras-en-la-arena .tz { --tz-noche: rgba(40,90,120,.72); --tz-noche-2: transparent; background: transparent; }
.cl-letras-en-la-arena .tz-top { backdrop-filter: blur(3px); }
.cl-ola-pasa { position: fixed; left: -30%; right: -30%; top: 30%; height: 40%; z-index: 40; pointer-events: none;
  background: linear-gradient(180deg, transparent, rgba(191,233,245,.85) 40%, rgba(255,255,255,.9) 55%, transparent); animation: cl-ar-pasa 1.1s ease-in forwards; }
@keyframes cl-ar-pasa { from { transform: translateX(-70%); opacity: .2; } 40% { opacity: 1; } to { transform: translateX(70%); opacity: 0; } }

.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-letras-en-la-arena .cl-fondo { background-image: url(fondo-orilla.webp); background-position: center 65%; background-size: cover; background-repeat: no-repeat; }
.cl-la-ola { display: none; }

/* las piezas del arte de Franco */
.cl-concha { position: absolute; width: clamp(54px, 9vw, 110px); height: auto; filter: drop-shadow(0 4px 4px rgba(0,0,0,.25)); }
.cl-concha.a { left: 2%; bottom: 3%; } .cl-concha.b { left: 10%; bottom: 1%; width: clamp(44px, 7vw, 90px); } .cl-concha.c { right: 11%; bottom: 2%; width: clamp(40px, 6vw, 80px); } .cl-concha.d { right: 2%; bottom: 5%; }
@media (max-width: 700px) and (orientation: portrait) { .cl-conchas { display: none; } }
.cl-ola-img { position: fixed; left: 0; top: 34%; width: 100vw; height: auto; z-index: 40; pointer-events: none; animation: cl-ar-pasa 1.2s ease-in forwards; }
.cl-ola-pasa { display: none; }