/* Yujju design system — página 404.
   El tema pinta una foto en mosaico y un título de 80px en mayúsculas;
   aquí: foto a sangre sin repetir, velo claro a la izquierda y título de marca. */

.yj-ds .page-404 {
    background-repeat: no-repeat;
    background-size: cover;
    background-position: right center;
    position: relative;
}
.yj-ds .page-404::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, var(--yj-white) 0%, color-mix(in srgb, var(--yj-white) 85%, transparent) 40%, transparent 75%);
    pointer-events: none;
}
.yj-ds .page-404 .error-404 {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: min(70vh, 640px);
    padding: var(--yj-section-y) 0;
}
.yj-ds .page-404 .title-big {
    margin: 0 0 var(--yj-space-4);
    font-family: var(--yj-font-display) !important;
    font-size: var(--yj-h1);
    font-weight: 500;
    line-height: var(--yj-leading-tight);
    letter-spacing: 0;
    text-transform: none;
    color: var(--yj-ink);
}
.yj-ds .page-404 .description {
    max-width: 44ch;
    margin-bottom: var(--yj-space-6);
    font-size: var(--yj-text-lg);
    line-height: var(--yj-leading);
    color: var(--yj-text);
}

@media (max-width: 768px) {
    .yj-ds .page-404::before {
        background: color-mix(in srgb, var(--yj-white) 80%, transparent);
    }
    .yj-ds .page-404 .error-404 { min-height: 0; }
    .yj-ds .page-404 .description { font-size: var(--yj-text-md); }
}