/* Contenedor principal de las tarjetas */
.access-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center; /* Centra las tarjetas cuando no llenan toda la fila */
  gap: 15px;               /* Espacio uniforme entre tarjetas (horizontal y vertical) */
  padding: 1rem;
  width: 100%;
  box-sizing: border-box;  /* Incluye padding en el cálculo del ancho */
}

/* Tarjeta base */
.access-card {
  background: #ffffff;
  border-radius: 14px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  padding: 60px 20px 30px;
  text-align: center;
  color: #212529;
  transition: transform 0.3s ease, box-shadow 0.3s ease;

  /* Flexbox flexible: tamaño base de 230px, puede crecer o encogerse */
  flex: 1 1 230px;
  min-width: 230px;   /* Mínimo antes de hacer salto de línea */
  max-width: 100%;    /* En móviles pequeños ocupa todo el ancho */

  display: flex;
  flex-direction: column;
  justify-content: start;
  position: relative;
}

/* Efecto hover */
.access-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15);
}

/* Ícono circular superior */
.icon-circle {
  position: absolute;
  top: -30px;
  left: 50%;
  transform: translateX(-50%);
  background: #ccc;
  color: #fff;
  border-radius: 50%;
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.7rem;
  transition: background 0.3s ease;
}

/* Colores personalizados para los íconos */
.color-1 .icon-circle { background: #007bff; }
.color-2 .icon-circle { background: #3b3634; }
.color-3 .icon-circle { background: #fd7e14; }
.color-4 .icon-circle { background: #6f42c1; }
.color-5 .icon-circle { background: #20c997; }

/* Responsive mejorado */
@media (max-width: 767px) {
  .access-card {
    flex: 1 1 calc(50% - 15px); /* 2 por fila con gap */
    min-width: auto;
  }
}

@media (max-width: 575px) {
  .access-card {
    flex: 1 1 100%; /* Una por fila */
    min-width: auto;
  }
}