/* Nefty Studio — base del front (Mateo refina/extiende). Usa custom props --ns-* emitidas por instructor/curso. */
:root{ --ns-primary:#B51D17; --ns-accent:#1D1D1B; }

/* ---- Banner del instructor (inyectado, additive) ---- */
.ns-banner{
	position:relative; margin:0 0 24px; border-radius:16px; overflow:hidden;
	min-height:200px; background:var(--ns-accent,#1D1D1B) var(--ns-cover) center/cover no-repeat;
	box-shadow:0 8px 30px rgba(0,0,0,.12);
}
.ns-banner:before{ content:""; position:absolute; inset:0; background:linear-gradient(0deg,rgba(0,0,0,.55),rgba(0,0,0,.10)); }
.ns-banner-inner{ position:relative; display:flex; align-items:center; gap:18px; padding:28px 32px; min-height:200px; box-sizing:border-box; }
.ns-banner .ns-avatar{ width:84px; height:84px; border-radius:50%; object-fit:cover; border:3px solid var(--ns-primary,#B51D17); box-shadow:0 4px 14px rgba(0,0,0,.3); }
.ns-banner-title{ color:#fff; margin:0 0 4px; font-size:30px; line-height:1.1; font-weight:800; letter-spacing:-.01em; }
.ns-banner-sub{ color:#fff; opacity:.92; margin:0 0 8px; font-size:16px; }
.ns-tags{ display:flex; flex-wrap:wrap; gap:8px; }
.ns-tag{ background:var(--ns-primary,#B51D17); color:#fff; font-size:12px; font-weight:600; padding:3px 12px; border-radius:999px; }

/* ---- Acentos del perfil heredando el color del instructor ---- */
.tutor-profile-area a, .tutor-instructor-profile a{ color:var(--ns-primary); }

/* ---- Hero por curso ---- */
.tutor-course-details-page .tutor-course-header,
.single-courses .tutor-course-header,
body.single-courses .tutor-course-top-meta{
	--accent:var(--ns-course-accent,var(--ns-primary));
}
/* Fondo por curso a NIVEL PÁGINA COMPLETA (imagen / sólido / gradiente), DETRÁS de las
   tarjetas y secciones de contenido. Capas: overlay/tinte configurable sobre el fondo, en
   el wrapper #page; los contenedores de contenido se vuelven transparentes para dejarlo ver.
   Solo aplica cuando el curso tiene fondo (body.ns-has-course-bg). */
body.single-courses.ns-has-course-bg #page.site{
	background-image:
		linear-gradient(var(--ns-course-overlay,rgba(255,255,255,.70)), var(--ns-course-overlay,rgba(255,255,255,.70))),
		var(--ns-course-bg);
	background-size:cover;
	background-position:center center;
	background-attachment:fixed;
	background-repeat:no-repeat;
}
/* Wrappers de contenido transparentes → el fondo de página se ve detrás de las tarjetas
   (las tarjetas/secciones de Tutor/EduMall conservan su propio fondo y siguen legibles). */
body.single-courses.ns-has-course-bg .content-wrapper,
body.single-courses.ns-has-course-bg #main-content,
body.single-courses.ns-has-course-bg .site-content,
body.single-courses.ns-has-course-bg .page-content,
body.single-courses.ns-has-course-bg .tutor-course-details-page,
body.single-courses.ns-has-course-bg .tutor-wrap{
	background-color:transparent !important;
}
/* Panel de contenido semi-opaco DETRÁS de la columna de contenido del curso (About/Curriculum/
   instructor), para recuperar contraste del cuerpo sobre el fondo de página. El fondo
   personalizado se sigue viendo en los márgenes y entre columnas. */
body.single-courses.ns-has-course-bg .tutor-single-course-main-content{
	background:rgba(255,255,255,.92);
	border-radius:16px;
	padding:30px 32px;
	box-shadow:0 10px 34px rgba(0,0,0,.08);
	-webkit-backdrop-filter:blur(2px);
	backdrop-filter:blur(2px);
}
@media (max-width:782px){
	body.single-courses.ns-has-course-bg .tutor-single-course-main-content{ padding:20px 18px; }
}