/* ═══════════════════════════════════════════════════════════════
   OBSIDIAN DEEP — capa de efectos premium (va DESPUÉS de main.css)
   ═══════════════════════════════════════════════════════════════ */


body { font-family: 'Inter', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; }

/* Tracking "machined" en titulares grandes */
h1, h2 { letter-spacing: -0.02em; }

/* JetBrains Mono para metadatos y líneas de comando */
.mono, .cmd-line { font-family: 'JetBrains Mono', 'Courier New', monospace; letter-spacing: .05em; }
.cmd-line { color: #66d9cc; font-size: .8rem; }

/* ── Scrollbar ultra-fina (4px) ── */
::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: #0c1324; }
::-webkit-scrollbar-thumb { background: #2e3447; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #26a69a; }
html { scrollbar-width: thin; scrollbar-color: #2e3447 #0c1324; }

/* ── Glassmorphism Level 1 en las cards ── */
.card-dark {
  position: relative;
  background: rgba(15, 23, 42, 0.6);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
}
/* Borde-gradiente que simula luz cenital */
.card-dark::before {
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, rgba(255,255,255,.10), rgba(255,255,255,0) 60%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}
.card-dark:hover {
  border-color: rgba(38,166,154,.45);
  box-shadow: 0 0 40px rgba(38,166,154,.10);
  backdrop-filter: blur(30px);
  -webkit-backdrop-filter: blur(30px);
}

/* ── Glows atmosféricos en los hero ── */
.hero-gradient {
  background:
    radial-gradient(600px 300px at 15% 20%, rgba(38,166,154,.12), transparent 70%),
    radial-gradient(700px 350px at 85% 70%, rgba(78,222,163,.08), transparent 70%),
    linear-gradient(135deg, #0c1324 0%, #070d1f 50%, #0c1324 100%);
}

/* ── Pills (badges redondos) ── */
.pill { display: inline-block; padding: .25rem .75rem; border-radius: 9999px;
        font-size: .68rem; font-weight: 700; letter-spacing: .08em;
        text-transform: uppercase; margin-right: .4rem; }
.pill-live { background: rgba(78,222,163,.12); color: #4edea3; border: 1px solid rgba(78,222,163,.35); }
.pill-teal { background: rgba(102,217,204,.10); color: #66d9cc; border: 1px solid rgba(102,217,204,.30); }

/* ── Inputs que se iluminan en teal al enfocar ── */
#upgradeForm input:focus, #upgradeForm select:focus, #upgradeForm textarea:focus {
  outline: none; border-color: #26a69a;
  box-shadow: 0 0 0 3px rgba(38,166,154,.15);
}