/* Directorio de conexiones (conexiones.html, #catalogo): buscador, categorías y rejilla */
.dir { padding: 0 clamp(24px, 4.5vw, 56px) clamp(64px, 7.5vw, 96px); }
.dir [hidden] { display: none; }
.dir-q { display: flex; align-items: center; gap: 14px; height: 60px; padding: 0 22px; background: var(--white); border-radius: 16px; box-shadow: var(--shadow-card); cursor: text; }
.dir-q:focus-within { box-shadow: 0 0 0 2px var(--teal), var(--shadow-card); }
.dir-q .ic { width: 20px; height: 20px; flex: none; color: var(--ink-3); }
.dir-q input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; font: inherit; font-size: 16px; color: var(--ink); }
.dir-q input::placeholder { color: var(--ink-3); }
.dir-cats { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 28px; }
.dir-cats button { padding: 7px 14px; border-radius: 99px; font-size: 14px; line-height: 1.3; background: var(--white); box-shadow: inset 0 0 0 1px var(--line-2); color: var(--ink-2); transition: background-color .2s, color .2s; }
.dir-cats button:hover { color: var(--ink); }
.dir-cats button[aria-pressed="true"] { background: var(--deep); color: #fff; box-shadow: none; }
.dir-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.dir-grid li { display: flex; align-items: center; gap: 12px; height: 64px; padding: 0 14px; background: var(--white); border-radius: 14px; box-shadow: 0 0 0 1px var(--line); font-size: 15px; font-weight: 500; }
.dir-grid li span:last-child { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.dir-lg { flex: none; width: 38px; height: 38px; border-radius: 10px; background: var(--tint); box-shadow: inset 0 0 0 1px var(--line); display: grid; place-items: center; font-weight: 600; color: var(--ink-3); }
.dir-lg img { width: 24px; height: 24px; object-fit: contain; border-radius: 4px; }
.dir-none { text-align: center; padding: 28px 0 8px; }
.dir-more { display: flex; margin: 28px auto 0; }
.dir-foot { text-align: center; margin-top: 22px; color: var(--ink-3); }
.dir-foot a { color: var(--ink); font-weight: 600; }
@media (max-width: 1000px) { .dir-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px) {
  .dir-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .dir-grid li { height: 56px; padding: 0 10px; gap: 10px; font-size: 14px; line-height: 1.25; }
  .dir-grid li span:last-child { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  .dir-lg { width: 32px; height: 32px; }
  .dir-lg img { width: 20px; height: 20px; }
  .dir-cats { flex-wrap: nowrap; overflow-x: auto; margin-inline: calc(-1 * clamp(24px, 4.5vw, 56px)); padding-inline: clamp(24px, 4.5vw, 56px); scrollbar-width: none; }
  .dir-cats button { flex: none; }
}
@media (pointer: coarse) { .dir-cats button { min-height: 44px; } }