/* =====================================================================
   MFC HACK LAB · tema base (estilo GhostDev)
   Fondo negro, líneas finas, esquinas pequeñas, acentos rojo y rosa.
   Evogria en títulos y botones · JetBrains Mono en todo lo demás.
   Glare que sigue al ratón: añade data-glare + <span class="glare"></span> y carga glare.js
   ===================================================================== */

/* ---------- fuentes (van en la carpeta fonts/) */
@font-face {
  font-family: 'Evogria';
  src: url('../fonts/evogria.otf') format('opentype');
  font-display: swap;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('../fonts/jetbrains-mono-latin-wght-normal.woff2') format('woff2');
  font-weight: 100 800;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('../fonts/jetbrains-mono-latin-ext-wght-normal.woff2') format('woff2');
  font-weight: 100 800;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---------- colores y medidas */
:root {
  --gd-bg: #000000;          /* fondo */
  --gd-panel: #0a0a0a;       /* tarjetas y paneles */
  --gd-panel-2: #0f0f0f;     /* parte de arriba del degradado de las tarjetas */
  --gd-red: #f2121b;         /* acento principal: botones, lo activo */
  --gd-red-hi: #ff3a42;      /* rojo al pasar el ratón */
  --gd-red-text: #ff4a52;    /* rojo para texto (precios, botón) */
  --gd-red-deep: #94000a;    /* luz roja del fondo */
  --gd-pink: #e94a73;        /* acento secundario: bordes al pasar el ratón, códigos */
  --gd-pink-text: #ff6b8c;   /* rosa para la miga de pan */
  --gd-green: #22c55e;       /* verde: labs/maquinas resueltas */
  --gd-green-text: #2ecc71;
  --gd-white: #ffffff;
  --gd-text: #e6e6e6;        /* texto */
  --gd-smoke: #9a9a9a;       /* texto secundario */
  --gd-line: rgba(255, 255, 255, 0.09);   /* borde fino */
  --gd-line-2: rgba(255, 255, 255, 0.16); /* borde fuerte */
  --gd-dash: rgba(255, 255, 255, 0.22);   /* borde discontinuo */
  --gd-radius: 10px;         /* tarjetas */
  --gd-radius-sm: 6px;       /* botones */
  --gd-title: 'Evogria', 'JetBrains Mono', system-ui, sans-serif;
  --gd-mono: 'JetBrains Mono', ui-monospace, 'Cascadia Code', monospace;
  --gd-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  color-scheme: dark;
}

/* ---------- base */
* { box-sizing: border-box; }
body {
  margin: 0;
  color: var(--gd-text);
  font: 400 14.5px/1.7 var(--gd-mono);
  letter-spacing: -0.005em;
  -webkit-font-smoothing: antialiased;
  /* luz roja y rosa solo arriba */
  background:
    radial-gradient(70vw 50vh at 20vw -5vh, rgba(148, 0, 10, 0.32), transparent 70%) no-repeat,
    radial-gradient(55vw 45vh at 95vw 10vh, rgba(233, 74, 115, 0.12), transparent 70%) no-repeat,
    var(--gd-bg);
}
::selection { background: var(--gd-red); color: var(--gd-white); }
:focus-visible { outline: 3px solid var(--gd-pink); outline-offset: 3px; border-radius: 6px; }
h1, h2, h3, p { margin: 0; }
.gd-title { font-family: var(--gd-title); font-weight: 400; color: var(--gd-white); }
.gd-muted { color: var(--gd-smoke); }

/* ---------- título grande de portada */
.gd-hero-title {
  font: 400 clamp(40px, 6.2vw, 96px) / 0.9 var(--gd-title);
  color: #f2f2f2;
  letter-spacing: -0.005em;
  text-shadow: 0 0 60px rgba(242, 18, 27, 0.18);
}

/* «● GHOSTDEV / SCRIPTS PARA FIVEM» encima del título */
.gd-crumb {
  display: flex;
  align-items: center;
  gap: 10px;
  font: 500 11.5px/1 var(--gd-mono);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gd-pink-text);
}
.gd-crumb i { width: 6px; height: 6px; border-radius: 50%; background: var(--gd-red); box-shadow: 0 0 10px var(--gd-red); }
.gd-crumb span { color: var(--gd-smoke); }

/* cabecera de sección «// título» */
.gd-shead {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 8px 24px;
  flex-wrap: wrap;
  padding-bottom: 14px;
  margin-bottom: 22px;
  border-bottom: 1px solid var(--gd-line);
}
.gd-shead__title { font: 600 19px/1.2 var(--gd-mono); color: var(--gd-white); letter-spacing: -0.01em; }
.gd-shead__title b { color: var(--gd-red); font-weight: 600; margin-right: 6px; }
.gd-shead__side { font: 500 11px/1 var(--gd-mono); letter-spacing: 0.2em; text-transform: uppercase; color: var(--gd-smoke); }

/* ---------- botones: rectángulo fino, Evogria en mayúsculas */
.gd-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 44px;
  padding: 0 20px;
  border-radius: var(--gd-radius-sm);
  border: 1px solid var(--gd-line-2);
  background: rgba(255, 255, 255, 0.02);
  color: #c8c8c8;
  font: 400 13px/1 var(--gd-title);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, transform 0.2s var(--gd-ease);
}
.gd-btn:hover { color: var(--gd-white); border-color: var(--gd-pink); }
.gd-btn:active { transform: translateY(1px); }
/* principal: contorno rojo que se rellena al pasar el ratón */
.gd-btn--solid { background: rgba(242, 18, 27, 0.06); color: var(--gd-red-text); border-color: var(--gd-red); }
.gd-btn--solid:hover { background: var(--gd-red); color: var(--gd-white); border-color: var(--gd-red); box-shadow: 0 0 26px rgba(242, 18, 27, 0.4); }
.gd-btn--sm { height: 36px; padding: 0 14px; font-size: 12px; }
.gd-btn--wide { width: 100%; }

/* ---------- chips y filtros */
.gd-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.gd-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 24px;
  padding: 0 8px;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--gd-line);
  font: 500 11.5px/1 var(--gd-mono);
  color: #c4c4c4;
}
.gd-chip--line { border-style: dashed; border-color: var(--gd-dash); background: none; }
.gd-filter {
  height: 32px;
  padding: 0 12px;
  border-radius: 6px;
  border: 1px dashed var(--gd-line-2);
  background: none;
  color: var(--gd-text);
  font: 500 12.5px/1 var(--gd-mono);
  cursor: pointer;
}
.gd-filter:hover { border-color: var(--gd-pink); }
.gd-filter.is-on { border-style: solid; border-color: var(--gd-red); background: rgba(242, 18, 27, 0.1); color: var(--gd-white); }

/* ---------- precio */
.gd-price { font: 400 15px/1 var(--gd-title); color: var(--gd-red-text); letter-spacing: 0.02em; white-space: nowrap; }

/* ---------- tarjeta */
.gd-card {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  border-radius: var(--gd-radius);
  border: 1px solid var(--gd-line);
  background: linear-gradient(180deg, var(--gd-panel-2), var(--gd-panel));
  transition: border-color 0.25s, transform 0.35s var(--gd-ease), box-shadow 0.35s;
}
.gd-card:hover { border-color: rgba(233, 74, 115, 0.55); box-shadow: 0 14px 40px rgba(242, 18, 27, 0.12); transform: translateY(-3px); }
.gd-card__body { display: flex; flex-direction: column; gap: 5px; padding: 16px; }
.gd-card__meta { display: flex; justify-content: space-between; gap: 10px; font: 500 11px/1 var(--gd-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--gd-smoke); }
.gd-card__code { font: 500 11.5px/1 var(--gd-mono); color: var(--gd-pink); }
.gd-card__name { font: 400 20px/1.05 var(--gd-title); color: var(--gd-white); margin-top: 6px; }
.gd-card__tag { font-size: 12.5px; line-height: 1.6; color: #9e9e9e; }
.gd-card__foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: auto; padding-top: 12px; }

/* cuadradito con icono (rojo) */
.gd-ico {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 7px;
  border: 1px solid rgba(242, 18, 27, 0.55);
  background: rgba(242, 18, 27, 0.06);
  color: var(--gd-red-text);
}

/* ---------- buscador */
.gd-search {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 34px;
  padding: 0 8px 0 11px;
  border-radius: 7px;
  border: 1px solid var(--gd-line-2);
  background: rgba(255, 255, 255, 0.025);
  color: var(--gd-smoke);
  transition: border-color 0.2s, background 0.2s;
}
.gd-search:focus-within { border-color: rgba(233, 74, 115, 0.6); background: rgba(255, 255, 255, 0.04); }
.gd-search input { flex: 1; min-width: 0; height: 100%; border: 0; outline: none; background: none; color: var(--gd-white); font: 400 13px/1 var(--gd-mono); }
.gd-search input::placeholder { color: var(--gd-smoke); }
.gd-search kbd { padding: 3px 6px; border-radius: 4px; border: 1px solid var(--gd-line-2); font: 500 11px/1 var(--gd-mono); color: var(--gd-smoke); }

/* ---------- barra de arriba */
.gd-nav {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 20px;
  height: 56px;
  padding: 0 clamp(16px, 4vw, 48px);
  background: rgba(8, 8, 8, 0.82);
  border-bottom: 1px solid var(--gd-line);
  backdrop-filter: blur(12px);
}
.gd-nav__brand { display: flex; align-items: center; gap: 8px; font: 400 17px/1 var(--gd-title); }
.gd-nav__brand b { color: var(--gd-red); font-weight: 400; }
.gd-nav__brand i { font-style: normal; color: var(--gd-smoke); }
.gd-nav__links { display: flex; gap: 20px; margin-left: auto; }
.gd-nav__links a { font: 500 13px/1 var(--gd-mono); color: #b0b0b0; text-decoration: none; }
.gd-nav__links a:hover { color: var(--gd-white); }

/* ---------- glare: brillo que sigue al ratón (glare.js pone --mx y --my) */
[data-glare] { position: relative; }
.glare {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s;
  background:
    radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(233, 74, 115, 0.14), transparent 42%),
    radial-gradient(160px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, 0.1), transparent 70%);
}
[data-glare]:hover > .glare { opacity: 1; }