.cur-listado{padding:2.5rem 1.5rem;max-width:1200px;margin:0 auto}
.cur-listado h1{color:var(--t-text);margin-bottom:.35rem}
.cur-subtitulo{color:var(--t-muted);margin:0 0 1.5rem;font-size:.95rem}
.cur-filtros{display:flex;gap:.75rem;margin-bottom:1.75rem}
.cur-filtros select{padding:.5rem .75rem;border:1px solid var(--t-line);border-radius:.5rem;background:var(--t-panel);color:var(--t-text);font-size:16px}
.cur-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:1.5rem}

/* Paleta por idioma — mismos 6 tonos que profesorado (prof-avatar--a..f),
   reasignados por código de idioma para que cada tarjeta lleve una
   identidad de color coherente en toda la app. */
.cur-card__idioma--en{background:rgba(15,122,92,.12);color:#0f7a5c}
.cur-card__idioma--fr{background:rgba(47,111,168,.12);color:#2f6fa8}
.cur-card__idioma--de{background:rgba(122,63,157,.12);color:#7a3f9d}
.cur-card__idioma--it{background:rgba(168,99,47,.14);color:#a8632f}
.cur-card__idioma--pt{background:rgba(194,58,94,.12);color:#c23a5e}
/* 2026-07-13 (fallo real de maquetacion): español y árabe se añadieron al
   catálogo hace tiempo pero nunca tuvieron su color de idioma aquí - sus
   tarjetas (14 de 42, 1/3 del listado) se renderizaban sin gradiente de
   cabecera ni color de etiqueta, dando la falsa impresión de un hueco en
   blanco enorme en mitad de la pagina de cursos. */
.cur-card__idioma--es{background:rgba(170,21,27,.12);color:#aa151b}
.cur-card__idioma--ar{background:rgba(14,124,134,.12);color:#0e7c86}

.cur-card__img--en{background:linear-gradient(135deg,#0f7a5c,#4fa98c)}
.cur-card__img--fr{background:linear-gradient(135deg,#2f6fa8,#6fb2e0)}
.cur-card__img--de{background:linear-gradient(135deg,#7a3f9d,#b47fd6)}
.cur-card__img--it{background:linear-gradient(135deg,#a8632f,#e0a86f)}
.cur-card__img--pt{background:linear-gradient(135deg,#c23a5e,#e8829e)}
.cur-card__img--es{background:linear-gradient(135deg,#aa151b,#e0a1a5)}
.cur-card__img--ar{background:linear-gradient(135deg,#0e7c86,#5cc8cf)}

/* Filigrana con los colores reales de la bandera de cada idioma - marca de
   agua sutil (baja opacidad, esquina inferior derecha) en el cuerpo de la
   tarjeta, no en la imagen de cabecera (esa ya lleva el gradiente de marca
   de arriba). Franjas diagonales de la bandera del país de referencia de
   cada idioma: Reino Unido/inglés, Francia, Alemania, Italia, Portugal. */
.cur-card__body{position:relative;overflow:hidden}
.cur-card__body::after{
  content:"";position:absolute;bottom:0;right:0;width:110px;height:110px;
  opacity:.10;pointer-events:none;
  transform:translate(30%,30%) rotate(-35deg);
  background-size:100% 100%;
}
.cur-card__body--en::after{background:repeating-linear-gradient(0deg,#012169 0 18px,#fff 18px 22px,#C8102E 22px 32px,#fff 32px 36px)}
.cur-card__body--fr::after{background:repeating-linear-gradient(90deg,#0055A4 0 18px,#fff 18px 22px,#EF4135 22px 40px)}
.cur-card__body--de::after{background:repeating-linear-gradient(0deg,#000 0 18px,#DD0000 18px 36px,#FFCE00 36px 54px)}
.cur-card__body--it::after{background:repeating-linear-gradient(90deg,#009246 0 18px,#fff 18px 22px,#CE2B37 22px 40px)}
.cur-card__body--pt::after{background:repeating-linear-gradient(90deg,#046A38 0 22px,#fff 22px 26px,#DA020E 26px 44px)}
.cur-card__body--es::after{background:repeating-linear-gradient(0deg,#AA151B 0 14px,#F1BF00 14px 40px,#AA151B 40px 54px)}
.cur-card__body--ar::after{background:repeating-linear-gradient(90deg,#0e7c86 0 20px,#fff 20px 24px,#5cc8cf 24px 44px)}

.cur-card{
  display:flex;flex-direction:column;border:1px solid var(--t-line);border-radius:1rem;overflow:hidden;
  background:var(--t-panel);text-decoration:none;
  transition:box-shadow .2s,transform .2s,border-color .2s;
  position:relative;
  animation:cur-card-in .45s ease both;
  /* 2026-07-13 (fallo real de maquetacion): el retraso escalaba sin limite
     con --cur-i (indice de TODOS los cursos del catalogo, no solo los de
     la fila visible). Con 5-6 cursos (diseño original) el retraso maximo
     era de 300-360ms, imperceptible; con 42 cursos (7 idiomas x 6 niveles)
     llegaba a 2.46s para las ultimas tarjetas - cualquier visitante veia
     "cursos en blanco" durante varios segundos al cargar la pagina, no
     una animacion sutil. Limitado a 300ms como tope, igual que el diseño
     original con pocos cursos. */
  animation-delay:min(calc(var(--cur-i, 0) * 60ms), 300ms);
}
@keyframes cur-card-in{
  from{opacity:0;transform:translateY(14px)}
  to{opacity:1;transform:translateY(0)}
}
.cur-card::before{
  content:"";position:absolute;top:0;left:0;right:0;height:4px;
  background:var(--t-accent);transform:scaleX(0);transform-origin:left;
  transition:transform .25s ease;
  z-index:1;
}
.cur-card:hover{box-shadow:0 12px 30px -12px rgba(15,122,92,.35);transform:translateY(-3px);border-color:var(--t-accent)}
.cur-card:hover::before{transform:scaleX(1)}
.cur-card__img{width:100%;height:120px;object-fit:cover;display:block}
.cur-card__img--placeholder{display:flex;align-items:center;justify-content:center}
.cur-card__img--placeholder span{font-size:1.7rem;font-weight:800;color:#fff;letter-spacing:.03em;opacity:.9}
.cur-card__body{padding:1.25rem;display:flex;flex-direction:column;flex:1}

.cur-card__top{display:flex;align-items:center;justify-content:space-between;gap:.5rem;margin-bottom:.7rem}
.cur-card__idioma{display:inline-block;padding:.2rem .6rem;border-radius:999px;font-size:.7rem;font-weight:800;letter-spacing:.02em}
.cur-card__nivel{display:inline-block;padding:.2rem .65rem;border-radius:999px;font-size:.72rem;font-weight:800;letter-spacing:.02em;background:var(--t-accent-faint,var(--t-accent));color:var(--t-accent)}

.cur-card__progreso{display:flex;gap:.25rem}
.cur-card__dot{width:6px;height:6px;border-radius:50%;background:var(--t-line);transition:transform .18s ease}
.cur-card__dot--activo{background:var(--t-accent)}
.cur-card:hover .cur-card__dot--activo{transform:scale(1.5)}
.cur-card:hover .cur-card__dot--activo:last-of-type{background:var(--t-accent-hover,var(--t-accent))}

.cur-card__body h3{margin:.1rem 0 .5rem;color:var(--t-text);font-size:1.15rem;font-weight:800}
.cur-card__teaser{color:var(--t-muted);font-size:.86rem;line-height:1.5;margin:0 0 .8rem}
.cur-card__meta{color:var(--t-muted);font-size:.78rem;margin:0 0 .9rem}
.cur-card__footer{display:flex;align-items:center;justify-content:space-between;gap:.5rem;margin-top:auto;padding-top:.6rem;border-top:1px dashed var(--t-line)}
.cur-card__cta{
  display:inline-flex;align-items:center;gap:.3rem;
  color:var(--t-accent);font-weight:700;font-size:.86rem;
}
.cur-card:hover .cur-card__cta{text-decoration:underline}

.cur-empty{color:var(--t-muted);font-style:italic;grid-column:1/-1;text-align:center;padding:2rem 0}

@media (max-width: 480px) {
  .cur-listado { padding: 1.5rem 1rem; }
  .cur-filtros { flex-direction: column; }
  .cur-filtros select { width: 100%; min-height:44px; }
  .cur-card__body { padding: 1rem; }
}

@media (prefers-reduced-motion: reduce) {
  .cur-card { animation: none; }
  .cur-card__dot, .cur-card:hover .cur-card__dot--activo { transition: none; transform: none; }
}