@font-face {
  font-family: "Orbitron";
  src: url("/fonts/orbitron_black.ttf") format("truetype");
  font-weight: 900;
  font-display: swap;
}
@font-face {
  font-family: "Rajdhani";
  src: url("/fonts/rajdhani_medium.ttf") format("truetype");
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: "Rajdhani";
  src: url("/fonts/rajdhani_bold.ttf") format("truetype");
  font-weight: 700;
  font-display: swap;
}
:root {
  --fondo: #04030c;
  --tarjeta: #12102b;
  --linea: rgba(255, 255, 255, 0.12);
  --texto: #c9c3e4;
  --claro: #f5f3ff;
  --tenue: #8b84ad;
  --cian: #00e5d0;
  --violeta: #a78bfa;
  --verde: #34e5a0;
  --ambar: #ffb020;
  --azul: #4da6ff;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  background: radial-gradient(120% 70% at 50% 0%, #1b1840 0%, var(--fondo) 55%);
  color: var(--texto);
  font-family: "Rajdhani", system-ui, sans-serif;
  font-size: 19px;
  line-height: 1.62;
  min-height: 100vh;
}
a { color: var(--cian); }
.marco { max-width: 720px; margin: 0 auto; padding: 0 22px; }
header.sup {
  border-bottom: 1px solid var(--linea);
  padding: 14px 0;
}
header.sup .marco { display: flex; align-items: center; gap: 12px; }
.marca {
  display: flex; align-items: center; gap: 10px;
  font-family: "Orbitron", sans-serif; font-weight: 900; font-size: 0.95rem;
  letter-spacing: 0.09em; color: var(--claro); text-decoration: none;
}
.marca img { width: 30px; height: 30px; }
.sup nav { margin-left: auto; display: flex; gap: 14px; font-size: 0.9rem; }
main { padding: 34px 0 70px; }
h1 {
  font-family: "Orbitron", sans-serif; font-weight: 900;
  color: var(--claro); font-size: 1.9rem; line-height: 1.18; margin: 0 0 10px;
}
h2 {
  font-family: "Orbitron", sans-serif; font-weight: 900;
  color: var(--cian); font-size: 1.05rem; letter-spacing: 0.02em;
  margin: 34px 0 8px;
}
.meta { color: var(--tenue); font-size: 0.9rem; margin: 0 0 26px; }
.entradilla { color: var(--claro); font-size: 1.15rem; margin: 0 0 8px; }
.enapp {
  border: 1px solid rgba(167, 139, 250, 0.45);
  border-radius: 16px; padding: 16px 18px; margin: 34px 0 0;
  background: rgba(124, 77, 255, 0.09);
}
.enapp b {
  display: block; font-family: "Orbitron", sans-serif; font-size: 0.7rem;
  letter-spacing: 0.12em; color: var(--violeta); margin-bottom: 6px;
}
.aviso { color: var(--tenue); font-size: 0.85rem; margin-top: 34px; }
.lista { list-style: none; padding: 0; margin: 0; }
.lista li {
  border: 1px solid var(--linea); border-radius: 18px;
  padding: 18px 20px; margin-bottom: 12px;
  background: linear-gradient(180deg, rgba(18,16,43,0.92), rgba(10,8,32,0.86));
}
.lista a { text-decoration: none; }
.lista h3 {
  margin: 0 0 4px; color: var(--claro); font-size: 1.15rem;
  font-family: "Rajdhani", sans-serif; font-weight: 700;
}
.lista p { margin: 0; color: var(--texto); font-size: 0.98rem; }
.lista small { color: var(--tenue); font-size: 0.82rem; }
.sup-ficha { border: 1px solid var(--linea); border-radius: 18px; padding: 20px; margin: 0 0 14px;
  background: linear-gradient(180deg, rgba(18,16,43,0.92), rgba(10,8,32,0.86)); }
.sup-ficha h3 { margin: 0 0 2px; color: var(--claro); font-size: 1.2rem; }
.sup-ficha .gancho { color: var(--texto); margin: 0 0 12px; font-size: 0.98rem; }
.sup-ficha h4 {
  font-family: "Orbitron", sans-serif; font-size: 0.66rem; letter-spacing: 0.12em;
  color: var(--cian); margin: 16px 0 4px;
}
.sup-ficha h4.ojo { color: var(--ambar); }
.sup-ficha p { margin: 0; font-size: 0.98rem; }
.sello {
  display: inline-block; border-radius: 999px; padding: 3px 11px;
  font-family: "Orbitron", sans-serif; font-size: 0.62rem; letter-spacing: 0.1em;
}
.alta { color: var(--verde); border: 1px solid rgba(52, 229, 160, 0.5); background: rgba(52, 229, 160, 0.1); }
.media { color: var(--ambar); border: 1px solid rgba(255, 176, 32, 0.5); background: rgba(255, 176, 32, 0.1); }
.limitada { color: var(--tenue); border: 1px solid var(--linea); }
.tienda {
  display: inline-flex; align-items: center; gap: 12px; margin-top: 30px;
  background: linear-gradient(100deg, #7c4dff, #ff4d9d);
  color: #fff; text-decoration: none; border-radius: 999px; padding: 13px 24px;
  font-family: "Orbitron", sans-serif; font-weight: 900; font-size: 0.85rem;
}
.tienda svg { width: 17px; height: 19px; }
footer {
  border-top: 1px solid var(--linea); padding: 26px 0 60px;
  color: var(--tenue); font-size: 0.88rem;
}
footer nav { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 10px; }
@media (max-width: 620px) { body { font-size: 18px; } h1 { font-size: 1.55rem; } }