/* ===== RAPKY GLOBAL — extends styles.css ===== */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=Space+Grotesk:wght@400;500;600;700&display=swap');

:root {
    --primary:#8b5cf6; --primary-dark:#7c3aed; --secondary:#ec4899;
    --accent:#06b6d4; --accent2:#f59e0b;
    --bg-dark:#050508; --bg-card:#0f0f14; --bg-card-hover:#16161d;
    --bg-surface:#1a1a24; --bg-surface2:#12121a;
    --text-primary:#f0f0f5; --text-secondary:#8888a0;
    --border:rgba(139,92,246,.12); --border-hover:rgba(139,92,246,.3);
    --success:#10b981; --warning:#f59e0b; --danger:#ef4444;
    --glow:rgba(139,92,246,.18); --glow2:rgba(236,72,153,.15);
    --gradient:linear-gradient(135deg,var(--primary),var(--secondary));
    --gradient2:linear-gradient(135deg,var(--accent),var(--primary));
    --gradient3:linear-gradient(135deg,var(--secondary),var(--accent2));
    /* Type system — Space Grotesk (display) + Inter (body) */
    --font-body:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;
    --font-display:'Space Grotesk','Inter',-apple-system,sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}

/* ── Scrollbar fino morado oscuro (global, todas las páginas) ── */
*{scrollbar-width:thin;scrollbar-color:#2a1450 transparent}
::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:linear-gradient(180deg,#3a1d6b,#1a0d33);border-radius:10px}
::-webkit-scrollbar-thumb:hover{background:linear-gradient(180deg,#4c2585,#251047)}
/* Foco visible para navegación por teclado (accesibilidad) */
:focus-visible{outline:2px solid var(--primary);outline-offset:2px;border-radius:6px}
body{font-family:var(--font-body);
    background:var(--bg-dark);color:var(--text-primary);line-height:1.6;overflow-x:hidden;
    -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}

/* ── Display typography ── */
h1,h2,h3,.hero-title,.section-title,.page-hero h1,.nav-brand,
.event-title,.person-name,.stat-num,.stat-item h3,.feature-card h3,
.artist-meta h1,.modal-content h2{
    font-family:var(--font-display);letter-spacing:-.02em;
}
.hero-title,.section-title,.page-hero h1,.artist-meta h1{font-weight:700}
.container{max-width:1200px;margin:0 auto;padding:0 20px}

/* ── STARS BACKGROUND ── */
.stars-bg {
    position:fixed;inset:0;pointer-events:none;z-index:0;overflow:hidden;
}
.stars-bg::before,.stars-bg::after{
    content:'';position:absolute;inset:0;
    /* Solo estrellas blancas — cielo nocturno sutil */
    background-image:
        radial-gradient(1px 1px at 10% 15%,rgba(255,255,255,.55),transparent),
        radial-gradient(1px 1px at 25% 40%,rgba(255,255,255,.38),transparent),
        radial-gradient(1.5px 1.5px at 40% 8%,rgba(255,255,255,.65),transparent),
        radial-gradient(1px 1px at 55% 60%,rgba(255,255,255,.45),transparent),
        radial-gradient(1px 1px at 70% 25%,rgba(255,255,255,.38),transparent),
        radial-gradient(1.5px 1.5px at 80% 70%,rgba(255,255,255,.5),transparent),
        radial-gradient(1px 1px at 90% 45%,rgba(255,255,255,.45),transparent),
        radial-gradient(1px 1px at 15% 75%,rgba(255,255,255,.4),transparent),
        radial-gradient(1px 1px at 35% 85%,rgba(255,255,255,.3),transparent),
        radial-gradient(1px 1px at 60% 90%,rgba(255,255,255,.38),transparent),
        radial-gradient(1.5px 1.5px at 85% 10%,rgba(255,255,255,.5),transparent),
        radial-gradient(1px 1px at 48% 35%,rgba(255,255,255,.45),transparent),
        radial-gradient(1px 1px at 5% 50%,rgba(255,255,255,.3),transparent),
        radial-gradient(1px 1px at 95% 80%,rgba(255,255,255,.4),transparent);
}
.stars-bg::after{
    animation:twinkle 8s ease-in-out infinite alternate;
    background-image:
        radial-gradient(1px 1px at 20% 20%,rgba(255,255,255,.45),transparent),
        radial-gradient(1.5px 1.5px at 45% 55%,rgba(255,255,255,.55),transparent),
        radial-gradient(1px 1px at 65% 15%,rgba(255,255,255,.38),transparent),
        radial-gradient(1px 1px at 75% 85%,rgba(255,255,255,.4),transparent),
        radial-gradient(1px 1px at 30% 65%,rgba(255,255,255,.38),transparent),
        radial-gradient(1.5px 1.5px at 88% 35%,rgba(255,255,255,.45),transparent);
}
@keyframes twinkle{0%{opacity:.45}100%{opacity:.9}}

/* ── NEBULA BLOBS (muy sutil, único acento morado) ── */
.nebula {
    position:fixed;inset:0;pointer-events:none;z-index:0;
    background:
        radial-gradient(ellipse 70% 45% at 15% 25%,rgba(139,92,246,.04) 0%,transparent 60%),
        radial-gradient(ellipse 60% 40% at 80% 80%,rgba(139,92,246,.025) 0%,transparent 55%);
}

/* ── NAVBAR ── */
.navbar{background:rgba(5,5,8,.88);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);
    position:fixed;width:100%;top:0;z-index:1000;border-bottom:1px solid var(--border)}
.navbar .container{display:flex;justify-content:space-between;align-items:center;padding:.8rem 20px}
.nav-brand{display:flex;align-items:center;gap:8px;font-size:1.6rem;font-weight:800;
    letter-spacing:-.5px;background:var(--gradient);-webkit-background-clip:text;
    -webkit-text-fill-color:transparent;background-clip:text;cursor:pointer;text-decoration:none}
.nav-brand i{font-size:1.2rem;-webkit-text-fill-color:var(--primary)}
.nav-menu{display:flex;list-style:none;gap:1.6rem}
.nav-link{color:var(--text-secondary);text-decoration:none;font-size:.88rem;font-weight:500;
    transition:color .3s;position:relative;padding:4px 0}
.nav-link:hover,.nav-link.active{color:var(--text-primary)}
.nav-link.active::after,.nav-link:hover::after{content:'';position:absolute;bottom:-2px;left:0;
    width:100%;height:2px;background:var(--gradient);border-radius:2px}
.nav-link:hover::after{opacity:.5}
.nav-actions{display:flex;gap:10px}
.btn-login,.btn-register{border:none;cursor:pointer;font-family:inherit;
    font-size:.85rem;font-weight:500;border-radius:10px;padding:8px 18px;transition:all .3s}
.btn-login{background:transparent;color:var(--text-secondary);border:1px solid var(--border)}
.btn-login:hover{border-color:var(--primary);color:var(--text-primary)}
.btn-register{background:var(--gradient);color:#fff}
.btn-register:hover{transform:translateY(-1px);box-shadow:0 4px 20px var(--glow)}
.nav-user{position:relative}
.user-menu-trigger{display:flex;align-items:center;gap:8px;cursor:pointer;padding:6px 14px;
    border-radius:10px;border:1px solid var(--border);transition:all .3s;
    color:var(--text-primary);font-size:.88rem;font-weight:500}
.user-menu-trigger:hover{border-color:var(--primary)}
.user-avatar-nav{width:30px;height:30px;border-radius:50%;background:var(--gradient);
    display:flex;align-items:center;justify-content:center;font-size:.75rem;color:#fff}
.user-dropdown{display:none;position:absolute;top:calc(100% + 8px);right:0;
    background:var(--bg-card);border:1px solid var(--border);border-radius:12px;
    min-width:210px;padding:6px;box-shadow:0 20px 40px rgba(0,0,0,.5)}
.user-dropdown.show{display:block}
.user-dropdown hr{border:none;border-top:1px solid var(--border);margin:4px 0}
.dropdown-item{display:flex;align-items:center;gap:10px;padding:10px 14px;
    color:var(--text-secondary);text-decoration:none;border-radius:8px;
    font-size:.85rem;transition:all .2s}
.dropdown-item:hover{background:var(--bg-card-hover);color:var(--text-primary)}
.dropdown-item.logout{color:var(--danger)}
.dropdown-item.admin-link{color:var(--accent)}
.nav-toggle{display:none;background:none;border:none;color:var(--text-primary);font-size:1.3rem;cursor:pointer}

/* ── PAGE HERO (for inner pages) ── */
.page-hero{padding:130px 20px 60px;text-align:center;position:relative}
.page-hero-badge{display:inline-block;padding:5px 16px;border-radius:50px;
    background:rgba(139,92,246,.1);border:1px solid rgba(139,92,246,.2);
    font-size:.82rem;color:var(--primary);margin-bottom:16px;font-weight:500}
.page-hero h1{font-size:3rem;font-weight:800;letter-spacing:-1px;line-height:1.1}
.page-hero p{color:var(--text-secondary);font-size:1rem;margin-top:12px;max-width:560px;margin-left:auto;margin-right:auto}

/* ── SECTION ── */
.section{padding:80px 0;position:relative}
.section-badge{display:inline-block;padding:4px 14px;border-radius:50px;
    background:rgba(139,92,246,.08);border:1px solid rgba(139,92,246,.15);
    font-size:.8rem;color:var(--primary);margin-bottom:10px;font-weight:500}
.section-title{font-size:2.2rem;font-weight:800;letter-spacing:-.5px;margin-bottom:8px}
.section-sub{color:var(--text-secondary);font-size:.95rem;margin-bottom:40px}

/* ── CARDS ── */
.card{background:var(--bg-card);border-radius:18px;border:1px solid var(--border);
    transition:all .4s;overflow:hidden}
.card:hover{transform:translateY(-5px);border-color:var(--border-hover);
    box-shadow:0 20px 50px rgba(0,0,0,.35),0 0 0 1px var(--border-hover)}
.card-img{width:100%;height:220px;object-fit:cover;display:block;transition:transform .5s}
.card:hover .card-img{transform:scale(1.05)}
.card-body{padding:22px}
.card-tag{font-size:.72rem;color:var(--primary);font-weight:600;text-transform:uppercase;
    letter-spacing:1px;margin-bottom:8px}
.card-title{font-size:1.1rem;font-weight:700;margin-bottom:8px;line-height:1.3}
.card-text{font-size:.85rem;color:var(--text-secondary);line-height:1.6}
.card-footer{display:flex;justify-content:space-between;align-items:center;
    padding:14px 22px;border-top:1px solid var(--border)}

/* ── PERSON CARD (artist/organizer) ── */
.person-card{background:var(--bg-card);border-radius:20px;border:1px solid var(--border);
    overflow:hidden;transition:all .4s;position:relative;display:flex;flex-direction:column}
.person-card:hover{transform:translateY(-6px);border-color:var(--border-hover);
    box-shadow:0 24px 60px rgba(0,0,0,.4),0 0 30px var(--glow)}
.person-img-wrap{position:relative;height:260px;overflow:hidden;flex-shrink:0}
.person-img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.person-card:hover .person-img{transform:scale(1.08)}
.person-overlay{position:absolute;inset:0;
    background:linear-gradient(to top,rgba(5,5,8,.95) 0%,rgba(5,5,8,.3) 50%,transparent 100%)}
.person-genre{position:absolute;top:14px;left:14px;background:rgba(139,92,246,.85);
    color:#fff;padding:4px 12px;border-radius:8px;font-size:.72rem;font-weight:600;
    backdrop-filter:blur(6px)}
.person-verified{position:absolute;top:14px;right:14px;color:var(--accent);font-size:1rem}
.person-body{padding:20px;display:flex;flex-direction:column;flex:1}
.person-name{font-size:1.15rem;font-weight:700;margin-bottom:4px}
.person-meta{font-size:.8rem;color:var(--primary);font-weight:500;margin-bottom:10px}
.person-bio{font-size:.83rem;color:var(--text-secondary);line-height:1.6;
    display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
    /* Reserva 3 líneas siempre → todas las tarjetas miden lo mismo aunque haya poco texto */
    min-height:3.98rem;margin-bottom:8px}
/* Bloque inferior fijo: redes + botón Escuchar, siempre pegado abajo (margin-top:auto) */
.person-socials{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:auto;padding-top:16px}
.person-socials a{width:32px;height:32px;border-radius:8px;background:var(--bg-surface);
    display:flex;align-items:center;justify-content:center;color:var(--text-secondary);
    text-decoration:none;transition:all .2s;border:1px solid var(--border);font-size:.8rem;flex:0 0 auto}
.person-socials a:hover{background:var(--primary);color:#fff;border-color:var(--primary)}
/* Botón Escuchar: ocupa su propia fila a todo lo ancho → nunca se sale del marco */
.person-socials a.person-listen{flex:1 0 100%;width:100%;height:auto;min-width:0;margin-top:4px;
    padding:11px 18px;gap:8px;font-size:.82rem;font-weight:700;line-height:1.1;letter-spacing:.01em;
    justify-content:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
    box-sizing:border-box;color:#fff;background:var(--gradient);border:none;box-shadow:0 4px 14px rgba(139,92,246,.32);
    transition:transform .2s cubic-bezier(.22,1,.36,1),box-shadow .2s ease,filter .2s ease}
.person-socials a.person-listen i{font-size:.92rem;line-height:1}
@media (hover:hover) and (pointer:fine){
  .person-socials a.person-listen:hover{transform:translateY(-2px);filter:brightness(1.08);
    box-shadow:0 8px 22px rgba(139,92,246,.46);color:#fff}
}
@media (prefers-reduced-motion:reduce){
  .person-socials a.person-listen{transition:none}
  .person-socials a.person-listen:hover{transform:none}
}

/* ── GRID ── */
.grid-3{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:24px}
.grid-4{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:20px}
.grid-2{display:grid;grid-template-columns:repeat(auto-fill,minmax(360px,1fr));gap:24px}

/* ── BUTTONS ── */
.btn{display:inline-flex;align-items:center;gap:8px;padding:10px 22px;border-radius:12px;
    font-size:.88rem;font-weight:600;cursor:pointer;transition:all .3s;border:none;
    font-family:inherit;text-decoration:none}
.btn-primary{background:var(--gradient);color:#fff}
.btn-primary:hover{transform:translateY(-1px);box-shadow:0 6px 24px var(--glow)}
.btn-secondary{background:transparent;color:var(--text-secondary);border:1px solid var(--border)}
.btn-secondary:hover{border-color:var(--primary);color:var(--text-primary)}
.btn-danger{background:rgba(239,68,68,.1);color:var(--danger);border:1px solid rgba(239,68,68,.2)}
.btn-danger:hover{background:var(--danger);color:#fff}
.btn-sm{padding:7px 16px;font-size:.8rem;border-radius:9px}
.btn-accent{background:linear-gradient(135deg,var(--accent),var(--primary));color:#fff}
.btn-accent:hover{transform:translateY(-1px);box-shadow:0 6px 24px rgba(6,182,212,.25)}

/* ── FORMS ── */
.form-group{margin-bottom:16px}
.form-group label{display:block;font-size:.83rem;font-weight:500;margin-bottom:6px;
    color:var(--text-secondary)}
.form-group input,.form-group select,.form-group textarea{
    width:100%;background:var(--bg-surface);border:1px solid var(--border);
    border-radius:10px;padding:11px 14px;color:var(--text-primary);font-family:inherit;
    font-size:.9rem;transition:border-color .3s;outline:none}
.form-group input:focus,.form-group select:focus,.form-group textarea:focus{
    border-color:var(--primary);box-shadow:0 0 0 3px rgba(139,92,246,.1)}
.form-group textarea{resize:vertical;min-height:100px}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}

/* ── MODALS ── */
.modal{display:none;position:fixed;inset:0;background:rgba(0,0,0,.7);
    z-index:2000;backdrop-filter:blur(6px);align-items:center;justify-content:center;padding:20px}
.modal.active{display:flex}
.modal-content{background:var(--bg-card);border-radius:20px;border:1px solid var(--border);
    padding:32px;width:100%;max-width:480px;max-height:90vh;overflow-y:auto;
    position:relative;box-shadow:0 40px 80px rgba(0,0,0,.6)}
.modal-content.wide{max-width:680px}
.modal-header-icon{width:52px;height:52px;border-radius:14px;background:var(--gradient);
    display:flex;align-items:center;justify-content:center;font-size:1.3rem;
    color:#fff;margin-bottom:16px}
.modal-content h2{font-size:1.4rem;font-weight:700;margin-bottom:4px}
.modal-content .modal-subtitle{color:var(--text-secondary);font-size:.9rem;margin-bottom:20px}
.close{position:absolute;top:16px;right:16px;background:var(--bg-surface);border:none;
    color:var(--text-secondary);width:32px;height:32px;border-radius:8px;cursor:pointer;
    font-size:1rem;display:flex;align-items:center;justify-content:center;transition:all .2s}
.close:hover{background:var(--danger);color:#fff}
.btn-submit{width:100%;background:var(--gradient);color:#fff;border:none;padding:13px;
    border-radius:12px;font-size:.95rem;font-weight:600;cursor:pointer;transition:all .3s;
    font-family:inherit;margin-top:4px}
.btn-submit:hover{transform:translateY(-1px);box-shadow:0 6px 24px var(--glow)}
.form-footer{text-align:center;margin-top:16px;font-size:.85rem;color:var(--text-secondary)}
.form-footer a{color:var(--primary);text-decoration:none}

/* ── TOAST ── */
.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(100px);
    background:var(--bg-surface);color:var(--text-primary);padding:12px 24px;
    border-radius:12px;font-size:.9rem;font-weight:500;border:1px solid var(--border);
    box-shadow:0 8px 30px rgba(0,0,0,.4);transition:transform .4s cubic-bezier(.34,1.56,.64,1);
    z-index:9999;white-space:nowrap;max-width:90vw}
.toast.show{transform:translateX(-50%) translateY(0)}
.toast.success{border-color:var(--success);box-shadow:0 8px 30px rgba(16,185,129,.2)}
.toast.error{border-color:var(--danger);box-shadow:0 8px 30px rgba(239,68,68,.2)}

/* ── FOOTER ── */
.footer{padding:60px 0 0;background:var(--bg-card);border-top:1px solid var(--border);position:relative;z-index:1}
.footer-content{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:40px;margin-bottom:40px}
.footer-brand{font-size:1.4rem;font-weight:800;margin-bottom:12px;
    background:var(--gradient);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.footer-brand i{-webkit-text-fill-color:var(--primary)}
.footer-section p{color:var(--text-secondary);font-size:.88rem;margin-bottom:16px;line-height:1.7}
.footer-section h4{font-size:.9rem;font-weight:600;margin-bottom:14px;color:var(--text-primary)}
.footer-section ul{list-style:none}
.footer-section ul li{margin-bottom:9px;font-size:.85rem;color:var(--text-secondary)}
.footer-section ul li a{color:var(--text-secondary);text-decoration:none;transition:color .3s}
.footer-section ul li a:hover{color:var(--primary)}
.footer-section ul li i{margin-right:8px;color:var(--primary);width:14px}
.social-links{display:flex;gap:10px;margin-top:4px}
.social-links a{width:38px;height:38px;border-radius:10px;background:var(--bg-surface);
    display:flex;align-items:center;justify-content:center;color:var(--text-secondary);
    text-decoration:none;transition:all .3s;border:1px solid var(--border);font-size:.85rem}
.social-links a:hover{background:var(--gradient);color:#fff;border-color:transparent}
.footer-bottom{border-top:1px solid var(--border);padding:20px 0;
    text-align:center;color:var(--text-secondary);font-size:.82rem}

/* ── TABS ── */
.tabs{display:flex;gap:4px;background:var(--bg-surface);border-radius:12px;padding:4px;
    margin-bottom:28px;width:fit-content}
.tab-btn{padding:9px 22px;border-radius:9px;border:none;background:transparent;
    color:var(--text-secondary);font-size:.88rem;font-weight:500;cursor:pointer;
    transition:all .25s;font-family:inherit}
.tab-btn.active{background:var(--gradient);color:#fff;box-shadow:0 4px 14px var(--glow)}
.tab-pane{display:none}
.tab-pane.active{display:block}

/* ── RATING STARS ── */
.star-row{display:flex;gap:3px;color:var(--warning);font-size:.85rem}
.star-row .empty{color:var(--border)}

/* ── BADGE ── */
.badge{display:inline-flex;align-items:center;padding:3px 10px;border-radius:6px;
    font-size:.72rem;font-weight:600}
.badge-success{background:rgba(16,185,129,.12);color:var(--success);border:1px solid rgba(16,185,129,.2)}
.badge-warning{background:rgba(245,158,11,.12);color:var(--warning);border:1px solid rgba(245,158,11,.2)}
.badge-danger{background:rgba(239,68,68,.12);color:var(--danger);border:1px solid rgba(239,68,68,.2)}
.badge-primary{background:rgba(139,92,246,.12);color:var(--primary);border:1px solid rgba(139,92,246,.2)}
.badge-accent{background:rgba(6,182,212,.12);color:var(--accent);border:1px solid rgba(6,182,212,.2)}

/* ── STAT CARDS ── */
.stat-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:16px;margin-bottom:32px}
.stat-card{background:var(--bg-card);border:1px solid var(--border);border-radius:16px;
    padding:22px;text-align:center;transition:all .3s}
.stat-card:hover{border-color:var(--border-hover);transform:translateY(-2px)}
.stat-card .stat-num{font-size:2rem;font-weight:800;background:var(--gradient);
    -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.stat-card .stat-label{font-size:.78rem;color:var(--text-secondary);margin-top:4px}
.stat-card .stat-icon-wrap{width:44px;height:44px;border-radius:12px;
    background:rgba(139,92,246,.1);display:flex;align-items:center;justify-content:center;
    margin:0 auto 12px;color:var(--primary);font-size:1.1rem}

/* ── TABLE ── */
.data-table{width:100%;border-collapse:collapse;font-size:.85rem}
.data-table th{padding:10px 14px;text-align:left;color:var(--text-secondary);
    font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.5px;
    border-bottom:1px solid var(--border)}
.data-table td{padding:12px 14px;border-bottom:1px solid rgba(139,92,246,.06);
    vertical-align:middle}
.data-table tr:hover td{background:var(--bg-surface)}

/* ── EMPTY STATE ── */
.empty-state{text-align:center;padding:60px 20px;color:var(--text-secondary)}
.empty-state i{font-size:3rem;margin-bottom:16px;opacity:.3}
.empty-state p{font-size:.95rem}

/* ── GLOW LINE ── */
.glow-line{height:1px;background:var(--gradient);opacity:.3;margin:40px 0}

/* ── CHECKBOX ── */
.checkbox-container{display:flex;align-items:center;gap:8px;cursor:pointer;
    font-size:.85rem;color:var(--text-secondary)}
.checkbox-container input{width:16px;height:16px;accent-color:var(--primary)}
.form-options{display:flex;justify-content:space-between;align-items:center;margin:12px 0}
.forgot-password{font-size:.82rem;color:var(--primary);text-decoration:none}

/* ── WHATSAPP FLOAT BUTTON ── */
.whatsapp-float {
    position:fixed;bottom:28px;right:28px;
    width:58px;height:58px;background:#25d366;border-radius:50%;
    display:flex;align-items:center;justify-content:center;
    font-size:1.7rem;color:#fff;text-decoration:none;
    z-index:900;box-shadow:0 6px 24px rgba(37,211,102,.45);
    transition:transform .3s,box-shadow .3s;
    animation:waFloat 3s ease-in-out infinite;
}
.whatsapp-float:hover {
    transform:scale(1.12);
    box-shadow:0 10px 36px rgba(37,211,102,.65);
}
@keyframes waFloat {
    0%,100% { transform:translateY(0); }
    50%      { transform:translateY(-5px); }
}

/* ── SITEMAP / MISC ── */
.gradient-text {
    background:var(--gradient);-webkit-background-clip:text;
    -webkit-text-fill-color:transparent;background-clip:text;
}

/* ══════════════════════════════════════════════════════════
   RESPONSIVE — Mobile-first professional experience
   ══════════════════════════════════════════════════════════ */

/* ── Tablet landscape (≤1024px) ── */
@media(max-width:1024px){
    .container{padding:0 16px}
    .admin-layout{grid-template-columns:200px 1fr}
}

/* ── Tablet (≤900px) ── */
@media(max-width:900px){
    .footer-content{grid-template-columns:1fr 1fr;gap:24px}
    .grid-3{grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
    .page-hero h1{font-size:2.2rem}
    /* Admin */
    .admin-layout{grid-template-columns:1fr}
    .admin-sidebar{position:fixed;left:-260px;top:64px;height:calc(100vh - 64px);
        width:260px;z-index:900;transition:left .3s ease;background:var(--bg-card);
        border-right:1px solid var(--border);overflow-y:auto}
    .admin-sidebar.open{left:0;box-shadow:4px 0 24px rgba(0,0,0,.5)}
    .admin-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:899}
    .admin-overlay.show{display:block}
    .admin-main{padding:20px 16px}
    .admin-mobile-bar{display:flex!important}
}

/* ── Mobile (≤680px) ── */
@media(max-width:680px){
    /* Navbar */
    .nav-menu{display:none}
    .nav-toggle{display:block}
    .nav-menu.open{
        display:flex;flex-direction:column;position:absolute;top:100%;left:0;
        width:100%;background:rgba(5,5,8,.98);backdrop-filter:blur(20px);
        border-bottom:1px solid var(--border);padding:16px;gap:4px;z-index:999}
    .nav-menu.open li a{display:block;padding:12px 16px;border-radius:10px;
        color:var(--text-secondary);font-size:.95rem}
    .nav-menu.open li a:hover,.nav-menu.open li a.active{
        background:rgba(139,92,246,.1);color:var(--text-primary)}
    .nav-menu.open li a::after{display:none}
    .btn-register{display:none} /* hide in mobile nav-actions, login enough */
    .nav-actions .btn-login{padding:7px 14px;font-size:.82rem}

    /* Layout */
    .footer-content{grid-template-columns:1fr;gap:20px}
    .form-row{grid-template-columns:1fr}
    .tabs{width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
    .stat-grid{grid-template-columns:1fr 1fr}
    .grid-3{grid-template-columns:1fr}
    .container{padding:0 12px}

    /* Page hero */
    .page-hero{padding:100px 12px 40px}
    .page-hero h1{font-size:1.75rem;letter-spacing:-.3px}
    .page-hero p{font-size:.9rem}

    /* Cards */
    .card-body{padding:16px}
    .person-img-wrap{height:200px}

    /* Buttons */
    .btn,.btn-primary,.btn-secondary{padding:10px 18px;font-size:.85rem}
    .btn-sm{padding:7px 12px;font-size:.78rem}

    /* Forms */
    input,select,textarea{font-size:16px!important} /* prevent iOS zoom */
    .form-group input,.form-group select,.form-group textarea{padding:12px 14px}

    /* Modals */
    .modal-content{padding:24px 18px;border-radius:18px;max-height:92vh;overflow-y:auto;margin:8px}
    .modal{padding:8px}

    /* Footer */
    .footer-section{text-align:center}
    .footer-section .social-links{justify-content:center}
    .footer-bottom{font-size:.78rem}

    /* Sections */
    .section{padding:48px 0}
    .section-title{font-size:1.7rem}

    /* Toast */
    .toast{bottom:16px;left:12px;right:12px;width:auto;font-size:.85rem}

    /* Admin mobile bar */
    .admin-mobile-bar{display:flex!important}
}

/* ── Small mobile (≤420px) ── */
@media(max-width:420px){
    .page-hero h1{font-size:1.5rem}
    .stat-grid{grid-template-columns:1fr}
    .stat-card{padding:16px}
    .stat-num{font-size:1.8rem}
    .nav-brand{font-size:1.35rem}
    .section-title{font-size:1.5rem}
    .grid-2,.grid-3,.grid-4{grid-template-columns:1fr}
}

/* ── Admin mobile header bar ── */
.admin-mobile-bar{
    display:none;align-items:center;justify-content:space-between;
    background:var(--bg-card);border-bottom:1px solid var(--border);
    padding:12px 16px;position:sticky;top:64px;z-index:800;
}
.admin-mobile-bar button{
    background:none;border:1px solid var(--border);border-radius:10px;
    color:var(--text-primary);padding:8px 12px;cursor:pointer;font-size:.9rem;
}

/* ── Touch targets ── */
@media(hover:none){
    .sidebar-item{padding:14px 20px}
    .dropdown-item{padding:13px 14px}
    .qty-btn-ui{width:44px;height:44px}
    .btn-buy{padding:17px}
    .ed-org-links a{width:40px;height:40px}
}

/* ── iOS safe area ── */
@supports(padding-bottom:env(safe-area-inset-bottom)){
    .whatsapp-float{bottom:calc(28px + env(safe-area-inset-bottom))}
    footer{padding-bottom:env(safe-area-inset-bottom)}
}

/* ── Landscape phone ── */
@media(max-width:900px) and (orientation:landscape){
    .ed-hero{height:45vh;min-height:260px}
    .page-hero{padding:90px 16px 30px}
}

/* ── High DPI / Retina ── */
@media(-webkit-min-device-pixel-ratio:2),(min-resolution:192dpi){
    .stars-bg::before,.stars-bg::after{background-size:auto}
}

/* ════════════════════════════════════════════════════════════════
   RAPKY v2 — Premium Visual Layer & Animation System
   ════════════════════════════════════════════════════════════════ */

/* ── CSS custom property extensions ── */
:root {
    --primary-glow: rgba(139,92,246,.35);
    --secondary-glow: rgba(236,72,153,.25);
    --card-glass: rgba(15,15,20,.7);
    --transition-smooth: cubic-bezier(.4,0,.2,1);
    --transition-spring: cubic-bezier(.34,1.56,.64,1);
    --shadow-card: 0 4px 24px rgba(0,0,0,.35), 0 1px 4px rgba(0,0,0,.2);
    --shadow-card-hover: 0 20px 60px rgba(0,0,0,.5), 0 0 0 1px var(--border-hover), 0 0 40px rgba(139,92,246,.08);
    --shadow-glow: 0 8px 32px var(--primary-glow);
    --radius-xl: 24px;
    --radius-lg: 18px;
    --radius-md: 14px;
}

/* ── Scroll Reveal System ── */
[data-reveal] {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity .65s var(--transition-smooth), transform .65s var(--transition-smooth);
    will-change: opacity, transform;
}
[data-reveal="left"]  { transform: translateX(-32px) translateY(0); }
[data-reveal="right"] { transform: translateX(32px)  translateY(0); }
[data-reveal="scale"] { transform: scale(.93) translateY(0); }
[data-reveal="fade"]  { transform: none; }
[data-reveal].revealed { opacity: 1 !important; transform: none !important; }

[data-delay="1"] { transition-delay: .08s }
[data-delay="2"] { transition-delay: .16s }
[data-delay="3"] { transition-delay: .24s }
[data-delay="4"] { transition-delay: .32s }
[data-delay="5"] { transition-delay: .40s }
[data-delay="6"] { transition-delay: .48s }
[data-delay="7"] { transition-delay: .56s }
[data-delay="8"] { transition-delay: .64s }

/* ── Keyframes ── */
@keyframes fadeInUp   { from{opacity:0;transform:translateY(20px)} to{opacity:1;transform:none} }
@keyframes fadeInLeft { from{opacity:0;transform:translateX(-20px)} to{opacity:1;transform:none} }
@keyframes fadeIn     { from{opacity:0} to{opacity:1} }
@keyframes scaleIn    { from{opacity:0;transform:scale(.9)} to{opacity:1;transform:scale(1)} }
@keyframes slideDown  { from{opacity:0;transform:translateY(-12px)} to{opacity:1;transform:none} }
@keyframes glowPulse  { 0%,100%{opacity:.6} 50%{opacity:1} }
@keyframes gradientShift {
    0%   { background-position: 0% 50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}
@keyframes float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-8px)} }
@keyframes pulse-ring {
    0%   { box-shadow: 0 0 0 0 rgba(139,92,246,.5); }
    100% { box-shadow: 0 0 0 20px rgba(139,92,246,0); }
}
@keyframes shimmer {
    0%   { background-position: -400% center; }
    100% { background-position: 400% center; }
}
@keyframes skel {
    0%   { background-position: -600px 0; }
    100% { background-position: 600px 0; }
}
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes bounce-in {
    0%   { transform: scale(.3); opacity:0; }
    50%  { transform: scale(1.05); }
    70%  { transform: scale(.9); }
    100% { transform: scale(1); opacity:1; }
}

/* ── Shimmer button ── */
.btn-shimmer {
    background: linear-gradient(90deg,
        var(--primary-dark) 0%,
        var(--primary) 25%,
        var(--secondary) 50%,
        var(--primary) 75%,
        var(--primary-dark) 100%);
    background-size: 400% auto;
    animation: shimmer 4s linear infinite;
    color: #fff; border: none;
}
.btn-shimmer:hover { animation-duration: 2s; transform: translateY(-2px); box-shadow: var(--shadow-glow); }

/* ── Gradient animated bg ── */
.animated-gradient-bg {
    background: linear-gradient(-45deg, #080412, #0d0818, #050508, #07030f);
    background-size: 400% 400%;
    animation: gradientShift 18s ease infinite;
}

/* ── Enhanced cards ── */
.card {
    box-shadow: var(--shadow-card);
    backdrop-filter: blur(2px);
}
.card:hover {
    box-shadow: var(--shadow-card-hover) !important;
}

/* gradient-border card variant */
.card-gb {
    position: relative; background: var(--bg-card);
    border-radius: var(--radius-lg); overflow: hidden;
    transition: all .4s var(--transition-smooth);
}
.card-gb::before {
    content: '';
    position: absolute; inset: 0; border-radius: inherit; padding: 1px;
    background: linear-gradient(135deg, rgba(139,92,246,.5), rgba(236,72,153,.3), rgba(6,182,212,.2));
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor; mask-composite: exclude;
    opacity: 0; transition: opacity .4s;
    pointer-events: none;
}
.card-gb:hover::before { opacity: 1; }
.card-gb:hover { transform: translateY(-6px); box-shadow: var(--shadow-card-hover); }

/* ── Person card glow ── */
.person-card:hover {
    box-shadow: 0 24px 60px rgba(0,0,0,.5), 0 0 0 1px var(--border-hover), 0 0 50px rgba(139,92,246,.1) !important;
}

/* ── Pulse utility ── */
.pulse-glow { animation: pulse-ring 2.5s cubic-bezier(.215,.61,.355,1) infinite; }

/* ── Skeleton loaders ── */
.skeleton {
    background: linear-gradient(90deg, var(--bg-surface) 25%, rgba(255,255,255,.03) 50%, var(--bg-surface) 75%);
    background-size: 600px 100%;
    animation: skel 1.5s ease-in-out infinite;
    border-radius: 8px;
}
.skel-line      { height: 14px; margin-bottom: 10px; }
.skel-line.short  { width: 55%; }
.skel-line.medium { width: 78%; }
.skel-line.long   { width: 100%; }
.skel-avatar    { width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0; }
.skel-block     { width: 100%; height: 80px; border-radius: 14px; margin-bottom: 12px; }

.skel-comment {
    display: flex; gap: 14px; padding: 20px;
    background: rgba(139,92,246,.02); border: 1px solid rgba(255,255,255,.03);
    border-radius: 16px; margin-bottom: 12px;
}
.skel-comment-body { flex: 1; }

/* ── Comment Card v2 ── */
.comment-card {
    display: flex; gap: 16px; padding: 20px;
    background: rgba(139,92,246,.03);
    border: 1px solid rgba(139,92,246,.1);
    border-radius: 18px;
    transition: all .3s var(--transition-smooth);
    margin-bottom: 12px;
    animation: fadeInUp .45s var(--transition-smooth) both;
    position: relative; overflow: hidden;
}
.comment-card::before {
    content: ''; position: absolute;
    top: 0; left: 0; right: 0; height: 1px;
    background: linear-gradient(90deg, transparent, rgba(139,92,246,.3), transparent);
    opacity: 0; transition: opacity .3s;
}
.comment-card:hover { background: rgba(139,92,246,.06); border-color: rgba(139,92,246,.22); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,.2); }
.comment-card:hover::before { opacity: 1; }

.comment-avatar-ring {
    width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0;
    background: var(--gradient);
    display: flex; align-items: center; justify-content: center;
    font-weight: 800; font-size: .95rem; color: #fff;
    box-shadow: 0 4px 14px rgba(139,92,246,.4);
    position: relative;
}
.comment-avatar-ring::after {
    content: ''; position: absolute; inset: -2px;
    border-radius: 50%; border: 2px solid transparent;
    background: var(--gradient) border-box;
    -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor; mask-composite: exclude;
}

.comment-meta-row {
    display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 8px;
}
.comment-author { font-weight: 700; font-size: .92rem; color: var(--text-primary); }
.comment-stars-row { display: inline-flex; gap: 2px; font-size: .8rem; }
.comment-datetime {
    font-size: .72rem; color: var(--text-secondary);
    display: flex; align-items: center; gap: 4px; margin-left: auto;
    white-space: nowrap;
}
.comment-datetime i { font-size: .65rem; color: var(--primary); }
.comment-body-text { font-size: .875rem; color: rgba(240,240,245,.82); line-height: 1.72; }

/* ── Enhanced section badge ── */
.section-badge {
    background: linear-gradient(135deg, rgba(139,92,246,.18), rgba(236,72,153,.08)) !important;
    border-color: rgba(139,92,246,.3) !important;
    letter-spacing: .4px;
    box-shadow: 0 2px 12px rgba(139,92,246,.1);
}

/* ── Enhanced page hero ── */
.page-hero { overflow: hidden; position: relative; }
.page-hero::before {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background: radial-gradient(ellipse 80% 60% at 50% 100%, rgba(139,92,246,.06), transparent 70%);
}
.page-hero h1 {
    background: linear-gradient(135deg, #ffffff 30%, rgba(196,181,253,.9) 65%, rgba(139,92,246,.8) 100%);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}

/* ── Enhanced stat card ── */
.stat-card {
    background: linear-gradient(145deg, var(--bg-card), rgba(20,20,30,.9));
    position: relative; overflow: hidden;
    transition: all .35s var(--transition-smooth);
}
.stat-card::after {
    content: ''; position: absolute;
    top: -40%; right: -20%; width: 90px; height: 90px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(139,92,246,.1), transparent 65%);
    pointer-events: none;
}
.stat-card:hover { transform: translateY(-3px) !important; box-shadow: 0 12px 40px rgba(0,0,0,.3), 0 0 0 1px var(--border-hover); }

/* ── Gradient separator ── */
.glow-separator, .glow-line {
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(139,92,246,.4), rgba(236,72,153,.25), transparent) !important;
    opacity: 1 !important;
    margin: 40px 0;
}

/* ── Enhanced badge ── */
.badge {
    font-weight: 700;
    letter-spacing: .3px;
    transition: all .2s;
}
.badge-secondary {
    background: rgba(136,136,160,.1); color: var(--text-secondary);
    border: 1px solid rgba(136,136,160,.2);
}
.badge-verified {
    background: rgba(6,182,212,.1); color: var(--accent);
    border: 1px solid rgba(6,182,212,.2);
    display: inline-flex; align-items: center; gap: 4px;
}

/* ── Tag chip ── */
.tag-chip {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 4px 12px; border-radius: 20px; font-size: .72rem; font-weight: 600;
    background: rgba(139,92,246,.08); border: 1px solid rgba(139,92,246,.18);
    color: var(--primary); transition: all .2s; cursor: default;
}
.tag-chip:hover { background: rgba(139,92,246,.18); border-color: var(--primary); }

/* ── Loading spinner ── */
.spinner {
    width: 36px; height: 36px; margin: 0 auto;
    border: 3px solid rgba(139,92,246,.15);
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: spin .8s linear infinite;
}

/* ── Empty state enhanced ── */
.empty-state {
    text-align: center; padding: 64px 20px;
    color: var(--text-secondary);
    animation: fadeIn .5s ease;
}
.empty-state i { font-size: 2.8rem; margin-bottom: 16px; opacity: .25; display: block; }
.empty-state p { font-size: .93rem; max-width: 320px; margin: 0 auto; }

/* ── Feature item ── */
.feature-item {
    display: flex; gap: 16px; align-items: flex-start;
    padding: 20px; border-radius: 16px;
    background: rgba(139,92,246,.04); border: 1px solid rgba(139,92,246,.08);
    transition: all .3s var(--transition-smooth);
}
.feature-item:hover { background: rgba(139,92,246,.09); border-color: rgba(139,92,246,.22); transform: translateX(4px); }
.feature-icon {
    width: 48px; height: 48px; border-radius: 14px; flex-shrink: 0;
    background: var(--gradient);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.2rem; color: #fff; box-shadow: 0 4px 16px var(--glow);
}

/* ── Toast enhanced ── */
.toast {
    display: flex !important; align-items: center; gap: 10px;
    border-radius: 14px;
    backdrop-filter: blur(16px);
}

/* ── Breadcrumb ── */
.breadcrumb {
    display: flex; align-items: center; gap: 8px;
    font-size: .82rem; color: var(--text-secondary);
    margin-bottom: 24px; flex-wrap: wrap;
}
.breadcrumb a { color: var(--text-secondary); text-decoration: none; transition: color .2s; }
.breadcrumb a:hover { color: var(--primary); }
.breadcrumb .sep { color: rgba(255,255,255,.15); }

/* ── Glow line enhanced ─ */
.glow-line { border-radius: 1px; }

/* ── Float animation utility ── */
.float-anim { animation: float 4s ease-in-out infinite; }

/* ── Count animate ── */
.count-anim { animation: fadeInUp .55s var(--transition-spring) both; }

/* ── Hero gradient text ── */
.hero-gradient-text {
    background: linear-gradient(135deg, #ffffff 0%, #c4b5fd 60%, #818cf8 100%);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
    display: inline-block;
}

/* ── Responsive additions for v2 ── */
@media(max-width:680px) {
    .comment-card { gap: 12px; padding: 16px; }
    .comment-datetime { font-size: .68rem; }
    [data-reveal] { transform: translateY(16px) !important; }
    [data-reveal="left"],[data-reveal="right"] { transform: translateY(16px) !important; }
}

/* ═══════════════════════════════════════════════════════════
   RAPKY v3 GLOBAL ENHANCEMENTS — All Pages
   ═══════════════════════════════════════════════════════════ */

/* ── New Keyframes ────────────────────────────────────────── */
@keyframes shimmer-sweep {
    0%   { background-position:   0% center; }
    100% { background-position: 250% center; }
}
@keyframes orb-drift-1 {
    0%,100% { transform: translate(0,0) scale(1); }
    33%     { transform: translate(40px,-30px) scale(1.06); }
    66%     { transform: translate(-25px,20px) scale(0.96); }
}
@keyframes orb-drift-2 {
    0%,100% { transform: translate(0,0) scale(1); }
    33%     { transform: translate(-30px,25px) scale(1.04); }
    66%     { transform: translate(20px,-30px) scale(1.08); }
}
@keyframes glow-pulse {
    0%,100% { box-shadow:0 0 18px rgba(139,92,246,.25); }
    50%     { box-shadow:0 0 36px rgba(139,92,246,.5),0 0 60px rgba(236,72,153,.15); }
}
@keyframes float-vertical {
    0%,100% { transform:translateY(0) rotate(0deg); }
    50%     { transform:translateY(-14px) rotate(4deg); }
}
@keyframes badge-dot-blink {
    0%,100% { opacity:1; transform:scale(1); }
    50%     { opacity:.5; transform:scale(.8); }
}
@keyframes cursor-blink {
    0%,100% { opacity:1; } 50% { opacity:0; }
}
@keyframes ripple-expand {
    to { transform:scale(4); opacity:0; }
}
@keyframes hero-glow-shift {
    0%,100% { opacity:.12; } 50% { opacity:.22; }
}
@keyframes reveal-up {
    from { opacity:0; transform:translateY(32px); }
    to   { opacity:1; transform:translateY(0); }
}
@keyframes modal-slide-up {
    from { opacity:0; transform:translateY(24px) scale(.97); }
    to   { opacity:1; transform:translateY(0) scale(1); }
}
@keyframes spin-once {
    from { transform:rotate(0deg); } to { transform:rotate(360deg); }
}

/* ── Scroll Progress Bar ──────────────────────────────────── */
.scroll-progress-bar {
    position: fixed;
    top: 0; left: 0;
    height: 3px; width: 0%;
    background: linear-gradient(90deg, var(--primary), var(--secondary), var(--accent));
    z-index: 9999;
    border-radius: 0 3px 3px 0;
    box-shadow: 0 0 12px rgba(139,92,246,.7);
    transition: width .1s linear;
    pointer-events: none;
}

/* ── Background Orbs ──────────────────────────────────────── */
.bg-orbs { position:fixed;inset:0;pointer-events:none;z-index:0;overflow:hidden; }
.bg-orb  { position:absolute;border-radius:50%;filter:blur(90px); }
.bg-orb-1 {
    width:700px;height:700px;background:var(--primary);opacity:.06;
    top:-200px;left:-200px;animation:orb-drift-1 18s ease-in-out infinite;
}
.bg-orb-2 {
    width:550px;height:550px;background:var(--secondary);opacity:.05;
    bottom:-150px;right:-150px;animation:orb-drift-2 22s ease-in-out infinite;
}
.bg-orb-3 {
    width:400px;height:400px;background:var(--accent);opacity:.04;
    top:50%;left:50%;animation:orb-drift-1 15s ease-in-out infinite 4s;
}

/* ── Cursor Glow (apagado — sustituido por estrellas blancas) ── */
.cursor-glow { display:none; }

/* ── Rastro de estrellitas blancas tras el cursor ── */
.cursor-star {
    position:fixed;top:0;left:0;z-index:2;pointer-events:none;
    width:3px;height:3px;border-radius:50%;
    background:#fff;
    box-shadow:0 0 4px 1px rgba(255,255,255,.85);
    transform:translate(-50%,-50%) scale(1);
    opacity:.9;
    animation:cursor-star-fade 900ms ease-out forwards;
    will-change:transform,opacity;
}
@keyframes cursor-star-fade {
    0%   { opacity:.9; transform:translate(-50%,-50%) scale(1); }
    100% { opacity:0;  transform:translate(-50%,calc(-50% + 10px)) scale(.2); }
}
@media (prefers-reduced-motion: reduce){ .cursor-star{ display:none; } }

/* ── Back to Top ──────────────────────────────────────────── */
.back-to-top {
    position:fixed;bottom:28px;right:28px;
    width:46px;height:46px;border-radius:14px;
    background:var(--gradient);color:#fff;border:none;cursor:pointer;z-index:500;
    display:flex;align-items:center;justify-content:center;font-size:.9rem;
    opacity:0;transform:translateY(16px);
    transition:opacity .3s ease,transform .3s cubic-bezier(.34,1.56,.64,1),box-shadow .3s ease;
    box-shadow:0 4px 24px rgba(139,92,246,.35);
}
.back-to-top.visible { opacity:1;transform:translateY(0); }
.back-to-top:hover   { transform:translateY(-4px);box-shadow:0 10px 36px rgba(139,92,246,.5); }

/* ── Ripple Waves ─────────────────────────────────────────── */
.ripple-wave {
    position:absolute;border-radius:50%;
    background:rgba(255,255,255,.22);transform:scale(0);
    pointer-events:none;animation:ripple-expand .65s linear forwards;
}

/* ── Typewriter Cursor ────────────────────────────────────── */
.tw-cursor {
    display:inline-block;width:3px;height:.8em;background:var(--secondary);
    margin-left:4px;vertical-align:middle;border-radius:2px;
    animation:cursor-blink .85s ease-in-out infinite;
}

/* ── Enhanced Gradient Text ───────────────────────────────── */
.gradient-text, .hero-gradient-text {
    background: linear-gradient(90deg,var(--primary) 0%,var(--secondary) 40%,var(--accent) 70%,var(--primary) 100%);
    background-size: 250% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: shimmer-sweep 5s linear infinite;
}

/* ── Enhanced Hero Badge (all pages) ─────────────────────── */
.hero-badge, .page-hero-badge {
    position: relative;
    padding-left: 24px;
}
.hero-badge::before, .page-hero-badge::before {
    content: '';
    position: absolute;
    left: 12px; top: 50%;
    transform: translateY(-50%);
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--success);
    animation: badge-dot-blink 2s ease-in-out infinite;
}

/* ── Modal Animation ──────────────────────────────────────── */
.modal.active .modal-content { animation: modal-slide-up .32s cubic-bezier(.22,1,.36,1) both; }

/* ── Card Hover Enhanced ──────────────────────────────────── */
.card {
    transition: transform .35s cubic-bezier(.22,1,.36,1),
                box-shadow .35s ease, border-color .35s ease;
}
.card:hover {
    transform: translateY(-6px);
    border-color: rgba(139,92,246,.3);
    box-shadow: 0 24px 60px rgba(0,0,0,.38), 0 0 0 1px rgba(139,92,246,.18), 0 0 40px rgba(139,92,246,.08);
}

/* ── Person Card ──────────────────────────────────────────── */
.person-card {
    transition: transform .35s cubic-bezier(.22,1,.36,1),
                box-shadow .35s ease, border-color .35s ease;
}

/* ── Navbar Scrolled ──────────────────────────────────────── */
.navbar.scrolled {
    background: rgba(5,5,8,.97) !important;
    box-shadow: 0 4px 30px rgba(0,0,0,.4) !important;
    border-bottom-color: rgba(139,92,246,.18);
}

/* ── Footer Gradient Line ─────────────────────────────────── */
.footer { position: relative; }
.footer::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; height: 1px;
    background: linear-gradient(90deg, transparent, var(--primary), var(--secondary), transparent);
    opacity: .4;
}

/* ── Social Links Enhanced ────────────────────────────────── */
.social-links a {
    transition: color .25s ease, background .25s ease,
                border-color .25s ease,
                transform .3s cubic-bezier(.34,1.56,.64,1);
}
.social-links a:hover { transform: translateY(-4px) scale(1.08); }

/* ── Nav Brand Hover ──────────────────────────────────────── */
.nav-brand:hover i { animation: spin-once .5s ease-in-out, brand-icon-glow 3s ease-in-out infinite .5s; }

/* Animated gradient flowing through the "Rapky" title */
.nav-brand { background-size: 220% auto; animation: brand-gradient-flow 6s ease-in-out infinite; }
.nav-brand:hover { animation-duration: 2.2s; }
@keyframes brand-gradient-flow {
    0%,100% { background-position: 0% 50%; }
    50%      { background-position: 100% 50%; }
}
@media (prefers-reduced-motion: reduce) {
    .nav-brand { animation: none; background-position: 0% 50%; }
}

/* ── Cursor Sparkle Layer (JS-driven via Web Animations API) ─ */
#sparkle-layer {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 9998;
    overflow: hidden;
}

/* ── Navbar Enhanced Animations ───────────────────────────── */
.navbar::after {
    content:'';
    position:absolute;
    inset:0;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(139,92,246,.04) 25%,
        rgba(236,72,153,.04) 50%,
        rgba(6,182,212,.04) 75%,
        transparent 100%);
    background-size: 300% 100%;
    animation: nav-aurora 10s ease-in-out infinite;
    pointer-events: none;
    z-index: 0;
}
@keyframes nav-aurora {
    0%,100% { background-position: 0% 50%; }
    50%      { background-position: 100% 50%; }
}

/* Stagger-in on page load */
.nav-menu li { animation: nav-link-in .45s ease both; }
.nav-menu li:nth-child(1) { animation-delay: .04s; }
.nav-menu li:nth-child(2) { animation-delay: .09s; }
.nav-menu li:nth-child(3) { animation-delay: .14s; }
.nav-menu li:nth-child(4) { animation-delay: .19s; }
.nav-menu li:nth-child(5) { animation-delay: .24s; }
.nav-menu li:nth-child(6) { animation-delay: .29s; }
@keyframes nav-link-in { from{opacity:0;transform:translateY(-10px)} to{opacity:1;transform:none} }

/* Glow halo behind hovered nav link */
.nav-link::before {
    content:'';
    position:absolute;
    inset:-6px -10px;
    border-radius:10px;
    background: radial-gradient(ellipse at center, rgba(139,92,246,.18), transparent 70%);
    opacity:0;
    transition: opacity .35s;
    pointer-events:none;
}
.nav-link:hover::before,.nav-link.active::before { opacity:1; }

/* Active link glowing underline */
.nav-link.active::after {
    animation: underline-glow 2.5s ease-in-out infinite alternate;
}
@keyframes underline-glow {
    from { box-shadow: 0 1px 4px var(--primary); filter: blur(0px); }
    to   { box-shadow: 0 1px 10px var(--secondary), 0 0 18px var(--secondary); filter: blur(.3px); }
}

/* Register button animated shimmer */
.btn-register { position: relative; overflow: hidden; }
.btn-register::before {
    content:'';
    position:absolute;
    top:-10%;left:-80%;
    width:50%;height:120%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.28), transparent);
    transform: skewX(-18deg);
    animation: btn-reg-shimmer 2.8s ease-in-out infinite;
}
@keyframes btn-reg-shimmer {
    0%   { left:-80%; }
    60%  { left:160%; }
    100% { left:160%; }
}

/* Nav brand icon pulse glow */
.nav-brand i {
    filter: drop-shadow(0 0 5px rgba(139,92,246,.7));
    animation: brand-icon-glow 3s ease-in-out infinite;
}
@keyframes brand-icon-glow {
    0%,100% { filter: drop-shadow(0 0 4px rgba(139,92,246,.6)); }
    50%      { filter: drop-shadow(0 0 12px rgba(139,92,246,1)) drop-shadow(0 0 22px rgba(236,72,153,.5)); }
}

/* Login button border shimmer */
.btn-login { position: relative; overflow: hidden; }
.btn-login::after {
    content:'';
    position:absolute;
    inset:0;
    border-radius: inherit;
    background: linear-gradient(90deg,
        transparent 0%, rgba(139,92,246,.15) 50%, transparent 100%);
    background-size: 200% 100%;
    animation: login-border-sweep 4s ease-in-out infinite;
    opacity: 0;
    transition: opacity .3s;
}
.btn-login:hover::after { opacity: 1; }
@keyframes login-border-sweep {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* Nav toggle animated on mobile */
.nav-toggle { transition: transform .3s ease; }
.nav-toggle:hover { transform: rotate(90deg) scale(1.1); }

/* Navbar scrolled — colored bottom border pulse */
.navbar.scrolled { border-bottom: 1px solid transparent; }
.navbar.scrolled::before {
    content:'';
    position:absolute;
    bottom:0; left:0; right:0; height:1px;
    background: linear-gradient(90deg, transparent, var(--primary), var(--secondary), var(--accent), transparent);
    background-size: 300% 100%;
    animation: nav-border-slide 4s linear infinite;
}
@keyframes nav-border-slide {
    0%   { background-position: 0% 0; }
    100% { background-position: 300% 0; }
}

/* ── Reduced Motion ───────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    *,*::before,*::after {
        animation-duration: .01ms !important;
        transition-duration: .01ms !important;
    }
}