/* ═══════════════════════════════════════════════════════════
   shared.css — Estilos comunes de lolo.es
   Incluido por todas las páginas del sitio.
   Rutas relativas al raíz del proyecto.
═══════════════════════════════════════════════════════════ */

/* ── Google Fonts ─────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;1,300&family=DM+Mono:wght@300;400&display=swap');

/* ── Reset ────────────────────────────────────────────────── */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

/* ── Design tokens ────────────────────────────────────────── */
:root {
  --bg:          #090e1a;
  --surface:     #0e1526;
  --accent:      #4db8ff;
  --accent-dim:  rgba(77, 184, 255, 0.1);
  --accent-glow: rgba(77, 184, 255, 0.35);
  --white:       #f0f0ee;
  --muted:       rgba(240, 240, 238, 0.35);
  --border:      rgba(240, 240, 238, 0.07);
}

/* ── Base ─────────────────────────────────────────────────── */
html { scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--white);
  font-family: 'DM Mono', monospace;
  cursor: none;
}

/* ── Custom cursor ────────────────────────────────────────── */
#cursor {
  position: fixed;
  width: 7px;
  height: 7px;
  background: var(--accent);
  border-radius: 50%;
  pointer-events: none;
  z-index: 9999;
  transform: translate(-50%, -50%);
  mix-blend-mode: screen;
  transition: width .25s, height .25s, opacity .3s;
}

#cursor-ring {
  position: fixed;
  width: 28px;
  height: 28px;
  border: 1px solid var(--accent-glow);
  border-radius: 50%;
  pointer-events: none;
  z-index: 9998;
  transform: translate(-50%, -50%);
  transition: width .3s, height .3s, border-color .3s;
}

#cursor.hover      { width: 3px; height: 3px; }
#cursor-ring.hover { width: 44px; height: 44px; border-color: var(--accent); }
#cursor.lb         { opacity: 0; }

/* ── Canvas de partículas ─────────────────────────────────── */
#bg-canvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}