:root {
    --color-neon: #ff0055;
    --color-texto: #1a1a1a;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body, html { width: 100%; height: 100%; overflow-x: hidden; background: #fff; font-family: 'Plus Jakarta Sans', sans-serif; }

#lienzo-interactivo { 
    width: 100vw; height: 100vh; position: relative; 
    display: flex; flex-direction: column; align-items: center; justify-content: center; 
}

#motor-vectorial { 
    position: absolute; width: 100%; height: 100%; 
    display: flex; justify-content: center; align-items: center; z-index: 5;
}

#dibujo-base { max-width: 100%; max-height: 100%; object-fit: contain; pointer-events: none; }

#nodos_interactivos { position: absolute; width: 100%; height: 100%; top: 0; left: 0; pointer-events: none; overflow: visible; }

#nodos_interactivos path {
    fill: none !important; stroke: var(--color-texto); stroke-width: 4px; stroke-linecap: round;
    opacity: 0.12; transition: all 0.4s ease; pointer-events: stroke;
}

#nodos_interactivos path.activo {
    opacity: 1; stroke: var(--color-neon); stroke-width: 6px;
    filter: drop-shadow(0 0 10px rgba(255, 0, 85, 0.8));
}

.nodo-enlace {
    position: fixed; z-index: 100; text-decoration: none; color: var(--color-texto);
    font-weight: 200; font-size: 0.75rem; letter-spacing: 0.25em; text-transform: uppercase;
    white-space: nowrap; opacity: 0; pointer-events: auto;
    transition: all 0.4s ease; transform: translate(15px, -50%);
}

#menu-vertical { display: none; }
#gl-canvas { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 150; pointer-events: none; }

/* SECCIÓN VERTICAL: JUSTIFICADO AL TOP Y ADAPTACIONES MÓVILES */
@media (max-width: 768px), (orientation: portrait) {
    
    /* --- 1. REGLAS ORIGINALES RECUPERADAS (NO TOCAR) --- */
    body, html { overflow-y: auto; height: auto; }
    #lienzo-interactivo { justify-content: flex-start; height: auto; min-height: 100vh; display: block; }
    #motor-vectorial { position: relative; width: 100%; height: auto; padding: 40px 0; z-index: 5; }
    #dibujo-base { width: 100%; height: auto; max-height: 50vh; }
    #nodos-navegacion { display: none !important; }
    
    #menu-vertical { display: flex; flex-direction: column; width: 100%; padding: 0 0 60px 0; position: relative; z-index: 200; }
    #menu-vertical a {
        display: block; padding: 20px 0; text-decoration: none; color: var(--color-texto);
        font-size: 1rem; letter-spacing: 0.3em; text-transform: uppercase;
        text-align: center; border-bottom: 1px solid rgba(0,0,0,0.05); font-weight: 200;
    }

    /* --- 2. NUEVAS REGLAS AISLADAS PARA ENLACES EXTERNOS --- */
    #escenario-parallax {
        position: relative;
        width: 100%;
        height: auto;
        top: 0; left: 0;
        transform: none !important; 
        background-position: top center;
        background-size: 100% auto; 
        background-repeat: no-repeat;
        display: flex;
        flex-direction: column;
        padding-top: 70vw; 
    }

    .red-neon, .zona-enlace svg { display: none; }

    .zona-enlace {
        position: relative;
        top: auto !important; left: auto !important;
        transform: none !important;
        width: 90%;
        height: 50px;
        margin: 0 auto;
        border-bottom: 1px solid rgba(255, 255, 255, 0.2); 
        display: flex;
        justify-content: flex-start;
        align-items: center;
    }

    .zona-enlace span {
        opacity: 1; 
        color: #fff;
        font-size: 0.8rem;
        text-shadow: none;
    }

    /* Transformamos el menú derecho flotante en el último enlace de la lista */
    .contenedor-nav {
        position: relative;
        top: auto; right: auto; transform: none;
        width: 90%;
        margin: 0 auto 40px auto;
        height: 50px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.2);
        display: flex;
        justify-content: flex-start;
    }
    
    .solido-interactivo { display: none; }
    .menu-radial { position: static; opacity: 1; pointer-events: auto; }
    .enlace-radial { position: static; }
    .enlace-radial span { font-size: 0.8rem; font-weight: 400; color: #fff; }
}