/* Catálogo de integraciones. Hoja chica sobre /site/site.css: no redefine
   ningún token, solo la grilla de tiles y el encabezado de categoría. */

.int-cats { display: grid; gap: var(--spacing-64); }

/* Rótulo de categoría: mono en mayúsculas + hairline que llena el ancho,
   como el resto de los rótulos del sistema. */
.int-cat-head {
  display: flex;
  align-items: center;
  gap: var(--spacing-16);
  margin-bottom: var(--spacing-24);
}
.int-cat-head h2 {
  font-family: var(--font-mono);
  font-size: var(--text-caption);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: -0.03em;
  color: var(--color-slate);
  margin: 0;
  white-space: nowrap;
}
.int-cat-head::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--color-ash);
}

.int-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 14px;
}

.int-tile {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  background: var(--color-paper-white);
  border: 1px solid var(--color-ash);
  border-radius: 14px;
}
.int-tile-logo {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-mist-gray);
}
.int-tile-logo img { width: 30px; height: 30px; object-fit: contain; display: block; }
.int-tile span { font-size: var(--text-body); line-height: 1.2; color: var(--color-carbon-black); }

@media (max-width: 480px) {
  .int-grid { grid-template-columns: minmax(0, 1fr); }
}