/* Cosmic Web Labs. Vacío, filamento y polvo: líneas de una observación, no un consultorio. */

:root {
  --bg: #0a1530;
  --text: #eaf3fb;
  --muted: #9fb6cf;
  --accent: #4f86d6;
  --filament: #4f86d6;
  --dust: #a0606f;
  --line: rgba(79, 134, 214, 0.3);
  --panel: rgba(6, 25, 58, 0.9);
  --lead: rgba(234, 243, 251, 0.86);
}

html { color-scheme: dark; }
body {
  background:
    radial-gradient(70% 46% at 88% -8%, rgba(79, 134, 214, 0.2), transparent 52%),
    radial-gradient(50% 40% at 0% 100%, rgba(160, 96, 111, 0.16), transparent 48%),
    var(--bg);
}
a { color: var(--filament); }
a:hover { color: #fff; }
::selection { background: rgba(126, 224, 214, 0.28); color: #fff; }

#filaments {
  position: fixed; inset: 0; z-index: 0; width: 100%; height: 100%;
  display: block; pointer-events: none;
}
.ring-sky {
  position: fixed; top: 0; left: 0; width: 100%; height: 100%;
  z-index: 0; pointer-events: none;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.ring-svg {
  width: min(92vmin, 820px);
  height: auto;
  opacity: 0.82;
  filter: drop-shadow(0 0 20px rgba(0, 242, 254, 0.2));
}
@keyframes cwl-spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
@keyframes cwl-pulse {
  0% { transform: scale(1); }
  100% { transform: scale(1.02); }
}
@keyframes cwl-beam {
  0% { stroke-dashoffset: 1000; }
  100% { stroke-dashoffset: -1000; }
}
.ring-spin { transform-origin: 400px 400px; animation: cwl-spin 25s linear infinite; }
.ring-pulse { transform-origin: 400px 400px; animation: cwl-pulse 8s ease-in-out infinite alternate; }
.ring-beam { animation: cwl-beam 6s linear infinite, cwl-spin 25s linear infinite; }
@media (prefers-reduced-motion: reduce) {
  .ring-spin, .ring-pulse, .ring-beam { animation: none; }
  .ring-svg animate { display: none; }
}
main, .site-footer { position: relative; z-index: 1; }

.skip-link { background: var(--filament); color: var(--bg); }
.kicker {
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--filament);
}
h1, h2, h3 { font-family: "Cormorant Garamond", Georgia, serif; font-weight: 500; letter-spacing: -0.03em; text-transform: none; text-shadow: 0 1px 16px rgba(5, 6, 10, 0.95); }
.lead, .kicker { text-shadow: 0 1px 12px rgba(5, 6, 10, 0.95); }
.lead { color: var(--lead); }

.site-header {
  border-bottom: 1px solid var(--line);
  background: rgba(5, 6, 10, 0.84);
  backdrop-filter: blur(14px);
}
.brand { font-family: "Cormorant Garamond", Georgia, serif; font-weight: 500; font-size: 22px; letter-spacing: 0; color: var(--text); }
.nav a {
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.14em;
  text-transform: uppercase; color: rgba(231, 238, 242, 0.74);
}
.nav a:hover { color: var(--filament); }

.section { border-top: 1px solid rgba(126, 224, 214, 0.14); }

.btn {
  padding: 14px 18px; border: 1px solid rgba(126, 224, 214, 0.55);
  background: rgba(126, 224, 214, 0.08); color: #d7f7f3;
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase;
}
.btn:hover { background: rgba(126, 224, 214, 0.18); color: #fff; }
.btn.ghost { border-color: rgba(183, 160, 224, 0.45); background: transparent; color: rgba(231, 238, 242, 0.86); }
.btn.ghost:hover { border-color: var(--dust); color: #fff; }

.card, .step, .domain {
  padding: 22px; border: 1px solid var(--line); background: var(--panel); color: inherit;
}
.card { padding: clamp(18px, 2.2vw, 28px); }
a.card:hover { border-color: rgba(126, 224, 214, 0.55); color: inherit; }
.step { border-left: 2px solid var(--filament); }
.cards .domain:nth-child(3n) { border-top: 2px solid var(--dust); }
.card .idx, .steps .n, .card .go {
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--filament);
}
.card .go { margin-top: auto; }
.card p, .step p, .domain p, .note { font-size: 17px; line-height: 1.5; color: rgba(231, 238, 242, 0.76); }
.domain .kicker { color: var(--dust); }

.clip { border: 1px solid var(--line); background: #05060a; }
.emu { border: 1px solid var(--line); background: #05060a; }

.site-footer { border-top: 1px solid var(--line); }
.footer-grid p { color: rgba(231, 238, 242, 0.66); }
.legal { color: var(--muted); }