/* =====================================================================
   perfil.css
   Estilos específicos para el perfil, el gacha y la tienda "El Taller"
   ===================================================================== */

/* CLASES GLOBALES DE OPTIMIZACIÓN */
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
.carta-cv { content-visibility: auto; contain-intrinsic-size: 280px; }

/* =========================================================
   NAV ENTRE CARTAS DEL ÁLBUM (flechas + contador + swipe)
   ========================================================= */
.mz-cardnav {
    position: fixed;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    border-radius: 9999px;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.18);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    z-index: 10002;
    transition: opacity .2s, transform .15s, background .2s;
    cursor: pointer;
}
.mz-cardnav:hover { background: rgba(255,255,255,0.18); transform: translateY(-50%) scale(1.05); }
.mz-cardnav:active { transform: translateY(-50%) scale(.95); }
.mz-cardnav-prev { left: 12px; }
.mz-cardnav-next { right: 12px; }
.mz-cardnav-disabled { opacity: 0.25; pointer-events: none; }

@media (min-width: 640px) {
    .mz-cardnav { width: 52px; height: 52px; }
    .mz-cardnav-prev { left: 24px; }
    .mz-cardnav-next { right: 24px; }
}

.mz-cardnav-counter {
    position: fixed;
    bottom: 18px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(255,255,255,0.10);
    border: 1px solid rgba(255,255,255,0.18);
    color: #fff;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0.15em;
    padding: 6px 14px;
    border-radius: 9999px;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    z-index: 10002;
    user-select: none;
    pointer-events: none;
    transition: opacity .2s;
}
.mz-cardnav-counter.mz-cardnav-counter-hidden { opacity: 0; }

/* =========================================================
   TILT 3D — efecto card-viva al hover (solo desktop con hover real).
   En mobile/touch queda desactivado: no es invasivo y respeta el swipe.
   ========================================================= */
@media (hover: hover) and (pointer: fine) {
    .mz-tilt {
        transition: transform 220ms cubic-bezier(.22,1,.36,1);
        transform-style: preserve-3d;
        will-change: transform;
        transform:
            perspective(1100px)
            rotateY(calc(var(--tilt-x, 0) * 9deg))
            rotateX(calc(var(--tilt-y, 0) * -9deg));
    }
    /* Ultra-tilt para cartas holográficas: más ángulo y perspectiva dramática */
    .mz-tilt.mz-tilt-holo {
        transition: transform 160ms cubic-bezier(.22,1,.36,1);
        transform:
            perspective(700px)
            rotateY(calc(var(--tilt-x, 0) * 18deg))
            rotateX(calc(var(--tilt-y, 0) * -18deg))
            scale(1.03);
    }
    .mz-tilt-glare {
        position: absolute;
        inset: 0;
        border-radius: inherit;
        pointer-events: none;
        opacity: 0;
        transition: opacity 220ms;
        background: radial-gradient(
            circle at calc(50% + var(--tilt-x, 0) * 40%) calc(50% + var(--tilt-y, 0) * 40%),
            rgba(255,255,255,0.18),
            transparent 55%
        );
        mix-blend-mode: overlay;
    }
    .mz-tilt:hover .mz-tilt-glare { opacity: 1; }
    /* Glare más intenso y coloreado para holográfica */
    .mz-tilt.mz-tilt-holo .mz-tilt-glare {
        background: radial-gradient(
            circle at calc(50% + var(--tilt-x, 0) * 45%) calc(50% + var(--tilt-y, 0) * 45%),
            rgba(255,255,255,0.35) 0%,
            rgba(220,180,255,0.2) 30%,
            transparent 60%
        );
    }
    .mz-tilt.mz-tilt-holo:hover .mz-tilt-glare { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
    .mz-tilt { transform: none !important; }
    .mz-tilt-glare { display: none; }
}

/* =========================================================
   SKIP BUTTON · escena de apertura de sobre
   ========================================================= */
.mz-skip-btn {
    position: absolute;
    top: 14px;
    right: 14px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: 9999px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.18);
    color: rgba(255,255,255,0.78);
    font-size: 10px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    z-index: 60;
    cursor: pointer;
    transition: background .15s, color .15s, transform .12s;
}
.mz-skip-btn:hover { background: rgba(255,255,255,0.14); color: #fff; }
.mz-skip-btn:active { transform: scale(.96); }
.mz-skip-btn .fa-forward-step { font-size: 11px; }

/* -----------------------------------------------------
   MOTOR 3D BLINDADO CONTRA TAILWIND JIT PURGING
------------------------------------------------------*/
.perspective-1200 { perspective: 1200px !important; }
.preserve-3d { transform-style: preserve-3d !important; }
.backface-hidden { backface-visibility: hidden !important; -webkit-backface-visibility: hidden !important; }
.rotate-y-180 { transform: rotateY(180deg) !important; }

/* Efecto de Caída de las Cartas (Repartir en la mesa) */
@keyframes cardSlideIn {
    0% { transform: translateX(100vw) rotate(15deg); opacity: 0; }
    100% { transform: translateX(0) rotate(0deg); opacity: 1; }
}
@keyframes cardSlideOut {
    0% { transform: translateX(0) rotate(0deg); opacity: 1; }
    100% { transform: translateX(-100vw) rotate(-15deg); opacity: 0; }
}
.card-slide-in { animation: cardSlideIn 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) forwards; }
.card-slide-out { animation: cardSlideOut 0.4s ease-in forwards; pointer-events: none; }

/* Bordes por rareza (sin halos) */
.glow-bronce      { border-color: #C27A4E; }
.glow-plata       { border-color: #CBD5E1; }
.glow-oro         { border-color: #FBBF24; }
.glow-holografica { border-color: #EC4899; }

/* Animaciones del Gacha Pack (El Sobre) */
.gacha-stage { perspective: 1200px; }
@keyframes packShakeHard { 0%,100%{ transform: translate(0,0) rotate(0);} 10%{transform:translate(-3px,2px) rotate(-3deg);} 30%{transform:translate(4px,-2px) rotate(4deg);} 50%{transform:translate(-4px,3px) rotate(-5deg);} 70%{transform:translate(5px,-3px) rotate(5deg);} 90%{transform:translate(-2px,2px) rotate(-3deg);} }
@keyframes packTearOpen { 0%{ transform: scale(1) rotate(0); opacity:1;} 60%{ transform: scale(1.08) rotate(2deg); opacity:1;} 100%{ transform: scale(1.2) rotate(0); opacity:0;} }
@keyframes rayRotate { from { transform: rotate(0deg);} to { transform: rotate(360deg);} }
.gacha-pack-shake { animation: packShakeHard 0.18s linear infinite; }
.gacha-pack-tear  { animation: packTearOpen 0.7s cubic-bezier(.5,.1,.7,1.6) forwards; }
.gacha-rays { position:absolute; top:50%; left:50%; width:600px; height:600px; margin:-300px 0 0 -300px; pointer-events:none; z-index:3; opacity:0; transition: opacity .35s; background: conic-gradient(from 0deg, rgba(251,191,36,0.18) 0deg, transparent 30deg, rgba(255,255,255,0.22) 60deg, transparent 90deg, rgba(249,115,22,0.18) 120deg, transparent 150deg, rgba(251,191,36,0.22) 180deg, transparent 210deg, rgba(255,255,255,0.18) 240deg, transparent 270deg, rgba(249,115,22,0.22) 300deg, transparent 330deg, rgba(251,191,36,0.18) 360deg); animation: rayRotate 8s linear infinite; }
.gacha-rays.on { opacity: 1; }

@keyframes fabPulseHalo { 0%, 100% { transform: scale(1); opacity: 0.55; } 50% { transform: scale(1.35); opacity: 0; } }

/* =====================================================================
   APERTURA DE SOBRES · Nuevo modal premium
   ===================================================================== */
#modalAbrirSobre {
    background: radial-gradient(ellipse at center, #0d0c10 0%, #050507 70%);
}

.abrir-sobre-grain {
    position: absolute; inset: 0; pointer-events: none;
    background-image: radial-gradient(circle at 1px 1px, rgba(255,255,255,0.045) 1px, transparent 0);
    background-size: 14px 14px;
    opacity: 0.5;
}
.abrir-sobre-stripe {
    position: absolute; left: 0; right: 0; top: 50%; height: 1px;
    background: linear-gradient(90deg, transparent, var(--tier-color, rgba(249,115,22,0.35)), transparent);
    pointer-events: none;
}
.abrir-sobre-bg-glow {
    position: absolute; top: 50%; left: 50%; width: 720px; height: 720px;
    margin: -360px 0 0 -360px;
    background: radial-gradient(circle, var(--tier-glow, rgba(249,115,22,0.35)) 0%, transparent 65%);
    filter: blur(40px);
    opacity: 0.6;
    pointer-events: none;
    transition: opacity .6s;
}

.abrir-sobre-rays {
    position: absolute; top: 50%; left: 50%;
    width: 880px; height: 880px;
    margin: -440px 0 0 -440px;
    pointer-events: none;
    opacity: 0;
    transition: opacity .55s;
    background: conic-gradient(from 0deg,
        var(--tier-glow, rgba(249,115,22,0.18)) 0deg, transparent 30deg,
        rgba(255,255,255,0.18) 60deg, transparent 90deg,
        var(--tier-glow, rgba(249,115,22,0.22)) 120deg, transparent 150deg,
        rgba(255,255,255,0.22) 180deg, transparent 210deg,
        var(--tier-glow, rgba(249,115,22,0.18)) 240deg, transparent 270deg,
        rgba(255,255,255,0.18) 300deg, transparent 330deg,
        var(--tier-glow, rgba(249,115,22,0.22)) 360deg);
    animation: rayRotate 14s linear infinite;
    will-change: transform, opacity;
}
.abrir-sobre-rays.on { opacity: 1; }

.abrir-sobre-eyebrow {
    display: inline-flex; align-items: center; gap: 12px;
    font-size: 10px; font-weight: 900;
    letter-spacing: 0.45em;
    text-transform: uppercase;
    color: var(--tier-color, #fb923c);
}
.abrir-sobre-eyebrow .bar {
    width: 26px; height: 2px;
    background: linear-gradient(90deg, var(--tier-color, #f97316), transparent);
}
.abrir-sobre-eyebrow .bar.right {
    background: linear-gradient(270deg, var(--tier-color, #f97316), transparent);
}

.abrir-sobre-title {
    font-family: 'Montserrat', 'Inter', sans-serif;
    font-style: italic; font-weight: 900;
    font-size: clamp(1.6rem, 7vw, 2.6rem);
    line-height: 0.95;
    letter-spacing: -0.03em;
    text-transform: uppercase;
    background: linear-gradient(180deg, #ffffff 0%, #fde7c4 45%, var(--tier-color, #ea580c) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    filter: drop-shadow(0 6px 18px var(--tier-glow, rgba(249,115,22,0.35)));
    text-align: center;
}

/* Imagen del sobre gigante */
.abrir-pack-box {
    position: relative;
    width: clamp(220px, 62vw, 360px);
    aspect-ratio: 1 / 1;
    display: flex; align-items: center; justify-content: center;
    will-change: transform;
}
.abrir-pack-box.float { animation: packFloatBig 4.2s ease-in-out infinite; }
@keyframes packFloatBig {
    0%, 100% { transform: translateY(0) rotate(-1.2deg); }
    50%      { transform: translateY(-16px) rotate(1.2deg); }
}

.abrir-pack-image {
    position: relative;
    z-index: 3;
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter:
        drop-shadow(0 30px 55px rgba(0,0,0,0.9))
        drop-shadow(0 0 38px var(--tier-glow, rgba(249,115,22,0.55)));
    pointer-events: none;
}

/* Halo radial detrás del sobre */
.abrir-pack-halo {
    position: absolute; inset: -20%;
    background: radial-gradient(circle at center, var(--tier-glow, rgba(249,115,22,0.6)) 0%, transparent 65%);
    filter: blur(28px);
    z-index: 1;
    animation: haloPulseBig 3s ease-in-out infinite;
    pointer-events: none;
}
@keyframes haloPulseBig {
    0%, 100% { opacity: 0.55; transform: scale(0.92); }
    50%      { opacity: 1;    transform: scale(1.18); }
}

/* Foil shine sobre la imagen */
.abrir-pack-shine {
    position: absolute; inset: 0; z-index: 4;
    background: linear-gradient(115deg, transparent 35%, rgba(255,255,255,0.32) 50%, transparent 65%);
    background-size: 250% 250%;
    animation: shineFoil 3.6s linear infinite;
    pointer-events: none;
    mix-blend-mode: overlay;
}

/* Estados de animación durante apertura */
.abrir-pack-box.shake {
    animation: packShakeIntense 0.22s linear infinite;
}
@keyframes packShakeIntense {
    0%,100%{ transform: translate(0,0) rotate(0);}
    20%{ transform: translate(-5px,3px) rotate(-3deg);}
    40%{ transform: translate(6px,-3px) rotate(4deg);}
    60%{ transform: translate(-5px,4px) rotate(-4deg);}
    80%{ transform: translate(6px,-3px) rotate(3deg);}
}

.abrir-pack-box.burst {
    animation: packBurstOut 0.85s cubic-bezier(.5,.1,.7,1.6) forwards;
}
@keyframes packBurstOut {
    0%   { transform: scale(1) rotate(0); opacity: 1; filter: brightness(1); }
    45%  { transform: scale(1.18) rotate(2deg); opacity: 1; filter: brightness(1.5); }
    100% { transform: scale(1.55) rotate(0); opacity: 0; filter: brightness(2.2); }
}

/* Botón abrir */
.btn-abrir-ahora {
    position: relative;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 16px 38px;
    border-radius: 14px;
    background: linear-gradient(135deg, #f97316, #ea580c);
    color: white;
    font-family: 'Montserrat', 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.28em;
    box-shadow:
        0 14px 32px -10px rgba(249,115,22,0.7),
        inset 0 1px 0 rgba(255,255,255,0.3);
    border: 1px solid rgba(255,255,255,0.15);
    cursor: pointer;
    transition: transform .18s ease, box-shadow .25s ease;
}
.btn-abrir-ahora:hover {
    transform: translateY(-2px);
    box-shadow:
        0 18px 38px -10px rgba(249,115,22,0.85),
        inset 0 1px 0 rgba(255,255,255,0.4);
}
.btn-abrir-ahora:active { transform: scale(0.97); }
.btn-abrir-ahora .shine {
    position: absolute; inset: 0;
    background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,0.45) 50%, transparent 70%);
    transform: translateX(-110%);
    transition: transform 1s ease;
    pointer-events: none;
}
.btn-abrir-ahora:hover .shine { transform: translateX(110%); }

.abrir-help-text {
    color: rgba(255,255,255,0.55);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.28em;
    text-transform: uppercase;
}

.btn-cerrar-modal {
    position: absolute; top: 20px; right: 20px;
    width: 40px; height: 40px;
    border-radius: 12px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    color: rgba(255,255,255,0.6);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    backdrop-filter: blur(10px);
    transition: all .2s ease;
    z-index: 30;
}
.btn-cerrar-modal:hover {
    color: white;
    background: rgba(255,255,255,0.1);
}

/* =====================================================================
   CARTAS · Dorso institucional + frente revelado
   ===================================================================== */
.carta-dorso {
    background:
        radial-gradient(circle at 50% 30%, rgba(249,115,22,0.14) 0%, transparent 55%),
        linear-gradient(180deg, #14110d 0%, #050505 100%);
    border: 3px solid rgba(249,115,22,0.18);
    box-shadow:
        0 18px 50px rgba(0,0,0,0.85),
        inset 0 1px 0 rgba(255,255,255,0.04);
}
.carta-dorso-grain {
    position: absolute; inset: 0;
    background-image: radial-gradient(circle at 1px 1px, rgba(249,115,22,0.18) 1px, transparent 0);
    background-size: 16px 16px;
    opacity: 0.32;
    pointer-events: none;
}
.carta-dorso-shimmer {
    position: absolute; inset: 0;
    background: linear-gradient(115deg, transparent 38%, rgba(255,255,255,0.07) 50%, transparent 62%);
    background-size: 250% 250%;
    animation: shineFoil 5.5s linear infinite;
    pointer-events: none;
}

.carta-frente {
    box-shadow:
        0 20px 48px rgba(0,0,0,0.85),
        inset 0 1px 0 rgba(255,255,255,0.05);
}
.carta-frente-shine {
    position: absolute; inset: 0; z-index: 5;
    background: linear-gradient(115deg, transparent 35%, rgba(255,255,255,0.12) 50%, transparent 65%);
    background-size: 250% 250%;
    animation: shineFoil 4.5s linear infinite;
    pointer-events: none;
    mix-blend-mode: overlay;
}

/* Bordes por rareza (sin halos) */
.glow-bronce      { border-color: #C27A4E; }
.glow-plata       { border-color: #CBD5E1; }
.glow-oro         { border-color: #FBBF24; }
.glow-holografica { border-color: #EC4899; }

/* Rayos cónicos detrás de la imagen para racing y coleccion */
.carta-rays {
    position: absolute; inset: -10%;
    pointer-events: none;
    opacity: 0;
    transition: opacity .5s ease;
}
.carta-rays.on { opacity: 0.55; }
.carta-rays-oro {
    background: conic-gradient(from 0deg,
        rgba(251,191,36,0.45) 0deg, transparent 22deg,
        rgba(255,255,255,0.32) 44deg, transparent 66deg,
        rgba(251,191,36,0.4) 88deg, transparent 110deg,
        rgba(255,255,255,0.32) 132deg, transparent 154deg,
        rgba(251,191,36,0.45) 176deg, transparent 198deg,
        rgba(255,255,255,0.32) 220deg, transparent 242deg,
        rgba(251,191,36,0.4) 264deg, transparent 286deg,
        rgba(255,255,255,0.32) 308deg, transparent 330deg,
        rgba(251,191,36,0.45) 352deg, transparent 360deg);
    animation: rayRotate 7s linear infinite;
}
.carta-rays-holografica {
    background: conic-gradient(from 0deg,
        rgba(236,72,153,0.45) 0deg, transparent 20deg,
        rgba(255,255,255,0.4) 40deg, transparent 60deg,
        rgba(168,85,247,0.45) 80deg, transparent 100deg,
        rgba(255,255,255,0.4) 120deg, transparent 140deg,
        rgba(96,165,250,0.45) 160deg, transparent 180deg,
        rgba(255,255,255,0.4) 200deg, transparent 220deg,
        rgba(251,191,36,0.45) 240deg, transparent 260deg,
        rgba(255,255,255,0.4) 280deg, transparent 300deg,
        rgba(236,72,153,0.45) 320deg, transparent 340deg,
        rgba(255,255,255,0.4) 360deg);
    animation: rayRotate 6s linear infinite;
}

/* Indicador de rareza en footer */
.rareza-banner {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 16px;
    border-radius: 10px;
    color: white;
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.25em;
    border: 1px solid rgba(255,255,255,0.18);
    box-shadow: 0 12px 24px -8px rgba(0,0,0,0.7), inset 0 1px 0 rgba(255,255,255,0.18);
    backdrop-filter: blur(6px);
}
.rareza-banner i { font-size: 12px; }

.rareza-eyebrow {
    font-size: 9px;
    font-weight: 900;
    letter-spacing: 0.45em;
    text-transform: uppercase;
    margin-bottom: 8px;
    display: block;
}

/* Holo foil sobre la carta (Pokémon TCG style) */
.carta-holo {
    position: absolute; inset: 0;
    pointer-events: none;
    z-index: 2;
    mix-blend-mode: color-dodge;
    background-size: 200% 200%;
    animation: shineFoil 4s linear infinite;
}
/* Reflejo holográfico — un único destello iridiscente cruza la carta
   de borde a borde. Reemplaza el doble foil anterior (color-dodge + grilla
   arcoíris) que tapaba demasiado la imagen. Mismo timing que goldGlint pero
   con tinte rosa/blanco/violeta y mix-blend screen para que solo aclare. */
.carta-holo-holografica {
    background: transparent;
    animation: none;
    overflow: hidden;
    border-radius: inherit;
}
.carta-holo-holografica::after {
    content: '';
    position: absolute;
    top: -60%; left: -35%;
    width: 26%; height: 220%;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(236, 72, 153, 0)    18%,
        rgba(236, 72, 153, 0.35) 42%,
        rgba(255, 255, 255, 0.78) 50%,
        rgba(96, 165, 250, 0.40) 58%,
        rgba(168, 85, 247, 0)    82%,
        transparent 100%
    );
    transform: rotate(18deg) translateX(-200%);
    mix-blend-mode: screen;
    animation: holoGlint 5.2s ease-in-out infinite;
}
@keyframes holoGlint {
    0%,  48% { transform: rotate(18deg) translateX(-200%); opacity: 0; }
    52%       { opacity: 1; }
    80%       { transform: rotate(18deg) translateX(480%); opacity: 1; }
    84%, 100% { transform: rotate(18deg) translateX(480%); opacity: 0; }
}

/* ── Destello metálico de oro: un rayo de luz que cruza la carta ────────── */
.carta-destello-oro {
    position: absolute; inset: 0;
    pointer-events: none;
    z-index: 4;
    border-radius: inherit;
    overflow: hidden;
}
.carta-destello-oro::after {
    content: '';
    position: absolute;
    top: -60%; left: -35%;
    width: 30%; height: 220%;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255, 245, 180, 0) 20%,
        rgba(255, 248, 200, 0.88) 46%,
        rgba(255, 255, 255, 0.95) 50%,
        rgba(255, 220,  80, 0.78) 54%,
        rgba(255, 235, 120, 0) 78%,
        transparent 100%
    );
    transform: rotate(18deg) translateX(-200%);
    animation: goldGlint 4.8s ease-in-out infinite;
}
@keyframes goldGlint {
    0%,  52% { transform: rotate(18deg) translateX(-200%); opacity: 0; }
    55%       { opacity: 1; }
    78%       { transform: rotate(18deg) translateX(480%);  opacity: 1; }
    82%, 100% { transform: rotate(18deg) translateX(480%);  opacity: 0; }
}

/* ── Float continuo post-reveal (carta holográfica viva) ────────────────── */
.carta-holo-float {
    /* translate es independiente de transform → no choca con mz-tilt */
    animation: holoFloat 2.8s ease-in-out infinite;
}
@keyframes holoFloat {
    0%,  100% { translate: 0  0px; }
    35%        { translate: 0 -10px; }
    70%        { translate: 0  5px; }
}
@media (prefers-reduced-motion: reduce) {
    .carta-holo-float { animation: none; }
}

/* Sello pequeño de rareza, esquina superior derecha (discreto pero visible) */
.rareza-sello {
    position: absolute;
    top: 12px; right: 12px;
    z-index: 5;
    width: 36px; height: 36px;
    border-radius: 999px;
    display: flex; align-items: center; justify-content: center;
    color: white;
    font-size: 13px;
    border: 2px solid rgba(255,255,255,0.45);
    box-shadow:
        0 6px 18px rgba(0,0,0,0.6),
        inset 0 1px 0 rgba(255,255,255,0.4);
    backdrop-filter: blur(4px);
}
/* =====================================================================
   ÁLBUM · Mismo lenguaje visual que El Taller
   --rar-color y --rar-grad se setean inline desde renderCarta() (PHP)
   ===================================================================== */

/* Contenedor general (paridad con .taller-section) */
.album-section {
    position: relative;
    background: linear-gradient(180deg, #0a0a0c 0%, #14141a 50%, #08080a 100%);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 2rem;
    padding: 1.25rem;
    overflow: hidden;
    box-shadow: 0 30px 60px -20px rgba(0,0,0,0.7), inset 0 1px 0 rgba(255,255,255,0.04);
}
@media (min-width: 768px) { .album-section { padding: 2rem; } }

/* Texturas de fondo (paridad con .taller-bg-*) */
.album-bg-grain {
    position: absolute; inset: 0; pointer-events: none; z-index: 0;
    background-image: radial-gradient(circle at 1px 1px, rgba(255,255,255,0.05) 1px, transparent 0);
    background-size: 14px 14px;
    opacity: 0.55;
}
.album-bg-glow {
    position: absolute; top: -120px; left: -60px; width: 360px; height: 360px;
    pointer-events: none; z-index: 0;
    background: radial-gradient(circle, rgba(249,115,22,0.18), transparent 70%);
    filter: blur(50px);
}
.album-bg-stripe {
    position: absolute; left: 0; right: 0; top: 50%; height: 1px;
    background: linear-gradient(90deg, transparent, rgba(249,115,22,0.18), transparent);
    pointer-events: none; z-index: 0;
}

/* Header tipográfico */
.album-eyebrow {
    font-family: 'Montserrat', 'Inter', sans-serif;
    font-size: 10px; font-weight: 900;
    letter-spacing: 0.4em;
    color: #fb923c;
    display: inline-flex; align-items: center; gap: 8px;
    margin-bottom: 6px;
}
.album-eyebrow::before {
    content: ''; width: 24px; height: 2px;
    background: linear-gradient(90deg, #f97316, transparent);
}
.album-title {
    font-family: 'Montserrat', 'Inter', sans-serif;
    font-style: italic; font-weight: 900;
    font-size: clamp(2rem, 9vw, 3.5rem);
    line-height: 0.9;
    letter-spacing: -0.04em;
    text-transform: uppercase;
    background: linear-gradient(180deg, #ffffff 0%, #fed7aa 40%, #ea580c 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    filter: drop-shadow(0 6px 16px rgba(249,115,22,0.25));
}
/* Modifier inline: comparte línea con el eyebrow pero el protagonismo
   sigue siendo del título — más chico que la versión block, no minúsculo. */
.album-title--inline {
    font-size: clamp(2rem, 7vw, 2.75rem);
    line-height: 1;
    filter: drop-shadow(0 4px 12px rgba(249,115,22,0.28));
    margin: 0;
}

/* Barra de progreso "Tu colección · n/total" */
.album-progress-block { display: flex; flex-direction: column; gap: 8px; }
.album-progress-meta {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: 8px;
}
.album-progress-meta-label {
    font-size: 10px; font-weight: 800;
    color: rgba(255,255,255,0.55);
    letter-spacing: 0.32em;
    text-transform: uppercase;
}
.album-progress-meta-count {
    font-size: 16px; font-weight: 900;
    color: white;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
}
.album-progress-meta-total { color: rgba(255,255,255,0.4); font-weight: 800; }
.album-progress-bar-wrap {
    position: relative;
    height: 5px;
    background: rgba(255,255,255,0.06);
    border-radius: 999px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,0.04);
}
.album-progress-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, #f97316, #ea580c);
    border-radius: 999px;
    transition: width 1s cubic-bezier(.2,.8,.2,1);
    box-shadow: 0 0 12px rgba(249,115,22,0.6);
}

/* Tabs scrollables horizontales · variante compacta */
.album-tabs-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 12px, #000 calc(100% - 12px), transparent 100%);
            mask-image: linear-gradient(90deg, transparent 0, #000 12px, #000 calc(100% - 12px), transparent 100%);
    padding: 0 4px;
}
.album-tabs-wrap::-webkit-scrollbar { display: none; }
.album-tabs {
    display: inline-flex; gap: 4px;
    background: #06060a;
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 12px;
    padding: 4px;
    box-shadow: inset 0 2px 6px rgba(0,0,0,0.4);
    min-width: max-content;
}
.album-tab {
    flex: 0 0 auto;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
    padding: 6px 14px;
    border-radius: 8px;
    font-size: 10px; font-weight: 900;
    text-transform: uppercase; letter-spacing: 0.1em;
    color: rgba(255,255,255,0.5);
    background: transparent;
    transition: color .25s ease, background .25s ease, box-shadow .25s ease;
    cursor: pointer; border: none;
    white-space: nowrap;
    line-height: 1.15;
}
.album-tab:hover { color: rgba(255,255,255,0.95); background: rgba(255,255,255,0.04); }
.album-tab.tab-active {
    background: linear-gradient(135deg, #f97316, #ea580c);
    color: white;
    box-shadow: 0 5px 12px rgba(249,115,22,0.4), inset 0 1px 0 rgba(255,255,255,0.25);
}
/* Conteo: pasa de píldora horizontal a línea sutil debajo del nombre. */
.album-tab-count {
    display: block;
    padding: 0;
    background: transparent;
    border: none;
    font-size: 8px; font-weight: 700;
    letter-spacing: 0.06em;
    color: rgba(255,255,255,0.45);
    font-variant-numeric: tabular-nums;
}
.album-tab.tab-active .album-tab-count {
    color: rgba(255,255,255,0.85);
}
.album-tabs--compact .album-tab { padding: 5px 12px; font-size: 9.5px; }

/* Grilla 3x4 (12 cartas) con scroll interno. 3 filas visibles + peek de la 4ta. */
.album-grid-scroll {
    max-height: clamp(560px, 115vw, 680px);
    overflow-y: auto;
    overflow-x: hidden;
    padding: 4px 6px 16px 4px;
    margin: -4px -4px 0;
    scrollbar-width: thin;
    scrollbar-color: rgba(249,115,22,0.5) rgba(255,255,255,0.05);
    -webkit-mask-image: linear-gradient(180deg, #000 0, #000 calc(100% - 24px), transparent 100%);
            mask-image: linear-gradient(180deg, #000 0, #000 calc(100% - 24px), transparent 100%);
}
.album-grid-scroll::-webkit-scrollbar { width: 6px; }
.album-grid-scroll::-webkit-scrollbar-track {
    background: rgba(255,255,255,0.03);
    border-radius: 999px;
}
.album-grid-scroll::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #f97316, #ea580c);
    border-radius: 999px;
}

.album-grid-3x5 {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    position: relative;
    z-index: 1;
}
@media (min-width: 640px) { .album-grid-3x5 { gap: 14px; } }

.album-slot {
    position: relative;
    /* Aspect real de la imagen impresa (img/cartas/{serie}/...): 1024x1526 */
    aspect-ratio: 640 / 996;
    width: 100%;
}

/* Slot vacío: misma presencia visual que una miniatura — silueta de moto
   grande de fondo + label "Próximamente" centrado en una pastilla. */
.album-slot-empty {
    position: absolute; inset: 0;
    border-radius: 10px;
    background:
        radial-gradient(circle at 50% 35%, rgba(255,255,255,0.05), transparent 60%),
        linear-gradient(160deg, rgba(20,20,24,0.85), rgba(8,8,10,0.96));
    border: 1px dashed rgba(255,255,255,0.1);
    color: rgba(255,255,255,0.32);
    overflow: hidden;
}

/* Silueta de moto al fondo: presencia sutil — se percibe pero no domina. */
.album-slot-empty-moto {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: clamp(2rem, 11vw, 4.2rem);
    line-height: 1;
    color: rgba(255,255,255,0.18);
    pointer-events: none;
    z-index: 1;
}

/* Pastilla "Próximamente" centrada sobre la silueta, presencia sutil. */
.album-slot-empty-label {
    position: absolute;
    bottom: 8px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    font-size: 6.5px; font-weight: 700;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.45);
    background: rgba(0,0,0,0.4);
    border: 1px solid rgba(255,255,255,0.06);
    padding: 3px 7px;
    border-radius: 999px;
    backdrop-filter: blur(4px);
    white-space: nowrap;
}

/* =====================================================================
   MINIATURA · La imagen impresa de la carta llena la celda; sólo agregamos
   reborde por rareza (var(--rar-color)).
   ===================================================================== */
.album-card-mini {
    position: absolute; inset: 0;
    border-radius: 8px;
    overflow: hidden;
    isolation: isolate;
    transition: transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s ease;
    cursor: pointer;
}
.album-card-mini.album-card--unlocked:hover  {
    transform: translateY(-3px) scale(1.03);
    box-shadow: 0 8px 24px -6px var(--rar-color, rgba(251,191,36,0.4));
}
.album-card-mini.album-card--unlocked:active { transform: translateY(-1px) scale(0.99); }

.album-card-mini.album-card--holografica { border-color: transparent; }

/* La imagen cubre el 100% de la tarjeta */
.album-mini-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    z-index: 1;
}

/* Bloqueada · silueta de moto al fondo + candado central grande, ocupando
   la misma área visual que una miniatura desbloqueada.
   Nota: NO setear position aquí — .album-card-mini ya define position:absolute;
   inset:0 para llenar el .album-slot. Pisarlo colapsa la carta a 0×0. */
.album-card--locked {
    background:
        radial-gradient(circle at 50% 35%, rgba(255,255,255,0.04), transparent 60%),
        linear-gradient(150deg, #16161a 0%, #0c0c10 100%);
    border-color: rgba(255,255,255,0.05);
    cursor: default;
}
.album-card--locked:hover { transform: none; box-shadow: none; }

/* Silueta de moto al fondo: discreta, sólo sugiere la categoría. */
.album-moto-locked {
    position: absolute;
    inset: 0;
    display: flex; align-items: center; justify-content: center;
    color: rgba(255,255,255,0.12);
    font-size: clamp(2rem, 11vw, 4.2rem);
    line-height: 1;
    z-index: 1;
    pointer-events: none;
}

/* Candado central: presencia mínima, sin tapar la silueta. */
.album-locked-badge {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 32%;
    aspect-ratio: 1 / 1;
    border-radius: 999px;
    background: rgba(0,0,0,0.45);
    border: 1px solid rgba(255,255,255,0.08);
    display: flex; align-items: center; justify-content: center;
    color: rgba(255,255,255,0.5);
    font-size: clamp(0.85rem, 4.5vw, 1.5rem);
    backdrop-filter: blur(4px);
    z-index: 5;
}

/* =====================================================================
   ÁLBUM · Carta grande (modal) — la imagen impresa de la carta es la única
   capa de contenido. Capas:
     1. <img class="album-full-base"> · imagen impresa (img/cartas/{serie}/...)
     2. .album-full-foil · foil iridescente (sólo rareza='holografica')
     3. .album-full-shine · brillo diagonal sutil
   Aspect 5/7 (300x420 base), responsive con clamp.
   ===================================================================== */
.album-card-full {
    position: relative;
    width: clamp(280px, 90vw, 400px);
    /* Aspect real de la imagen impresa (img/cartas/{serie}/...): 1024x1526 */
    aspect-ratio: 1024 / 1526;
    border-radius: 24px;
    isolation: isolate;
    background: linear-gradient(160deg, #1f1f24 0%, #0f0f12 100%);
    box-shadow:
        0 30px 80px -10px rgba(0,0,0,0.95),
        0 12px 28px -6px rgba(0,0,0,0.7),
        inset 0 1px 0 rgba(255,255,255,0.06);
    transform: translateZ(0);
    /* Flotación idle sutil para que la carta no quede estática. translate/rotate
       son propiedades individuales → no chocan con el tilt 3D (transform). */
    animation: mzAlbumFloat 5s ease-in-out infinite;
}
@keyframes mzAlbumFloat {
    0%, 100% { translate: 0 0;    rotate: -0.7deg; }
    50%      { translate: 0 -8px; rotate:  0.7deg; }
}
@media (prefers-reduced-motion: reduce) {
    .album-card-full { animation: none; }
}

/* Capa 1: imagen impresa de la carta */
.album-full-base {
    position: absolute; inset: 0;
     width: 100%; height: 100%; 
    object-fit: contain;
    object-position: center;
    z-index: 1;
    border-radius: inherit;
    pointer-events: none;
    user-select: none;
    transition: opacity .3s ease;
}

/* Capa 3a: foil holográfico (sólo rareza='holografica') */
.album-full-foil {
    position: absolute; inset: 0;
    z-index: 4;
    pointer-events: none;
    border-radius: inherit;
    background: linear-gradient(125deg,
        rgba(0,0,0,0) 18%,
        rgba(168,85,247,0.32) 32%,
        rgba(236,72,153,0.42) 50%,
        rgba(251,191,36,0.36) 68%,
        rgba(0,0,0,0) 82%);
    background-size: 220% 220%;
    mix-blend-mode: color-dodge;
    opacity: 0.7;
    animation: shineFoil 3.6s linear infinite;
}
.album-full-foil.hidden { display: none; }

/* Capa 3b: brillo diagonal sutil */
.album-full-shine {
    position: absolute; inset: 0;
    z-index: 5;
    pointer-events: none;
    border-radius: inherit;
    background: linear-gradient(115deg, transparent 40%, rgba(255,255,255,0.06) 50%, transparent 60%);
    background-size: 250% 250%;
    animation: shineFoil 7s linear infinite;
    mix-blend-mode: overlay;
}

/* =====================================================================
   "PEGAR EN ÁLBUM" · Clon que vuela del centro al slot + flash al impactar
   ===================================================================== */
.flying-card {
    position: fixed;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%) scale(1) rotate(0deg);
    border-radius: 14px;
    overflow: hidden;
    z-index: 20100;
    pointer-events: none;
    opacity: 1;
    box-shadow:
        0 30px 70px -10px rgba(0,0,0,0.85),
        0 0 28px var(--rar-color, #fbbf24),
        0 0 12px rgba(255,255,255,0.4);
    border: 1.5px solid var(--rar-color, rgba(255,255,255,0.6));
    transition: transform .9s cubic-bezier(.45,1.45,.45,1), opacity .35s ease;
    will-change: transform, opacity;
}
.flying-card img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
    user-select: none;
}
.flying-card-landed {
    opacity: 0;
    transition: transform .9s cubic-bezier(.45,1.45,.45,1), opacity .25s ease-in;
}

/* Carta pre-ocultada mientras la animación de "pegar" todavía no aterrizó.
   El slot conserva su tamaño en el grid; sólo se oculta el contenido visual
   para que el clon volador sea lo que el usuario ve aparecer. */
.album-card--pending-reveal { visibility: hidden; }

/* Slot destino: pulso breve cuando la carta "aterriza" */
.slot-just-landed {
    animation: slotLanded 0.55s ease-out;
}
@keyframes slotLanded {
    0%   { box-shadow: 0 0 0 rgba(251,191,36,0); transform: scale(1); }
    40%  { box-shadow: 0 0 36px 4px var(--rar-color, rgba(251,191,36,0.95)); transform: scale(1.08); }
    100% { box-shadow: 0 0 0 rgba(251,191,36,0); transform: scale(1); }
}

/* =====================================================================
   APERTURA · Flip dramático, ribbon "¡Nueva!", franja sutil de reciclaje
   ===================================================================== */

/* Override del flip default (Tailwind duration-700) por uno cinematográfico */
#carta-activa .card-inner {
    transition: transform 1.05s cubic-bezier(.32, .72, .28, 1) !important;
    transform-style: preserve-3d;
}

/* Wrapper relativo para anclar aura, sello y franja sin tocar el aspect-ratio */
.carta-wrap { position: relative; }

/* Aura de fondo (afuera de la carta volteada). Pulsa al revelar. */
.carta-aura {
    position: absolute; inset: -18% -14%;
    border-radius: 32px;
    background: radial-gradient(ellipse at center, var(--aura-color, rgba(249,115,22,0.5)) 0%, transparent 65%);
    filter: blur(36px);
    opacity: 0;
    transition: opacity .8s ease;
    pointer-events: none;
    z-index: -1;
}
#carta-activa .card-inner.rotate-y-180 ~ .carta-aura { opacity: 0.85; }

/* FASE 1 · TENSIÓN. Pre-flip: la carta tiembla y el aura empuja un destello. */
.pre-flip-tension { animation: preFlipShiver 0.32s ease-out; }
@keyframes preFlipShiver {
    0%   { transform: scale(1) translateX(0);    filter: brightness(1);    }
    20%  { transform: scale(1.025) translateX(-3px); filter: brightness(1.18); }
    45%  { transform: scale(0.985) translateX(3px);  filter: brightness(0.95); }
    70%  { transform: scale(1.025) translateX(-2px); filter: brightness(1.22); }
    100% { transform: scale(1) translateX(0);    filter: brightness(1);    }
}

/* Flash blanco de la escena al voltear premium */
#escena-apertura.flash-burst { background-color: rgba(255,255,255,0.92) !important; transition: background-color .12s ease; }

/* Sello "¡Nueva!" — ribbon con bounce. Vive sobre la carta-frente. */
.overlay-nueva {
    position: absolute;
    top: 14px; left: 14px;
    z-index: 30;
    display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 14px;
    border-radius: 10px;
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
    color: white;
    font-size: 11px; font-weight: 900;
    text-transform: uppercase; letter-spacing: 0.22em;
    box-shadow:
        0 14px 26px -8px rgba(34,197,94,0.65),
        inset 0 1px 0 rgba(255,255,255,0.32);
    border: 1px solid rgba(255,255,255,0.28);
    transform: rotate(-8deg) scale(0);
    opacity: 0;
}
.overlay-nueva i { font-size: 11px; filter: drop-shadow(0 1px 1px rgba(0,0,0,0.3)); }
.overlay-nueva .nueva-spark {
    position: absolute; inset: -3px;
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(255,255,255,0.45), transparent 50%);
    pointer-events: none; opacity: 0;
}
.nueva-pop { animation: nuevaPop 0.75s cubic-bezier(.34,1.56,.64,1) forwards; }
.nueva-pop .nueva-spark { animation: nuevaSpark 1.2s ease-out 0.3s forwards; }
@keyframes nuevaPop {
    0%   { opacity: 0; transform: rotate(-25deg) scale(0); }
    55%  { opacity: 1; transform: rotate(-4deg)  scale(1.3); }
    78%  { opacity: 1; transform: rotate(-10deg) scale(0.94); }
    100% { opacity: 1; transform: rotate(-8deg)  scale(1); }
}
@keyframes nuevaSpark {
    0%   { opacity: 0; }
    30%  { opacity: 1; }
    100% { opacity: 0; }
}
/* Variante premium: ribbon dorado, no verde */
.nueva-pop-premium {
    background: linear-gradient(135deg, #fbbf24 0%, #d97706 100%) !important;
    box-shadow:
        0 16px 30px -8px rgba(251,191,36,0.7),
        inset 0 1px 0 rgba(255,255,255,0.4) !important;
}

/* Sparkle burst alrededor de la carta cuando es nueva */
.sparkle-burst {
    position: absolute; top: 50%; left: 50%;
    width: 0; height: 0;
    pointer-events: none; z-index: 28;
}
.sparkle {
    position: absolute; top: 0; left: 0;
    width: var(--size, 8px); height: var(--size, 8px);
    border-radius: 999px;
    background: var(--col, #fff);
    box-shadow: 0 0 14px var(--col, #fff), 0 0 4px rgba(255,255,255,0.9);
    opacity: 0;
    animation: sparkleFly 1.15s cubic-bezier(.18,.85,.32,1) forwards;
    animation-delay: var(--delay, 0ms);
    transform: translate(-50%, -50%) scale(0.4);
}
@keyframes sparkleFly {
    0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.4); }
    18%  { opacity: 1; transform: translate(calc(-50% + var(--tx) * 0.35), calc(-50% + var(--ty) * 0.35)) scale(1.25); }
    100% { opacity: 0; transform: translate(calc(-50% + var(--tx)), calc(-50% + var(--ty))) scale(0.3); }
}

/* Franja sutil de reciclaje · vive afuera de la carta, abajo */
.stripe-repetida {
    position: absolute;
    left: 50%;
    bottom: -36px;
    transform: translateX(-50%) translateY(10px);
    display: inline-flex; align-items: center; gap: 9px;
    padding: 7px 14px;
    border-radius: 999px;
    background: black;
    border: 1px solid rgba(249,115,22,0.4);
    color: rgba(255,255,255,0.85);
    font-size: 10px; font-weight: 900;
    text-transform: uppercase; letter-spacing: 0.18em;
    white-space: nowrap;
    /* backdrop-filter eliminado: el fondo es black opaco, el blur del backdrop
       era invisible pero se pagaba igual en cada frame. */
    box-shadow: 0 12px 22px -10px rgba(0,0,0,0.7), inset 0 1px 0 rgba(255,255,255,0.05);
    opacity: 0;
    transition: opacity .45s ease, transform .45s cubic-bezier(.2,.8,.2,1);
    z-index: 35;
}
.stripe-repetida.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* Permitir que el aura, sparkles y stripe se vean fuera de los límites de la carta */
#secuencia-container { overflow: visible; }
.stripe-repetida i { color: #fb923c; font-size: 11px; }
.stripe-repetida .stripe-label { color: rgba(255,255,255,0.55); }
.stripe-repetida .stripe-dot {
    width: 3px; height: 3px; border-radius: 99px;
    background: rgba(255,255,255,0.25);
}
.stripe-repetida .stripe-cant { color: #fb923c; letter-spacing: 0.05em; }
.stripe-repetida .stripe-mon { color: rgba(255,255,255,0.7); font-size: 9px; }

/* =====================================================================
   LA MOCHILA · Modal rediseñado (lenguaje del Taller)
   ===================================================================== */
.mochila-backdrop {
    background: rgba(5,5,7,0.85);
    backdrop-filter: blur(10px);
}
.mochila-modal {
    position: relative; z-index: 1;
    width: 100%; max-width: 400px;
    border-radius: 1.5rem;
    background: linear-gradient(180deg, #0a0a0c 0%, #14141a 50%, #08080a 100%);
    border: 1px solid rgba(255,255,255,0.08);
    box-shadow:
        0 40px 80px -25px rgba(0,0,0,0.85),
        inset 0 1px 0 rgba(255,255,255,0.05);
    overflow: hidden;
    padding: 22px 18px 20px;
}
.mochila-grain {
    position: absolute; inset: 0; pointer-events: none;
    background-image: radial-gradient(circle at 1px 1px, rgba(255,255,255,0.045) 1px, transparent 0);
    background-size: 14px 14px; opacity: 0.55;
}
.mochila-glow {
    position: absolute; top: -120px; left: 50%;
    transform: translateX(-50%);
    width: 360px; height: 360px;
    background: radial-gradient(circle, rgba(249,115,22,0.22), transparent 70%);
    filter: blur(50px); pointer-events: none;
}
.mochila-close {
    position: absolute; top: 12px; right: 12px;
    width: 36px; height: 36px;
    border-radius: 999px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.12);
    color: rgba(255,255,255,0.7);
    display: flex; align-items: center; justify-content: center;
    transition: transform .25s ease, background .2s ease, color .2s ease;
    z-index: 3; cursor: pointer;
}
.mochila-close:hover {
    background: rgba(255,255,255,0.12);
    color: white;
    transform: rotate(90deg);
}
.mochila-header {
    position: relative; z-index: 2;
    text-align: center;
    margin-bottom: 16px;
    padding-top: 4px;
}
.mochila-eyebrow {
    display: inline-flex; align-items: center; gap: 10px;
    font-size: 10px; font-weight: 900;
    letter-spacing: 0.4em; text-transform: uppercase;
    color: #fb923c;
    margin-bottom: 8px;
}
.mochila-eyebrow .bar {
    width: 22px; height: 2px;
    background: linear-gradient(90deg, transparent, #f97316);
}
.mochila-eyebrow .bar.right {
    background: linear-gradient(90deg, #f97316, transparent);
}
.mochila-eyebrow i { font-size: 12px; }
.mochila-title {
    font-family: 'Montserrat', 'Inter', sans-serif;
    font-style: italic; font-weight: 900;
    font-size: clamp(1.8rem, 7vw, 2.4rem);
    line-height: 0.95;
    letter-spacing: -0.03em;
    text-transform: uppercase;
    background: linear-gradient(180deg, #ffffff 0%, #fed7aa 50%, #ea580c 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    filter: drop-shadow(0 4px 12px rgba(249,115,22,0.25));
    margin-bottom: 4px;
}
.mochila-sub {
    font-size: 10px; font-weight: 800;
    color: rgba(255,255,255,0.5);
    letter-spacing: 0.2em; text-transform: uppercase;
}
.mochila-lista {
    position: relative; z-index: 2;
    display: flex; flex-direction: column; gap: 10px;
    max-height: 60vh; overflow-y: auto;
    padding-right: 4px;
}
.mochila-lista::-webkit-scrollbar { width: 4px; }
.mochila-lista::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.12); border-radius: 99px; }

.mochila-item {
    position: relative;
    display: grid;
    grid-template-columns: 64px 1fr 36px;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 14px;
    background: linear-gradient(135deg, #14141a 0%, #0a0a10 100%);
    border: 1px solid rgba(255,255,255,0.06);
    overflow: hidden;
    text-align: left;
    cursor: pointer;
    transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease;
    color: inherit;
}
.mochila-item:hover {
    transform: translateY(-2px);
    border-color: var(--tier-color, rgba(255,255,255,0.18));
    box-shadow: 0 18px 30px -14px var(--tier-glow, rgba(0,0,0,0.6));
}
.mochila-item:active { transform: translateY(0) scale(0.99); }
.mochila-item-glow {
    position: absolute; top: -50%; left: -25%;
    width: 220px; height: 220px;
    background: radial-gradient(circle, var(--tier-glow, rgba(249,115,22,0.4)) 0%, transparent 65%);
    filter: blur(28px);
    pointer-events: none;
    opacity: 0.55;
}
.mochila-item-img {
    position: relative; z-index: 1;
    width: 64px; height: 80px;
    border-radius: 10px;
    overflow: hidden;
    background: rgba(0,0,0,0.45);
    border: 1px solid rgba(255,255,255,0.05);
    display: flex; align-items: center; justify-content: center;
}
.mochila-item-img img {
    width: 100%; height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 6px 12px var(--tier-glow, rgba(0,0,0,0.6)));
}
.mochila-item-img-fallback {
    width: 100%; height: 100%;
    align-items: center; justify-content: center;
    color: var(--tier-color, #fb923c);
    font-size: 1.5rem;
}
.mochila-item-info { position: relative; z-index: 1; min-width: 0; }
.mochila-item-tier {
    font-size: 9px; font-weight: 900;
    letter-spacing: 0.32em; text-transform: uppercase;
    color: var(--tier-color, #fb923c);
    margin-bottom: 1px;
}
.mochila-item-name {
    color: white;
    font-weight: 900;
    font-size: 14px;
    line-height: 1.15;
    text-transform: uppercase;
    letter-spacing: -0.005em;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mochila-item-count {
    display: inline-flex; align-items: center; gap: 5px;
    margin-top: 6px;
    padding: 3px 9px;
    background: rgba(0,0,0,0.55);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 99px;
    font-size: 9px; font-weight: 900;
    color: rgba(255,255,255,0.85);
    letter-spacing: 0.14em; text-transform: uppercase;
}
.mochila-item-count i {
    color: var(--tier-color, #fb923c);
    font-size: 9px;
}
.mochila-item-btn {
    position: relative; z-index: 1;
    width: 36px; height: 36px;
    border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, #f97316, #ea580c);
    color: white;
    box-shadow: 0 8px 18px -8px rgba(249,115,22,0.6), inset 0 1px 0 rgba(255,255,255,0.2);
    transition: transform .2s ease;
    font-size: 12px;
}
.mochila-item:hover .mochila-item-btn { transform: translateX(3px); }

.mochila-empty {
    position: relative; z-index: 2;
    text-align: center;
    padding: 32px 16px 22px;
    color: rgba(255,255,255,0.5);
    font-size: 11px; font-weight: 800;
    line-height: 1.5;
    letter-spacing: 0.1em; text-transform: uppercase;
}
.mochila-empty i {
    display: block;
    font-size: 2.4rem;
    color: rgba(249,115,22,0.55);
    margin-bottom: 14px;
}
.mochila-empty span {
    color: rgba(255,255,255,0.32);
    font-weight: 700;
}

/* =====================================================================
   FAB · Botón flotante de Mochila (lenguaje del Taller/Álbum)
   ===================================================================== */
.fab-mochila {
    position: fixed;
    right: 20px;
    width: 60px; height: 60px;
    padding: 0;
    border: none;
    background: transparent;
    cursor: pointer;
    transition: transform .25s ease;
}
.fab-mochila:hover  { transform: translateY(-3px); }
.fab-mochila:active { transform: scale(0.95); }

.fab-mochila-halo {
    position: absolute; inset: -8px;
    border-radius: 22px;
    background: radial-gradient(circle, rgba(249,115,22,0.55) 0%, transparent 65%);
    filter: blur(14px);
    pointer-events: none;
    animation: fabMochilaPulse 2.6s ease-in-out infinite;
}
@keyframes fabMochilaPulse {
    0%, 100% { opacity: 0.6; transform: scale(0.92); }
    50%      { opacity: 1;   transform: scale(1.08); }
}

.fab-mochila-core {
    position: relative; z-index: 1;
    display: flex; align-items: center; justify-content: center;
    width: 100%; height: 100%;
    border-radius: 18px;
    background: linear-gradient(160deg, #1a1a22 0%, #08080c 100%);
    border: 1px solid rgba(249,115,22,0.4);
    box-shadow:
        0 14px 30px -10px rgba(249,115,22,0.45),
        inset 0 1px 0 rgba(255,255,255,0.08),
        inset 0 0 28px rgba(249,115,22,0.14);
    color: #fb923c;
    font-size: 22px;
    overflow: hidden;
    transition: border-color .25s ease, color .25s ease, box-shadow .25s ease;
}
.fab-mochila-core::before {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(135deg, transparent 32%, rgba(249,115,22,0.16) 50%, transparent 68%);
    background-size: 250% 250%;
    animation: shineFoil 4.5s linear infinite;
    pointer-events: none;
}
.fab-mochila-core i {
    position: relative; z-index: 1;
    filter: drop-shadow(0 2px 6px rgba(249,115,22,0.6));
}
.fab-mochila:hover .fab-mochila-core {
    border-color: rgba(249,115,22,0.7);
    color: #fed7aa;
    box-shadow:
        0 18px 36px -10px rgba(249,115,22,0.6),
        inset 0 1px 0 rgba(255,255,255,0.14),
        inset 0 0 32px rgba(249,115,22,0.22);
}

.fab-mochila-badge {
    position: absolute; top: -4px; right: -4px;
    z-index: 2;
    min-width: 22px; height: 22px;
    padding: 0 6px;
    border-radius: 999px;
    display: inline-flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, #fbbf24 0%, #ea580c 100%);
    color: #1a0a00;
    font-size: 11px; font-weight: 900;
    line-height: 1;
    border: 2px solid #08080c;
    box-shadow: 0 6px 14px rgba(249,115,22,0.55);
    letter-spacing: 0.02em;
}

/* ================================================================
   MIGRADO DESDE perfil.php (bloque <style> inline)
   ================================================================ */
/* =============================================================
   PERFIL — Rediseño V4
   Paleta: zinc + orange. Jerarquía clara: identidad → progreso
   → economía. Cada bloque con label propio, nada de iconos
   sueltos sin contexto.
   ============================================================= */
.mz-perfil-shell { max-width: 1100px; margin: 0 auto; padding: 1rem 1rem 6rem; }
@media (min-width: 768px) { .mz-perfil-shell { padding: 1.5rem 2rem 6rem; } }

/* === HEADER DE IDENTIDAD (rediseñado) === */
.mz-perfil-id {
    background: linear-gradient(135deg, #ffffff 0%, #fafafa 100%);
    border: 1px solid #e5e7eb; border-radius: 1.25rem;
    padding: 1.25rem;
    box-shadow: 0 1px 3px 0 rgba(0,0,0,0.04);
    position: relative; overflow: hidden;
}
.mz-perfil-id::before {
    content: ''; position: absolute; top: -60px; right: -60px;
    width: 220px; height: 220px; border-radius: 50%;
    background: radial-gradient(circle, rgba(249,115,22,0.10), transparent 70%);
    pointer-events: none;
}
@media (min-width: 768px) { .mz-perfil-id { padding: 1.5rem 1.75rem; } }

/* Fila 1: avatar + identidad + ayuda */
.mz-id-top { display: flex; align-items: center; gap: 1rem; position: relative; z-index: 1; }

.mz-id-avatar-shell { position: relative; width: 4rem; height: 4rem; flex-shrink: 0; }
.mz-id-avatar { width: 100%; height: 100%; border-radius: 50%; overflow: hidden; position: relative; cursor: pointer; background: #f3f4f6; }
.mz-id-avatar img { width: 100%; height: 100%; object-fit: cover; }
/* El helper mz_generar_avatar_nivel emite un <div> con clases Tailwind de
   tamaño fijo (w-10, w-12...). Lo forzamos a llenar el shell para que el
   avatar respete los 64px sin importar lo que devuelva el helper. */
.mz-id-avatar > div { width: 100% !important; height: 100% !important; max-width: none !important; max-height: none !important; margin: 0 !important; }
.mz-id-avatar:hover::after {
    content: '\f303'; font-family: 'Font Awesome 6 Free'; font-weight: 900;
    position: absolute; inset: 0; background: rgba(0,0,0,0.55); color: #fff;
    display: flex; align-items: center; justify-content: center;
}
.mz-id-avatar-edit {
    position: absolute; bottom: -2px; right: -2px;
    width: 28px; height: 28px; border-radius: 50%;
    background: #18181b; border: 2px solid #fff; color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 0.68rem; cursor: pointer;
    box-shadow: 0 2px 6px rgba(0,0,0,0.18);
    transition: background .15s, transform .15s;
}
.mz-id-avatar-edit:hover { background: #f97316; transform: scale(1.1); }

/* Marco premium del avatar para planes pagos */
.mz-id-avatar-wrap--plus, .mz-id-avatar-wrap--pro { padding: 3px; border-radius: 50%; }
.mz-id-avatar-wrap--pro {
    background: linear-gradient(135deg, #94a3b8, #cbd5e1, #94a3b8);
    box-shadow: 0 4px 12px -4px rgba(0,0,0,0.15);
}
.mz-id-avatar-wrap--plus {
    background: linear-gradient(135deg, #f59e0b, #fde047, #f59e0b);
    background-size: 200% 200%;
    animation: mz-plus-shimmer 4s linear infinite;
    box-shadow: 0 4px 16px -4px rgba(245,158,11,0.45);
}
@keyframes mz-plus-shimmer { 0% { background-position: 0% 50%; } 100% { background-position: 200% 50%; } }

.mz-id-info { flex: 1; min-width: 0; }
.mz-id-name { font-size: 1.2rem; font-weight: 700; color: #111827; line-height: 1.15; margin: 0; }
@media (min-width: 768px) { .mz-id-name { font-size: 1.5rem; } }

.mz-id-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.4rem; }
.mz-id-chip {
    display: inline-flex; align-items: center; gap: 0.35rem;
    padding: 0.22rem 0.55rem; border-radius: 0.45rem;
    font-size: 0.7rem; font-weight: 600;
}
.mz-id-chip i { font-size: 0.72rem; }
.mz-id-chip--rango { background: #f3f4f6; color: #4b5563; }
.mz-id-chip--nivel { background: #18181b; color: #fbbf24; letter-spacing: 0.03em; }
.mz-id-chip--nivel strong { font-weight: 800; }
.mz-id-chip--plan-plus { background: linear-gradient(135deg,#fbbf24,#f59e0b); color: #18181b; font-weight: 700; }
.mz-id-chip--plan-pro  { background: #18181b; color: #e5e7eb; font-weight: 700; }
.mz-id-chip--plan-base { background: #f3f4f6; color: #4b5563; font-weight: 700; }

.mz-id-help {
    width: 38px; height: 38px; border-radius: 50%;
    background: #fff; border: 1px solid #e5e7eb; color: #6b7280;
    display: inline-flex; align-items: center; justify-content: center;
    cursor: pointer; flex-shrink: 0;
    transition: color .15s, border-color .15s, background .15s, transform .15s;
}
.mz-id-help:hover { color: #f97316; border-color: #fdba74; background: #fff7ed; transform: scale(1.05); }

/* Fila 2: barra XP con header y footer claros */
.mz-id-xp-block {
    margin-top: 1.1rem;
    padding: 0.85rem 1rem;
    background: #fafafa;
    border-radius: 0.85rem;
    border: 1px solid #f3f4f6;
    position: relative; z-index: 1;
}
.mz-id-xp-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 0.5rem; gap: 0.5rem; }
.mz-id-xp-title { font-size: 0.65rem; font-weight: 700; color: #6b7280; text-transform: uppercase; letter-spacing: 0.08em; }
.mz-id-xp-title strong { color: #111827; }
.mz-id-xp-pct { font-size: 0.78rem; font-weight: 700; color: #ea580c; tabular-nums: tabular-nums; }
.mz-id-bar { height: 9px; background: #e5e7eb; border-radius: 999px; overflow: hidden; }
.mz-id-bar > div {
    height: 100%;
    background: linear-gradient(90deg, #f97316, #fbbf24);
    border-radius: 999px; transition: width 1s;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.18);
}
.mz-id-xp-foot { display: flex; justify-content: space-between; margin-top: 0.45rem; font-size: 0.68rem; color: #9ca3af; font-weight: 600; tabular-nums: tabular-nums; }
.mz-id-xp-foot strong { color: #18181b; font-weight: 700; }

.mz-id-money-tile {
    flex: 1; display: flex; align-items: center; gap: 0.85rem;
    padding: 0.75rem 1rem; border-radius: 0.85rem;
    background: linear-gradient(135deg, #fff7ed 0%, #ffffff 70%);
    border: 1px solid #fed7aa;
}
.mz-id-money-coin {
    width: 40px; height: 40px; border-radius: 50%;
    background: linear-gradient(135deg, #f97316, #ea580c);
    color: #fff; display: inline-flex; align-items: center; justify-content: center;
    font-size: 1.05rem; flex-shrink: 0;
    box-shadow: 0 4px 10px -3px rgba(249,115,22,0.45),
                inset 0 -2px 4px rgba(0,0,0,0.15),
                inset 0 2px 4px rgba(255,255,255,0.25);
}
.mz-id-money-info { flex: 1; min-width: 0; }
.mz-id-money-label { font-size: 0.6rem; font-weight: 700; color: #c2410c; text-transform: uppercase; letter-spacing: 0.1em; display: block; }
.mz-id-money-value { font-size: 1.2rem; font-weight: 700; color: #18181b; line-height: 1.15; display: block; tabular-nums: tabular-nums; margin-top: 0.1rem; }

/* === TABS principales: ícono + nombre SIEMPRE === */
.mz-perfil-tabs {
    position: sticky; top: 0; z-index: 30;
    background: #f3f4f6; border-radius: 0.85rem;
    margin: 1.25rem 0 1.25rem; padding: 0.3rem;
    display: flex; gap: 0.15rem;
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    box-shadow: inset 0 1px 2px 0 rgba(0,0,0,0.04);
    scrollbar-width: none;
}
.mz-perfil-tabs::-webkit-scrollbar { display: none; }
.mz-perfil-tab {
    position: relative;
    flex: 1 1 0; padding: 0.6rem 0.7rem;
    background: transparent; border: none; border-radius: 0.6rem;
    font-size: 0.75rem; font-weight: 600;
    color: #6b7280; cursor: pointer;
    transition: color .18s, background-color .18s, box-shadow .18s;
    white-space: nowrap; min-height: 40px;
    display: inline-flex; align-items: center; gap: 0.4rem; justify-content: center;
}
.mz-perfil-tab i { font-size: 0.78rem; opacity: 0.85; }
.mz-perfil-tab:hover { color: #111827; }
.mz-perfil-tab.is-active {
    background: #fff; color: #ea580c;
    box-shadow: 0 1px 3px 0 rgba(0,0,0,0.1), 0 1px 2px -1px rgba(0,0,0,0.05);
    font-weight: 700;
}
.mz-perfil-tab.is-active i { opacity: 1; }
/* Aviso de misiones por reclamar: badge con número + glow sutil en la pestaña
   Misiones, visible desde cualquier sub-tab. */
.mz-tab-dot {
    position: absolute; top: 2px; right: 5px;
    min-width: 15px; height: 15px; padding: 0 4px;
    border-radius: 999px; background: #f97316; color: #fff;
    font-size: 0.56rem; font-weight: 800; line-height: 15px; text-align: center;
    box-shadow: 0 0 0 2px #f3f4f6;
}
.mz-perfil-tab.is-active .mz-tab-dot { box-shadow: 0 0 0 2px #fff; }
.mz-tab-alerta:not(.is-active) {
    color: #ea580c;
    animation: mz-tab-glow 1.9s ease-in-out infinite;
}
@keyframes mz-tab-glow {
    0%, 100% { box-shadow: inset 0 0 0 0 rgba(249,115,22,0); }
    50%      { box-shadow: inset 0 0 0 1.5px rgba(249,115,22,0.45); }
}
@media (prefers-reduced-motion: reduce) { .mz-tab-alerta:not(.is-active) { animation: none; } }
@media (max-width: 480px) {
    .mz-perfil-tab { padding: 0.55rem 0.35rem; font-size: 0.68rem; gap: 0.28rem; }
    .mz-perfil-tab i { font-size: 0.78rem; }
}
.mz-perfil-panel { display: none; }
.mz-perfil-panel.is-active { display: block; }

/* === Tarjetas-sección genéricas (Habilidades, Tu actividad, etc.) === */
.mz-section-card {
    background: #fff; border: 1px solid #f3f4f6; border-radius: 1.25rem;
    padding: 1.25rem;
    box-shadow: 0 1px 2px 0 rgba(0,0,0,0.05);
}
@media (min-width: 768px) { .mz-section-card { padding: 1.5rem; } }
.mz-section-head { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1rem; }
.mz-section-title { font-size: 1rem; font-weight: 700; color: #111827; margin: 0; }
.mz-section-meta  { font-size: 0.7rem; color: #9ca3af; font-weight: 600; }

/* === Habilidades (compacto: ícono lateral + barra) === */
.mz-skills-grid {
    display: grid; gap: 0.6rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 768px) { .mz-skills-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.85rem; } }
.mz-skill-cell {
    display: flex; align-items: center; gap: 0.6rem;
    padding: 0.55rem 0.65rem;
    background: #fafafa;
    border: 1px solid #f3f4f6;
    border-radius: 0.7rem;
}
.mz-skill-icon {
    width: 30px; height: 30px; border-radius: 0.5rem;
    display: inline-flex; align-items: center; justify-content: center;
    color: #fff; font-size: 0.78rem; flex-shrink: 0;
}
.mz-skill-info { flex: 1; min-width: 0; }
.mz-skill-name { font-size: 0.62rem; font-weight: 700; color: #6b7280; text-transform: uppercase; letter-spacing: 0.05em; display: block; margin-bottom: 0.2rem; }
.mz-skill-bar-row { display: flex; align-items: center; gap: 0.45rem; }
.mz-skill-bar { flex: 1; height: 4px; background: #e5e7eb; border-radius: 999px; overflow: hidden; }
.mz-skill-bar > div { height: 100%; border-radius: 999px; transition: width 1s; }
.mz-skill-num { font-size: 0.72rem; font-weight: 700; color: #111827; tabular-nums: tabular-nums; min-width: 22px; text-align: right; }
/* Celulares muy chicos (<380px): mantenemos las 2 columnas pero achicamos la
   celda (ícono, textos, padding, gaps) para que entren sin desbordarse. */
@media (max-width: 380px) {
    .mz-skills-grid { gap: 0.4rem; }
    .mz-skill-cell { padding: 0.4rem 0.45rem; gap: 0.4rem; }
    .mz-skill-icon { width: 24px; height: 24px; font-size: 0.64rem; border-radius: 0.4rem; }
    .mz-skill-name { font-size: 0.54rem; margin-bottom: 0.1rem; letter-spacing: 0.03em; }
    .mz-skill-bar-row { gap: 0.3rem; }
    .mz-skill-num { font-size: 0.62rem; min-width: 15px; }
}

/* === Nav cards (reemplazan "Tu actividad"): botones para misiones, tienda y garage === */
.mz-nav-grid { display: grid; gap: 0.65rem; grid-template-columns: 1fr; }
.mz-nav-card {
    display: flex; align-items: center; gap: 0.85rem;
    padding: 0.85rem 0.95rem;
    background: #fff; border: 1px solid #f3f4f6;
    border-radius: 0.95rem;
    cursor: pointer; text-align: left;
    transition: border-color .15s, transform .15s, box-shadow .15s;
    box-shadow: 0 1px 2px 0 rgba(0,0,0,0.03);
    width: 100%; font-family: inherit;
}
.mz-nav-card:hover {
    border-color: #fdba74;
    transform: translateY(-2px);
    box-shadow: 0 8px 18px -8px rgba(249,115,22,0.22);
}
.mz-nav-card-icon {
    width: 44px; height: 44px; border-radius: 0.7rem;
    display: inline-flex; align-items: center; justify-content: center;
    color: #fff; font-size: 1rem; flex-shrink: 0;
    box-shadow: 0 4px 10px -3px rgba(0,0,0,0.18);
}
.mz-nav-card-body { flex: 1; min-width: 0; }
.mz-nav-card-title {
    font-size: 0.92rem; font-weight: 700; color: #111827;
    margin: 0; line-height: 1.2;
    display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap;
}
.mz-nav-card-badge {
    font-size: 0.6rem; font-weight: 700;
    background: #ea580c; color: #fff;
    padding: 0.1rem 0.45rem; border-radius: 999px;
    line-height: 1.3; tabular-nums: tabular-nums;
}
.mz-nav-card-badge--neutral { background: #f3f4f6; color: #4b5563; }
.mz-nav-card-desc { font-size: 0.76rem; color: #6b7280; margin: 0.2rem 0 0; line-height: 1.3; }
.mz-nav-card-desc strong { color: #18181b; font-weight: 700; tabular-nums: tabular-nums; }
.mz-nav-card-arrow {
    color: #d1d5db; font-size: 0.9rem; flex-shrink: 0;
    transition: color .15s, transform .15s;
}
.mz-nav-card:hover .mz-nav-card-arrow { color: #f97316; transform: translateX(3px); }

/* === HERO DE LA TIENDA — blanco con naranja sutil (mismo lenguaje que Garage) === */
.mz-tienda-hero {
    background: #fff; border: 1px solid #e5e7eb;
    border-radius: 1.25rem; padding: 1.25rem;
    color: #18181b; margin-bottom: 1.25rem;
    display: grid; gap: 1rem;
    grid-template-columns: 1fr;
    box-shadow: 0 1px 3px 0 rgba(0,0,0,0.04);
    position: relative; overflow: hidden;
}
.mz-tienda-hero::before {
    content: ''; position: absolute; top: -50px; right: -50px;
    width: 200px; height: 200px; border-radius: 50%;
    background: radial-gradient(circle, rgba(249,115,22,0.10), transparent 70%);
    pointer-events: none;
}
@media (min-width: 768px) {
    .mz-tienda-hero { grid-template-columns: 1fr auto; align-items: center; padding: 1.5rem 1.75rem; }
}
.mz-tienda-hero-text { position: relative; z-index: 1; }
.mz-tienda-hero-title {
    font-size: 1.4rem; font-weight: 800; margin: 0 0 0.35rem;
    color: #111827;
    letter-spacing: -0.01em; line-height: 1.1;
    display: inline-flex; align-items: center; gap: 0.55rem;
}
.mz-tienda-hero-title-icon {
    width: 36px; height: 36px; border-radius: 0.6rem;
    background: linear-gradient(135deg, #fff7ed, #ffedd5);
    border: 1px solid #fed7aa;
    color: #ea580c; font-size: 0.95rem;
    display: inline-flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
@media (min-width: 768px) {
    .mz-tienda-hero-title { font-size: 1.7rem; }
    .mz-tienda-hero-title-icon { width: 42px; height: 42px; font-size: 1.1rem; }
}
.mz-tienda-hero-sub { font-size: 0.8rem; color: #6b7280; line-height: 1.45; margin: 0; max-width: 480px; font-weight: 500; }

/* Saldo en card naranja suave (mismo tile que el header del perfil) */
.mz-tienda-hero-money {
    position: relative; z-index: 1;
    display: flex; flex-direction: column; gap: 0.15rem;
    padding: 0.75rem 1rem;
    background: linear-gradient(135deg, #fff7ed 0%, #ffffff 70%);
    border: 1px solid #fed7aa;
    border-radius: 0.85rem;
    align-items: flex-start;
}
.mz-tienda-hero-money-label { font-size: 0.6rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: #c2410c; }
.mz-tienda-hero-money-value { font-size: 1.5rem; font-weight: 700; color: #18181b; line-height: 1; display: inline-flex; align-items: center; gap: 0.4rem; tabular-nums: tabular-nums; }
.mz-tienda-hero-money-value i { color: #f97316; font-size: 0.95rem; }
.mz-tienda-hero-link {
    font-size: 0.7rem; font-weight: 700;
    color: #ea580c;
    background: #fff; border: 1px solid #fed7aa;
    cursor: pointer; padding: 0.35rem 0.65rem;
    border-radius: 0.5rem;
    margin-top: 0.5rem;
    display: inline-flex; align-items: center; gap: 0.35rem;
    transition: background .15s, color .15s, transform .15s, border-color .15s;
}
.mz-tienda-hero-link:hover { background: #fff7ed; border-color: #fdba74; transform: translateY(-1px); }

/* === Pack cards (sobres) — Layout HORIZONTAL en mobile, vertical en desktop ===
   Mobile: img izq (88px fijo) | info der → los 3 sobres entran en una pantalla.
   La imagen NO crece con el body para evitar que se solape con el texto. */
.mz-pack-grid {
    display: grid; gap: 0.7rem;
    grid-template-columns: 1fr;
    margin-bottom: 0;
}
@media (min-width: 900px) { .mz-pack-grid { grid-template-columns: repeat(3, 1fr); gap: 1rem; } }

.mz-pack {
    position: relative;
    background: #fff; border: 1px solid #f3f4f6; border-radius: 1rem;
    padding: 0.8rem;
    display: flex; gap: 0.85rem;
    align-items: flex-start;
    box-shadow: 0 1px 2px 0 rgba(0,0,0,0.04);
    transition: border-color .15s, transform .15s, box-shadow .15s;
}
@media (min-width: 900px) {
    .mz-pack {
        flex-direction: column; align-items: stretch;
        padding: 1.1rem;
    }
}
.mz-pack:hover { border-color: #fdba74; box-shadow: 0 8px 22px -8px rgba(249,115,22,0.22); transform: translateY(-2px); }

/* Pack destacado (Premium): ring dorado */
.mz-pack--featured {
    border-color: #fbbf24;
    box-shadow: 0 4px 14px -6px rgba(251,191,36,0.3), 0 0 0 1px #fbbf24;
}
.mz-pack--featured:hover { box-shadow: 0 12px 28px -10px rgba(251,191,36,0.45), 0 0 0 1px #fbbf24; }
.mz-pack-ribbon {
    position: absolute; top: -8px; right: 0.85rem; z-index: 2;
    background: linear-gradient(135deg, #f59e0b, #d97706);
    color: #fff; font-size: 0.6rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.08em;
    padding: 0.22rem 0.6rem; border-radius: 999px;
    box-shadow: 0 4px 10px -3px rgba(245,158,11,0.55);
}

/* Imagen del sobre — tamaño fijo en mobile, cuadrada en desktop */
.mz-pack-img-wrap {
    position: relative;
    flex: 0 0 88px;
    width: 88px; height: 88px;
    background: radial-gradient(circle at 50% 40%, #fff7ed 0%, #fafafa 60%, #f3f4f6 100%);
    border-radius: 0.75rem; overflow: hidden;
    display: flex; align-items: center; justify-content: center;
}
@media (min-width: 900px) {
    .mz-pack-img-wrap {
        flex: 0 0 auto;
        width: 100%; height: auto;
        aspect-ratio: 1 / 1;
        margin-bottom: 0.25rem;
    }
}
.mz-pack--featured .mz-pack-img-wrap {
    background: radial-gradient(circle at 50% 40%, #fef3c7 0%, #fffbeb 60%, #fef3c7 100%);
}
.mz-pack-img {
    width: 90%; height: 90%; object-fit: contain;
    transition: transform .2s;
    filter: drop-shadow(0 4px 10px rgba(0,0,0,0.12));
}
.mz-pack:hover .mz-pack-img { transform: scale(1.08); }
.mz-pack-img-fallback {
    width: 44px; height: 44px; border-radius: 50%;
    background: #fff; border: 2px dashed #d1d5db; color: #9ca3af;
    align-items: center; justify-content: center; font-size: 1.1rem;
    display: none;
}
.mz-pack-badge {
    position: absolute; top: 0.3rem; left: 0.3rem;
    background: #18181b; color: #fff;
    padding: 0.18rem 0.45rem; border-radius: 999px;
    font-size: 0.58rem; font-weight: 700;
    display: inline-flex; align-items: center; gap: 0.25rem;
    box-shadow: 0 2px 6px -1px rgba(0,0,0,0.3);
}

/* Body del pack (derecha en mobile, abajo en desktop) */
.mz-pack-body {
    flex: 1 1 auto; min-width: 0;
    display: flex; flex-direction: column;
    justify-content: space-between; gap: 0.5rem;
}
.mz-pack-titlerow { display: flex; justify-content: space-between; align-items: center; gap: 0.4rem; }
.mz-pack-stars { display: inline-flex; gap: 0.1rem; font-size: 0.7rem; line-height: 1; flex-shrink: 0; }
.mz-pack-stars .filled  { color: #f59e0b; }
.mz-pack-stars .empty   { color: #e5e7eb; }
.mz-pack-name { font-size: 1rem; font-weight: 700; color: #111827; line-height: 1.1; margin: 0; }
@media (min-width: 900px) { .mz-pack-name { font-size: 1.2rem; } }
.mz-pack-desc {
    font-size: 0.74rem; color: #4b5563; margin: 0.15rem 0 0; line-height: 1.35;
    font-weight: 500;
}
.mz-pack-odds {
    font-size: 0.68rem; color: #6b7280; margin: 0.3rem 0 0;
    display: inline-flex; align-items: center; gap: 0.35rem;
    font-weight: 500; line-height: 1.3;
}
.mz-pack-odds i { color: #f59e0b; font-size: 0.62rem; }
@media (min-width: 900px) {
    .mz-pack-desc { font-size: 0.82rem; }
    .mz-pack-odds {
        font-size: 0.75rem;
        margin-top: 0.5rem; padding-top: 0.5rem;
        border-top: 1px dashed #e5e7eb;
    }
}

/* === Banner upgrade plan (cross-sell sutil a usuarios/Socios Base) === */
.mz-upgrade-banner {
    background: linear-gradient(135deg,#fffbeb 0%, #fff 70%);
    border: 1px solid #fde68a;
    border-radius: 1rem; padding: 1rem 1.25rem;
    display: flex; align-items: center; gap: 1rem;
    box-shadow: 0 1px 2px 0 rgba(0,0,0,0.04);
}
.mz-upgrade-icon {
    width: 44px; height: 44px; border-radius: 50%;
    background: linear-gradient(135deg,#fbbf24,#f59e0b);
    color: #fff; display: inline-flex; align-items: center; justify-content: center;
    font-size: 1.1rem; flex-shrink: 0;
    box-shadow: 0 4px 12px -3px rgba(245,158,11,0.5);
}
.mz-upgrade-body { flex: 1; min-width: 0; }
.mz-upgrade-body h3 { font-size: 0.9rem; font-weight: 700; color: #111827; margin: 0 0 0.15rem; }
.mz-upgrade-body p  { font-size: 0.75rem; color: #6b7280; margin: 0; line-height: 1.4; }
.mz-upgrade-cta {
    background: #18181b; color: #fbbf24;
    padding: 0.6rem 1rem; border-radius: 0.6rem;
    font-size: 0.75rem; font-weight: 700; white-space: nowrap;
    display: inline-flex; align-items: center; gap: 0.4rem;
    text-decoration: none; transition: background .15s, transform .15s;
    flex-shrink: 0;
}
.mz-upgrade-cta:hover { background: #27272a; transform: translateY(-1px); }
@media (max-width: 640px) {
    .mz-upgrade-banner { flex-wrap: wrap; }
    .mz-upgrade-cta { width: 100%; justify-content: center; }
}

.mz-pack-cta {
    margin-top: 0.6rem; display: flex; justify-content: space-between; align-items: center;
    width: 100%; padding: 0.55rem 0.75rem; border-radius: 0.6rem;
    background: linear-gradient(135deg, #f59e0b, #ea580c); color: #fff; font-weight: 700;
    font-size: 0.72rem; gap: 0.4rem;
    border: none; cursor: pointer; transition: background .15s, transform .15s;
}
@media (min-width: 900px) {
    .mz-pack-cta { margin-top: 1rem; padding: 0.85rem 1.1rem; font-size: 0.8rem; border-radius: 0.75rem; }
}
.mz-pack-cta:hover { background: linear-gradient(135deg, #d97706, #c2410c); transform: translateY(-1px); }
.mz-pack--featured .mz-pack-cta { background: linear-gradient(135deg, #f59e0b, #ea580c); }
.mz-pack--featured .mz-pack-cta:hover { background: linear-gradient(135deg, #d97706, #c2410c); }
.mz-pack-cta:disabled { background: #e5e7eb; color: #9ca3af; cursor: not-allowed; transform: none; }
.mz-pack-cta:disabled:hover { background: #e5e7eb; }
.mz-pack--featured .mz-pack-cta:disabled { background: #e5e7eb; color: #9ca3af; }
.mz-pack-price { background: rgba(255,255,255,0.15); padding: 0.25rem 0.55rem; border-radius: 0.45rem; font-size: 0.75rem; display: inline-flex; align-items: center; gap: 0.3rem; font-weight: 700; tabular-nums: tabular-nums; }
.mz-pack-cta:disabled .mz-pack-price { background: rgba(0,0,0,0.05); }

/* === SURTIDOR (recarga de combustible con MP) — paleta zinc + orange === */
.mz-surtidor {
    background: #fff; border: 1px solid #f3f4f6; border-radius: 1.25rem;
    padding: 1.25rem; box-shadow: 0 1px 2px 0 rgba(0,0,0,0.04);
}
@media (min-width: 768px) { .mz-surtidor { padding: 1.5rem; } }
.mz-surtidor-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.25rem; }
.mz-surtidor-deco { font-size: 1.5rem; color: #fed7aa; }
.mz-surtidor-grid { display: grid; gap: 0.75rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { .mz-surtidor-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.mz-mp-pack {
    background: #fafafa; border: 1px solid #f3f4f6; border-radius: 0.85rem;
    padding: 0.85rem;
    display: flex; align-items: center; gap: 0.75rem;
    transition: border-color .15s, background-color .15s, transform .15s;
}
.mz-mp-pack:hover { border-color: #fdba74; background: #fff7ed; transform: translateY(-1px); }
.mz-mp-icon {
    width: 42px; height: 42px; border-radius: 0.65rem;
    background: linear-gradient(135deg, #18181b, #27272a);
    color: #fbbf24;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 1rem; flex-shrink: 0;
    box-shadow: 0 3px 8px -2px rgba(0,0,0,0.25);
}
.mz-mp-info { flex: 1; min-width: 0; }
.mz-mp-name { font-size: 0.62rem; font-weight: 700; color: #6b7280; text-transform: uppercase; letter-spacing: 0.08em; margin: 0; }
.mz-mp-cant { font-size: 1.05rem; font-weight: 700; color: #111827; line-height: 1.1; margin: 0.15rem 0 0; tabular-nums: tabular-nums; display: flex; align-items: baseline; gap: 0.25rem; }
.mz-mp-cant i { color: #f97316; font-size: 0.7rem; }
.mz-mp-cant small { font-size: 0.58rem; color: #9ca3af; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; }
.mz-mp-btn {
    background: linear-gradient(135deg, #f97316, #ea580c);
    color: #fff; font-weight: 700; font-size: 0.78rem;
    padding: 0.55rem 0.85rem; border-radius: 0.55rem;
    border: none; cursor: pointer;
    transition: background .15s, transform .15s, box-shadow .15s;
    white-space: nowrap; flex-shrink: 0; tabular-nums: tabular-nums;
    box-shadow: 0 4px 10px -3px rgba(249,115,22,0.4);
}
.mz-mp-btn:hover { background: linear-gradient(135deg, #ea580c, #c2410c); transform: translateY(-1px); box-shadow: 0 6px 14px -4px rgba(249,115,22,0.55); }

/* Pulso para llamar la atención al Surtidor cuando se llega vía "Comprar combustible". */
.mz-pulse-attention {
    animation: mz-pulse-attention 1.4s ease-out 1;
}
@keyframes mz-pulse-attention {
    0%   { box-shadow: 0 0 0 0 rgba(249,115,22,0.5); }
    40%  { box-shadow: 0 0 0 14px rgba(249,115,22,0); }
    100% { box-shadow: 0 0 0 0 rgba(249,115,22,0); }
}

/* === GARAGE (panel del álbum, estética clara) === */
.mz-garage-head {
    background: #fff; border: 1px solid #f3f4f6; border-radius: 1.25rem;
    padding: 1.25rem; margin-bottom: 1rem;
    display: flex; flex-direction: column; gap: 1rem;
    box-shadow: 0 1px 2px 0 rgba(0,0,0,0.05);
}
@media (min-width: 768px) {
    .mz-garage-head { flex-direction: row; align-items: center; gap: 2rem; }
    .mz-garage-head-text { flex: 1; }
    .mz-garage-progress  { flex: 1; max-width: 320px; }
}
.mz-garage-progress-meta { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 0.4rem; }
.mz-garage-progress-bar  { height: 8px; background: #f3f4f6; border-radius: 999px; overflow: hidden; margin-bottom: 0.25rem; }
.mz-garage-progress-bar > div { height: 100%; background: linear-gradient(90deg,#f97316,#fbbf24); border-radius: 999px; transition: width 1s; }

/* === Tabs de serie del Garage — con hint de "más series" === */
.mz-garage-tabs-wrap {
    position: relative;
    margin-bottom: 0.6rem;
}
/* Fade indicador en el borde derecho — sugiere que hay más para scrollear */
.mz-garage-tabs-wrap::after {
    content: ''; position: absolute;
    top: 0; right: 0; bottom: 0; width: 32px;
    background: linear-gradient(90deg, rgba(243,244,246,0), rgba(243,244,246,1) 60%);
    pointer-events: none; border-radius: 0 0.85rem 0.85rem 0;
    transition: opacity .2s;
}
.mz-garage-tabs-wrap[data-end="true"]::after { opacity: 0; }

.mz-garage-tabs {
    background: #f3f4f6; border-radius: 0.85rem;
    padding: 0.3rem;
    display: flex; gap: 0.15rem;
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    box-shadow: inset 0 1px 2px 0 rgba(0,0,0,0.04);
    scrollbar-width: none;
}
.mz-garage-tabs::-webkit-scrollbar { display: none; }

.mz-garage-tab {
    flex: 0 0 auto; padding: 0.55rem 0.8rem;
    background: transparent !important; border: none !important; border-radius: 0.6rem !important;
    font-size: 0.74rem; font-weight: 600; color: #6b7280 !important;
    cursor: pointer; transition: color .18s, background-color .18s, box-shadow .18s;
    white-space: nowrap; min-height: 38px;
    display: inline-flex; align-items: center; gap: 0.35rem; justify-content: center;
    box-shadow: none !important;
}
.mz-garage-tab:hover { color: #111827 !important; }
.mz-garage-tab.tab-active {
    background: #fff !important; color: #ea580c !important;
    box-shadow: 0 1px 3px 0 rgba(0,0,0,0.08) !important;
    font-weight: 700;
}
.mz-garage-tab-count {
    font-size: 0.6rem; font-weight: 700; padding: 0.08rem 0.4rem;
    background: rgba(0,0,0,0.06); border-radius: 999px;
    margin-left: 0.15rem; tabular-nums: tabular-nums;
}
.mz-garage-tab.tab-active .mz-garage-tab-count { background: #fff7ed; color: #ea580c; }

/* Hint debajo de los tabs: número de series + flecha animada */
.mz-garage-tabs-hint {
    display: flex; align-items: center; justify-content: center;
    gap: 0.4rem;
    font-size: 0.66rem; color: #9ca3af; font-weight: 600;
    margin-bottom: 0.85rem;
}
.mz-garage-tabs-hint i { animation: mz-arrow-bob 1.5s ease-in-out infinite; color: #f97316; }
@keyframes mz-arrow-bob { 0%,100% { transform: translateX(0); } 50% { transform: translateX(4px); } }

/* Wrapper de la grilla del álbum (fondo claro) */
.mz-garage-grid-wrap {
    background: #fff; border: 1px solid #f3f4f6; border-radius: 1.25rem;
    padding: 1rem;
    box-shadow: 0 1px 2px 0 rgba(0,0,0,0.05);
}
@media (min-width: 768px) { .mz-garage-grid-wrap { padding: 1.5rem; } }

/* Overrides defensivos sobre clases viejas que se reusan adentro del wrapper.
   El JS de "volar carta al álbum" depende de .album-grid-content/.album-slot,
   no podemos renombrarlas. Pero forzamos fondo transparente para que la
   estética oscura vieja no se filtre. */
.mz-garage-grid-wrap .album-grid-content { background: transparent; padding: 0; }
.mz-garage-grid-wrap .album-grid-scroll  { background: transparent; max-height: none; overflow: visible; }

/* === Cerrar sesión — botón sobrio al final del perfil === */
.mz-logout-section {
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid #f3f4f6;
    text-align: center;
}
.mz-logout-btn {
    display: inline-flex; align-items: center; gap: 0.55rem;
    padding: 0.6rem 1.25rem;
    background: #fff; border: 1px solid #e5e7eb;
    color: #6b7280; font-size: 0.8rem; font-weight: 600;
    border-radius: 0.7rem; cursor: pointer;
    transition: color .15s, border-color .15s, background .15s, transform .15s;
    font-family: inherit;
}
.mz-logout-btn:hover {
    color: #dc2626; border-color: #fecaca; background: #fef2f2;
    transform: translateY(-1px);
}
.mz-logout-btn i { font-size: 0.85rem; }


/* ================================================================
   MIGRADO DESDE u.php (perfil PUBLICO — namespace .up-*)
   ================================================================ */
/* Layout específico del perfil público — lo dejamos inline porque es chico
   y self-contained (no se reusa en ninguna otra página). */
.up-hero {
    background: linear-gradient(135deg, #18181b 0%, #27272a 60%, #18181b 100%);
    border-radius: 24px;
    padding: 32px 28px;
    color: white;
    position: relative;
    overflow: hidden;
}
.up-hero::before {
    content: ''; position: absolute; inset: 0;
    background: radial-gradient(circle at 20% 0%, rgba(249,115,22,0.18) 0%, transparent 55%);
    pointer-events: none;
}
.up-hero-inner { position: relative; z-index: 1; }

.up-stat-tile {
    background: white; border: 1px solid #e5e7eb; border-radius: 18px;
    padding: 18px 16px; text-align: center;
    transition: border-color .15s ease, transform .15s ease;
}
.up-stat-tile:hover { border-color: #fb923c; transform: translateY(-2px); }
.up-stat-value { font-size: 28px; font-weight: 900; color: #18181b; line-height: 1; margin-bottom: 6px; }
.up-stat-label { font-size: 9px; font-weight: 800; color: #6b7280; text-transform: uppercase; letter-spacing: 0.18em; }
.up-stat-icon  { font-size: 18px; color: #fb923c; margin-bottom: 8px; }

.up-section {
    background: white; border: 1px solid #e5e7eb; border-radius: 24px;
    padding: 24px 22px;
}
.up-section-title {
    font-size: 11px; font-weight: 900; color: #6b7280;
    text-transform: uppercase; letter-spacing: 0.22em;
    display: flex; align-items: center; gap: 10px;
    margin-bottom: 18px;
}
.up-section-title i { color: #fb923c; font-size: 14px; }
.up-section-title .count { margin-left: auto; color: #18181b; font-weight: 900; }

/* Cartas — slider de páginas 3 columnas × 4 filas (12 slots/página). Mismo
   formato que el perfil propio para mantener coherencia visual. La grilla
   y los estilos de carta vienen de perfil.css (.album-grid-3x5,
   .album-slot, .album-card-mini, .album-slot-empty). Acá solo el wrapper
   del slider y la navegación. */
.up-cards-wrap { position: relative; }
.up-cards-slider {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -ms-overflow-style: none;
    scrollbar-width: none;
}
.up-cards-slider::-webkit-scrollbar { display: none; }
.up-cards-page {
    flex: 0 0 100%;
    min-width: 0;
    scroll-snap-align: start;
}
/* En desktop limitamos el ancho de la grilla para que las cartas no se
   estiren a un tamaño exagerado (cada slot tiene aspect-ratio 1024/1526
   y a 350px de ancho terminan midiendo ~520px de alto = 4 filas inmensas). */
.up-cards-page > .album-grid-3x5 { width: 100%; margin: 0 auto; }
@media (min-width: 768px) {
    .up-cards-page > .album-grid-3x5 { max-width: 560px; }
}
/* En u.php las cartas son meramente visuales — no abren modal como en
   perfil propio. Sacamos el cursor: pointer + hover/active para no
   sugerir interactividad que no existe. */
.up-cards-page .album-card-mini { cursor: default; }
.up-cards-page .album-card-mini.album-card--unlocked:hover {
    transform: none;
    box-shadow: none;
}
.up-cards-page .album-card-mini.album-card--unlocked:active { transform: none; }
/* Flechas de navegación del slider */
.up-cards-nav {
    position: absolute; top: 50%; transform: translateY(-50%);
    width: 38px; height: 38px; border-radius: 999px;
    background: rgba(24,24,27,0.85); color: white; border: 0;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; z-index: 2;
    transition: background .15s ease, opacity .15s ease;
    box-shadow: 0 4px 14px rgba(0,0,0,0.25);
}
.up-cards-nav:hover { background: #18181b; }
.up-cards-nav:disabled { opacity: 0; pointer-events: none; }
.up-cards-nav--prev { left: -8px; }
.up-cards-nav--next { right: -8px; }
@media (max-width: 640px) {
    .up-cards-nav--prev { left: 4px; }
    .up-cards-nav--next { right: 4px; }
}
.up-cards-dots {
    display: flex; justify-content: center; gap: 6px;
    margin-top: 14px;
}
.up-cards-dot {
    width: 7px; height: 7px; border-radius: 999px;
    background: #e5e7eb; cursor: pointer;
    transition: background .15s ease, width .15s ease;
}
.up-cards-dot.is-active { background: #fb923c; width: 18px; }

/* Hilos recientes */
.up-hilo-row {
    display: block; padding: 12px 0; border-bottom: 1px solid #f3f4f6;
    transition: background .15s ease;
}
.up-hilo-row:last-child { border-bottom: 0; }
.up-hilo-row:hover { background: #fafafa; }
.up-hilo-titulo { font-size: 14px; font-weight: 700; color: #18181b; line-height: 1.3; margin-bottom: 4px; }
.up-hilo-titulo:hover { color: #f97316; }
.up-hilo-meta   { font-size: 11px; color: #6b7280; font-weight: 500; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.up-hilo-cat    { padding: 2px 8px; border-radius: 6px; color: white; font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.1em; }


/* ================================================================
   GACHA · SHOW DE APERTURA (Phobies-style, 5 actos)
   Overlay único #mz-pack-show. Todo transform/opacity para perf
   mobile (compositor-only). Sin nuevas arbitrary values Tailwind.
   ================================================================ */

.mz-pack-show {
    position: fixed; inset: 0;
    z-index: 10000;
    overflow: hidden;
    pointer-events: auto;
    background: #050505;
    --tier-color: #f97316;
    --tier-glow:  rgba(249,115,22,0.55);
    display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.mz-pack-show.hidden { display: none !important; }

/* Vignette radial — más oscura en bordes para enfocar al centro */
.mz-pack-vignette {
    position: absolute; inset: 0; z-index: 1;
    background:
        radial-gradient(ellipse at center, rgba(5,5,5,0) 0%, rgba(5,5,5,0.55) 55%, rgba(0,0,0,0.95) 100%),
        radial-gradient(circle at 50% 45%, var(--tier-glow) 0%, transparent 45%);
    transition: opacity .4s ease;
    pointer-events: none;
}
.mz-pack-show[data-fase="anticipacion"] .mz-pack-vignette { animation: vigPulse 1s ease-out both; }
@keyframes vigPulse {
    0%   { opacity: 0; }
    100% { opacity: 1; }
}

/* Flash full-screen para el estallido */
.mz-pack-flash {
    position: absolute; inset: 0; z-index: 80;
    background: #fff;
    opacity: 0;
    pointer-events: none;
    will-change: opacity;
}
.mz-pack-flash.go {
    animation: flashBurst .42s cubic-bezier(.18,.89,.32,1.28) both;
}
@keyframes flashBurst {
    0%   { opacity: 0; }
    18%  { opacity: 1; }
    100% { opacity: 0; }
}

/* Close & Skip */
.mz-pack-close, .mz-pack-skip {
    position: absolute; top: 16px; z-index: 90;
    width: 38px; height: 38px;
    border-radius: 9999px;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.15);
    color: #fff; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 13px;
    /* Sin backdrop-filter: estos botones quedan sobre la escena animada todo
       el show y el blur obligaba a re-blurear el fondo en cada frame. */
    transition: background .15s ease, transform .15s ease;
}
.mz-pack-close:hover, .mz-pack-skip:hover { background: rgba(255,255,255,0.15); }
.mz-pack-close { right: 16px; }
.mz-pack-skip  { right: 64px; width: auto; padding: 0 12px; gap: 6px; font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.mz-pack-skip.hidden { display: none; }

/* Shake host: aplicar .shake-XX para sacudir solo el stage (no toda la pantalla
   incluyendo el flash/vignette que deben quedar quietos para no marear más). */
.mz-pack-shake-host {
    position: relative; z-index: 10;
    width: 100%; max-width: 480px;
    flex: 1; display: flex; align-items: center; justify-content: center;
    will-change: transform;
}

.mz-pack-shake-host.shake-soft   { animation: shake1 .25s cubic-bezier(.2,.8,.2,1) both; }
.mz-pack-shake-host.shake-hard   { animation: shake2 .32s cubic-bezier(.2,.8,.2,1) both; }
@keyframes shake1 {
    0% { transform: translate(0,0); }
    20% { transform: translate(-6px,3px) rotate(-0.4deg); }
    40% { transform: translate(7px,-2px) rotate(0.5deg); }
    60% { transform: translate(-4px,4px) rotate(-0.3deg); }
    80% { transform: translate(3px,-3px) rotate(0.2deg); }
    100% { transform: translate(0,0); }
}
@keyframes shake2 {
    0% { transform: translate(0,0); }
    15% { transform: translate(-14px,6px) rotate(-1deg); }
    30% { transform: translate(13px,-5px) rotate(1deg); }
    45% { transform: translate(-10px,8px) rotate(-0.8deg); }
    60% { transform: translate(8px,-6px) rotate(0.6deg); }
    75% { transform: translate(-5px,4px) rotate(-0.3deg); }
    100% { transform: translate(0,0); }
}

.mz-pack-stage {
    position: relative; z-index: 10;
    width: 100%; max-width: 380px; aspect-ratio: 1/1;
    perspective: 1200px;
    display: flex; align-items: center; justify-content: center;
}

/* ===== SOBRE ===== */
.mz-pack-sobre-wrap {
    position: relative;
    width: 90%;
    aspect-ratio: 1/1.15;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    transition: opacity .25s ease, transform .25s ease;
    will-change: transform, opacity;
}
.mz-pack-sobre-wrap.gone { opacity: 0; transform: scale(.4); pointer-events: none; transition: opacity .2s ease, transform .2s ease; }

.mz-pack-img {
    position: relative; z-index: 3;
    width: 110%; height: 110%;
    object-fit: contain;
    filter: drop-shadow(0 18px 32px rgba(0,0,0,0.55));
    transform-origin: center;
    will-change: transform;
}

/* ── APERTURA POR RASGADO: la tira superior se corta y el sobre se abre ──────
   La "tapa" es un clon de la imagen clipeado a la franja de arriba (~16%); el
   cuerpo (#mz-pack-img) se va recortando desde arriba (clip-path) como si se
   vaciara. --tear marca la línea de corte (16% del sobre). */
.mz-pack-lid {
    position: absolute; z-index: 4;
    left: 50%; top: 50%;
    width: 100%; height: 100%;
    transform: translate(-50%, -50%);
    object-fit: contain;
    /* Sin sombra propia en reposo: se funde con la imagen y NO se nota
       superpuesta. La sombra se agrega solo cuando vuela (regla .tearing). */
    -webkit-clip-path: inset(0 11% 85% 11%);
            clip-path: inset(0 11% 85% 11%);
    pointer-events: none;
    will-change: transform, opacity;
}
/* La tapa flota en sincronía con la imagen (mismo movimiento que packFloatGentle,
   pero conservando el translate(-50%,-50%) de centrado). La vibración de tensión
   ya la comparten porque la tapa es hija del wrap que vibra. */
.mz-pack-show[data-fase="idle"] .mz-pack-lid,
.mz-pack-show[data-fase="anticipacion"] .mz-pack-lid,
.mz-pack-show[data-fase="tension"] .mz-pack-lid {
    animation: mzLidFloat 3.4s ease-in-out infinite;
}
@keyframes mzLidFloat {
    0%, 100% { transform: translate(-50%, -50%) translateY(0) rotate(0deg) scale(1); }
    50%      { transform: translate(-50%, -50%) translateY(-10px) rotate(-1deg) scale(1.01); }
}
.mz-pack-tear {
    position: absolute; z-index: 5;
    left: 13%; right: 13%; top: 15%;
    height: 5px; border-radius: 4px;
    background: linear-gradient(90deg, transparent 0%, #fff 22%, var(--tier-color, #f97316) 50%, #fff 78%, transparent 100%);
    box-shadow: 0 0 22px 6px var(--tier-glow, rgba(249,115,22,.7));
    filter: blur(1px);
    opacity: 0; transform: scaleX(.05);
    pointer-events: none;
}
/* Disparo del rasgado: pausado, con énfasis en el corte y la tapa volando */
.mz-pack-sobre-wrap.tearing .mz-pack-lid {
    animation: mzLidRip .8s cubic-bezier(.3,.6,.2,1) forwards;
    filter: drop-shadow(0 14px 20px rgba(0,0,0,.6)); /* se ve despegada al volar */
}
.mz-pack-sobre-wrap.tearing .mz-pack-img { animation: mzBodyOpen 1s ease forwards; }
.mz-pack-sobre-wrap.tearing .mz-pack-tear { animation: mzTearLight .6s ease-out forwards; }
@keyframes mzLidRip {
    0%   { transform: translate(-50%, -50%) translateY(0) rotate(0deg) scale(1); opacity: 1; }
    16%  { transform: translate(-50%, -50%) translateY(-9px) rotate(-2deg) scale(1.01); opacity: 1; }  /* se corta y la tapa se despega */
    34%  { transform: translate(-50%, -50%) translateY(-6px) rotate(-3deg) scale(1.01); opacity: 1; }  /* beat: se nota el corte */
    100% { transform: translate(-50%, -50%) translateY(-230px) rotate(-26deg) scale(.8); opacity: 0; } /* sale volando */
}
@keyframes mzBodyOpen {
    0%   { -webkit-clip-path: inset(0 0 0 0); clip-path: inset(0 0 0 0); transform: scale(1) translateY(0); opacity: 1; }
    20%  { -webkit-clip-path: inset(15% 0 0 0); clip-path: inset(15% 0 0 0); transform: scale(1.01) translateY(0); opacity: 1; } /* corte arriba */
    72%  { -webkit-clip-path: inset(15% 0 0 0); clip-path: inset(15% 0 0 0); transform: scale(1) translateY(8px); opacity: 1; }  /* queda abierto un beat */
    100% { -webkit-clip-path: inset(60% 0 0 0); clip-path: inset(60% 0 0 0); transform: scale(.94) translateY(22px); opacity: 0; }
}
@keyframes mzTearLight {
    0%   { opacity: 0; transform: scaleX(.05); }
    22%  { opacity: 1; transform: scaleX(1.05); }   /* destello del corte */
    60%  { opacity: .7; transform: scaleX(1.1); }
    100% { opacity: 0; transform: scaleX(1.2); }
}

/* Fase IDLE/ANTICIPACION/TENSION: el sobre sigue levitando (sin sacudidas) */
.mz-pack-show[data-fase="idle"] .mz-pack-img,
.mz-pack-show[data-fase="anticipacion"] .mz-pack-img,
.mz-pack-show[data-fase="tension"] .mz-pack-img {
    animation: packFloatGentle 3.4s ease-in-out infinite;
}
@keyframes packFloatGentle {
    0%, 100% { transform: translateY(0) rotate(0deg) scale(1); }
    50% { transform: translateY(-10px) rotate(-1deg) scale(1.01); }
}

/* Fase TENSIÓN nueva: carga de energía SIN movimiento lateral. El wrap sube un
   pelito de escala (la energía se acumula) — el bamboleo lo dan img/lid flotando. */
.mz-pack-sobre-wrap.charging { animation: mzCharge .95s ease-in both; }
@keyframes mzCharge {
    0%   { transform: scale(1); }
    70%  { transform: scale(1.05); }
    100% { transform: scale(1.08); }
}

/* Fase ANTICIPACIÓN: leve magnetización al centro */
.mz-pack-show[data-fase="anticipacion"] .mz-pack-sobre-wrap {
    animation: packAnticipate .55s ease-out both;
}
@keyframes packAnticipate {
    0%   { transform: scale(1); }
    100% { transform: scale(1.04); }
}

/* Halo expansivo del sobre */
.mz-pack-halo {
    position: absolute; inset: -25%;
    border-radius: 9999px;
    background: radial-gradient(circle at center, var(--tier-glow) 0%, transparent 62%);
    /* El degradado ya es suave; blur(20px) era redundante y caro. */
    filter: blur(6px);
    opacity: 0.6;
    z-index: 1;
    will-change: opacity, transform;
}
.mz-pack-show[data-fase="anticipacion"] .mz-pack-halo { animation: haloPulse 1s ease-out infinite; }
.mz-pack-show[data-fase="tension"]      .mz-pack-halo { animation: haloPulse .4s ease-out infinite; }
@keyframes haloPulse {
    0%, 100% { opacity: 0.45; transform: scale(0.95); }
    50%      { opacity: 0.85; transform: scale(1.15); }
}

/* Rayos rotando */
.mz-pack-rays {
    position: absolute; inset: -45%;
    z-index: 2;
    opacity: 0;
    pointer-events: none;
    background:
        conic-gradient(
            from 0deg,
            transparent 0deg, var(--tier-color) 4deg, transparent 8deg,
            transparent 38deg, var(--tier-color) 42deg, transparent 46deg,
            transparent 78deg, var(--tier-color) 82deg, transparent 86deg,
            transparent 120deg, var(--tier-color) 124deg, transparent 128deg,
            transparent 160deg, var(--tier-color) 164deg, transparent 168deg,
            transparent 200deg, var(--tier-color) 204deg, transparent 208deg,
            transparent 240deg, var(--tier-color) 244deg, transparent 248deg,
            transparent 280deg, var(--tier-color) 284deg, transparent 288deg,
            transparent 320deg, var(--tier-color) 324deg, transparent 328deg,
            transparent 360deg
        );
    mask: radial-gradient(circle, transparent 30%, #000 75%);
    -webkit-mask: radial-gradient(circle, transparent 30%, #000 75%);
    filter: blur(2px);
    will-change: transform, opacity;
}
.mz-pack-show[data-fase="tension"] .mz-pack-rays { animation: raysSpinIn 1.5s ease-in both; opacity: 0.45; }
@keyframes raysSpinIn {
    0%   { opacity: 0;    transform: rotate(0deg)   scale(.6); }
    30%  { opacity: 0.25; transform: rotate(120deg) scale(.9); }
    100% { opacity: 0.55; transform: rotate(720deg) scale(1.1); }
}

/* Shockwaves (ondas concéntricas) */
.mz-pack-shockwaves { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.mz-pack-shockwaves::before,
.mz-pack-shockwaves::after,
.mz-pack-shockwaves > .ring {
    content: '';
    position: absolute; top: 50%; left: 50%;
    width: 80px; height: 80px; margin: -40px 0 0 -40px;
    border-radius: 9999px;
    border: 2px solid var(--tier-color);
    opacity: 0;
    will-change: transform, opacity;
}
.mz-pack-show[data-fase="tension"] .mz-pack-shockwaves::before { animation: shockwave 1.4s ease-out infinite; }
.mz-pack-show[data-fase="tension"] .mz-pack-shockwaves::after  { animation: shockwave 1.4s ease-out infinite .47s; }
.mz-pack-show[data-fase="tension"] .mz-pack-shockwaves > .ring { animation: shockwave 1.4s ease-out infinite .94s; }
@keyframes shockwave {
    0%   { opacity: 0;    transform: scale(0.4); }
    20%  { opacity: 0.8;  transform: scale(0.7); }
    100% { opacity: 0;    transform: scale(3.8); }
}

/* ===== CARTAS (host) ===== */
.mz-pack-cards-host {
    position: absolute; inset: 0;
    pointer-events: none;
    z-index: 8;
    display: flex; align-items: center; justify-content: center;
    /* Filtro identidad SIEMPRE presente: la capa con filter se crea al abrir
       el show (momento tranquilo) y el toggle de .slowmo pasa a ser una
       transición de valores en el compositor, sin re-raster del subtree en
       plena detonación (era parte del tirón de los reveals premium). */
    filter: contrast(1) saturate(1) brightness(1);
    transition: filter .2s ease;
}
.mz-pack-cards-host.active { pointer-events: auto; }

/* Cuando una carta sale del pack (emerge), arranca encogida y crece con spring */
.mz-pack-cards-host .carta-wrap.emerge {
    animation: cardEmerge .55s cubic-bezier(.2,.85,.4,1.25) both;
}
@keyframes cardEmerge {
    0%   { opacity: 0; transform: scale(.2) rotate(-10deg); }
    60%  { opacity: 1; transform: scale(1.08) rotate(3deg); }
    100% { opacity: 1; transform: scale(1) rotate(0); }
}

/* Slide-out dramático entre cartas */
.carta-wrap.card-slide-out-drama {
    animation: cardSlideOutDrama .42s cubic-bezier(.5,.05,.95,.55) forwards;
}
@keyframes cardSlideOutDrama {
    0%   { opacity: 1; transform: translate(0,0) rotate(0) scale(1); }
    100% { opacity: 0; transform: translate(-120vw, -8vh) rotate(-18deg) scale(.8); }
}

/* Slowmo overlay para premium reveal (la transition vive en el host base,
   así la vuelta a identidad también es suave). */
.mz-pack-cards-host.slowmo {
    filter: contrast(1.15) saturate(1.4) brightness(1.1);
}

/* =====================================================================
   REVELACIÓN CINEMÁTICA · "materializar desde el flash"
   Color insignia por rareza vía --rar-color / --rar-glow / --rar-bg.
   Capas de escena (blueprint, glow térmico, canvas de chispas) +
   carga mecánica + barrido cromado + flotación idle.
   ===================================================================== */

/* Plano técnico reactivo de fondo (blueprint) */
.mz-rev-blueprint {
    position: absolute; inset: 0; z-index: 2;
    display: flex; align-items: center; justify-content: center;
    pointer-events: none;
    opacity: 0;
    color: var(--rar-color, #f59e0b);
    transition: opacity 1.4s ease-out, transform 1.4s ease-out, color .6s ease;
    transform: scale(1);
}
.mz-rev-blueprint svg { width: 116%; height: 116%; }
.mz-rev-blueprint.on { opacity: 0.22; transform: scale(1.08); }

/* Aura térmica que tiñe el fondo con el color de la rareza */
.mz-rev-glow {
    position: absolute; top: 50%; left: 50%;
    width: 520px; height: 520px; margin: -260px 0 0 -260px;
    border-radius: 9999px;
    /* El degradado radial ya da el difuminado: evitamos filter:blur(120px),
       que es de las operaciones GPU más caras (raster de toda la capa). */
    background: radial-gradient(circle, var(--rar-glow, rgba(245,158,11,0.45)) 0%, transparent 68%);
    opacity: 0; transform: scale(1);
    z-index: 2; pointer-events: none;
    transition: opacity 1.8s ease-out, transform 1.8s ease-out, background .6s ease;
}
.mz-rev-glow.on { opacity: 1; transform: scale(2.7); }

/* Canvas de chispas físicas (balísticas + brasas) */
.mz-rev-canvas {
    position: absolute; inset: 0; z-index: 3;
    width: 100%; height: 100%;
    pointer-events: none;
}

/* Intercambio óptico instantáneo (vence el !important del flip de 1.05s) para
   que el frente aparezca ya volteado detrás del flash, sin flip visible. */
#carta-activa .card-inner.mz-rev-instant { transition: none !important; }

/* Temblor mecánico de carga (pre-detonación) */
.mz-rev-charge { animation: mzRevCharge .2s ease-in-out infinite; }
@keyframes mzRevCharge {
    0%, 100% { transform: translate(0,0) rotate(0deg) scale(1.01); }
    25%      { transform: translate(-1.5px, .5px) rotate(-.3deg) scale(1.03); }
    50%      { transform: translate(.8px, -.8px) rotate(.3deg)  scale(1.05); }
    75%      { transform: translate(-.8px, -1.2px) rotate(-.15deg) scale(1.06); }
}

/* Fondo + halo interno por rareza de la carta revelada */
#carta-activa .carta-frente {
    background:
        radial-gradient(circle at 50% 36%, var(--rar-bg, rgba(249,115,22,0.20)) 0%, transparent 64%),
        #050507;
    box-shadow:
        0 22px 50px rgba(0,0,0,0.85),
        0 0 34px -2px var(--rar-glow, rgba(249,115,22,0.5)),
        inset 0 0 24px -5px var(--rar-color, rgba(249,115,22,0.7)),
        inset 0 1px 0 rgba(255,255,255,0.05);
}

/* Barrido cromado diagonal (one-shot tras el aterrizaje) */
.mz-rev-sweep {
    position: absolute; inset: 0; z-index: 6;
    pointer-events: none; overflow: hidden; border-radius: inherit;
}
.mz-rev-sweep::before {
    content: '';
    position: absolute; top: 0; left: 0;
    width: 60%; height: 100%;
    transform: translateX(-180%) skewX(-12deg);
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.45), transparent);
    opacity: 0;
}
.mz-rev-sweep.go::before { animation: mzRevSweep .85s cubic-bezier(.25,1,.2,1) forwards; }
@keyframes mzRevSweep {
    0%   { transform: translateX(-180%) skewX(-12deg); opacity: 0; }
    12%  { opacity: 1; }
    88%  { opacity: 1; }
    100% { transform: translateX(320%) skewX(-12deg); opacity: 0; }
}

/* Flotación armónica idle (post-reveal). translate es independiente de
   transform → no choca con mz-tilt en desktop. */
.mz-rev-idle { animation: mzRevIdle 5s ease-in-out infinite; }
@keyframes mzRevIdle {
    0%, 100% { translate: 0 0; }
    50%      { translate: 0 -9px; }
}

@media (prefers-reduced-motion: reduce) {
    .mz-rev-charge { animation: none !important; }
    .mz-rev-glow, .mz-rev-blueprint { transition: opacity .3s ease !important; transform: none !important; }
    .mz-rev-glow.on { transform: none; }
    .mz-rev-blueprint.on { transform: none; }
    .mz-rev-idle { animation: none !important; }
    .mz-rev-sweep.go::before { animation-duration: .3s !important; }
    .mz-rev-rays { animation: none !important; }
    .mz-rev-shock { animation: none !important; display: none; }
}

/* ── Rayos divinos (god-rays) de fondo, color insignia ──────────────────────
   Capa cuadrada centrada con máscara circular: lo visible es un anillo de rayos
   que se desvanece ANTES del borde del elemento, así al girar nunca se ve la
   arista del rectángulo. La textura base es chica (96vmax) y el burst la escala
   por GPU (transform:scale, NO re-rasteriza) hasta cubrir pantalla → mucha menos
   memoria/raster que una capa nativa de 150vmax. */
.mz-rev-rays {
    position: absolute;
    top: 50%; left: 50%;
    width: 96vmax; height: 96vmax;
    margin: -48vmax 0 0 -48vmax;
    transform-origin: center center;
    z-index: 2; pointer-events: none;
    opacity: 0;
    background: conic-gradient(from 0deg,
        var(--rar-color, #f59e0b) 0deg, transparent 14deg,
        transparent 30deg, var(--rar-color, #f59e0b) 44deg, transparent 58deg,
        transparent 74deg, var(--rar-color, #f59e0b) 88deg, transparent 102deg,
        transparent 118deg, var(--rar-color, #f59e0b) 132deg, transparent 146deg,
        transparent 162deg, var(--rar-color, #f59e0b) 176deg, transparent 190deg,
        transparent 206deg, var(--rar-color, #f59e0b) 220deg, transparent 234deg,
        transparent 250deg, var(--rar-color, #f59e0b) 264deg, transparent 278deg,
        transparent 294deg, var(--rar-color, #f59e0b) 308deg, transparent 322deg,
        transparent 338deg, var(--rar-color, #f59e0b) 352deg, transparent 360deg);
    -webkit-mask: radial-gradient(circle closest-side, transparent 10%, #000 34%, rgba(0,0,0,.55) 58%, transparent 76%);
            mask: radial-gradient(circle closest-side, transparent 10%, #000 34%, rgba(0,0,0,.55) 58%, transparent 76%);
    filter: blur(3px);
    will-change: transform, opacity;
}
/* Pre-calentado: se pinta casi invisible durante la fase de carga para que el
   navegador rasterice la capa pesada (conic + mask + blur) ANTES de la
   detonación. Así el reveal solo anima transform/opacity (compositor, sin
   re-raster) y desaparece el tirón de frame justo al aparecer la carta de oro.
   El transform arranca igual que el 0% del burst → sin salto al pasar a .go. */
.mz-rev-rays.prep { opacity: .01; transform: rotate(-45deg) scale(.45); }

/* Modo bitmap: el JS inyecta un canvas pre-renderizado (rayos + máscara ya
   baked) como background-image inline. Acá se apagan el mask y el blur
   procedurales para no pagarlos doble — la capa pasa a ser una textura simple
   que el compositor escala/rota gratis. */
.mz-rev-rays.bmp {
    -webkit-mask: none; mask: none;
    filter: none;
    background-size: 100% 100%;
}

/* Estallido ONE-SHOT: gira rápido desacelerando + escala hacia afuera y se
   ASIENTA estático (forwards). Toda la sorpresa vive en el primer ~1.4s; al
   terminar la capa queda quieta → el compositor no la recompone más (antes
   rotaba infinito mientras admirabas la carta = la fuga de rendimiento). */
.mz-rev-rays.go { animation: mzRevRaysBurst 1.4s cubic-bezier(.12,.72,.25,1) forwards; }
.mz-rev-rays.rainbow {
    background: conic-gradient(from 0deg,
        #ec4899, transparent 18deg, #f97316, transparent 54deg, #fbbf24,
        transparent 90deg, #34d399, transparent 126deg, #60a5fa,
        transparent 162deg, #a855f7, transparent 198deg, #ec4899,
        transparent 234deg, #f97316, transparent 270deg, #34d399,
        transparent 306deg, #60a5fa, transparent 342deg, #ec4899);
}
@keyframes mzRevRaysBurst {
    0%   { opacity: 0;   transform: rotate(-45deg) scale(.45); }
    30%  { opacity: .62; }
    100% { opacity: .4;  transform: rotate(165deg) scale(1.62); }
}

/* ── Onda de choque de impacto (un anillo que se expande) ───────────────── */
.mz-rev-shock {
    position: absolute; top: 50%; left: 50%;
    width: 220px; height: 220px; margin: -110px 0 0 -110px;
    border-radius: 9999px;
    border: 3px solid var(--rar-color, #f59e0b);
    box-shadow: 0 0 40px var(--rar-glow, rgba(245,158,11,.5)), inset 0 0 30px var(--rar-glow, rgba(245,158,11,.4));
    opacity: 0; z-index: 4; pointer-events: none;
}
.mz-rev-shock.go { animation: mzRevShock .8s cubic-bezier(.16,.84,.44,1) forwards; }
/* Solo transform/opacity (compositor): animar border-width forzaba re-raster
   del anillo en cada frame; el fade a opacity:0 ya logra el mismo final. */
@keyframes mzRevShock {
    0%   { opacity: .9; transform: scale(.3); }
    70%  { opacity: .35; }
    100% { opacity: 0; transform: scale(3.4); }
}

/* ── Banner unificado: categoría/serie + rareza, entra de golpe al revelar ── */
.mz-rev-banner {
    position: absolute; left: 50%; bottom: 86px;
    transform: translateX(-50%) scale(.6);
    z-index: 32; pointer-events: none;
    display: none; align-items: center; gap: 11px;
    padding: 9px 18px; border-radius: 12px;
    /* Fondo más opaco en vez de backdrop-filter: el banner entra mientras
       chispas/rays/glow siguen animando detrás y el blur del fondo costaba
       un re-blur por frame. */
    background: rgba(8,8,10,.9);
    border: 1px solid var(--rar-color, #f59e0b);
    box-shadow: 0 12px 30px -8px rgba(0,0,0,.7), 0 0 26px -6px var(--rar-glow, rgba(245,158,11,.5));
    color: #fff; opacity: 0;
    font-weight: 900; text-transform: uppercase; letter-spacing: .22em;
    font-size: 12px; white-space: nowrap;
}
.mz-rev-banner .mz-rev-banner-serie,
.mz-rev-banner .mz-rev-banner-rar { display: inline-flex; align-items: center; gap: 7px; }
/* Segmento categoría/serie: tinte propio de la serie (--ser-color). */
.mz-rev-banner .mz-rev-banner-serie { color: rgba(255,255,255,.85); }
.mz-rev-banner .mz-rev-banner-serie i { color: var(--ser-color, #9ca3af); font-size: 13px; }
/* Separador vertical entre serie y rareza. */
.mz-rev-banner .mz-rev-banner-div { width: 1px; height: 14px; background: rgba(255,255,255,.22); }
/* Segmento rareza: color insignia (--rar-color) con glow. */
.mz-rev-banner .mz-rev-banner-rar i { color: var(--rar-color, #f59e0b); font-size: 14px; filter: drop-shadow(0 0 8px var(--rar-glow, rgba(245,158,11,.6))); }
.mz-rev-banner .mz-rev-banner-label { color: var(--rar-color, #f59e0b); text-shadow: 0 0 14px var(--rar-glow, rgba(245,158,11,.5)); }
.mz-rev-banner.go { display: inline-flex; animation: mzRevBanner .7s cubic-bezier(.18,1.5,.5,1) forwards; }
@keyframes mzRevBanner {
    0%   { opacity: 0; transform: translateX(-50%) scale(.55) translateY(14px); filter: blur(6px); }
    55%  { opacity: 1; transform: translateX(-50%) scale(1.12) translateY(0);  filter: blur(0); }
    100% { opacity: 1; transform: translateX(-50%) scale(1) translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
    .mz-rev-banner.go { animation: none; opacity: 1; transform: translateX(-50%); }
}

/* =====================================================================
   CARTA VIVA · acabado holográfico reactivo a la luz (gyro + touch +
   puntero). El JS (mzLivingCard) maneja el transform 3D del #carta-activa
   y reposiciona estas capas cada frame según el vector de inclinación.
   ===================================================================== */
#carta-activa.mz-live {
    transform-style: preserve-3d;
    will-change: transform;
}
/* Brillo especular puntual que sigue la "fuente de luz" */
.mz-live-glare {
    position: absolute; inset: 0; z-index: 4;
    pointer-events: none; border-radius: inherit;
    mix-blend-mode: overlay;
    opacity: 0.9;
}
/* Sutil sombra de profundidad bajo la carta viva (da peso físico) */
.mz-live-shadow {
    position: absolute; left: 8%; right: 8%; bottom: -7%;
    height: 14%; z-index: -2;
    background: radial-gradient(ellipse at center, rgba(0,0,0,0.55), transparent 70%);
    filter: blur(10px);
    pointer-events: none;
    transition: transform .1s linear, opacity .25s ease;
}
@media (prefers-reduced-motion: reduce) {
    .mz-live-glare, .mz-live-shadow { display: none !important; }
    #carta-activa.mz-live { transform: none !important; }
}

/* Info header */
.mz-pack-info {
    position: absolute; top: 60px; left: 50%; transform: translateX(-50%);
    z-index: 30;
    width: 100%; max-width: 380px;
    text-align: center;
    color: #fff;
    pointer-events: none;
    transition: opacity .3s ease, transform .3s ease;
}
.mz-pack-info.fade { opacity: 0; transform: translateX(-50%) translateY(-12px); }
.mz-pack-eyebrow {
    display: inline-flex; align-items: center; gap: 10px;
    font-size: 9.5px; font-weight: 800; letter-spacing: 0.32em;
    text-transform: uppercase; color: rgba(255,255,255,0.5);
    margin-bottom: 6px;
}
.mz-pack-eyebrow .bar { display: inline-block; width: 18px; height: 1px; background: rgba(255,255,255,0.3); }
.mz-pack-titulo {
    font-size: 22px; font-weight: 900;
    letter-spacing: 0.04em; text-transform: uppercase;
    color: #fff;
    text-shadow: 0 0 20px var(--tier-glow);
}
.mz-pack-sub {
    font-size: 9.5px; font-weight: 700; letter-spacing: 0.32em;
    text-transform: uppercase; color: rgba(255,255,255,0.45);
    margin-top: 4px;
}

/* Dots */
.mz-pack-dots {
    position: absolute; top: 60px; left: 50%; transform: translateX(-50%);
    z-index: 30;
    display: none;
    gap: 8px;
    pointer-events: none;
}
.mz-pack-show[data-fase="reveal"] .mz-pack-dots { display: flex; }
.mz-pack-dot {
    width: 10px; height: 10px; border-radius: 9999px;
    background: rgba(255,255,255,0.2);
    transition: background .25s ease, transform .25s ease, width .25s ease;
}
.mz-pack-dot.is-active { background: var(--tier-color); width: 22px; box-shadow: 0 0 12px var(--tier-glow); }
.mz-pack-dot.done { background: rgba(255,255,255,0.5); }

/* Hint */
.mz-pack-hint {
    position: absolute; bottom: 38px; left: 50%; transform: translateX(-50%);
    z-index: 30;
    color: #fff;
    font-size: 11px; font-weight: 700;
    letter-spacing: 0.3em; text-transform: uppercase;
    opacity: 0.85;
    pointer-events: none;
    transition: opacity .25s ease;
    text-shadow: 0 2px 12px rgba(0,0,0,0.6);
}
.mz-pack-hint.hide { opacity: 0; }
.mz-pack-hint.pulse { animation: hintPulse 1.6s ease-in-out infinite; }
@keyframes hintPulse {
    0%, 100% { opacity: 0.6; }
    50%      { opacity: 1; }
}

/* ============== REDUCE-MOTION FALLBACK ============== */
@media (prefers-reduced-motion: reduce) {
    .mz-pack-shake-host.shake-soft,
    .mz-pack-shake-host.shake-hard { animation: none !important; transform: none !important; }
    .mz-pack-show[data-fase="tension"] .mz-pack-shockwaves::before,
    .mz-pack-show[data-fase="tension"] .mz-pack-shockwaves::after,
    .mz-pack-show[data-fase="tension"] .mz-pack-shockwaves > .ring { animation: none !important; }
    .mz-pack-show[data-fase="tension"] .mz-pack-rays { animation: none !important; opacity: 0.3; transform: none; }
    .mz-pack-show[data-fase="anticipacion"] .mz-pack-halo,
    .mz-pack-show[data-fase="tension"]      .mz-pack-halo { animation: none !important; opacity: 0.6; }
    .mz-pack-show[data-fase="idle"] .mz-pack-img,
    .mz-pack-show[data-fase="anticipacion"] .mz-pack-img { animation: none !important; }
    .mz-pack-show[data-fase="idle"] .mz-pack-lid,
    .mz-pack-show[data-fase="anticipacion"] .mz-pack-lid { animation: none !important; }
    .mz-pack-flash.go { animation-duration: .25s; }
    .mz-pack-cards-host .carta-wrap.emerge { animation-duration: .3s; }
    .carta-wrap.card-slide-out-drama { animation-duration: .25s; }
    /* Rasgado: sin animación, solo desvanecer el sobre. */
    .mz-pack-sobre-wrap.tearing .mz-pack-lid,
    .mz-pack-sobre-wrap.tearing .mz-pack-tear { animation: none !important; opacity: 0; }
    .mz-pack-sobre-wrap.tearing .mz-pack-img { animation: none !important; opacity: 0; transition: opacity .25s ease; }
}