/* --- VARIABLES --- */
:root {
    --bg-color: #F9F5ED; /* Mismo color crema de tu sitio principal */
    --text-color-background: rgba(40, 40, 39, 0.08); /* Color muy sutil para el 404 gigante */
    --text-color-japanese: rgba(40, 40, 39, 0.5);  /* Color un poco más visible para el texto en japonés */
}

/* --- ESTILOS GLOBALES --- */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html, body {
    height: 100%;
    width: 100%;
    overflow: hidden; /* Evita que aparezcan barras de scroll por si algo se desborda */
}

body {
    background-color: var(--bg-color);
    font-family: 'Bespoke Sans', sans-serif; /* Fuente por defecto */
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}

/* --- CONTENEDOR PRINCIPAL --- */
.error-container {
    position: relative; /* Es el punto de referencia para los elementos con posición absoluta */
    width: 90vw; /* Ocupa el 90% del ancho de la vista */
    height: 90vh; /* Ocupa el 90% de la altura de la vista */
    display: flex;
    justify-content: center;
    align-items: center;
}

/* --- TEXTO 404 GIGANTE (CAPA INFERIOR) --- */
.error-code {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -60%); /* Bajado un poco más */
    font-family: 'Bespoke Sans', sans-serif;
    font-weight: 900; /* El peso más grueso para que sea imponente */
    font-size: clamp(180px, 40vw, 600px); /* Tamaño responsive: mínimo 180px, ideal 40% del ancho, máximo 600px */
    color: var(--text-color-background);
    z-index: 1; /* Capa 1: al fondo de todo */
    user-select: none; /* Evita que el usuario pueda seleccionar el texto gigante */
}

/* --- TEXTO EN JAPONÉS (CAPA INTERMEDIA) --- */
.japanese-text {
    position: absolute;
    top: 50%;
    left: 50%;
    /* Se translada -50% en X para centrarlo y mucho más en Y para ponerlo encima del 404 */
    transform: translate(-50%, -450%); /* Subido muchísimo más */
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 700;
    font-size: clamp(18px, 3.5vw, 35px); /* Tamaño responsive, ligeramente ajustado */
    color: var(--text-color-japanese);
    letter-spacing: 0.1em;
    z-index: 2; /* Capa 2: encima del 404 */
    user-select: none;
}

/* --- TEXTO "FORBIDDEN" (CAPA INTERMEDIA) --- */
.forbidden-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, 300%); /* Bajado aún más */
    font-family: 'Bespoke Sans', sans-serif; /* Misma fuente que el código de error */
    font-weight: 700;
    font-size: clamp(20px, 4vw, 40px); /* Ligeramente más grande que el texto japonés */
    color: var(--text-color-japanese);
    z-index: 2; /* Mismo nivel que otros textos descriptivos */
    user-select: none;
}

/* --- TEXTO EN JAPONÉS "禁止" (CAPA INTERMEDIA) --- */
.japanese-text-forbidden {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, 400%); /* Bajado un poco más */
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 700;
    font-size: clamp(18px, 3.5vw, 35px); /* Mismo tamaño que el otro texto japonés */
    color: var(--text-color-japanese);
    letter-spacing: 0.1em;
    z-index: 2; /* Mismo nivel que otros textos descriptivos */
    user-select: none;
}

/* --- IMAGEN PRINCIPAL (CAPA SUPERIOR) --- */
.error-image {
    position: relative; /* Usamos relative para que se coloque según el flujo normal del flexbox del contenedor */
    z-index: 3; /* Capa 3: encima de todo */
    max-width: 90%; /* Asegura que no se salga del contenedor en pantallas pequeñas */
    max-height: 80%;
    width: clamp(150px, 25vw, 450px); /* Imagen mucho más pequeña */
    height: auto;
    transform: translateY(0px); /* Subida (antes estaba en 40px) */
    object-fit: contain;
}


/* --- AJUSTES PARA PANTALLAS PEQUEÑAS (MÓVILES) --- */
@media (max-width: 600px) {
    .japanese-text {
        /* Acercamos el texto japonés al número 404 en pantallas pequeñas */
        transform: translate(-50%, -400%); /* Subido muchísimo más también en móviles */
    }

    .error-image {
        width: 50vw; /* Hacemos la imagen mucho más pequeña también en móviles */
        transform: translateY(0px); /* Subida también en móviles (antes estaba en 30px) */
    }
}

img {
    -webkit-user-drag: none; /* Evita que se puedan arrastrar en Safari/Chrome /
    user-select: none;       / Evita que se puedan seleccionar como texto /
    -moz-user-select: none;  / Firefox /
    -webkit-user-select: none; / Chrome, Safari, Opera /
    -ms-user-select: none;   / Internet Explorer/Edge /
    pointer-events: none;    / La propiedad MÁGICA: hace que la imagen ignore todos los eventos del ratón */
}