/* ============================================================================
   COMPONENTES › TARJETAS
   ----------------------------------------------------------------------------
   Grilla de tarjetas de la sección "Sobre nosotros".
   Reutilizable: sirve igual para una grilla de DJs o de próximos eventos.
   ============================================================================ */

/* auto-fit + minmax = grilla responsive SIN media queries.
   Traducción: "hacé columnas de mínimo 220px y máximo lo que sobre, y meté
   todas las que entren". En mobile queda 1 columna, en tablet 2, en desktop 3.
   El navegador lo resuelve solo. */
.tarjetas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 18px;
  margin-top: 40px;
}

.tarjeta {
  background: rgba(255, 255, 255, .04);           /* apenas más clara que el panel */
  border: 1px solid var(--color-borde);
  border-radius: 4px;
  padding: 26px 22px;
  text-align: left;                               /* la sección centra; la tarjeta no */
  transition: transform var(--transicion),
              border-color var(--transicion),
              background-color var(--transicion);
}

.tarjeta:hover {
  transform: translateY(-4px);
  border-color: var(--color-acento-suave);
  background: rgba(255, 255, 255, .07);
}

.tarjeta h3 {
  font-size: 14px;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-bottom: 10px;
  color: var(--color-acento);
}

.tarjeta p {
  color: var(--color-texto-suave);
  font-size: 15px;
}