/* Fold · LA CELEBRACIÓN DEL ASCENSO DE PLAN (P3, 08/10/2026). La pinta celebrar-ascenso.js; las escenas, celebrar-escenas.js.
   Prefijo «celebrar-». Una tarjeta en el centro (en estrecho, una hoja abajo) con el escenario de píxeles arriba: el escenario
   es de noche en los dos temas, como el icono de Fold (el folio de papel es un objeto de color fijo y sobre fondo claro se
   perdería); la tarjeta lleva los colores del tema. Solo se mueven opacidad y transform; con «reducir movimiento», nada. */
.overlay.celebrar { z-index: 55; display: flex; align-items: center; justify-content: center; padding: var(--e-4); }
.celebrar-velo { position: absolute; inset: 0; background: var(--velo); }
.celebrar-tarjeta { position: relative; width: min(440px, 100%); max-height: calc(100vh - 2 * var(--e-4)); overflow: auto; background: var(--superficie); color: var(--papel); border: 1px solid var(--costura-fuerte); border-radius: var(--r-panel); box-shadow: var(--sombra-3); animation: celebrar-entra .32s cubic-bezier(.2, .8, .2, 1) both; }
.celebrar-escenario { position: relative; height: 190px; background: #0E1015; border-bottom: 1px solid var(--costura); }
.celebrar-lienzo { display: block; width: 100%; height: 100%; image-rendering: pixelated; }
.celebrar-cuerpo { padding: var(--e-5) var(--e-6) var(--e-6); animation: celebrar-aparece .4s .22s ease-out both; }
.celebrar-titulo { margin: 0; font-size: 1.4rem; line-height: 1.2; font-weight: 720; letter-spacing: -.01em; color: var(--papel); }
.celebrar-sub { margin: var(--e-1) 0 var(--e-5); font-size: .92rem; color: var(--papel-apagado); }
.celebrar-nuevo { margin: 0 0 var(--e-2); font-size: .88rem; font-weight: 680; color: var(--papel); }
.celebrar-lista { list-style: none; margin: 0 0 var(--e-5); padding: 0; display: grid; gap: 2px; }
.celebrar-enlace { display: flex; align-items: baseline; gap: 10px; width: 100%; min-height: 44px; padding: 11px 12px; font: inherit; font-size: .93rem; line-height: 1.35; text-align: left; text-decoration: none; color: var(--papel); background: transparent; border: 0; border-radius: var(--r-control); cursor: pointer; transition: background-color .15s; }
/* La viñeta es un píxel cobalto (como el pliegue de Fold) y la flecha dice que lleva a algún sitio. */
.celebrar-enlace::before { content: ''; flex: none; width: 8px; height: 8px; background: var(--cobalto); transform: translateY(-1px); }
.celebrar-enlace::after { content: '\2192'; flex: none; margin-left: auto; padding-left: 8px; color: var(--cobalto-claro); }
.celebrar-enlace:hover { background: var(--cobalto-tenue); }
.celebrar-enlace:active { transform: translateY(1px); }
.celebrar-enlace:focus-visible, .celebrar-seguir:focus-visible { outline: none; box-shadow: var(--anillo-foco); }
.celebrar-acciones { display: flex; justify-content: flex-end; }
@keyframes celebrar-entra { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes celebrar-aparece { from { opacity: 0; } to { opacity: 1; } }
/* Estrecho: una hoja pegada abajo, a todo lo ancho, con el escenario algo más bajo. */
@media (max-width: 640px) {
  .overlay.celebrar { align-items: flex-end; padding: 0; }
  .celebrar-tarjeta { width: 100%; max-height: 100vh; border-radius: var(--r-panel) var(--r-panel) 0 0; border-bottom: 0; }
  .celebrar-escenario { height: 168px; }
  .celebrar-cuerpo { padding: var(--e-4) var(--e-4) var(--e-5); }
}
/* «Reducir movimiento»: la tarjeta quieta (celebrar-ascenso.js pinta el último instante de la escena y no anima nada). */
.celebrar-quieta .celebrar-tarjeta, .celebrar-quieta .celebrar-cuerpo { animation: none; }
@media (prefers-reduced-motion: reduce) {
  .celebrar-tarjeta, .celebrar-cuerpo { animation: none; }
  .celebrar-enlace { transition: none; }
}