.directorio {
  background:    var(--nexo-bg);
  color:         var(--nexo-dark);
  padding-block: clamp(var(--space-8), 5vh, var(--space-16));
}

.directorio__grid {
  display:               grid;
  grid-template-columns: repeat(4, 1fr);
  gap:                   0;
}

.directorio__grid > * { min-width: 0; } /* permite que las columnas se encojan sin desbordar */

@media (max-width: 1024px) {
  .directorio__grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 768px) {
  .directorio__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 480px) {
  /* Móvil: 2 columnas a ancho completo. El grid vive dentro de un .container,
     así que se sale de su padding con margen negativo para llegar al 100%. */
  .directorio__grid   { grid-template-columns: repeat(2, 1fr); margin-inline: calc(-1 * var(--container-pad)); }
  .dir-card__logo img { width: 82%; }  /* evita que el wordmark desborde en tarjetas angostas */
}

.dir-card.is-hidden { display: none; }

.dir-card__logo--text {
  font-family:     var(--font-heading);
  font-weight:     900;
  font-size:       var(--fs-2xl);
  line-height:     var(--lh-tight);
  color:           var(--nexo-dark);
  text-decoration: none;
}

.directorio__vacio {
  padding-block: clamp(var(--space-10), 8vh, var(--space-20));
  text-align:    center;
  font-size:     var(--fs-lg);
  color:         var(--nexo-dark);
}