/* =====================================================================
   PRIMER EQUIPO — mejoras de las tarjetas de jugador
   - Marco sutil (borde + sombra + esquinas redondeadas) sobre fondo claro
   - Degradado negro -> transparente (de abajo hacia arriba) para que el
     nombre y la posición se lean bien sobre cualquier foto
   Colores del club: azul --theme #042656, acento amarillo #fcd500
   ===================================================================== */

/* --- Marco de la imagen --- */
.team-section .our-club-payer-item .player-image {
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(4, 38, 86, 0.14);
  box-shadow: 0 8px 22px rgba(4, 38, 86, 0.14);
  background-color: #eef1f5; /* relleno suave para que no se vea full blanco */
  transition: box-shadow 0.4s ease, border-color 0.4s ease, transform 0.4s ease;
}

/* Imagen uniforme (mismo recorte vertical para todos, aunque la default
   tenga otra proporción). 5:6 = proporción de las fotos oficiales 750x900. */
.team-section .our-club-payer-item .player-image img {
  width: 100%;
  height: auto;
  aspect-ratio: 5 / 6;
  object-fit: cover;
  object-position: top center; /* prioriza la cara al recortar */
  display: block;
}

/* --- Degradado para legibilidad del nombre --- */
.team-section .our-club-payer-item .player-image::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 62%;
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.88) 0%,
    rgba(0, 0, 0, 0.55) 30%,
    rgba(0, 0, 0, 0) 100%
  );
  pointer-events: none;
  z-index: 1;
}

/* Número, nombre y stats SIEMPRE por encima del degradado */
.team-section .our-club-payer-item .player-image .number,
.team-section .our-club-payer-item .player-image .player-content,
.team-section .our-club-payer-item .player-image .content-item {
  z-index: 2;
}

/* --- Realce sutil al pasar el mouse (acento amarillo del club) --- */
.team-section .our-club-payer-item:hover .player-image {
  border-color: rgba(252, 213, 0, 0.9);
  box-shadow: 0 12px 30px rgba(4, 38, 86, 0.24);
  transform: translateY(-4px);
}