/* Contenedor principal de las tarjetas */
.card-container {
  display: flex;                            /* Flexbox para organizar tarjetas en fila */
  justify-content: center;                  /* Centra las tarjetas horizontalmente */
  gap: 20px;                               /* Espacio horizontal entre tarjetas */
  flex-wrap: wrap;                         /* Permite que las tarjetas pasen a otra fila en pantallas pequeñas */
  margin-bottom: 40px;                     /* Espacio inferior del contenedor */
}

/* Estilo individual de cada tarjeta */
.card {
  width: 250px;                            /* Ancho fijo para cada tarjeta */
  border-radius: 15px;                     /* Bordes redondeados */
  overflow: hidden;                        /* Recorta contenido que sobrepase bordes redondeados */
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); /* Sombra sutil */
  transition: transform 0.3s, box-shadow 0.3s; /* Transición suave al hacer hover */
  background-color: #ffffff;               /* Fondo blanco */
}

/* Efecto hover para la tarjeta */
.card:hover {
  transform: translateY(-10px);            /* Levanta la tarjeta 10px */
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.25); /* Sombra más marcada */
}

/* Imagen dentro de la tarjeta */
.card img {
  width: 100%;                            /* Imagen ocupa todo el ancho */
  height: 250px;                         /* Altura fija */
  object-fit: cover;                     /* La imagen cubre el área sin deformarse */
  display: block;                        /* Elimina espacio inferior indeseado */
}

/* Nombre o título dentro de la tarjeta */
.card .name {
  background-color: #007BFF;               /* Fondo azul */
  color: white;                           /* Texto blanco */
  text-align: center;                     /* Centrado del texto */
  padding: 12px;                          /* Espaciado interno */
  font-weight: bold;                      /* Texto en negrita */
  text-transform: uppercase;              /* Texto en mayúsculas */
  letter-spacing: 1px;                    /* Espacio entre letras */
}