/* La paleta esta en tokens.css y el fondo animado en base.css; las dos las
   carga head_base.html ANTES que esta hoja. */
html {
    position: relative;
    box-sizing: border-box;
}

body {
    font-family: 'Ubuntu', sans-serif;
    color: var(--text-primary);
    background-color: var(--bg-1);
    background-image:
        radial-gradient(ellipse at 50% 46%, rgba(168, 120, 255, 0.34), transparent 56%),
        radial-gradient(circle at 8% 26%, rgba(92, 141, 255, 0.66), transparent 41%),
        radial-gradient(circle at 84% 24%, rgba(230, 96, 255, 0.58), transparent 43%),
        radial-gradient(circle at 42% 72%, rgba(96, 210, 255, 0.3), transparent 40%),
        linear-gradient(140deg, var(--bg-1) 0%, var(--bg-2) 52%, var(--bg-3) 100%);
    background-blend-mode: screen, screen, screen, screen, normal;
    background-repeat: no-repeat;
    background-size: 130% 130%, 125% 125%, 140% 140%, 130% 130%, 100% 100%;
    background-position: center center;
    transition: background-position 0.1s ease;
    margin: 0;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    padding: 2rem 1rem;
    position: relative;
    isolation: isolate;
}

body::before {
    background:
        radial-gradient(circle at 12% 20%, rgba(140, 188, 255, 0.46), transparent 26%),
        radial-gradient(circle at 82% 18%, rgba(239, 122, 255, 0.5), transparent 28%),
        radial-gradient(circle at 58% 82%, rgba(131, 110, 255, 0.4), transparent 26%);
    filter: blur(28px);
    mix-blend-mode: screen;
    animation: nebulaMove 18s ease-in-out infinite alternate;
}

body::after {
    background:
        radial-gradient(circle at 18% 22%, rgba(255, 255, 255, 0.95) 0 1.4px, transparent 2.4px),
        radial-gradient(circle at 64% 38%, rgba(198, 225, 255, 0.9) 0 1.3px, transparent 2.3px),
        radial-gradient(circle at 42% 72%, rgba(255, 255, 255, 0.88) 0 1.3px, transparent 2.3px),
        radial-gradient(circle at 78% 18%, rgba(210, 181, 255, 0.8) 0 1.2px, transparent 2.2px),
        radial-gradient(circle at 24% 58%, rgba(255, 255, 255, 0.82) 0 1.2px, transparent 2.2px),
        radial-gradient(circle at 86% 76%, rgba(192, 220, 255, 0.78) 0 1.1px, transparent 2.1px),
        radial-gradient(circle at 34% 14%, rgba(255, 255, 255, 0.76) 0 1px, transparent 2px),
        radial-gradient(circle at 56% 54%, rgba(255, 255, 255, 0.68) 0 1px, transparent 2px),
        radial-gradient(circle at 92% 46%, rgba(210, 181, 255, 0.7) 0 1px, transparent 2px);
    background-size: 280px 280px, 380px 380px, 480px 480px, 560px 560px, 700px 700px, 840px 840px, 980px 980px, 1120px 1120px, 1260px 1260px;
    opacity: 0.72;
    inset: -8%;
    will-change: transform, opacity;
    animation: nebulaMove 20s ease-in-out infinite alternate-reverse, starPulse 14s ease-in-out infinite alternate;
}

.content-container {
    position: relative;
    overflow: hidden;
    /* Cristal esmerilado. Cuatro piezas, y ninguna sobra:
     *  - el fondo baja de opacidad para que se vea el nebulosa de detras,
     *  - el desenfoque sube y anade brillo, que es lo que vuelve lechoso lo que
     *    hay debajo en vez de solo borroso,
     *  - el grano de ::after da la micro-textura del esmerilado,
     *  - los dos inset del box-shadow hacen el canto: claro arriba, oscuro
     *    abajo, que es como se lee el grosor del vidrio. */
    background: linear-gradient(155deg, rgba(255, 255, 255, 0.22), rgba(42, 38, 84, 0.34) 18%, rgba(18, 30, 62, 0.44) 68%);
    border: 1px solid rgba(207, 220, 241, 0.34);
    backdrop-filter: blur(30px) saturate(190%) brightness(0.86);
    -webkit-backdrop-filter: blur(30px) saturate(190%) brightness(0.86);
    padding: 46px;
    border-radius: 28px;
    /* Dos capas: una corta y oscura que hace de contacto y otra ancha y difusa
     * que hace de ambiente. Una sola sombra difusa se lee como niebla, no como
     * relieve; el borde duro de la primera es lo que da el volumen. */
    box-shadow:
        0 6px 14px rgba(2, 8, 18, 0.5),
        0 44px 96px rgba(2, 8, 18, 0.72),
        inset 0 1px 0 rgba(255, 255, 255, 0.42),
        inset 0 -1px 0 rgba(255, 255, 255, 0.08),
        inset 0 -24px 48px rgba(2, 8, 18, 0.22);
    text-align: center;
    width: min(880px, 90vw);
}

.content-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.72), transparent);
}

.content-container::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    /* El grano es una turbulencia SVG en linea, no una imagen: no viaja por red,
     * no hay que recopilarla con collectstatic y escala sin pixelarse.
     * Ajustado para que sea fino y no aspero: mas frecuencia (el punto es mas
     * pequeno), UNA sola octava (varias apelmazan el ruido en grumos), medio
     * pixel de desenfoque y baja opacidad. Se tiene que intuir, no ver. */
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.4' numOctaves='1' stitchTiles='stitch'/%3E%3CfeGaussianBlur stdDeviation='0.35'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='0.42'/%3E%3C/svg%3E"),
        radial-gradient(120% 120% at 100% 0%, rgba(214, 188, 143, 0.12), transparent 36%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.05), transparent 26%);
    background-size: 120px 120px, auto, auto;
    opacity: 0.3;
    mix-blend-mode: soft-light;
}

.welcome-text {
    margin-bottom: 2.5rem;
}

.welcome-text h1 {
    font-size: clamp(2.2rem, 4.7vw, 3.35rem);
    margin-bottom: 0.45rem;
    letter-spacing: 0.015em;
    text-wrap: balance;
    text-shadow:
        0 3px 3px rgba(0, 0, 0, 0.88),
        0 12px 18px rgba(0, 0, 0, 0.72),
        0 28px 46px rgba(0, 0, 0, 0.78);
}

.welcome-text p {
    margin: 0 auto;
    max-width: 640px;
    color: var(--text-secondary);
    font-size: clamp(1.02rem, 1.9vw, 1.18rem);
    line-height: 1.5;
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
}

.main-icons-container {
    display: grid;
    /* Ancho FIJO y fila centrada. Con minmax(_, 1fr) las columnas se estiraban
     * hasta llenar el contenedor y los iconos quedaban separados por mucho que
     * se bajara el gap: el aire estaba dentro de cada columna, no entre ellas. */
    grid-template-columns: repeat(auto-fit, 156px);
    justify-content: center;
    gap: 1rem;
}

/* Sin caja: los cuatro accesos flotan sobre el cristal del contenedor y la
 * profundidad la pone la sombra del icono y del rotulo, no un recuadro. El
 * borde, el fondo y la sombra de caja se quitaron a proposito; lo que queda
 * del recuadro es border-radius, que solo lo usa el foco de teclado. */
.main-icon {
    position: relative;
    isolation: isolate;
    text-align: center;
    border-radius: 20px;
    transition: transform 0.2s ease;
}

.main-icon a {
    min-height: 208px;
    padding: 0.9rem 0.5rem;
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 0.65rem;
}

.main-icon img {
    width: clamp(112px, 13vw, 148px);
    height: clamp(112px, 13vw, 148px);
    transition: transform 0.22s ease, opacity 0.22s ease, filter 0.22s ease;
    /* Tres capas sobre un trazo fino: el contacto casi sin desenfoque es el que
     * despega el icono del cristal, los otros dos dan el volumen. */
    filter:
        opacity(0.97)
        drop-shadow(0 4px 3px rgba(0, 0, 0, 0.92))
        drop-shadow(0 12px 14px rgba(0, 0, 0, 0.78))
        drop-shadow(0 30px 42px rgba(0, 0, 0, 0.82));
}

.main-icon:hover {
    transform: translateY(-4px);
}

.main-icon:hover img {
    transform: scale(1.05);
    filter:
        opacity(1)
        drop-shadow(0 6px 4px rgba(0, 0, 0, 0.94))
        drop-shadow(0 18px 20px rgba(0, 0, 0, 0.8))
        drop-shadow(0 40px 56px rgba(0, 0, 0, 0.85));
}

.main-icon h2 {
    margin-top: 0.5rem;
    color: var(--text-primary);
    font-size: clamp(1.58rem, 1.95vw, 1.95rem);
    font-weight: 700;
    letter-spacing: 0.015em;
    text-wrap: balance;
    text-shadow:
        0 2px 2px rgba(0, 0, 0, 0.92),
        0 8px 12px rgba(0, 0, 0, 0.75),
        0 20px 32px rgba(0, 0, 0, 0.7);
}

.main-icon a:focus-visible {
    outline: 2px solid var(--accent-warm);
    outline-offset: 3px;
    border-radius: 14px;
}

@media (max-width: 1080px) {
    .content-container {
        width: min(920px, 92vw);
        padding: 34px 22px;
    }

    .main-icons-container {
        gap: 0.3rem;
    }
}

@media (max-width: 480px) {
    html,
    body {
        min-height: 100svh;
        min-height: 100dvh;
    }

    body {
        height: auto;
        align-items: center;
        padding: max(0.75rem, env(safe-area-inset-top)) max(1.25rem, env(safe-area-inset-right)) max(0.75rem, env(safe-area-inset-bottom)) max(1.25rem, env(safe-area-inset-left));
        overflow: hidden;
    }

    /* TODO lo de aqui abajo escala con min(vw, dvh), no con pixeles fijos.
     *
     * Por que no porcentajes a secas: un % del ancho solo mira el ancho, y esta
     * portada no cabe por el ancho sino por el ALTO — las dos filas y el titulo
     * tienen que entrar sin scroll. Un telefono ancho y corto (o el teclado
     * abierto, o el navegador con su barra) reventaria la caja. Y al reves,
     * atarlo solo al alto encoge de mas en un movil estrecho y largo.
     * min() coge la dimension que vaya mas justa en cada telefono, que es la
     * que manda. El clamp de los extremos sigue ahi como tope de cordura.
     *
     * El 100% de referencia es un telefono de 375x812: ahi estos numeros dan
     * exactamente el tamano aprobado, y a partir de el todo crece o encoge en
     * bloque. Para subir o bajar la escala entera, mueve los multiplicadores
     * (28vw / 13dvh, etc.) manteniendo su proporcion. */
    .content-container {
        display: flex;
        flex-direction: column;
        width: min(100%, 390px);
        max-height: calc(100dvh - 1.5rem);
        min-height: 0;
        padding: clamp(18px, min(9vw, 5.4dvh), 40px) clamp(12px, 4vw, 22px);
        border-radius: 20px;
    }

    .main-icons-container {
        flex: 0 0 auto;
        min-height: 0;
        /* Columnas mas estrechas que el icono + su aire: es lo que junta las dos
         * mitades hacia el centro. El hueco vertical y el horizontal van por
         * separado a proposito — uno se pidio ancho y el otro estrecho. */
        grid-template-columns: repeat(2, minmax(0, min(36vw, 136px)));
        justify-content: center;
        align-content: center;
        column-gap: clamp(0.15rem, 1.2vw, 0.45rem);
        row-gap: clamp(0.6rem, min(5.4vw, 2.8dvh), 1.6rem);
    }

    .welcome-text {
        flex: 0 0 auto;
        margin-bottom: clamp(0.5rem, min(4vw, 2dvh), 1.5rem);
    }

    .welcome-text h1 {
        font-size: clamp(1.5rem, min(9.2vw, 4.25dvh), 3rem);
        margin: 0 0 clamp(0.2rem, 0.8dvh, 0.5rem);
    }

    .welcome-text p {
        font-size: clamp(0.85rem, min(4.6vw, 2.12dvh), 1.3rem);
        line-height: 1.3;
    }

    .main-icon {
        min-height: 0;
    }

    .main-icon a {
        min-height: clamp(110px, min(45.5vw, 21dvh), 230px);
        padding: clamp(0.4rem, 1.4dvh, 0.9rem) 0.3rem;
        gap: clamp(0.25rem, 0.8dvh, 0.6rem);
    }

    .main-icon img {
        width: clamp(64px, min(28vw, 13dvh), 140px);
        height: clamp(64px, min(28vw, 13dvh), 140px);
    }

    .main-icon h2 {
        margin: clamp(0.15rem, 0.6dvh, 0.5rem) 0 0;
        font-size: clamp(0.95rem, min(5.1vw, 2.35dvh), 1.6rem);
    }
}

@media (max-width: 360px) {
    /* Solo el respiro lateral. Los tamanos ya los encoge min(vw, dvh). */
    .content-container {
        padding-left: 10px;
        padding-right: 10px;
    }
}

@media (max-width: 480px) and (max-height: 680px) {
    /* Pantalla baja: los tamanos ya bajan solos por el termino dvh, asi que
     * aqui solo quedan las esquinas, que no escalan con nada. */
    .content-container {
        border-radius: 18px;
    }

    .main-icon {
        border-radius: 16px;
    }
}

@keyframes nebulaMove {
    from {
        transform: translate3d(-1.2%, -1%, 0) scale(1);
    }
    to {
        transform: translate3d(1.2%, 1%, 0) scale(1.06);
    }
}

@keyframes starPulse {
    from {
        opacity: 0.6;
    }
    to {
        opacity: 0.86;
    }
}

/* Modo rendimiento. Antes entraba TAMBIEN por debajo de 900px y el movil
 * acababa siendo otra pagina: panel opaco en vez de cristal, degradados
 * apagados con blend normal en vez de screen e iconos sin sombra. Ahora solo
 * responde a quien pide menos movimiento desde el sistema, asi que el telefono
 * ve los mismos colores y la misma transparencia que el escritorio.
 * Lo que de verdad cuesta en un telefono es el backdrop-filter del contenedor;
 * si algun dia se nota el tiron al hacer scroll, el freno va ahi y no en la
 * paleta. */
@media (prefers-reduced-motion: reduce) {
    body {
        background-color: var(--bg-1) !important;
        background-image:
            radial-gradient(circle at 16% 20%, rgba(92, 141, 255, 0.34), transparent 36%),
            radial-gradient(circle at 80% 24%, rgba(230, 96, 255, 0.26), transparent 38%),
            radial-gradient(circle at 56% 78%, rgba(96, 210, 255, 0.2), transparent 34%),
            linear-gradient(140deg, var(--bg-1) 0%, var(--bg-2) 52%, var(--bg-3) 100%) !important;
        background-blend-mode: normal !important;
        background-size: 100% 100% !important;
        background-position: center center !important;
        transition: none !important;
    }

    .content-container {
        background: rgba(11, 20, 44, 0.92) !important;
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
        box-shadow: 0 6px 14px rgba(2, 8, 18, 0.28) !important;
    }

    .main-icon,
    .main-icon:hover {
        transform: none !important;
    }

    .main-icon img,
    .main-icon:hover img {
        transform: none !important;
        /* Una sola capa en lugar de tres, pero no cero: este bloque entra por
         * debajo de 900px, y sin las cajas un `filter: none` dejaba los iconos
         * completamente planos sobre el panel. La sombra es estatica; lo que
         * costaba aqui era animarla al pasar por encima, no pintarla. */
        filter: opacity(0.97) drop-shadow(0 4px 5px rgba(0, 0, 0, 0.88)) !important;
    }
}