404 Máquina de gancho

<!doctype html>
<html lang="es">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="robots" content="noindex" />
    <title>404 · Página no encontrada</title>
    <style>
      body { margin: 0; background: #000; }
      .n4-claw {
        --accent: #ffd23f;
        --k: 1;
        position: fixed;
        inset: 0;
        z-index: 0;
        overflow: hidden;
        container-type: size;
        display: grid;
        place-items: center;
        background: #000;
        color: #f5f5f7;
        font-family: -apple-system,BlinkMacSystemFont,"SF Pro Display","Inter","Segoe UI",system-ui,sans-serif;
        -webkit-font-smoothing: antialiased;
        text-align: center;
        line-height: 1.4;
      }
      
      .n4-claw *,.n4-claw *::before,.n4-claw *::after {
        box-sizing: border-box;
      }
      
      .n4-claw .n4-copy {
        position: relative;
        z-index: 5;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 1.6cqmin;
        width: 100%;
        max-width: 680px;
        padding: 0 6cqw;
      }
      
      .n4-claw .n4-title {
        margin: 0;
        font-size: clamp(17px,4.2cqmin,36px);
        font-weight: 600;
        letter-spacing: -.02em;
        line-height: 1.15;
        text-wrap: balance;
      }
      
      .n4-claw .n4-sub {
        margin: 0;
        max-width: 34em;
        font-size: clamp(13px,2.4cqmin,18px);
        color: #a1a1a6;
        text-wrap: balance;
      }
      
      .n4-claw .n4-tag {
        font: 600 clamp(10px,1.9cqmin,13px)/1 ui-monospace,"SF Mono",Menlo,Consolas,monospace;
        letter-spacing: .16em;
        text-transform: uppercase;
        color: var(--accent);
      }
      
      .n4-claw .n4-cta {
        margin-top: 1.8cqmin;
        display: inline-flex;
        align-items: center;
        gap: .5em;
        padding: .85em 1.5em;
        border-radius: 999px;
        background: #f5f5f7;
        color: #000;
        font-size: clamp(13px,2.2cqmin,16px);
        font-weight: 600;
        text-decoration: none;
        transition: transform .3s cubic-bezier(.25,.1,.25,1),box-shadow .3s cubic-bezier(.25,.1,.25,1);
      }
      
      .n4-claw .n4-cta:hover {
        transform: translateY(-2px);
        box-shadow: 0 12px 32px -10px var(--accent);
      }
      
      .n4-claw .n4-cta:focus-visible {
        outline: 2px solid var(--accent);
        outline-offset: 3px;
      }
      
      .n4-claw .n4-stars,.n4-claw .n4-stars2 {
        position: absolute;
        inset: -4%;
        pointer-events: none;
      }
      
      .n4-claw .n4-stars {
        background-image: radial-gradient(1px 1px at 8% 12%,#fff 60%,transparent),radial-gradient(1px 1px at 22% 68%,#fff 60%,transparent),radial-gradient(1.5px 1.5px at 35% 24%,#fff 60%,transparent),radial-gradient(1px 1px at 48% 82%,#fff 60%,transparent),radial-gradient(1px 1px at 57% 9%,#fff 60%,transparent),radial-gradient(1.5px 1.5px at 66% 44%,#fff 60%,transparent),radial-gradient(1px 1px at 74% 72%,#fff 60%,transparent),radial-gradient(1px 1px at 86% 18%,#fff 60%,transparent),radial-gradient(1.5px 1.5px at 93% 58%,#fff 60%,transparent),radial-gradient(1px 1px at 14% 42%,#fff 60%,transparent),radial-gradient(1px 1px at 40% 55%,#fff 60%,transparent),radial-gradient(1px 1px at 81% 90%,#fff 60%,transparent),radial-gradient(1px 1px at 4% 88%,#fff 60%,transparent),radial-gradient(1px 1px at 62% 30%,#fff 60%,transparent);
        opacity: .75;
        animation: n4-claw-tw calc(5s / var(--k)) ease-in-out infinite alternate;
      }
      
      .n4-claw .n4-stars2 {
        background-image: radial-gradient(2px 2px at 18% 30%,rgba(255,255,255,.9) 50%,transparent),radial-gradient(1.5px 1.5px at 72% 20%,rgba(255,255,255,.8) 50%,transparent),radial-gradient(2px 2px at 30% 85%,rgba(255,255,255,.7) 50%,transparent),radial-gradient(1.5px 1.5px at 88% 70%,rgba(255,255,255,.8) 50%,transparent),radial-gradient(2px 2px at 52% 60%,rgba(255,255,255,.6) 50%,transparent),radial-gradient(1.5px 1.5px at 6% 55%,rgba(255,255,255,.8) 50%,transparent);
        opacity: .55;
        animation: n4-claw-tw calc(7s / var(--k)) ease-in-out infinite alternate-reverse;
      }
      
      .n4-claw [data-depth] {
        transition: transform .9s cubic-bezier(.2,.7,.2,1);
      }
      
      @keyframes n4-claw-tw {
        from {
          opacity: .3;
        }
      }
      
      @keyframes n4-claw-spin {
        to {
          transform: rotate(1turn);
        }
      }
      
      @keyframes n4-claw-fade {
        from {
          opacity: 0;
          transform: translateY(10px);
        }
      }
      
      @media (prefers-reduced-motion:reduce) {
        .n4-claw *,.n4-claw *::before,.n4-claw *::after {
          animation: none!important;
          transition: none!important;
        }
      }
      
      .n4-claw {
        background: radial-gradient(circle at 20% 20%,rgba(255,210,63,.28) 0 .35cqmin,transparent .45cqmin) 0 0/7cqmin 7cqmin,radial-gradient(70% 60% at 50% 30%,#14404f,#061219 75%);
        color: #eaf6fb;
      }
      
      .n4-claw .n4-machine {
        width: 28em;
        font-size: min(2cqmin,14px);
        margin-bottom: 1.2cqmin;
        padding: .9em 1em 1em;
        border-radius: 1.6em 1.6em 1em 1em;
        background: linear-gradient(#ff6b98,#d63a6a);
        box-shadow: inset 0 .25em 0 rgba(255,255,255,.35),inset 0 -.4em 0 rgba(0,0,0,.2),0 1.6em 2.4em -1.2em #000;
      }
      
      .n4-claw .n4-top {
        margin: 0 0 .7em;
        padding: .75em .5em;
        border-radius: .8em;
        font: 800 1.1em/1 "Helvetica Neue",Helvetica,Arial,system-ui,sans-serif;
        letter-spacing: .16em;
        text-transform: uppercase;
        color: #fff;
        text-shadow: 0 0 .4em #ff9cc0;
        background: radial-gradient(circle,#ffe27a 0 .16em,transparent .2em) 0 .25em/1em .6em repeat-x,radial-gradient(circle,#ffe27a 0 .16em,transparent .2em) .5em calc(100% - .25em)/1em .6em repeat-x,#7a1840;
        animation: n4-claw-chase calc(.8s / var(--k)) steps(2) infinite;
      }
      
      .n4-claw .n4-glass {
        position: relative;
        height: 15em;
        overflow: hidden;
        border-radius: .6em;
        background: linear-gradient(#c9eef8,#eefbff 60%,#ffe6f0);
        box-shadow: inset 0 0 0 .25em #9b1c4c;
      }
      
      .n4-claw .n4-glass::after {
        content: "";
        position: absolute;
        inset: 0;
        z-index: 3;
        pointer-events: none;
        background: linear-gradient(115deg,transparent 28%,rgba(255,255,255,.42) 31%,transparent 37%),linear-gradient(115deg,transparent 52%,rgba(255,255,255,.22) 54%,transparent 58%);
      }
      
      .n4-claw .n4-rail {
        position: absolute;
        z-index: 3;
        left: .25em;
        right: .25em;
        top: .25em;
        height: .7em;
        background: linear-gradient(#e9edf2,#8f98a3);
      }
      
      .n4-claw .n4-claw {
        position: absolute;
        z-index: 2;
        top: .9em;
        left: calc(var(--x,50) * 1%);
        width: 3.6em;
        height: 3em;
        margin-left: -1.8em;
        transition: left calc(.3s / var(--k)) ease-out,transform calc(.9s / var(--k)) ease-in-out;
      }
      
      .n4-claw .n4-down .n4-claw {
        transform: translateY(8.6em);
      }
      
      .n4-claw .n4-cable {
        position: absolute;
        left: 50%;
        bottom: 100%;
        width: .16em;
        height: 14em;
        margin-left: -.08em;
        background: #7d8792;
      }
      
      .n4-claw .n4-hub {
        position: absolute;
        left: 50%;
        top: 0;
        width: 2.2em;
        height: 1.2em;
        margin-left: -1.1em;
        border-radius: .6em .6em .3em .3em;
        background: linear-gradient(#f2f4f7,#9aa3ad);
        box-shadow: 0 .1em .2em rgba(0,0,0,.3);
      }
      
      .n4-claw .n4-arm {
        position: absolute;
        top: .8em;
        width: .36em;
        height: 1.9em;
        border-radius: .2em;
        background: linear-gradient(90deg,#9aa3ad,#eef1f4,#8a939e);
        transform-origin: 50% 0;
        transition: rotate calc(.25s / var(--k));
      }
      
      .n4-claw .n4-arm::after {
        content: "";
        position: absolute;
        bottom: -.1em;
        width: .8em;
        height: .3em;
        border-radius: .2em;
        background: #9aa3ad;
      }
      
      .n4-claw .n4-a1 {
        left: .75em;
        rotate: 28deg;
      }
      
      .n4-claw .n4-a1::after {
        left: 0;
      }
      
      .n4-claw .n4-a2 {
        right: .75em;
        rotate: -28deg;
      }
      
      .n4-claw .n4-a2::after {
        right: 0;
      }
      
      .n4-claw .n4-shut .n4-a1 {
        rotate: 6deg;
      }
      
      .n4-claw .n4-shut .n4-a2 {
        rotate: -6deg;
      }
      
      .n4-claw .n4-toy {
        position: absolute;
        z-index: 1;
        bottom: .6em;
        left: calc(var(--x) * 1%);
        width: 3.6em;
        height: 3.3em;
        margin-left: -1.8em;
        border-radius: 50% 50% 44% 44%;
        background: radial-gradient(circle at 36% 44%,#1d1d1f 0 .2em,transparent .24em),radial-gradient(circle at 64% 44%,#1d1d1f 0 .2em,transparent .24em),radial-gradient(ellipse .45em .32em at 50% 62%,#1d1d1f 80%,transparent),radial-gradient(ellipse 1.1em .8em at 50% 64%,rgba(255,255,255,.6) 90%,transparent),var(--c);
        box-shadow: inset 0 -.3em .4em rgba(0,0,0,.15);
        transition: transform calc(.9s / var(--k)) ease-in-out;
      }
      
      .n4-claw .n4-toy::before,.n4-claw .n4-toy::after {
        content: "";
        position: absolute;
        top: -.3em;
        width: 1.1em;
        height: 1.1em;
        border-radius: 50%;
        background: var(--c);
        box-shadow: inset 0 0 0 .25em rgba(255,255,255,.35);
      }
      
      .n4-claw .n4-toy::before {
        left: .1em;
      }
      
      .n4-claw .n4-toy::after {
        right: .1em;
      }
      
      .n4-claw .n4-back {
        z-index: 0;
        bottom: 2.5em;
        scale: .85;
        filter: brightness(.92);
      }
      
      .n4-claw .n4-prize {
        border-radius: .5em;
        background: linear-gradient(90deg,transparent 44%,#e5383b 44% 56%,transparent 56%),linear-gradient(#fff,#e7ecff);
        box-shadow: inset 0 0 0 .14em #e5383b;
      }
      
      .n4-claw .n4-prize::before,.n4-claw .n4-prize::after {
        top: -.55em;
        width: .95em;
        height: .75em;
        background: #e5383b;
        box-shadow: none;
      }
      
      .n4-claw .n4-prize::before {
        left: .85em;
        border-radius: 50% 10% 50% 50%;
      }
      
      .n4-claw .n4-prize::after {
        right: .85em;
        border-radius: 10% 50% 50% 50%;
      }
      
      .n4-claw .n4-prize b {
        position: absolute;
        left: 50%;
        top: 50%;
        translate: -50% -50%;
        padding: .15em .3em;
        border-radius: .2em;
        background: #fff;
        color: #1d1d1f;
        font: 800 .85em/1 ui-monospace,"SF Mono",Menlo,Consolas,monospace;
        box-shadow: 0 0 0 .1em #e5383b;
      }
      
      .n4-claw .n4-lift {
        transform: translateY(-8.6em);
      }
      
      .n4-claw .n4-fall {
        transition: transform calc(.45s / var(--k)) cubic-bezier(.5,0,.75,0);
      }
      
      .n4-claw .n4-chute {
        position: absolute;
        z-index: 2;
        right: .25em;
        bottom: .25em;
        width: 4.2em;
        height: 4.4em;
        border-radius: .3em 0 0 0;
        background: linear-gradient(rgba(155,28,76,.18),rgba(155,28,76,.45));
        border-left: .2em solid #9b1c4c;
        border-top: .2em solid #9b1c4c;
      }
      
      .n4-claw .n4-ctrl {
        display: flex;
        align-items: center;
        gap: .7em;
        margin-top: .8em;
        padding: .6em .8em;
        border-radius: .8em;
        background: #3b0f24;
        box-shadow: inset 0 .2em .4em rgba(0,0,0,.4);
      }
      
      .n4-claw .n4-mv {
        position: relative;
        flex: none;
        width: 2.8em;
        height: 2.8em;
        border: 0;
        border-radius: 50%;
        cursor: pointer;
        background: radial-gradient(circle at 40% 35%,#fff6c4,#ffd23f 55%,#c99a00);
        box-shadow: 0 .25em 0 #8a6a00;
        transition: transform .1s,box-shadow .1s,filter .2s;
      }
      
      .n4-claw .n4-mv::before {
        content: "";
        position: absolute;
        left: 50%;
        top: 50%;
        width: 0;
        height: 0;
        margin: -.45em 0 0 -.22em;
        border-top: .45em solid transparent;
        border-bottom: .45em solid transparent;
        border-left: .6em solid #3b0f24;
      }
      
      .n4-claw .n4-mv[data-d="-1"]::before {
        margin-left: -.38em;
        border-left: 0;
        border-right: .6em solid #3b0f24;
      }
      
      .n4-claw .n4-mv:hover,.n4-claw .n4-drop:hover {
        filter: brightness(1.08);
      }
      
      .n4-claw .n4-mv:active {
        transform: translateY(.2em);
        box-shadow: 0 .05em 0 #8a6a00;
      }
      
      .n4-claw .n4-cred {
        display: grid;
        justify-items: center;
        margin: 0 auto;
        font: 700 .7em/1.1 ui-monospace,"SF Mono",Menlo,Consolas,monospace;
        text-transform: uppercase;
        letter-spacing: .1em;
        color: #ffb3cf;
      }
      
      .n4-claw .n4-cred b {
        font-size: 2em;
        color: var(--accent);
        text-shadow: 0 0 .3em color-mix(in srgb,var(--accent) 60%,transparent);
      }
      
      .n4-claw .n4-drop {
        padding: .85em 1.1em;
        border: 0;
        border-radius: 999px;
        cursor: pointer;
        font: 800 .85em/1 system-ui,sans-serif;
        text-transform: uppercase;
        letter-spacing: .06em;
        color: #fff;
        background: radial-gradient(circle at 40% 30%,#ff8a8a,#e5383b 60%,#a4161a);
        box-shadow: 0 .25em 0 #6a0d10;
        transition: transform .1s,box-shadow .1s,filter .2s;
      }
      
      .n4-claw .n4-drop:active {
        transform: translateY(.2em);
        box-shadow: 0 .05em 0 #6a0d10;
      }
      
      .n4-claw .n4-mv:focus-visible,.n4-claw .n4-drop:focus-visible {
        outline: 2px solid #fff;
        outline-offset: 3px;
      }
      
      .n4-claw .n4-busy .n4-mv,.n4-claw .n4-busy .n4-drop {
        filter: saturate(.4) brightness(.85);
      }
      
      .n4-claw .n4-title {
        font-size: clamp(20px,5cqmin,42px);
        font-weight: 800;
        letter-spacing: -.03em;
      }
      
      .n4-claw .n4-sub {
        color: #a9c8d3;
      }
      
      .n4-claw .n4-cta {
        background: var(--accent);
        color: #1d1503;
      }
      
      .n4-claw .n4-sr {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
      }
      
      @keyframes n4-claw-chase {
        to {
          background-position: .5em .25em,0 calc(100% - .25em),0 0;
        }
      }
    </style>
  </head>
  <body>
    <main class="n4-claw">
      <div class="n4-copy">
        <div class="n4-machine">
          <p class="n4-top" aria-hidden="true">Pinza de la suerte</p>
          <div class="n4-glass" aria-hidden="true">
            <i class="n4-rail"></i>
            <div class="n4-claw"><i class="n4-cable"></i><i class="n4-arm n4-a1"></i><i class="n4-arm n4-a2"></i><i class="n4-hub"></i></div>
            <i class="n4-toy n4-back" style="--x:22;--c:#7bd389"></i><i class="n4-toy n4-back" style="--x:45;--c:#ffa94d"></i><i class="n4-toy n4-back" style="--x:66;--c:#b197fc"></i>
            <i class="n4-toy n4-front" style="--x:12;--c:#ff8fab"></i><i class="n4-toy n4-front" style="--x:33;--c:#74c0fc"></i><i class="n4-toy n4-front n4-prize" style="--x:55"><b translate="no">404</b></i><i class="n4-toy n4-front" style="--x:74;--c:#ffe066"></i>
            <i class="n4-chute"></i>
          </div>
          <div class="n4-ctrl">
            <button class="n4-mv" type="button" data-d="-1" aria-label="Mover a la izquierda"></button>
            <button class="n4-mv" type="button" data-d="1" aria-label="Mover a la derecha"></button>
            <span class="n4-cred"><small>Créditos</small><b translate="no">3</b></span>
            <button class="n4-drop" type="button">Bajar la pinza</button>
          </div>
          <p class="n4-sr" aria-live="polite"></p>
        </div>
        <h1 class="n4-title">Casi la tenías, pero se ha escapado.</h1>
        <p class="n4-sub">La página que buscas se suelta de la pinza en el último momento. Prueba otra vez o vuelve a la entrada de la feria.</p>
        <a class="n4-cta" href="/">Volver a la entrada</a>
      </div>
    </main>
    <script>
      document.querySelectorAll(".n4-claw").forEach((el) => {
        const m = el.querySelector(".n4-machine");
        const toys = Array.from(el.querySelectorAll(".n4-front"));
        const cred = el.querySelector(".n4-cred b");
        const live = el.querySelector(".n4-sr");
        const rm = matchMedia("(prefers-reduced-motion: reduce)").matches;
        const k = parseFloat(getComputedStyle(el).getPropertyValue("--k")) || 1;
        let x = 50, busy = false, credits = 3;
        const timers = [];
        const at = (ms, fn) => timers.push(setTimeout(fn, rm ? 0 : ms / k));
        const place = () => m.style.setProperty("--x", String(x));
        const shift = (d) => { if (!busy) { x = Math.max(8, Math.min(82, x + d * 6)); place(); } };
        const drop = () => {
          if (busy) return;
          busy = true;
          m.classList.add("n4-busy", "n4-down");
          if (credits === 0) credits = 3;
          credits--;
          cred.textContent = String(credits);
          live.textContent = "";
          const near = toys.find((p) => Math.abs(Number(p.style.getPropertyValue("--x")) - x) < 10);
          at(900, () => m.classList.add("n4-shut"));
          at(1250, () => { m.classList.remove("n4-down"); if (near) near.classList.add("n4-lift"); });
          at(1750, () => {
            if (near) { near.classList.remove("n4-lift"); near.classList.add("n4-fall"); }
            live.textContent = near ? "Casi. Se ha escapado." : "Aquí no hay nada.";
          });
          at(2400, () => {
            m.classList.remove("n4-shut", "n4-busy");
            toys.forEach((p) => p.classList.remove("n4-fall"));
            busy = false;
          });
        };
        el.querySelectorAll(".n4-mv").forEach((b) => b.addEventListener("click", () => shift(Number(b.dataset.d))));
        el.querySelector(".n4-drop").addEventListener("click", drop);
        m.addEventListener("keydown", (e) => {
          if (e.key === "ArrowLeft" || e.key === "ArrowRight") { e.preventDefault(); shift(e.key === "ArrowLeft" ? -1 : 1); }
          else if (e.key === "ArrowDown") { e.preventDefault(); drop(); }
        });
        place();
      });
    </script>
  </body>
</html>