/* el-muelle · JUEGOS MOTORES (30 oct): la escena del clásico (de código, hasta el arte de Franco). */
.cl-el-muelle { --cl-fondo: #2f86ad; --cl-acento: #ffd24a; --cl-acento-sombra: #b9851a; --cl-papel: #fff8e8; --cl-tinta: #2b1d0e;
  --cl-suave: rgba(255,248,232,.18); --cl-borde: rgba(255,248,232,.55); --cl-titulo-color: #fff8e8; }
.cl-el-muelle .cl-fondo { overflow: hidden; background: linear-gradient(180deg, #ffd9a0 0 30%, #3aa0c8 30% 100%); }
.cl-agua { position: absolute; left: -10%; right: -10%; top: 30%; bottom: 0; background: repeating-linear-gradient(180deg, rgba(255,255,255,.12) 0 3px, transparent 3px 26px); animation: cl-mu-agua 5s ease-in-out infinite; }
@keyframes cl-mu-agua { 50% { transform: translateX(16px); } }
.cl-tablas { position: absolute; left: 0; right: 0; bottom: 6%; height: 7%; background: repeating-linear-gradient(90deg, #a8692f 0 80px, #8a5a2b 80px 83px); box-shadow: 0 6px 0 #5a3a1e; }
.cl-el-muelle .cl-nombre { text-shadow: 0 3px 0 #1d5a78, 0 0 18px rgba(255,210,74,.45); }
.cl-el-muelle .rc { --rc-noche: rgba(29,90,120,.8); --rc-noche-2: transparent; background: transparent; }
.cl-bote-llega { position: fixed; bottom: 14%; left: -120px; width: 110px; height: 80px; z-index: 40; pointer-events: none; animation: cl-mu-bote 1.6s ease-out forwards; }
@keyframes cl-mu-bote { to { transform: translateX(calc(50vw + 60px)); } 85% { opacity: 1; } 100% { 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-el-muelle .cl-fondo { background-image: url(fondo-muelle.webp); background-position: center 40%; background-size: cover; background-repeat: no-repeat; }
.cl-agua, .cl-tablas { display: none; }

/* las piezas del arte de Franco */
.cl-bote-llega { display: none; }
.cl-bote-img { position: fixed; bottom: 9%; left: -200px; width: clamp(130px, 18vw, 240px); z-index: 40; pointer-events: none; animation: cl-mu-bote 1.6s ease-out forwards; }
.cl-pez-img { position: fixed; left: 62%; bottom: 14%; width: clamp(70px, 9vw, 120px); z-index: 41; pointer-events: none; animation: cl-mu-salta 1.2s ease-in-out forwards; }
@keyframes cl-mu-salta { 0% { transform: translate(0, 40px) rotate(20deg); opacity: 0; } 15% { opacity: 1; } 50% { transform: translate(-60px, -120px) rotate(-10deg); } 100% { transform: translate(-130px, 40px) rotate(-40deg); opacity: 0; } }
.cl-mu-lumi { position: fixed; right: 2%; top: 14%; width: clamp(80px, 9vw, 140px); height: auto; z-index: 1; pointer-events: none; filter: drop-shadow(0 0 14px rgba(255,210,74,.6)); 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-mu-lumi { display: none; } }