body {
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: auto; /* Cambia esta línea */
}

#splash-screen {
    position: relative;
    height: 100%;
    overflow: hidden;
    padding-bottom: 48%; /* Añade esta línea */
}

/* Video de fondo */
#bg-video {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: -2;
    overflow: hidden;
}
#bg-video {
    object-fit: cover;
}

/* Malla sobre el video */
#video-overlay {
    background-image: url('malla.png');
    background-size: cover;
    z-index: -1;
}

/* Ventanas flotantes con personajes */
.hover-container {
    position: relative;
}

.img-thumbnail {
    border-radius: 15px;
    width: 100%;
    max-width: 720px;
	background-color: #00ffff2e;
    box-shadow: 0 -1px 2px 1px #ebfdff;
	border: solid 1px #363636;
    border-radius: 0.25rem;
    max-width: 100%;
    height: auto;
}


a[data-title]:hover img {
    filter: brightness(0.7);
}

a[data-title]:hover::after {
    content: attr(data-title);
    position: absolute;
    background-color: rgba(0, 0, 0, 0.6);
    color: white;
    padding: 5px;
    border-radius: 5px;
    font-weight: bold;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* Slider */
.slider-container {
    bottom: 6%; /* Aumenta el espacio entre el carrusel y los personajes */
    width: 100%;
	background-color: #000000ad;
}

.carousel-item img {
    height: 150px;
    margin: 0 10px; /* Aumenta la separación entre imágenes */
    transition: transform 0.3s; /* Agrega transición al cambiar el tamaño */
}

.carousel-item a:hover img {
    transform: scale(1.1); /* Aumenta el tamaño al hacer hover */
}

/* Aparecer título al hacer hover en las imágenes del carrusel */
.carousel-item a[data-title]:hover::after {
    content: attr(data-title);
    position: absolute;
    background-color: rgba(0, 0, 0, 0.6);
    color: white;
    padding: 5px;
    border-radius: 5px;
    font-weight: bold;
    top: 0; /* Cambia esta línea */
    left: 50%;
    transform: translate(-50%, -100%); /* Cambia esta línea */
}


/* Footer */
footer {
    background-color: #333;
    color: white;
    padding: 10px 0;
    position: absolute;
    bottom: 0;
    width: 100%;
}

.social-icons a {
    color: white;
    text-decoration: none;
}

.social-icons a:hover {
    color: #ccc;
    transition: color 0.3s;
}