/* RESET */
* {
    box-sizing: border-box;
}

/* Video de fondo */
#videoBackground {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -1; /* Siempre detrás del contenido */
    filter: brightness(0.8); /* Oscurece un poco para que el texto resalte */
}
/* CENTRADO */
.wrapper {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* =========================
   AJUSTE DEL CUADRO (CARD)
   ========================= */
.card-404 {
    /* ⬇️ AJUSTA SOLO ESTO */
    width: clamp(420px, 65vw, 760px);
    max-width: 92%;

    padding: 48px 36px;
    text-align: center;
    border-radius: 28px;

    background: rgba(221, 220, 220, 0.082);
    backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.15);

    box-shadow: 0 0 40px rgba(0, 247, 255, 0.15);

    /* 🔒 evita que el contenido rompa el layout */
    overflow: hidden;
}

/* 404 */
.code {
    font-size: 96px;
    margin: 0 0 12px;
       color: #d0cfd3;
text-shadow:
    0 0 12px rgba(228, 219, 168, 0.6);
    letter-spacing: 6px;
}

/* =========================
   CONTENEDOR DE IMAGEN
   (NO afecta al tamaño del card)
   ========================= */
.image-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 18px 0 10px;

    /* 🔒 evita empujes */
    max-width: 100%;
    overflow: hidden;
}

/* =========================
   AJUSTE DE IMAGEN
   ========================= */
.illustration {
    /* ⬇️ AJUSTA SOLO ESTO */
    width: clamp(240px, 38vw, 560px);
    max-width: 100%;
    height: auto;

    display: block;

    /* 🎈 efecto visual sin romper layout */
    transform-origin: center;
}

/* TEXTO */
.message {
    margin: 18px 0 32px;
    font-size: 20px;
    color: #ffffff;
    opacity: 0.9;
}

/* BOTÓN */
.btn {
    display: inline-block;
    padding: 12px 36px;
    border-radius: 999px;
    background: linear-gradient(135deg, #07f5e1, #00c9ff);
    color: #000;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
}

.btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 0 25px rgba(0, 255, 220, 0.7);
}