.campo {
  background-image: url("../imagenes/Campo.jpg"); /* Fondo con imagen del campo de fútbol */
  background-size: cover; /* Hace que la imagen cubra todo el área del div */
  background-repeat: no-repeat; /* No repite la imagen */
  background-position: center; /* Centra la imagen */
  border: 4px solid #006400; /* Borde verde oscuro */
  border-radius: 10px; /* Bordes redondeados */
  flex-grow: 1; /* Que ocupe el espacio restante */
  max-width: 450px; /* o lo que necesites */
  height: 630px; /* Alto fijo del campo */
  flex-shrink: 0; /* Evita que se reduzca en pantallas pequeñas */
  position:relative; /*para que el enlace se posicione dentro de él correctamente*/
}

.jugadores {
  position: relative; /* Punto de referencia para que los botones se posicionen dentro de este contenedor */
  width: 100%;
  height: 100%;
}

.jugador {
  position: absolute; /* Posición absoluta dentro de .jugadores */
  background: none; /* Sin fondo */
  border:none;
  cursor: pointer; /* Cambia el cursor al pasar por encima */
  padding: 0; /* Sin espacio interno */
}

.jugador img { /* Tamaño de la imagen */
  width: 70px;
  height: 70px;
}

.jugador:hover img {
  transform: scale(1.1);       /* Aumenta ligeramente el tamaño */
  filter: brightness(1.2);     /* Aumenta el brillo */
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3); /* Sombra alrededor del jugador */
  transition: all 0.3s ease;   /* Transición suave */
}

.suplentes-link {
  position: absolute; /*posiciona el enlace respecto del contenedor más cercano (campo)*/
  top: 50px; /*Separa el enlace 50 píxeles del borde superior del contenedor.*/
  right: 35px; /*Coloca el enlace a 35 píxeles del borde derecho del contenedor.*/
  text-decoration: underline; /*subrayado del enlace*/
  color: #00008B; /* Azul oscuro */
  font-weight: bold; /*enlace en negrita*/
  padding: 5px 10px; /*añade espacio interno*/
  z-index: 10; /* Coloca el enlace por encima de otros elementos si hay superposición.*/
  font-size: 16px; /*tamaño letra*/
}

.suplentes-link:active {
  transform: scale(0.95); /* Efecto de "pulsado" */
  color: #0000CD; /* Azul un poco más claro momentáneamente */
}