*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:#020913;color:#eef5ff;font-family:Inter,Arial,sans-serif;font-size:14px}body:before{content:"";position:fixed;inset:0;pointer-events:none;background:radial-gradient(circle at 50% 20%,rgba(18,63,105,.22),transparent 42%),linear-gradient(180deg,#06111e,#01060c 65%,#020914);z-index:-2}a{color:inherit;text-decoration:none}.shell{width:min(1180px,calc(100% - 48px));margin:auto}.topbar{height:70px;background:rgba(2,8,16,.92);border-bottom:1px solid rgba(57,131,184,.5);display:flex;align-items:center;padding:0 max(24px,calc((100% - 1420px)/2));gap:28px;position:sticky;top:0;z-index:20;backdrop-filter:blur(10px)}.brand{display:flex;align-items:center;gap:12px;min-width:250px}.brand strong{font:700 26px Cinzel,serif;letter-spacing:2px;color:#fff}.brand small{display:block;font-size:10px;letter-spacing:4px;color:#dce7f5}.crest{font-size:42px;color:#ffc64b;text-shadow:0 0 18px #ff9c20}.topbar nav{display:flex;gap:25px;align-items:center;flex:1;justify-content:center}.topbar nav a{font-size:11px;font-weight:700;padding:25px 0;position:relative}.topbar nav a.active,.topbar nav a:hover{color:#ffc34b}.topbar nav a.active:after{content:"";position:absolute;left:0;right:0;bottom:7px;height:2px;background:#ffb92f;box-shadow:0 0 12px #ffae00}.auth{display:flex;gap:8px}.btn{border:1px solid #d99b25;background:transparent;color:#fff;padding:12px 20px;font-weight:800;letter-spacing:.4px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center}.btn.gold{background:linear-gradient(#ffd66c,#e89a20);color:#160f05;border-color:#ffe18c;box-shadow:0 0 22px rgba(255,174,38,.28)}.btn.ghost{border-color:#7e5a25}.menu{display:none;background:none;border:0;color:white;font-size:24px}.hero{height:510px;position:relative;overflow:hidden;border-bottom:1px solid #2474a6}.hero-art{position:absolute;inset:0;background:url("assets/hero-art.jpg") center right/cover no-repeat;filter:saturate(1.05) contrast(1.04)}.hero-shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(1,7,14,.9) 0%,rgba(1,7,14,.72) 34%,rgba(1,7,14,.12) 64%,rgba(1,7,14,.05)),linear-gradient(0deg,rgba(1,7,14,.5),transparent 45%)}.hero-content{position:relative;z-index:2;padding-top:105px;width:min(1180px,calc(100% - 48px));margin:auto}.eyebrow{font:500 18px Cinzel;letter-spacing:7px;margin:0 0 6px}.hero h1{font:800 clamp(52px,6vw,82px) Cinzel;margin:0;line-height:.95;color:#fff0bd;text-shadow:0 3px 0 #9a4b10,0 0 26px #ff9e25}.hero h2{font:600 22px Cinzel;letter-spacing:7px;margin:12px 0;color:#fff}.lead{font-size:17px;line-height:1.5}.hero-actions{margin-top:24px;display:flex;flex-direction:column;align-items:flex-start;gap:14px}.giant{font-size:18px;padding:16px 35px;min-width:250px;background:linear-gradient(#ffd76e,#f6a925);color:#1a1004;border:2px solid #ffe49b;box-shadow:0 0 30px rgba(255,166,30,.4)}.giant span{font-size:28px;margin-left:auto}.download-link{font-weight:800;text-decoration:underline;text-underline-offset:5px}.hero-note{position:absolute;right:4%;top:50px;z-index:2;color:#ffd15b;font:italic 18px Cinzel;transform:rotate(-8deg)}.stats{margin-top:0;min-height:86px;border:1px solid #1c6f9d;background:linear-gradient(90deg,rgba(3,24,41,.98),rgba(4,15,27,.96));display:grid;grid-template-columns:1.1fr 1fr 1fr 1fr 1.25fr;align-items:center}.stats>div{min-height:55px;padding:7px 24px;border-right:1px solid #245574;display:grid;grid-template-columns:36px 1fr;grid-template-rows:auto auto;column-gap:8px}.stats small{font-size:9px;grid-column:2;color:#cbd8e8}.stats b{font-size:18px;grid-column:2;color:#fff}.stat-icon{grid-row:1/3;font-size:30px;color:#ffd35e;align-self:center}.green{color:#47ff9a!important}.online{color:#4aff9b!important}.community{display:flex!important;align-items:center;gap:12px;border:1px solid #e9ad34;margin:7px 9px;padding:7px 15px!important}.community span{font-size:34px;color:#ffd15b}.community div{display:block!important}.community b{font-size:11px;color:#ffd75f}.community small{font-size:8px;color:white}.rankings{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;padding-top:22px}.rank{background:linear-gradient(160deg,rgba(12,28,43,.97),rgba(2,12,22,.98));border:1px solid #2877a2;min-height:265px;box-shadow:inset 0 0 25px rgba(0,100,180,.06)}.rank.red{border-color:#9b3b48}.rank.purple{border-color:#8b4b9c}.rank.gold{border-color:#b27b1f}.rank h3{margin:0;padding:15px 18px;border-bottom:1px solid #214b66;font:600 20px Cinzel;color:#f3f8ff}.rank.red h3{color:#ffb0a6}.rank.gold h3{color:#ffd35c}.rank.blue h3{color:#59d8ff}.rank header,.rank li{display:grid;grid-template-columns:30px 1fr 60px;align-items:center}.rank header{padding:10px 14px;color:#c3d1df;font-size:9px}.rank header i:last-child{text-align:right}.rank ol{list-style:none;padding:0 9px;margin:0}.rank li{padding:8px 6px;background:rgba(11,29,44,.55);margin-bottom:2px}.rank li:nth-child(odd){background:rgba(4,18,31,.75)}.rank li em{font-style:normal;font-weight:800;font-size:17px}.rank li:first-child em,.rank li:nth-child(2) em,.rank li:nth-child(3) em{border-radius:50%;width:24px;height:24px;text-align:center;line-height:24px;background:#9a8c78;color:white}.rank li:nth-child(2) em{background:#687b91}.rank li:nth-child(3) em{background:#b76527}.rank li b{text-align:right;font-size:12px}.promos{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px;padding-top:18px}.promo{height:155px;position:relative;overflow:hidden;border:1px solid #247eb1;display:flex;align-items:center}.promo-art{position:absolute;inset:0;background-position:center;background-size:cover;opacity:.82}.promo:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(1,8,14,.15),rgba(1,8,14,.85) 62%)}.promo>div:last-child{position:relative;z-index:2;margin-left:auto;width:58%;padding:15px}.promo h3{font:600 20px Cinzel;margin:0 0 5px}.promo p{font-size:11px;line-height:1.4;margin:0 0 12px}.promo.download .promo-art{background-image:url("assets/download-art.jpg")}.promo.donate{border-color:#9e5c2b}.promo.donate .promo-art{background-image:url("assets/donate-art.jpg")}.promo.discord{border-color:#6650d2}.promo.discord .promo-art{background-image:url("assets/discord-art.jpg")}.outline{padding:9px 17px;font-size:11px}.gold-border{border-color:#e4a82f}.lower{display:grid;grid-template-columns:1.25fr .85fr .85fr;gap:14px;padding:25px 0}.news,.features{border-right:1px solid #19425b;padding-right:15px}.section-title{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #17435e;padding-bottom:10px;margin-bottom:8px}.section-title h2{font-size:15px;margin:0}.section-title a{font-size:9px;color:#72cfff}.news-item{display:grid;grid-template-columns:130px 1fr;gap:13px;padding:10px 0;border-bottom:1px solid #123247}.news-item img{width:130px;height:68px;object-fit:cover;border:1px solid #9c6e20}.news-item h3{font-size:12px;margin:2px 0 4px}.news-item p{font-size:10px;line-height:1.4;margin:0;color:#c3d1df}.news-item time{float:right;font-size:8px;color:#67c7f1}.features ul{list-style:none;padding:0;margin:12px 0}.features li{font-size:12px;padding:5px 0}.features li:before{content:"✦";color:#ffc23e;margin-right:9px}.signature{font:italic 20px Cinzel;color:#ffc12f;transform:rotate(-5deg);text-align:center;margin-top:22px}.video-card{height:370px;border:1px solid #a16b27;position:relative;overflow:hidden;text-align:center}.video-art{position:absolute;inset:0;background:url("assets/video-art.jpg") center/cover}.video-card:after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 35%,rgba(1,5,9,.72))}.play{position:absolute;z-index:2;left:50%;top:46%;transform:translate(-50%,-50%);width:54px;height:54px;border-radius:50%;border:1px solid #ffd05a;background:rgba(0,0,0,.35);color:white;font-size:22px;cursor:pointer}.video-card h2,.video-card p{position:relative;z-index:2;margin:0}.video-card h2{margin-top:270px;font:600 22px Cinzel}.video-card p{font:500 13px Cinzel;letter-spacing:3px}footer{border-top:1px solid #345a73;background:#030b14 url("assets/footer-art.jpg") center/cover no-repeat;padding-top:18px}.footer-main{display:grid;grid-template-columns:1fr 1fr 1fr;align-items:center}.footer-main>p{text-align:center;font-size:11px}.footer-main>p span{display:block;font-size:22px;margin-top:8px}.footer-online{text-align:right;color:#c8d6e4;font-size:9px}.footer-online:first-letter{color:#42ff95}.footer-online b{color:#4aff9a;font-size:16px}.footer-nav{display:flex;justify-content:center;gap:28px;padding:15px;border-top:1px solid #173a51;border-bottom:1px solid #173a51;margin-top:15px;font-size:10px}.footer-nav a:hover{color:#ffc23e}footer>small{display:block;text-align:center;padding:12px;color:#93a6b9;font-size:9px}.modal{position:fixed;inset:0;background:rgba(0,0,0,.8);display:none;align-items:center;justify-content:center;z-index:50}.modal.show{display:flex}.modal-box{width:min(420px,calc(100% - 30px));padding:30px;background:#061421;border:1px solid #d29a2a;box-shadow:0 0 50px rgba(0,0,0,.8);position:relative}.modal-box h2{font:600 26px Cinzel;color:#ffd15b}.modal-box input{display:block;width:100%;padding:13px;margin:10px 0;background:#020a12;border:1px solid #284c65;color:white}.full{width:100%}.modal-box p{font-size:9px;color:#8fa2b6}.close{position:absolute;right:12px;top:8px;background:none;border:0;color:white;font-size:28px;cursor:pointer}
@media(max-width:1000px){.topbar nav{display:none}.menu{display:block;margin-left:auto}.auth{margin-left:auto}.brand{min-width:0}.rankings{grid-template-columns:1fr 1fr}.stats{grid-template-columns:1fr 1fr}.community{grid-column:1/-1}.lower{grid-template-columns:1fr 1fr}.video-card{grid-column:1/-1}.features{border-right:0}.news{border-right:0}.promos{grid-template-columns:1fr}.promo{height:165px}}
@media(max-width:640px){.shell{width:min(100% - 24px,1180px)}.topbar{height:62px;padding:0 12px}.brand strong{font-size:18px}.brand small{font-size:7px;letter-spacing:2px}.crest{font-size:30px}.auth{display:none}.hero{height:550px}.hero-art{background-position:62% center}.hero-content{padding-top:80px}.hero h1{font-size:45px}.hero h2{font-size:15px;letter-spacing:4px}.lead{font-size:14px}.hero-note{display:none}.stats{grid-template-columns:1fr 1fr}.stats>div{padding:8px 12px}.rankings{grid-template-columns:1fr}.lower{grid-template-columns:1fr}.video-card{grid-column:auto}.news-item{grid-template-columns:95px 1fr}.news-item img{width:95px}.footer-main{grid-template-columns:1fr;text-align:center;gap:15px}.footer-online{text-align:center}.footer-nav{flex-wrap:wrap;gap:15px}.desktop{display:none}}


/* ===== ESTADO DEL SERVIDOR ===== */
.server-status-detail {
    margin-top: 10px;
    display: flex;
    flex-direction: column;
    gap: 5px;
    font-size: 11px;
    line-height: 1;
    letter-spacing: .5px;
}

.status-line {
    display: flex;
    align-items: center;
    gap: 7px;
}

.status-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    display: inline-block;
    flex: 0 0 7px;
}

.status-online {
    background: #39d98a;
    box-shadow: 0 0 8px rgba(57, 217, 138, .8);
}

.status-offline {
    background: #e05252;
    box-shadow: 0 0 8px rgba(224, 82, 82, .65);
}

.status-label {
    color: rgba(255,255,255,.55);
    min-width: 38px;
}

.status-online-text {
    color: #39d98a !important;
    text-shadow: 0 0 8px rgba(57, 217, 138, .35);
    font-weight: 800;
}

.status-offline-text {
    color: #e05252 !important;
    font-weight: 800;
}

/* ===== FIX ESTADO ONLINE ===== */
.stats .server-status-detail .status-online-text {
    color: #39d98a !important;
    text-shadow: 0 0 6px rgba(57, 217, 138, 0.7) !important;
    font-weight: 800 !important;
}

.stats .server-status-detail .status-offline-text {
    color: #ff4d4d !important;
    text-shadow: 0 0 6px rgba(255, 77, 77, 0.55) !important;
    font-weight: 800 !important;
}

.stats .server-status-detail .status-online {
    background: #39d98a !important;
    box-shadow: 0 0 5px #39d98a, 0 0 10px rgba(57, 217, 138, 0.7) !important;
}

.stats .server-status-detail .status-offline {
    background: #ff4d4d !important;
    box-shadow: 0 0 5px #ff4d4d !important;
}

.stats .server-status-detail .status-label {
    color: rgba(255,255,255,.65) !important;
    font-weight: 600 !important;
}



/* =========================================================
   DONACIONES - DISEÑO PREMIUM L2 FRIENDLY
   ========================================================= */

.promo.donate {
    position: relative;
    overflow: hidden;
    min-height: 390px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    border: 1px solid rgba(201, 161, 74, .38);
    background:
        radial-gradient(circle at 50% 15%, rgba(201,161,74,.16), transparent 42%),
        linear-gradient(145deg, rgba(10,13,18,.98), rgba(18,16,12,.98));
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.04),
        0 15px 45px rgba(0,0,0,.35);
}

.promo.donate::before {
    content: "";
    position: absolute;
    inset: 12px;
    border: 1px solid rgba(201,161,74,.12);
    pointer-events: none;
}

.donation-glow {
    position: absolute;
    width: 420px;
    height: 420px;
    left: 50%;
    top: 42%;
    transform: translate(-50%, -50%);
    background: radial-gradient(circle, rgba(201,161,74,.13), transparent 68%);
    pointer-events: none;
}

.donation-content {
    position: relative;
    z-index: 2;
    width: min(760px, 92%);
    padding: 45px 20px;
}

.donation-icon {
    width: 58px;
    height: 58px;
    margin: 0 auto 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(221,181,82,.65);
    border-radius: 50%;
    color: #e1bb61;
    font-size: 24px;
    background: rgba(201,161,74,.08);
    box-shadow:
        0 0 18px rgba(201,161,74,.18),
        inset 0 0 15px rgba(201,161,74,.08);
}

.donation-eyebrow {
    display: block;
    margin-bottom: 8px;
    color: rgba(225,187,97,.75);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 3px;
}

.donation-heading h3 {
    margin: 0;
    font-family: Cinzel, serif;
    font-size: clamp(27px, 4vw, 42px);
    letter-spacing: 1px;
    color: #f2eee4;
}

.donation-heading h3 span {
    color: #dfb958;
    text-shadow: 0 0 18px rgba(223,185,88,.2);
}

.donation-heading p {
    max-width: 620px;
    margin: 15px auto 28px;
    color: rgba(255,255,255,.68);
    font-size: 14px;
    line-height: 1.75;
}

.donation-benefits {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    max-width: 700px;
    margin: 0 auto 28px;
}

.donation-benefits > div {
    padding: 16px 10px;
    border: 1px solid rgba(255,255,255,.07);
    background: rgba(255,255,255,.025);
}

.donation-benefits span {
    display: block;
    margin-bottom: 7px;
    color: #dfb958;
    font-size: 12px;
}

.donation-benefits strong {
    display: block;
    color: #eee;
    font-size: 12px;
    letter-spacing: .4px;
}

.donation-benefits small {
    display: block;
    margin-top: 5px;
    color: rgba(255,255,255,.42);
    font-size: 10px;
}

.donation-button {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    min-width: 190px;
    min-height: 48px;
    padding: 0 28px !important;
    border: 1px solid #d9b45b !important;
    color: #17130b !important;
    background: linear-gradient(135deg, #f0ce78, #c59632) !important;
    font-weight: 800 !important;
    letter-spacing: 1px;
    box-shadow:
        0 8px 25px rgba(201,161,74,.18),
        inset 0 1px 0 rgba(255,255,255,.35);
    transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}

.donation-button:hover {
    transform: translateY(-2px);
    filter: brightness(1.08);
    box-shadow:
        0 12px 32px rgba(201,161,74,.28),
        0 0 18px rgba(201,161,74,.12);
}

.donation-note {
    display: block;
    margin-top: 13px;
    color: rgba(255,255,255,.35);
    font-size: 10px;
    letter-spacing: .4px;
}

@media (max-width: 700px) {
    .promo.donate {
        min-height: auto;
    }

    .donation-content {
        padding: 38px 15px;
    }

    .donation-benefits {
        grid-template-columns: 1fr;
        max-width: 320px;
    }

    .donation-heading p {
        font-size: 13px;
    }
}


/* =========================================================
   L2 FRIENDLY — REDISEÑO COMPLETO DE PROMOS
   DESCARGAS / DISCORD / DONACIONES
   ========================================================= */

.promos {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 22px !important;
    padding-top: 22px !important;
}

/* Cada promoción ocupa una sección completa */
.promos .promo {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    height: 360px !important;
    min-height: 360px !important;
    margin: 0 !important;
    position: relative !important;
    overflow: hidden !important;
    display: flex !important;
    align-items: center !important;
    border-radius: 2px;
    box-sizing: border-box !important;
}

/* =========================================================
   FONDO / IMAGEN
   ========================================================= */

.promos .promo .promo-art {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    opacity: 1 !important;
    background-position: center !important;
    background-size: cover !important;
    transition: transform .5s ease, filter .5s ease;
}

.promos .promo:hover .promo-art {
    transform: scale(1.025);
}

/* Oscurecimiento general */
.promos .promo::after {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: 1 !important;
    background:
        linear-gradient(
            90deg,
            rgba(1,7,14,.18) 0%,
            rgba(1,7,14,.30) 35%,
            rgba(1,7,14,.86) 62%,
            rgba(1,7,14,.97) 100%
        ) !important;
    pointer-events: none;
}

/* Línea interior elegante */
.promos .promo::before {
    content: "" !important;
    position: absolute !important;
    inset: 10px !important;
    z-index: 2 !important;
    border: 1px solid rgba(255,255,255,.08);
    pointer-events: none;
}

/* =========================================================
   DESCARGAS
   ========================================================= */

.promos .promo.download {
    border: 1px solid #247eb1 !important;
    background: #061421;
}

.promos .promo.download .promo-art {
    background-image: url("assets/download-art.jpg") !important;
    background-position: center left !important;
}

.promos .promo.download::after {
    background:
        linear-gradient(
            90deg,
            rgba(1,7,14,.08) 0%,
            rgba(1,7,14,.18) 32%,
            rgba(1,7,14,.76) 57%,
            rgba(1,7,14,.97) 100%
        ) !important;
}

.promos .promo.download > div:last-child {
    position: relative !important;
    z-index: 4 !important;
    width: 48% !important;
    margin-left: auto !important;
    margin-right: 7% !important;
    padding: 20px !important;
    text-align: left !important;
}

.promos .promo.download h3 {
    margin: 0 0 10px !important;
    font: 600 clamp(28px,4vw,46px) Cinzel, serif !important;
    line-height: 1.02 !important;
    color: #fff1bd !important;
    text-shadow: 0 2px 12px rgba(0,0,0,.9);
}

.promos .promo.download p {
    margin: 0 0 22px !important;
    font-size: 14px !important;
    color: #d8e5f2 !important;
}

.promos .promo.download .outline {
    padding: 13px 25px !important;
    font-size: 12px !important;
    border-color: #e5aa35 !important;
    background: rgba(0,0,0,.22);
}

/* =========================================================
   DISCORD
   ========================================================= */

.promos .promo.discord {
    border: 1px solid #6650d2 !important;
    background: #07091b;
}

.promos .promo.discord .promo-art {
    background-image: url("assets/discord-art.jpg") !important;
    background-position: center right !important;
}

.promos .promo.discord::after {
    background:
        linear-gradient(
            270deg,
            rgba(7,5,25,.08) 0%,
            rgba(7,5,25,.18) 32%,
            rgba(7,5,25,.78) 57%,
            rgba(7,5,25,.98) 100%
        ) !important;
}

.promos .promo.discord > div:last-child {
    position: relative !important;
    z-index: 4 !important;
    width: 48% !important;
    margin-left: 7% !important;
    margin-right: auto !important;
    padding: 20px !important;
    text-align: left !important;
}

.promos .promo.discord h3 {
    margin: 0 0 10px !important;
    font: 600 clamp(28px,4vw,46px) Cinzel, serif !important;
    line-height: 1.02 !important;
    color: #e5dcff !important;
    text-shadow: 0 2px 14px rgba(0,0,0,.95);
}

.promos .promo.discord p {
    margin: 0 0 22px !important;
    font-size: 14px !important;
    color: #dce0f2 !important;
}

.promos .promo.discord .outline {
    padding: 13px 25px !important;
    font-size: 12px !important;
    border-color: #8872ee !important;
    background: rgba(25,18,70,.35);
}

/* =========================================================
   DONACIONES
   ========================================================= */

.promos .promo.donate {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    height: 360px !important;
    min-height: 360px !important;
    margin: 0 !important;
}

/* Conservamos el diseño premium */
.promos .promo.donate .donation-content {
    position: relative !important;
    z-index: 5 !important;
    width: min(850px, 92%) !important;
    max-width: 850px !important;
    margin: 0 auto !important;
    padding: 30px 20px !important;
    box-sizing: border-box !important;
}

.promos .promo.donate .donation-icon {
    width: 50px !important;
    height: 50px !important;
    margin-bottom: 12px !important;
}

.promos .promo.donate .donation-heading h3 {
    font-size: clamp(28px,4vw,44px) !important;
    margin-bottom: 8px !important;
}

.promos .promo.donate .donation-heading p {
    max-width: 650px !important;
    margin: 0 auto 18px !important;
}

.promos .promo.donate .donation-benefits {
    max-width: 760px !important;
    margin: 0 auto 18px !important;
}

.promos .promo.donate .donation-button {
    margin-top: 0 !important;
}

/* =========================================================
   SEPARADORES VISUALES
   ========================================================= */

.promos .promo.download {
    box-shadow:
        0 18px 45px rgba(0,0,0,.35),
        inset 0 1px 0 rgba(90,180,230,.08);
}

.promos .promo.discord {
    box-shadow:
        0 18px 45px rgba(0,0,0,.35),
        inset 0 1px 0 rgba(130,110,255,.10);
}

.promos .promo.donate {
    box-shadow:
        0 18px 45px rgba(0,0,0,.35),
        inset 0 1px 0 rgba(255,210,100,.08);
}

/* =========================================================
   MÓVIL
   ========================================================= */

@media (max-width: 700px) {

    .promos {
        gap: 16px !important;
        padding-top: 16px !important;
    }

    .promos .promo,
    .promos .promo.donate {
        height: 390px !important;
        min-height: 390px !important;
    }

    .promos .promo::after {
        background:
            linear-gradient(
                180deg,
                rgba(1,7,14,.18) 0%,
                rgba(1,7,14,.45) 35%,
                rgba(1,7,14,.96) 75%,
                rgba(1,7,14,.99) 100%
            ) !important;
    }

    .promos .promo.download > div:last-child,
    .promos .promo.discord > div:last-child {
        width: 82% !important;
        margin: auto !important;
        padding: 20px !important;
        align-self: flex-end !important;
        margin-bottom: 28px !important;
    }

    .promos .promo.download h3,
    .promos .promo.discord h3 {
        font-size: 30px !important;
    }

    .promos .promo.donate .donation-content {
        width: 94% !important;
        padding: 25px 12px !important;
    }

    .promos .promo.donate .donation-benefits {
        grid-template-columns: 1fr !important;
        gap: 8px !important;
    }
}

/* =========================================================
   PROMOS — REDISEÑO FINAL L2 FRIENDLY
   ========================================================= */

.promos {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 20px !important;
    padding: 22px 0 10px !important;
}

/* TARJETAS */
.promos > .promo {
    position: relative !important;
    width: 100% !important;
    height: 330px !important;
    min-height: 330px !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    display: flex !important;
    align-items: stretch !important;
    box-sizing: border-box !important;
    border-radius: 2px !important;
}

/* Imagen */
.promos > .promo .promo-art {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    opacity: 1 !important;
    background-repeat: no-repeat !important;
    background-size: auto 100% !important;
    transition: transform .5s ease !important;
    z-index: 0 !important;
}

.promos > .promo:hover .promo-art {
    transform: scale(1.02) !important;
}

/* Oscurecimiento general */
.promos > .promo::after {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: 1 !important;
    pointer-events: none !important;
}

/* Marco interior */
.promos > .promo::before {
    content: "" !important;
    position: absolute !important;
    inset: 9px !important;
    z-index: 5 !important;
    border: 1px solid rgba(255,255,255,.08) !important;
    pointer-events: none !important;
}


/* =========================================================
   DESCARGAS
   ========================================================= */

.promos > .promo.download {
    border: 1px solid #287fae !important;
    background: #06111a !important;
}

/*
   La imagen queda únicamente como arte de fondo.
   El panel derecho tapa el texto que ya viene dentro
   de download-art.jpg.
*/
.promos > .promo.download .promo-art {
    background-image: url("assets/download-art.jpg") !important;
    background-position: left center !important;
}

.promos > .promo.download::after {
    background:
        linear-gradient(
            90deg,
            rgba(3,10,17,.05) 0%,
            rgba(3,10,17,.08) 38%,
            rgba(3,10,17,.72) 52%,
            rgba(3,10,17,.97) 64%,
            rgba(3,10,17,1) 100%
        ) !important;
}

/* Panel de texto */
.promos > .promo.download > div:last-child {
    position: relative !important;
    z-index: 4 !important;
    width: 43% !important;
    margin-left: auto !important;
    margin-right: 6% !important;
    padding: 35px 25px !important;
    align-self: center !important;
    box-sizing: border-box !important;
    text-align: left !important;
}

/* Ocultar cualquier elemento visual innecesario dentro */
.promos > .promo.download h3 {
    margin: 0 0 12px !important;
    font-family: Cinzel, serif !important;
    font-size: clamp(27px, 3vw, 42px) !important;
    font-weight: 600 !important;
    line-height: 1.05 !important;
    letter-spacing: .5px !important;
    color: #f2d58b !important;
    text-shadow: 0 2px 12px rgba(0,0,0,.95) !important;
}

.promos > .promo.download p {
    margin: 0 0 22px !important;
    color: #cbd9e3 !important;
    font-size: 13px !important;
    line-height: 1.6 !important;
}

.promos > .promo.download .outline {
    display: inline-block !important;
    padding: 11px 23px !important;
    border: 1px solid #d6a43b !important;
    background: rgba(8,12,16,.65) !important;
    color: #f5df9f !important;
    font-size: 11px !important;
    letter-spacing: 1px !important;
    transition: .25s ease !important;
}

.promos > .promo.download .outline:hover {
    background: #d6a43b !important;
    color: #080b0e !important;
}


/* =========================================================
   DONACIONES
   ========================================================= */

.promos > .promo.donate {
    border: 1px solid rgba(196,155,70,.55) !important;
    background:
        radial-gradient(
            circle at 50% 0%,
            rgba(205,165,77,.14),
            transparent 48%
        ),
        linear-gradient(
            145deg,
            #0a0d11,
            #15120c
        ) !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
}

.promos > .promo.donate .promo-art {
    display: none !important;
}

.promos > .promo.donate::after {
    background:
        radial-gradient(
            circle at center,
            rgba(201,161,74,.08),
            transparent 55%
        ) !important;
}

.promos > .promo.donate .donation-glow {
    position: absolute !important;
    inset: 0 !important;
    pointer-events: none !important;
}

.promos > .promo.donate .donation-content {
    position: relative !important;
    z-index: 6 !important;
    width: min(850px, 90%) !important;
    max-width: 850px !important;
    margin: 0 auto !important;
    padding: 25px 20px !important;
    box-sizing: border-box !important;
    text-align: center !important;
}

/* Icono */
.promos > .promo.donate .donation-icon {
    width: 42px !important;
    height: 42px !important;
    margin: 0 auto 8px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Encabezado */
.promos > .promo.donate .donation-eyebrow {
    font-size: 8px !important;
    letter-spacing: 3px !important;
}

.promos > .promo.donate .donation-heading h3 {
    margin: 3px 0 8px !important;
    font-family: Cinzel, serif !important;
    font-size: clamp(25px, 3vw, 39px) !important;
    line-height: 1.05 !important;
}

.promos > .promo.donate .donation-heading p {
    max-width: 600px !important;
    margin: 0 auto 15px !important;
    font-size: 11px !important;
    line-height: 1.55 !important;
}

/* Beneficios */
.promos > .promo.donate .donation-benefits {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 10px !important;
    max-width: 700px !important;
    margin: 0 auto 15px !important;
}

.promos > .promo.donate .donation-benefits > div {
    min-height: 45px !important;
    padding: 8px !important;
    box-sizing: border-box !important;
}

.promos > .promo.donate .donation-benefits strong {
    font-size: 9px !important;
}

.promos > .promo.donate .donation-benefits small {
    font-size: 7px !important;
}

.promos > .promo.donate .donation-button {
    display: inline-block !important;
    margin: 0 auto !important;
    padding: 10px 25px !important;
    font-size: 10px !important;
    letter-spacing: 1px !important;
}

.promos > .promo.donate .donation-note {
    display: block !important;
    margin-top: 8px !important;
    font-size: 7px !important;
    opacity: .55 !important;
}


/* =========================================================
   DISCORD
   ========================================================= */

.promos > .promo.discord {
    border: 1px solid #6650d2 !important;
    background: #08091a !important;
}

.promos > .promo.discord .promo-art {
    background-image: url("assets/discord-art.jpg") !important;
    background-position: right center !important;
}

.promos > .promo.discord::after {
    background:
        linear-gradient(
            270deg,
            rgba(5,5,18,.05) 0%,
            rgba(5,5,18,.10) 38%,
            rgba(5,5,18,.72) 52%,
            rgba(5,5,18,.97) 64%,
            rgba(5,5,18,1) 100%
        ) !important;
}

/* Panel izquierdo */
.promos > .promo.discord > div:last-child {
    position: relative !important;
    z-index: 4 !important;
    width: 43% !important;
    margin-left: 6% !important;
    margin-right: auto !important;
    padding: 35px 25px !important;
    align-self: center !important;
    box-sizing: border-box !important;
    text-align: left !important;
}

.promos > .promo.discord h3 {
    margin: 0 0 12px !important;
    font-family: Cinzel, serif !important;
    font-size: clamp(27px, 3vw, 42px) !important;
    font-weight: 600 !important;
    line-height: 1.05 !important;
    color: #e4ddff !important;
    text-shadow: 0 2px 14px rgba(0,0,0,.95) !important;
}

.promos > .promo.discord p {
    margin: 0 0 22px !important;
    color: #d0d3e5 !important;
    font-size: 13px !important;
    line-height: 1.6 !important;
}

.promos > .promo.discord .outline {
    display: inline-block !important;
    padding: 11px 23px !important;
    border: 1px solid #8170e9 !important;
    background: rgba(20,15,55,.65) !important;
    color: #e5ddff !important;
    font-size: 11px !important;
    letter-spacing: 1px !important;
    transition: .25s ease !important;
}

.promos > .promo.discord .outline:hover {
    background: #7160d8 !important;
    color: #fff !important;
}


/* =========================================================
   MÓVIL
   ========================================================= */

@media (max-width: 700px) {

    .promos {
        gap: 16px !important;
        padding-top: 16px !important;
    }

    .promos > .promo {
        height: 370px !important;
        min-height: 370px !important;
    }

    .promos > .promo.download .promo-art,
    .promos > .promo.discord .promo-art {
        background-size: auto 100% !important;
    }

    .promos > .promo.download::after,
    .promos > .promo.discord::after {
        background:
            linear-gradient(
                180deg,
                rgba(3,8,14,.05) 0%,
                rgba(3,8,14,.10) 35%,
                rgba(3,8,14,.78) 62%,
                rgba(3,8,14,1) 100%
            ) !important;
    }

    .promos > .promo.download > div:last-child,
    .promos > .promo.discord > div:last-child {
        width: 86% !important;
        margin: auto !important;
        margin-top: auto !important;
        margin-bottom: 25px !important;
        padding: 18px !important;
        align-self: flex-end !important;
        text-align: center !important;
    }

    .promos > .promo.download h3,
    .promos > .promo.discord h3 {
        font-size: 29px !important;
    }

    .promos > .promo.download p,
    .promos > .promo.discord p {
        font-size: 12px !important;
    }

    .promos > .promo.donate {
        height: 370px !important;
        min-height: 370px !important;
    }

    .promos > .promo.donate .donation-content {
        width: 94% !important;
        padding: 20px 10px !important;
    }

    .promos > .promo.donate .donation-benefits {
        grid-template-columns: 1fr !important;
        gap: 5px !important;
    }

    .promos > .promo.donate .donation-benefits > div {
        min-height: 35px !important;
        padding: 5px !important;
    }
}

/* =========================================================
   PROMOS — DISEÑO LIMPIO DEFINITIVO
   ========================================================= */

/* Contenedor */
.promos {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 18px !important;
    padding-top: 20px !important;
    padding-bottom: 20px !important;
}

/* Las 3 tarjetas tienen exactamente el mismo tamaño */
.promos > .promo {
    position: relative !important;
    width: 100% !important;
    height: 300px !important;
    min-height: 300px !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    display: block !important;
    box-sizing: border-box !important;
    border-radius: 2px !important;
}

/* =========================================================
   DESCARGAS — USAR EL ARTWORK COMPLETO
   ========================================================= */

.promos > .promo.download {
    border: 1px solid #287fae !important;
    background: #050b11 !important;
    cursor: pointer !important;
}

.promos > .promo.download .promo-art {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background-image: url("assets/download-art.jpg") !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
    opacity: 1 !important;
    z-index: 0 !important;
    transition: transform .45s ease !important;
}

.promos > .promo.download:hover .promo-art {
    transform: scale(1.015) !important;
}

/* Eliminamos completamente el texto HTML duplicado */
.promos > .promo.download > div:last-child {
    display: none !important;
}

/* No oscurecer el artwork */
.promos > .promo.download::after {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    background: transparent !important;
    z-index: 1 !important;
    pointer-events: none !important;
}

/* Marco elegante */
.promos > .promo.download::before {
    content: "" !important;
    position: absolute !important;
    inset: 8px !important;
    border: 1px solid rgba(255,255,255,.10) !important;
    z-index: 3 !important;
    pointer-events: none !important;
}


/* =========================================================
   DONACIONES — PREMIUM
   ========================================================= */

.promos > .promo.donate {
    height: 300px !important;
    min-height: 300px !important;
    border: 1px solid rgba(201,161,74,.55) !important;
    background:
        radial-gradient(
            circle at 50% 0%,
            rgba(201,161,74,.18),
            transparent 52%
        ),
        linear-gradient(
            145deg,
            #0b0e12,
            #17130c
        ) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Sin artwork accidental */
.promos > .promo.donate .promo-art {
    display: none !important;
}

/* Luz ambiental */
.promos > .promo.donate .donation-glow {
    position: absolute !important;
    inset: 0 !important;
    pointer-events: none !important;
}

/* Contenido */
.promos > .promo.donate .donation-content {
    position: relative !important;
    z-index: 5 !important;
    width: 90% !important;
    max-width: 820px !important;
    margin: 0 auto !important;
    padding: 18px 20px !important;
    box-sizing: border-box !important;
    text-align: center !important;
}

/* Icono */
.promos > .promo.donate .donation-icon {
    width: 38px !important;
    height: 38px !important;
    margin: 0 auto 5px !important;
}

/* Pequeño encabezado */
.promos > .promo.donate .donation-eyebrow {
    font-size: 7px !important;
    letter-spacing: 3px !important;
}

/* Título */
.promos > .promo.donate .donation-heading h3 {
    margin: 3px 0 7px !important;
    font-family: Cinzel, serif !important;
    font-size: clamp(25px, 3vw, 36px) !important;
    line-height: 1.05 !important;
}

/* Descripción */
.promos > .promo.donate .donation-heading p {
    max-width: 620px !important;
    margin: 0 auto 12px !important;
    font-size: 10px !important;
    line-height: 1.45 !important;
}

/* Beneficios */
.promos > .promo.donate .donation-benefits {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 8px !important;
    max-width: 680px !important;
    margin: 0 auto 12px !important;
}

.promos > .promo.donate .donation-benefits > div {
    padding: 7px !important;
    min-height: 38px !important;
    box-sizing: border-box !important;
}

.promos > .promo.donate .donation-benefits strong {
    font-size: 8px !important;
}

.promos > .promo.donate .donation-benefits small {
    font-size: 7px !important;
}

/* Botón */
.promos > .promo.donate .donation-button {
    display: inline-block !important;
    margin: 0 auto !important;
    padding: 9px 24px !important;
    font-size: 9px !important;
}

/* Nota */
.promos > .promo.donate .donation-note {
    display: block !important;
    margin-top: 5px !important;
    font-size: 7px !important;
    opacity: .55 !important;
}

/* Marco */
.promos > .promo.donate::before {
    content: "" !important;
    position: absolute !important;
    inset: 8px !important;
    border: 1px solid rgba(255,255,255,.07) !important;
    z-index: 4 !important;
    pointer-events: none !important;
}

.promos > .promo.donate::after {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    background: transparent !important;
    pointer-events: none !important;
}


/* =========================================================
   DISCORD — USAR EL ARTWORK COMPLETO
   ========================================================= */

.promos > .promo.discord {
    border: 1px solid #6650d2 !important;
    background: #060613 !important;
    cursor: pointer !important;
}

.promos > .promo.discord .promo-art {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background-image: url("assets/discord-art.jpg") !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
    opacity: 1 !important;
    z-index: 0 !important;
    transition: transform .45s ease !important;
}

.promos > .promo.discord:hover .promo-art {
    transform: scale(1.015) !important;
}

/* Eliminamos texto HTML duplicado */
.promos > .promo.discord > div:last-child {
    display: none !important;
}

/* Sin overlay */
.promos > .promo.discord::after {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    background: transparent !important;
    z-index: 1 !important;
    pointer-events: none !important;
}

/* Marco */
.promos > .promo.discord::before {
    content: "" !important;
    position: absolute !important;
    inset: 8px !important;
    border: 1px solid rgba(255,255,255,.10) !important;
    z-index: 3 !important;
    pointer-events: none !important;
}


/* =========================================================
   MÓVIL
   ========================================================= */

@media (max-width: 700px) {

    .promos {
        gap: 14px !important;
        padding-top: 14px !important;
    }

    .promos > .promo,
    .promos > .promo.donate {
        height: 280px !important;
        min-height: 280px !important;
    }

    .promos > .promo.download .promo-art,
    .promos > .promo.discord .promo-art {
        background-size: cover !important;
    }

    .promos > .promo.donate .donation-content {
        width: 94% !important;
        padding: 12px 8px !important;
    }

    .promos > .promo.donate .donation-heading h3 {
        font-size: 24px !important;
    }

    .promos > .promo.donate .donation-heading p {
        font-size: 9px !important;
        margin-bottom: 9px !important;
    }

    .promos > .promo.donate .donation-benefits {
        grid-template-columns: 1fr !important;
        gap: 4px !important;
        margin-bottom: 8px !important;
    }

    .promos > .promo.donate .donation-benefits > div {
        min-height: 25px !important;
        padding: 4px !important;
    }

    .promos > .promo.donate .donation-benefits small {
        display: none !important;
    }
}

/* =========================================================
   AJUSTE FINAL — BANNERS COMPLETOS SIN RECORTE
   ========================================================= */

.promos {
    gap: 16px !important;
}

/* Las tres tarjetas */
.promos > .promo,
.promos > .promo.donate {
    height: 220px !important;
    min-height: 220px !important;
    width: 100% !important;
}

/* DESCARGAS Y DISCORD: mostrar artwork completo */
.promos > .promo.download .promo-art,
.promos > .promo.discord .promo-art {
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;

    background-size: 100% 100% !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;

    transform: none !important;
}

/* No oscurecer las imágenes */
.promos > .promo.download::after,
.promos > .promo.discord::after {
    background: transparent !important;
}

/* Sin zoom al pasar el mouse */
.promos > .promo.download:hover .promo-art,
.promos > .promo.discord:hover .promo-art {
    transform: none !important;
}

/* Marco muy discreto */
.promos > .promo.download::before,
.promos > .promo.discord::before {
    inset: 6px !important;
    border-color: rgba(255,255,255,.08) !important;
}

/* DONACIONES */
.promos > .promo.donate {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.promos > .promo.donate .donation-content {
    padding: 12px 20px !important;
}

/* Móvil */
@media (max-width: 700px) {

    .promos > .promo,
    .promos > .promo.donate {
        height: 220px !important;
        min-height: 220px !important;
    }

    .promos > .promo.download .promo-art,
    .promos > .promo.discord .promo-art {
        background-size: 100% 100% !important;
    }
}


/* =========================================================
   DONACIONES — PAYPAL / BINANCE
   ========================================================= */

.donation-amounts {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 7px;
    margin: 12px auto;
}

.donation-amount {
    min-width: 58px;
    padding: 8px 13px;
    border: 1px solid rgba(201,161,74,.38);
    background: rgba(0,0,0,.22);
    color: #e7d39b;
    cursor: pointer;
    font-family: inherit;
    font-size: 10px;
    transition: .2s ease;
}

.donation-amount:hover,
.donation-amount.active {
    background: rgba(201,161,74,.18);
    border-color: #d4ae58;
    color: #fff1bd;
}

.donation-amount.custom {
    min-width: 65px;
}

.donation-methods {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    max-width: 650px;
    margin: 10px auto 8px;
}

.donation-method {
    min-height: 50px;
    padding: 7px 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    border: 1px solid rgba(255,255,255,.10);
    background: rgba(0,0,0,.28);
    color: #eee;
    cursor: pointer;
    text-align: left;
    transition: .2s ease;
}

.donation-method:hover:not(.disabled) {
    border-color: rgba(201,161,74,.65);
    background: rgba(201,161,74,.10);
}

.donation-method .method-logo {
    width: 25px;
    height: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255,255,255,.16);
    font-size: 13px;
}

.donation-method strong {
    display: block;
    font-size: 9px;
    letter-spacing: 1px;
}

.donation-method small {
    display: block;
    margin-top: 2px;
    font-size: 7px;
    opacity: .55;
}

.donation-method.disabled {
    opacity: .38;
    cursor: not-allowed;
}

.donation-method.paypal {
    border-color: rgba(80,130,210,.35);
}

.donation-method.binance {
    border-color: rgba(230,180,50,.35);
}

.donation-note {
    margin-top: 7px;
    font-size: 7px;
    opacity: .58;
}

.donation-modal {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(0,0,0,.78);
    backdrop-filter: blur(5px);
}

.donation-modal.open {
    display: flex;
}

.donation-modal-box {
    position: relative;
    width: min(440px, 94vw);
    padding: 32px 28px;
    box-sizing: border-box;
    border: 1px solid rgba(201,161,74,.55);
    background:
        radial-gradient(circle at 50% 0%, rgba(201,161,74,.14), transparent 55%),
        #0d1014;
    box-shadow: 0 25px 80px rgba(0,0,0,.65);
    text-align: center;
}

.donation-modal-close {
    position: absolute;
    top: 8px;
    right: 12px;
    border: 0;
    background: transparent;
    color: #aaa;
    font-size: 25px;
    cursor: pointer;
}

.donation-modal-icon {
    margin-bottom: 7px;
    color: #d7b15a;
    font-size: 24px;
}

.donation-modal-eyebrow {
    color: #b99b5c;
    font-size: 8px;
    letter-spacing: 3px;
}

.donation-modal-box h3 {
    margin: 7px 0 18px;
    font-family: Cinzel, serif;
    color: #f0d58e;
    font-size: 25px;
}

.donation-selected {
    padding: 10px;
    margin-bottom: 15px;
    border: 1px solid rgba(255,255,255,.08);
    background: rgba(255,255,255,.025);
}

.donation-selected span {
    display: block;
    font-size: 8px;
    opacity: .55;
}

.donation-selected strong {
    display: block;
    margin-top: 4px;
    color: #f0d58e;
    font-size: 20px;
}

.donation-payment-panel p {
    margin: 0 auto 15px;
    max-width: 340px;
    color: #c7ced5;
    font-size: 11px;
    line-height: 1.55;
}

.donation-pay-button {
    display: inline-block;
    width: 100%;
    box-sizing: border-box;
    padding: 12px 15px;
    border: 1px solid #c8a34f;
    background: rgba(201,161,74,.12);
    color: #f1d88f;
    text-decoration: none;
    font-size: 10px;
    letter-spacing: 1px;
    cursor: pointer;
    transition: .2s ease;
}

.donation-pay-button:hover {
    background: #c8a34f;
    color: #080a0d;
}

.donation-payment-panel > small {
    display: block;
    margin-top: 10px;
    color: #89929b;
    font-size: 8px;
    line-height: 1.5;
}

.binance-id-box {
    margin: 15px 0;
    padding: 13px;
    border: 1px solid rgba(230,180,50,.3);
    background: rgba(230,180,50,.06);
}

.binance-id-box span {
    display: block;
    margin-bottom: 5px;
    color: #9e8b61;
    font-size: 7px;
    letter-spacing: 2px;
}

.binance-id-box strong {
    color: #f0d58e;
    font-size: 23px;
    letter-spacing: 2px;
}

@media (max-width: 700px) {

    .donation-methods {
        grid-template-columns: 1fr;
        max-width: 300px;
    }

    .donation-method {
        min-height: 43px;
    }

    .donation-modal-box {
        padding: 27px 20px;
    }
}