/* Página 404 (PROTOTIPO): un gráfico de dispersión donde los puntos forman "404" y un dato queda afuera */
.e404 { min-height: calc(100vh - 80px); min-height: calc(100svh - 80px); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(28px, 5vw, 72px); align-items: center; padding-block: clamp(100px, 12vh, 140px) clamp(48px, 8vh, 96px); }
.e404 h1 { font-size: var(--step-4); letter-spacing: -0.035em; line-height: 1.02; margin-top: 14px; max-width: 13ch; }
.e404 h1 em { font-style: italic; color: var(--accent); }
.e404 .hero-lead { margin-top: 20px; max-width: 44ch; }
.e404 .hero-actions { margin-top: 28px; }
.e404-links { margin-top: 36px; padding-top: 22px; border-top: 1px solid var(--line); }
.e404-links p { font-family: var(--f-data); font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.e404-links ul { list-style: none; margin: 12px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 20px; }
.e404-links a { color: var(--ink); text-decoration: none; font-weight: 600; display: inline-flex; gap: 8px; }
.e404-links a::before { content: "→"; color: var(--teal); }
.e404-links a:hover, .e404-links a:focus-visible { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.e404-graf { margin: 0; position: relative; border-radius: 22px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow); padding: 18px; display: grid; gap: 10px; }
.e404-graf canvas { width: 100%; aspect-ratio: 16 / 11; display: block; }
.e404-graf figcaption { display: flex; align-items: center; gap: 10px; font-size: .9rem; color: var(--muted); }
.e404-punto { width: 12px; height: 12px; border-radius: 50%; background: #e0574a; box-shadow: 0 0 0 4px color-mix(in srgb, #e0574a 22%, transparent); }
@media (max-width: 860px) {
  .e404 { grid-template-columns: minmax(0, 1fr); padding-top: 96px; }
  .e404-graf { order: -1; }
  .e404-links ul { grid-template-columns: minmax(0, 1fr); }
}