/* Simplex Online — Catálogo de cursos (page-cursos.php)
   Archivo manual (no lo genera construir-home.ps1): reutiliza las variables y clases base de home.css
   (--navy, --yellow, --pink, --r, .container, .section, .card, .tag, .btn) y los tokens --v-* de venta.css. */

.cursos-cabecera { padding-top: 48px; }

.cursos-filtros {
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  align-items: end;
  margin: 0 0 18px;
  padding: 22px;
  border: 1px solid var(--v-line);
  border-radius: var(--r);
  background: var(--v-surface);
}
.campo { display: flex; flex-direction: column; gap: 6px; }
.campo-buscar { grid-column: span 2; }
.campo label { font-weight: 600; font-size: .85rem; color: var(--v-head); }
.cursos-filtros input[type="search"],
.cursos-filtros input[type="number"],
.cursos-filtros select {
  padding: 11px 14px;
  border: 1px solid var(--v-line);
  border-radius: 10px;
  font: inherit;
  color: var(--ink);
  background: var(--v-surface-2);
}
.cursos-filtros input:focus-visible,
.cursos-filtros select:focus-visible { outline: 3px solid var(--pink-600); outline-offset: 1px; }
.rango-precio { display: flex; align-items: center; gap: 8px; }
.rango-precio input { width: 100%; min-width: 0; }
.rango-precio span { color: var(--muted); }

.cursos-atajos { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px; }
.atajo-precio {
  padding: 7px 16px;
  border: 1px solid var(--v-line);
  border-radius: 999px;
  background: var(--v-surface);
  color: var(--v-head);
  font: 600 .84rem/1 var(--f-body);
  cursor: pointer;
  transition: background-color .2s, border-color .2s, color .2s;
}
.atajo-precio:hover { border-color: #aebde6; background: var(--v-soft); }
.atajo-precio.is-activo { background: var(--navy); border-color: var(--navy); color: #fff; }
[data-theme="dark"] .atajo-precio.is-activo { background: #2a4fa8; border-color: #2a4fa8; }
.atajo-precio:focus-visible { outline: 3px solid var(--pink-600); outline-offset: 2px; }

.cursos-resultado-fila { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; margin: 0 0 18px; }
.cursos-resultado { margin: 0; color: var(--muted); font-size: .92rem; }
.cursos-limpiar { padding: 6px 14px; border: 0; background: transparent; color: var(--v-accent); font: 600 .88rem/1 var(--f-body); cursor: pointer; text-decoration: underline; }

.curso-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--v-line);
  border-radius: var(--r);
  background: var(--v-surface);
  overflow: hidden;
  transition: box-shadow .2s, transform .2s, border-color .2s;
}
.curso-card:hover { box-shadow: var(--shadow); border-color: #c8d3ee; transform: translateY(-2px); }
.curso-card[hidden] { display: none; }

.curso-card-img { position: relative; display: block; aspect-ratio: 16 / 9; background: var(--bg); overflow: hidden; }
.curso-card-img img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.curso-card-img-placeholder {
  width: 100%;
  height: 100%;
  border-radius: 0;
  font-family: var(--f-head);
  font-weight: 800;
  font-size: 2.6rem;
  text-transform: uppercase;
}

.curso-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  padding: 5px 13px;
  border-radius: 999px;
  font-weight: 700;
  font-size: .74rem;
  letter-spacing: .02em;
  box-shadow: 0 2px 10px rgba(0, 10, 40, .25);
}
.curso-badge-proximo { background: var(--yellow); color: #1a1200; }
.curso-badge-en_curso { background: var(--pink-600); color: #fff; }
.curso-badge-grabado { background: #1f8f5f; color: #fff; }

.curso-card-body { display: flex; flex-direction: column; gap: 8px; padding: 20px 22px 22px; flex: 1; }
.curso-card-body h3 { margin-top: 2px; font-family: var(--f-head); font-weight: 700; font-size: 1.1rem; line-height: 1.32; }
.curso-card-body h3 a { color: var(--v-head); text-decoration: none; }
.curso-card-body h3 a:hover { color: var(--pink-600); }
.curso-card-resumen { margin: 0; font-size: .9rem; line-height: 1.55; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

.curso-card-meta { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 2px 0 0; padding: 0; list-style: none; font-size: .82rem; color: var(--muted); }
.curso-card-meta li { display: inline-flex; align-items: center; gap: 6px; }
.curso-card-meta svg { width: 15px; height: 15px; flex: none; color: var(--v-accent); }

.curso-card-precio { margin-top: auto; display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px 10px; padding-top: 6px; }
.precio-oferta { font-weight: 800; font-size: 1.25rem; color: var(--v-accent); }
.precio-regular { font-weight: 800; font-size: 1.25rem; color: var(--v-head); }
.precio-regular-tachado { text-decoration: line-through; color: var(--muted); font-size: .92rem; }
.precio-desde { font-size: .82rem; font-weight: 600; color: var(--muted); }
.precio-consultar { font-weight: 700; font-size: .95rem; color: var(--v-chip-ink); background: var(--v-chip); padding: 4px 12px; border-radius: var(--r); }

.curso-card-acciones { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.curso-card-acciones .btn { flex: 1 1 auto; }

.cursos-vacio {
  margin-top: 10px;
  padding: 40px 20px;
  text-align: center;
  color: var(--muted);
  border: 1px dashed #aebde6;
  border-radius: var(--r);
  background: var(--v-surface);
}
.cursos-vacio[hidden] { display: none; }
.cursos-vacio a { color: var(--v-accent); font-weight: 600; }

/* ── Home: últimos cursos y carrusel continuo ─────────────────────────── */
.home-ultimos-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.home-ultimos .curso-card-body h3 { font-size: 1.02rem; }

.carrusel { --vis: 5; overflow: hidden; width: 100%; padding: 6px 0 14px; }
.carrusel-pista { display: flex; width: max-content; animation: carrusel-mov var(--dur, 50s) linear infinite; }
.carrusel:hover .carrusel-pista, .carrusel:focus-within .carrusel-pista { animation-play-state: paused; }
.carrusel-set { display: flex; margin: 0; padding: 0; list-style: none; }
.carrusel-item { flex: none; width: calc(100vw / var(--vis)); padding: 0 8px; }
@keyframes carrusel-mov { to { transform: translateX(-50%); } }

.mini {
  display: flex; flex-direction: column; height: 100%; overflow: hidden; text-decoration: none; color: inherit;
  border: 1px solid var(--v-line); border-radius: 14px; background: var(--v-surface);
  transition: transform .25s, box-shadow .25s, border-color .25s;
}
.mini { transition: transform .5s var(--ease), box-shadow .5s var(--ease), border-color .5s var(--ease); }
.mini:hover { transform: translateY(-9px); box-shadow: 0 18px 38px rgba(237, 2, 122, .24); border-color: rgba(237, 2, 122, .55); }
.home-ultimos .curso-card { transition: transform .5s var(--ease), box-shadow .5s var(--ease), border-color .5s var(--ease); }
.home-ultimos .curso-card:hover { transform: translateY(-9px); box-shadow: 0 20px 42px rgba(237, 2, 122, .24); border-color: rgba(237, 2, 122, .55); }
.cv-otros .carrusel { margin-top: -6px; }
.mini-img { display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--v-surface-2); }
.mini-img img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.mini-ini { display: grid; place-items: center; width: 100%; height: 100%; background: var(--navy); color: #fff; font-family: var(--f-head); font-weight: 800; font-size: 2rem; }
.mini-txt { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px 14px; }
.mini-txt strong {
  font-family: var(--f-head); font-size: .95rem; line-height: 1.3; color: var(--v-head);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.mini-precio { font-weight: 800; font-size: .95rem; color: var(--v-accent); }

@media (max-width: 1100px) { .carrusel { --vis: 3.2; } .home-ultimos-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 700px) { .carrusel { --vis: 1.9; } .home-ultimos-grid { grid-template-columns: minmax(0, 1fr); } }
@media (prefers-reduced-motion: reduce) {
  .carrusel { overflow-x: auto; }
  .carrusel-pista { animation: none; }
  .carrusel-set[aria-hidden="true"] { display: none; }
}

@media (max-width: 640px) {
  .cursos-filtros { grid-template-columns: 1fr; }
  .campo-buscar { grid-column: auto; }
}