@import url("https://fonts.googleapis.com/css2?family=Oxanium:wght@300;400;700&display=swap");

* { margin:0; padding:0; box-sizing:border-box; }

body {
    font-family: 'Oxanium', system-ui, sans-serif;
    background:#00151f;
    color:#e7f7ff;
    overflow-x:hidden;
}

/* --- Fondo Animado --- */
body::before {
    content:"";
    position:fixed;
    inset:0;
    background:
        radial-gradient(circle at 30% 20%, #0094d933, transparent),
        radial-gradient(circle at 80% 70%, #096e8033, transparent),
        linear-gradient(120deg,#0094d9,#007dab,#096e80,#002733);
    background-size:200% 200%;
    animation:moveBG 16s ease-in-out infinite;
    z-index:-3;
}

@keyframes moveBG {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}

/* Partículas */
#bg-particles {
    position:fixed;
    inset:0;
    z-index:-2;
    opacity:.35;
    pointer-events:none;
}

/* Layout */
.shell {
    max-width:1000px;
    margin:50px auto;
    padding:20px;
}

.header-neo {
    text-align:center;
    margin-bottom:40px;
}

.logo img {
    width:140px;
    filter:drop-shadow(0 0 12px #0094d9aa);
    transition:0.3s;
}

.logo img:hover {
    transform:scale(1.05) rotate(2deg);
}

/* Glitch */
.glitch {
    font-size:3.6rem;
    font-weight:700;
    color:#0094d9;
    text-shadow:0 0 12px #0094d9aa;
    position:relative;
}

.glitch::before,
.glitch::after {
    content:attr(data-text);
    position:absolute;
    inset:0;
    mix-blend-mode:screen;
    opacity:0.5;
    animation:glitch 2s infinite;
}

.glitch::before { left:2px; text-shadow:-2px 0 #007dab; }
.glitch::after  { left:-2px; text-shadow:-2px 0 #096e80; animation-direction:reverse; }

@keyframes glitch {
    0%{transform:translate(0)}
    20%{transform:translate(-2px,1px)}
    40%{transform:translate(3px,-1px)}
    60%{transform:translate(-1px,1px)}
    80%{transform:translate(1px,-2px)}
    100%{transform:translate(0)}
}

/* Paneles */
.grid {
    display:grid;
    grid-template-columns:1fr 320px;
    gap:24px;
}

.holo-panel {
    background:rgba(0,25,40,0.55);
    border:1px solid rgba(0,180,255,0.2);
    border-radius:14px;
    padding:20px;
    box-shadow:0 0 25px rgba(0,140,200,0.25);
    backdrop-filter:blur(10px);
    animation:fadeIn .6s ease forwards;
}

@keyframes fadeIn {
    from{opacity:0; transform:translateY(10px);}
    to{opacity:1; transform:translateY(0);}
}

.about h3,
.panel strong {
    color:#00baff;
    font-size:1.45rem;
    margin-bottom:10px;
}

/* Botones */
.links {
    margin-top:20px;
    display:flex;
    flex-direction:column;
    gap:14px;
}

.neon-btn {
    background:#007dabcc;
    padding:12px 16px;
    border-radius:12px;
    display:flex;
    align-items:center;
    gap:12px;
    text-decoration:none;
    color:white;
    font-weight:600;
    letter-spacing:.5px;
    border:1px solid #00baff55;
    transition:.25s;
    box-shadow:0 0 12px #0094d955 inset;
}

.neon-btn:hover {
    background:#0094d9;
    box-shadow:0 0 18px #0094d9;
    transform:translateY(-3px);
}

/* Footer */
footer {
    text-align:center;
    margin-top:45px;
    opacity:.75;
    font-size:.9rem;
}

/* Responsive */
@media(max-width:800px) {
    .grid { grid-template-columns:1fr; }
}