.group-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
  @media (max-width: 900px) { .group-grid { grid-template-columns: repeat(2, 1fr); } }
  @media (max-width: 600px) { .group-grid { grid-template-columns: 1fr; } }
  .group-card {
    background: var(--clbb-blanco); border: 1px solid var(--clbb-grafito-15);
    padding: 1.5rem 1.4rem; text-decoration: none;
    display: flex; align-items: flex-start; gap: 1.1rem;
    border-left: 6px solid var(--clbb-amarillo);
    transition: transform .15s, border-left-color .15s, border-color .15s;
  }
  .group-card:hover { transform: translateY(-3px); border-color: var(--clbb-grafito); border-left-color: var(--clbb-grafito); background: var(--clbb-amarillo); }
  .group-card__ico { width: 46px; height: 46px; object-fit: contain; display: block; flex-shrink: 0; margin: 0; transition: filter .15s; }
  .group-card__body { min-width: 0; }
  /* en hover el fondo es amarillo: el ícono pasa a silueta grafito para que contraste */
  .group-card:hover .group-card__ico { filter: brightness(0); }
  .group-card h3 { font-family: var(--clbb-font-display); font-weight: 700; font-size: 1.2rem; letter-spacing: .03em; text-transform: uppercase; color: var(--clbb-grafito); margin: 0 0 .4rem; line-height: 1.15; }
  .group-card p { font-family: var(--clbb-font-body); font-size: .88rem; color: var(--clbb-grafito-70); line-height: 1.5; margin: 0 0 .85rem;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
  .group-card:hover p { color: var(--clbb-grafito); }
  .group-card__count { font-family: var(--clbb-font-display); font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 700; color: var(--clbb-grafito); }
  /* Chalet no trae glifo de flecha (→), se renderiza mal: forzar fuente del sistema solo en la flecha */
  .group-card__arrow { font-family: "Helvetica Neue", Arial, sans-serif; letter-spacing: 0; }