body {
  background-color: #0f0f0f; /* negro profundo */
  color: #f5f5f5; /* gris claro institucional */
  font-family: 'Share Tech Mono', monospace;
  padding: 2em;
}

/* Títulos con parpadeo glitch */
@keyframes glitch {
  0% { text-shadow: 2px 2px #ff00c8; }
  25% { text-shadow: -2px -2px #00fff9; }
  50% { text-shadow: 2px -2px #ffcc00; }
  75% { text-shadow: -2px 2px #ff00c8; }
  100% { text-shadow: 2px 2px #00fff9; }
}

h1, h2 {
  animation: glitch 1.2s infinite;
  color: #ffcc00;
  text-transform: uppercase;
  letter-spacing: 2px;
}

/* Imágenes con borde ritual y hover distorsionado */
img {
  border: 2px dashed #ffcc00;
  box-shadow: 0 0 10px #ffcc00;
  transition: transform 0.3s ease, filter 0.3s ease;
}
img:hover {
  transform: scale(1.05) rotate(-1deg);
  filter: hue-rotate(20deg);
}

/* Botones tipo terminal */
button, .btn {
  background-color: transparent;
  border: 2px solid #00fff9;
  color: #00fff9;
  padding: 0.5em 1em;
  font-family: 'Share Tech Mono', monospace;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.3s ease;
}
button:hover, .btn:hover {
  background-color: #00fff9;
  color: #0f0f0f;
}

/* Footer narrativo */
footer {
  font-size: 0.8em;
  color: #888;
  border-top: 1px solid #444;
  padding-top: 1em;
  margin-top: 3em;
  text-align: center;
}