/* ============================================================
   ÁLBUM OLIMAR — sistema visual (sobre estadio.css).
   Síntesis Product Lead: A = contenedor (álbum, páginas, slots, spread desktop);
   B = figurita (card 3:4, incrustación dorada, placa, foil oro-blanco); C = identidad
   (sello-escudo, sol naciente, rareza en idioma del club). Reusa tokens de estadio.css.
   Antifraude visual: foil solo oro→blanco (nunca holo), rareza en 3 canales (material+glifo+palabra),
   partículas mínimas, todo respeta prefers-reduced-motion.
   ============================================================ */

.page-album {
    --alb-spine: rgba(255, 194, 51, .34);
    --alb-slot-line: rgba(151, 177, 232, .22);
    --alb-foil: linear-gradient(115deg, transparent 30%, rgba(255,212,94,.16) 46%, rgba(255,255,255,.24) 50%, transparent 66%);
    /* radio de la figurita: proporcional. El --r global (16px) sobre una card de ~110px daba un 15%
       de redondeo, más de sticker de app que de figurita impresa. */
    --alb-fig-r: 11px;
}
@media (min-width: 1024px) { .page-album { --alb-fig-r: 14px; } }

.page-album .arena__in.alb { max-width: 1180px; margin-inline: auto; padding-bottom: calc(var(--dock-h) + 96px); }
@media (min-width: 1024px) { .page-album .arena__in.alb { padding-bottom: var(--sp-6); } }

/* --- skeleton de carga --- */
.alb-skeleton { min-height: 60vh; border-radius: var(--r-lg); background:
    linear-gradient(100deg, var(--card-flat) 30%, var(--raise) 50%, var(--card-flat) 70%);
    /* 1.3s literal a propósito: es un loop AMBIENTAL de carga, no un gesto — no cae en la escala
       de --mo-* (que mide respuestas a una acción) y atarlo a un token lo rompería. */
    background-size: 200% 100%; animation: alb-shimmer 1.3s linear infinite; }
@keyframes alb-shimmer { to { background-position: -200% 0; } }

/* ============================================================
   COVER / ENCABEZADO
   ============================================================ */
.alb-cover {
    position: relative; overflow: hidden;
    margin-top: var(--sp-2); padding: var(--sp-5) var(--sp-4);
    border-radius: var(--r-lg); border: 1px solid var(--line-2);
    background: var(--card); box-shadow: var(--sh);
}
.alb-cover::before {   /* sol naciente etched — identidad C, sutil */
    content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5;
    background: radial-gradient(120% 140% at 15% -10%, rgba(255,194,51,.12), transparent 55%);
}
.alb-cover__top { display: flex; align-items: center; gap: var(--sp-3); position: relative; }
.alb-cover__crest { width: 44px; height: 44px; flex: 0 0 auto; filter: drop-shadow(0 4px 10px rgba(0,0,0,.4)); }
.alb-cover__crest img { width: 100%; height: 100%; object-fit: contain; }
.alb-cover__ttl { flex: 1 1 auto; min-width: 0; }
.alb-cover__kick { display: block; font-size: .66rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--gold); }
.alb-cover__name { font-family: var(--disp); font-size: clamp(1.4rem, 6vw, 2rem); line-height: .98; text-transform: uppercase; color: var(--tx); margin: 2px 0 0; }
.alb-cover__season { flex: 0 0 auto; align-self: flex-start; font-family: var(--disp); font-size: 1rem; color: var(--gold-2);
    padding: 4px 10px; border-radius: 999px; background: rgba(255,194,51,.10); border: 1px solid rgba(255,194,51,.3); }
/* compartir el álbum: una sola acción, en la portada (no repetida por toda la pantalla) */
.alb-cover__share { flex: 0 0 auto; align-self: flex-start; width: 40px; height: 40px; display: grid; place-items: center;
    border-radius: 12px; cursor: pointer; color: var(--gold-2); font-size: 1.05rem;
    background: rgba(255,194,51,.10); border: 1px solid rgba(255,194,51,.32);
    -webkit-tap-highlight-color: transparent; transition: background var(--mo), border-color var(--mo), transform var(--mo-xfast); }
.alb-cover__share:active { transform: scale(.94); }
@media (hover:hover) { .alb-cover__share:hover { background: rgba(255,194,51,.18); border-color: rgba(255,194,51,.5); } }

/* ---- RITMO VERTICAL (v1.7) ----------------------------------------------------------------
   La zona superior tenía TODAS las separaciones iguales (12px: portada→progreso→segmentado→chips)
   y los chips pegados al marco de la página (0px). Con un ritmo plano el ojo no puede agrupar: se
   lee como una pila de bloques apretados. Ahora hay tres niveles:
     · 10px  dentro del mismo grupo (identidad: portada + progreso)
     · 22px  entre grupos distintos (identidad → navegación → contenido)
     · 13px  entre navegación primaria (segmentado) y secundaria (chips de posición)
   Además la navegación secundaria pesa MENOS que la primaria (ver .alb-tab), que era la otra mitad
   del problema: dos filas de píldoras casi idénticas compitiendo por el mismo rol.
   ------------------------------------------------------------------------------------------- */

/* progreso: "línea de cal" que se pinta */
.alb-prog { position: relative; margin-top: 10px; }
.alb-prog__bar { height: 10px; border-radius: 999px; background: var(--raise); overflow: hidden; box-shadow: var(--inlight); }
.alb-prog__fill { height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--gold), var(--gold-2)); box-shadow: 0 0 14px -2px rgba(255,194,51,.6); transition: width var(--mo-bar) var(--ease-out); }
.alb-prog__meta { display: flex; justify-content: space-between; align-items: baseline; margin-top: var(--sp-2); font-size: .84rem; color: var(--tx-2); }
.alb-prog__meta b { color: var(--tx); font-weight: 800; }
.alb-prog__pct { font-family: var(--disp); color: var(--gold-2); font-size: 1.05rem; }

/* ============================================================
   NAVEGACIÓN DE SECCIONES (áreas del club)
   ============================================================ */
/* Navegación SECUNDARIA (posiciones): más liviana que el segmentado, que es la primaria. Antes
   ambas eran píldoras del mismo peso, una encima de la otra, y competían por el mismo rol. */
.alb-tabs { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; margin-top: 13px;
    padding-bottom: 2px; padding-right: 34px;   /* el último chip no queda al ras: deja "asomar" que sigue */
    scroll-snap-type: x proximity;
    /* position: E.seg.active() centra el chip activo con item.offsetLeft, que se mide contra el
       offsetParent: sin esto el offsetParent sería un ancestro y el cálculo apuntaría a otro lado. */
    position: relative;
    -webkit-mask-image: linear-gradient(90deg, #000 82%, transparent);   /* fade derecho = señal de más contenido */
    mask-image: linear-gradient(90deg, #000 82%, transparent); }
/* El fade era PERMANENTE: seguía prometiendo "hay más" con el último chip ya a la vista. E.seg
   escribe data-ovf según el desborde real, así que acá solo se apaga cuando no queda nada a la
   derecha. No se agrega fade izquierdo: esta fila nunca lo tuvo y no se rediseña. */
.alb-tabs[data-ovf=""], .alb-tabs[data-ovf="l"] { -webkit-mask-image: none; mask-image: none; }
.alb-tabs::-webkit-scrollbar { display: none; }
.alb-tab { scroll-snap-align: start; }
.alb-tab {
    flex: 0 0 auto; display: inline-flex; align-items: center; gap: 7px;
    /* min-height: es la navegación principal del álbum en mobile — con el padding solo quedaba en
       ~35px de alto, por debajo del área táctil recomendada. */
    padding: 7px 12px; min-height: 40px; border-radius: 999px; cursor: pointer; user-select: none;
    background: transparent; border: 1px solid var(--line); color: var(--tx-3);
    font-weight: 700; font-size: .8rem; white-space: nowrap;
    transition: border-color var(--mo), color var(--mo), background var(--mo), box-shadow var(--mo);
}
.alb-tab .bi { font-size: .95rem; }
.alb-tab__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--pc, var(--sky)); flex: 0 0 auto; opacity: .75; }
.alb-tab.on { color: var(--tx); background: var(--card-flat); border-color: var(--line-2); box-shadow: inset 0 -2px 0 var(--pc, var(--gold)); }
.alb-tab.on .alb-tab__dot { opacity: 1; }
.alb-tab small { color: var(--tx-3); font-weight: 600; }

/* posición → color (pill/dot/edge) */
.pc-GK { --pc: var(--pos-gk); } .pc-DEF { --pc: var(--pos-def); } .pc-MED { --pc: var(--pos-med); } .pc-ATA { --pc: var(--pos-ata); } .pc-ESP { --pc: var(--sky); }

/* ============================================================
   PÁGINA + GRILLA DE FIGURITAS
   ============================================================ */
.alb-page { margin-top: var(--sp-3); position: relative; }

/* ---- PASAR DE PÁGINA (v1.7) ---------------------------------------------------------------
   Antes el cambio de posición era un swap instantáneo en mobile (y en desktop una entrada genérica
   que además disparaba al cerrar el detalle). Ahora la hoja ENTRA desde el lado correspondiente:
   avanzás → entra desde la derecha; volvés → entra desde la izquierda. La tapa y el lomo quedan
   quietos: se mueve la hoja dentro del álbum, no el álbum. Solo transform+opacity (las container
   queries de las figuritas no se re-resuelven) y corta: --mo-slow (era .32s a mano; la entrada de
   la hoja es el mismo gesto "panel que aparece" que el resto del sistema, así que usa su token).
   ------------------------------------------------------------------------------------------- */
.alb-pages { overflow: hidden; }   /* la hoja que entra no se derrama fuera del panel */
.alb-page--next { animation: alb-page-next var(--mo-slow) var(--ease-out) both; }
.alb-page--prev { animation: alb-page-prev var(--mo-slow) var(--ease-out) both; }
@keyframes alb-page-next {
    from { opacity: 0; transform: translate3d(26px, 0, 0) scale(.985); }
    to   { opacity: 1; transform: none; }
}
@keyframes alb-page-prev {
    from { opacity: 0; transform: translate3d(-26px, 0, 0) scale(.985); }
    to   { opacity: 1; transform: none; }
}
.alb-page__hd { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3); padding-bottom: var(--sp-2); border-bottom: 2px solid rgba(255,194,51,.28); }
.alb-page__kick { display: block; font-size: .62rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); margin-bottom: 2px; }
.alb-page__nm { font-family: var(--disp); font-size: 1.15rem; text-transform: uppercase; color: var(--tx); letter-spacing: .01em; }
.alb-page__seal { color: var(--gold-2); font-size: .9em; margin-left: 4px; }
.alb-page__ct { font-size: .84rem; color: var(--tx-2); font-weight: 700; }
.alb-page__ct b { color: var(--gold-2); }

/* Mobile: TRES columnas (decisión Product Lead v1.6, revierte la de v1.1).
   Con 2 columnas la figurita medía 172px a 390px de viewport: 2,2× la de desktop (77px a 1440),
   entraba UNA fila por pantalla y se leía como una grilla de cards enormes, no como una página de
   álbum. Con 3 columnas la unidad baja a ~110px — el mismo orden que desktop — entran 3-4 filas y
   vuelve la sensación de colección. La tipografía interna (container queries) se re-escaló abajo
   para que a ese tamaño siga siendo legible; el detalle al tocar sigue mostrando todo en grande. */
.alb-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; margin-top: var(--sp-3); }
@media (max-width: 340px) { .alb-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; } }
/* TABLET (600-1023): con 3 columnas a 768px la figurita medía 230px — 2,3× la de desktop, el mismo
   defecto que esta pasada corrige en teléfono. 4 columnas la dejan en el orden correcto. */
@media (min-width: 600px) and (max-width: 1023px) {
    .alb-grid { grid-template-columns: repeat(4, 1fr); gap: 12px; }
    .figesp--h { grid-column: span 2; }
}

/* ============================================================
   FIGURITA (card 3:4) — objeto coleccionable
   ============================================================ */
.fig {
    position: relative; aspect-ratio: 3 / 4; border-radius: var(--alb-fig-r, var(--r)); overflow: hidden;
    background: var(--card); border: 1px solid var(--line-2); cursor: pointer;
    box-shadow: 0 8px 18px -12px rgba(2,6,23,.9); transition: transform var(--mo) var(--ease-out), box-shadow var(--mo);
    -webkit-tap-highlight-color: transparent;
    container-type: inline-size;   /* la tipografía interna escala con el ANCHO de la card, no del viewport */
}
.fig:active { transform: var(--press); }
@media (hover: hover) { .fig:hover { transform: translateY(-3px); box-shadow: 0 16px 30px -14px rgba(2,6,23,.95); } }
.fig:focus-visible { outline: 2px solid var(--gold-2); outline-offset: 2px; }

/* incrustación (marco montado, bevel) — hairline dorado + línea interna oscura = sensación de placa montada.
   inset/radio en cqw: a 3 columnas mobile la card mide ~110px y un inset fijo de 6px se comía el marco. */
.fig__inlay { position: absolute; inset: 4px; inset: clamp(3px, 3.5cqw, 6px); border-radius: 8px; pointer-events: none; z-index: 3;
    box-shadow: inset 0 0 0 1px rgba(255,194,51,.5), inset 0 0 0 2.5px rgba(6,15,40,.35), inset 0 1px 0 rgba(255,255,255,.06); }

/* capa de MATERIAL por rareza (foil/sol/edición). Inerte en común (opacidad 0). Nunca tapa la foto en exceso. */
.fig__foil { position: absolute; inset: 0; z-index: 3; pointer-events: none; opacity: 0; border-radius: inherit; }

.fig__photo { position: absolute; inset: 0; width: 100%; height: 74%; object-fit: cover; object-position: 50% 20%;
    filter: brightness(1.05) saturate(1.08) contrast(1.03); background: var(--raise); }
/* profundidad editorial: vignette superior sutil + scrim inferior más rico hacia la placa */
.fig__scrim { position: absolute; inset: 0; pointer-events: none; z-index: 2;
    background:
        linear-gradient(180deg, rgba(6,15,40,.28) 0%, transparent 16%, transparent 46%, rgba(6,15,40,.55) 66%, rgba(6,15,40,.85) 74%); }

/* font-size/width con cqw: la declaración plana previa es el fallback si el webview no soporta
   container queries (last-valid-wins; sin cqw la línea con cqw se descarta y queda la plana). */
.fig__pos { position: absolute; top: 5px; left: 5px; top: clamp(4px, 4cqw, 8px); left: clamp(4px, 4cqw, 8px);
    z-index: 3; font-family: var(--disp); font-size: .6rem; font-size: clamp(.5rem, 6.5cqw, .78rem); line-height: 1;
    padding: 3px 5px; padding: clamp(2px, 2.4cqw, 4px) clamp(4px, 4cqw, 7px); border-radius: 6px;
    color: #fff; background: var(--pc, #445); box-shadow: 0 2px 6px rgba(0,0,0,.4); }
.pc-GK .fig__pos, .fig.pc-GK .fig__pos { color: var(--gold-ink); }
/* Escudo: vive DENTRO de la placa (sello del club), no flotando sobre el retrato.
   Antes competía con la cara del jugador; ahora firma la tarjeta como objeto del club. */
.fig__crest { position: absolute; bottom: 5px; right: 6px; bottom: clamp(4px, 4cqw, 8px); right: clamp(5px, 4.5cqw, 9px);
    z-index: 5; width: 14px; height: 14px; width: clamp(11px, 10cqw, 21px); height: clamp(11px, 10cqw, 21px); opacity: .9;
    filter: drop-shadow(0 1px 3px rgba(0,0,0,.6)); }
.fig__crest img { width: 100%; height: 100%; object-fit: contain; }

/* Placa: 31% (antes 27%). A 3 columnas la card mide ~147px de alto y el contenido —nombre a dos
   líneas + número— no entraba en la placa vieja y se derramaba sobre la foto. */
.fig__plate { position: absolute; left: 0; right: 0; bottom: 0; z-index: 4; height: 31%;
    background: linear-gradient(180deg, rgba(16,32,73,.72) 0%, #0d1d43 42%, #0a1836 100%);
    padding: 5px 6px 6px; padding: clamp(4px, 4cqw, 8px) clamp(5px, 5cqw, 10px) clamp(5px, 4.5cqw, 9px);
    display: flex; flex-direction: column; justify-content: center; }
/* filete dorado fino que separa foto y placa (marco editorial) */
.fig__plate::before { content: ""; position: absolute; top: 0; left: 8px; right: 8px; height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255,194,51,.55), transparent); }
/* padding-right: el escudo vive en la esquina de la placa y antes se montaba sobre el apellido */
.fig__name { font-family: var(--disp); font-size: .8rem; font-size: clamp(.62rem, 9cqw, 1.04rem); line-height: 1.02; letter-spacing: .01em; text-transform: uppercase; color: var(--tx);
    padding-right: clamp(13px, 12cqw, 24px);
    text-shadow: 0 1px 2px rgba(0,0,0,.45); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.fig__meta { margin-top: 2px; font-size: .56rem; font-size: clamp(.5rem, 6cqw, .68rem); color: var(--tx-3); letter-spacing: .04em; text-transform: uppercase;
    display: flex; gap: 5px; align-items: baseline; min-width: 0; white-space: nowrap; overflow: hidden; }
.fig__poslbl { font-weight: 800; color: var(--tx-3); }
.fig__rare { display: inline-flex; align-items: center; gap: 4px; font-weight: 800; letter-spacing: .07em; }
.fig__gem { font-style: normal; font-size: .82em; line-height: 1; }
/* NÚMERO DE COLECCIÓN (v1.6): la referencia del usuario ("me falta la #27"). En la placa, nunca
   sobre la foto — display font, dorado, discreto pero primero en la línea meta. */
.fig__nro { font-family: var(--disp); font-size: 1.05em; line-height: 1; color: var(--gold-2);
    letter-spacing: .02em; flex: 0 0 auto; }

/* --- estado VACÍO (slot grabado): el hueco que da deseo de completar.
   v1.6: el hueco DICE SU NÚMERO. Mirás la página y sabés que te falta la #27. --- */
.fig--empty { background: var(--card-flat); cursor: default; box-shadow: inset 0 2px 10px rgba(0,0,0,.35); }
.fig--empty .fig__inlay { box-shadow: inset 0 0 0 1.5px var(--alb-slot-line); }
.fig--empty::after { content: ""; position: absolute; inset: 4px; inset: clamp(3px, 3.5cqw, 6px); border-radius: 8px;
    border: 1.5px dashed var(--alb-slot-line); pointer-events: none; }
.fig__ghost { position: absolute; inset: 0; display: grid; place-items: center; color: var(--tx-3); }
/* el ícono de posición era 1.8rem FIJO: a 110px de card ocupaba 26% del ancho. Ahora escala. */
.fig__ghost .bi { font-size: 1.15rem; font-size: clamp(1rem, 17cqw, 1.9rem); opacity: .34; }
.fig__ghost .fig__q { position: absolute; bottom: 22%; font-family: var(--disp); font-size: 1rem; font-size: clamp(.9rem, 11cqw, 1.2rem); opacity: .35; }
/* número faltante: el protagonista del hueco */
.fig__ghost .fig__gap { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -58%);
    font-family: var(--disp); font-size: 1.3rem; font-size: clamp(1.15rem, 22cqw, 2.4rem); line-height: 1;
    color: var(--gold-2); opacity: .5; letter-spacing: .01em; text-shadow: 0 2px 8px rgba(0,0,0,.5); }
.fig--empty .fig__ghost .bi { opacity: .16; }   /* el ícono pasa a fondo cuando hay número */
.fig--empty .fig__plate { background: transparent; border-top: 1px dashed var(--alb-slot-line); }
.fig--empty .fig__name { color: var(--tx-3); font-size: clamp(.55rem, 7.5cqw, .86rem); }
.fig--empty .fig__nro { color: var(--gold-2); opacity: .75; }

/* --- NUEVA: chip dorado en la esquina superior derecha. Antes era una cinta rotada 45° que se
   RECORTABA con el overflow de la card (se leía "…UEV"). Ahora entra completo a cualquier ancho. --- */
.fig__new { position: absolute; top: 5px; right: 5px; top: clamp(4px, 4cqw, 8px); right: clamp(4px, 4cqw, 8px); z-index: 5;
    background: linear-gradient(180deg, var(--gold-2), var(--gold)); color: var(--gold-ink);
    font-family: var(--disp); font-size: .5rem; font-size: clamp(.46rem, 5.5cqw, .64rem); line-height: 1;
    letter-spacing: .06em; text-transform: uppercase; padding: 3px 5px; padding: clamp(2px, 2.4cqw, 4px) clamp(4px, 4cqw, 7px);
    border-radius: 5px; box-shadow: 0 2px 6px rgba(0,0,0,.45); }
.fig--nueva { box-shadow: 0 0 0 1.5px rgba(255,194,51,.5), 0 12px 26px -12px rgba(255,194,51,.5); }

/* --- REPETIDA (esquina apilada + contador; icono+número, colorblind-safe) --- */
/* bottom por encima de la placa (31%) — si cambia la altura de la placa, cambiar acá también */
.fig__dup { position: absolute; bottom: 33%; left: 5px; left: clamp(4px, 4cqw, 8px); z-index: 4; display: inline-flex; align-items: center; gap: 2px;
    font-size: .52rem; font-size: clamp(.48rem, 5.5cqw, .68rem); font-weight: 800; color: var(--tx);
    background: rgba(6,15,40,.85); border: 1px solid var(--line-2);
    padding: 2px 4px; padding: clamp(2px, 2.2cqw, 4px) clamp(3px, 3.5cqw, 6px); border-radius: 6px;
    box-shadow: 0 2px 5px rgba(0,0,0,.4); }
.fig--dup::before { content: ""; position: absolute; right: -3px; bottom: -3px; width: 100%; height: 100%; border-radius: var(--r);
    border: 1px solid var(--line); z-index: -1; opacity: .5; }

/* ============================================================
   FIGURITAS ESPECIALES (equipo / copa / escudo / momento)
   Soportan orientación HORIZONTAL (equipos, copas apaisadas) ocupando 2 columnas.
   Se muestran SOLO si el admin cargó una imagen real (no se exponen plantillas vacías).
   ============================================================ */
.figesp { aspect-ratio: 3 / 4; }
.figesp--h { grid-column: span 2; aspect-ratio: 16 / 10; }         /* apaisada: equipo/copa */
.figesp__img { height: 100%; }                                     /* la imagen especial llena el alto */
.figesp__body { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; padding: 10px 12px;
    background: linear-gradient(180deg, transparent, rgba(6,15,40,.86)); display: flex; flex-direction: column; gap: 2px; }
.figesp__t { font-family: var(--disp); font-size: clamp(.9rem, 7cqw, 1.3rem); text-transform: uppercase; color: var(--tx); line-height: 1.02; }
.figesp--h .figesp__t { font-size: clamp(1.1rem, 4cqw, 1.6rem); }
.figesp__s { font-size: clamp(.62rem, 4.5cqw, .8rem); color: var(--gold-2); font-weight: 700; }
.figesp__r { margin-top: 3px; font-size: clamp(.56rem, 4cqw, .7rem); }
.figesp--falta { background: var(--card-flat); }
.figesp--falta .figesp__body { background: none; }
.figesp .fig__ghost .bi { color: var(--gold); }

/* ============================================================
   RAREZAS — MATERIALIDAD (no solo texto): cada rareza se siente por su material.
   Comunicación: MATERIAL (.fig__inlay + .fig__foil) + GLIFO (.fig__gem) + TEXTO + COLOR secundario.
   ============================================================ */

/* PLANTEL (común): limpia, navy, hairline. Sin foil (la capa base ya está en opacity:0),
   sin animación persistente. */

/* Densidad por MODO (data-mode del componente central): la identidad no cambia, solo el aire.
   summary/history son las vistas más chicas (cards de 76px). La placa DEBE alcanzar para el nombre
   + el número: con 25% el contenido se comprimía y el "#4" salía cortado por la mitad — justo en la
   pantalla donde el usuario conoce la figurita que le tocó. */
.fig[data-mode="summary"] .fig__plate, .fig[data-mode="history"] .fig__plate { height: 34%; padding: 4px 5px 5px; }
.fig[data-mode="summary"] .fig__name, .fig[data-mode="history"] .fig__name { -webkit-line-clamp: 1; padding-right: 0; }
.fig[data-mode="summary"] .fig__meta, .fig[data-mode="history"] .fig__meta { margin-top: 1px; }
/* el escudo estorba a este tamaño y el número necesita el ancho completo */
.fig[data-mode="summary"] .fig__crest, .fig[data-mode="history"] .fig__crest { display: none; }
.fig[data-mode="detail"] .fig__plate { height: 26%; }
.fig[data-mode="detail"] .fig__name { line-height: 1.05; }
/* la meta nunca se comprime: si falta espacio, que recorte el nombre, no el número */
.fig__meta { flex: 0 0 auto; }
.fig__name { min-height: 0; }

/* TITULAR (especial): incrustación dorada + emboss. Contraste algo superior. Foil dorado tenue persistente. */
.fig--especial .fig__inlay { box-shadow: inset 0 0 0 1px rgba(255,194,51,.85), inset 0 0 0 2.5px rgba(6,15,40,.35), inset 0 1px 0 rgba(255,255,255,.1); }
.fig--especial .fig__rare { color: var(--gold-2); }
.fig--especial .fig__foil { opacity: 1;
    background: linear-gradient(150deg, transparent 40%, rgba(255,212,94,.1) 50%, transparent 62%); }

/* ESTRELLA (shiny): sweep oro-blanco al interactuar + sol sutil persistente. Sin holográfico arcoíris. */
.fig--shiny .fig__inlay { box-shadow: inset 0 0 0 1.5px rgba(255,212,94,.9), inset 0 0 0 3px rgba(6,15,40,.3), inset 0 1px 0 rgba(255,255,255,.12); }
.fig--shiny .fig__rare, .fig--shiny .fig__gem { color: var(--gold-2); }
.fig--shiny .fig__foil { opacity: 1;
    background:
        radial-gradient(60% 42% at 78% 14%, rgba(255,240,190,.22), transparent 60%),   /* sol cálido, esquina */
        linear-gradient(120deg, transparent 42%, rgba(255,235,170,.12) 50%, transparent 60%); }
.fig--shiny::before { content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none; opacity: 0;
    background: var(--alb-foil); background-size: 250% 250%; transition: opacity var(--mo); }
/* .7s literal: coincide con --mo-bar por casualidad, pero ese token es para barras que animan un
   DATO. Esto es el brillo del material de la figurita — si mañana se ajusta el ritmo de las barras
   no tiene por qué cambiar el foil. */
@media (hover: hover) { .fig--shiny:hover::before { opacity: 1; animation: alb-sheen .7s var(--ease-out); } }
@keyframes alb-sheen { from { background-position: 120% 0; } to { background-position: -30% 0; } }

/* JUGADA (momento): tratamiento azul (composición apaisada la manejan las especiales con imagen real). */
.fig--momento .fig__inlay { box-shadow: inset 0 0 0 1.5px var(--blue), inset 0 0 0 3px rgba(6,15,40,.3), inset 0 1px 0 rgba(255,255,255,.08); }
.fig--momento .fig__rare, .fig--momento .fig__gem { color: var(--sky); }
.fig--momento .fig__plate { background: linear-gradient(180deg, rgba(24,44,96,.72), #12224d 42%, #0b1a3e); }
.fig--momento .fig__plate::before { background: linear-gradient(90deg, transparent, rgba(120,180,255,.5), transparent); }
.fig--momento .fig__foil { opacity: 1; background: linear-gradient(150deg, transparent 44%, rgba(120,180,255,.1) 52%, transparent 64%); }

/* EDICIÓN: doble marco + tratamiento premium más fuerte. Número de edición destacado. Sin casino. */
.fig--edicion .fig__inlay { box-shadow: inset 0 0 0 1.5px var(--gold), inset 0 0 0 3px rgba(6,15,40,.4), inset 0 0 0 4.5px rgba(255,194,51,.35), inset 0 1px 0 rgba(255,255,255,.12); }
.fig--edicion .fig__rare, .fig--edicion .fig__gem { color: var(--gold); }
.fig--edicion .fig__foil { opacity: 1;
    background:
        radial-gradient(50% 36% at 20% 12%, rgba(255,224,150,.2), transparent 62%),
        linear-gradient(130deg, transparent 40%, rgba(255,214,120,.14) 50%, transparent 62%); }
.fig--edicion .fig__nro { color: var(--gold); text-shadow: 0 1px 3px rgba(0,0,0,.8); }
.fig--edicion { box-shadow: 0 0 0 1px rgba(255,194,51,.35), 0 12px 26px -14px rgba(255,194,51,.4); }
/* edición + nueva: conserva el halo dorado de "nueva" (antes se lo comía la regla de edición) */
.fig--edicion.fig--nueva { box-shadow: 0 0 0 1.5px rgba(255,194,51,.6), 0 14px 30px -12px rgba(255,194,51,.55); }

/* ============================================================
   ACCIÓN DOMINANTE — barra fija (mobile)
   ============================================================ */
.alb-actionbar { position: fixed; left: 0; right: 0; z-index: 40;
    bottom: calc(var(--dock-h) + 8px); padding: 0 var(--sp-4);
    display: flex; justify-content: center; pointer-events: none; }
.alb-actionbar__btn { pointer-events: auto; width: 100%; max-width: 520px;
    display: flex; align-items: center; justify-content: center; gap: 10px;
    min-height: 58px; border: none; border-radius: 16px; cursor: pointer;
    font-family: var(--disp); font-size: 1.05rem; letter-spacing: .04em; text-transform: uppercase;
    color: var(--gold-ink); background: linear-gradient(180deg, var(--gold-2), var(--gold));
    box-shadow: var(--sh-gold), 0 10px 30px -8px rgba(0,0,0,.6); transition: transform var(--mo-fast) var(--ease-spring); }
.alb-actionbar__btn:active { transform: scale(.97); }
.alb-actionbar__btn .bi { font-size: 1.2rem; }
.alb-actionbar__count { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px;
    border-radius: 999px; background: var(--gold-ink); color: var(--gold-2); font-family: var(--body); font-weight: 800; font-size: .8rem; }
.alb-actionbar__btn--muted { background: var(--card-flat); color: var(--tx-2); box-shadow: var(--sh); font-family: var(--body); font-weight: 700; text-transform: none; font-size: .92rem; }
.alb-actionbar__btn--sheen { position: relative; overflow: hidden; }
.alb-actionbar__btn--sheen::after { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 40%, rgba(255,255,255,.35) 50%, transparent 60%);
    /* 6s literal: loop ambiental del CTA (no responde a ninguna acción del usuario). */
    transform: translateX(-100%); animation: alb-cta-sheen 6s ease-in-out infinite; }
@keyframes alb-cta-sheen { 0%,72% { transform: translateX(-100%); } 84% { transform: translateX(100%); } 100% { transform: translateX(100%); } }

/* ============================================================
   APERTURA DE SOBRE (overlay) — server-first, saltable
   ============================================================ */
.alb-open { position: fixed; inset: 0; z-index: 120; display: grid; place-items: center;
    background: rgba(6,15,40,.9); padding: var(--sp-4); }
/* CRÍTICO: display:grid/flex ANULA el atributo [hidden] (regla de autor > UA). Sin esto, el backdrop
   oscuro del overlay/sheet/actionbar queda SIEMPRE encima atenuando todo el álbum. Forzar display:none. */
.alb-open[hidden], .alb-sheet[hidden], .alb-bk[hidden], .alb-actionbar[hidden] { display: none !important; }
.alb-open__skip { position: absolute; top: calc(env(safe-area-inset-top,0px) + 14px); right: 16px; z-index: 5;
    background: none; border: none; color: var(--tx-2); font-weight: 700; font-size: .9rem; cursor: pointer; padding: 10px 12px; }
.alb-open__stage { width: 100%; max-width: 560px; display: flex; flex-direction: column; align-items: center; gap: var(--sp-4); padding-bottom: env(safe-area-inset-bottom, 0px); }
.alb-open__kick { font-size: .66rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--gold); }
.alb-open__title { font-family: var(--disp); font-size: 1.35rem; text-transform: uppercase; color: var(--tx); letter-spacing: .03em; text-align: center; }
.alb-open__actions { display: flex; gap: var(--sp-3); flex-wrap: wrap; justify-content: center; width: 100%; max-width: 360px; }
.alb-open__actions .btn8 { flex: 1 1 auto; }
/* ---- SUPERFICIE PROPIA de los estados sin carta: ERROR y RESUMEN (P1-2) ----
   El velo del overlay es semitransparente y sobre un álbum de texto claro alcanzaba para leer
   la grilla A TRAVÉS del contenido: en el error el mensaje pisaba "PÁGINA 1 DE 4 · ARQUEROS" y
   "Cerrar" quedaba encima de una figurita — se leía como algo roto, no como un diálogo. En los
   pasos del revelado esto no pasa porque la CARTA hace de superficie; acá no hay carta.
   No es un estilo nuevo: es el mismo lenguaje de los sheets (.alb-sheet) y del overlay de
   compartir (.oshare-box) — fondo --card OPACO, borde --line-2, radio y sombra profunda.
   El selector lleva `.alb-open` delante para ganarle al max-width de desktop (ver @media). */
.alb-open .alb-open__stage--panel {
    max-width: 480px;
    background: var(--card); border: 1px solid var(--line-2);
    border-radius: var(--r-lg); box-shadow: var(--sh-deep);
    padding: var(--sp-4) var(--sp-3);
    padding-bottom: calc(var(--sp-4) + env(safe-area-inset-bottom, 0px));
}
.alb-live { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---- EL SOBRE (frente, foil, sello, estados) ---- */
.alb-sobre { width: 208px; aspect-ratio: 3/4; border-radius: 18px; position: relative; cursor: pointer;
    background: linear-gradient(168deg, #16295c, #0b1a3e); border: 1px solid var(--line-2);
    box-shadow: var(--sh-deep), var(--sh-gold); }
.alb-sobre__foil { position: absolute; top: 0; left: 0; right: 0; height: 46px; border-radius: 18px 18px 0 0; transform-origin: top;
    background: linear-gradient(180deg, var(--gold), var(--gold-2)); box-shadow: inset 0 -2px 0 rgba(0,0,0,.18); z-index: 2; }
.alb-sobre__band { position: absolute; top: 56px; left: 0; right: 0; text-align: center; font-family: var(--disp);
    font-size: .72rem; letter-spacing: .16em; color: var(--gold-2); text-transform: uppercase; z-index: 1; }
.alb-sobre__seal { position: absolute; top: 52%; left: 50%; transform: translate(-50%,-50%); width: 82px; height: 82px; z-index: 1; filter: drop-shadow(0 6px 16px rgba(0,0,0,.55)); }
.alb-sobre__seal img { width: 100%; height: 100%; object-fit: contain; }
.alb-sobre__hint { position: absolute; bottom: 14px; left: 0; right: 0; text-align: center; color: var(--tx-2); font-size: .78rem; font-weight: 700; z-index: 1; }
/* Los tiempos de esta zona quedan LITERALES: son la CINEMÁTICA del sobre (2.6s / 1.1s son loops
   ambientales; .56s y .42s son el guion del rasgado, sincronizado con T.tear en album.js). No son
   respuestas a un gesto, así que no pertenecen a la escala --mo-*. Todos se anulan con
   prefers-reduced-motion al final del archivo. */
.alb-sobre--float { animation: alb-float 2.6s ease-in-out infinite; }
@keyframes alb-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
.alb-sobre--resolviendo { animation: alb-pulse 1.1s ease-in-out infinite; }
@keyframes alb-pulse { 0%,100% { box-shadow: var(--sh-deep), 0 0 0 0 rgba(255,194,51,.45); } 50% { box-shadow: var(--sh-deep), 0 0 0 12px rgba(255,194,51,0); } }
.alb-sobre--abriendo { animation: alb-sobre-out .56s var(--ease-in) forwards; pointer-events: none; }
@keyframes alb-sobre-out { 0% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(.82) translateY(-26px); } }
.alb-sobre--abriendo .alb-sobre__foil { animation: alb-flap .42s var(--ease-in) forwards; }
@keyframes alb-flap { to { transform: rotateX(-118deg); } }

/* ---- PROGRESO del revelado ---- */
.alb-open__prog { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.alb-open__cnt { font-family: var(--disp); font-size: 1.05rem; color: var(--gold-2); }
.alb-dots { display: flex; gap: 6px; }
.alb-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--raise); border: 1px solid var(--line-2); transition: background var(--mo); }
.alb-dot.done { background: var(--gold); border-color: var(--gold); }
.alb-dot.on { box-shadow: 0 0 0 3px rgba(255,194,51,.25); }

/* ---- CARTA 3D (reverso → flip → frente) ---- */
.alb-card3d { width: 210px; aspect-ratio: 3/4; perspective: 1300px; cursor: pointer; }
.alb-card3d:focus-visible { outline: 2px solid var(--gold-2); outline-offset: 4px; border-radius: var(--r-lg); }
/* .5s literal (aunque --mo-enter valga lo mismo): esta duración es un CONTRATO con album.js —
   T.revealComun/T.revealEspecial tienen que superarla para no cortar el giro a mitad. Si el flip
   siguiera un token compartido, cambiar --mo-enter en otra página rompería la apertura del sobre. */
.alb-card3d__inner { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform .5s var(--ease-spring); }
.alb-card3d.is-flipped .alb-card3d__inner { transform: rotateY(180deg); }
.alb-card3d__back, .alb-card3d__front { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; border-radius: var(--r-lg); overflow: hidden; }
.alb-card3d__front { transform: rotateY(180deg); }
.alb-card3d__front .fig { width: 100%; height: 100%; aspect-ratio: auto; cursor: default; container-type: normal; }
/* la rareza + nueva/repetida van en alb-front__meta (arriba): ocultamos el meta interno de la
   figurita para no duplicar rareza/posición dentro del reveal. */
/* En el revelado la rareza y el estado viven arriba (.alb-front__meta), así que la meta de la placa
   solo conserva el NÚMERO DE COLECCIÓN — que debe verse también acá para ser consistente con el álbum. */
.alb-card3d__front .fig__meta { justify-content: flex-start; }
.alb-card3d__front .fig__meta .fig__rare, .alb-card3d__front .fig__meta .fig__poslbl { display: none; }
.alb-card3d__front .fig__nro { font-size: 1.15rem; color: var(--gold-2); }
/* reverso reconocible Olimar (navy + dorado + escudo + patrón; no filtra jugador ni rareza) */
.alb-card3d__back { background: linear-gradient(168deg, #16295c, #0b1a3e); border: 1px solid var(--line-2); display: grid; place-items: center; }
.alb-back__pat { position: absolute; inset: 0; opacity: .9; pointer-events: none;
    background: radial-gradient(circle at 50% 44%, rgba(255,194,51,.12), transparent 55%),
                repeating-linear-gradient(45deg, rgba(151,177,232,.05) 0 9px, transparent 9px 18px); }
.alb-back__crest { width: 78px; height: 78px; z-index: 1; filter: drop-shadow(0 4px 12px rgba(0,0,0,.5)); }
.alb-back__crest img { width: 100%; height: 100%; object-fit: contain; }
.alb-back__col { position: absolute; top: 16px; left: 0; right: 0; text-align: center; font-family: var(--disp); font-size: .74rem; letter-spacing: .16em; color: var(--gold-2); text-transform: uppercase; z-index: 1; }
.alb-back__n { position: absolute; bottom: 12px; left: 0; right: 0; text-align: center; font-size: .72rem; color: var(--tx-3); font-weight: 700; z-index: 1; }
/* badges nueva/repetida sobre el frente */
.alb-front__meta { position: absolute; top: 8px; left: 0; right: 0; z-index: 6; display: flex; gap: 6px; justify-content: center; align-items: center; }
.alb-front__rare { font-size: .6rem; font-weight: 800; letter-spacing: .06em; color: var(--gold-2); background: rgba(6,15,40,.72); border: 1px solid var(--line-2); padding: 3px 8px; border-radius: 999px; }
.alb-front__badge { font-size: .6rem; font-weight: 800; padding: 3px 9px; border-radius: 999px; display: inline-flex; align-items: center; gap: 4px; }
.alb-front__badge--nueva { background: linear-gradient(180deg, var(--gold-2), var(--gold)); color: var(--gold-ink); box-shadow: var(--sh-gold); }
.alb-front__badge--rep { background: var(--card-flat); border: 1px solid var(--line-2); color: var(--tx-2); }

/* ---- tratamiento ESPECIAL al revelar (Estrella/Jugada/Edición): glow + sweep + bloom, sobrio ----
   .8s literales: son el pico de la cinemática (el instante en que aterriza la carta), no un gesto
   de UI. Se anulan enteros con prefers-reduced-motion. */
.alb-card3d--esp.is-flipped .alb-card3d__front { box-shadow: 0 0 0 2px var(--gold), 0 22px 54px -12px rgba(255,194,51,.5); }
.alb-card3d--esp.is-flipped .alb-card3d__front::before { content: ""; position: absolute; inset: 0; z-index: 7; pointer-events: none;
    background: linear-gradient(115deg, transparent 32%, rgba(255,212,94,.18) 46%, rgba(255,255,255,.28) 50%, transparent 66%);
    transform: translateX(-120%); animation: alb-sweep .8s var(--ease-out) .12s 1; }
@keyframes alb-sweep { to { transform: translateX(120%); } }
.alb-card3d--esp.is-flipped .alb-card3d__inner::after { content: ""; position: absolute; inset: -28%; z-index: -1; border-radius: 50%;
    background: radial-gradient(circle, rgba(255,194,51,.22), transparent 62%); animation: alb-bloom .8s var(--ease-out); }
@keyframes alb-bloom { from { opacity: 0; transform: scale(.6); } 50% { opacity: 1; } to { opacity: .5; transform: scale(1); } }
/* re-render de una carta que YA aterrizó (volver con "‹"): no repetir sweep ni bloom */
.alb-card3d.is-replay .alb-card3d__front::before,
.alb-card3d.is-replay .alb-card3d__inner::after { animation: none; }
.alb-card3d.rar-edicion.is-flipped .alb-card3d__front { box-shadow: 0 0 0 2px var(--gold), 0 0 0 5px rgba(255,194,51,.25), 0 22px 54px -12px rgba(255,194,51,.55); }

/* ---- RESUMEN ---- */
.alb-open__stage--sum { gap: var(--sp-3); }
.alb-sum__grid { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; max-width: 100%; }
.alb-sum__grid .fig { width: 76px; }
.alb-sum__grid .fig--rare-pop { box-shadow: 0 0 0 2px var(--gold), 0 10px 26px -8px rgba(255,194,51,.5); }
.alb-sum__grid .pop { animation: fpop var(--mo-slow) var(--ease-spring); }
.alb-sum__stats { display: flex; gap: 16px; color: var(--tx-2); font-size: .9rem; flex-wrap: wrap; justify-content: center; }
.alb-sum__stats b { color: var(--tx); }
.alb-sum__page { color: var(--win); font-weight: 800; font-size: .92rem; display: flex; align-items: center; gap: 6px; }
.alb-sum__page .bi { color: var(--gold-2); }
.alb-sum__prog { width: 100%; max-width: 340px; }
.alb-sum__bar { height: 10px; border-radius: 999px; background: var(--raise); overflow: hidden; display: flex; box-shadow: var(--inlight); }
.alb-sum__bar span { background: var(--gold); }
/* --mo-bar: la barra del resumen anima un DATO (cuánto sumó la apertura), igual que .alb-prog__fill.
   Antes eran .5s y .6s escritos a mano, dos ritmos distintos para el mismo progreso. */
.alb-sum__bar em { background: var(--win); animation: alb-grow var(--mo-bar) var(--ease-out); }
@keyframes alb-grow { from { width: 0 !important; } }
.alb-sum__progtx { display: block; text-align: center; font-size: .82rem; color: var(--tx-2); margin-top: 6px; }
.alb-sum__progtx b { color: var(--gold-2); }

/* Durante la apertura, el dock y la barra de acción no compiten con la cinemática. Esto es
   PRESENTACIÓN, no bloqueo de scroll (de eso se encarga el lock del core), por eso la clase se
   pone y se saca aparte.
   opacity en vez de visibility: el disparador de la apertura ES el botón de la barra, y al cerrar
   el core le devuelve el foco — un elemento con visibility:hidden no puede recibirlo y el foco
   se perdía en el body. Con opacity:0 se ve exactamente igual y sigue siendo enfocable. */
body.alb-noscroll .dock, body.alb-noscroll .alb-actionbar { opacity: 0; pointer-events: none; }

/* ============================================================
   SHEET (detalle / repetidas / historial) — reusa patrón sheet8
   ============================================================ */
/* pointer-events:none cerrado — el backdrop vive a opacidad 0 sobre toda la pantalla
   mientras se desvanece, y sin esto se come todos los taps hasta que alguien le ponga
   [hidden]. El resto de los backdrops del sistema (.sheet8-bk) ya usaba este patrón;
   acá se dependía de que el JS se acordara de ocultarlo. Integración de la Ola 1. */
.alb-bk { position: fixed; inset: 0; z-index: 105; background: rgba(6,15,40,.7); opacity: 0; pointer-events: none; transition: opacity var(--mo-slow) var(--ease-out); }
/* .on además de .is-open: EST.overlay marca el PANEL con la clase que le pasa la página (acá
   .is-open) pero al BACKDROP siempre con .on. Sin esta regla el fondo quedaba transparente. */
/* `.on` era un parche contra una versión del core que marcaba el backdrop siempre con
   esa clase; el core ya usa la clase de estado del propio overlay, así que sobra. */
.alb-bk.is-open { opacity: 1; pointer-events: auto; }
.alb-sheet { position: fixed; left: 0; right: 0; bottom: 0; z-index: 110; max-height: 82vh; overflow-y: auto;
    padding: var(--sp-4) var(--sp-4) calc(var(--sp-5) + env(safe-area-inset-bottom, 0px));
    background: var(--card); border-top: 1px solid var(--line-2); border-radius: 22px 22px 0 0;
    box-shadow: var(--sh-deep); transform: translateY(102%); transition: transform var(--mo-slow) var(--ease-out);
    /* el fondo ya no scrollea detrás (lock del core): el panel scrollea SOLO por dentro y por eso
       el desbordamiento propio es obligatorio, no un adorno. */
    overscroll-behavior: contain; }
.alb-sheet.is-open { transform: translateY(0); }
.alb-sheet__hd { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--sp-3); }
.alb-sheet__t { font-family: var(--disp); font-size: 1.15rem; text-transform: uppercase; color: var(--tx); }
.alb-sheet__x { background: none; border: none; color: var(--tx-2); font-size: 1.4rem; cursor: pointer; line-height: 1; }
.alb-sheet__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.alb-detail { display: flex; flex-direction: column; align-items: center; gap: var(--sp-3); }
.alb-detail .fig { width: 180px; }
.alb-detail__name { font-family: var(--disp); font-size: 1.4rem; text-transform: uppercase; color: var(--tx); text-align: center; }
.alb-detail__row { display: flex; gap: var(--sp-3); flex-wrap: wrap; justify-content: center; color: var(--tx-2); font-size: .9rem; }
.alb-detail__row b { color: var(--tx); }
.alb-detail__rare { font-weight: 800; color: var(--gold-2); letter-spacing: .04em; }
/* número de colección en el detalle: mismo tratamiento que en la figurita (display font, dorado) */
.alb-detail__nro { font-family: var(--disp); font-size: 1.15rem; line-height: 1; color: var(--gold-2); letter-spacing: .02em; }
.alb-detail .fig { width: 190px; }
.alb-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; font-size: .82rem; font-weight: 700; }
.alb-chip--own { background: rgba(52,217,123,.12); border: 1px solid rgba(52,217,123,.4); color: var(--win); }
.alb-chip--dup { background: rgba(255,194,51,.1); border: 1px solid rgba(255,194,51,.35); color: var(--gold-2); }
.alb-chip--miss { background: var(--card-flat); border: 1px dashed var(--line-2); color: var(--tx-3); }
.alb-detail__stats { display: flex; gap: var(--sp-3); flex-wrap: wrap; justify-content: center; }
.alb-stat { display: inline-flex; align-items: baseline; gap: 5px; padding: 8px 14px; border-radius: 12px; background: var(--card-flat); border: 1px solid var(--line); color: var(--tx-2); font-size: .82rem; }
.alb-stat b { font-family: var(--disp); font-size: 1.15rem; color: var(--tx); }
.alb-detail__nav { display: flex; align-items: center; justify-content: center; gap: var(--sp-4); margin-top: var(--sp-2); width: 100%; }
.alb-detail__nav .btn8 { min-width: 52px; font-size: 1.2rem; padding: 8px 14px; }
.alb-detail__pos { font-size: .82rem; color: var(--tx-3); font-weight: 700; min-width: 54px; text-align: center; }

/* onboarding / vacío */
.alb-onbo { margin-top: var(--sp-5); text-align: center; padding: var(--sp-6) var(--sp-4);
    border-radius: var(--r-lg); background: var(--card); border: 1px solid var(--line-2); box-shadow: var(--sh); position: relative; overflow: hidden; }
.alb-onbo::before { content: ""; position: absolute; inset: 0; opacity: .6; pointer-events: none;
    background: radial-gradient(90% 70% at 50% -10%, rgba(255,194,51,.14), transparent 60%); }
.alb-onbo__crest { width: 84px; height: 84px; margin: 0 auto var(--sp-3); filter: drop-shadow(0 8px 20px rgba(0,0,0,.5)); }
.alb-onbo__crest img { width: 100%; height: 100%; object-fit: contain; }
.alb-onbo__ttl { font-family: var(--disp); font-size: clamp(1.5rem, 7vw, 2.2rem); text-transform: uppercase; color: var(--tx); margin: 0 0 var(--sp-2); }
.alb-onbo__sub { color: var(--tx-2); max-width: 42ch; margin: 0 auto var(--sp-4); line-height: 1.5; }
.alb-empty-note { color: var(--tx-3); font-size: .86rem; text-align: center; margin: var(--sp-4) 0; }

/* mini secciones (repetidas/historial acceso) */
.alb-quick { display: flex; gap: var(--sp-3); margin-top: var(--sp-5); flex-wrap: wrap; }
.alb-quick__b { flex: 1 1 140px; display: flex; align-items: center; gap: 10px; padding: var(--sp-3) var(--sp-4);
    border-radius: 14px; background: var(--card-flat); border: 1px solid var(--line); color: var(--tx); cursor: pointer; text-align: left; }
.alb-quick__b .bi { font-size: 1.3rem; color: var(--gold-2); }
.alb-quick__b b { display: block; font-size: .95rem; } .alb-quick__b span { font-size: .78rem; color: var(--tx-3); }

/* historial de sobres (dentro del sheet) */
.alb-hist { display: flex; flex-direction: column; gap: 8px; }
.alb-hrow { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; cursor: pointer;
    padding: 11px 12px; border-radius: 14px; background: var(--card-flat); border: 1px solid var(--line);
    color: var(--tx); -webkit-tap-highlight-color: transparent; transition: border-color var(--mo-fast), background var(--mo-fast), transform var(--mo-xfast); }
.alb-hrow:active { transform: scale(.985); }
@media (hover:hover) { .alb-hrow:hover { border-color: var(--line-2); background: var(--card); } }
.alb-hrow__ic { flex: 0 0 38px; width: 38px; height: 38px; display: grid; place-items: center; border-radius: 11px;
    background: rgba(255,255,255,.04); border: 1px solid var(--line); color: var(--tx-3); font-size: 1.15rem; }
.alb-hrow__main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.alb-hrow__t { font-weight: 800; font-size: .95rem; color: var(--tx); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.alb-hrow__sub { font-size: .78rem; color: var(--tx-3); } .alb-hrow__sub b { color: var(--win); }
.alb-hrow__rare { flex: 0 0 auto; font-size: .68rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
    padding: 4px 8px; border-radius: 999px; background: rgba(255,194,51,.12); border: 1px solid rgba(255,194,51,.32); color: var(--gold-2); }
.alb-hrow__ch { flex: 0 0 auto; color: var(--tx-3); font-size: .95rem; }
.alb-hrow--esp { background: linear-gradient(180deg, rgba(255,194,51,.07), var(--card-flat)); border-color: rgba(255,194,51,.28); }
.alb-hrow--esp .alb-hrow__ic { color: var(--gold-2); border-color: rgba(255,194,51,.3); background: rgba(255,194,51,.08); }
.alb-hrow.rar-shiny .alb-hrow__rare, .alb-hrow.rar-momento .alb-hrow__rare, .alb-hrow.rar-edicion .alb-hrow__rare {
    background: rgba(120,180,255,.14); border-color: rgba(120,180,255,.4); color: #9cc4ff; }
.alb-hist__back { margin-bottom: 6px; }

/* ---- control segmentado (mobile): Colección · Sobres · Historial ---- */
.alb-seg { display: flex; gap: 6px; margin-top: 22px; padding: 5px; border-radius: 14px;
    background: var(--card-flat); border: 1px solid var(--line); position: sticky; top: 6px; z-index: 5; }
.alb-seg__b { flex: 1 1 0; min-width: 0; display: inline-flex; align-items: center; justify-content: center; gap: 5px;
    padding: 10px 3px; border: none; border-radius: 10px; background: transparent; color: var(--tx-3);
    font-weight: 800; font-size: .78rem; cursor: pointer; -webkit-tap-highlight-color: transparent;
    transition: background var(--mo-fast), color var(--mo-fast); }
.alb-seg__b i { font-size: .95rem; flex: 0 0 auto; }
.alb-seg__b span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.alb-seg__b.on { background: var(--gold); color: #10203f; box-shadow: 0 2px 10px rgba(255,194,51,.25); }
.alb-seg__badge { font-size: .7rem; padding: 1px 6px; border-radius: 999px; min-width: 18px; text-align: center;
    background: var(--gold); color: #10203f; }
.alb-seg__b.on .alb-seg__badge { background: rgba(16,32,63,.22); color: #10203f; }

/* ---- cómo conseguir sobres (getpacks / ways) ---- */
.alb-getpacks { margin-top: var(--sp-4); }
.alb-getpacks--side { margin-top: 0; }
.alb-getpacks__cta { width: 100%; min-height: 56px; border: none; border-radius: 16px; cursor: pointer;
    font-family: var(--disp); font-size: 1.05rem; letter-spacing: .02em; text-transform: uppercase;
    background: linear-gradient(180deg, var(--gold), var(--gold-2)); color: #10203f;
    box-shadow: 0 10px 24px -10px rgba(255,194,51,.55); display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    margin-bottom: var(--sp-3); }
.alb-getpacks__cta:active { transform: scale(.985); }
.alb-getpacks__lead { color: var(--tx-2); font-size: .9rem; line-height: 1.5; margin: 0 0 var(--sp-3); }
.alb-getpacks__lead--sub { color: var(--tx-3); font-size: .82rem; margin: 2px 0 var(--sp-2); }
.alb-ways { display: flex; flex-direction: column; gap: 8px; }
.alb-way { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 14px;
    background: var(--card-flat); border: 1px solid var(--line); color: var(--tx); text-decoration: none;
    -webkit-tap-highlight-color: transparent; transition: border-color var(--mo-fast), background var(--mo-fast), transform var(--mo-xfast); }
.alb-way:active { transform: scale(.99); }
@media (hover:hover) { .alb-way:hover { border-color: var(--line-2); background: var(--card); } }
.alb-way__ic { flex: 0 0 42px; width: 42px; height: 42px; display: grid; place-items: center; border-radius: 12px;
    background: rgba(255,194,51,.1); border: 1px solid rgba(255,194,51,.28); color: var(--gold-2); font-size: 1.25rem; }
.alb-way__main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.alb-way__t { font-weight: 800; font-size: .95rem; color: var(--tx); }
.alb-way__d { font-size: .8rem; color: var(--tx-3); line-height: 1.35; }
.alb-way__tag { flex: 0 0 auto; font-size: .67rem; font-weight: 800; text-transform: uppercase; letter-spacing: .03em;
    color: var(--gold-2); text-align: right; max-width: 88px; line-height: 1.25; }
.alb-way__ch { flex: 0 0 auto; color: var(--tx-3); }
/* estados de las reglas de compartir (dato real del server, no promesa vacía) */
.alb-way--done .alb-way__ic { background: rgba(52,217,123,.1); border-color: rgba(52,217,123,.32); color: var(--win); }
.alb-way--done .alb-way__tag { color: var(--win); }
.alb-way--off { opacity: .62; }
.alb-way--off .alb-way__ic { background: rgba(255,255,255,.04); border-color: var(--line); color: var(--tx-3); }
.alb-way--off .alb-way__tag { color: var(--tx-3); }

/* En el aside desktop (300px) el tag lateral ahogaba el título ("Compartí / tu / equipo" en 3 líneas):
   ahí el tag pasa DEBAJO del texto y se oculta el chevron. */
.alb-getpacks--side .alb-way { flex-wrap: wrap; padding: 10px 11px; gap: 10px; }
.alb-getpacks--side .alb-way__ic { flex-basis: 34px; width: 34px; height: 34px; font-size: 1.05rem; }
.alb-getpacks--side .alb-way__main { flex: 1 1 100px; }
.alb-getpacks--side .alb-way__t { font-size: .9rem; }
.alb-getpacks--side .alb-way__d { font-size: .76rem; }
.alb-getpacks--side .alb-way__tag { flex: 1 0 100%; max-width: none; text-align: left; margin-left: 44px; }
.alb-getpacks--side .alb-way__ch { display: none; }
.alb-histbox { margin-top: var(--sp-4); }

/* ---- HOJA DE DESTACADAS (v1.7) --------------------------------------------------------------
   Última hoja del álbum: piezas del club (escudo/copa/equipo/momento). Van APARTE del plantel — no
   suman al progreso ni salen en los sobres. Hoy no hay ninguna cargada (el club todavía no aportó
   las imágenes) → estado honesto, no un bloque vacío ni contenido inventado. */
.alb-tab--des { border-style: dashed; }
.alb-tab--des .bi { color: var(--gold-2); }
.alb-tab--des.on { border-style: solid; }
.alb-vitrina__nota { margin: var(--sp-3) 0 0; font-size: .8rem; color: var(--tx-3); line-height: 1.45; }
.alb-grid--vitrina { margin-top: var(--sp-3); }
.alb-vitrina__vacia { margin-top: var(--sp-4); display: flex; flex-direction: column; align-items: center; gap: 6px;
    text-align: center; padding: var(--sp-6) var(--sp-4); border-radius: var(--r-lg);
    background: rgba(255,255,255,.02); border: 1px dashed var(--alb-slot-line); }
.alb-vitrina__vacia .bi { font-size: 1.9rem; color: var(--gold-2); opacity: .5; margin-bottom: 2px; }
.alb-vitrina__vacia b { font-size: .98rem; color: var(--tx); }
.alb-vitrina__vacia span { font-size: .84rem; color: var(--tx-3); line-height: 1.5; max-width: 40ch; }

/* CTA al perfil del jugador desde el detalle de la figurita */
.alb-detail__perfil { width: 100%; justify-content: center; text-decoration: none; }

/* mobile: solo se ve el segmento activo (cover/prog/seg siempre visibles) */
@media (max-width: 1023px) {
    .alb-side { display: none; }
    .arena__in.alb[data-seg="col"] > [data-segid="sob"],
    .arena__in.alb[data-seg="col"] > [data-segid="his"],
    .arena__in.alb[data-seg="sob"] > [data-segid="col"],
    .arena__in.alb[data-seg="sob"] > [data-segid="his"],
    .arena__in.alb[data-seg="his"] > [data-segid="col"],
    .arena__in.alb[data-seg="his"] > [data-segid="sob"] { display: none; }

    /* ============================================================
       MOBILE v1.6 — PÁGINA DE ÁLBUM (antes no existía ningún marco: .alb-pages sólo estaba
       estilado en desktop y en mobile era un div desnudo, así que las figuritas flotaban sobre
       el fondo). Acá se le da el panel de papel: hoja con borde de tapa, tono propio y aire
       interior. Sin lomo — el lomo es la metáfora de doble página del desktop. */
    /* margin-top: los chips de posición quedaban PEGADOS al marco de la hoja (0px medidos) */
    .alb-pages { position: relative; margin-top: 18px; padding: var(--sp-4) var(--sp-3) var(--sp-4);
        border-radius: 16px; border: 1px solid var(--line-2);
        background: linear-gradient(180deg, #0e1f47, #0b1a3e 55%);
        box-shadow: var(--sh), inset 0 1px 0 rgba(255,255,255,.05); }
    /* filete dorado superior: "hoja impresa" */
    .alb-pages::after { content: ""; position: absolute; top: 0; left: 14px; right: 14px; height: 2px;
        background: linear-gradient(90deg, transparent, rgba(255,194,51,.5), transparent); pointer-events: none; }
    .alb-page { margin-top: 0; }

    /* stack superior más compacto: antes la 1ª figurita empezaba a ~428px (51% de la pantalla) */
    .alb-cover { margin-top: 6px; padding: var(--sp-3) var(--sp-4); }
    .alb-cover__crest { width: 36px; height: 36px; }
    .alb-cover__name { font-size: clamp(1.2rem, 5.2vw, 1.6rem); }
    .alb-prog { margin-top: var(--sp-3); }
    /* debajo del topstrip sticky (53px + safe-area: en PWA standalone con notch la topstrip crece,
       así que el offset la acompaña — con un 58px fijo el segmentado volvía a quedar tapado) */
    .alb-seg { margin-top: 22px; top: calc(env(safe-area-inset-top, 0px) + 58px); }
    .alb-tabs { margin-top: var(--sp-3); }

    /* especiales apaisadas: a 3 columnas "span 2" dejaría un hueco huérfano → ocupan la fila entera */
    .figesp--h { grid-column: 1 / -1; }
}

/* ============================================================
   DESKTOP (≥1024): doble página con lomo + rail secciones + panel
   ============================================================ */
@media (min-width: 1024px) {
    .page-album .arena__in.alb { display: grid; grid-template-columns: 232px minmax(0, 1fr) 300px; gap: var(--sp-5); align-items: start; }
    .alb-cover { grid-column: 1 / -1; }
    .alb-prog { grid-column: 1 / -1; margin-top: 0; }
    /* segmentado y secciones-segmento son solo mobile: en desktop manda el aside de 3 columnas */
    .alb-seg { display: none; }
    .arena__in.alb > .alb-getpacks[data-segid], .arena__in.alb > .alb-histbox[data-segid] { display: none; }

    /* rail de secciones (izq): columna vertical, sin fade/snap horizontal */
    .alb-tabs { grid-column: 1; flex-direction: column; overflow: visible; position: sticky; top: var(--sp-4); align-self: start;
        padding-right: 0; -webkit-mask-image: none; mask-image: none; }
    .alb-tab { width: 100%; justify-content: flex-start; }

    /* páginas (centro) = ÁLBUM ABIERTO encuadernado: panel con dos medias-páginas de tono
       distinto, lomo central con sombra de curvatura hacia el pliegue, y borde exterior de tapa. */
    .alb-pages { grid-column: 2; position: relative; padding: var(--sp-5) var(--sp-5) var(--sp-6);
        border-radius: 18px; border: 1px solid var(--line-2);
        background: linear-gradient(90deg, #0e1f47 0 50%, #0b1a3e 50% 100%);
        box-shadow: var(--sh), inset 0 1px 0 rgba(255,255,255,.05); }
    .alb-pages::before { content: ""; position: absolute; top: 12px; bottom: 12px; left: 50%; width: 3px; transform: translateX(-1.5px);
        background: linear-gradient(180deg, transparent, var(--alb-spine) 30%, var(--alb-spine) 70%, transparent);
        box-shadow: -12px 0 22px -12px rgba(0,0,0,.55), 12px 0 22px -12px rgba(0,0,0,.55); opacity: .85; pointer-events: none; z-index: 1; }
    .alb-page__hd { border-bottom-width: 2px; }
    .alb-page__nm { font-size: 1.35rem; }
    .alb-grid { grid-template-columns: repeat(4, 1fr); gap: 16px; column-gap: 30px; position: relative; z-index: 2; }
    /* (la animación de pasar página vive ahora en la cascada base, dirigida por .alb-page--next/prev:
       la anterior era desktop-only, sin dirección, y disparaba también al cerrar el detalle) */

    /* panel colección (der) */
    .alb-side { grid-column: 3; position: sticky; top: var(--sp-4); align-self: start; display: flex; flex-direction: column; gap: var(--sp-4); }
    .alb-side__card { padding: var(--sp-4); border-radius: var(--r-lg); background: var(--card); border: 1px solid var(--line-2); box-shadow: var(--sh); }
    .alb-side__ttl { font-size: .7rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--tx-3); margin-bottom: var(--sp-3); }
    .alb-actionbar { display: none; }   /* en desktop la acción vive en el panel */
    .alb-side__cta { width: 100%; min-height: 64px; border: none; border-radius: 16px; cursor: pointer; font-family: var(--disp);
        font-size: 1.1rem; text-transform: uppercase; color: var(--gold-ink); background: linear-gradient(180deg, var(--gold-2), var(--gold));
        box-shadow: var(--sh-gold); display: flex; align-items: center; justify-content: center; gap: 8px; }
    .alb-side__cta:active { transform: scale(.98); }
    .alb-side__row { display: flex; align-items: center; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: .85rem; color: var(--tx-2); }
    .alb-side__row:last-child { border-bottom: 0; } .alb-side__row b { color: var(--tx); }
    /* apertura desktop: composición propia (sobre y carta más grandes, centro protagonista) */
    .alb-open__stage { max-width: 660px; }
    .alb-sobre { width: 250px; }
    .alb-card3d { width: 320px; }
    .alb-sum__grid .fig { width: 96px; }
    .alb-sheet { left: 50%; right: auto; bottom: 4vh; width: min(620px, 92vw); border-radius: var(--r-lg); transform: translate(-50%, 115%); }
    .alb-sheet.is-open { transform: translate(-50%, 0); }
}
@media (min-width: 1440px) { .page-album .arena__in.alb { grid-template-columns: 260px minmax(0,1fr) 320px; } .alb-grid { grid-template-columns: repeat(5, 1fr); } }

/* ============================================================
   GLARE DE ATERRIZAJE (v1.6) — inspirado en el patrón de GlareHover/SpotlightCard de reactbits.dev:
   el efecto no lo maneja JS, se declara con custom properties y se dispara al agregar una clase.
   Acá se dispara cuando la carta TERMINA de girar: marca el instante exacto en que aterriza, que
   es el pico emocional de la apertura y hasta ahora no tenía nada. CSS puro, 0 JS, 0 dependencias.
   ============================================================ */
/* 620ms y la curva (.22,.7,.3,1) quedan literales: el glare es cinemática pura (marca el instante
   del aterrizaje) y esa curva NO es --ease-out (.22,.61,.36,1) — sale más rápido y frena más tarde,
   que es lo que hace que el destello "pase" en vez de deslizarse. Forzar el token lo aplanaría. */
.alb-card3d { --glare-dur: 620ms; --glare-ang: 118deg; }
.alb-card3d.is-landed .alb-card3d__front::after {
    content: ""; position: absolute; inset: 0; z-index: 8; pointer-events: none; border-radius: inherit;
    background: linear-gradient(var(--glare-ang), transparent 36%, rgba(255,244,214,.30) 48%, rgba(255,255,255,.16) 53%, transparent 64%);
    transform: translateX(-130%);
    animation: alb-glare var(--glare-dur) cubic-bezier(.22,.7,.3,1) forwards;
}
@keyframes alb-glare { to { transform: translateX(130%); } }
@media (prefers-reduced-motion: reduce) {
    .alb-card3d.is-landed .alb-card3d__front::after { animation: none; opacity: 0; }
}

/* ============================================================
   CELEBRACIONES PREMIUM (burst/partículas/halo/sweep)
   Solo transform/opacity, capa pointer-events:none. La foto sigue de protagonista.
   Duraciones y curvas LITERALES en todo este bloque: describen física (una chispa que sale
   disparada y frena, un anillo que se expande y se apaga), no la respuesta de un control. Las
   curvas (.14,.72,.28,1) y (.16,.7,.3,1) son más agresivas que --ease-out (.22,.61,.36,1) justo
   para eso; cambiarlas por el token mataría el "disparo". Todo esto se anula con reduced-motion.
   ============================================================ */
.alb-fx { position: absolute; inset: 0; pointer-events: none; overflow: visible; z-index: 4; }
.alb-fx__halo { position: absolute; left: 50%; top: 50%; width: 44px; height: 44px; border-radius: 50%;
    background: radial-gradient(circle, rgba(255,194,51,.55), rgba(255,194,51,0) 68%);
    transform: translate(-50%,-50%) scale(.35); opacity: 0; will-change: transform, opacity;
    animation: alb-fx-halo 1s var(--ease-out) forwards; }
@keyframes alb-fx-halo { 0% { opacity: 0; transform: translate(-50%,-50%) scale(.3); }
    22% { opacity: .9; } 100% { opacity: 0; transform: translate(-50%,-50%) scale(3.2); } }
.alb-fx--coleccion .alb-fx__halo { width: 64px; height: 64px; animation-duration: 1.35s; }
.alb-fx--coleccion .alb-fx__halo { background: radial-gradient(circle, rgba(255,215,106,.6), rgba(255,194,51,0) 68%); }
/* apertura del sobre (obligatoria, breve 700–1200ms): halo cálido con núcleo blanco + partículas rápidas */
.alb-fx--open .alb-fx__halo { width: 56px; height: 56px; animation-duration: .95s;
    background: radial-gradient(circle, rgba(255,247,224,.72), rgba(255,194,51,.35) 45%, rgba(255,194,51,0) 70%); }
.alb-fx--open .alb-fx__p { animation-duration: .92s; box-shadow: 0 0 9px rgba(255,224,150,.6); }
/* chispa con ESTELA: nace en la corona (--x0/--y0) y vuela hacia afuera alargada en su dirección */
.alb-fx__p { position: absolute; left: 50%; top: 50%; width: 16px; height: 6px; border-radius: 999px;
    transform: translate(-50%,-50%); opacity: 0; will-change: transform, opacity;
    box-shadow: 0 0 10px rgba(255,194,51,.6); animation: alb-fx-p 1.05s cubic-bezier(.14,.72,.28,1) forwards; }
@keyframes alb-fx-p {
    0%   { opacity: 0; transform: translate(-50%,-50%) translate(var(--x0,0), var(--y0,0)) rotate(var(--rot,0deg)) scaleX(.3) scaleY(.7); }
    10%  { opacity: 1; }
    68%  { opacity: 1; }
    100% { opacity: 0; transform: translate(-50%,-50%) translate(var(--dx,0), calc(var(--dy,0) + 40px)) rotate(var(--rot,0deg)) scaleX(1.5) scaleY(.55); } }

/* anillo de destello (apertura / colección completa): expande y se apaga */
.alb-fx__ring { position: absolute; left: 50%; top: 50%; width: 120px; height: 120px; border-radius: 50%;
    border: 2px solid rgba(255,224,150,.75); transform: translate(-50%,-50%) scale(.35); opacity: 0;
    will-change: transform, opacity; animation: alb-fx-ring .8s cubic-bezier(.16,.7,.3,1) forwards; }
@keyframes alb-fx-ring {
    0%   { opacity: 0; transform: translate(-50%,-50%) scale(.3); border-width: 3px; }
    18%  { opacity: .9; }
    100% { opacity: 0; transform: translate(-50%,-50%) scale(2.1); border-width: 1px; } }
.alb-fx__sweep { position: absolute; inset: -30% -60%; opacity: 0; will-change: transform, opacity;
    background: linear-gradient(105deg, transparent 42%, rgba(255,243,198,.16) 50%, transparent 58%);
    transform: translateX(-55%); animation: alb-fx-sweep 1s var(--ease-out) forwards; }
@keyframes alb-fx-sweep { 0% { opacity: 0; transform: translateX(-60%); } 32% { opacity: 1; } 100% { opacity: 0; transform: translateX(60%); } }
/* reduced-motion: solo un halo suave que aparece y se desvanece (sin explosión).
   La escala ahora es FIJA: antes crecía de 1.6 a 2 y eso seguía siendo una trayectoria. Queda una
   variación de opacidad pura — la celebración se ve, pero no se mueve nada. */
.alb-fx--reduce .alb-fx__halo { animation: alb-fx-halo-soft .85s ease forwards; }
@keyframes alb-fx-halo-soft { 0% { opacity: 0; transform: translate(-50%,-50%) scale(1.8); } 45% { opacity: .65; } 100% { opacity: 0; transform: translate(-50%,-50%) scale(1.8); } }

/* ============================================================
   ACCESIBILIDAD / REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
    .alb-skeleton, .alb-sobre--float, .alb-sobre--resolviendo, .alb-sobre--abriendo, .alb-actionbar__btn--sheen::after, .alb-page,
    .alb-sum__bar em, .alb-sum__grid .pop, .alb-fx__p, .alb-fx__sweep, .alb-fx__ring { animation: none !important; }
    .alb-card3d__inner { transition: none !important; }
    .alb-card3d--esp.is-flipped .alb-card3d__front::before, .alb-card3d--esp.is-flipped .alb-card3d__inner::after { animation: none !important; opacity: 0 !important; }
    .fig--shiny:hover::before { animation: none !important; opacity: 1 !important; }
    .alb-prog__fill { transition: none !important; }
}