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);
    }
}



h3{
    text-align: center;
    text-shadow: 2px 3px 0px black;
    border-style:groove;
    border-radius: 5px;
    border-color: black;
    border-width: 6px;
    padding: 7px;
    background: linear-gradient(to right, rgb(196, 61, 126), rgb(234, 78, 190));
    background-repeat: no-repeat;
    background-attachment: fixed;
    font-family:
    system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    color:aliceblue;

    /*Duración a 1s */
    animation: 1s cubic-bezier(0.25, 1, 0.5, 1) 0s 1 running myFrameDash;
 display:block;
 position:relative
}
button{
     border-radius: 4px;
     border-width: 3px;
     border-color: black;
    background-color: rgb(14, 94, 232);
    margin-right: 50%; 
     color:
     rgb(255, 255, 255); 
     width: 150px; height: 45px;
     font-family: 'Courier New', Courier, monospace;
     font-weight: bold;
     text-shadow: 1px 2px 1px black;
      font-size: 90%;
      /* Duración a 1s y transiciones  */
      animation: 1s cubic-bezier(0.25, 1, 0.5, 1) 0s 1 running myFrameDash;
      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
}

#buttonSoport{
    border-radius: 2px;
     border-width: 2px;
     border-color: black;
    background: linear-gradient(rgb(199, 30, 30), rgb(67, 11, 11));
    margin-right: 50%; 
     color:
     rgb(255, 255, 255); 
     width: 150px; height: 45px;
     font-family: 'Courier New', Courier, monospace;
     font-weight: bold;
     text-shadow: 1px 2px 1px black;
      font-size: 115%;
      /* Duración a 1s */
      animation: 1s cubic-bezier(0.25, 1, 0.5, 1) 0s 1 running myFrameDash;
      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
}

#buttonIndex{
     border-radius: 5px;
     border-width: 4px;
     border-color: black;
    background-color: rgb(14, 232, 152);
     color:
     rgb(255, 255, 255); 
     width: 20vw;
     height: auto;
     padding: 14px 0px;
     min-width: 120px;
     max-width: 280px;
     display: inline-block;
     margin: 0;
     font-family: 'Courier New', Courier, monospace;
     font-weight: bold;
     text-shadow: 1px 2px 1px black;
      font-size: 1.2rem;
      /* Duración a 1s */
      animation: 1s cubic-bezier(0.25, 1, 0.5, 1) 0s 1 running myFrameDash;
      transition: transform 0.25s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.25s ease, filter 0.25s ease;
 position:relative
}

.contenedor-fila{
    display: flex;
    margin: 0 auto;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 15px;
    margin-bottom: 20px;
    width: fit-content;
}


.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, rgb(196, 61, 126), rgb(255, 127, 219));
    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;
    
    /* Duración a 1s */
    animation: 1s cubic-bezier(0.25, 1, 0.5, 1) 0s 1 running myFrameDash;
 display:block;
 position:relative
}
h2{
    text-align: center;
    text-shadow: 2px 3px 0px black;
    border-style:groove;
    border-radius: 5px;
    border-color: black;
    border-width: 6px;
    padding: 7px;
    background: linear-gradient(to right, rgb(196, 61, 126), rgb(234, 78, 190));
    background-repeat: no-repeat;
    background-attachment: fixed;
    font-family:
     'Times New Roman', Times, serif;
     color:aliceblue;
     
     /* Duración a 1s */
     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(rgb(255, 140, 230), rgb(147, 37, 190));
     border-radius: 11px;
     color:aliceblue;
     padding: 6px;
     text-shadow: 1px 1px 1px black;
     /* Duración a 1s */
     animation: 1s cubic-bezier(0.25, 1, 0.5, 1) 0s 1 running myFrameDash;
 display:block;
 position:relative
}


img{
     border-radius: 4px;
     border-width: 9px;
     padding: 14px;
      background-color: pink;
     border-color: black;
    height: 32vw;
    width: 32vw;
    min-width: 150px;
    min-height: 150px;
    max-width: 300px;
    max-height: 300px;
    object-fit: cover;
     /* Duración a 1s */
     animation: 1s cubic-bezier(0.25, 1, 0.5, 1) 0s 1 running myFrameDash;
     transition: transform 0.25s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.25s ease;
 display:block;
 position:relative
}

#libroInicio{
     border-radius: 4px;
     border-width: 5px;
     padding: 4px;
     background: linear-gradient(to right, rgb(187, 0, 255), rgb(0, 0, 0));
     border-color: black;
    height: auto;
    width: 55%;
    max-width: 600px;
     /*Duración a 1s */
     animation: 1s cubic-bezier(0.25, 1, 0.5, 1) 0s 1 running myFrameDash;
 display:block;
 position:relative
}

label{
    text-shadow: 2px 2px 0px black;
    font-family: 'Times New Roman', Times, serif;
     color:aliceblue;
}

#boxMain{
     position:-webkit-sticky;
     position:sticky;
     top:0px;
    left:0px;
    z-index: 100;
    border: 4px solid;
    height: 34px;
    width: 80px;
    padding: 5px;
    background: linear-gradient(rgb(255, 213, 74), rgb(188, 0, 75));

    /*Duración a 1s */
    animation: 1s cubic-bezier(0.25, 1, 0.5, 1) 0s 1 running myFrameDash;
 animation-fill-mode: forwards;
}

#boxBook{
    position:-webkit-sticky;
     position:sticky;
     top:0px;
    left:0px;
    z-index: 100;
    border: 4px solid;
    height: 46px;
    width: 98px;
    padding: 5px;
    background: linear-gradient(to top,rgb(145, 67, 208), rgb(188, 0, 75));

    /* Duración a 1s */
    animation: 1s cubic-bezier(0.25, 1, 0.5, 1) 0s 1 running myFrameDash;
 animation-fill-mode: forwards;
}
a:hover{
    color: beige;
}

/*SECCIÓN DE INTERACCIÓN HOVER Y ACTIVE*/
button:hover{
    color: rgb(255, 255, 255);
    box-shadow: 0px 8px 16px rgba(243, 163, 26, 0.45);
    transform: translateY(-8px); /* elevar  */
    filter: brightness(1.1);
}
button:active{
    color: rgb(255, 255, 255);
    box-shadow: 0px 3px 6px rgba(13, 209, 65, 0.4);
    transform: translateY(7px);
}
img:hover{
    color:rgb(255, 255, 255);
    box-shadow: 0px 12px 24px rgba(243, 163, 26, 0.5);
    transform: scale(1.08); /* Se agranda un 4% al pasar el mouse */
}
img:active{
    color: rgb(255, 255, 255);
    box-shadow: 0px 4px 10px rgba(13, 209, 65, 0.5);
    transform: scale(0.98);
}

/* DISTANCIA DE ANIMACIÓN PARA MARCAR EL EFECTO */
@keyframes myFrameDash{
    from{
        transform: translate3d(200px, 0, 0); /* Empieza desde más lejos para que el viaje dure 1s bien marcado */
        opacity: 0;
    }
    to{
        transform: translate3d(0, 0, 0);
        opacity: 1;
    }
}

h4{
    text-align: center;
    text-shadow: 2px 2px 0px black;
    border-style:groove;
    border-radius: 5px;
    border-color: black;
    border-width: 6px;
    padding: 7px;
    background: linear-gradient(to right, rgb(253, 0, 0), rgb(255, 204, 18));
    background-repeat: no-repeat;
    background-attachment: fixed;
    font-family:
    system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    color:aliceblue;

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