/* Paleta, tipografías y piezas comunes de apokryfin.com (manual/marca.md). */
:root {
  --obsidiana: #0A0A0C;
  --grafito: #1A1B1F;
  --borde: #26272d;
  --plata: #C4C8CF;
  --niebla: #8E939B;
  --morado: #8B5CF6;
  --lacre: #A33A2C;
  --acero: #5B8FC7;
  --didot: "GFS Didot", Georgia, "Times New Roman", serif;
  --forum: "Forum", Georgia, serif;
  --sans: "IBM Plex Sans", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, Consolas, monospace;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  min-height: 100vh;
  background: radial-gradient(ellipse at 50% 30%, var(--grafito) 0%, var(--obsidiana) 66%) fixed;
  color: var(--plata);
  font-family: var(--sans);
  padding: env(safe-area-inset-top, 0px) max(16px, env(safe-area-inset-right, 0px)) env(safe-area-inset-bottom, 0px) max(16px, env(safe-area-inset-left, 0px));
  overflow-x: hidden;
}
#fondo { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
main, footer, .wrap { position: relative; z-index: 1; }
a:focus-visible { outline: 1px solid var(--morado); outline-offset: 4px; }

.cta {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 12px;
  padding: 12px 20px;
  border: 1px solid rgba(196, 200, 207, .38);
  border-radius: 999px;
  color: var(--plata);
  text-decoration: none;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: .16em;
  text-transform: uppercase;
  transition: border-color .2s ease, background .2s ease;
}
.cta small { font-family: var(--mono); font-weight: 400; font-size: 12px; letter-spacing: .02em; text-transform: none; color: var(--niebla); }
.cta .arrow { color: var(--morado); }
.cta:hover, .cta:focus-visible { border-color: var(--morado); background: rgba(139, 92, 246, .08); }
@media (max-width: 420px) { .cta { border-radius: 18px; } .cta .arrow { display: none; } }

.pie {
  display: grid;
  gap: 14px;
  justify-items: center;
  padding-block: 24px 28px;
  border-top: 1px solid var(--borde);
  font-family: var(--mono);
  font-size: 12px;
  color: var(--niebla);
  text-align: center;
}
.pie nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 22px; }
.pie nav a { color: var(--plata); text-decoration: none; letter-spacing: .08em; }
.pie nav a:hover, .pie nav a:focus-visible { color: var(--morado); }