body {
     font-family: Arial, sans-serif;
            margin: 0;
            background-color: #f0f2f5; /* Un gris claro para el fondo general */
            color: #333; 
}

.prueba1 {
  display: grid;
  grid-template-columns: 1fr auto 1fr; /* tres columnas */
  align-items: center; /* centra verticalmente */
  position: relative;
  padding: 0.5rem;
  background: #333;
}

/* El botón a la izquierda */
.reper {
  grid-column: 1; /* primera columna */
  justify-self: start;
}
/* ahora a darle estilo al button */
.reper button {
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 8px;
    padding: 10px 20px;
    font-size: 1rem;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.2s ease;
    box-shadow: 0 4px rgba(0,0,0,0.2 );
}
.reper button:hover {
    background-color: #0056b3;
    transform: scale(1.05);
}
.reper a {
    text-decoration: none;
    color:  inherit;
}

/* El título centrado */
.titleone {
  grid-column: 2; /* columna central */
  text-align: center;
  margin: 0;
  font-size: 1.5rem;
}
/* estilo del titulo*/
.titleone {
    color: white;
    padding-top: 10px;
}

.prueba1 .reper button {
    background-color: #a09a9a;
    border-radius: 9px;
}

/* aqui le dimos fondo al segundo cuadro (div) una imagen de fondo*/
.sudti {
    background-color: #333;
    color: white;
    border-color: #f0f2f5;
     background-image: url(/img/Free\ Fire.jpeg) ;
     background-size:auto;
     background-repeat: no-repeat;
     background-position: center;
     padding-bottom: 10px;
}
/* estilo al segundo subtitulo*/
.sele {
    text-align: center;
    
   color: white;
     
}
/* estilo al segundo subtitulo*/
.selecc {
    text-align: center;
}

.formulario {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  max-width: 300px;
  /* Elimina centrado */
  margin-left: 0;
  margin-right: auto;
}

.formulario label {
  font-weight: bold;
  text-align: left;
}

.formulario input {
  padding: 0.5rem;
  border: 1px solid #ccc;
  border-radius: 6px;
  text-align: left;
}

/* para quitar como el contador que sale en el campo numerico que aumenta de 1 a 1 Para Chrome, Safari, Edge */
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
/* Aqui le vamos a dar estilo a las listas de recargas */

.listas {
    display: flex; /* pone las 2 columna al lado */
    justify-content: center; /* centra el contenido*/
    gap: 200px; /* lo separa una de la otra*/
    margin-top: 50px;
}

ul {
    list-style: none;
    padding: 0;
    margin: 0;
    text-align: center;
}
/* estilo a la lista y ubicasion de la imagen*/
ul li {
    display: flex;
    align-items: center;
    gap: 3px;
    background-color: #8d8787;
    border: 2px solid #ccc;
    border-radius: 8px;
    padding: 7px 22px;
    margin-bottom: 15px;
    cursor: pointer;
    transition: all 0.3s ease;
}
/*tamaño de la imagen de diamantees*/
.diamantes {
  width: 24px;                /* tamaño de la imagen */
  height: 24px;

}

ul li:hover {
  background-color: #007bff;  /* fondo al pasar el puntero */
  color: #fff;                /* texto blanco */
  border-color: #0056b3;      /* borde más oscuro */

}
/* boton para comprar*/
.Comprar {
 display: inline-block;
 background-color: #28a745;
 color: white;
 font-weight: bold;
 text-decoration: none;
 padding: 12px 24px;
 border-radius: 8px;
 box-shadow: 0 4px 8px rgba(0,0,0,0.2);
 transition: 0 4px 8px rgba(0,0,0,0.2) ;
 position: relative;
 right: 0;

}

.boton-comprar {
   text-align: right;
  margin-top: 30px;
  margin-right: 30px;

}

.Comprar:hover {
  background-color: #218838;       /* verde más oscuro al pasar el mouse */
  transform: scale(1.05);          /* efecto de agrandamiento sutil */
}