/* ==========================================================================
   WarCrafted Universe — portal raíz (página "En construcción")
   Paleta y tipografía heredadas del sistema de diseño del proyecto principal.
   ========================================================================== */

:root {
    --color-fondo: #060b14;
    --color-fondo-elevado: #0d1626;
    --color-fondo-tarjeta: #101b2e;
    --color-borde: #1f3350;
    --color-texto: #e7eef7;
    --color-texto-tenue: #9fb3c8;

    --color-primario: #6fd7ff;
    --color-dorado: #e3b64f;
    --color-dorado-fuerte: #c6912f;

    --fuente-titulos: 'Cinzel', 'Georgia', serif;
    --fuente-cuerpo: 'Inter', system-ui, -apple-system, sans-serif;

    --radio-borde: 8px;
}

* {
    box-sizing: border-box;
}

html, body {
    height: 100%;
}

body {
    margin: 0;
    color: var(--color-texto);
    font-family: var(--fuente-cuerpo);
    line-height: 1.5;
}

/* --- Fondo a pantalla completa --------------------------------------------
   Mientras no exista assets/fondo-portal.jpg, la imagen falla al cargar
   (404) y el navegador simplemente no la pinta, dejando ver el degradado de
   la paleta que hace de fondo por defecto. En cuanto se sube el archivo real
   con esa ruta exacta, se muestra automáticamente sin tocar nada de código.
   Ver docs/ASSETS.md.
   -------------------------------------------------------------------------- */

.fondo {
    position: fixed;
    inset: 0;
    z-index: -2;
    overflow: hidden;
    background: linear-gradient(160deg, var(--color-fondo-elevado) 0%, var(--color-fondo) 55%, #000000 100%);
}

.fondo__imagen {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transform: scale(1.06) translate(-1%, -1%);
    animation: fondo-respiracion 26s ease-in-out infinite alternate;
}

@keyframes fondo-respiracion {
    0% {
        transform: scale(1.06) translate(-1%, -1%);
    }
    100% {
        transform: scale(1.14) translate(1%, 1%);
    }
}

@media (prefers-reduced-motion: reduce) {
    .fondo__imagen {
        animation: none;
        transform: scale(1.06);
    }
}

.fondo--sin-imagen .fondo__imagen {
    display: none;
}

.fondo--sin-imagen::after {
    content: "[ FONDO PORTAL — 1920×1080px ]";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 1rem;
    text-align: center;
    color: var(--color-texto-tenue);
    font-size: 0.7rem;
    letter-spacing: 0.05em;
    padding: 0 1rem;
    opacity: 0.45;
}

.fondo__overlay {
    position: fixed;
    inset: 0;
    z-index: -1;
    background: linear-gradient(180deg, rgba(6, 11, 20, 0.55) 0%, rgba(6, 11, 20, 0.75) 100%);
}

/* --- Contenido -------------------------------------------------------------*/

.portal {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 2.5rem 1.5rem;
    gap: 1.75rem;
}

.portal__logo {
    width: clamp(220px, 45vw, 480px);
}

.portal__logo img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 16px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4);
}

.portal__logo-alternativo {
    display: none;
    font-family: var(--fuente-titulos);
    font-size: clamp(1.8rem, 5vw, 2.6rem);
    font-weight: 700;
    letter-spacing: 0.03em;
    color: var(--color-texto);
}

.portal__subtitulo {
    max-width: 480px;
    color: var(--color-texto-tenue);
    font-size: 1.05rem;
    margin: 0;
}

.portal__acciones {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem;
    margin-top: 0.5rem;
}

.boton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-width: 220px;
    padding: 1rem 1.8rem;
    border-radius: var(--radio-borde);
    font-family: var(--fuente-cuerpo);
    font-weight: 700;
    font-size: 0.9rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    text-decoration: none;
    border: 1px solid transparent;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.boton:hover {
    transform: translateY(-2px);
}

.boton--primario {
    background: linear-gradient(135deg, var(--color-dorado), var(--color-dorado-fuerte));
    color: #201400;
    box-shadow: 0 0 0 1px rgba(227, 182, 79, 0.35), 0 10px 26px rgba(227, 182, 79, 0.22);
}

.boton--primario:hover {
    color: #201400;
    box-shadow: 0 0 0 1px rgba(227, 182, 79, 0.55), 0 12px 30px rgba(227, 182, 79, 0.32);
}

.boton--secundario {
    background: rgba(16, 27, 46, 0.6);
    border-color: var(--color-primario);
    color: var(--color-primario);
}

.boton--secundario:hover {
    background: rgba(111, 215, 255, 0.1);
    color: var(--color-primario);
}

.portal__pie {
    max-width: 620px;
    margin-top: 1.5rem;
    color: var(--color-texto-tenue);
    font-size: 0.75rem;
    line-height: 1.6;
    opacity: 0.85;
}

@media (max-width: 480px) {
    .boton {
        width: 100%;
        min-width: 0;
    }

    .portal__acciones {
        flex-direction: column;
        width: 100%;
        max-width: 320px;
    }
}