/* El Rompecabezas · piezas de cartón con relieve y sombra; al terminar, el dibujo se anima y dice su nombre (CLÁSICOS IC v0.1) */
.cl-el-rompecabezas {
  --cl-fondo: #6d4a2e; --cl-acento: #ff9f5a; --cl-acento-sombra: #b9622a; --cl-papel: #fff4e4; --cl-tinta: #3b2414;
  --cl-suave: rgba(255,236,210,.13); --cl-borde: rgba(255,220,180,.35); --cl-titulo-color: #fff0dc;
}
/* el cartón: fibras y motitas sobre marrón kraft */
.cl-el-rompecabezas .cl-fondo {
  background:
    radial-gradient(90% 70% at 50% 15%, rgba(255,226,180,.28), transparent 62%),
    radial-gradient(1.5px 1.5px at 20% 30%, rgba(40,20,5,.35) 50%, transparent 51%) 0 0 / 23px 29px,
    radial-gradient(1px 1px at 60% 70%, rgba(255,240,220,.25) 50%, transparent 51%) 0 0 / 17px 13px,
    repeating-linear-gradient(15deg, rgba(0,0,0,.04) 0 1px, transparent 1px 6px),
    linear-gradient(180deg, #8a6140, #6d4a2e 60%, #573a23);
}
.cl-el-rompecabezas .cl-logo { background-image: url('../arte/piezas.webp'); }   /* arte de Franco (19 oct); logo.svg queda para la galería */
.cl-el-rompecabezas .cl-nombre { text-shadow: 0 3px 0 #3b2414, 0 0 20px rgba(255,159,90,.35); }
.cl-el-rompecabezas .rb { background: transparent; }
.cl-el-rompecabezas .rb-top { background: rgba(45,25,10,.5); border-bottom-color: rgba(255,159,90,.25); }
.cl-el-rompecabezas .rb-globo { background: #fff4e4; color: #3b2414; }
.cl-el-rompecabezas .rb-contador { color: #ffbf8a; }
/* el tablero: una bandeja de cartón hundida */
.cl-el-rompecabezas .rb-tablero { background-color: #4e3320; box-shadow: inset 0 4px 10px rgba(0,0,0,.55), 0 0 0 6px #8a6140, 0 0 0 8px #3b2414, 0 10px 18px rgba(0,0,0,.4); border-radius: 10px; }
.cl-el-rompecabezas .rb-celda { border: 1px dashed rgba(255,230,200,.25); background: rgba(40,22,10,.35); }
.cl-el-rompecabezas .rb-tablero.guia .rb-celda { background: rgba(40,22,10,.55); }
.cl-el-rompecabezas .rb-celda.llena { box-shadow: inset 1px 1px 0 rgba(255,255,255,.35), inset -1px -1px 0 rgba(0,0,0,.35); }
/* las piezas: cartón grueso, con relieve y sombra */
.cl-el-rompecabezas .rb-pieza { border-radius: 8px; box-shadow: 0 6px 0 #3b2414, 0 10px 14px rgba(0,0,0,.45), inset 0 0 0 2px rgba(255,255,255,.35); }
.cl-el-rompecabezas .rb-pieza canvas { border-radius: 8px; filter: saturate(1.08); }
.cl-el-rompecabezas .rb-pieza::after { content: ''; position: absolute; inset: 0; border-radius: 8px; pointer-events: none;
  box-shadow: inset 2px 2px 0 rgba(255,255,255,.45), inset -3px -3px 0 rgba(0,0,0,.28); }
.cl-el-rompecabezas .rb-pieza { position: relative; }
.cl-el-rompecabezas .rb-pieza.sel { box-shadow: 0 0 0 4px #ffbf8a, 0 10px 0 #3b2414, 0 16px 20px rgba(0,0,0,.45); transform: translateY(-5px) rotate(-2deg); }
.cl-el-rompecabezas .rb-fantasma { box-shadow: 0 16px 24px rgba(0,0,0,.5); }
.cl-el-rompecabezas .rb-ver { background: rgba(255,159,90,.16); border-color: rgba(255,159,90,.65); }
.cl-el-rompecabezas .rb-nombre { background: #fff4e4; color: #3b2414; box-shadow: 0 5px 0 #3b2414; }
/* al terminar: el dibujo se anima (salta, se balancea y respira) */
.cl-el-rompecabezas .rb-mesa.armado .rb-entero { animation: cl-rb-vive 1.6s cubic-bezier(.3,1.4,.5,1) both; }
.cl-el-rompecabezas .rb-mesa.armado .rb-nombre { animation: cl-rb-nombre .6s .35s cubic-bezier(.3,1.6,.5,1) both; }
@keyframes cl-rb-vive { 0% { transform: scale(1); } 18% { transform: scale(1.06) translateY(-10px) rotate(-2deg); } 36% { transform: scale(.98) rotate(2deg); } 54% { transform: scale(1.03) rotate(-1deg); } 100% { transform: none; } }
@keyframes cl-rb-nombre { from { transform: translateX(-50%) scale(.3); opacity: 0; } to { transform: translateX(-50%) scale(1); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .cl-el-rompecabezas .rb-mesa.armado .rb-entero, .cl-el-rompecabezas .rb-mesa.armado .rb-nombre { animation: none; } }

/* CLÁSICOS IC v0.2 · la luz de la tarde sobre la mesa, que se corre despacio */
.cl-el-rompecabezas .cl-fondo { overflow: hidden; }
.cl-rb-tarde { position: absolute; inset: -10%; pointer-events: none;
  background: radial-gradient(45% 55% at 20% 20%, rgba(255,196,120,.32), transparent 70%), linear-gradient(115deg, transparent 30%, rgba(255,210,150,.12) 45%, transparent 60%);
  animation: cl-rb-tarde 30s ease-in-out infinite alternate; }
@keyframes cl-rb-tarde { from { transform: translate(-4%, -2%); } to { transform: translate(18%, 6%); } }
/* la tarjeta del final: el dibujo armado que salta y dice su nombre */
.cl-rb-tarjeta { width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  background: radial-gradient(80% 90% at 50% 40%, #ffe7c4, #f3c58f); box-shadow: inset 0 0 0 4px #8a6140; }
.cl-rb-dib { font-size: clamp(46px, 10vh, 84px); line-height: 1; animation: cl-rb-vive 1.6s cubic-bezier(.3,1.4,.5,1) .2s both, cl-rb-mece 2.6s ease-in-out 1.8s infinite; }
.cl-rb-tarjeta b { font-size: 20px; color: #3b2414; text-transform: uppercase; letter-spacing: .06em; }
@keyframes cl-rb-mece { 50% { transform: rotate(-4deg) translateY(-3px); } }
@media (prefers-reduced-motion: reduce) { .cl-rb-tarde, .cl-rb-dib { animation: none; } }