/* ========== ESCENARIO HOLOGRÁFICO ========== */
.holo-hero { position: relative; min-height: 100vh; overflow: hidden; }
#holo-stage { position: absolute; inset: 0; cursor: grab; touch-action: pan-y; }
#holo-stage:active { cursor: grabbing; }

/* Scanlines + viñeta CRT */
.holo-hero::after {
    content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 4;
    background:
        repeating-linear-gradient(0deg, rgba(255,255,255,.025) 0 1px, transparent 1px 3px),
        radial-gradient(ellipse at center, transparent 55%, rgba(0,0,0,.6) 100%);
}

/* ========== HUD ========== */
.hud { position: absolute; inset: 0; z-index: 6; pointer-events: none; font-family: 'Share Tech Mono', monospace; }

.hud-panel {
    position: absolute; padding: 1rem 1.4rem;
    background: rgba(0, 18, 28, .55); backdrop-filter: blur(8px);
    border: 1px solid rgba(0, 242, 254, .35);
    clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 18px 100%, 0 calc(100% - 18px));
    animation: hudFlicker 6s infinite;
}
.hud-tl { top: 90px; left: 24px; }
.hud-tr { top: 90px; right: 24px; text-align: right; }
.hud-bl { bottom: 24px; left: 24px; }

.hud-panel h3 { color: #00f2fe; font-size: 1.1rem; letter-spacing: .15em; }
.ver { color: #ff2ec4; font-size: .75rem; }
.status { color: #7dffb2; font-size: .8rem; margin-top: .3rem; }
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%;
       background: #7dffb2; box-shadow: 0 0 10px #7dffb2; animation: pulseDot 1s infinite; }

.metric { color: var(--text-secondary); font-size: .85rem; margin: .25rem 0; }
.metric b { color: #00f2fe; font-size: 1rem; text-shadow: 0 0 12px rgba(0,242,254,.7); }

#ecg { display: block; margin-bottom: .5rem; filter: drop-shadow(0 0 6px #00f2fe); }

/* Controles */
.hud-controls {
    position: absolute; bottom: 28px; left: 50%; transform: translateX(-50%);
    display: flex; gap: 1rem; align-items: center; pointer-events: auto;
}
.hud-btn {
    font-family: inherit; letter-spacing: .12em; cursor: pointer;
    background: linear-gradient(90deg, rgba(0,242,254,.15), rgba(255,46,196,.15));
    color: #00f2fe; border: 1px solid #00f2fe; padding: .8rem 2rem;
    clip-path: polygon(12px 0, 100% 0, calc(100% - 12px) 100%, 0 100%);
    transition: all .3s ease;
}
.hud-btn:hover { background: #00f2fe; color: #001018; box-shadow: 0 0 30px rgba(0,242,254,.8); }
.scan-label { color: #ff2ec4; font-size: .8rem; letter-spacing: .1em; }
body.scan-active .scan-label { color: #7dffb2; text-shadow: 0 0 10px #7dffb2; }

/* ========== COPY + GLITCH ========== */
.hero-copy { position: absolute; z-index: 5; top: 50%; transform: translateY(-50%);
             left: clamp(1rem, 6vw, 6rem); max-width: 560px; }
.hero-copy h1 { font-size: clamp(2rem, 5vw, 3.8rem); }
.hero-copy h2 { font-size: clamp(1.6rem, 4vw, 3rem); margin: .5rem 0 1.2rem; }

.glitch { position: relative; }
.glitch::before, .glitch::after {
    content: attr(data-text); position: absolute; inset: 0; overflow: hidden;
}
.glitch::before { color: #00f2fe; clip-path: inset(20% 0 60% 0);
    animation: glitchShift 3s infinite linear alternate-reverse; opacity: .8; }
.glitch::after { color: #ff2ec4; clip-path: inset(60% 0 10% 0);
    animation: glitchShift 2.3s infinite linear alternate; opacity: .8; }

@keyframes glitchShift {
    0% { transform: translate(0); } 20% { transform: translate(-3px, 2px); }
    40% { transform: translate(3px, -1px); } 60% { transform: translate(-2px, -2px); }
    80% { transform: translate(2px, 2px); } 100% { transform: translate(0); }
}
@keyframes pulseDot { 50% { opacity: .3; } }
@keyframes hudFlicker {
    0%, 100% { opacity: 1; } 92% { opacity: 1; } 93% { opacity: .6; } 94% { opacity: 1; }
}

@media (max-width: 900px) {
    .hud-tr { display: none; }
    .hero-copy { top: auto; bottom: 18%; transform: none; left: 1rem; right: 1rem; text-align: center; }
    .hud-bl { transform: scale(.8); transform-origin: bottom left; }
}