/* --- ESTILOS GENERALES --- */
html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden; /* ESTO ES LA CLAVE: Mata el scroll vertical y horizontal */
    background-color: #000000;
    font-family: sans-serif;
}
h1 {
    color: white;
    font-size: 30px;
    font-family: "Sans-Serif";
}

h3 {
    color: white;
    font-size: 60px;
    background: linear-gradient(to bottom, white, #5C5C5C);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* FUENTES */
.nosifer-regular {
    font-family: "Nosifer", sans-serif;
    font-weight: 400;
    font-style: normal;
}

.slackey-regular {
    font-family: "Slackey", sans-serif;
    font-weight: 400;
    font-style: normal;
}

/* ENLACES */
a {
    text-decoration: none;
    color: white;
}

a:visited {
    color: #DE9696;
}

a:hover h1 {
    font-family: "Nosifer", sans-serif;
    color: #0f2eb6;
}

h2 {
    color: red;
    font-size: 70px;
    background: linear-gradient(to bottom, red, #3D080E);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-top: 20px;
}

/* TABLA Y FORMULARIOS */
table {
    width: 100%;
    position: relative; /* Necesario para que el z-index funcione */
    z-index: 100;       /* Un número alto para que esté encima de todo */
    
    /* Tus estilos originales de la tabla: */
    border: 3px solid white;
    border-radius: 10px;
    background: linear-gradient(to bottom, #A31525, #3D080E);
}

/* --- AQUÍ ESTABA EL ERROR: ESTILOS DEL FONDO --- */
/* (Ahora están fuera de las llaves del body) */

#bubble-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1; /* Al fondo */
    overflow:hidden;
}

.bubble {
    position: absolute;
    /* AQUI ESTÁ EL TRUCO: Forzamos un tamaño pequeño */
    width: 40px; 
    height: auto;
    opacity: 0.6;
    border-radius: 50%; /* Por si la imagen no es perfectamente redonda */
}

/* --- CAPA SUPERIOR (CONTENIDO) --- */
/* Creamos una clase para asegurar que tu tabla y logo estén al frente */
.contenido-frontal {
    position: relative;
    z-index: 10;
}

/* Regla específica para imágenes de contenido, no las burbujas */
.contenido-frontal img {
    z-index: 10;
}

.marco-central {
    position: absolute; /* Nos permite moverlo libremente */
    top: 50%;           /* Bajar al 50% de la pantalla */
    left: 50%;          /* Mover al 50% a la derecha */
    transform: translate(-50%, -50%); /* El truco mágico para centrarlo exacto */
    
    background: linear-gradient(to bottom, #A31525, #3D080E); /* Fondo Rojo Degradado */
    border: 3px solid white; /* Borde blanco */
    border-radius: 20px;     /* Bordes redondeados */
    padding: 20px;           /* Espacio interior */
    box-shadow: 0px 0px 20px rgba(0,0,0,0.8); /* Sombra para que flote */
    
    z-index: 100; /* Asegura que esté ENCIMA de las burbujas */
    
    /* Ajusta el ancho según necesites */
    width: 80%; 
    max-width: 900px; 
}

/* Asegura que la tabla dentro del marco no tenga bordes feos extra */
.marco-central table {
    background: transparent;
    border: none;
}