@charset "utf-8";
/* CSS Document */
body {
  font-family: Arial, sans-serif, Gotham, "Helvetica Neue", Helvetica;
  font-size: 12px;
  margin: 0;
  padding: 0;
}

#index_old {
  background: linear-gradient(purple, orange, pink);
  /* 
	background: linear-gradient(orange, blue, pink);
	
	background: -webkit-linear-gradient(#A9A9A9, #000);
    background: -o-linear-gradient(#A9A9A9, #000); 
    background: -moz-linear-gradient(#A9A9A9,#000); 
    background: linear-gradient(#A9A9A9, #000); */
}

#index {
  /*background: linear-gradient(-25deg, purple, #1fc396, #8b1af5, #fa5c1c); */
  background: linear-gradient(-25deg, purple, #fa5c1c, #8b1af5, purple);
  background-size: 400% 400%;
  animation: indexgradient 45s ease infinite;
  /* height: 100vh; */
}

@keyframes indexgradient {
  0% {
    background-position: 0% 50%;
  }
  25% {
    background-position: 100% 50%;
  }
  50% {
    background-position: 50% 50%;
  }
  75% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

#libro1 {
  /*
    background: linear-gradient(orange, #FFB347, #F7BE6D );
	height:100%;
	*/

  background: linear-gradient(-25deg, orange, #f57644, #f0ba32, #f79915);
  background-size: 400% 400%;
  animation: indexgradient 45s ease infinite;
  /*
	background: linear-gradient(#F05E16, #FFB347, white);
	background-color: orange;
	 
	background: -webkit-linear-gradient(#9CCEF3, #03A5E3);  For Safari 5.1 to 6.0 
    background: -o-linear-gradient(#9CCEF3, #03A5E3);  For Opera 11.1 to 12.0 
    background: -moz-linear-gradient(#9CCEF3,#03A5E3);  For Firefox 3.6 to 15 
    background: linear-gradient(#9CCEF3, #03A5E3);  Standard syntax */
}
#libro2 {
  background: linear-gradient(-25deg, green, #0bd104, #bbe666, #ceee41);
  background-size: 400% 400%;
  animation: indexgradient 45s ease infinite;
}
#libro3 {
  background: linear-gradient(-25deg, blue, #4fa2f0, #9115f7, #53bcec);
  background-size: 400% 400%;
  animation: indexgradient 45s ease infinite;
}
#libro4 {
  background: linear-gradient(-25deg, yellow, orange, #f0ba32, #f79915);
  background-size: 400% 400%;
  animation: indexgradient 45s ease infinite;
}
#libro5 {
  background: linear-gradient(-25deg, red, #be1010, #ec3616, #ec5f5f);
  background-size: 400% 400%;
  animation: indexgradient 45s ease infinite;
}
#libro6 {
  background: linear-gradient(-25deg, purple, #c230b1, #f0329a, #f715a0);
  background-size: 400% 400%;
  animation: indexgradient 45s ease infinite;
}
a.audio {
  text-decoration: none;
  color: #f3f900;
  /* margin:0 30px; */
  margin: 10px 30px;
}
a.letraG {
  text-decoration: none;
  color: #f3f900;
  margin: 0 30px;
  font-size: 24px;
}
nav {
  clear: both;
  float: left;
  overflow: hidden;
  width: 100%;
}
ul {
  float: left;
  left: 50%;
  list-style-type: none;
  margin: 0 auto;
  padding: 0;
  position: relative;
}
li {
  float: left;
  position: relative;
  right: 50%;
  padding: 10px 20px;
}
li a {
  color: #ffef54;
  text-decoration: none;
  font-size: 14px;
  font-weight: bold;
}
/************* LOGIN ***************/
.post {
  margin: 0 auto;
  padding-bottom: 50px;
  float: left;
  width: 960px;
}
.btn-sign {
  width: 460px;
  margin-bottom: 20px;
  margin: 0 auto;
  padding: 20px;
  border-radius: 5px;
  background: -moz-linear-gradient(center top, #00c6ff, #018eb6);
  background: -webkit-gradient(
    linear,
    left top,
    left bottom,
    from(#00c6ff),
    to(#018eb6)
  );
  background: -o-linear-gradient(top, #00c6ff, #018eb6);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#00c6ff', EndColorStr='#018eb6');
  text-align: center;
  font-size: 36px;
  color: #fff;
  text-transform: uppercase;
}
.btn-sign a {
  color: #fff;
  text-shadow: 0 1px 2px #161616;
}
#mask {
  display: none;
  background: #000;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 10;
  width: 100%;
  height: 100%;
  opacity: 0.8;
  z-index: 999;
}

.login-popup {
  display: none;
  background: #333;
  padding: 10px;
  border: 2px solid #ddd;
  float: left;
  font-size: 1.2em;
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: 99999;
  box-shadow: 0px 0px 20px #999;
  -moz-box-shadow: 0px 0px 20px #999; /* Firefox */
  -webkit-box-shadow: 0px 0px 20px #999; /* Safari, Chrome */
  border-radius: 3px 3px 3px 3px;
  -moz-border-radius: 3px; /* Firefox */
  -webkit-border-radius: 3px; /* Safari, Chrome */
}
img.btn_close {
  float: right;
  margin: -28px -28px 0 0;
}
fieldset {
  border: none;
}

form.signin .textbox label {
  display: block;
  padding-bottom: 7px;
}

form.signin .textbox span {
  display: block;
}

form.signin p,
form.signin span {
  color: #999;
  font-size: 11px;
  line-height: 18px;
}

form.signin .textbox input {
  background: #666666;
  border-bottom: 1px solid #333;
  border-left: 1px solid #000;
  border-right: 1px solid #333;
  border-top: 1px solid #000;
  color: #fff;
  border-radius: 3px 3px 3px 3px;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  font: 13px Arial, Helvetica, sans-serif;
  padding: 6px 6px 4px;
  width: 200px;
}

form.signin input:-moz-placeholder {
  color: #bbb;
  text-shadow: 0 0 2px #000;
}
form.signin input::-webkit-input-placeholder {
  color: #bbb;
  text-shadow: 0 0 2px #000;
}

.button {
  background: -moz-linear-gradient(center top, #f3f3f3, #dddddd);
  background: -webkit-gradient(
    linear,
    left top,
    left bottom,
    from(#f3f3f3),
    to(#dddddd)
  );
  background: -o-linear-gradient(top, #f3f3f3, #dddddd);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#f3f3f3', EndColorStr='#dddddd');
  border-color: #000;
  border-width: 1px;
  border-radius: 4px 4px 4px 4px;
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
  color: #333;
  cursor: pointer;
  display: inline-block;
  padding: 6px 6px 4px;
  margin-top: 10px;
  font: 12px;
  width: 214px;
}

.button:hover {
  background: #ddd;
}
.login-window {
  text-decoration: none;
  color: #f3f900;
  font-size: 24px;
}
.blanco {
  font-family: Gill Sans, Gill Sans MT, Myriad Pro, DejaVu Sans Condensed,
    Helvetica, Arial, " sans-serif";
  font-size: 12px;
  color: #fff;
}

/******************************/

.change-popup {
  display: none;
  background: #333;
  padding: 10px;
  border: 2px solid #ddd;
  float: left;
  font-size: 1.2em;
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: 99999;
  box-shadow: 0px 0px 20px #999;
  -moz-box-shadow: 0px 0px 20px #999; /* Firefox */
  -webkit-box-shadow: 0px 0px 20px #999; /* Safari, Chrome */
  border-radius: 3px 3px 3px 3px;
  -moz-border-radius: 3px; /* Firefox */
  -webkit-border-radius: 3px; /* Safari, Chrome */
}

.change-window {
  text-decoration: none;
  color: #f3f900;
  font-size: 16px;
}

/*******************************/

.books-row{
  display:flex;            /* pone los .cover en fila */
  justify-content:center;  /* centra toda la fila */
  gap:15px;                /* separación entre portadas */
  flex-wrap:wrap;          /* opcional: los baja a otra línea si no cabe */
}

.cover{
  display:flex;
  flex-direction:column;   /* pila vertical */
  align-items:center;      /* centra imagen y botón */
  /* margin:0 20px; */           /* separación lateral entre libros */
}

.cover img{                 /* opcional: quita el mb-1 si usas Bootstrap */
  display:block;
}

/* Si quieres que el propio botón ocupe todo el ancho de la imagen: */
.cover1 button{
  width:100%;
}