:root {
            /* IDENTIDAD DATALISTING — METAL CALIENTE */
            --deep: #ac0000;
            --red: #ef2a00;
            --hot: #ff4c00;
            --fluo: #ff8a00;
            --light: #ffe3b0;

            --background: #080706;
            --surface: #11100f;
            --text: #f7f5f2;
            --muted: #a39d98;
        }

        * {
            box-sizing: border-box;
        }

        html,
        body {
            margin: 0;
            min-height: 100%;
            font-family: Inter, ui-sans-serif, system-ui, -apple-system,
                         BlinkMacSystemFont, "Segoe UI", sans-serif;
            background: var(--background);
            color: var(--text);
        }

        body {
            min-height: 100vh;
            overflow-x: hidden;
        }

        /*
         * Resplandor general.
         * Da sensación de que la luz naranja sale desde
         * la arquitectura y no simplemente está pintada.
         */
        body::before {
            content: "";
            position: fixed;
            inset: 0;
            pointer-events: none;
            background:
                radial-gradient(
                    circle at 76% 42%,
                    rgba(255, 76, 0, .15),
                    transparent 27%
                ),
                radial-gradient(
                    circle at 68% 48%,
                    rgba(239, 42, 0, .07),
                    transparent 42%
                );
        }

        .page {
    height: 100vh;
    min-height: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    position: relative;
    padding: clamp(28px, 4vh, 48px) 8vw;
    overflow: hidden;
}

        /*
         * Grilla técnica de fondo.
         */
        .grid {
            position: absolute;
            inset: 0;
            opacity: .17;
            pointer-events: none;

            background-image:
                linear-gradient(
                    rgba(255, 138, 0, .08) 1px,
                    transparent 1px
                ),
                linear-gradient(
                    90deg,
                    rgba(255, 138, 0, .08) 1px,
                    transparent 1px
                );

            background-size: 42px 42px;

            mask-image:
                linear-gradient(to right, black, transparent 80%);
        }

        .content {
            position: relative;
            z-index: 10;
            max-width: 720px;
        }

        /*
         * MARCA
         */
        .brand {
            display: inline-flex;
            align-items: center;
            gap: 11px;

            margin-bottom: 38px;

            font-size: 14px;
            letter-spacing: .28em;
            font-weight: 700;
        }

        .brand-dot {
            width: 10px;
            height: 10px;

            border-radius: 50%;

            background: var(--fluo);

            box-shadow:
                0 0 6px var(--fluo),
                0 0 18px var(--hot),
                0 0 38px rgba(255, 76, 0, .7);
        }

        /*
         * FRASE PRINCIPAL
         */
        h1 {
            margin: 0;

            max-width: 780px;

            font-size: clamp(48px, 6vw, 94px);
            line-height: .98;
            letter-spacing: -.055em;
            font-weight: 650;
        }

        /*
         * Efecto metal caliente:
         * rojo profundo -> rojo -> naranja -> zona luminosa
         */
        h1 span {
            color: var(--hot);

            background:
                linear-gradient(
                    105deg,
                    var(--red) 0%,
                    var(--hot) 35%,
                    var(--fluo) 67%,
                    var(--light) 84%,
                    var(--hot) 100%
                );

            -webkit-background-clip: text;
            background-clip: text;

            -webkit-text-fill-color: transparent;

            filter:
                drop-shadow(0 0 8px rgba(255, 76, 0, .20));
        }

        .description {
            margin-top: 34px;

            max-width: 590px;

            color: var(--muted);

            font-size: clamp(17px, 1.4vw, 21px);
            line-height: 1.6;
        }

        .concepts {
            margin-top: 46px;

            display: flex;
            flex-wrap: wrap;

            gap: 22px;

            color: #6d6763;

            font-size: 12px;
            letter-spacing: .18em;

            text-transform: uppercase;
        }
.contact-link {
    display: inline-flex;
    margin-top: 30px;
    padding-bottom: 5px;

    color: var(--light);
    font-size: 14px;
    letter-spacing: .06em;
    text-decoration: none;

    border-bottom: 1px solid rgba(255, 138, 0, .45);

    transition:
        color .2s ease,
        border-color .2s ease,
        filter .2s ease;
}

.contact-link:hover {
    color: var(--fluo);
    border-color: var(--fluo);

    filter:
        drop-shadow(0 0 6px rgba(255, 76, 0, .55));
}
        /*
         * ESTADO
         */
        .status {
            margin-top: 60px;

            display: flex;
            align-items: center;

            gap: 10px;

            color: #77716c;
            font-size: 13px;
        }

        .pulse {
            width: 7px;
            height: 7px;

            border-radius: 50%;

            background: var(--fluo);

            box-shadow:
                0 0 7px var(--fluo),
                0 0 17px var(--hot);

            animation: pulse 2s infinite;
        }

        @keyframes pulse {
            0%,
            100% {
                opacity: .35;
                transform: scale(.8);
            }

            50% {
                opacity: 1;
                transform: scale(1.35);
            }
        }

        /*
         * ARQUITECTURA SVG
         */
        .architecture {
            position: relative;
       height: min(670px, calc(100vh - 80px));
            min-width: 0;
        }

        .architecture svg {
            position: absolute;
width: min(760px, 70vw, calc(100vh - 60px));
height: auto;

            max-width: 70vw;

            right: -130px;
            top: 50%;

            transform: translateY(-50%);

            overflow: visible;
        }

        /*
         * DATA / LISTING superpuestos
         */
        .architecture-text {
            font-weight: 800;
            font-size: 105px;

            letter-spacing: -.06em;

            fill: none;

            stroke: var(--hot);
            stroke-width: 1;
        }

        .architecture-text.layer-1 {
            opacity: .07;
            stroke: var(--deep);
        }

        .architecture-text.layer-2 {
            opacity: .15;
            stroke: var(--red);
        }

        .architecture-text.layer-3 {
            opacity: .30;
            stroke: var(--hot);
        }

        .architecture-text.layer-4 {
            opacity: .72;
            stroke: var(--fluo);

            filter:
                drop-shadow(0 0 4px rgba(255, 76, 0, .65));
        }

        /*
         * Líneas de conexión
         */
        .line {
            stroke: var(--hot);

            stroke-width: 1;

            opacity: .35;

            fill: none;

            stroke-dasharray: 5 8;

            filter:
                drop-shadow(0 0 3px rgba(255, 76, 0, .45));

            animation:
                moveLine 16s linear infinite;
        }

        /*
         * Algunas conexiones reciben más energía.
         */
        .line.hot {
            stroke: var(--fluo);

            opacity: .72;

            filter:
                drop-shadow(0 0 3px var(--hot))
                drop-shadow(0 0 8px rgba(255, 76, 0, .65));
        }

        @keyframes moveLine {
            to {
                stroke-dashoffset: -180;
            }
        }

        /*
         * Nodos normales
         */
        .node {
            fill: var(--background);

            stroke: var(--hot);
            stroke-width: 1.4;

            filter:
                drop-shadow(0 0 3px rgba(255, 76, 0, .45));
        }

        /*
         * Nodos calientes.
         * Centro claro + halo naranja.
         */
        .node-hot {
            fill: var(--light);

            stroke: var(--fluo);
            stroke-width: 1;

            filter:
                drop-shadow(0 0 3px var(--light))
                drop-shadow(0 0 7px var(--fluo))
                drop-shadow(0 0 14px var(--hot));
        }

        .tiny {
            fill: var(--fluo);

            font-size: 10px;
            letter-spacing: .18em;

            opacity: .64;
        }

        /*
         * Movimiento extremadamente sutil
         */
        .float {
            animation:
                floating 8s ease-in-out infinite;

            transform-origin: center;
        }

        .float.delay {
            animation-delay: -3s;
        }

        @keyframes floating {
            0%,
            100% {
                transform: translateY(0);
            }

            50% {
                transform: translateY(-9px);
            }
        }

        /*
         * Destello que recorre lentamente
         * una zona del gráfico.
         */
        .energy {
            fill: url(#energyGradient);

            opacity: .65;

            filter:
                blur(18px);

            animation:
                energyPulse 5s ease-in-out infinite;
        }

        @keyframes energyPulse {
            0%,
            100% {
                opacity: .25;
                transform: scale(.92);
            }

            50% {
                opacity: .72;
                transform: scale(1.08);
            }
        }

        .corner {
            position: fixed;

            right: 30px;
            bottom: 24px;

            font-size: 11px;
            letter-spacing: .15em;

            color: #45403d;
        }
/* ENTRADA SUAVE DE LA PORTADA */

.brand,
h1,
.description,
.concepts,
.status,
.contact-link {
    opacity: 0;
    transform: translateY(18px);
    animation: revealSoft .8s cubic-bezier(.22, 1, .36, 1) forwards;
}

.brand {
    animation-delay: .08s;
}

h1 {
    animation-delay: .18s;
}

.description {
    animation-delay: .28s;
}

.concepts {
    animation-delay: .38s;
}

.status {
    animation-delay: .48s;
}

.contact-link {
    animation-delay: .58s;
}

.architecture {
    opacity: 0;
    animation: revealArchitecture 1.1s cubic-bezier(.22, 1, .36, 1) .20s forwards;
}

@keyframes revealSoft {
    from {
        opacity: 0;
        transform: translateY(18px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes revealArchitecture {
    from {
        opacity: 0;
        transform: translateX(28px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .brand,
    h1,
    .description,
    .concepts,
    .status,
    .contact-link,
    .architecture {
        opacity: 1;
        transform: none;
        animation: none;
    }
}


/* ENTRADA SUAVE */

.brand,
h1,
.description,
.concepts,
.status,
.contact-link {
    opacity: 0;
    transform: translateY(18px);
    animation: entradaSuave .8s cubic-bezier(.22, 1, .36, 1) forwards;
}

.brand        { animation-delay: .08s; }
h1            { animation-delay: .18s; }
.description  { animation-delay: .28s; }
.concepts     { animation-delay: .38s; }
.status       { animation-delay: .48s; }
.contact-link { animation-delay: .58s; }

@keyframes entradaSuave {
    from {
        opacity: 0;
        transform: translateY(18px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}
        /*
         * RESPONSIVE
         */
       @media (max-width: 900px) {
.page {
    height: auto;
    min-height: 100vh;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    align-content: start;
    padding: 48px 24px 70px;
    overflow: visible;
}

    .content {
        z-index: 2;
        max-width: 100%;
    }

    .brand {
        margin-bottom: 28px;
    }

    h1 {
        font-size: clamp(42px, 12vw, 62px);
    }

    .description {
        max-width: 100%;
        margin-top: 28px;
        font-size: 17px;
    }

    .concepts {
        margin-top: 34px;
        gap: 14px;
    }

    .status {
        margin-top: 38px;
    }

    .architecture {
        position: relative;
        inset: auto;
        width: 100%;
        height: clamp(330px, 100vw, 500px);
        margin-top: 14px;
        opacity: 1;
        z-index: 1;
        overflow: visible;
    }

    .architecture svg {
        width: min(112vw, 560px);
        height: auto;
        max-width: none;
        right: auto;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
    }

    .corner {
        position: absolute;
        right: 18px;
        bottom: 18px;
    }

        }