/* Marco metálico para las portadas de la rejilla de cursos de la portada.
   SOLO PARA sitio_prueba (lo enlaza scripts/marco_rejilla_prueba.py). Usa las variables de carrusel-cursos.css,
   con valores de reserva por si se carga sola. Plateado: --cpx-metal: var(--cpx-metal-plata) o clase .cpx-plata. */
.grid .course .thumb{margin:8px 8px 0;box-sizing:border-box;border-radius:12px;
  border:var(--cpx-marco-ancho,4px) solid transparent;
  background:linear-gradient(#0b2240,#0b2240) padding-box,var(--cpx-metal,linear-gradient(135deg,#d9aa33 0%,#f2d37a 45%,#d9aa33 70%,#f2d37a 100%)) border-box;
  box-shadow:var(--cpx-marco-sombra,0 10px 26px rgba(0,0,0,.45),0 2px 6px rgba(0,0,0,.35));
  transition:box-shadow .3s,filter .3s}
.grid .course .thumb img.foto{border-radius:8px}
.grid .course .thumb:has(img.foto)::after{border-radius:8px}
.grid .course:hover .thumb,.grid .course:focus-visible .thumb{
  box-shadow:var(--cpx-marco-sombra,0 10px 26px rgba(0,0,0,.45),0 2px 6px rgba(0,0,0,.35)),var(--cpx-marco-brillo,0 0 0 1px rgba(255,255,255,.35),0 0 22px rgba(255,236,190,.38));
  filter:brightness(1.06)}
/* con el marco la portada es algo más estrecha: título y etiqueta un poco más compactos para que no se monten */
.grid .course .thumb .no{left:10px;top:10px}
.grid .course .thumb .ttl{left:10px;bottom:10px;font-size:16px}
.grid .course .thumb .price{top:10px;right:10px}
@media (max-width:640px){.grid .course .thumb{border-width:var(--cpx-marco-ancho,3px)}.grid .course .thumb .ttl{font-size:20px}}
@media (prefers-reduced-motion:reduce){.grid .course .thumb{transition:none}}