[hidden] {
    display: none !important;
}

.svg-oculto {
    position: absolute;
}

/* Capas a pantalla completa: invisibles hasta que empieza la infección */
#capas .capa {
    position: fixed;
    inset: 0;
    z-index: 50;
    pointer-events: none;
    opacity: 0;
}

#popups {
    position: fixed;
    inset: 0;
    z-index: 60;
    pointer-events: none;
}

#mensaje-virus {
    position: fixed;
    left: 50%;
    bottom: 5rem;
    transform: translateX(-50%);
    z-index: 70;
    width: min(90vw, 32rem);
    padding: 0.8rem 1rem;
    background: #000;
    border: 2px solid #ff1744;
    color: #ff1744;
    font-family: "Courier New", monospace;
    text-align: center;
}

#btn-silencio {
    position: fixed;
    left: 0.8rem;
    bottom: 0.8rem;
    z-index: 90;
    padding: 0.4rem 0.8rem;
    border: 1px solid #888;
    border-radius: 4px;
    background: rgba(0, 0, 0, 0.7);
    color: #fff;
    font-size: 0.8rem;
    cursor: pointer;
}

#aviso-fotos {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 100;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.4rem 1.2rem;
    padding: 0.6rem 1rem;
    border-top: 1px solid rgba(255, 111, 174, 0.6);
    background: rgba(13, 14, 38, 0.95);
    color: #fff;
    font-size: 0.85rem;
}

#aviso-fotos p {
    margin: 0;
}

/* ---------- Efectos de la infección ---------- */

/* Etapa 1: texto con RGB split */
.glitch-activo {
    animation: rgb-split 1.4s infinite steps(1);
}

@keyframes rgb-split {
    0%   { text-shadow: -2px 0 #ff0040, 2px 0 #00e5ff; transform: none; }
    20%  { text-shadow: 3px 0 #ff0040, -3px 0 #00e5ff; transform: translateX(-2px); }
    40%  { text-shadow: -1px 0 #ff0040, 1px 0 #00e5ff; transform: none; }
    60%  { text-shadow: 4px 1px #ff0040, -4px -1px #00e5ff; transform: skewX(6deg); }
    80%  { text-shadow: -3px 0 #ff0040, 3px 0 #00e5ff; transform: translateX(2px); }
}

body.infeccion-1 #capas .scanlines {
    opacity: 0.35;
    background: repeating-linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0) 0,
        rgba(0, 0, 0, 0) 2px,
        rgba(0, 0, 0, 0.45) 3px
    );
}

/* Etapa 2: ruido, distorsión y parpadeo */
body.infeccion-2 #capas .ruido {
    opacity: 0.18;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/></filter><rect width='200' height='200' filter='url(%23n)'/></svg>");
    animation: mover-ruido 0.4s infinite steps(4);
}

@keyframes mover-ruido {
    0%   { background-position: 0 0; }
    25%  { background-position: -40px 20px; }
    50%  { background-position: 30px -50px; }
    75%  { background-position: -20px -30px; }
}

/* la distorsión solo afecta a la portada y a los tráileres: aplicarla a toda
   la página (6.000 px) sería demasiado pesado en móviles */
body.infeccion-2 .portada,
body.infeccion-2 .trailers-contenido {
    filter: url(#distorsion);
}

body.infeccion-2 .portada {
    animation: corte-pantalla 2.2s infinite steps(1);
}

@keyframes corte-pantalla {
    0%   { clip-path: inset(0 0 0 0); }
    30%  { clip-path: inset(10% 0 55% 0); transform: translateX(-12px); }
    32%  { clip-path: inset(0 0 0 0); transform: none; }
    70%  { clip-path: inset(60% 0 8% 0); transform: translateX(14px); }
    72%  { clip-path: inset(0 0 0 0); transform: none; }
}

body.infeccion-2 .parpadea {
    animation: parpadeo 0.9s infinite steps(1);
}

@keyframes parpadeo {
    0%, 100% { opacity: 1; }
    45%      { opacity: 0.15; }
    55%      { opacity: 1; }
    80%      { opacity: 0.4; }
}

/* Etapa 3: pantallazos rojos y elementos desordenados */
#capas .flash-rojo {
    background: #ff0000;
}

#capas .flash-rojo.destello {
    animation: flash-rojo 0.35s 1;
}

@keyframes flash-rojo {
    0%   { opacity: 0.75; }
    100% { opacity: 0; }
}

.desordenado {
    transform: translate(var(--dx, 0), var(--dy, 0)) rotate(var(--rot, 0deg));
    transition: transform 0.4s;
}

/* Pop-ups falsos */
.popup-falso {
    position: absolute;
    width: min(80vw, 18rem);
    border: 2px solid #000;
    background: #d4d0c8;
    color: #000;
    font: 0.85rem Tahoma, Arial, sans-serif;
    box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.5);
    pointer-events: auto;
}

.popup-falso .titulo {
    padding: 0.2rem 0.4rem;
    background: #b71c1c;
    color: #fff;
    font-weight: 700;
}

.popup-falso .cuerpo {
    padding: 0.8rem;
}

.popup-falso button {
    margin: 0 0.8rem 0.8rem;
    padding: 0.2rem 1rem;
    cursor: pointer;
}

/* Texto del virus */
#mensaje-virus {
    text-shadow: 0 0 6px #ff1744;
}

/* Modo sin parpadeos y movimiento reducido: se mantiene el aspecto
   dañado pero sin destellos ni animaciones */
body.sin-parpadeos .glitch-activo,
body.sin-parpadeos .portada,
body.sin-parpadeos .parpadea,
body.sin-parpadeos #capas .ruido,
body.sin-parpadeos #capas .flash-rojo {
    animation: none !important;
}

body.sin-parpadeos #capas .flash-rojo {
    opacity: 0 !important;
}

@media (prefers-reduced-motion: reduce) {
    .glitch-activo,
    .portada,
    .parpadea,
    #capas .ruido,
    #capas .flash-rojo {
        animation: none !important;
    }

    #capas .flash-rojo {
        opacity: 0 !important;
    }
}


/* ---------- Catástrofe (etapas 4 a 6) ---------- */

/* viñeta roja que late despacio (no es un destello) */
#capas .vineta {
    background: radial-gradient(ellipse at center, transparent 42%, rgba(170, 0, 30, 0.65) 100%);
}

body.infeccion-4 #capas .vineta {
    opacity: 1;
    animation: latido 3.2s ease-in-out infinite;
}

@keyframes latido {
    0%, 100% { opacity: 0.55; }
    50% { opacity: 1; }
}

/* temblor de cámara: la amplitud va decayendo */
main.temblor {
    animation: temblor 0.6s linear 1;
}

@keyframes temblor {
    0%   { transform: translate(9px, -6px); }
    10%  { transform: translate(-8px, 7px); }
    20%  { transform: translate(7px, 5px); }
    30%  { transform: translate(-6px, -6px); }
    40%  { transform: translate(5px, 4px); }
    50%  { transform: translate(-4px, 3px); }
    60%  { transform: translate(3px, -3px); }
    70%  { transform: translate(-2px, 2px); }
    85%  { transform: translate(1px, -1px); }
    100% { transform: none; }
}

/* lluvia de código */
#lluvia {
    position: fixed;
    inset: 0;
    z-index: 52;
    width: 100%;
    height: 100%;
    pointer-events: none;
    mix-blend-mode: screen;
    opacity: 0;
    transition: opacity 2.5s;
}

#lluvia.visible {
    opacity: 0.55;
}

/* log del ataque */
#log-hack {
    position: fixed;
    left: 12px;
    top: 76px;
    z-index: 65;
    width: min(380px, 62vw);
    max-height: 32vh;
    padding: 0.5rem 0.7rem;
    overflow: hidden;
    border: 1px solid #00ff88;
    background: rgba(0, 0, 0, 0.78);
    color: #00ff88;
    font: 11px/1.45 "Courier New", monospace;
    pointer-events: none;
}

#log-hack .mal {
    color: #ff1744;
}

@media (max-width: 600px) {
    #log-hack {
        top: 70px;
        width: 58vw;
        max-height: 24vh;
        font-size: 10px;
    }
}

/* ventana de "cifrado de servidores" */
.popup-cifrado {
    position: fixed;
    right: 4vw;
    top: 90px;
    left: auto;
    width: min(86vw, 22rem);
}

.popup-cifrado .barra-cifrado {
    height: 14px;
    margin-top: 0.6rem;
    border: 1px solid #000;
    background: #fff;
}

.popup-cifrado .barra-cifrado span {
    display: block;
    width: 0;
    height: 100%;
    background: #b71c1c;
}

/* el colapso: cada elemento se desprende y cae */
.cae {
    transition: transform 1.6s cubic-bezier(0.5, 0, 1, 0.55), opacity 1.6s ease-in !important;
    transform: translate(var(--cx, 0), 135vh) rotate(var(--cr, 0deg)) !important;
    opacity: 0.2 !important;
}

/* con "sin parpadeos" no se cae nada: los elementos se apagan sin moverse */
.cae-suave {
    opacity: 0.18 !important;
    filter: grayscale(1);
    transition: opacity 1s !important;
}

/* pantallazo azul (un solo cambio, sin parpadeo) */
#pantallazo {
    position: fixed;
    inset: 0;
    z-index: 95;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 4vh 8vw;
    overflow-y: auto;
    background: #0a58c8;
    color: #fff;
    font-family: "Segoe UI", system-ui, sans-serif;
}

/* con "sin parpadeos" el pantallazo es azul oscuro, sin el azul brillante */
#pantallazo.suave {
    background: #061a44;
}

.bsod-cara {
    margin: 0;
    font-size: clamp(5rem, 16vw, 11rem);
    line-height: 1;
}

.bsod-texto {
    max-width: 38rem;
    margin: 0.5rem 0 1rem;
    font-size: clamp(1.1rem, 3vw, 1.7rem);
}

.bsod-progreso {
    margin: 0 0 1.4rem;
    font-size: 1.2rem;
}

.bsod-detalle {
    margin: 0;
    font-size: 0.9rem;
    opacity: 0.85;
}

body.sin-parpadeos #capas .vineta {
    animation: none !important;
    transition: none !important;
}

body.sin-parpadeos.infeccion-4 #capas .vineta {
    opacity: 0.7;
}

@media (prefers-reduced-motion: reduce) {
    #capas .vineta {
        animation: none !important;
        transition: none !important;
    }
}

/* ---------- Modo de recuperación (dentro del pantallazo) ---------- */
.bsod-opciones {
    margin-top: 1.6rem;
    font-family: "Consolas", "Courier New", monospace;
}

.bsod-aviso {
    margin: 0 0 0.8rem;
    font-size: 1rem;
}

.bsod-lista {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin: 0 0 1.2rem;
    padding: 0;
    list-style: none;
}

.bsod-opcion {
    display: inline-flex;
    align-items: center;
    gap: 0.9rem;
    padding: 0.7rem 1rem;
    border: 2px solid rgba(255, 255, 255, 0.85);
    background: transparent;
    color: #fff;
    font: 700 1.15rem "Consolas", "Courier New", monospace;
    cursor: pointer;
    text-decoration: none;
    touch-action: manipulation;
}

.bsod-opcion:hover,
.bsod-opcion:focus-visible {
    background: #fff;
    color: #0a58c8;
    outline: none;
}

.bsod-num {
    display: inline-block;
    min-width: 1.6rem;
    padding: 0 0.3rem;
    background: #fff;
    color: #0a58c8;
    text-align: center;
}

.bsod-opcion:hover .bsod-num,
.bsod-opcion:focus-visible .bsod-num {
    background: #0a58c8;
    color: #fff;
}

.bsod-comandos {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    max-width: 34rem;
}

.bsod-comandos label {
    flex: none;
    font-size: 1rem;
}

.bsod-comandos input {
    flex: 1;
    min-width: 0;
    padding: 0.3rem 0.1rem;
    border: 0;
    border-bottom: 2px solid #fff;
    background: transparent;
    color: #fff;
    font: 1.05rem "Consolas", "Courier New", monospace;
    caret-color: #fff;
    caret-shape: block;
    outline: none;
}

.bsod-respuesta {
    max-width: 38rem;
    margin: 1rem 0 0;
    padding: 0.6rem 0.8rem;
    border-left: 4px solid #fff;
    background: rgba(0, 0, 0, 0.25);
    font-size: 0.95rem;
}