#mantenimientoIMG{
    margin: 0 auto;
    height: auto;
    width: 90%;
    background: none;
    max-width: 600px;
    /* animacion: */
    animation: 1s cubic-bezier(0.25, 1, 0.5, 1) 0s 1 running myFrameDash;
    /* interaccion: */
    transition: transform 0.25s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.25s ease;
 display:block;
 position:relative
}

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/backgRey.avif);
    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);
    }
}


#mantenimientoButton{
    border-radius: 9px;
     border-width: 4px;
     border-color: black;
    background: linear-gradient(blue, darkblue);
    margin-right: 50%; 
     color:
     rgb(255, 255, 255); 
     width: 150px; height: 56px;
      font-family:fantasy;
      font-size: 90%;
      /* animacion: */
      animation: 1s cubic-bezier(0.25, 1, 0.5, 1) 0s 1 running myFrameDash;
      /* interaccion: */
      transition: transform 0.25s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.25s ease, filter 0.25s ease;
 display:block;
 position:relative
}

.parent{
    display: flex;
    justify-content: center;
    width: 100%;
}

h1{
    text-align: center;
    box-shadow: 3px 3px 3px gray;
    text-shadow: 2px 3px 0px black;
    border-style:groove;
    border-radius: 5px;
    border-color: black;
    border-width: 6px;
    padding: 10px;
    background: linear-gradient(to right, rgba(255, 196, 0, 0.779), rgba(255, 122, 40, 0.628));
    background-repeat: no-repeat;
    background-attachment: fixed;
    font-family:Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
    font-size: 34px;
    font-style: italic;
    color:aliceblue;
    
    /* animacion: */
    animation: 1s cubic-bezier(0.25, 1, 0.5, 1) 0s 1 running myFrameDash;
 display:block;
 position:relative
}

p{
    font-family: 'Times New Roman', Times, serif;
     font-size: 1.2rem; line-height: 1.6;
     border-style: outset;
     border-width: 3px;
     border-color: black;
     background: linear-gradient(to right, rgb(95, 5, 37), rgb(147, 37, 190));
    background-repeat: no-repeat;
    background-attachment: fixed;
     border-radius: 11px;
     color:aliceblue;
     padding: 14px;

     /* animacion: */
     animation: 1s cubic-bezier(0.25, 1, 0.5, 1) 0s 1 running myFrameDash;
 display:block;
 position:relative
}

/* interaccion: */
button:hover{
    color: rgb(255, 255, 255);
    box-shadow: 0px 8px 4px rgba(243, 163, 26, 0.5);
    transform: translateY(-8px);
    filter: brightness(1.3);
}
button:active{
    color: rgb(255, 255, 255);
    box-shadow: 0px 3px 2px rgba(13, 209, 65, 0.5);
    transform: translateY(6px);
}

/* interaccion: */
#mantenimientoIMG:hover{
    transform: scale(1.03);
}

/* animacion: */
@keyframes myFrameDash{
    from{
        transform: translate3d(200px, 0, 0); 
        opacity: 0;
    }
    to{
        transform: translate3d(0, 0, 0);
        opacity: 1;
    }
}