/* Grid container */
.gs-grid{display:flex;flex-wrap:wrap;gap:28px;justify-content:flex-start;padding:10px 0;}
/* column widths */
.gs-grid.gs-col-3 .gs-card{width:calc(33.333% - 18.666px);}
.gs-grid.gs-col-4 .gs-card{width:calc(25% - 21px);}
.gs-grid.gs-col-2 .gs-card{width:calc(50% - 14px);}

/* Card */
.gs-card{
  background:#ffffff;
  border-radius:10px;
  overflow:hidden;
  box-shadow:0 6px 18px rgba(0,0,0,0.06);
  border:1px solid rgba(0,0,0,0.04);
  display:flex;
  flex-direction:column;
  transition:transform .18s ease,box-shadow .18s ease;
}
.gs-card:hover{ transform:translateY(-4px); box-shadow:0 12px 30px rgba(0,0,0,0.08); }

/* Thumb area like the image (fixed height, cover) */
.gs-thumb{ width:100%; height:220px; overflow:hidden; background:#f6f6f6; display:block; }
.gs-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }

/* Content */
.gs-title{ font-size:1.05rem; text-align:center; margin:14px 16px 6px; font-weight:700; color:#111; }
.gs-excerpt{ font-size:0.9rem; color:#666; margin:0 16px 16px; text-align:center; min-height:44px; }

/* Actions: centered button like the image */
.gs-actions{ display:flex; justify-content:center; padding:12px 16px 20px; }
.gs-open-guide{
  display:inline-block;
  padding:10px 18px;
  border-radius:12px;
  border:1.5px solid #222;
  text-decoration:none;
  font-weight:600;
  background:transparent;
  color:black;
  transition:background .12s ease,color .12s ease,transform .12s ease;
}
.gs-open-guide:hover{ background:black; color:#fff; transform:translateY(-2px); }

/* small fallback PDF icon block */
.gs-pdf-icon{ display:flex; align-items:center; justify-content:center; height:220px; color:#666; font-weight:700; }

/* responsive */
@media(max-width:1000px){ .gs-grid.gs-col-3 .gs-card{width:calc(50% - 14px);} }
@media(max-width:600px){ .gs-grid.gs-col-3 .gs-card, .gs-grid.gs-col-2 .gs-card{width:100%;} }

/* --- Estilos para el panel de filtros (gs-filters) --- */
.gs-filters { padding: 18px 12px; background: transparent; }
.gs-filters .gs-filter-group { margin-bottom: 18px; }

/* Título del grupo */
.gs-filters .gs-filter-group h4 {
  font-size: 1.05rem;
  margin: 0 0 10px;
  font-weight: 700;
  color: #111;
}

/* Etiquetas verticales (una por línea) */
.gs-filter-label {
  display: flex;
  align-items: center;
  gap: 10px;               /* espacio entre checkbox y texto */
  margin: 8px 0;
  font-size: 0.95rem;
  color: #222;
  cursor: pointer;
  user-select: none;
}

/* Ocultamos la checkbox nativa y creamos una visual personalizada */
.gs-filter-checkbox {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  border: 2px solid #cfcfcf;
  border-radius: 4px;
  display: inline-block;
  position: relative;
  flex: 0 0 auto;
  background: #fff;
  transition: all .12s ease;
  box-shadow: inset 0 0 0 0 rgba(0,0,0,0.06);
}

/* Marca visible (tick) con pseudo-elemento */
.gs-filter-checkbox::after{
  content: "";
  position: absolute;
  left: 4px;
  top: 1px;
  width: 6px;
  height: 10px;
  border-right: 2.5px solid transparent;
  border-bottom: 2.5px solid transparent;
  transform: rotate(45deg) scale(0);
  transition: transform .12s ease, border-color .12s ease;
}

/* Estado checked: color de borde y tick */
.gs-filter-checkbox:checked{
  border-color: #111;
  background: #111;
}
.gs-filter-checkbox:checked::after{
  border-right-color: #fff;
  border-bottom-color: #fff;
  transform: rotate(45deg) scale(1);
}

/* Hover sobre la etiqueta resalta la caja */
.gs-filter-label:hover .gs-filter-checkbox{
  border-color: #111;
}

/* Texto junto a checkbox */
.gs-filter-label span,
.gs-filter-label { color: #222; font-weight: 500; }

/* Botón "Vaciar todos los filtros" estilo acorde a la UI */
#gs-clear-filters {
  display: inline-block;
  padding: 8px 12px;
  border-radius: 8px;
  border: 1.5px solid #111;
  background: #fff;
  color: #111;
  font-weight: 600;
  cursor: pointer;
  transition: background .12s ease, color .12s ease, transform .08s ease;
  margin-top: 8px;
}

/* Hover del botón: fondo negro, texto blanco */
#gs-clear-filters:hover{
  background: #111;
  color: #fff;
  transform: translateY(-1px);
}

/* Opcional: estilo más compacto (útil en sidebars estrechos) */
.gs-filters .gs-filter-group { padding-right: 6px; }
@media(max-width:900px){
  .gs-filter-label { font-size: 0.95rem; gap:8px; }
  .gs-filter-checkbox { width:16px; height:16px; }
  .gs-thumb{height:180px;} /* ajustes de tarjeta si necesitas */
}