.err-main {
    min-height:100vh; display:flex; flex-direction:column; align-items:center; justify-content:center;
    text-align:center; padding:calc(var(--nav-h) + 2rem) 1.5rem 3rem; gap:1.6rem;
}
.err-label {
    font-family:var(--mono); font-size:.6rem; letter-spacing:.22em;
    text-transform:uppercase; color:var(--gray);
}

/*glitch del 404*/
.glitch-404 {
    position:relative; font-family:var(--fd); font-weight:800; letter-spacing:-.04em;
    font-size:clamp(5rem,20vw,11rem); line-height:1; color:var(--black);
}
.glitch-404-l1, .glitch-404-l2 {
    position:absolute; top:0; left:0; width:100%; overflow:hidden;
}
.glitch-404-l1 { color:var(--orange); clip-path:inset(0 0 55% 0); animation:glitchTop 3.4s infinite linear alternate-reverse; }
.glitch-404-l2 { color:#999; clip-path:inset(55% 0 0 0); animation:glitchBottom 2.7s infinite linear alternate-reverse; }
@keyframes glitchTop {
    0%   { transform:translate(0,0); }
    20%  { transform:translate(-4px,-2px); }
    40%  { transform:translate(4px,1px); }
    60%  { transform:translate(-3px,1px); }
    80%  { transform:translate(3px,-1px); }
    100% { transform:translate(0,0); }
}
@keyframes glitchBottom {
    0%   { transform:translate(0,0); }
    25%  { transform:translate(4px,0); }
    50%  { transform:translate(-4px,1px); }
    75%  { transform:translate(3px,-2px); }
    100% { transform:translate(0,0); }
}

/*mensaje dinamico*/
.err-msg-box { display:flex; flex-direction:column; align-items:center; gap:1rem; max-width:460px; }
.err-msg { font-size:1rem; font-weight:400; color:var(--gray); line-height:1.55; min-height:3em; }
.err-msg-btn {
    display:inline-flex; align-items:center; gap:.5rem; background:none; border:1px solid var(--line);
    padding:.55rem 1.2rem; font-size:.6rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase;
    color:var(--gray); cursor:pointer; transition:all .2s; font-family:inherit;
}
.err-msg-btn:hover { border-color:var(--black); color:var(--black); background:var(--light); }
.err-msg-btn i { font-size:.9rem; }

/*decoracion pixel — variedad solo con nth-child, sin JS*/
.pixel-row { display:flex; gap:3px; flex-wrap:wrap; justify-content:center; max-width:340px; margin:.4rem 0; }
.pixel-row span { width:13px; height:13px; background:var(--line); animation:pixelFlicker 2.6s infinite; }
.pixel-row span:nth-child(3n) { background:var(--orange); animation-delay:.3s; }
.pixel-row span:nth-child(5n) { animation-delay:.9s; animation-duration:1.9s; }
.pixel-row span:nth-child(7n) { background:var(--black); animation-delay:1.4s; animation-duration:3.2s; }
.pixel-row span:nth-child(4n+2) { animation-duration:2.1s; }
@keyframes pixelFlicker { 0%, 100% { opacity:.2; } 50% { opacity:1; } }

.err-actions { display:flex; gap:.75rem; flex-wrap:wrap; justify-content:center; margin-top:.4rem; }

@media (max-width:900px) {
    .err-main { padding:calc(var(--nav-h) + 1.5rem) 1.2rem 2.5rem; gap:1.2rem; }
    .glitch-404 { font-size:clamp(3.5rem,22vw,6rem); }
    .err-msg { font-size:.9rem; }
    .err-actions { flex-direction:column; width:100%; max-width:280px; }
    .err-actions .cta-btn { width:100%; justify-content:center; }
    .pixel-row span { width:10px; height:10px; }
}