/* ============================================================
   METIN2 QUERUBINES — Blue Premium Theme
   ============================================================ */

/* ── VARIABLES ─────────────────────────────────────────────── */
:root {
    --primary:       #0ea5e9;
    --primary-dark:  #0369a1;
    --primary-glow:  #38bdf8;
    --accent:        #6366f1;
    --bg-deep:       #020817;
    --bg-card:       #060f1e;
    --bg-card2:      #0a1628;
    --text-bright:   #e0f2fe;
    --text-main:     #bae6fd;
    --text-muted:    #7dd3fc;
    --border:        #1e3a5f;
    --gold:          #f59e0b;
    --gold-dim:      #92400e;
}

/* ── KEYFRAMES ──────────────────────────────────────────────── */
@keyframes fadeInDown {
    from { opacity: 0; transform: translateY(-18px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(18px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes glowPulse {
    0%, 100% { box-shadow: 0 0 8px rgba(14,165,233,0.4), 0 0 20px rgba(14,165,233,0.15); }
    50%       { box-shadow: 0 0 18px rgba(14,165,233,0.7), 0 0 40px rgba(14,165,233,0.3); }
}

@keyframes borderGlow {
    0%, 100% { border-color: rgba(14,165,233,0.3); }
    50%       { border-color: rgba(56,189,248,0.7); }
}

@keyframes shimmer {
    0%   { background-position: -400px 0; }
    100% { background-position: 400px 0; }
}

@keyframes floatY {
    0%, 100% { transform: translateY(0px); }
    50%       { transform: translateY(-6px); }
}

@keyframes scanline {
    0%   { transform: translateY(-100%); }
    100% { transform: translateY(100vh); }
}

@keyframes rankIn {
    from { opacity: 0; transform: translateX(-12px); }
    to   { opacity: 1; transform: translateX(0); }
}

@keyframes navSlide {
    from { opacity: 0; transform: translateY(-10px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ── BODY ───────────────────────────────────────────────────── */
body {
    background-color: var(--bg-deep);
    background-image:
        radial-gradient(ellipse 90% 40% at 50% 0%, rgba(14,165,233,0.12) 0%, transparent 65%),
        radial-gradient(ellipse 60% 30% at 80% 80%, rgba(99,102,241,0.07) 0%, transparent 60%);
}

/* ── NAV ────────────────────────────────────────────────────── */
nav {
    background: linear-gradient(90deg, #020c1e 0%, #061530 40%, #0a1e40 60%, #020c1e 100%);
    border-bottom: 1px solid rgba(14,165,233,0.35);
    box-shadow: 0 2px 30px rgba(14,165,233,0.18), 0 1px 0 rgba(56,189,248,0.1);
    padding: 10px 0;
    position: relative;
    z-index: 100;
    animation: fadeInDown 0.5s ease both;
}

/* Línea brillante en la parte inferior del nav */
nav::after {
    content: '';
    position: absolute;
    bottom: 0; left: 10%; right: 10%;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--primary-glow), transparent);
    opacity: 0.6;
}

nav ul li a {
    color: var(--text-bright);
    text-shadow: 0 0 10px rgba(14,165,233,0.3);
    font-family: 'Trajan Pro Bold';
    transition: color 0.25s, text-shadow 0.25s;
}

nav ul li a:hover,
nav ul li.active a {
    color: var(--primary-glow);
    text-shadow: 0 0 14px rgba(56,189,248,0.8);
}

nav ul li.language a {
    background: rgba(14,165,233,0.1);
    border: 1px solid rgba(14,165,233,0.25);
    border-radius: 20px;
    box-shadow: inset 0 1px 10px rgba(14,165,233,0.1);
}

nav ul li.signup a {
    background: linear-gradient(135deg, #0ea5e9 0%, #0369a1 100%);
    border-radius: 20px;
    box-shadow: 0 0 18px rgba(14,165,233,0.45), inset 0 1px 0 rgba(255,255,255,0.15);
    text-shadow: 0 1px 2px rgba(0,0,0,0.5);
    animation: glowPulse 3s ease-in-out infinite;
}

nav ul li.signup a:hover {
    filter: brightness(1.2);
}

.dropdown-content {
    background: #061530;
    border: 1px solid rgba(14,165,233,0.2);
    border-top: none;
    box-shadow: 0 8px 30px rgba(0,0,0,0.6);
}

.dropdown-content a {
    background-color: #061530 !important;
    border-left: 2px solid var(--primary) !important;
    color: var(--text-bright) !important;
    transition: background 0.2s, padding-left 0.2s;
    box-shadow: none !important;
}

.dropdown-content a:hover {
    background-color: #0a1e40 !important;
    padding-left: 38px !important;
    color: var(--primary-glow) !important;
}

/* ── CARDS ──────────────────────────────────────────────────── */
.card {
    margin-bottom: 6px;
    border: 1px solid rgba(14,165,233,0.1);
    border-radius: 2px;
    transition: border-color 0.3s, box-shadow 0.3s;
}

.card:hover {
    border-color: rgba(14,165,233,0.3);
    box-shadow: 0 0 20px rgba(14,165,233,0.08);
}

.card-title {
    color: var(--text-bright);
    background: linear-gradient(90deg, #020c1e 0%, #0a1e40 50%, #020c1e 100%);
    border-bottom: 1px solid rgba(14,165,233,0.3);
    text-shadow: 0 0 12px rgba(14,165,233,0.6);
    font-size: 12px !important;
    letter-spacing: 2px;
    text-transform: uppercase;
    padding: 12px 0;
    position: relative;
    overflow: hidden;
}

/* Shimmer en el título de la card */
.card-title::after {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: linear-gradient(90deg, transparent 0%, rgba(56,189,248,0.08) 50%, transparent 100%);
    background-size: 400px 100%;
    animation: shimmer 4s infinite linear;
}

.card-body {
    background-color: var(--bg-card);
    box-shadow: inset 0 -4px 20px rgba(0,0,0,0.5);
}

/* ── LARGE HREF (botón Download) ────────────────────────────── */
.large-href {
    background: linear-gradient(180deg, #0a1e40 0%, #061530 100%) !important;
    border-bottom: 1px solid rgba(14,165,233,0.2);
    color: var(--text-bright) !important;
    text-shadow: 0 0 10px rgba(14,165,233,0.5);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.large-href::before {
    content: '';
    position: absolute;
    top: 0; left: -100%;
    width: 60%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(14,165,233,0.12), transparent);
    transition: left 0.5s ease;
}

.large-href:hover::before {
    left: 150%;
}

.large-href:hover {
    background: linear-gradient(180deg, #0d2a55 0%, #0a1e40 100%) !important;
    color: var(--primary-glow) !important;
    text-shadow: 0 0 18px rgba(56,189,248,0.9);
}

/* ── INPUTS ─────────────────────────────────────────────────── */
.input-group .icon {
    color: var(--primary);
    text-shadow: 0 0 8px var(--primary);
    transition: color 0.3s, text-shadow 0.3s;
}

.input-group input {
    background-color: #030a14;
    border-bottom: 2px solid var(--primary-dark);
    color: var(--text-bright);
    box-shadow: 0 0 15px rgba(3,105,161,0.12);
    transition: border-color 0.3s, box-shadow 0.3s;
}

.input-group input:focus {
    border-bottom-color: var(--primary-glow);
    box-shadow: 0 0 20px rgba(14,165,233,0.25);
}

.input-group input:focus ~ .icon,
.input-group input:focus + .icon {
    color: var(--primary-glow);
    text-shadow: 0 0 12px var(--primary-glow);
}

/* ── BOTÓN ──────────────────────────────────────────────────── */
.btn {
    background: linear-gradient(135deg, #0ea5e9 0%, #0369a1 100%);
    border: none;
    border-top: 1px solid rgba(56,189,248,0.3);
    box-shadow: 0 0 20px rgba(14,165,233,0.3), inset 0 1px 0 rgba(255,255,255,0.1);
    color: #fff;
    text-shadow: 0 1px 2px rgba(0,0,0,0.4);
    letter-spacing: 1px;
    transition: all 0.25s ease;
    position: relative;
    overflow: hidden;
}

.btn::after {
    content: '';
    position: absolute;
    top: 0; left: -100%;
    width: 60%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.12), transparent);
    transition: left 0.4s ease;
}

.btn:hover::after {
    left: 150%;
}

.btn:hover {
    box-shadow: 0 0 30px rgba(14,165,233,0.55), inset 0 1px 0 rgba(255,255,255,0.15);
    filter: brightness(1.15);
}

/* ── FORGOT PASSWORD ────────────────────────────────────────── */
.forgot-password {
    background: linear-gradient(135deg, #0ea5e9 0%, #0369a1 100%) !important;
    color: var(--text-muted);
}

.forgot-password a {
    color: #fff;
    display: inline;
    text-decoration: underline;
}

/* ── USER MENU (logged in) ──────────────────────────────────── */
.card.statistics .card-body ul {
    padding: 8px 0;
    margin: 0;
}

.card.statistics .card-body ul li a {
    display: block;
    padding: 9px 20px;
    color: var(--text-main);
    border-left: 2px solid transparent;
    transition: all 0.2s ease;
    font-size: 13px;
    letter-spacing: 0.5px;
}

.card.statistics .card-body ul li a:hover {
    color: var(--primary-glow);
    border-left-color: var(--primary);
    background: rgba(14,165,233,0.07);
    padding-left: 26px;
}

/* ── NEWS ───────────────────────────────────────────────────── */
.card.news .card-title,
.card.news .card-body,
.news-body {
    background-color: var(--bg-card);
}

.news-title {
    color: var(--text-bright);
    text-shadow: 0 0 8px rgba(14,165,233,0.3);
}

.news-content {
    color: var(--text-muted);
    opacity: 1;
}

.news-footer {
    background: linear-gradient(90deg, #030a14, #061530);
    border-top: 1px solid var(--border);
}

.author { color: var(--primary-glow); }
.date-posted { color: var(--text-muted); }

.read-all-btn {
    background: rgba(14,165,233,0.1);
    border: 1px solid rgba(14,165,233,0.3);
    color: var(--text-bright);
    border-radius: 3px;
    transition: all 0.25s;
}

.read-all-btn:hover {
    background: var(--primary-dark);
    box-shadow: 0 0 14px rgba(14,165,233,0.4);
    color: #fff;
}

/* ── SLIDER ─────────────────────────────────────────────────── */
.slider .slide .content {
    background: linear-gradient(0deg, rgba(2,8,23,0.92) 0%, rgba(6,15,30,0.5) 60%, transparent 100%);
}

.slider .slide .content h2 {
    color: var(--text-bright);
    text-shadow: 0 0 14px rgba(14,165,233,0.6);
    letter-spacing: 2px;
}

.slider .slide .content p { color: var(--text-muted); }

.slider button {
    background: rgba(14,165,233,0.15);
    border: 1px solid rgba(14,165,233,0.3);
    color: var(--text-bright);
    transition: all 0.25s;
}

.slider button:hover {
    background: var(--primary-dark);
    box-shadow: 0 0 14px rgba(14,165,233,0.4);
}

/* ── RANKING ────────────────────────────────────────────────── */
.ranking {
    background-color: var(--bg-card);
}

.ranking th, .ranking td {
    border-bottom: 1px solid rgba(14,165,233,0.1);
}

.ranking thead { background: #030a14; }

.ranking th {
    color: var(--text-muted);
    letter-spacing: 1px;
    font-size: 11px;
    text-transform: uppercase;
}

.ranking tbody tr {
    animation: rankIn 0.4s ease both;
    transition: background 0.2s;
}

.ranking tbody tr:hover {
    background: rgba(14,165,233,0.06);
}

.ranking tbody td:nth-child(1) {
    background-color: #030a14;
    color: var(--primary-glow);
    text-shadow: 0 0 8px rgba(14,165,233,0.5);
    font-weight: bold;
}

.ranking,
.ranking tbody td:nth-child(2),
.ranking tbody td:nth-child(3),
.ranking tbody td:nth-child(4) {
    color: var(--text-main);
}

/* Top 3 dorado */
.ranking tbody tr:nth-child(1) td:nth-child(1) { color: #fbbf24; text-shadow: 0 0 8px rgba(251,191,36,0.6); }
.ranking tbody tr:nth-child(2) td:nth-child(1) { color: #94a3b8; text-shadow: 0 0 8px rgba(148,163,184,0.5); }
.ranking tbody tr:nth-child(3) td:nth-child(1) { color: #b45309; text-shadow: 0 0 8px rgba(180,83,9,0.5); }

/* ── STATISTICS ─────────────────────────────────────────────── */
.card.statistics ul { margin: 0; padding: 6px 0; }

.card.statistics ul li {
    background: transparent;
    border-bottom: 1px solid rgba(14,165,233,0.1);
    box-shadow: none;
    color: var(--text-main);
    padding: 10px 16px;
    font-size: 12px;
    transition: background 0.2s;
}

.card.statistics ul li:hover {
    background: rgba(14,165,233,0.05);
}

.card.statistics ul li strong {
    color: var(--primary-glow);
    text-shadow: 0 0 6px rgba(14,165,233,0.4);
    transition: color 0.3s ease, text-shadow 0.3s ease, transform 0.3s ease;
}

.card.statistics ul li strong.stat-updated {
    color: #22d3ee;
    text-shadow: 0 0 12px rgba(34,211,238,0.8), 0 0 24px rgba(34,211,238,0.4);
    transform: scale(1.15);
}

/* ── ACCOUNT TABLE ──────────────────────────────────────────── */
.account-table tr { background-color: #0a1628; }
.account-table tr td {
    border-bottom: 1px solid #061530;
    color: var(--text-main);
}
.account-table tr:nth-child(2n) { background-color: #060f1e !important; }
.account-table .glow {
    color: var(--primary-glow);
    text-shadow: 0 0 6px rgba(14,165,233,0.5);
}

/* ── SPECS TABLE ────────────────────────────────────────────── */
.specs-table tr { background-color: #0a1628; color: var(--text-bright); }
.specs-table .odd { background-color: #060f1e; }

/* ── ALERTS ─────────────────────────────────────────────────── */
.alert-danger {
    background: rgba(239,68,68,0.1);
    border: 1px solid rgba(239,68,68,0.35);
    color: #fca5a5;
    border-radius: 4px;
    padding: 10px 15px;
    margin-bottom: 8px;
    animation: fadeInDown 0.3s ease;
}

.alert-success {
    background: rgba(34,197,94,0.1);
    border: 1px solid rgba(34,197,94,0.35);
    color: #86efac;
    border-radius: 4px;
    padding: 10px 15px;
    animation: fadeInDown 0.3s ease;
}

.alert-info {
    background: rgba(14,165,233,0.1);
    border: 1px solid rgba(14,165,233,0.35);
    color: var(--text-bright);
    border-radius: 4px;
    padding: 10px 15px;
}

/* ── FOOTER ─────────────────────────────────────────────────── */
footer .left-text,
footer .right-text { color: var(--text-muted); }

footer span { color: var(--text-bright); }
footer span a { color: var(--primary); }

/* ── HERO ───────────────────────────────────────────────────── */
.hero-top {
    position: relative;
    z-index: 1;
}

/* Overlay azul sutil sobre el hero */
.hero-top::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,
        rgba(2,8,23,0.35) 0%,
        transparent 40%,
        rgba(2,8,23,0.6) 100%);
    pointer-events: none;
    z-index: 0;
}

/* El contenedor principal siempre encima del hero y col-full */
.container {
    position: relative;
    z-index: 10;
}

/* col-full es solo decorativo, siempre detrás */
.col-full {
    position: relative;
    z-index: -1;
}

/* ── LOGO ANIMADO ───────────────────────────────────────────── */
.logo {
    animation: floatY 5s ease-in-out infinite;
    filter: drop-shadow(0 0 20px rgba(14,165,233,0.35));
    transition: filter 0.4s;
}

.logo:hover {
    filter: drop-shadow(0 0 35px rgba(56,189,248,0.7)) brightness(1.2);
}

/* ── SIDENAV TRIGGER ────────────────────────────────────────── */
.sidenav-trigger {
    background: #020c1e;
    border-bottom: 1px solid rgba(14,165,233,0.2);
    color: var(--primary);
}

/* ── SCROLLBAR ──────────────────────────────────────────────── */
::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: var(--bg-deep); }
::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, var(--primary), var(--primary-dark));
    border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover { background: var(--primary-glow); }

/* ── PAGINATION ─────────────────────────────────────────────── */
.pagination a,
.pagination span {
    color: var(--primary);
    border: 1px solid var(--border);
    background: var(--bg-card);
    padding: 5px 12px;
    border-radius: 3px;
    margin: 0 2px;
    transition: all 0.2s;
}

.pagination a:hover {
    background: var(--primary-dark);
    color: #fff;
    box-shadow: 0 0 10px rgba(14,165,233,0.3);
}

/* ── LINKS GLOBALES ─────────────────────────────────────────── */
nav ul li a,
.card-title a,
.forgot-password a,
footer span a {
    color: var(--primary);
}

/* ── TABLE FORM ─────────────────────────────────────────────── */
.table.table-hover {
    border-collapse: collapse;
}

.table.table-hover td {
    padding: 6px 0;
}

/* ══════════════════════════════════════════════════════════════
   RIPPLE DE CLICK
══════════════════════════════════════════════════════════════ */
@keyframes fxRipple {
    0%   { transform: translate(-50%,-50%) scale(0); opacity: 0.7; }
    100% { transform: translate(-50%,-50%) scale(3.5); opacity: 0; }
}

.fx-ripple {
    position: fixed;
    width: 40px; height: 40px;
    border-radius: 50%;
    border: 1.5px solid rgba(56,189,248,0.8);
    pointer-events: none;
    z-index: 99998;
    animation: fxRipple 0.65s ease-out forwards;
}

/* ══════════════════════════════════════════════════════════════
   CANVAS DE PARTÍCULAS — siempre detrás del contenido
══════════════════════════════════════════════════════════════ */
#fx-particles {
    z-index: 0;
}

/* Asegura que el contenido quede sobre el canvas */
nav, .container, footer, .sidenav-trigger {
    position: relative;
    z-index: 10;
}

/* ══════════════════════════════════════════════════════════════
   ANIMACIÓN EXTRA — borde de card pulsante al hover
══════════════════════════════════════════════════════════════ */
.card:hover {
    box-shadow: 0 0 22px rgba(14,165,233,0.25), 0 0 40px rgba(14,165,233,0.08) !important;
    border-color: rgba(14,165,233,0.4) !important;
}

/* ══════════════════════════════════════════════════════════════
   RANKING TOP 1 — fila dorada especial
══════════════════════════════════════════════════════════════ */
@keyframes goldRow {
    0%, 100% { background: rgba(251,191,36,0.04); }
    50%       { background: rgba(251,191,36,0.09); }
}

.ranking tbody tr:nth-child(1) {
    animation: goldRow 3s ease-in-out infinite;
}

.ranking tbody tr:nth-child(1) td {
    color: #fbbf24 !important;
}

/* ══════════════════════════════════════════════════════════════
   INPUT FOCUS — borde lateral izquierdo animado
══════════════════════════════════════════════════════════════ */
.input-group {
    border-left: 2px solid transparent;
    transition: border-color 0.3s;
    padding-left: 2px;
}

.input-group:focus-within {
    border-left-color: var(--primary-glow);
}

/* ══════════════════════════════════════════════════════════════
   SLIDER — transición fade entre slides
══════════════════════════════════════════════════════════════ */
.slider .slide {
    transition: opacity 0.6s ease;
    opacity: 0;
}

.slider .slide.active {
    opacity: 1;
}

/* ══════════════════════════════════════════════════════════════
   INDICADOR ONLINE/OFFLINE EN NAV
══════════════════════════════════════════════════════════════ */
.nav-status {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 14px !important;
}

.server-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    display: inline-block;
    flex-shrink: 0;
}

@keyframes dotPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(34,197,94,0.6); }
    50%       { box-shadow: 0 0 0 5px rgba(34,197,94,0); }
}

.server-dot.online {
    background: #22c55e;
    animation: dotPulse 2s ease-in-out infinite;
}

.server-dot.offline {
    background: #ef4444;
}

.server-label {
    font-family: 'Trajan Pro Bold';
    font-size: 10px;
    letter-spacing: 1px;
    color: var(--text-muted);
}

/* ══════════════════════════════════════════════════════════════
   DOWNLOAD PAGE
══════════════════════════════════════════════════════════════ */
.download-hero {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px;
    margin-bottom: 20px;
    background: linear-gradient(135deg, rgba(14,165,233,0.08) 0%, rgba(99,102,241,0.06) 100%);
    border: 1px solid rgba(14,165,233,0.2);
    border-radius: 4px;
}

.download-hero-icon {
    font-size: 40px;
    line-height: 1;
    filter: drop-shadow(0 0 10px rgba(14,165,233,0.5));
}

.download-hero-text h2 {
    margin: 0 0 4px;
    color: var(--text-bright);
    font-family: 'Trajan Pro Bold';
    font-size: 18px;
    letter-spacing: 2px;
    text-shadow: 0 0 12px rgba(14,165,233,0.4);
}

.download-hero-text p {
    margin: 0;
    color: var(--text-muted);
    font-size: 13px;
    font-family: sans-serif;
}

.download-buttons {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 24px;
}

.download-btn {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 20px;
    background: linear-gradient(90deg, rgba(14,165,233,0.1) 0%, rgba(14,165,233,0.04) 100%);
    border: 1px solid rgba(14,165,233,0.25);
    border-radius: 4px;
    color: var(--text-bright) !important;
    text-decoration: none;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.download-btn::before {
    content: '';
    position: absolute;
    top: 0; left: -100%;
    width: 60%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(14,165,233,0.1), transparent);
    transition: left 0.5s ease;
}

.download-btn:hover::before { left: 150%; }

.download-btn:hover {
    border-color: rgba(14,165,233,0.6);
    background: linear-gradient(90deg, rgba(14,165,233,0.18) 0%, rgba(14,165,233,0.06) 100%);
    box-shadow: 0 0 20px rgba(14,165,233,0.2);
    transform: translateX(4px);
    color: var(--primary-glow) !important;
}

.download-btn-icon {
    font-size: 22px;
    color: var(--primary);
    width: 36px;
    text-align: center;
    flex-shrink: 0;
}

.download-btn-info {
    display: flex;
    flex-direction: column;
    flex: 1;
}

.download-btn-name {
    font-family: 'Trajan Pro Bold';
    font-size: 14px;
    letter-spacing: 1px;
}

.download-btn-sub {
    font-size: 11px;
    color: var(--text-muted);
    font-family: sans-serif;
    margin-top: 2px;
}

.download-btn-arrow {
    font-size: 18px;
    color: var(--primary);
    transition: transform 0.3s;
}

.download-btn:hover .download-btn-arrow { transform: translateX(4px); }

.specs-section { margin-top: 10px; }

.specs-title {
    color: var(--text-muted);
    font-family: 'Trajan Pro Bold';
    font-size: 11px;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border);
}

.specs-table-new {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
    font-family: sans-serif;
}

.specs-table-new th, .specs-table-new td {
    padding: 8px 12px;
    border-bottom: 1px solid rgba(14,165,233,0.08);
    color: var(--text-main);
    text-align: left;
}

.specs-table-new thead th { color: var(--text-muted); }
.specs-table-new tbody tr:hover { background: rgba(14,165,233,0.04); }
.specs-table-new tbody td:first-child { color: var(--text-muted); width: 80px; }

.spec-badge {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 20px;
    font-size: 10px;
    letter-spacing: 1px;
    font-family: 'Trajan Pro Bold';
}

.spec-min { background: rgba(239,68,68,0.15); color: #fca5a5; border: 1px solid rgba(239,68,68,0.3); }
.spec-rec { background: rgba(34,197,94,0.15); color: #86efac; border: 1px solid rgba(34,197,94,0.3); }

/* ══════════════════════════════════════════════════════════════
   REGISTRO — VALIDACIÓN EN TIEMPO REAL
══════════════════════════════════════════════════════════════ */
.reg-feedback {
    font-size: 11px;
    font-family: sans-serif;
    margin-top: 4px;
    min-height: 16px;
    padding-left: 4px;
    transition: all 0.3s;
}

.reg-feedback.ok    { color: #22c55e; }
.reg-feedback.error { color: #f87171; }
.reg-feedback.check { color: var(--text-muted); }

.reg-strength {
    height: 3px;
    background: rgba(255,255,255,0.08);
    border-radius: 2px;
    margin-top: 6px;
    overflow: hidden;
}

.reg-strength-bar {
    height: 100%;
    width: 0%;
    border-radius: 2px;
    transition: width 0.4s ease, background 0.4s ease;
}
/* ══════════════════════════════════════════════════════════════
   DISCORD INTEGRATION
══════════════════════════════════════════════════════════════ */

/* ── SIDEBAR WIDGET ─────────────────────────────────────────── */
.discord-widget .card-title i {
    color: #5865f2;
    margin-right: 6px;
}

.discord-info {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.discord-stats {
    display: flex;
    justify-content: space-between;
    gap: 8px;
}

.discord-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 8px;
    background: rgba(88,101,242,0.08);
    border: 1px solid rgba(88,101,242,0.2);
    border-radius: 4px;
    flex: 1;
}

.discord-stat-number {
    font-family: 'Trajan Pro Bold';
    font-size: 16px;
    color: var(--text-bright);
    font-weight: bold;
}

.discord-stat-number.online {
    color: #22c55e;
}

.discord-stat-label {
    font-size: 10px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-top: 2px;
}

.discord-join-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 16px;
    background: linear-gradient(135deg, #5865f2 0%, #4752c4 100%);
    color: #fff !important;
    text-decoration: none;
    border-radius: 4px;
    font-family: 'Trajan Pro Bold';
    font-size: 12px;
    letter-spacing: 1px;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.discord-join-btn::before {
    content: '';
    position: absolute;
    top: 0; left: -100%;
    width: 60%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
    transition: left 0.5s ease;
}

.discord-join-btn:hover::before { left: 150%; }
.discord-join-btn:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(88,101,242,0.4); }

.discord-embed {
    margin-top: 12px;
    border-radius: 4px;
    overflow: hidden;
    border: 1px solid rgba(88,101,242,0.2);
}

/* ── PÁGINA COMPLETA DE DISCORD ─────────────────────────────── */
.discord-hero {
    background: linear-gradient(135deg, rgba(88,101,242,0.1) 0%, rgba(99,102,241,0.05) 100%);
    border: 1px solid rgba(88,101,242,0.2);
    border-radius: 6px;
    padding: 20px;
    margin-bottom: 20px;
    text-align: center;
}

.discord-hero h2 {
    color: var(--text-bright);
    font-family: 'Trajan Pro Bold';
    font-size: 20px;
    margin: 0 0 8px;
    letter-spacing: 2px;
}

.discord-hero p {
    color: var(--text-muted);
    margin: 0 0 16px;
    font-size: 14px;
}

.discord-features {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 12px;
    margin-top: 16px;
}

.discord-feature {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--text-main);
}

.discord-feature i {
    color: #5865f2;
    width: 16px;
}

.discord-sections {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.discord-section h3 {
    color: var(--text-bright);
    font-family: 'Trajan Pro Bold';
    font-size: 14px;
    letter-spacing: 1px;
    margin: 0 0 12px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--border);
}

.discord-section h3 i {
    color: #5865f2;
    margin-right: 6px;
}

/* ── STATS DEL SERVIDOR ─────────────────────────────────────── */
.discord-server-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 12px;
}

.server-stat-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    background: rgba(88,101,242,0.06);
    border: 1px solid rgba(88,101,242,0.15);
    border-radius: 6px;
}

.stat-icon {
    width: 12px; height: 12px;
    border-radius: 50%;
    background: #22c55e;
    flex-shrink: 0;
}

@keyframes onlinePulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(34,197,94,0.6); }
    50%       { box-shadow: 0 0 0 6px rgba(34,197,94,0); }
}

.stat-icon.online-pulse {
    animation: onlinePulse 2s ease-in-out infinite;
}

.stat-info {
    display: flex;
    flex-direction: column;
}

.stat-number {
    font-family: 'Trajan Pro Bold';
    font-size: 18px;
    color: var(--text-bright);
    line-height: 1;
}

.stat-label {
    font-size: 11px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-top: 2px;
}

/* ── WIDGET CONTAINER ───────────────────────────────────────── */
.discord-widget-container {
    border-radius: 6px;
    overflow: hidden;
    border: 1px solid rgba(88,101,242,0.2);
    background: #2f3136;
}

/* ── CHAT RÁPIDO ────────────────────────────────────────────── */
.quick-chat {
    background: rgba(47,49,54,0.8);
    border: 1px solid rgba(88,101,242,0.2);
    border-radius: 6px;
    overflow: hidden;
}

.chat-messages {
    height: 200px;
    overflow-y: auto;
    padding: 12px;
    background: rgba(54,57,63,0.5);
}

.chat-message {
    display: flex;
    gap: 8px;
    margin-bottom: 8px;
    font-size: 13px;
}

.chat-message.system .chat-text {
    color: #fbbf24;
    font-style: italic;
}

.chat-time {
    color: #72767d;
    font-size: 11px;
    flex-shrink: 0;
    font-family: monospace;
}

.chat-text {
    color: #dcddde;
    line-height: 1.3;
}

.chat-input-area {
    display: flex;
    padding: 12px;
    gap: 8px;
    background: rgba(64,68,75,0.6);
}

#chat-input {
    flex: 1;
    background: rgba(79,84,92,0.8);
    border: 1px solid rgba(88,101,242,0.3);
    border-radius: 4px;
    padding: 8px 12px;
    color: #dcddde;
    font-size: 13px;
}

#chat-input:focus {
    border-color: #5865f2;
    outline: none;
}

.btn-chat {
    background: #5865f2;
    border: none;
    border-radius: 4px;
    padding: 8px 12px;
    color: #fff;
    cursor: pointer;
    transition: background 0.2s;
}

.btn-chat:hover {
    background: #4752c4;
}

.chat-notice {
    padding: 8px 12px;
    background: rgba(88,101,242,0.1);
    color: var(--text-muted);
    font-size: 11px;
    display: flex;
    align-items: center;
    gap: 6px;
}

/* ── CANALES ────────────────────────────────────────────────── */
.discord-channels {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.channel-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: rgba(88,101,242,0.04);
    border: 1px solid rgba(88,101,242,0.1);
    border-radius: 4px;
    transition: all 0.2s;
}

.channel-item:hover {
    background: rgba(88,101,242,0.08);
    border-color: rgba(88,101,242,0.2);
}

.channel-icon {
    color: #72767d;
    width: 16px;
    flex-shrink: 0;
}

.channel-info {
    display: flex;
    flex-direction: column;
}

.channel-name {
    color: var(--text-bright);
    font-family: 'Trajan Pro Bold';
    font-size: 13px;
    letter-spacing: 0.5px;
}

.channel-desc {
    color: var(--text-muted);
    font-size: 11px;
    margin-top: 2px;
}

/* ── BOTÓN PRINCIPAL ────────────────────────────────────────── */
.discord-cta {
    text-align: center;
    margin-top: 24px;
}

.discord-main-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 16px 32px;
    background: linear-gradient(135deg, #5865f2 0%, #4752c4 100%);
    color: #fff !important;
    text-decoration: none;
    border-radius: 6px;
    font-family: 'Trajan Pro Bold';
    font-size: 14px;
    letter-spacing: 2px;
    text-transform: uppercase;
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
}

@keyframes btnGlow {
    0%, 100% { opacity: 0.6; }
    50%       { opacity: 1; }
}

.btn-glow {
    position: absolute;
    inset: -2px;
    background: linear-gradient(45deg, transparent, #5865f2, transparent);
    border-radius: 6px;
    z-index: -1;
    animation: btnGlow 2s ease-in-out infinite;
}

.discord-main-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(88,101,242,0.4);
}

/* ── RESPONSIVE ─────────────────────────────────────────────── */
@media (max-width: 768px) {
    .discord-features {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .discord-server-stats {
        grid-template-columns: 1fr;
    }
    
    .chat-messages {
        height: 150px;
    }
}


/* ══════════════════════════════════════════════════════════════
   FLOATING DONATE WIDGET — Bottom Left — Ultra Pro Edition
══════════════════════════════════════════════════════════════ */

/* ── KEYFRAMES ──────────────────────────────────────────────── */
@keyframes dfOrbit {
    0%   { transform: rotate(0deg) translateX(28px) rotate(0deg); }
    100% { transform: rotate(360deg) translateX(28px) rotate(-360deg); }
}

@keyframes dfPulseRing {
    0%   { transform: translate(-50%,-50%) scale(1); opacity: 0.4; }
    50%  { transform: translate(-50%,-50%) scale(1.18); opacity: 0.08; }
    100% { transform: translate(-50%,-50%) scale(1); opacity: 0.4; }
}

@keyframes dfCoreGlow {
    0%, 100% {
        box-shadow:
            0 0 20px rgba(14,165,233,0.5),
            0 0 50px rgba(14,165,233,0.2),
            inset 0 0 18px rgba(14,165,233,0.15);
    }
    50% {
        box-shadow:
            0 0 30px rgba(56,189,248,0.7),
            0 0 70px rgba(14,165,233,0.35),
            inset 0 0 25px rgba(56,189,248,0.25);
    }
}

@keyframes dfGemFloat {
    0%, 100% { transform: translateY(0) rotateY(0deg); }
    25%      { transform: translateY(-2px) rotateY(12deg); }
    50%      { transform: translateY(-4px) rotateY(0deg); }
    75%      { transform: translateY(-1px) rotateY(-12deg); }
}

@keyframes dfSparkle {
    0%   { transform: scale(0) rotate(0deg); opacity: 0; }
    50%  { transform: scale(1) rotate(180deg); opacity: 1; }
    100% { transform: scale(0) rotate(360deg); opacity: 0; }
}

@keyframes dfParticleRise {
    0%   { transform: translateY(0) translateX(0) scale(1); opacity: 0.6; }
    100% { transform: translateY(-70px) translateX(var(--dx, 10px)) scale(0); opacity: 0; }
}

@keyframes dfConicSpin {
    0%   { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@keyframes dfSheen {
    0%   { left: -100%; }
    100% { left: 200%; }
}

@keyframes dfArrowPulse {
    0%, 100% { transform: translateX(0); opacity: 0.7; }
    50%      { transform: translateX(3px); opacity: 1; }
}

@keyframes dfArrowGhost {
    0%, 100% { transform: translateX(0); opacity: 0; }
    50%      { transform: translateX(6px); opacity: 0.3; }
}

@keyframes dfBorderDash {
    0%   { stroke-dashoffset: 0; }
    100% { stroke-dashoffset: -650; }
}

@keyframes dfHoloShift {
    0%   { background-position: 0% 50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

@keyframes dfBreath {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-3px); }
}

@keyframes dfTitleGlow {
    0%, 100% { text-shadow: 0 0 8px rgba(14,165,233,0.5), 0 0 20px rgba(14,165,233,0.15); }
    50%      { text-shadow: 0 0 14px rgba(56,189,248,0.8), 0 0 35px rgba(14,165,233,0.3); }
}

@keyframes dfCoreGlow {
    0%, 100% {
        box-shadow:
            0 0 15px rgba(14,165,233,0.4),
            0 0 35px rgba(14,165,233,0.15),
            inset 0 0 12px rgba(14,165,233,0.1);
    }
    50% {
        box-shadow:
            0 0 25px rgba(56,189,248,0.6),
            0 0 55px rgba(14,165,233,0.25),
            inset 0 0 20px rgba(56,189,248,0.2);
    }
}

/* ── CONTENEDOR PRINCIPAL ───────────────────────────────────── */
.donate-float {
    position: fixed;
    bottom: 24px;
    left: 12px;
    z-index: 9999;
    display: flex !important;
    align-items: center;
    gap: 0;
    text-decoration: none !important;
    cursor: pointer;
    height: 64px;
    padding: 0 18px 0 0;
    border-radius: 32px;
    background: linear-gradient(135deg, rgba(6,21,48,0.92) 0%, rgba(2,8,23,0.95) 100%);
    border: 1.5px solid rgba(14,165,233,0.2);
    overflow: hidden;
    animation: dfBreath 5s ease-in-out infinite;
    transition: all 0.45s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    box-shadow: 0 4px 30px rgba(0,0,0,0.5), 0 0 20px rgba(14,165,233,0.12), inset 0 1px 0 rgba(56,189,248,0.08);
}

.donate-float:hover {
    border-color: rgba(56,189,248,0.5);
    background: linear-gradient(135deg, rgba(10,30,64,0.95) 0%, rgba(6,21,48,0.98) 100%);
    box-shadow: 0 8px 40px rgba(0,0,0,0.6), 0 0 40px rgba(14,165,233,0.25), 0 0 80px rgba(14,165,233,0.08), inset 0 1px 0 rgba(56,189,248,0.15);
    transform: translateY(-3px) scale(1.03);
    animation: none;
    padding-right: 22px;
}

/* ── FONDO HOLOGRÁFICO ──────────────────────────────────────── */
.df-holo {
    position: absolute;
    inset: 0;
    border-radius: 32px;
    background: linear-gradient(90deg, rgba(14,165,233,0.03) 0%, rgba(99,102,241,0.05) 25%, rgba(167,139,250,0.03) 50%, rgba(14,165,233,0.05) 75%, rgba(99,102,241,0.03) 100%);
    background-size: 300% 100%;
    animation: dfHoloShift 8s ease infinite;
    pointer-events: none;
}

.donate-float:hover .df-holo {
    background: linear-gradient(90deg, rgba(14,165,233,0.06) 0%, rgba(99,102,241,0.08) 25%, rgba(167,139,250,0.06) 50%, rgba(14,165,233,0.08) 75%, rgba(99,102,241,0.06) 100%);
    background-size: 300% 100%;
}

/* ── BORDE SVG ANIMADO ──────────────────────────────────────── */
.df-border-svg {
    position: absolute;
    top: -1px; left: -1px;
    width: calc(100% + 2px);
    height: calc(100% + 2px);
    pointer-events: none;
    z-index: 1;
}

.df-border-rect {
    stroke-dasharray: 8 4;
    stroke-dashoffset: 0;
    animation: dfBorderDash 20s linear infinite;
}

.donate-float:hover .df-border-rect {
    animation-duration: 8s;
    stroke-opacity: 0.9;
}

/* ── ZONA DEL ICONO ─────────────────────────────────────────── */
.df-icon-zone {
    position: relative;
    width: 64px;
    height: 64px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.df-orbit {
    position: absolute;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.df-orb {
    position: absolute;
    border-radius: 50%;
    top: 50%; left: 50%;
    margin: -2px 0 0 -2px;
}

.df-orb:nth-child(1) {
    width: 4px; height: 4px;
    background: #38bdf8;
    box-shadow: 0 0 6px #38bdf8, 0 0 14px rgba(56,189,248,0.3);
    animation: dfOrbit 3.5s linear infinite;
}

.df-orb:nth-child(2) {
    width: 3px; height: 3px;
    background: #6366f1;
    box-shadow: 0 0 6px #6366f1, 0 0 14px rgba(99,102,241,0.3);
    animation: dfOrbit 5s linear infinite reverse;
}

.df-orb:nth-child(3) {
    width: 2.5px; height: 2.5px;
    background: #a78bfa;
    box-shadow: 0 0 5px #a78bfa, 0 0 10px rgba(167,139,250,0.25);
    animation: dfOrbit 6.5s linear infinite;
}

/* Anillo pulsante */
.df-ring-pulse {
    position: absolute;
    width: 52px; height: 52px;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    border: 1px solid rgba(14,165,233,0.25);
    animation: dfPulseRing 3s ease-in-out infinite;
    pointer-events: none;
}

/* Core del icono */
.df-icon-core {
    position: relative;
    width: 44px; height: 44px;
    border-radius: 50%;
    background: linear-gradient(145deg, #0c2d5e 0%, #061530 60%, #020817 100%);
    border: 1px solid rgba(14,165,233,0.35);
    display: flex;
    align-items: center;
    justify-content: center;
    animation: dfCoreGlow 3.5s ease-in-out infinite;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    overflow: hidden;
    z-index: 2;
}

.df-icon-core::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, rgba(56,189,248,0.1) 0%, transparent 60%);
}

.df-icon-core::after {
    content: '';
    position: absolute;
    top: -50%; left: -50%;
    width: 200%; height: 200%;
    background: conic-gradient(from 0deg, transparent 0%, rgba(14,165,233,0.12) 10%, transparent 20%, rgba(99,102,241,0.08) 30%, transparent 40%, transparent 100%);
    animation: dfConicSpin 8s linear infinite;
    pointer-events: none;
}

.donate-float:hover .df-icon-core {
    border-color: rgba(56,189,248,0.7);
    box-shadow: 0 0 25px rgba(14,165,233,0.6), 0 0 60px rgba(56,189,248,0.2), inset 0 0 20px rgba(56,189,248,0.15);
    background: linear-gradient(145deg, #0d3a75 0%, #0a1e40 60%, #061530 100%);
    transform: scale(1.08);
}

/* Gema */
.df-gem {
    font-size: 18px;
    color: #38bdf8;
    filter: drop-shadow(0 0 8px rgba(56,189,248,0.6));
    animation: dfGemFloat 4s ease-in-out infinite;
    transition: all 0.4s ease;
    position: relative;
    z-index: 3;
}

.donate-float:hover .df-gem {
    color: #7dd3fc;
    filter: drop-shadow(0 0 14px rgba(125,211,252,1)) drop-shadow(0 0 30px rgba(56,189,248,0.4));
    transform: scale(1.15);
    animation: none;
}

/* Sparkles */
.df-sparkles {
    position: absolute;
    width: 44px; height: 44px;
    top: 0; left: 0;
    pointer-events: none;
}

.df-sparkles span {
    position: absolute;
    width: 3px; height: 3px;
    background: #fff;
    border-radius: 1px;
    opacity: 0;
    transform: rotate(45deg);
    box-shadow: 0 0 3px #38bdf8;
}

.donate-float:hover .df-sparkles span {
    animation: dfSparkle 1.4s ease-in-out infinite;
}

.df-sparkles span:nth-child(1) { top: 2%;  left: 50%; animation-delay: 0s; }
.df-sparkles span:nth-child(2) { top: 20%; left: 92%; animation-delay: 0.18s; width: 2px; height: 2px; }
.df-sparkles span:nth-child(3) { top: 65%; left: 90%; animation-delay: 0.35s; }
.df-sparkles span:nth-child(4) { top: 92%; left: 50%; animation-delay: 0.53s; width: 2px; height: 2px; }
.df-sparkles span:nth-child(5) { top: 70%; left: 5%;  animation-delay: 0.7s; }
.df-sparkles span:nth-child(6) { top: 18%; left: 8%;  animation-delay: 0.88s; width: 2px; height: 2px; }
.df-sparkles span:nth-child(7) { top: 45%; left: 95%; animation-delay: 1.05s; }
.df-sparkles span:nth-child(8) { top: 50%; left: 2%;  animation-delay: 1.2s; width: 2px; height: 2px; }

/* ── ZONA DE TEXTO (siempre visible) ────────────────────────── */
.df-text-zone {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding-left: 4px;
    white-space: nowrap;
    position: relative;
    z-index: 2;
}

.df-title {
    font-family: 'Trajan Pro Bold', serif;
    font-size: 13px;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: #e0f2fe;
    animation: dfTitleGlow 4s ease-in-out infinite;
    transition: all 0.3s ease;
    line-height: 1.2;
}

.donate-float:hover .df-title {
    color: #fff;
    letter-spacing: 4px;
    text-shadow: 0 0 18px rgba(56,189,248,0.9), 0 0 40px rgba(14,165,233,0.4);
}

.df-subtitle {
    font-family: sans-serif;
    font-size: 9px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: rgba(125,211,252,0.45);
    transition: all 0.3s ease;
    line-height: 1.2;
}

.donate-float:hover .df-subtitle {
    color: rgba(125,211,252,0.7);
    letter-spacing: 2px;
}

/* ── FLECHA ─────────────────────────────────────────────────── */
.df-arrow {
    position: relative;
    margin-left: 10px;
    display: flex;
    align-items: center;
    z-index: 2;
}

.df-arrow i {
    font-size: 10px;
    color: rgba(56,189,248,0.5);
    animation: dfArrowPulse 2s ease-in-out infinite;
    transition: all 0.3s ease;
}

.df-arrow .df-arrow-ghost {
    position: absolute;
    left: 0;
    animation: dfArrowGhost 2s ease-in-out infinite;
    color: rgba(56,189,248,0.2);
}

.donate-float:hover .df-arrow i {
    color: rgba(56,189,248,0.9);
}

.donate-float:hover .df-arrow .df-arrow-ghost {
    color: rgba(56,189,248,0.4);
}

/* ── PARTÍCULAS ─────────────────────────────────────────────── */
.df-particles {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: visible;
    z-index: 0;
}

.df-particles span {
    position: absolute;
    width: 2px; height: 2px;
    border-radius: 50%;
    background: #38bdf8;
    opacity: 0;
    box-shadow: 0 0 3px rgba(56,189,248,0.4);
}

.donate-float:hover .df-particles span {
    animation: dfParticleRise 2s ease-out infinite;
}

.df-particles span:nth-child(1)  { left: 8%;  bottom: 20%; --dx: -8px;  animation-delay: 0s; }
.df-particles span:nth-child(2)  { left: 18%; bottom: 15%; --dx: 5px;   animation-delay: 0.15s; }
.df-particles span:nth-child(3)  { left: 30%; bottom: 25%; --dx: -12px; animation-delay: 0.3s; width: 3px; height: 3px; }
.df-particles span:nth-child(4)  { left: 42%; bottom: 18%; --dx: 8px;   animation-delay: 0.45s; }
.df-particles span:nth-child(5)  { left: 55%; bottom: 22%; --dx: -5px;  animation-delay: 0.6s; }
.df-particles span:nth-child(6)  { left: 65%; bottom: 12%; --dx: 12px;  animation-delay: 0.75s; width: 3px; height: 3px; }
.df-particles span:nth-child(7)  { left: 78%; bottom: 20%; --dx: -10px; animation-delay: 0.9s; }
.df-particles span:nth-child(8)  { left: 88%; bottom: 16%; --dx: 6px;   animation-delay: 1.05s; }
.df-particles span:nth-child(9)  { left: 22%; bottom: 30%; --dx: -6px;  animation-delay: 1.2s; }
.df-particles span:nth-child(10) { left: 48%; bottom: 28%; --dx: 10px;  animation-delay: 1.35s; width: 3px; height: 3px; }
.df-particles span:nth-child(11) { left: 72%; bottom: 25%; --dx: -8px;  animation-delay: 1.5s; }
.df-particles span:nth-child(12) { left: 92%; bottom: 22%; --dx: 4px;   animation-delay: 1.65s; }

/* ── REFLEJO DE LUZ (sheen) ─────────────────────────────────── */
.df-sheen {
    position: absolute;
    top: 0;
    left: -100%;
    width: 40%;
    height: 100%;
    background: linear-gradient(90deg, transparent 0%, rgba(56,189,248,0.06) 40%, rgba(255,255,255,0.08) 50%, rgba(56,189,248,0.06) 60%, transparent 100%);
    pointer-events: none;
    z-index: 1;
    border-radius: 32px;
}

.donate-float:hover .df-sheen {
    animation: dfSheen 1.2s ease forwards;
}

/* ── RESPONSIVE ─────────────────────────────────────────────── */
@media (max-width: 768px) {
    .donate-float {
        bottom: 14px;
        left: 8px;
        height: 52px;
        padding: 0 14px 0 0;
        border-radius: 26px;
    }

    .df-icon-zone { width: 52px; height: 52px; }
    .df-icon-core { width: 36px; height: 36px; }
    .df-ring-pulse { width: 42px; height: 42px; }
    .df-gem { font-size: 14px; }
    .df-title { font-size: 10px; letter-spacing: 2px; }
    .df-subtitle { display: none; }
    .df-arrow { margin-left: 6px; }
    .df-arrow i { font-size: 8px; }
    .df-border-svg { display: none; }
}

@media (max-width: 420px) {
    .donate-float { height: 46px; padding: 0 10px 0 0; left: 6px; bottom: 10px; }
    .df-icon-zone { width: 46px; height: 46px; }
    .df-icon-core { width: 32px; height: 32px; }
    .df-gem { font-size: 12px; }
    .df-title { font-size: 9px; letter-spacing: 1.5px; }
    .df-orbit { display: none; }
}


/* ══════════════════════════════════════════════════════════════
   LAUNCH SCHEDULE MODAL
══════════════════════════════════════════════════════════════ */

@keyframes lmFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes lmSlideUp {
    0%   { opacity: 0; transform: translateY(60px) scale(0.85) rotateX(8deg); }
    60%  { opacity: 1; transform: translateY(-8px) scale(1.02) rotateX(0deg); }
    100% { opacity: 1; transform: translateY(0) scale(1) rotateX(0deg); }
}

@keyframes lmBorderGlow {
    0%, 100% { border-color: rgba(14,165,233,0.25); box-shadow: 0 25px 80px rgba(0,0,0,0.7), 0 0 40px rgba(14,165,233,0.12), inset 0 1px 0 rgba(56,189,248,0.1); }
    50%      { border-color: rgba(56,189,248,0.4); box-shadow: 0 25px 80px rgba(0,0,0,0.7), 0 0 60px rgba(14,165,233,0.2), 0 0 100px rgba(14,165,233,0.06), inset 0 1px 0 rgba(56,189,248,0.15); }
}

@keyframes lmShimmer {
    0%   { left: -100%; }
    100% { left: 200%; }
}

@keyframes lmClockPulse {
    0%, 100% { filter: drop-shadow(0 0 8px rgba(14,165,233,0.5)); transform: scale(1); }
    50%      { filter: drop-shadow(0 0 18px rgba(56,189,248,0.9)); transform: scale(1.08); }
}

@keyframes lmGlow {
    0%, 100% { opacity: 0.3; transform: scale(1); }
    50%      { opacity: 0.6; transform: scale(1.05); }
}

@keyframes lmParticle {
    0%   { transform: translateY(0) scale(1); opacity: 0.5; }
    100% { transform: translateY(-120px) scale(0); opacity: 0; }
}

@keyframes lmRowIn {
    from { opacity: 0; transform: translateX(-12px); }
    to   { opacity: 1; transform: translateX(0); }
}

@keyframes lmStarSpin {
    0%   { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* ── OVERLAY ────────────────────────────────────────────────── */
.launch-overlay {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(2,8,23,0.0);
    backdrop-filter: blur(0px);
    opacity: 0;
    pointer-events: none;
    transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.launch-overlay.active {
    opacity: 1;
    pointer-events: all;
    background: rgba(2,8,23,0.82);
    backdrop-filter: blur(12px);
}

/* ── MODAL ──────────────────────────────────────────────────── */
.launch-modal {
    position: relative;
    width: 460px;
    max-width: 94vw;
    max-height: 88vh;
    background: linear-gradient(160deg, #081e3e 0%, #04122a 40%, #020817 100%);
    border: 1.5px solid rgba(14,165,233,0.25);
    border-radius: 18px;
    padding: 0;
    overflow: hidden;
    transform: translateY(60px) scale(0.85);
    opacity: 0;
    transition: none;
    box-shadow:
        0 30px 100px rgba(0,0,0,0.8),
        0 0 50px rgba(14,165,233,0.15),
        inset 0 1px 0 rgba(56,189,248,0.12);
}

.launch-overlay.active .launch-modal {
    animation: lmSlideUp 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) 0.15s both, lmBorderGlow 4s ease-in-out 1.5s infinite;
}

/* Shimmer que cruza el modal al aparecer */
.launch-modal::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 50%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(56,189,248,0.06), rgba(255,255,255,0.04), rgba(56,189,248,0.06), transparent);
    z-index: 5;
    pointer-events: none;
    border-radius: 18px;
}

.launch-overlay.active .launch-modal::before {
    animation: lmShimmer 1.5s ease 0.8s forwards;
}

/* ── BG GLOW ────────────────────────────────────────────────── */
.lm-bg-glow {
    position: absolute;
    top: -40%; left: -20%;
    width: 140%; height: 80%;
    background: radial-gradient(ellipse at center, rgba(14,165,233,0.08) 0%, transparent 70%);
    pointer-events: none;
    animation: lmGlow 5s ease-in-out infinite;
}

/* ── PARTÍCULAS ─────────────────────────────────────────────── */
.lm-particles {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
}

.lm-particles span {
    position: absolute;
    width: 2px; height: 2px;
    border-radius: 50%;
    background: #38bdf8;
    opacity: 0;
    box-shadow: 0 0 4px rgba(56,189,248,0.4);
}

.launch-overlay.active .lm-particles span {
    animation: lmParticle 3s ease-out infinite;
}

.lm-particles span:nth-child(1) { left: 10%; bottom: 5%;  animation-delay: 0s; }
.lm-particles span:nth-child(2) { left: 25%; bottom: 8%;  animation-delay: 0.4s; width: 3px; height: 3px; }
.lm-particles span:nth-child(3) { left: 45%; bottom: 3%;  animation-delay: 0.8s; }
.lm-particles span:nth-child(4) { left: 60%; bottom: 10%; animation-delay: 1.2s; }
.lm-particles span:nth-child(5) { left: 75%; bottom: 6%;  animation-delay: 1.6s; width: 3px; height: 3px; }
.lm-particles span:nth-child(6) { left: 88%; bottom: 4%;  animation-delay: 2s; }
.lm-particles span:nth-child(7) { left: 35%; bottom: 12%; animation-delay: 2.4s; }
.lm-particles span:nth-child(8) { left: 55%; bottom: 7%;  animation-delay: 2.8s; width: 3px; height: 3px; }

/* ── CLOSE BUTTON ───────────────────────────────────────────── */
.lm-close {
    position: absolute;
    top: 14px; right: 14px;
    width: 34px; height: 34px;
    border-radius: 50%;
    border: 1px solid rgba(14,165,233,0.2);
    background: rgba(6,21,48,0.9);
    color: var(--text-muted, #7dd3fc);
    font-size: 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    z-index: 10;
    backdrop-filter: blur(4px);
}

.lm-close:hover {
    background: rgba(239,68,68,0.15);
    border-color: rgba(239,68,68,0.4);
    color: #fca5a5;
    transform: rotate(90deg) scale(1.1);
    box-shadow: 0 0 16px rgba(239,68,68,0.2);
}

/* ── HEADER ─────────────────────────────────────────────────── */
.lm-header {
    text-align: center;
    padding: 32px 24px 18px;
    position: relative;
    z-index: 2;
    background: linear-gradient(180deg, rgba(14,165,233,0.06) 0%, transparent 100%);
}

.lm-icon-wrap {
    margin-bottom: 14px;
    position: relative;
    display: inline-block;
}

.lm-icon-wrap::after {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 60px; height: 60px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(14,165,233,0.15) 0%, transparent 70%);
    pointer-events: none;
}

.lm-clock {
    font-size: 40px;
    color: #38bdf8;
    animation: lmClockPulse 3s ease-in-out infinite;
    position: relative;
    z-index: 1;
}

.lm-title {
    font-family: 'Trajan Pro Bold', serif;
    font-size: 22px;
    letter-spacing: 5px;
    text-transform: uppercase;
    color: #e0f2fe;
    margin: 0 0 6px;
    text-shadow: 0 0 18px rgba(14,165,233,0.6), 0 0 40px rgba(14,165,233,0.2);
}

.lm-subtitle {
    font-family: sans-serif;
    font-size: 11px;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: rgba(125,211,252,0.5);
    margin: 0;
}

/* ── COUNTDOWN ───────────────────────────────────────────────── */
.lm-countdown {
    padding: 0 24px 14px;
    position: relative;
    z-index: 2;
}

.lm-cd-label {
    text-align: center;
    font-family: sans-serif;
    font-size: 9px;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: rgba(125,211,252,0.4);
    margin-bottom: 10px;
}

.lm-cd-boxes {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.lm-cd-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 62px;
    padding: 10px 8px 8px;
    background: linear-gradient(160deg, rgba(14,165,233,0.08) 0%, rgba(6,21,48,0.9) 100%);
    border: 1px solid rgba(14,165,233,0.15);
    border-radius: 10px;
    position: relative;
    overflow: hidden;
}

.lm-cd-box::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(56,189,248,0.3), transparent);
}

.lm-cd-num {
    font-family: 'Trajan Pro Bold', serif;
    font-size: 26px;
    letter-spacing: 2px;
    color: #e0f2fe;
    text-shadow: 0 0 12px rgba(14,165,233,0.5), 0 0 30px rgba(14,165,233,0.15);
    line-height: 1;
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), color 0.3s;
}

.lm-cd-num.lm-cd-flip {
    transform: scale(1.15);
    color: #38bdf8;
    text-shadow: 0 0 18px rgba(56,189,248,0.8), 0 0 40px rgba(14,165,233,0.3);
}

.lm-cd-unit {
    font-family: sans-serif;
    font-size: 8px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: rgba(125,211,252,0.4);
    margin-top: 4px;
}

.lm-cd-sep {
    font-family: 'Trajan Pro Bold', serif;
    font-size: 22px;
    color: rgba(56,189,248,0.3);
    padding-bottom: 14px;
    animation: lmSepPulse 1s ease-in-out infinite;
}

@keyframes lmSepPulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.2; }
}

/* Barra de progreso */
.lm-cd-bar {
    margin-top: 12px;
    height: 3px;
    background: rgba(14,165,233,0.08);
    border-radius: 2px;
    overflow: hidden;
}

.lm-cd-bar-fill {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, #0ea5e9, #6366f1, #38bdf8);
    background-size: 200% 100%;
    border-radius: 2px;
    transition: width 1s linear;
    animation: lmBarShimmer 3s ease infinite;
    box-shadow: 0 0 8px rgba(14,165,233,0.4);
}

@keyframes lmBarShimmer {
    0%   { background-position: 0% 50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* Server is LIVE */
.lm-cd-live {
    text-align: center;
    font-family: 'Trajan Pro Bold', serif;
    font-size: 18px;
    letter-spacing: 4px;
    color: #22c55e;
    text-shadow: 0 0 14px rgba(34,197,94,0.6), 0 0 40px rgba(34,197,94,0.2);
    padding: 16px 0;
    animation: lmLivePulse 2s ease-in-out infinite;
}

.lm-cd-live i {
    margin-right: 8px;
    animation: lmLiveDot 1.5s ease-in-out infinite;
}

@keyframes lmLivePulse {
    0%, 100% { text-shadow: 0 0 14px rgba(34,197,94,0.6), 0 0 40px rgba(34,197,94,0.2); }
    50%      { text-shadow: 0 0 24px rgba(34,197,94,0.9), 0 0 60px rgba(34,197,94,0.4); }
}

@keyframes lmLiveDot {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.3; }
}

/* ── DIVIDER ────────────────────────────────────────────────── */
.lm-divider {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 24px;
    margin-bottom: 8px;
}

.lm-divider span {
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(14,165,233,0.3), transparent);
}

.lm-divider i {
    color: rgba(56,189,248,0.4);
    font-size: 8px;
    animation: lmStarSpin 10s linear infinite;
}

/* ── SCHEDULE LIST ──────────────────────────────────────────── */
.lm-schedule {
    padding: 0 20px 12px;
    max-height: 45vh;
    overflow-y: auto;
    position: relative;
    z-index: 2;
}

.lm-schedule::-webkit-scrollbar { width: 4px; }
.lm-schedule::-webkit-scrollbar-track { background: transparent; }
.lm-schedule::-webkit-scrollbar-thumb { background: rgba(14,165,233,0.3); border-radius: 2px; }

.lm-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    margin-bottom: 3px;
    border-radius: 8px;
    background: rgba(14,165,233,0.03);
    border: 1px solid rgba(14,165,233,0.06);
    transition: all 0.25s ease;
    opacity: 0;
    transform: translateX(-12px);
}

.launch-overlay.active .lm-row {
    animation: lmRowIn 0.4s ease both;
}

.launch-overlay.active .lm-row:nth-child(1)  { animation-delay: 0.35s; }
.launch-overlay.active .lm-row:nth-child(2)  { animation-delay: 0.40s; }
.launch-overlay.active .lm-row:nth-child(3)  { animation-delay: 0.45s; }
.launch-overlay.active .lm-row:nth-child(4)  { animation-delay: 0.50s; }
.launch-overlay.active .lm-row:nth-child(5)  { animation-delay: 0.55s; }
.launch-overlay.active .lm-row:nth-child(6)  { animation-delay: 0.60s; }
.launch-overlay.active .lm-row:nth-child(7)  { animation-delay: 0.65s; }
.launch-overlay.active .lm-row:nth-child(8)  { animation-delay: 0.70s; }
.launch-overlay.active .lm-row:nth-child(9)  { animation-delay: 0.75s; }
.launch-overlay.active .lm-row:nth-child(10) { animation-delay: 0.80s; }
.launch-overlay.active .lm-row:nth-child(11) { animation-delay: 0.85s; }
.launch-overlay.active .lm-row:nth-child(12) { animation-delay: 0.90s; }
.launch-overlay.active .lm-row:nth-child(13) { animation-delay: 0.95s; }
.launch-overlay.active .lm-row:nth-child(14) { animation-delay: 1.00s; }
.launch-overlay.active .lm-row:nth-child(15) { animation-delay: 1.05s; }
.launch-overlay.active .lm-row:nth-child(16) { animation-delay: 1.10s; }
.launch-overlay.active .lm-row:nth-child(17) { animation-delay: 1.15s; }
.launch-overlay.active .lm-row:nth-child(18) { animation-delay: 1.20s; }

.lm-row:hover {
    background: rgba(14,165,233,0.08);
    border-color: rgba(14,165,233,0.2);
    transform: translateX(4px);
    box-shadow: 0 0 12px rgba(14,165,233,0.08);
}

/* Fila destacada (España como referencia europea) */
.lm-row.highlight-row {
    background: linear-gradient(90deg, rgba(14,165,233,0.08) 0%, rgba(14,165,233,0.04) 100%);
    border-color: rgba(14,165,233,0.25);
    box-shadow: inset 0 0 20px rgba(14,165,233,0.06), 0 0 8px rgba(14,165,233,0.06);
}

.lm-row.highlight-row .lm-time {
    color: #38bdf8;
    text-shadow: 0 0 10px rgba(56,189,248,0.6);
    background: rgba(14,165,233,0.12);
    border-color: rgba(14,165,233,0.25);
}

.lm-row.highlight-row .lm-country {
    color: #e0f2fe;
}

/* Fila del usuario detectado */
.lm-row.lm-row-yours {
    background: linear-gradient(90deg, rgba(34,197,94,0.1) 0%, rgba(14,165,233,0.06) 100%);
    border-color: rgba(34,197,94,0.3);
    box-shadow: 0 0 14px rgba(34,197,94,0.08), inset 0 0 20px rgba(34,197,94,0.04);
    order: -1;
    position: relative;
    padding-right: 70px;
}

.lm-row.lm-row-yours .lm-country {
    color: #86efac;
    font-weight: bold;
}

.lm-row.lm-row-yours .lm-time {
    color: #86efac;
    text-shadow: 0 0 10px rgba(34,197,94,0.5);
    background: rgba(34,197,94,0.1);
    border-color: rgba(34,197,94,0.2);
}

.lm-row.lm-row-yours .lm-flag {
    box-shadow: 0 0 8px rgba(34,197,94,0.3), 0 2px 6px rgba(0,0,0,0.4);
}

.lm-row.lm-row-yours:hover {
    background: linear-gradient(90deg, rgba(34,197,94,0.15) 0%, rgba(14,165,233,0.08) 100%);
    border-color: rgba(34,197,94,0.45);
}

/* Badge "You" */
.lm-yours-badge {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    font-family: sans-serif;
    font-size: 9px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #22c55e;
    background: rgba(34,197,94,0.1);
    border: 1px solid rgba(34,197,94,0.25);
    border-radius: 10px;
    padding: 3px 8px;
    display: flex;
    align-items: center;
    gap: 4px;
    animation: lmYoursPulse 2s ease-in-out infinite;
}

.lm-yours-badge i {
    font-size: 8px;
}

@keyframes lmYoursPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(34,197,94,0.3); }
    50%      { box-shadow: 0 0 0 4px rgba(34,197,94,0); }
}

/* Bandera */
.lm-flag {
    width: 26px;
    height: 18px;
    border-radius: 3px;
    object-fit: cover;
    box-shadow: 0 2px 6px rgba(0,0,0,0.4);
    flex-shrink: 0;
    transition: transform 0.2s ease;
}

.lm-row:hover .lm-flag {
    transform: scale(1.15);
}

/* País */
.lm-country {
    flex: 1;
    font-family: sans-serif;
    font-size: 13px;
    color: var(--text-main, #bae6fd);
    letter-spacing: 0.3px;
    transition: color 0.2s ease;
}

.lm-row:hover .lm-country {
    color: #e0f2fe;
}

/* Hora */
.lm-time {
    font-family: 'Trajan Pro Bold', serif;
    font-size: 13px;
    letter-spacing: 1.5px;
    color: #e0f2fe;
    text-shadow: 0 0 6px rgba(14,165,233,0.3);
    white-space: nowrap;
    padding: 3px 10px;
    background: rgba(14,165,233,0.06);
    border-radius: 4px;
    border: 1px solid rgba(14,165,233,0.08);
    transition: all 0.2s ease;
}

.lm-row:hover .lm-time {
    background: rgba(14,165,233,0.12);
    border-color: rgba(14,165,233,0.2);
    text-shadow: 0 0 10px rgba(56,189,248,0.5);
}

/* ── FOOTER ─────────────────────────────────────────────────── */
.lm-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 24px;
    background: linear-gradient(90deg, rgba(14,165,233,0.04), rgba(14,165,233,0.08), rgba(14,165,233,0.04));
    border-top: 1px solid rgba(14,165,233,0.1);
    position: relative;
    z-index: 2;
}

.lm-footer i {
    color: rgba(56,189,248,0.5);
    font-size: 12px;
}

.lm-footer span {
    font-family: sans-serif;
    font-size: 10px;
    letter-spacing: 1px;
    color: rgba(125,211,252,0.45);
    text-transform: uppercase;
}

/* ── RESPONSIVE ─────────────────────────────────────────────── */
@media (max-width: 480px) {
    .launch-modal {
        border-radius: 12px;
        max-width: 96vw;
    }

    .lm-header { padding: 24px 16px 12px; }
    .lm-title { font-size: 16px; letter-spacing: 3px; }
    .lm-clock { font-size: 28px; }
    .lm-countdown { padding: 0 16px 10px; }
    .lm-cd-box { min-width: 50px; padding: 8px 6px 6px; }
    .lm-cd-num { font-size: 20px; }
    .lm-cd-sep { font-size: 18px; }
    .lm-schedule { padding: 0 12px 10px; }
    .lm-row { padding: 8px 10px; gap: 10px; }
    .lm-country { font-size: 12px; }
    .lm-time { font-size: 12px; }
    .lm-footer { padding: 12px 16px; }
    .lm-footer span { font-size: 9px; }
}