/* Welcome text */
.hero-welcome {
    margin-left: 4rem;
    margin-bottom: 2rem;
}

/* Welcome (Mobile) */
@media (max-width: 768px) {
    .hero-welcome {
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 2rem;
        text-align: center;
    }
}

#reader-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    height: 50%;
    width: auto; /* altura proporcional al ancho */
    aspect-ratio: 1/1;
    transform: translate(-50%, -50%);
    border: 5px solid #0172ad;
    border-radius: 10px;
    box-shadow: 0 0 20px rgba(2, 154, 232, 0.5);
    pointer-events: none; /* deja pasar clics al video */
    animation: pulse 1.5s infinite;
}

@keyframes pulse {
    0% {
        box-shadow: 0 0 10px rgba(2, 154, 232, 0.3);
    }
    50% {
        box-shadow: 0 0 20px rgba(2, 154, 232, 0.7);
    }
    100% {
        box-shadow: 0 0 10px rgba(2, 154, 232, 0.3);
    }
}