404 Periódico

<!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-newspaper {
        --accent: #c8102e;
        --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-newspaper *,.n4-newspaper *::before,.n4-newspaper *::after {
        box-sizing: border-box;
      }
      
      .n4-newspaper .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-newspaper .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-newspaper .n4-sub {
        margin: 0;
        max-width: 34em;
        font-size: clamp(13px,2.4cqmin,18px);
        color: #a1a1a6;
        text-wrap: balance;
      }
      
      .n4-newspaper .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-newspaper .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-newspaper .n4-cta:hover {
        transform: translateY(-2px);
        box-shadow: 0 12px 32px -10px var(--accent);
      }
      
      .n4-newspaper .n4-cta:focus-visible {
        outline: 2px solid var(--accent);
        outline-offset: 3px;
      }
      
      .n4-newspaper .n4-stars,.n4-newspaper .n4-stars2 {
        position: absolute;
        inset: -4%;
        pointer-events: none;
      }
      
      .n4-newspaper .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-newspaper-tw calc(5s / var(--k)) ease-in-out infinite alternate;
      }
      
      .n4-newspaper .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-newspaper-tw calc(7s / var(--k)) ease-in-out infinite alternate-reverse;
      }
      
      .n4-newspaper [data-depth] {
        transition: transform .9s cubic-bezier(.2,.7,.2,1);
      }
      
      @keyframes n4-newspaper-tw {
        from {
          opacity: .3;
        }
      }
      
      @keyframes n4-newspaper-spin {
        to {
          transform: rotate(1turn);
        }
      }
      
      @keyframes n4-newspaper-fade {
        from {
          opacity: 0;
          transform: translateY(10px);
        }
      }
      
      @media (prefers-reduced-motion:reduce) {
        .n4-newspaper *,.n4-newspaper *::before,.n4-newspaper *::after {
          animation: none!important;
          transition: none!important;
        }
      }
      
      .n4-newspaper {
        background: radial-gradient(60% 50% at 50% 32%,#3b3128,#120e0b 75%);
        color: #f5ecd9;
        font-family: "Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,serif;
      }
      
      .n4-newspaper .n4-paper {
        width: min(72cqmin,500px);
        font-size: min(1.85cqmin,13px);
        margin-bottom: 2cqmin;
        padding: 1.4em 1.6em 1.6em;
        text-align: left;
        color: #1d1a16;
        background: radial-gradient(circle at 20% 30%,rgba(120,90,40,.08),transparent 40%),radial-gradient(circle at 80% 70%,rgba(120,90,40,.07),transparent 45%),#f2ead6;
        box-shadow: 0 2em 3em -1.4em #000,inset 0 0 3em rgba(120,90,40,.18);
        rotate: -2deg;
        animation: n4-newspaper-spinin calc(1.5s / var(--k)) cubic-bezier(.2,.75,.25,1) both;
        transition: rotate .4s,translate .4s;
      }
      
      .n4-newspaper .n4-paper:hover {
        rotate: 0deg;
        translate: 0 -.3em;
      }
      
      .n4-newspaper .n4-mast {
        display: grid;
        grid-template-columns: 1fr auto 1fr;
        align-items: end;
        gap: .8em;
        padding-bottom: .4em;
        border-bottom: .35em double #1d1a16;
        font: 600 .78em/1.2 "Helvetica Neue",Helvetica,Arial,system-ui,sans-serif;
        text-transform: uppercase;
        letter-spacing: .08em;
      }
      
      .n4-newspaper .n4-mast span:last-child {
        text-align: right;
      }
      
      .n4-newspaper .n4-mast b {
        font: 700 3.4em/.95 "Old English Text MT","Engravers Old English","Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,serif;
        letter-spacing: -.01em;
        text-transform: none;
      }
      
      .n4-newspaper .n4-flash {
        display: inline-block;
        margin: .9em 0 .35em;
        padding: .25em .6em;
        background: var(--accent);
        color: #fff;
        font: 800 .82em/1 "Helvetica Neue",Helvetica,Arial,system-ui,sans-serif;
        letter-spacing: .14em;
        text-transform: uppercase;
      }
      
      .n4-newspaper .n4-head {
        margin: 0 0 .6em;
        font: 700 2.75em/.98 "Didot","Bodoni 72","Times New Roman",Times,serif;
        letter-spacing: -.025em;
        text-wrap: balance;
      }
      
      .n4-newspaper .n4-cols {
        display: grid;
        grid-template-columns: 1.25fr 1fr 1fr;
        gap: 1em;
      }
      
      .n4-newspaper .n4-pic {
        display: grid;
        gap: .3em;
      }
      
      .n4-newspaper .n4-pic b {
        display: grid;
        place-items: center;
        aspect-ratio: 4/3;
        font: 900 4.6em/1 "Times New Roman",Times,serif;
        color: transparent;
        background: radial-gradient(circle,#1d1a16 42%,transparent 48%) 0 0/.075em .075em,#cfc3a6;
        -webkit-background-clip: text;
        background-clip: text;
        box-shadow: inset 0 0 0 999px rgba(29,26,22,.12);
      }
      
      .n4-newspaper .n4-pic small {
        font: italic .82em/1.2 "Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,serif;
        color: #5b5245;
      }
      
      .n4-newspaper .n4-txt {
        position: relative;
        min-height: 9em;
      }
      
      .n4-newspaper .n4-txt i {
        position: absolute;
        inset: 0;
        background: repeating-linear-gradient(#0000 0 .35em,rgba(29,26,22,.5) .35em .62em,#0000 .62em .95em);
      }
      
      .n4-newspaper .n4-drop {
        position: relative;
        z-index: 1;
        float: left;
        margin: -.06em .12em 0 0;
        padding-right: .1em;
        font: 700 3.4em/.9 "Times New Roman",Times,serif;
        background: #f2ead6;
      }
      
      .n4-newspaper .n4-title {
        font-size: clamp(20px,5cqmin,42px);
        font-weight: 600;
        letter-spacing: -.015em;
      }
      
      .n4-newspaper .n4-sub {
        color: #cbbfa9;
      }
      
      .n4-newspaper .n4-cta {
        background: #f5ecd9;
        color: #1d1a16;
      }
      
      @keyframes n4-newspaper-spinin {
        from {
          transform: rotate(-900deg) scale(.04);
          opacity: 0;
        }
        30% {
          opacity: 1;
        }
      }
    </style>
  </head>
  <body>
    <main class="n4-newspaper">
      <div class="n4-copy">
        <div class="n4-paper" aria-hidden="true">
          <div class="n4-mast"><span>Martes, 4 de abril</span><b translate="no">El Extravío</b><span>Edición 404</span></div>
          <p class="n4-flash">Última hora</p>
          <p class="n4-head">Desaparece una página sin dejar rastro</p>
          <div class="n4-cols">
            <div class="n4-pic"><b translate="no">404</b><small>Última imagen conocida de la página</small></div>
            <div class="n4-txt"><b class="n4-drop" translate="no">L</b><i></i></div>
            <div class="n4-txt"><i></i></div>
          </div>
        </div>
        <h1 class="n4-title">Última hora: esta página no existe.</h1>
        <p class="n4-sub">Nuestra redacción la sigue buscando. Mientras tanto, en la portada tienes el resto de la actualidad.</p>
        <a class="n4-cta" href="/">Ir a la portada</a>
      </div>
    </main>
  </body>
</html>