body{
    margin: 0;
    padding: 0;
    overflow-x: hidden; /* Evita que aparezca una barra de navegación horizontal */
}

body::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    /* Crea una capa un poco más grande para tener margen de movimiento */
    width: 200%;
    height: 100%;
    
    /* fondo original para el movimiento continuo */
    background-image: url(/imagenes/capibarasbground.png);
    background-repeat: repeat; /*repeat para que no se acabe la imagen */
    background-attachment: fixed;
    background-position: center;
    background-size: cover;
    
    /* mandarlo al fondo y preparar la GPU */
    z-index: -1;
    will-change: transform;
    
    /* animacion: */
    /* 40s para una velocidad suave y relajante */
    animation: moverFondoContinuo 40s linear infinite; 
}

/* animacion: */
@keyframes moverFondoContinuo {
    from {
        /* translate3d para activar la aceleración por hardware sin lag */
        transform: translate3d(0, 0, 0);
    }
    to {
        /* Se desplaza hacia la izquierda. Al llegar a -50% el ciclo se reinicia de forma invisible */
        transform: translate3d(-50%, 0, 0);
    }
}

a {
    transition: color 0.25s ease;
}

a:hover{
    color: beige;
}

/*DURACIÓN DE 1s */
@keyframes myFrameDash{
    from{
        /* Empieza desde 200px y usa aceleración de hardware (3D) */
        transform: translate3d(200px, 0, 0); 
        opacity: 0;
    }
    to{
        transform: translate3d(0, 0, 0);
        opacity: 1;
    }
}


/* interaccion: */
body.bloquear-scroll {
    overflow: hidden !important;
    touch-action: none !important; /* Bloquea gestos táctiles en móviles */
    -ms-touch-action: none !important;
}