@import url('https://fonts.googleapis.com/css2?family=Share+Tech+Mono&display=swap');




#matrix-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1; /* El canvas se mantiene al fondo */
}

.neon-containers {
    /* 1. Las reglas clave para centrar exactamente en medio de la pantalla */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    
    /* 2. Mantenerlo por encima del fondo Matrix */
    z-index: 10;
    
    /* 3. Tus estilos de diseño neón */
    text-align: center;
    background: rgba(0, 0, 0, 0.6);
    padding: 3rem 4rem;
    border-radius: 15px;
    border: 1px solid rgba(0, 255, 0, 0.2);
    box-shadow: 0 0 20px rgba(0, 255, 0, 0.1);
    backdrop-filter: blur(4px);
    width: 90%; /* Evita que desborde en móviles */
    max-width: 600px; /* Tamaño máximo en PC */
}
.neon-title {
    color: #fff;
    font-size: 3.5rem;
    margin-bottom: 1rem;
    text-shadow: 
        0 0 5px #fff,
        0 0 10px #fff,
        0 0 20px #0ff,
        0 0 40px #0ff,
        0 0 80px #0ff; /* Resplandor Cian */
}

.neon-subtitle {
    color: #0f0;
    font-size: 2.5rem;
    letter-spacing: 4px;
    margin-bottom: 1rem;
    text-shadow: 
        0 0 5px #0f0,
        0 0 10px #0f0,
        0 0 20px #0f0,
        0 0 40px #02a302; /* Resplandor Verde */
    animation: parpadeo 2s infinite alternate;
}

.neon-text {
    color: #aaffaa;
    font-size: 1.2rem;
    letter-spacing: 2px;
}

/* Animación realista de tubo de neón defectuoso */
@keyframes parpadeo {
    0%, 18%, 22%, 25%, 53%, 57%, 100% {
        opacity: 1;
        text-shadow: 
            0 0 5px #0f0,
            0 0 10px #0f0,
            0 0 20px #0f0,
            0 0 40px #02a302;
    }
    20%, 24%, 55% {
        opacity: 0.5;
        text-shadow: none;
    }
}

/* Ajustes responsivos para móviles */
@media (max-width: 768px) {
    .neon-containers {
        padding: 2rem;
        width: 90%;
    }
    .neon-title { font-size: 2.2rem; }
    .neon-subtitle { font-size: 1.8rem; }
    .neon-text { font-size: 1rem; }
}