/* ===================================================
   SPS-CATS.CSS → Tabs de categorías + ajustes de grilla
   Funciona junto a sps-cards.css
   =================================================== */

.sps-cats { background:#fff; padding:40px 0 56px; font-family:'Work Sans',sans-serif; }
.sps-cats .wrap { max-width:1160px; margin:0 auto; padding:0 20px; }

.sps-cats .head h2 { margin:0; font:800 26px/1.15 'Work Sans',sans-serif; color:#1d1d1f; }
.sps-cats .head p  { margin:6px 0 22px 0; font:500 15px/1.45 'Work Sans',sans-serif; color:#6b7280; }

/* Tabs (pestañas) */
.spsc-tabs { display:flex; flex-wrap:wrap; gap:10px; margin:12px 0 18px; padding:0; list-style:none; }
.spsc-tab {
  cursor:pointer; user-select:none;
  display:inline-flex; align-items:center; justify-content:center;
  height:38px; padding:0 16px; border-radius:999px;
  background:#f3f4f6; color:#374151; font:600 14px/1 'Work Sans',sans-serif;
  border:1px solid #e5e7eb; transition:all .15s ease;
}
.spsc-tab:hover { background:#eef2f7; }
.spsc-tab.active { background:#10b981; color:#fff; border-color:#10b981; }

/* Panels */
.spsc-panels { position:relative; }
.spsc-panel { display:none; }
.spsc-panel.active { display:block; }

/* Espaciado del grid usando las mismas cards */
.spsc-panel .row.g-4 { --bs-gutter-y: 1.25rem; }

/* Aísla cada sección para evitar solapes de z-index/fondos */
.sps-blogs, .sps-cats {
  position: relative;
  z-index: 1;
  background: #fff;   /* fuerza base clara */
}

/* Asegura el ratio de la imagen de las cards si algún CSS externo pisó el tuyo */
.sps-cats .card-image-container {
  padding-top: 56.25% !important; /* 16:9 */
}

/* -- Parche temporal para sps-cats -- */
.sps-cats { 
  position: relative !important;
  z-index: 0 !important;
  background: #fff !important;
  isolation: isolate !important;       /* crea contexto y evita superposiciones */
  contain: layout paint !important;    /* aísla el repintado */
  padding-top: 24px !important;
}

/* fuerza el estilo de las cards dentro de categorías */
.sps-cats .course-card{
  background:#fff !important;
  border:1px solid #e6e6e6 !important;
  box-shadow:0 3px 12px rgba(0,0,0,.06) !important;
  border-radius:14px !important;
  overflow:hidden !important;
}

/* asegura el ratio de imagen 16:9 aunque algo lo pise */
.sps-cats .card-image-container{
  position:relative !important;
  padding-top:56.25% !important;
}
.sps-cats .card-image-container img{
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
}

/* separa bloques por si el de arriba tiene un z-index mayor */
.sps-blogs{
  position:relative !important;
  z-index:0 !important;
  background:#fff !important;
  isolation:isolate !important;
  contain:layout paint !important;
  margin-bottom: 32px !important;
}

/* Fuerza el color de los títulos del bloque blog */
body .sps-blogs .title,
body .sps-blogs h2,
body .sps-blogs .empty-title{
  color:#1f2937 !important; /* gris casi negro */
}

/* Subtítulos del bloque blog */
body .sps-blogs .subtitle{
  color:#6b7280 !important; /* gris medio */
}

/* Centrar y estilizar "Ir al blog" si existe */
body .sps-blogs .blogs-head{ text-align:center; }
body .sps-blogs .blog-link{
  display:inline-flex; align-items:center; justify-content:center;
  height:36px; padding:0 14px; margin:0 auto 10px;
  border-radius:999px; border:1px solid #e5e7eb; background:#f9fafb; color:#374151;
  font:600 13px/1 'Work Sans', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  text-decoration:none;
}
body .sps-blogs .blog-link:hover{ background:#f3f4f6; }