.af-stores {
  padding: 32px 0 40px;
  background: var(--af-bg-page);
}

/* cabecera: título + enlace */

.af-stores-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 20px;
}

.af-stores-title {
  margin: 0;
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--af-text-main);
}

.af-stores-link {
  font-size: 0.9rem;
  color: var(--af-secondary);
  text-decoration: none;
  cursor: pointer;
}

.af-stores-link:hover {
  text-decoration: underline;
}

/* GRID DE TARJETAS */

.af-stores-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

/* TARJETA */

.af-store-card {
  background: #ffffff;
  border-radius: 24px;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
  overflow: hidden;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

/* si sigues usando .af-store-card-link no pasa nada, pero ya no es obligatorio */
.af-store-card-link {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  height: 100%;
}

/* hover tarjeta */

.af-store-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 32px rgba(15, 23, 42, 0.18);
}

/* parte superior coloreada */

.af-store-card-top {
  position: relative;
  height: 110px;
  border-radius: 24px 24px 0 0;
  overflow: hidden;
}

/* colores por tienda */

.af-store-card-top--blue {
  background: #3763ff;
}

.af-store-card-top--orange {
  background: #ff7a1a;
}

.af-store-card-top--green {
  background: #00c29a;
}

/* textura opcional */

.af-store-card-top::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.16;
  background-image:
    radial-gradient(circle at 10% 20%, #fff 2px, transparent 2px),
    radial-gradient(circle at 80% 30%, #fff 2px, transparent 2px),
    radial-gradient(circle at 30% 80%, #fff 2px, transparent 2px);
  background-size: 60px 60px;
}

/* logo circular rompiendo entre color y blanco */

.af-store-logo-wrap {
  position: absolute;
  left: 24px;
  bottom: -26px;
  width: 64px;
  height: 64px;
  border-radius: 999px;
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.15);
}

.af-store-logo {
  width: 52px;
  height: 52px;
  border-radius: 999px;
  object-fit: cover;
}

/* parte inferior */

.af-store-card-bottom {
  padding: 34px 18px 16px;
}

/* título + enlace con subrayado "bonito" */

.af-store-name {
  margin: 0 0 4px 0;
  font-size: 1rem;
  font-weight: 700;
  color: var(--af-text-main);
}

/* el enlace no tiene subrayado nativo, usamos un pseudo-elemento animado */

.af-store-name-link {
  position: relative;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  padding-bottom: 2px;
}

.af-store-name-link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 2px;
  width: 0;
  background: var(--af-secondary);
  border-radius: 999px;
  transition: width 0.18s ease;
}

/* al hacer hover, aparece una línea fina debajo del texto, centrada visualmente */

.af-store-name-link:hover::after {
  width: 100%;
}

/* descripción corta */

.af-store-desc {
  margin: 0 0 6px 0;
  font-size: 0.86rem;
  color: var(--af-text-muted);
}

/* meta: entrega */

.af-store-meta {
  margin: 0;
  font-size: 0.9rem;
  color: var(--af-text-muted);
  display: flex;
  align-items: center;
  gap: 6px;
}

.af-store-meta-icon {
  font-size: 1rem;
}

/* hover: oscurecer cabecera */

.af-store-card:hover .af-store-card-top {
  filter: brightness(0.95);
}

/* RESPONSIVE */

/* tablet: 2 columnas */

@media (max-width: 1024px) {
  .af-stores-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* móvil: 1 columna, enlace alineado al inicio */

@media (max-width: 768px) {
  .af-stores-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }

  .af-stores-link {
    align-self: flex-start;
  }

  .af-stores-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .af-store-card {
    margin: 0 4px;
  }
}