/* --- Reset --- */
body, html {
    margin: 0;
    padding: 0;
    height: 100%;
    width: 100%;
    overflow: hidden;
    background-color: #000; /* Fondo negro para los bordes sobrantes */
}

/* --- Contenedor Principal --- */
.contenedor-principal {
    position: relative;
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center; /* Centra el botón perfectamente */
}

/* --- Capa 1: El Fondo --- */
.imagen-fondo {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain; /* Muestra toda la imagen sin recortar */
    object-position: center; /* Mantiene el centro de la imagen en el centro de la pantalla */
    z-index: 1; /* Atrás */
}

/* --- Capa 2: El Botón de Imagen --- */
.boton-esfera {
    position: relative;
    z-index: 2; /* Adelante */
    background: transparent;
    border: none;
    padding: 0;
    cursor: pointer;
    transition: transform 0.3s ease, filter 0.3s ease;
    animation: float 4s ease-in-out infinite; 
}

/* Ajuste del tamaño del botón */
.boton-esfera img {
    width: 35vh; /* Ajusta este valor numérico si necesitas cambiar el tamaño */
    height: auto;
    display: block;
}

.boton-esfera:hover {
    transform: scale(1.05); 
    filter: drop-shadow(0 0 25px rgba(255, 215, 0, 0.8)); 
}

@keyframes float {
    0% { transform: translateY(0px); }
    50% { transform: translateY(-10px); }
    100% { transform: translateY(0px); }
}

/* --- Transición de Flash Blanco --- */
#transition-overlay {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    pointer-events: none; z-index: 100;
    display: flex; justify-content: center; align-items: center;
}
.implosion-flash {
    position: absolute; width: 100vmax; height: 100vmax;
    background-color: white; border-radius: 50%;
    transform: scale(0); opacity: 0;
    transition: transform 1.5s cubic-bezier(0.55, 0, 0.1, 1), opacity 1.2s ease-in;
}
#transition-overlay.active .implosion-flash {
    transform: scale(1); opacity: 1;
}