/* ---------- Fuente: Helvetica Neue (Neue Helvena, licencia Envato) ----------
   Una sola familia en toda la web; el diseño juega con pesos y tamaños. */
@font-face { font-family: "Helvena"; src: url("/fonts/NeueHelvena-Extralight.woff2") format("woff2"); font-weight: 200; font-display: swap; }
@font-face { font-family: "Helvena"; src: url("/fonts/NeueHelvena-Light.woff2") format("woff2"); font-weight: 300; font-display: swap; }
@font-face { font-family: "Helvena"; src: url("/fonts/NeueHelvena-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Helvena"; src: url("/fonts/NeueHelvena-Medium.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Helvena"; src: url("/fonts/NeueHelvena-Semibold.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Helvena"; src: url("/fonts/NeueHelvena-Bold.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Helvena"; src: url("/fonts/NeueHelvena-Extrabold.woff2") format("woff2"); font-weight: 800; font-display: swap; }
@font-face { font-family: "Helvena"; src: url("/fonts/NeueHelvena-NeueHelvenaBlack.woff2") format("woff2"); font-weight: 900; font-display: swap; }

/* ---------- Colores y medidas ---------- */
:root {
  --negro: #0a0a0a;
  --carbon: #161616;
  --gris-oscuro: #2a2a2a;
  --gris: #8a8a8a;
  --gris-claro: #d9d9d9;
  --blanco: #f5f5f3;
  /* Acentos sacados de las portadas de sus releases; se usan con mucha mesura */
  --violeta: #7729fb;   /* Club Forever */
  --lavanda: #a69bfb;   /* Insólito */
  --cobalto: #447ffc;   /* Magneto */
  --hielo: #bfdbe9;     /* Kick It Like You Mean It */
  --magenta: #c326fa;   /* Tropical Brutalism */
  --fuente: "Helvena", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --fuente-titulos: var(--fuente);
  --gutter: clamp(16px, 4vw, 48px);
  --ease: cubic-bezier(.22, .61, .36, 1);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--fuente);
  background: var(--negro);
  color: var(--blanco);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

:focus-visible { outline: 2px solid var(--cobalto); outline-offset: 3px; }

/* Texto solo para lectores de pantalla y buscadores */
.solo-lectores { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Selector de idioma (enlaces a la otra versión) ---------- */
.idiomas {
  display: flex;
  gap: 6px;
  align-items: center;
}
.idiomas a {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .12em;
  opacity: .55;
  transition: opacity .3s var(--ease), background .3s var(--ease);
}
.idiomas a:hover { opacity: .9; }
.idiomas a[aria-current] { opacity: 1; background: rgba(255, 255, 255, .12); }
.idiomas svg { width: 20px; height: 14px; border-radius: 2px; flex: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}