:root {
  --superficie: #151720;
  --texto: #f7f4eb;
  --texto-secundario: #d8d5cd;
  --texto-suave: #c9c6bf;
  --sombra: rgba(17, 18, 20, 0.82);
  --radio-panel: 30px;
  --margen-escena: clamp(1rem, 3vw, 3rem);
  --espacio: clamp(1rem, 2.2vw, 2rem);
  --rapida: 180ms;
  --salida-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --espectro-rgb: linear-gradient(
    45deg,
    #ff8a24 0%,
    #f1df35 12.5%,
    #36e69a 25%,
    #25d5ee 37.5%,
    #3787ff 50%,
    #855dff 62.5%,
    #e843c6 75%,
    #ff425f 87.5%,
    #ff8a24 100%
  );
  --tipografia-display: Bahnschrift, "Arial Narrow", "Aptos Narrow", sans-serif;
  --tipografia-cuerpo: Aptos, "Segoe UI", Arial, sans-serif;
}

* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  background: var(--superficie);
}

#raiz {
  width: 100%;
  height: 100%;
}

body {
  color: var(--texto);
  font-family: var(--tipografia-cuerpo);
  font-size: 16px;
  line-height: 1.45;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

button,
a {
  color: inherit;
  font: inherit;
}

button {
  border: 0;
}

button:focus-visible,
a:focus-visible {
  outline: 0;
  text-shadow:
    0 0 8px rgba(247, 244, 235, 0.72),
    0 0 18px rgba(247, 244, 235, 0.34);
}

.salto-contenido {
  position: fixed;
  top: 0.75rem;
  left: 0.75rem;
  z-index: 100;
  padding: 0.65rem 0.9rem;
  background: var(--texto);
  color: var(--superficie);
  font-weight: 700;
  transform: translateY(-180%);
  transition: transform var(--rapida) ease-out;
}

.salto-contenido:focus {
  transform: translateY(0);
}