/* Red de empresas hermanas. Toma los colores de cada sitio con variables propias;
 * si el sitio no las define, usa los valores de respaldo (neutros, legibles en claro y oscuro). */
.rh {
  --rh-fondo: var(--rh-bg, transparent);
  --rh-tarjeta: var(--rh-card, rgba(127, 127, 127, .08));
  --rh-texto: var(--rh-ink, inherit);
  --rh-suave: var(--rh-muted, rgba(127, 127, 127, .95));
  --rh-linea: var(--rh-line, rgba(127, 127, 127, .25));
  --rh-acento: var(--rh-acc, currentColor);
  background: var(--rh-fondo);
  color: var(--rh-texto);
  max-width: 1120px;
  margin: 0 auto;
  padding: 48px 16px;
  box-sizing: border-box;
}
.rh-sello { margin: 0 0 6px; font-size: .75rem; letter-spacing: .12em; text-transform: uppercase; color: var(--rh-suave); }
.rh-titulo { font-size: 1.5rem; margin: 0 0 6px; line-height: 1.2; }
.rh-sub { margin: 0 0 20px; color: var(--rh-suave); }
.rh-lista {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.rh-item { margin: 0; }
.rh-tarjeta {
  display: flex; flex-direction: column; gap: 6px; height: 100%;
  box-sizing: border-box; padding: 18px;
  border: 1px solid var(--rh-linea); border-radius: 12px;
  background: var(--rh-tarjeta); color: inherit; text-decoration: none;
  border-top: 3px solid var(--rh-marca, var(--rh-linea));
  transition: border-color .15s ease, transform .15s ease;
}
.rh-tarjeta:hover, .rh-tarjeta:focus-visible { border-color: var(--rh-acento); transform: translateY(-2px); }
.rh-tarjeta:focus-visible { outline: 2px solid var(--rh-acento); outline-offset: 2px; }
.rh-puente { font-size: .85rem; color: var(--rh-suave); }
.rh-nombre { font-size: 1.1rem; display: flex; align-items: center; gap: 8px; }
.rh-punto { width: 10px; height: 10px; border-radius: 50%; background: var(--rh-marca, var(--rh-acento)); flex: none; }
.rh-desc { font-size: .95rem; line-height: 1.45; flex: 1; }
.rh-ir { font-weight: 600; color: var(--rh-acento); margin-top: 4px; }
.rh-nota { margin: 18px 0 0; font-size: .8rem; color: var(--rh-suave); }
@media (prefers-reduced-motion: reduce) { .rh-tarjeta { transition: none; } .rh-tarjeta:hover { transform: none; } }