/* La Canasta · el puesto del mercado: el toldo, el mostrador de madera y la canasta que se llena (CLÁSICOS IC v0.2).
   El sabor de casa cambia el puesto: Nicaragua (toldo de lona, canasta de palma), México (el tianguis con papel picado),
   EE. UU. y en inglés (el farmers market), general (un puesto de frutas). */
.cl-la-canasta {
  --cl-fondo: #e98a52; --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,.5); --cl-titulo-color: #fff8e8;
  --cn-toldo-a: #2f8f5a; --cn-toldo-b: #fff6e3;
}
.cl-lugar-mx.cl-la-canasta { --cn-toldo-a: #d9567a; --cn-toldo-b: #fff3c4; }
.cl-lugar-us-es.cl-la-canasta, .cl-lugar-en.cl-la-canasta { --cn-toldo-a: #2f6fb2; --cn-toldo-b: #ffffff; }
.cl-lugar-general.cl-la-canasta { --cn-toldo-a: #e3463b; --cn-toldo-b: #fff6e3; }
.cl-la-canasta .cl-fondo { overflow: hidden; background: linear-gradient(180deg, #ffd9a0 0%, #f2a66a 55%, #8a5a2b 82%, #6e4527 100%); }
/* el toldo (se mece despacio) */
.cl-cn-toldo { position: absolute; left: -2%; right: -2%; top: 0; height: clamp(46px, 9vh, 90px); transform-origin: 50% 0;
  background: repeating-linear-gradient(90deg, var(--cn-toldo-a) 0 46px, var(--cn-toldo-b) 46px 92px); box-shadow: 0 6px 10px rgba(0,0,0,.18);
  -webkit-mask: radial-gradient(23px 14px at 23px 100%, transparent 98%, #000) 0 0 / 46px 100%; mask: radial-gradient(23px 14px at 23px 100%, transparent 98%, #000) 0 0 / 46px 100%;
  animation: cl-cn-toldo 7s ease-in-out infinite; }
@keyframes cl-cn-toldo { 50% { transform: skewX(1.2deg) scaleY(1.03); } }
/* el papel picado del tianguis (México) */
.cl-cn-picado { position: absolute; left: 0; right: 0; top: clamp(50px, 10vh, 96px); height: 40px; display: none; justify-content: space-around; }
.cl-lugar-mx .cl-cn-picado { display: flex; }
.cl-cn-picado i { width: 34px; height: 38px; transform-origin: 50% 0; animation: cl-cn-picado 3s ease-in-out infinite;
  -webkit-mask: radial-gradient(4px at 50% 40%, transparent 98%, #000) 0 0 / 100% 100%; mask: radial-gradient(4px at 50% 40%, transparent 98%, #000); clip-path: polygon(0 0, 100% 0, 100% 80%, 85% 100%, 70% 80%, 50% 100%, 30% 80%, 15% 100%, 0 80%); }
.cl-cn-picado i:nth-child(4n+1) { background: #e3463b; } .cl-cn-picado i:nth-child(4n+2) { background: #2f8fd8; } .cl-cn-picado i:nth-child(4n+3) { background: #f2b632; } .cl-cn-picado i:nth-child(4n) { background: #8e44ad; }
@keyframes cl-cn-picado { 50% { transform: rotate(4deg); } }
/* el mostrador */
.cl-cn-mostrador { position: absolute; left: 0; right: 0; bottom: 0; height: 18%; background: repeating-linear-gradient(90deg, #8a5a2b 0 120px, #7a4f26 120px 122px); box-shadow: inset 0 6px 0 #a8692f; }
.cl-la-canasta .cl-logo { background-image: url('../arte/canasta-llena.webp'); }   /* arte de Franco (19 oct); logo.svg queda para la galería */
.cl-la-canasta .cl-nombre { text-shadow: 0 3px 0 #8a4a1f, 0 0 18px rgba(255,210,74,.45); }
.cl-la-canasta .cl-lema, .cl-la-canasta .cl-nota, .cl-la-canasta .cl-racha-linea { text-shadow: 0 2px 0 rgba(90,40,10,.45); }
.cl-la-canasta .cl-op { background: rgba(110,60,25,.35); }
.cl-la-canasta .cl-op-dia { background: var(--cl-acento); }
.cl-la-canasta .cl-chico { background: rgba(110,60,25,.35); }
.cl-la-canasta .cn-contador { color: #fff8e8; }
.cl-la-canasta .cn-top { position: relative; z-index: 2; }
/* la tarjeta del final: la canasta llena */
.cl-cn-tarjeta { position: relative; width: 100%; height: 100%; background: linear-gradient(180deg, #ffd9a0, #f2a66a); display: grid; place-items: center; }
.cl-cn-tarjeta .cl-cn-llena { position: relative; height: 70%; margin-top: 14%; aspect-ratio: 3 / 2; }
.cl-cn-tarjeta .cl-cn-llena > svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.cl-cn-tarjeta .cl-cn-f { position: absolute; width: 30%; aspect-ratio: 1; animation: cn-cae .5s cubic-bezier(.3,1.6,.5,1) both; }
.cl-cn-tarjeta .cl-cn-f svg { width: 100%; height: 100%; }
@media (prefers-reduced-motion: reduce) { .cl-cn-toldo, .cl-cn-picado i, .cl-cn-tarjeta .cl-cn-f { animation: none; } }

/* arte de Franco (19 oct): el papel picado de México y la canasta de palma en el final */
.cl-lugar-mx .cl-cn-picado { height: clamp(48px, 8vh, 72px); background: url('../arte/papel-picado.webp') repeat-x 0 0 / auto 100%; transform-origin: 50% 0; animation: cl-cn-picado 5s ease-in-out infinite; }
.cl-lugar-mx .cl-cn-picado i { display: none; }
.cl-cn-tarjeta .cl-cn-llena.arte { aspect-ratio: 1; height: 78%; margin-top: 6%; }
.cl-cn-tarjeta .cl-cn-llena > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 8px 10px rgba(0,0,0,.3)); }
.cl-cn-como { height: 100%; aspect-ratio: 2 / 1; max-width: 100%; min-height: 0; overflow: hidden; box-sizing: border-box; padding: 4% 0; display: flex; align-items: center; justify-content: center; gap: 4%; background: linear-gradient(180deg, #ffd9a0, #f2a66a); border-radius: 16px; }
.cl-cn-como .g { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(3, minmax(0, 1fr)); gap: 4px; padding: 6px; height: 78%; aspect-ratio: 1; background: rgba(110,60,25,.45); border-radius: 12px; box-sizing: border-box; }
.cl-cn-como .g img { width: 100%; height: 100%; min-width: 0; min-height: 0; object-fit: contain; }
.cl-cn-como .g img.j { filter: drop-shadow(0 0 6px #fff3b0); }
.cl-cn-como > img { height: 80%; width: auto; aspect-ratio: 1; min-width: 0; object-fit: contain; }
@media (prefers-reduced-motion: reduce) { .cl-lugar-mx .cl-cn-picado { animation: none; } }
.cl-calma .cl-lugar-mx .cl-cn-picado, .cl-calma.cl-lugar-mx .cl-cn-picado { animation: none; }
.cl-cn-tarjeta .cl-cn-llena.arte .cl-cn-f { width: 24%; }