/* CreaRock Marcas — mismo estilo de tarjeta que la propuesta.
   Personaliza desde Woodmart → Theme Settings → Custom CSS, ej.: .crm-grid{--crm-logo-h:44px} */
.crm-grid{
  --crm-ink:#2B2B2E; --crm-muted:#9B9BA0; --crm-line:#E7E6E1; --crm-hover:#0B0B0C; --crm-surface:#fff;
  --crm-radius:12px; --crm-logo-h:36px; --crm-cols:6;
  display:grid; gap:10px;
  grid-template-columns:repeat(var(--crm-cols),minmax(0,1fr));
}
.crm-title{font-size:clamp(22px,2.4vw,28px); font-weight:700; letter-spacing:-.02em; margin:0 0 20px}
.crm-grid .crm-card{
  min-height:72px; padding:12px 10px; border:1px solid var(--crm-line); border-radius:var(--crm-radius);
  background:var(--crm-surface); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px;
  text-align:center; text-decoration:none; color:var(--crm-ink); transition:border-color .15s, box-shadow .15s, transform .15s;
}
.crm-grid .crm-card:hover{border-color:var(--crm-hover); color:var(--crm-ink); transform:translateY(-1px); box-shadow:0 1px 2px rgba(11,11,12,.06)}
.crm-grid .crm-card:focus-visible{outline:2px solid #00A098; outline-offset:2px}
.crm-logo{height:var(--crm-logo-h); width:100%; display:flex; align-items:center; justify-content:center}
.crm-logo img{max-height:100%; max-width:80%; width:auto; height:auto; object-fit:contain; transition:filter .2s, opacity .2s}
.crm-grid.is-gray .crm-logo img{filter:grayscale(1); opacity:.75}
.crm-grid.is-gray .crm-card:hover .crm-logo img{filter:none; opacity:1}
.crm-card.has-logo{min-height:88px}
.crm-name{font-weight:800; font-size:17px; letter-spacing:-.02em; line-height:1.15}
.crm-count{font-size:11px; font-weight:500; color:var(--crm-muted); letter-spacing:0}

@media (max-width:1024px){ .crm-grid{grid-template-columns:repeat(min(var(--crm-cols),4),minmax(0,1fr))} }
@media (max-width:600px){ .crm-grid{grid-template-columns:repeat(min(var(--crm-cols),3),minmax(0,1fr))} .crm-name{font-size:15px} }
@media (max-width:380px){ .crm-grid{grid-template-columns:repeat(2,minmax(0,1fr))} }