/* ============================================
   DEVPERSONAL BUTTONS LIBRARY v5.0 — FINAL & COMPLETO
   46+ botones | Glassmorphism real | 100% responsive
   SIN @keyframes | SIN media queries | SIN JavaScript
   ============================================ */

* { margin:0; padding:0; box-sizing:border-box; }

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background: #0f172a;
    color: #e2e8f0;
    min-height: 100vh;
    padding: clamp(2rem, 5vw, 4rem);
}

.container { max-width: 1600px; margin: 0 auto; }

header { text-align:center; margin-bottom: clamp(3rem, 8vw, 5rem); }
h2 { 
    font-size: clamp(2.5rem, 7vw, 5rem);
    background: linear-gradient(135deg, #60a5fa, #c084fc, #ec4899);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent; /* opcional, por si acaso */
    font-weight: 900;
}
.subtitle { font-size: clamp(1rem, 2.5vw, 1.3rem); color:#94a3b8; margin-top: .5rem; }

.section-title {
    font-size: clamp(1.8rem, 4vw, 2.5rem);
    color: #60a5fa;
    margin: clamp(3rem, 8vw, 5rem) 0 clamp(2rem, 5vw, 3rem);
    font-weight: 800;
}

/* ===== TARJETAS GLASSMORPHISM PERFECTO ===== */
.button-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(clamp(300px, 45vw, 360px), 1fr));
    gap: clamp(1.8rem, 4vw, 2.5rem);
}

.button-card {
    background: rgba(15, 23, 42, 0.4);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-radius: 1.5rem;
    border: 1px solid rgba(96, 165, 250, 0.15);
    padding: clamp(2rem, 5vw, 2.8rem);
    text-align: center;
    box-shadow: 0 8px 32px rgba(0,0,0,0.3), 0 0 20px rgba(96,165,250,0.05);
    transition: all 0.4s ease;
    position: relative;
    overflow: hidden;
}

.button-card::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 1.5rem;
    padding: 1px;
    background: linear-gradient(135deg, rgba(96,165,250,.3), transparent, rgba(96,165,250,.1));
    
    /* VERSIÓN ESTÁNDAR + PREFIJO (sin warnings) */
    mask: 
        linear-gradient(#fff 0 0) padding-box,
        linear-gradient(#fff 0 0);
    mask-composite: exclude;
    -webkit-mask: 
        linear-gradient(#fff 0 0) padding-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    
    pointer-events: none;
}

.button-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(0,0,0,0.4), 0 0 40px rgba(96,165,250,0.15);
    border-color: rgba(96, 165, 250, 0.3);
}

.button-name {
    font-size: clamp(0.85rem, 2vw, 1rem);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #94a3b8;
    margin-bottom: clamp(1.5rem, 4vw, 2rem);
    font-weight: 600;
}

/* ===== BOTÓN BASE ===== */
.btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: clamp(0.6rem, 1.8vw, 0.8rem);
    padding: clamp(0.9rem, 2.5vw, 1.1rem) clamp(2rem, 5vw, 2.8rem);
    font-weight: 600;
    font-size: clamp(0.95rem, 2.2vw, 1.1rem);
    color: #fff;
    text-decoration: none;
    border-radius: 1rem;
    overflow: hidden;
    transition: all 0.4s ease;
    cursor: pointer;
    border: none;
}

/* ======================= TODOS LOS BOTONES ======================= */

.btn-classic   { background: linear-gradient(135deg, #1e293b, #0f172a); border: 2px solid #60a5fa; box-shadow: 0 8px 25px rgba(96,165,250,.4); }
.btn-classic:hover { transform: translateY(-4px); box-shadow: 0 16px 40px rgba(96,165,250,.6); }

.btn-neon      { background: #0f172a; border: 2px solid #60a5fa; box-shadow: 0 0 30px rgba(96,165,250,.8); }
.btn-neon:hover { box-shadow: 0 0 50px rgba(96,165,250,1); transform: translateY(-4px); }

.btn-glass     { background: rgba(96,165,250,.12); backdrop-filter: blur(12px); border: 1px solid rgba(96,165,250,.3); }
.btn-glass:hover { background: rgba(96,165,250,.25); transform: translateY(-4px); }

.btn-gradient  { background: linear-gradient(135deg, #60a5fa, #a78bfa, #f472b6); }
.btn-gradient:hover { background: linear-gradient(135deg, #ec4899, #a78bfa, #60a5fa); transform: translateY(-4px) scale(1.03); }

.btn-minimal   { background: transparent; border: 2px solid rgba(148,163,184,.4); color:#94a3b8; }
.btn-minimal:hover { border-color: #60a5fa; background: rgba(96,165,250,.1); color:#fff; }

.btn-3d        { background:#1e293b; box-shadow:0 8px 0 #0f172a, 0 15px 30px rgba(0,0,0,.5); transform:translateY(-6px); }
.btn-3d:hover  { transform:translateY(-10px); }
.btn-3d:active { transform:translateY(-2px); box-shadow:0 4px 0 #0f172a; }

.btn-cyber     { background:#000; border:2px solid #00ff41; color:#00ff41; }
.btn-cyber:hover { box-shadow:0 0 40px rgba(0,255,65,.8); transform: translateY(-4px); }

.btn-morph     { background: linear-gradient(135deg, #a855f7, #ec4899); border-radius:3rem; }
.btn-morph:hover { border-radius:.8rem; transform:scale(1.05); }

.btn-shimmer   { background: linear-gradient(135deg, #1e293b, #334155); border:1px solid rgba(96,165,250,.2); position:relative; overflow:hidden; }
.btn-shimmer::before { content:''; position:absolute; top:0; left:-100%; width:100%; height:100%; background: linear-gradient(90deg, transparent, rgba(255,255,255,.3), transparent); transition:left .7s; }
.btn-shimmer:hover::before { left:100%; }

.btn-orb       { width: clamp(4rem, 12vw, 5.5rem); height: clamp(4rem, 12vw, 5.5rem); padding:0; border-radius:50%; background: radial-gradient(circle at 30% 30%, #60a5fa, #3b82f6); box-shadow:0 0 40px rgba(59,130,246,.8); }
.btn-orb:hover { transform: translateY(-10px) scale(1.15); box-shadow:0 0 60px rgba(59,130,246,1); }

/* COLOR VARIANTS */
.btn-red       { background:#dc2626; border:2px solid #ef4444; }
.btn-red:hover { background:#ef4444; transform:translateY(-4px); }

.btn-green     { background:#16a34a; border:2px solid #22c55e; }
.btn-green:hover { background:#22c55e; transform:translateY(-4px); }

.btn-purple    { background:#7c3aed; border:2px solid #a855f7; }
.btn-purple:hover { background:#a855f7; transform:translateY(-4px); }

.btn-warning   { background:#ca8a04; border:2px solid #eab308; }
.btn-warning:hover { background:#eab308; transform:translateY(-4px); }

.btn-success   { background:#15803d; border:2px solid #16a34a; }
.btn-success:hover { background:#16a34a; transform:translateY(-4px); }

.btn-sunset    { background: linear-gradient(135deg, #f97316, #ef4444, #ec4899); }

/* MÁS ESTILOS (todos los que usas en el HTML) */
.btn-metal     { background: linear-gradient(135deg, #4b5563, #1f2937); border:1px solid #9ca3af; box-shadow:0 8px 25px rgba(0,0,0,.5); }
.btn-metal:hover { transform:translateY(-4px); }

.btn-holo      { background:#0f172a; border:2px solid #00ffff; box-shadow:0 0 30px rgba(0,255,255,.7); }
.btn-holo:hover { box-shadow:0 0 50px rgba(0,255,255,1); transform:translateY(-4px); }

.btn-aurora    { background: linear-gradient(135deg, #06b6d4, #3b82f6, #8b5cf6); }
.btn-aurora:hover { transform:translateY(-4px) scale(1.03); }

.btn-steel     { background:#374151; border:1px solid #6b7280; box-shadow:0 8px 20px rgba(0,0,0,.6); }
.btn-steel:hover { transform:translateY(-4px); }

.btn-pulse2    { background:#1e293b; border:2px solid #34d399; box-shadow:0 0 20px rgba(52,211,153,.5); }
.btn-pulse2:hover { box-shadow:0 0 40px rgba(52,211,153,.9); }

.btn-crystal   { background: rgba(255,255,255,.08); backdrop-filter: blur(15px); border:1px solid rgba(255,255,255,.2); }
.btn-crystal:hover { background: rgba(255,255,255,.18); transform:translateY(-4px); }

.btn-frost     { background: rgba(34,211,238,.15); backdrop-filter: blur(12px); border:1px solid rgba(34,211,238,.4); }
.btn-frost:hover { background: rgba(34,211,238,.25); transform:translateY(-4px); }

.btn-lava      { background: linear-gradient(135deg, #dc2626, #b91c1c); }
.btn-lava:hover { transform:translateY(-4px) scale(1.03); }

.btn-glitch    { background:#0f172a; border:2px solid #ec4899; box-shadow:0 0 20px rgba(236,72,153,.5); }
.btn-glitch:hover { box-shadow:0 0 40px rgba(236,72,153,.9); }

.btn-ripple    { background:#1e293b; border:1px solid #60a5fa; position:relative; overflow:hidden; }
.btn-ripple::before { content:''; position:absolute; top:50%; left:50%; width:0; height:0; background:rgba(96,165,250,.4); border-radius:50%; transform:translate(-50%,-50%); transition:all .6s; }
.btn-ripple:hover::before { width:300px; height:300px; }

.btn-shadow    { background:#1e293b; box-shadow:0 12px 35px rgba(0,0,0,.7); }
.btn-shadow:hover { transform:translateY(-8px); box-shadow:0 24px 60px rgba(0,0,0,.9); }

.btn-gold      { background: linear-gradient(135deg, #ca8a04, #f59e0b); color:#1e293b; }
.btn-gold:hover { transform:translateY(-4px) scale(1.03); }

.btn-ice       { background: rgba(147,197,253,.2); backdrop-filter: blur(10px); border:1px solid rgba(147,197,253,.4); }
.btn-ice:hover { background: rgba(147,197,253,.3); transform:translateY(-4px); }

.btn-matrix    { background:#000; color:#00ff41; border:2px solid #00ff41; }
.btn-matrix:hover { box-shadow:0 0 50px rgba(0,255,65,.8); }

.btn-solar     { background: radial-gradient(circle, #f97316, #ef4444); }
.btn-solar:hover { transform:translateY(-4px) scale(1.03); }

.btn-diamond   { background: linear-gradient(135deg, #d4d4d8, #ffffff); color:#0f172a; }
.btn-diamond:hover { transform:translateY(-4px); }

.btn-vapor     { background: linear-gradient(135deg, #818cf8, #a5b4fc, #c084fc); }
.btn-vapor:hover { transform:translateY(-4px) scale(1.03); }

.btn-neon2     { background:#0f172a; border:2px solid #818cf8; box-shadow:0 0 25px rgba(129,140,248,.6); }
.btn-neon2:hover { box-shadow:0 0 45px rgba(129,140,248,1); }

.btn-forest    { background: linear-gradient(135deg, #166534, #14532d); }
.btn-forest:hover { transform:translateY(-4px); }

.btn-ocean     { background: linear-gradient(135deg, #1e40af, #172554); }
.btn-ocean:hover { transform:translateY(-4px); }

.btn-plasma    { background: linear-gradient(135deg, #7c3aed, #ec4899); }
.btn-plasma:hover { transform:translateY(-4px) scale(1.03); }

.btn-star      { background: radial-gradient(circle, #facc15, #fbbf24); }
.btn-star:hover { transform:translateY(-4px) scale(1.03); }

.btn-void      { background:#000; border:1px solid #1e293b; color:#64748b; }
.btn-void:hover { border-color:#60a5fa; background:rgba(96,165,250,.1); color:#fff; }

.btn-pulse3    { background:#1e293b; border:2px solid #f87171; box-shadow:0 0 20px rgba(248,113,113,.5); }
.btn-pulse3:hover { box-shadow:0 0 40px rgba(248,113,113,.9); }

.btn-haze      { background: rgba(100,116,139,.15); backdrop-filter: blur(10px); border:1px solid rgba(100,116,139,.3); }
.btn-haze:hover { background: rgba(100,116,139,.25); transform:translateY(-4px); }

.btn-cosmic    { background: radial-gradient(circle at 50% 50%, #1e293b, #0f172a); border:2px solid #6366f1; }
.btn-cosmic:hover { box-shadow:0 0 40px rgba(99,102,241,.7); transform:translateY(-4px); }

.btn-sand      { background: linear-gradient(135deg, #f59e0b, #eab308); }
.btn-sand:hover { transform:translateY(-4px); }

.btn-electric  { background:#0f172a; border:2px solid #0ea5e9; box-shadow:0 0 25px rgba(14,165,233,.6); }
.btn-electric:hover { box-shadow:0 0 45px rgba(14,165,233,1); }

.btn-marble    { background: linear-gradient(135deg, #e5e7eb, #d1d5db); color:#1e293b; }
.btn-marble:hover { transform:translateY(-4px); }

.btn-zen       { background: linear-gradient(135deg, #64748b, #94a3b8); }
.btn-zen:hover { transform:translateY(-4px) scale(1.03); }

/* EFECTO HOLO-SHADOW (el más brutal) */
.holo-shadow {
    position: relative;
    overflow: hidden;
}
.holo-shadow::before {
    content: "";
    position: absolute;
    top: -50%; left: -50%;
    width: 200%; height: 200%;
    background: conic-gradient(#ff00ff, #00eaff, #00ff88, #ffae00, #ff00ff);
    filter: blur(45px);
    opacity: 0;
    transition: opacity .45s ease;
    z-index: -1;
}
.holo-shadow:hover::before { opacity: .55; }
.holo-shadow::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 2px;
    background: linear-gradient(135deg, #ff00ff, #00eaff, #00ff88, #ffae00);
    
    /* VERSIÓN ESTÁNDAR + PREFIJO */
    mask: 
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    mask-composite: exclude;
    -webkit-mask: 
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    
    opacity: 0;
    transition: opacity .45s ease;
}
.holo-shadow:hover::after { opacity: 1; }