/* =================================================================
   upgrade.css -- Upgrade PuffCase 2025 -- Redesign
   ================================================================= */

#panel-upgrade {
    --ug-cyan:      #00b4d8;
    --ug-cyan2:     #48cae4;
    --ug-cyan-dark: #007ea7;
    --ug-cyan-glow: rgba(0,180,216,.5);
    --ug-cyan-dim:  rgba(0,180,216,.1);
    --ug-gold:      #ffd740;
    --ug-gold-glow: rgba(255,215,64,.4);
    --ug-green:     #4ade80;
    --ug-red:       #f87171;
    --ug-border:    rgba(0,180,216,.18);
    --ug-radius:    18px;
    max-width: none;
    margin: 0;
    padding: 0 0 56px;
    border-top: 2px solid rgba(0,100,150,.55);
}

/* ---- Animaciones ----------------------------------------------- */
@keyframes ug-fade-up {
    from { opacity: 0; transform: translateY(18px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes ug-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@keyframes ug-float {
    0%,100% { transform: translateY(0) rotate(-5deg); }
    50%      { transform: translateY(-9px) rotate(5deg); }
}
@keyframes ug-pulse-glow {
    0%,100% { opacity: .6; transform: scale(1); }
    50%      { opacity: 1;  transform: scale(1.14); }
}

#panel-upgrade .ug-hero  { animation: ug-fade-in  .45s ease both; }
#panel-upgrade .ug-how   { animation: ug-fade-up  .4s  ease .15s both; }
#panel-upgrade .mj-layout { animation: ug-fade-up  .5s  cubic-bezier(.22,1,.36,1) .2s both; }

/* ================================================
   HERO
   ================================================ */
#panel-upgrade .ug-hero {
    position: relative; overflow: hidden;
    padding: 36px 28px 0;
}
#panel-upgrade .ug-hero-bg {
    position: absolute; inset: 0;
    background:
        linear-gradient(105deg, rgba(0,120,160,.15) 0%, transparent 45%),
        linear-gradient(180deg, rgba(0,20,30,.65) 0%, transparent 100%);
    pointer-events: none;
}
#panel-upgrade .ug-hero-bg::after {
    content: '⚡';
    position: absolute; right: 24px; top: 50%; transform: translateY(-50%);
    font-size: 150px; opacity: .025; pointer-events: none; filter: grayscale(1);
}
#panel-upgrade .ug-hero-content {
    position: relative; z-index: 1;
    display: flex; align-items: center; gap: 20px;
    margin-bottom: 26px;
}
#panel-upgrade .ug-hero-icon {
    font-size: 3.4rem; flex-shrink: 0; line-height: 1;
    filter:
        drop-shadow(0 0 22px var(--ug-cyan-glow))
        drop-shadow(0 0 8px rgba(0,180,216,.4));
    animation: ug-float 4s ease-in-out infinite;
}
#panel-upgrade .ug-hero-text { display: flex; flex-direction: column; gap: 4px; }
#panel-upgrade .ug-hero-eyebrow {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: .65rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
    color: var(--ug-cyan2); opacity: .85;
}
#panel-upgrade .ug-hero-eyebrow::before {
    content: ''; display: inline-block; width: 20px; height: 1px;
    background: var(--ug-cyan2); opacity: .7;
}
#panel-upgrade .ug-hero-title {
    font-family: 'Rajdhani', sans-serif;
    font-size: clamp(2rem, 5vw, 2.8rem);
    font-weight: 900; margin: 0; color: #fff;
    letter-spacing: .04em; line-height: 1;
    text-shadow: 0 0 40px rgba(0,180,216,.2), 0 2px 20px rgba(0,0,0,.6);
}
#panel-upgrade .ug-hero-title span {
    color: var(--ug-cyan);
    text-shadow: 0 0 28px var(--ug-cyan-glow);
}
#panel-upgrade .ug-hero-sub {
    font-size: .8rem; color: rgba(255,255,255,.38); margin: 0; letter-spacing: .05em;
}

/* Stats bar */
#panel-upgrade .ug-hero-stats {
    position: relative; z-index: 1;
    display: flex; align-items: stretch;
    background: rgba(0,0,0,.3);
    border-top: 1px solid rgba(0,180,216,.14);
    border-bottom: 1px solid rgba(0,0,0,.25);
    border-left: 1px solid rgba(0,180,216,.1);
    border-right: 1px solid rgba(0,180,216,.1);
    backdrop-filter: blur(6px);
    overflow-x: auto; scrollbar-width: none;
    animation: ug-fade-in .5s ease .2s both;
}
#panel-upgrade .ug-hero-stats::-webkit-scrollbar { display: none; }
#panel-upgrade .ug-hstat {
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    gap: 3px; flex: 1; min-width: 90px; padding: 14px 8px;
    transition: background .2s;
}
#panel-upgrade .ug-hstat:hover { background: rgba(0,180,216,.05); }
#panel-upgrade .ug-hstat-val {
    font-family: 'Rajdhani', sans-serif; font-size: 1.45rem; font-weight: 900;
    color: var(--ug-cyan); line-height: 1;
    text-shadow: 0 0 12px var(--ug-cyan-glow); white-space: nowrap;
}
#panel-upgrade .ug-hstat-lbl {
    font-size: .56rem; color: rgba(255,255,255,.32);
    text-transform: uppercase; letter-spacing: .09em; white-space: nowrap;
}
#panel-upgrade .ug-hstat-div {
    width: 1px; align-self: stretch;
    background: rgba(255,255,255,.07); flex-shrink: 0; margin: 10px 0;
}

/* ================================================
   COMO FUNCIONA
   ================================================ */
#panel-upgrade .ug-how {
    display: flex; align-items: flex-start; justify-content: center;
    gap: 8px; flex-wrap: wrap;
    padding: 28px 32px 24px;
    background: rgba(0,0,0,.15);
    border-bottom: 1px solid rgba(0,180,216,.07);
}
#panel-upgrade .ug-how-step {
    display: flex; flex-direction: column; align-items: center;
    gap: 10px; flex-shrink: 0; width: 130px; text-align: center;
    padding: 16px 10px 14px;
    background: rgba(0,180,216,.04); border: 1px solid rgba(0,180,216,.12);
    border-radius: 16px; cursor: default;
    transition: background .25s, border-color .25s, transform .22s, box-shadow .25s;
    animation: ug-fade-up .35s ease both;
}
#panel-upgrade .ug-how-step:nth-child(1) { animation-delay: .06s; }
#panel-upgrade .ug-how-step:nth-child(3) { animation-delay: .12s; }
#panel-upgrade .ug-how-step:nth-child(5) { animation-delay: .18s; }
#panel-upgrade .ug-how-step:nth-child(7) { animation-delay: .24s; }
#panel-upgrade .ug-how-step:hover {
    background: rgba(0,180,216,.1); border-color: rgba(0,180,216,.35);
    transform: translateY(-4px); box-shadow: 0 10px 28px rgba(0,180,216,.1);
}
#panel-upgrade .ug-how-num {
    width: 46px; height: 46px; border-radius: 50%;
    background: linear-gradient(135deg, rgba(0,180,216,.28), rgba(0,60,80,.15));
    border: 1.5px solid rgba(0,180,216,.5);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.3rem; line-height: 1;
    box-shadow: 0 0 16px rgba(0,180,216,.2), 0 3px 8px rgba(0,0,0,.3);
    transition: box-shadow .25s, border-color .25s;
}
#panel-upgrade .ug-how-step:hover .ug-how-num { box-shadow: 0 0 26px rgba(0,180,216,.4); border-color: rgba(0,180,216,.8); }
#panel-upgrade .ug-how-num--gold {
    background: linear-gradient(135deg, rgba(255,215,64,.28), rgba(100,70,0,.15));
    border-color: rgba(255,215,64,.5);
    box-shadow: 0 0 16px rgba(255,215,64,.2), 0 3px 8px rgba(0,0,0,.3);
}
#panel-upgrade .ug-how-step:hover .ug-how-num--gold { box-shadow: 0 0 26px rgba(255,215,64,.42); border-color: rgba(255,215,64,.8); }
#panel-upgrade .ug-how-info { display: flex; flex-direction: column; gap: 3px; align-items: center; }
#panel-upgrade .ug-how-info strong { font-size: .82rem; color: rgba(255,255,255,.88); font-weight: 700; line-height: 1.2; }
#panel-upgrade .ug-how-info span   { font-size: .68rem; color: rgba(255,255,255,.35); }
#panel-upgrade .ug-how-arrow {
    flex-shrink: 0; align-self: center; margin-top: -10px;
    color: rgba(0,180,216,.35); font-size: .8rem; letter-spacing: 1px;
}

/* ================================================
   LAYOUT INNER (override intro antiguo)
   ================================================ */
#panel-upgrade .mj-layout--single {
    padding: 28px 20px 0;
}
#panel-upgrade .ug-intro { display: none; }