/* Contenedor general */
.cl-sn { margin: 22px auto; width: min(980px, 94%); }
.cl-sn__wrap { padding: 8px 0; }
.cl-sn__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 10px;
}

/* Botón */
.cl-sn__btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 12px 14px;
  border-radius: 14px;
  text-decoration: none;
  font-weight: 800;
  font-size: 14px;
  letter-spacing: .2px;
  color: #fff;
  background: var(--sn-grad, linear-gradient(135deg,#374151,#6B7280));
  box-shadow: 0 2px 12px rgba(0,0,0,.08), inset 0 0 0 1px rgba(255,255,255,.06);
  transition: transform .25s ease, box-shadow .25s ease, filter .25s ease;
}

/* Icono dentro del botón */
.cl-sn__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px; height: 28px;
  border-radius: 10px;
  background: rgba(255,255,255,.14);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.10);
  flex: 0 0 28px;
}
.cl-sn__icon i { font-size: 14px; line-height: 1; }
.cl-sn__icon-img {
  display: block; width: 16px; height: 16px; object-fit: contain;
  filter: drop-shadow(0 1px 1px rgba(0,0,0,.2));
}

.cl-sn__label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Hover / Focus */
.cl-sn__btn:hover,
.cl-sn__btn:focus-visible {
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(0,0,0,.18), inset 0 0 0 1px rgba(255,255,255,.12);
  filter: saturate(1.06) brightness(1.02);
  outline: none;
}

/* Responsive */
@media (max-width: 520px){
  .cl-sn__grid { grid-template-columns: repeat(2, 1fr); }
  .cl-sn__btn { padding: 10px 12px; border-radius: 12px; }
}


/* --- Fix: color en hover y centrado --- */

/* El botón SIEMPRE blanco (hover/active/visited) */
.cl-sn .cl-sn__btn,
.cl-sn .cl-sn__btn:visited,
.cl-sn .cl-sn__btn:hover,
.cl-sn .cl-sn__btn:focus,
.cl-sn .cl-sn__btn:active {
  color: #fff;                 /* evita el rojo heredado */
  text-decoration: none;       /* sin subrayado */
}

/* Si el tema insiste con un a:hover rojo, subimos especificidad */
.cl-sn .cl-sn__grid .cl-sn__btn:hover .cl-sn__label,
.cl-sn .cl-sn__grid .cl-sn__btn:focus .cl-sn__label,
.cl-sn .cl-sn__grid .cl-sn__btn:active .cl-sn__label {
  color: #fff;                 /* etiqueta siempre blanca */
}

/* En caso extremo, descomenta las !important:
.cl-sn .cl-sn__btn,
.cl-sn .cl-sn__btn:hover,
.cl-sn .cl-sn__btn:focus,
.cl-sn .cl-sn__btn:active { color:#fff !important; }
*/

/* Centrar icono + texto dentro del botón */
.cl-sn__btn {
  justify-content: center;     /* centra horizontalmente icono + label */
  text-align: center;
}

/* El icono mantiene su ancho fijo; evita que “empuje” el label raro */
.cl-sn__icon { flex: 0 0 28px; }

/* (Opcional) mejorar contraste del “chip” del icono al hover */
.cl-sn__btn:hover .cl-sn__icon,
.cl-sn__btn:focus .cl-sn__icon {
  background: rgba(255,255,255,.18);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.16);
}