Error – Pagina web no encontrada – 404 – Comunidad Pueblos y Nacionalidades

<!doctype html>
<html lang="es">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>404 — Página no encontrada</title>

<!-- Fuente futurista (opcional) -->
<link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700&display=swap" rel="stylesheet">

<style>
/* ======== Variables ======== */
:root{
  --bg-1:#070b17;
  --bg-2:#0d1230;
  --grid:#1df2ff22;
  --neon:#00e5ff;
  --accent:#a100ff;
  --text:#e6f1ff;
  --danger:#ff3b81;
}

/* ======== Reset mínimo ======== */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  color:var(--text);
  font:16px/1.4 "Orbitron", system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, sans-serif;
  background:
    radial-gradient(1200px 500px at 50% -10%, #101642 0%, transparent 60%),
    linear-gradient(180deg, var(--bg-1), var(--bg-2));
  overflow:hidden; /* para que no aparezca scroll con las animaciones */
}

/* Halo animado detrás (conic gradient) */
body::before{
  content:"";
  position:fixed; inset:-20vmax;
  background:conic-gradient(from 0deg, var(--accent), transparent 30%, var(--neon), transparent 60%, var(--accent));
  filter:blur(80px) saturate(130%);
  opacity:.18;
  animation:spin 25s linear infinite;
  pointer-events:none;
}
@keyframes spin{to{transform:rotate(360deg)}}

/* Rejilla neón tipo “tron” */
.grid{
  position:fixed; left:0; right:0; bottom:-10vh; height:60vh;
  background:
    linear-gradient(transparent 0 70%, #0008 90%, #000c 100%),
    repeating-linear-gradient(#0000, #0000 30px, var(--grid) 31px, var(--grid) 32px),
    repeating-linear-gradient(90deg, #0000, #0000 30px, var(--grid) 31px, var(--grid) 32px);
  transform:perspective(800px) rotateX(75deg);
  transform-origin:bottom;
  box-shadow:0 -20vh 20vh #000 inset;
  pointer-events:none;
}

/* Estrellas sutiles */
.stars{
  position:fixed; inset:0; pointer-events:none;
  background:
    radial-gradient(2px 2px at 20% 30%, #fff8, transparent 40%),
    radial-gradient(1.5px 1.5px at 70% 20%, #fff6, transparent 40%),
    radial-gradient(1.5px 1.5px at 80% 60%, #fff5, transparent 40%),
    radial-gradient(1px 1px at 30% 80%, #fff7, transparent 40%);
  animation:twinkle 6s ease-in-out infinite alternate;
  opacity:.35;
}
@keyframes twinkle{to{filter:brightness(1.8)}}

/* Scanlines (retro) */
.scanlines{
  position:fixed; inset:0; pointer-events:none;
  background:repeating-linear-gradient(transparent 0 2px, #0002 3px 3.5px);
  mix-blend-mode:soft-light; opacity:.4;
}

/* Contenido */
.wrap{
  position:relative;
  height:100dvh;
  display:grid;
  place-items:center;
  text-align:center;
  padding:4rem 2rem;
}

/* Número con efecto glitch */
.glitch{
  font-size:clamp(6rem, 16vw, 18rem);
  font-weight:800;
  letter-spacing:.05em;
  line-height:1;
  position:relative;
  text-shadow:
    0 0 12px color-mix(in srgb, var(--neon) 60%, transparent),
    0 0 40px color-mix(in srgb, var(--accent) 60%, transparent);
}
.glitch::before,
.glitch::after{
  content:attr(data-text);
  position:absolute; inset:0;
  filter:blur(.6px);
  mix-blend-mode:screen;
}
.glitch::before{
  color:var(--neon);
  transform:translateX(0);
  animation:gl1 3s infinite steps(20);
}
.glitch::after{
  color:var(--danger);
  transform:translateX(0);
  animation:gl2 2.8s infinite steps(18);
}
@keyframes gl1{
  10%{clip-path:inset(0 0 75% 0); transform:translateX(-2px)}
  20%{clip-path:inset(30% 0 0 0); transform:translateX(2px)}
  30%{clip-path:inset(0 0 50% 0); transform:translateX(-1px)}
  40%{clip-path:inset(60% 0 0 0); transform:translateX(1px)}
  50%{clip-path:inset(0 0 20% 0); transform:translateX(-3px)}
  60%,100%{clip-path:inset(0 0 0 0); transform:translateX(0)}
}
@keyframes gl2{
  15%{clip-path:inset(0 0 65% 0); transform:translateX(2px)}
  25%{clip-path:inset(40% 0 0 0); transform:translateX(-2px)}
  35%{clip-path:inset(0 0 30% 0); transform:translateX(3px)}
  45%{clip-path:inset(70% 0 0 0); transform:translateX(-1px)}
  55%,100%{clip-path:inset(0 0 0 0); transform:translateX(0)}
}

/* Texto secundario */
.tagline{
  margin-top:-1.2rem;
  font-size:clamp(1rem, 2.5vw, 1.35rem);
  letter-spacing:.25em;
  text-transform:uppercase;
  opacity:.85;
}

/* Botón neón */
.btn{
  --bcol: var(--neon);
  display:inline-block;
  margin-top:2rem;
  padding:.95rem 1.4rem;
  border:2px solid var(--bcol);
  color:var(--text);
  text-decoration:none;
  font-weight:700;
  letter-spacing:.08em;
  border-radius:10px;
  background:
    radial-gradient(80% 120% at 50% 130%, color-mix(in srgb, var(--bcol) 20%, transparent), transparent 70%);
  box-shadow:
    0 0 12px color-mix(in srgb, var(--bcol) 60%, transparent),
    0 0 40px color-mix(in srgb, var(--bcol) 40%, transparent) inset;
  transition:transform .15s ease, box-shadow .2s ease, color .2s ease, border-color .2s ease;
}
.btn:hover{
  transform:translateY(-2px);
  color:#001218;
  border-color:var(--text);
  background:linear-gradient(135deg, var(--neon), var(--accent));
  box-shadow:
    0 0 18px color-mix(in srgb, var(--neon) 60%, transparent),
    0 0 28px color-mix(in srgb, var(--accent) 50%, transparent);
}

/* Footer pequeño */
.foot{
  position:fixed; left:0; right:0; bottom:10px;
  text-align:center; font-size:.8rem; opacity:.6;
}

/* Responsivo */
@media (max-width:480px){
  .tagline{letter-spacing:.12em}
  .btn{width:100%; max-width:320px}
}
</style>
</head>
<body>

<div class="stars" aria-hidden="true"></div>
<div class="grid"  aria-hidden="true"></div>
<div class="scanlines" aria-hidden="true"></div>

<main class="wrap" role="main" aria-labelledby="t404">
  <h1 id="t404" class="glitch" data-text="404">404</h1>
  <p class="tagline">Página no encontrada</p>
  <a class="btn" href="/">Volver al inicio</a>
</main>

<p class="foot">Error 404 · Sistema de Navegación Cuántica</p>

</body>
</html>