404 Mapa del tiempo

<!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-weather {
        --accent: #ff6b35;
        --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-weather *,.n4-weather *::before,.n4-weather *::after {
        box-sizing: border-box;
      }
      
      .n4-weather .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-weather .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-weather .n4-sub {
        margin: 0;
        max-width: 34em;
        font-size: clamp(13px,2.4cqmin,18px);
        color: #a1a1a6;
        text-wrap: balance;
      }
      
      .n4-weather .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-weather .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-weather .n4-cta:hover {
        transform: translateY(-2px);
        box-shadow: 0 12px 32px -10px var(--accent);
      }
      
      .n4-weather .n4-cta:focus-visible {
        outline: 2px solid var(--accent);
        outline-offset: 3px;
      }
      
      .n4-weather .n4-stars,.n4-weather .n4-stars2 {
        position: absolute;
        inset: -4%;
        pointer-events: none;
      }
      
      .n4-weather .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-weather-tw calc(5s / var(--k)) ease-in-out infinite alternate;
      }
      
      .n4-weather .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-weather-tw calc(7s / var(--k)) ease-in-out infinite alternate-reverse;
      }
      
      .n4-weather [data-depth] {
        transition: transform .9s cubic-bezier(.2,.7,.2,1);
      }
      
      @keyframes n4-weather-tw {
        from {
          opacity: .3;
        }
      }
      
      @keyframes n4-weather-spin {
        to {
          transform: rotate(1turn);
        }
      }
      
      @keyframes n4-weather-fade {
        from {
          opacity: 0;
          transform: translateY(10px);
        }
      }
      
      @media (prefers-reduced-motion:reduce) {
        .n4-weather *,.n4-weather *::before,.n4-weather *::after {
          animation: none!important;
          transition: none!important;
        }
      }
      
      .n4-weather {
        background: radial-gradient(80% 60% at 50% 25%,#f2f8fa,#cfe2e9 75%);
        color: #0f2f3a;
      }
      
      .n4-weather .n4-tv {
        width: min(70cqmin,480px);
        font-size: min(2cqmin,14px);
        margin-bottom: 1.8cqmin;
        overflow: hidden;
        border-radius: 1em;
        background: #0f2f3a;
        box-shadow: 0 0 0 .45em #0f2f3a,0 1.8em 2.4em -1.2em rgba(15,47,58,.6);
      }
      
      .n4-weather .n4-map {
        display: block;
        width: 100%;
        height: auto;
        background: radial-gradient(70% 70% at 65% 40%,#2389a8,#145e78);
      }
      
      .n4-weather .n4-land {
        fill: #d8cf9e;
        stroke: #b5a86e;
        stroke-width: 1.5;
      }
      
      .n4-weather .n4-iso ellipse {
        fill: none;
        stroke: rgba(255,255,255,.5);
        stroke-width: 1.3;
        stroke-dasharray: 3 4;
        animation: n4-weather-iso calc(6s / var(--k)) linear infinite;
      }
      
      .n4-weather .n4-storm {
        transform-box: fill-box;
        transform-origin: center;
        animation: n4-weather-spin calc(5s / var(--k)) linear infinite reverse;
      }
      
      .n4-weather .n4-storm path {
        fill: none;
        stroke: #fff;
        stroke-width: 7;
        stroke-linecap: round;
      }
      
      .n4-weather .n4-storm circle {
        fill: var(--accent);
        stroke: #fff;
        stroke-width: 4;
      }
      
      .n4-weather .n4-hpa {
        font: 800 15px "Helvetica Neue",Helvetica,Arial,system-ui,sans-serif;
        fill: #fff;
        text-anchor: middle;
        paint-order: stroke;
        stroke: #0f2f3a;
        stroke-width: 3px;
      }
      
      .n4-weather .n4-sun {
        transform-box: fill-box;
        transform-origin: center;
        animation: n4-weather-spin calc(24s / var(--k)) linear infinite;
      }
      
      .n4-weather .n4-sun circle {
        fill: #ffd23f;
      }
      
      .n4-weather .n4-sun path {
        stroke: #ffd23f;
        stroke-width: 3.5;
        stroke-linecap: round;
      }
      
      .n4-weather .n4-cloud {
        animation: n4-weather-cloud calc(7s / var(--k)) ease-in-out infinite alternate;
      }
      
      .n4-weather .n4-cloud path {
        fill: #f3f6f8;
        stroke: #c9d6dc;
        stroke-width: 1.5;
      }
      
      .n4-weather .n4-temp {
        font: 800 16px "Helvetica Neue",Helvetica,Arial,system-ui,sans-serif;
        fill: #fff;
        text-anchor: middle;
        paint-order: stroke;
        stroke: #0f2f3a;
        stroke-width: 3px;
      }
      
      .n4-weather .n4-wind {
        fill: none;
        stroke: #fff;
        stroke-width: 2.5;
        stroke-linecap: round;
        stroke-linejoin: round;
        stroke-dasharray: 60;
        stroke-dashoffset: 60;
        animation: n4-weather-wind calc(3s / var(--k)) ease-in-out infinite;
      }
      
      .n4-weather .n4-tick {
        display: flex;
        margin: 0;
        font: 700 1em/1 "Helvetica Neue",Helvetica,Arial,system-ui,sans-serif;
        color: #fff;
      }
      
      .n4-weather .n4-tick b {
        padding: .65em .9em;
        background: var(--accent);
        color: #1b0b03;
        text-transform: uppercase;
        letter-spacing: .1em;
      }
      
      .n4-weather .n4-tick span {
        flex: 1;
        overflow: hidden;
        display: flex;
        align-items: center;
      }
      
      .n4-weather .n4-tick em {
        flex: none;
        padding-left: 100%;
        font-style: normal;
        white-space: nowrap;
        animation: n4-weather-ticker calc(11s / var(--k)) linear infinite;
      }
      
      .n4-weather .n4-title {
        font-size: clamp(20px,5cqmin,42px);
        font-weight: 800;
        letter-spacing: -.03em;
      }
      
      .n4-weather .n4-sub {
        color: #3d5f6b;
      }
      
      .n4-weather .n4-cta {
        background: #0f2f3a;
        color: #fff;
      }
      
      @keyframes n4-weather-iso {
        to {
          stroke-dashoffset: -28;
        }
      }
      
      @keyframes n4-weather-cloud {
        to {
          transform: translateX(18px);
        }
      }
      
      @keyframes n4-weather-wind {
        40%,60% {
          stroke-dashoffset: 0;
        }
        100% {
          stroke-dashoffset: -60;
        }
      }
      
      @keyframes n4-weather-ticker {
        to {
          transform: translateX(-100%);
        }
      }
      
      @media (prefers-reduced-motion:reduce) {
        .n4-weather .n4-tick em {
          padding-left: .9em;
        }
        .n4-weather .n4-wind {
          stroke-dashoffset: 0;
        }
      }
    </style>
  </head>
  <body>
    <main class="n4-weather">
      <div class="n4-copy">
        <div class="n4-tv" aria-hidden="true">
          <svg class="n4-map" viewBox="0 0 400 230">
            <path class="n4-land" d="M0 0H176C166 28 126 40 134 70S100 118 64 128 22 168 0 178Z"/>
            <path class="n4-land" d="M400 230H246C258 204 298 198 316 174S362 150 400 138Z"/>
            <g class="n4-iso"><ellipse cx="262" cy="96" rx="38" ry="28"/><ellipse cx="262" cy="96" rx="70" ry="52"/><ellipse cx="262" cy="96" rx="104" ry="78"/><ellipse cx="262" cy="96" rx="140" ry="106"/></g>
            <g class="n4-storm"><path d="M262 84C282 80 298 70 304 52"/><path d="M262 108C242 112 226 122 220 140"/><circle cx="262" cy="96" r="12"/></g>
            <text class="n4-hpa" x="262" y="160">404 hPa</text>
            <g class="n4-sun"><circle cx="66" cy="58" r="12"/><path d="M66 36v-7M66 80v7M44 58h-7M88 58h7M50 42l-5-5M82 74l5 5M50 74l-5 5M82 42l5-5"/></g>
            <text class="n4-temp" x="66" y="104">--°</text>
            <g class="n4-cloud"><path d="M150 196a12 12 0 0 1 4-23 16 16 0 0 1 30-4 11 11 0 0 1 14 15 9 9 0 0 1-2 12z"/></g>
            <text class="n4-temp" x="176" y="222">--°</text>
            <path class="n4-wind" d="M128 120c18-6 34-6 50 2M172 116l7 6-9 3"/>
          </svg>
          <p class="n4-tick"><b>Aviso</b><span><em>Probabilidad de encontrar esta página: 0 %</em></span></p>
        </div>
        <h1 class="n4-title">Hoy no hay previsión para esta página.</h1>
        <p class="n4-sub">Una borrasca de 404 hectopascales se la ha llevado. Consulta el mapa general o vuelve al inicio hasta que despeje.</p>
        <a class="n4-cta" href="/">Volver al inicio</a>
      </div>
    </main>
  </body>
</html>