/* ===== Talleres (usa únicamente tokens) ===== */
#workshops .overline { 
    font-family: var(--nc-font-display, Orbitron), Roboto, sans-serif; 
    letter-spacing: .25em; text-transform: uppercase; font-weight: 700; color: var(--nc-accent-strong);
    display: inline-flex; align-items:center; gap:.75rem; font-size: .9rem;
}

#workshops .overline::after{ content:""; width:72px; height:3px; border-radius:2px; background: var(--nc-accent-primary); display:inline-block; }
#workshops .title { font-family: var(--nc-font-display, Orbitron), Roboto, sans-serif; }

/* Card base */
#workshops .nc-card{
    background: color-mix(in srgb, var(--nc-bg, var(--nc-bg-dark)) 88%, transparent);
    border: 1px solid transparent; border-radius: var(--nc-radius-xl, 1rem);
    box-shadow: var(--nc-shadow-soft, 0 4px 24px rgba(0,0,0,.25));
    overflow: hidden; /* para el zoom de la imagen */
    transition: box-shadow .25s ease, transform .25s ease;
}

#workshops .nc-card:hover{ box-shadow: 0 10px 36px color-mix(in srgb, var(--nc-accent-strong) 30%, transparent); }

/* Media con zoom suave al hover del card */
#workshops .nc-media{ position:relative; overflow:hidden; border-bottom: 1px solid color-mix(in srgb, var(--nc-border, currentColor) 18%, transparent); }
#workshops .nc-media img{ width:100%; height:220px; object-fit:cover; transition: transform .5s ease; display:block; }
#workshops .nc-card:hover .nc-media img{ transform: scale(1.06); }

/* Badges de meta */
#workshops .meta { font-size:.9rem; color: var(--nc-text-muted, rgba(255,255,255,.75)); }
#workshops .meta i{ margin-right:.35rem; color: var(--nc-accent-primary); }

/* Separador y pie */
#workshops .divider{ height:1px; background: color-mix(in srgb, var(--nc-border, currentColor) 20%, transparent); }
#workshops .rating i{ color: var(--nc-accent-strong); }
#workshops .price{ font-weight:700; }

.learn-card{
  border-radius: var(--nc-radius-xl, 1rem);
  background-color: var(--body-bg-2);
}


/* Tema claro */
html[data-bs-theme="light"] #workshops .nc-card{ background: color-mix(in srgb, var(--nc-bg-light) 96%, transparent); }
  html[data-bs-theme="light"] #workshops .nc-media{ border-bottom-color: color-mix(in srgb, var(--nc-border, currentColor) 18%, transparent); }