/*
 * TeamHouse LMS UI — plataforma.
 * Tokens en :root, tema oscuro en [data-th-theme="dark"].
 */

/*
 * Montserrat — variable (100-900), servida desde el propio plugin.
 * Sin pedidos a Google: menos latencia y nada de datos de tus alumnos a terceros.
 */
@font-face {
	font-family: "Montserrat";
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url("../fonts/montserrat-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "Montserrat";
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url("../fonts/montserrat-latin-ext.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: "Montserrat";
	font-style: italic;
	font-weight: 100 900;
	font-display: swap;
	src: url("../fonts/montserrat-latin-italic.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "Montserrat";
	font-style: italic;
	font-weight: 100 900;
	font-display: swap;
	src: url("../fonts/montserrat-latin-ext-italic.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
	--th-accent: #ff5a1f;
	--th-accent-soft: rgba(255, 90, 31, .1);
	--th-accent-ink: #c2410c;
	--th-done: #17794a;
	--th-danger: #b42318;
	--th-danger-soft: rgba(180, 35, 24, .08);

	--th-bg: #ffffff;
	--th-bg-soft: #fafafa;
	--th-rail: #e9e9ee;
	--th-surface: #ffffff;
	--th-surface-2: #f6f6f7;

	--th-ink: #16181d;
	--th-ink-2: #5b6070;
	--th-ink-3: #8a8f9e;

	--th-line: #e7e8ec;
	--th-line-strong: #d6d8de;

	--th-radius: 14px;
	--th-radius-sm: 10px;
	--th-radius-pill: 999px;

	--th-shadow: none;
	--th-sidebar-w: 258px;
	--th-topbar-h: 68px;
	--th-tabbar-h: 60px;
	--th-admin-bar: 0px;

	--th-font: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

[data-th-theme="dark"] {
	--th-bg: #08090c;
	--th-bg-soft: #0c0d11;
	--th-rail: #191c24;
	--th-surface: #15171d;
	--th-surface-2: #1b1e26;

	--th-ink: #f2f3f5;
	--th-ink-2: #a9aebd;
	--th-ink-3: #767c8c;

	--th-line: #242833;
	--th-line-strong: #2f3441;

	--th-accent-soft: rgba(255, 90, 31, .16);
	--th-done: #2f9e68;
	--th-danger: #f97066;
	--th-danger-soft: rgba(249, 112, 102, .12);
	--th-shadow: none;
}

/* ---------------------------------------------------------------- base --- */

body.th-campus {
	margin: 0;
	overflow-x: visible;
	background: var(--th-bg);
	color: var(--th-ink);
	font-family: var(--th-font);
	font-size: 15px;
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
}

.th-campus *,
.th-campus *::before,
.th-campus *::after { box-sizing: border-box; }

/*
 * Varios componentes se ocultan con el atributo hidden desde JS. Nuestras
 * reglas de display (flex, grid) lo pisaban y los dejaban a la vista.
 */
.th-campus [hidden] { display: none !important; }

/* ------------------------------------------------ blindaje del tema --- */
/*
 * La plataforma tiene que verse igual con cualquier tema activo. Dos capas la
 * protegen:
 *
 * 1. La hoja se encola en wp_enqueue_scripts con prioridad 9999
 *    (TH_LMS_Plugin::enqueue_late), así se imprime después de la del tema y
 *    en igualdad de especificidad ganamos por orden.
 * 2. Este bloque, que devuelve a su valor por defecto todo lo que los resets
 *    de tema suelen tocar. Hello Elementor, por ejemplo, deja los botones sin
 *    fondo con [type="submit"] { background: transparent } y los campos con
 *    borde gris con input[type="text"] { border: 1px solid #666 }.
 *
 * Pesa una sola clase a propósito y va al principio del archivo: cualquier
 * regla de un componente nuestro viene después o con más clases, así que lo
 * sobreescribe sin pelear. Y todo cuelga de .th-campus: fuera de la
 * plataforma el tema manda.
 */
.th-campus a { color: inherit; text-decoration: none; }
.th-campus h1, .th-campus h2, .th-campus p, .th-campus ul { margin: 0; }
.th-campus ul { list-style: none; padding: 0; }

/*
 * Lo de acá abajo va envuelto en :where(): pesa una sola clase, lo justo para
 * ganarle al reset del tema (que apunta al elemento) y lo justo para perder
 * contra cualquier regla nuestra de componente.
 */
.th-campus :where( a ) { background-color: transparent; }

.th-campus :where( h1, h2, h3, h4, h5, h6 ) {
	margin: 0;
	font-family: inherit;
	font-weight: 700;
	line-height: inherit;
	color: inherit;
	text-transform: none;
	letter-spacing: inherit;
}

/* Los mismos cuerpos que trae el navegador: ningún tema los mueve. */
.th-campus :where( h1 ) { font-size: 2em; }
.th-campus :where( h2 ) { font-size: 1.5em; }
.th-campus :where( h3 ) { font-size: 1.17em; }
.th-campus :where( h4 ) { font-size: 1em; }
.th-campus :where( h5 ) { font-size: .83em; }
.th-campus :where( h6 ) { font-size: .67em; }

.th-campus :where( p, ol, figure, blockquote ) { margin: 0; }
.th-campus :where( ol ) { padding: 0; }
.th-campus :where( img, svg, video ) { max-width: 100%; }
.th-campus :where( hr ) { margin: 0; border: 0; border-top: 1px solid var(--th-line); }

.th-campus button:where( :not( [class*="tutor-"], [class*="woocommerce"], [class*="elementor"], [class*="wmc"], [class*="mce-"], [class*="select2"] ) ),
.th-campus input:where( :not( [class*="tutor-"], [class*="woocommerce"], [class*="elementor"], [class*="wmc"], [class*="mce-"], [class*="select2"] ) ),
.th-campus optgroup:where( :not( [class*="tutor-"], [class*="woocommerce"], [class*="elementor"], [class*="wmc"], [class*="mce-"], [class*="select2"] ) ),
.th-campus option:where( :not( [class*="tutor-"], [class*="woocommerce"], [class*="elementor"], [class*="wmc"], [class*="mce-"], [class*="select2"] ) ),
.th-campus select:where( :not( [class*="tutor-"], [class*="woocommerce"], [class*="elementor"], [class*="wmc"], [class*="mce-"], [class*="select2"] ) ),
.th-campus textarea:where( :not( [class*="tutor-"], [class*="woocommerce"], [class*="elementor"], [class*="wmc"], [class*="mce-"], [class*="select2"] ) ) {
	margin: 0;
	font: inherit;
	letter-spacing: inherit;
	text-transform: none;
	max-width: 100%;
	box-shadow: none;
}

/* El color lo heredan del contenedor: si no, el tema los deja en su tinta. */
.th-campus button:where( :not( [class*="tutor-"], [class*="woocommerce"], [class*="elementor"], [class*="wmc"], [class*="mce-"], [class*="select2"] ) ) { color: inherit; }
.th-campus option:where( :not( [class*="tutor-"], [class*="woocommerce"], [class*="elementor"], [class*="wmc"], [class*="mce-"], [class*="select2"] ) ) { color: var(--th-ink); background-color: var(--th-surface); }

/*
 * Los botones arrancan desnudos: el fondo, el borde y el aire los pone cada
 * variante. :where() no suma peso, así que esto vale una sola clase: empata
 * con el [type="submit"] del tema (y gana por venir después) pero pierde
 * contra .th-btn, que está más abajo en este mismo archivo.
 */
.th-campus :where(
	button:not( [class*="tutor-"], [class*="woocommerce"], [class*="elementor"], [class*="wmc"], [class*="mce-"], [class*="select2"] ),
	[type="button"]:not( [class*="tutor-"], [class*="woocommerce"], [class*="elementor"], [class*="wmc"], [class*="mce-"], [class*="select2"] ),
	[type="reset"]:not( [class*="tutor-"], [class*="woocommerce"], [class*="elementor"], [class*="wmc"], [class*="mce-"], [class*="select2"] ),
	[type="submit"]:not( [class*="tutor-"], [class*="woocommerce"], [class*="elementor"], [class*="wmc"], [class*="mce-"], [class*="select2"] )
) {
	-webkit-appearance: none;
	appearance: none;
	padding: 0;
	width: auto;
	background: none;
	border: 0;
	border-radius: 0;
	color: inherit;
	text-align: inherit;
	text-shadow: none;
	cursor: pointer;
}

/* Vuelven a su caja de siempre los elementos que los resets suelen mover. */
.th-campus :where( small ) { font-size: smaller; }
.th-campus :where( label ) { display: inline; }
.th-campus :where( select ) { display: inline-block; }
.th-campus :where( details, summary ) { display: block; }
.th-campus :where( summary ) { cursor: pointer; }
.th-campus :where( fieldset ) { margin: 0; padding: 0; border: 0; min-width: 0; }
.th-campus :where( legend ) { padding: 0; }

/*
 * Los campos de texto: :where() no suma especificidad, así que esto sigue
 * pesando una clase y los componentes lo siguen pisando.
 */
.th-campus input:where( :not( [type="checkbox"], [type="radio"], [type="range"], [type="color"], [type="file"], [type="image"], [type="button"], [type="reset"], [type="submit"], [class*="tutor-"], [class*="woocommerce"], [class*="elementor"], [class*="wmc"], [class*="mce-"], [class*="select2"] ) ),
.th-campus select:where( :not( [class*="tutor-"], [class*="woocommerce"], [class*="elementor"], [class*="wmc"], [class*="mce-"], [class*="select2"] ) ),
.th-campus textarea:where( :not( [class*="tutor-"], [class*="woocommerce"], [class*="elementor"], [class*="wmc"], [class*="mce-"], [class*="select2"] ) ) {
	padding: 1px 2px;
	color: var(--th-ink);
	background-color: var(--th-surface);
	border: 1px solid var(--th-line-strong);
	border-radius: var(--th-radius-sm);
}

/* El <select> conserva su flecha nativa: sólo los campos de texto se pelan. */
.th-campus input:where( :not( [type="checkbox"], [type="radio"], [type="range"], [type="color"], [type="file"], [type="image"], [type="button"], [type="reset"], [type="submit"], [class*="tutor-"], [class*="woocommerce"], [class*="elementor"], [class*="wmc"], [class*="mce-"], [class*="select2"] ) ),
.th-campus textarea:where( :not( [class*="tutor-"], [class*="woocommerce"], [class*="elementor"], [class*="wmc"], [class*="mce-"], [class*="select2"] ) ) {
	-webkit-appearance: none;
	appearance: none;
	background-image: none;
}

.th-campus input::placeholder,
.th-campus textarea::placeholder { color: var(--th-ink-3); opacity: 1; }

.th-campus :where( label ) { line-height: inherit; font-weight: inherit; color: inherit; }
.th-campus :where( [type="checkbox"], [type="radio"] ) { accent-color: var(--th-accent); }

.th-campus :where( table ) { border-collapse: collapse; width: 100%; }
.th-campus :where( th, td ) { text-align: left; }

.th-icon { width: 18px; height: 18px; flex: 0 0 auto; }

.th-campus .screen-reader-text,
.screen-reader-text {
	position: absolute;
	width: 1px; height: 1px;
	padding: 0;
	margin: -1px;
	border: 0;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	white-space: nowrap;
}

.th-app {
	display: grid;
	grid-template-columns: var(--th-sidebar-w) minmax(0, 1fr);
	min-height: 100vh;
}

.th-app.is-collapsed { --th-sidebar-w: 68px; }

/* ------------------------------------------------------------- sidebar --- */

.th-sidebar {
	position: sticky;
	top: var(--th-admin-bar);
	z-index: 40;
	display: flex;
	flex-direction: column;
	height: calc(100vh - var(--th-admin-bar));
	overflow: hidden auto;
	padding: 18px 14px 16px;
	background: var(--th-rail);
	border-right: 1px solid var(--th-line);
}



.th-sidebar__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	padding: 2px 6px 18px;
}

.th-brand__logo {
	display: block;
	max-height: 38px;
	max-width: 160px;
	width: auto;
	height: auto;
	object-fit: contain;
}
.th-brand__text { font-weight: 800; letter-spacing: .06em; text-transform: uppercase; font-size: 15px; }

.th-iconbtn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px; height: 32px;
	padding: 0;
	border: 0;
	border-radius: var(--th-radius-sm);
	background: transparent;
	color: var(--th-ink-3);
	transition: background .15s ease, color .15s ease;
}

.th-iconbtn svg { width: 18px; height: 18px; }
.th-iconbtn:hover { background: var(--th-surface-2); color: var(--th-ink); }

.th-nav { display: flex; flex-direction: column; gap: 12px; }
.th-nav__group + .th-nav__group { border-top: 1px solid var(--th-line); padding-top: 12px; }

.th-nav__label {
	padding: 0 10px 8px;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .07em;
	text-transform: uppercase;
	color: var(--th-ink-3);
}

.th-nav__list { display: flex; flex-direction: column; gap: 2px; }

.th-nav__link {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 6px 10px;
	border-radius: var(--th-radius-sm);
	color: var(--th-ink-2);
	font-size: 14px;
	transition: background .15s ease, color .15s ease;
}

.th-nav__link:hover { background: var(--th-surface-2); color: var(--th-ink); }

.th-nav__link.is-active {
	background: var(--th-accent);
	color: #fff;
	font-weight: 600;
}

.th-nav__link.is-active:hover { background: color-mix(in srgb, var(--th-accent) 90%, #000); color: #fff; }
.th-nav__link.is-active .th-icon { color: #fff; }
.th-nav__link.is-active .th-pill--accent { background: rgba(255, 255, 255, .22); color: #fff; }

.th-nav__text { flex: 1 1 auto; }

.th-pill {
	display: inline-flex;
	align-items: center;
	padding: 2px 8px;
	border-radius: var(--th-radius-pill);
	font-size: 11px;
	font-weight: 600;
	line-height: 1.6;
}

.th-pill--accent { background: var(--th-accent-soft); color: var(--th-accent); }

.th-sidebar__foot { margin-top: auto; padding-top: 20px; display: flex; flex-direction: column; gap: 14px; }

.th-referral {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 12px 14px;
	border: 1px solid var(--th-line);
	border-radius: var(--th-radius);
	font-weight: 600;
	font-size: 14px;
	color: var(--th-accent);
	transition: border-color .15s ease, background .15s ease;
}

.th-referral:hover { border-color: var(--th-accent); background: var(--th-accent-soft); }
.th-referral__icon { display: inline-flex; }

.th-promo {
	padding: 14px;
	border: 1px solid var(--th-line);
	border-radius: var(--th-radius);
	background: var(--th-surface);
}

.th-promo__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.th-promo__title { font-size: 13px; font-weight: 600; }
.th-promo__media { margin: 12px 0; border-radius: var(--th-radius-sm); overflow: hidden; }
.th-promo__media img { display: block; width: 100%; height: auto; }
.th-promo__text { font-size: 12px; color: var(--th-ink-2); }
.th-promo__foot { display: flex; justify-content: space-between; align-items: center; margin-top: 12px; }

.th-link { background: none; border: 0; padding: 0; font-size: 13px; font-weight: 600; color: var(--th-accent); }

/* .th-campus a fija color: inherit, así que los enlaces necesitan más peso. */
.th-campus .th-link { color: var(--th-accent); }
.th-campus .th-link--muted { color: var(--th-ink-2); font-weight: 500; }
.th-campus p a.th-link { font-size: inherit; text-decoration: underline; text-underline-offset: 2px; }

.th-version { font-size: 11px; letter-spacing: .12em; color: var(--th-ink-3); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
/*
 * Selector de tema: vive pegado al borde derecho de la pantalla, fuera del
 * menú lateral, para que esté a mano desde cualquier pantalla de la app.
 */
.th-themedock {
	position: fixed;
	right: 14px;
	top: 50%;
	z-index: 30;
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 5px;
	border: 1px solid var(--th-line);
	border-radius: var(--th-radius-pill);
	background: var(--th-surface);
	box-shadow: 0 6px 24px rgba(0, 0, 0, .12);
	transform: translateY(-50%);
}

.th-campus .th-theme__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: var(--th-ink-3);
	transition: background .15s ease, color .15s ease;
}

.th-theme__btn svg { width: 19px; height: 19px; }
.th-campus .th-theme__btn:hover { background: var(--th-surface-2); color: var(--th-ink); }
.th-campus .th-theme__btn.is-active { background: var(--th-ink); color: var(--th-bg); }

@media (max-width: 1024px) {
	/* En pantallas chicas se acuesta en la esquina, sin comerse el contenido. */
	.th-themedock { top: auto; right: 12px; bottom: calc(var(--th-tabbar-h) + 12px); flex-direction: row; transform: none; }
	.th-campus .th-theme__btn { width: 36px; height: 36px; }
	body.th-view-leccion .th-themedock { bottom: 100px; }
}

/* -------------------------------------------------------------- topbar --- */

.th-main { display: flex; flex-direction: column; min-width: 0; }

.th-topbar {
	position: sticky;
	top: var(--th-admin-bar);
	z-index: 20;
	display: flex;
	align-items: center;
	gap: 12px;
	height: var(--th-topbar-h);
	padding: 0 28px;
	background: color-mix(in srgb, var(--th-bg) 88%, transparent);
	backdrop-filter: saturate(180%) blur(10px);
	border-bottom: 1px solid var(--th-line);
}

.th-topbar__burger { display: inline-flex; }
.th-topbar__title { font-size: 16px; font-weight: 600; }
.th-topbar__actions { margin-left: auto; display: flex; align-items: center; gap: 12px; }

.th-quota {
	padding: 5px 10px;
	border: 1px solid var(--th-accent);
	border-radius: var(--th-radius-sm);
	background: var(--th-accent-soft);
	color: var(--th-accent-ink);
	font-size: 12px;
	font-weight: 600;
	white-space: nowrap;
}

[data-th-theme="dark"] .th-quota { color: var(--th-accent); }

.th-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 10px 16px;
	border: 1px solid transparent;
	border-radius: var(--th-radius-sm);
	font-size: 14px;
	font-weight: 600;
	transition: background .15s ease, border-color .15s ease, color .15s ease, transform .1s ease;
}

.th-btn:active { transform: translateY(1px); }
.th-btn--accent { background: var(--th-accent); color: #fff; }
.th-btn--accent:hover { background: color-mix(in srgb, var(--th-accent) 88%, #000); }

.th-btn--ghost { border-color: var(--th-line-strong); background: var(--th-surface); color: var(--th-ink); }
.th-btn--ghost:hover { border-color: var(--th-ink-3); }
.th-btn--block { width: 100%; }
.th-btn--sm { padding: 8px 13px; font-size: 13px; }

.th-user { position: relative; }

.th-user__btn { padding: 0; border: 0; background: none; line-height: 0; }
.th-user__btn img { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; }

.th-menu {
	position: absolute;
	right: 0;
	top: calc(100% + 8px);
	min-width: 190px;
	padding: 8px;
	background: var(--th-surface);
	border: 1px solid var(--th-line);
	border-radius: var(--th-radius);
	box-shadow: 0 6px 20px rgba(0, 0, 0, .12);
	z-index: 30;
}

.th-menu__name { padding: 6px 10px 10px; font-size: 13px; font-weight: 600; border-bottom: 1px solid var(--th-line); margin-bottom: 6px; }
.th-menu__item { display: block; padding: 8px 10px; border-radius: var(--th-radius-sm); font-size: 14px; color: var(--th-ink-2); }
.th-menu__item:hover { background: var(--th-surface-2); color: var(--th-ink); }

/* ------------------------------------------------------------- content --- */

/* Los costados van en variables: hay barras que necesitan salirse del padding. */
.th-content { --th-px: 28px; --th-pr: 28px; padding: 24px var(--th-pr) 64px var(--th-px); }

/* ---------------------------------------- cargando otra pestaña --- */
/*
 * Dos avisos escalonados, los dos con retardo: si la pantalla llega rápido no
 * se ve ninguno y el parpadeo no molesta. A los 140 ms aparece la barra fina
 * arriba; si a los 420 ms todavía no llegó, el velo con el spinner sobre el
 * contenido, para que quede claro que la pestaña está en camino.
 */
.th-loadbar {
	position: fixed;
	top: var(--th-admin-bar);
	left: 0;
	right: 0;
	z-index: 60;
	height: 2px;
	overflow: hidden;
	pointer-events: none;
}

.th-loadbar::after {
	content: "";
	display: block;
	width: 28%;
	height: 100%;
	border-radius: var(--th-radius-pill);
	background: var(--th-accent);
	animation: th-loadbar 1.05s ease-in-out infinite;
}

@keyframes th-loadbar {
	from { transform: translateX(-100%); }
	to   { transform: translateX(460%); }
}

.th-loading {
	position: fixed;
	top: calc(var(--th-admin-bar) + var(--th-topbar-h));
	left: var(--th-sidebar-w);
	right: 0;
	bottom: 0;
	z-index: 28;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 13px;
	background: var(--th-bg);
	opacity: 0;
	pointer-events: none;
	transition: opacity .2s ease;
}

.th-loading.is-active { opacity: .97; pointer-events: auto; }

.th-loading__ring {
	width: 30px;
	height: 30px;
	border: 2px solid var(--th-line-strong);
	border-top-color: var(--th-accent);
	border-radius: 50%;
	animation: th-splash-spin 1s linear infinite;
}

.th-campus .th-loading__msg { font-size: 13.5px; font-weight: 600; color: var(--th-ink-2); }

@media (max-width: 1024px) {
	.th-loading { left: 0; }
}

@media (prefers-reduced-motion: reduce) {
	.th-loadbar::after { animation-duration: 2.6s; }
	.th-loading__ring { animation-duration: 2.6s; }
}

/* Lugar para el selector de tema flotante. */
@media (min-width: 1025px) {
	.th-content { --th-pr: 76px; }
}
.th-page { max-width: none; }

.th-tabs { display: flex; gap: 22px; border-bottom: 1px solid var(--th-line); margin-bottom: 22px; }

.th-tab {
	position: relative;
	padding: 10px 2px 14px;
	border: 0;
	background: none;
	font-size: 14px;
	color: var(--th-ink-3);
	transition: color .15s ease;
}

.th-tab:hover { color: var(--th-ink); }
.th-tab.is-active { color: var(--th-ink); font-weight: 600; }

.th-tab.is-active::after {
	content: "";
	position: absolute;
	left: 0; right: 0; bottom: -1px;
	height: 2px;
	background: var(--th-ink);
	border-radius: 2px;
}

.th-filters {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	margin-bottom: 22px;
}

.th-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }

.th-chip {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 7px 14px;
	border: 1px solid var(--th-line-strong);
	border-radius: var(--th-radius-pill);
	background: var(--th-surface);
	font-size: 13px;
	color: var(--th-ink-2);
	transition: border-color .15s ease, background .15s ease, color .15s ease;
}

.th-chip:hover { border-color: var(--th-ink-3); color: var(--th-ink); }

.th-chip.is-active {
	border-color: var(--th-accent);
	background: var(--th-accent-soft);
	color: var(--th-accent-ink);
	font-weight: 600;
}

[data-th-theme="dark"] .th-chip.is-active { color: var(--th-accent); }

.th-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--th-accent); }
.th-filters__sep { width: 1px; height: 22px; background: var(--th-line-strong); margin: 0 4px; }

.th-sort { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--th-ink-2); }

.th-sort select,
.th-search input {
	padding: 8px 12px;
	border: 1px solid var(--th-line-strong);
	border-radius: var(--th-radius-sm);
	background: var(--th-surface);
	color: var(--th-ink);
	font: inherit;
	font-size: 13px;
	font-weight: 600;
}

.th-search { margin-left: auto; }
.th-search input { font-weight: 400; min-width: 220px; }

/* --------------------------------------------------------------- cards --- */

.th-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
	gap: 18px;
}

.th-grid-wrap[aria-busy="true"] { opacity: .5; pointer-events: none; transition: opacity .15s ease; }

/* La tarjeta es el panel: portada, avance, datos y acción, todo adentro. */
.th-card { display: flex; flex-direction: column; }

.th-card__panel {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	background: var(--th-surface);
	border: 1px solid var(--th-line);
	border-radius: 18px;
	box-shadow: var(--th-shadow);
	overflow: hidden;
	transition: border-color .15s ease;
}

.th-card:hover .th-card__panel { border-color: var(--th-ink-3); }

/* Adentro de la tarjeta todo acompaña el radio del panel. */
/* .th-campus .th-btn fija 10px más abajo en el archivo: hay que pesar más. */
.th-card .th-btn,
.th-campus .th-card .th-btn,
.th-card .th-strip,
.th-card .th-cardstrip { border-radius: 12px; }

/* Avance de las clases: primera línea del cuerpo, debajo de la portada. */
.th-cardbar { display: flex; flex-direction: column; gap: 7px; margin: 0 0 13px; }
.th-cardbar__head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; font-size: 12.5px; font-weight: 600; line-height: 1.35; }
.th-cardbar__pct { flex: 0 0 auto; color: var(--th-ink-3); }
.th-cardbar__track { height: 5px; border-radius: var(--th-radius-pill); background: var(--th-surface-2); overflow: hidden; }
.th-cardbar__track span { display: block; height: 100%; border-radius: inherit; background: var(--th-accent); transition: width .3s ease; }
.th-card--finalizado .th-cardbar__track span { background: var(--th-done); }


/*
 * El ritmo vertical de la tarjeta se define con márgenes explícitos y no con
 * un gap único: cada dato necesita distinta separación del que le sigue.
 */
.th-card__body { display: flex; flex-direction: column; padding: 14px 15px 0; flex: 1 1 auto; }


/* Quién lo da. */
.th-card__by,
.th-campus .th-card__by { display: flex; align-items: center; gap: 9px; margin: 0 0 13px; font-size: 13.5px; color: var(--th-ink-2); }
.th-card__face { width: 26px; height: 26px; flex: 0 0 auto; font-size: 10px; }

/* Qué incluye: clases, duración, modalidad y fecha cuando corresponde. */
.th-card__specs,
.th-campus .th-card__specs {
	display: flex;
	flex-wrap: wrap;
	gap: 7px 14px;
	margin: 0;
	padding: 13px 0 0;
	border-top: 1px solid var(--th-line);
	list-style: none;
}

.th-card__specs li { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; line-height: 1.2; color: var(--th-ink-2); }
.th-card__specs svg { width: 15px; height: 15px; flex: 0 0 auto; color: var(--th-ink-3); }

/* Precio al lado del botón, en el catálogo. */
.th-card__buy { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.th-card__buy .th-btn { flex: 0 0 auto; }
.th-card__top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }

.th-badge {
	display: inline-flex;
	align-items: center;
	padding: 4px 11px;
	border: 1px solid var(--th-line-strong);
	border-radius: var(--th-radius-pill);
	font-size: 12px;
	color: var(--th-ink-2);
	white-space: nowrap;
}

.th-badge--cursando { border-color: var(--th-accent); color: var(--th-accent); background: var(--th-accent-soft); }
.th-badge--finalizado { border-color: #b7ddc4; color: #17794a; background: rgba(23, 121, 74, .08); }
[data-th-theme="dark"] .th-badge--finalizado { border-color: #2c5c42; color: #6ee7a8; }

.th-card__comision { font-size: 12px; color: var(--th-ink-3); white-space: nowrap; }
.th-card__price { font-size: 16px; font-weight: 700; color: var(--th-ink); white-space: nowrap; letter-spacing: -.01em; }

/* El nombre del curso va sobre la portada, apoyado en el degradado. */
.th-card__title,
.th-campus .th-card__title {
	position: absolute;
	z-index: 2;
	inset: auto 14px 12px;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	margin: 0;
	overflow: hidden;
	font-size: 17px;
	line-height: 1.28;
	font-weight: 700;
	letter-spacing: -.01em;
	color: #fff;
}

/* Degradado bajo pero intenso: sólo el pie de la imagen. */
.th-card__shade {
	position: absolute;
	inset: auto 0 0;
	z-index: 1;
	height: 58%;
	background: linear-gradient(180deg, transparent, rgba(0, 0, 0, .88));
	pointer-events: none;
}

.th-card__cover--vacia .th-card__title,
.th-campus .th-card__cover--vacia .th-card__title { color: var(--th-ink); }

.th-card__meta { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--th-ink-2); }
.th-card__meta li { display: flex; align-items: center; gap: 8px; }
.th-card__meta .th-icon { width: 15px; height: 15px; color: var(--th-ink-3); }

/* Descripción breve: dos líneas y corta, para que no empuje la ficha. */
.th-card__note,
.th-campus .th-card__note {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	margin: 0 0 13px;
	overflow: hidden;
	font-size: 13px;
	line-height: 1.5;
	color: var(--th-ink-2);
}

.th-progress { display: flex; flex-direction: column; gap: 8px; }
.th-progress__head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; font-size: 12.5px; font-weight: 600; line-height: 1.35; }
.th-progress__count { flex: 0 0 auto; color: var(--th-ink-2); font-weight: 600; }

.th-progress__bar { height: 6px; border-radius: var(--th-radius-pill); background: var(--th-surface-2); overflow: hidden; }
.th-progress__bar span { display: block; height: 100%; border-radius: inherit; background: var(--th-accent); transition: width .3s ease; }
.th-card--finalizado .th-progress__bar span { background: var(--th-done); }
.th-progress--wide { max-width: 460px; margin: 18px 0 26px; }

.th-card__foot { margin-top: auto; padding: 14px 15px 15px; display: flex; flex-direction: column; gap: 10px; }

.th-strip {
	display: flex;
	align-items: center;
	gap: 9px;
	padding: 11px 13px;
	border-radius: var(--th-radius-sm);
	background: var(--th-surface-2);
	font-size: 13px;
	color: var(--th-ink-2);
}

.th-strip .th-icon { color: var(--th-ink-3); }
.th-strip strong { color: var(--th-ink); }

/* --------------------------------------------------------- vacío/otros --- */

.th-empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	padding: 72px 24px;
	text-align: center;
	border: 1px dashed var(--th-line-strong);
	border-radius: var(--th-radius);
	color: var(--th-ink-2);
}

.th-empty svg { width: 42px; height: 42px; color: var(--th-ink-3); }
.th-empty h2 { font-size: 17px; color: var(--th-ink); }
.th-empty p { font-size: 14px; max-width: 380px; }
.th-empty .th-btn { margin-top: 8px; }

.th-course-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.th-course-head__title { font-size: 26px; font-weight: 700; margin-top: 10px; letter-spacing: -.02em; }
.th-course-head__meta { font-size: 13px; color: var(--th-ink-2); margin-top: 4px; }

.th-syllabus { display: flex; flex-direction: column; gap: 10px; max-width: 760px; }

.th-topic { border: 1px solid var(--th-line); border-radius: var(--th-radius); background: var(--th-surface); }
.th-topic summary { display: flex; justify-content: space-between; padding: 14px 16px; font-weight: 600; cursor: pointer; }
.th-topic summary small { color: var(--th-ink-3); font-weight: 400; }
.th-topic__list { padding: 0 16px 12px; display: flex; flex-direction: column; }
.th-topic__list a { display: flex; align-items: center; gap: 9px; padding: 9px 0; font-size: 14px; color: var(--th-ink-2); border-top: 1px solid var(--th-line); }
.th-topic__list a:hover { color: var(--th-accent); }

.th-profile { display: flex; align-items: center; gap: 18px; margin-bottom: 26px; }
.th-profile__avatar { width: 72px; height: 72px; border-radius: 50%; }
.th-profile__name { font-size: 22px; font-weight: 700; }
.th-profile__mail { font-size: 14px; color: var(--th-ink-2); }

.th-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; margin-bottom: 24px; max-width: 720px; }
.th-stat { padding: 18px; border: 1px solid var(--th-line); border-radius: var(--th-radius); background: var(--th-surface); }
.th-stat__value { display: block; font-size: 26px; font-weight: 700; }
.th-stat__label { font-size: 13px; color: var(--th-ink-2); }

.th-note { font-size: 14px; color: var(--th-ink-2); }

/* Uso vía shortcode dentro del tema. */
.th-scope { font-family: var(--th-font); color: var(--th-ink); }

/* --------------------------------------------------------- responsive --- */

@media (max-width: 1024px) {
	.th-app { grid-template-columns: minmax(0, 1fr); }

	.th-sidebar {
		position: fixed;
		inset: 0 auto 0 0;
		width: 280px;
		z-index: 60;
		transform: translateX(-100%);
		transition: transform .2s ease;
		box-shadow: var(--th-shadow);
	}

	.th-app.is-open .th-sidebar { transform: translateX(0); }
	.th-app.is-collapsed { --th-sidebar-w: 0px; }
	.th-app.is-collapsed .th-sidebar { display: flex; padding: 18px 14px 16px; }
	.th-sidebar__toggle { display: none; }

	/* Los accesos principales viven en la barra inferior: acá sobran. */
	.th-nav__group--primary { display: none; }
}

/* ------------------------------------------- barra inferior de celular --- */
/*
 * En celular los cuatro accesos de siempre quedan fijos abajo, como en una
 * app. El resto (certificados, soporte, compras, perfil y los enlaces de la
 * comunidad) sigue en el menú lateral, que se abre desde la cabecera.
 */
.th-tabbar { display: none; }

@media (max-width: 1024px) {
	.th-campus .th-tabbar {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 45;
		display: grid;
		grid-auto-flow: column;
		grid-auto-columns: 1fr;
		height: var(--th-tabbar-h);
		padding-bottom: env(safe-area-inset-bottom);
		background: var(--th-surface);
		border-top: 1px solid var(--th-line);
	}

	.th-campus .th-tabbar__link {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 3px;
		min-width: 0;
		padding: 8px 4px 7px;
		color: var(--th-ink-3);
		transition: color .15s ease;
	}

	.th-tabbar__ico { position: relative; display: inline-flex; }
	.th-tabbar__ico svg { width: 22px; height: 22px; }

	.th-tabbar__dot {
		position: absolute;
		top: -1px;
		right: -2px;
		width: 7px;
		height: 7px;
		border-radius: 50%;
		background: var(--th-accent);
		border: 1.5px solid var(--th-surface);
	}

	.th-campus .th-tabbar__text {
		font-size: 10.5px;
		font-weight: 600;
		line-height: 1.1;
		max-width: 100%;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.th-campus .th-tabbar__link.is-active { color: var(--th-accent); }

	/* El contenido termina arriba de la barra, no debajo. */
	.th-campus .th-content { padding-bottom: calc(var(--th-tabbar-h) + 28px); }

	/* En el aula manda la barra de progreso: la inferior se aparta. */
	body.th-view-leccion .th-tabbar,
	body.th-view-evaluacion .th-tabbar { display: none; }
}

@media (max-width: 640px) {
	.th-content { --th-px: 16px; --th-pr: 16px; padding: 18px var(--th-pr) 56px var(--th-px); }
	.th-topbar { padding: 0 16px; }
	.th-quota { display: none; }
	.th-grid { grid-template-columns: minmax(0, 1fr); }
	.th-sort, .th-search { margin-left: 0; width: 100%; }
	.th-search input { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
	.th-campus * { transition: none !important; }
}

/* ------------------------------------------------ vectores y contornos --- */

.th-glyph {
	position: relative;
	display: grid;
	place-items: center;
	width: 46px; height: 46px;
	flex: 0 0 auto;
	border: 1px solid var(--th-line-strong);
	border-radius: var(--th-radius-sm);
	color: var(--th-ink-3);
}

.th-glyph__mark { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .28; }
.th-glyph__text { position: relative; font-size: 14px; font-weight: 700; letter-spacing: .02em; color: var(--th-ink); }
.th-glyph--workshop { border-style: dashed; }
.th-glyph--diplomatura { border-radius: 50%; }

.th-avatar {
	display: grid;
	place-items: center;
	width: 36px; height: 36px;
	border: 1px solid var(--th-line-strong);
	border-radius: 50%;
	font-size: 12px;
	font-weight: 700;
	color: var(--th-ink);
}


.th-tags { display: flex; flex-wrap: wrap; gap: 6px; }

.th-tag {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 3px 9px;
	border: 1px solid var(--th-line-strong);
	border-radius: var(--th-radius-pill);
	font-size: 11.5px;
	color: var(--th-ink-2);
	white-space: nowrap;
}

.th-tag--live { border-color: var(--th-accent); color: var(--th-accent); }
.th-tag--cursando { border-color: var(--th-accent); color: var(--th-accent); }
.th-tag--finalizado { border-color: currentColor; color: #17794a; }
[data-th-theme="dark"] .th-tag--finalizado { color: #6ee7a8; }

.th-count {
	display: inline-block;
	margin-left: 6px;
	padding: 0 6px;
	border: 1px solid var(--th-line-strong);
	border-radius: var(--th-radius-pill);
	font-size: 11px;
	font-weight: 500;
	color: var(--th-ink-3);
}

.th-tab.is-active .th-count { border-color: var(--th-ink); color: var(--th-ink); }
.th-chip .th-count { margin-left: 4px; }
.th-chip.is-active .th-count { border-color: currentColor; color: inherit; }

.th-campus .th-resultline { margin: 4px 0 22px; font-size: 12px; color: var(--th-ink-3); }

.th-strip { margin: 0; }
.th-empty--filtered { padding: 48px 24px; }

/* --------------------------------------------------------------- agenda --- */

.th-agenda {
	margin-bottom: 22px;
	padding: 16px 18px;
	border: 1px solid var(--th-line);
	border-radius: var(--th-radius);
	background: var(--th-surface);
}

.th-agenda__title {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .07em;
	text-transform: uppercase;
	color: var(--th-ink-3);
	margin-bottom: 12px;
}

.th-agenda__list { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
.th-agenda__item { display: flex; align-items: center; gap: 10px; min-width: 0; }

.th-agenda__mark {
	display: grid;
	place-items: center;
	width: 32px; height: 32px;
	flex: 0 0 auto;
	border: 1px solid var(--th-line-strong);
	border-radius: var(--th-radius-sm);
	color: var(--th-ink-3);
}

.th-agenda__item--clase .th-agenda__mark { border-color: var(--th-accent); color: var(--th-accent); }
.th-agenda__body { display: flex; flex-direction: column; min-width: 0; }
.th-agenda__name { font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.th-agenda__name:hover { color: var(--th-accent); }
.th-agenda__meta { font-size: 12px; color: var(--th-ink-3); }

.th-avatar--lg { width: 64px; height: 64px; font-size: 20px; }
.th-profile__avatar { display: none; }

/* ============================================================ aula ======= */

.th-lesson { max-width: none; padding-bottom: 92px; }

.th-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 13px; color: var(--th-ink-3); margin-bottom: 16px; }
.th-crumbs a:hover { color: var(--th-accent); }
.th-crumbs__current { color: var(--th-ink); font-weight: 500; }

/* Abre el listado de clases: se explica solo, con ícono, rótulo y avance. */
.th-modulesbtn { display: none; }

@media (max-width: 1024px) {
	.th-campus .th-modulesbtn {
		display: flex;
		align-items: center;
		gap: 12px;
		width: 100%;
		margin-bottom: 16px;
		padding: 12px 14px;
		border: 1px solid var(--th-line);
		border-radius: var(--th-radius);
		background: var(--th-surface);
		text-align: left;
	}

	.th-campus .th-modulesbtn:hover { border-color: var(--th-accent); }

	.th-modulesbtn__ico {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 38px;
		height: 38px;
		flex: 0 0 auto;
		border-radius: 10px;
		background: var(--th-accent-soft);
		color: var(--th-accent);
	}

	.th-modulesbtn__ico svg { width: 19px; height: 19px; }

	/* En oscuro el naranja translúcido queda barroso: va el gris del tema. */
	[data-th-theme="dark"] .th-modulesbtn__ico { background: var(--th-surface-2); }
	.th-modulesbtn__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto; }
	.th-modulesbtn__text strong { font-size: 14.5px; font-weight: 700; color: var(--th-ink); }
	.th-modulesbtn__text span { font-size: 12.5px; color: var(--th-ink-3); }
	.th-modulesbtn__go { display: inline-flex; flex: 0 0 auto; color: var(--th-ink-3); }
	.th-modulesbtn__go svg { width: 18px; height: 18px; }
}

.th-lesson__grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 32px; align-items: start; }
.th-lesson__grid .th-curriculum { order: 2; }
.th-lesson__grid .th-lesson__main { order: 1; }

/* --- temario --- */

.th-curriculum {
	position: sticky;
	top: calc(var(--th-topbar-h) + var(--th-admin-bar) + 20px);
	max-height: calc(100vh - var(--th-topbar-h) - var(--th-admin-bar) - 120px);
	overflow: hidden auto;
	border: 1px solid var(--th-line);
	border-radius: var(--th-radius);
	background: var(--th-surface);
}

/* Cabecera del temario: portada 16:9 con velo, el curso encima y su ficha. */
.th-curriculum__head { border-bottom: 1px solid var(--th-line); }
.th-curriculum__plain { padding: 18px 16px; }
.th-campus .th-curriculum__course { margin: 0; font-size: 14px; font-weight: 700; line-height: 1.35; }
.th-campus .th-curriculum__meta { margin: 4px 0 0; font-size: 12px; color: var(--th-ink-3); }

.th-curriculum__cover {
	position: relative;
	display: block;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: var(--th-surface-2);
}

.th-curriculum__cover img { display: block; width: 100%; height: 100%; object-fit: cover; }

.th-curriculum__cover::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(0, 0, 0, .2) 0%, rgba(0, 0, 0, .5) 45%, rgba(0, 0, 0, .82) 100%);
}

.th-curriculum__on {
	position: absolute;
	inset: auto 0 0 0;
	z-index: 1;
	padding: 14px;
}

.th-campus .th-curriculum__head--foto .th-curriculum__course { font-size: 15px; color: #fff; }
.th-campus .th-curriculum__head--foto .th-curriculum__meta { color: rgba(255, 255, 255, .78); }

.th-campus .th-curriculum__info {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 12px 16px;
	border-top: 1px solid var(--th-line);
	font-size: 13.5px;
	font-weight: 600;
	color: var(--th-ink-2);
	transition: background .15s ease, color .15s ease;
}

.th-curriculum__info > svg:first-child { width: 17px; height: 17px; flex: 0 0 auto; color: var(--th-accent); }
.th-curriculum__info span { flex: 1 1 auto; min-width: 0; }
.th-curriculum__chev { width: 15px; height: 15px; flex: 0 0 auto; color: var(--th-ink-3); }
.th-campus .th-curriculum__info:hover { background: var(--th-surface-2); color: var(--th-ink); }

@media (max-width: 1024px) {
	.th-campus .th-curriculum__info { display: none; }
}

/*
 * Los módulos y sus clases cuelgan de una misma línea de tiempo: el hilo lo
 * dibuja cada módulo y los puntos van encima, con el color del fondo detrás
 * para que la línea no los cruce. Todos los centros caen en x = 22px.
 */
.th-module { position: relative; border-bottom: 1px solid var(--th-line); }
.th-module:last-child { border-bottom: 0; }

.th-module::before {
	content: "";
	position: absolute;
	left: 21px;
	top: 0;
	bottom: 0;
	z-index: 0;
	width: 2px;
	background: var(--th-line-strong);
	pointer-events: none;
}

/* Las filas van por encima del hilo: en la clase actual no lo cruza. */
.th-module__head,
.th-item { position: relative; z-index: 1; }

.th-module:first-of-type::before { top: 22px; }
.th-module:last-of-type::before { bottom: 22px; }

/* En escritorio el temario va sin hilo: sólo los puntos de estado. */
@media (min-width: 1025px) {
	.th-module::before { content: none; }
}

.th-module__head { display: flex; align-items: center; gap: 11px; padding: 13px 16px; cursor: pointer; list-style: none; }
.th-module__head::-webkit-details-marker { display: none; }
.th-module__head:hover { background: var(--th-surface-2); }

.th-module__dot {
	position: relative;
	z-index: 1;
	display: block;
	width: 12px;
	height: 12px;
	flex: 0 0 auto;
	border: 1.5px solid var(--th-ink-3);
	border-radius: 50%;
	background: var(--th-surface);
}

.th-module__dot.is-done { border-color: var(--th-accent); background: var(--th-accent); }
.th-module.is-current .th-module__dot { border-color: var(--th-accent); }

.th-module__body { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.th-module__label { font-size: 11px; letter-spacing: .05em; text-transform: uppercase; color: var(--th-ink-3); }
.th-module__title { font-size: 13.5px; font-weight: 600; line-height: 1.35; }
.th-module__chevron { color: var(--th-ink-3); display: inline-flex; }
.th-module__chevron svg { width: 18px; height: 18px; transition: transform .18s ease; }
.th-module[open] .th-module__chevron svg { transform: rotate(180deg); }
.th-module.is-current .th-module__title { color: var(--th-ink); }

.th-campus .th-module__list { padding: 0 5px 6px; display: flex; flex-direction: column; gap: 4px; }

.th-item {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 8px 11px 8px 12px;
	border-radius: var(--th-radius-sm);
	font-size: 13px;
	color: var(--th-ink-2);
	transition: background .15s ease, color .15s ease;
}

.th-item:hover { background: var(--th-surface-2); color: var(--th-ink); }
/*
 * Tres estados: sin llegar (hueco), vista (naranja) y la actual (naranja con
 * un latido cada tanto; el aro va en blanco porque se apoya sobre la píldora).
 */
.th-item__state {
	position: relative;
	z-index: 1;
	display: block;
	width: 10px;
	height: 10px;
	flex: 0 0 auto;
	border: 1.5px solid var(--th-ink-3);
	border-radius: 50%;
	background: var(--th-surface);
}

.th-item.is-done .th-item__state { border-color: var(--th-accent); background: var(--th-accent); }

.th-item__title { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.th-item__time { font-size: 11px; color: var(--th-ink-3); white-space: nowrap; }

.th-item.is-current {
	background: var(--th-accent);
	border: 0;
	color: #fff;
	font-weight: 600;
}

.th-item.is-current:hover { background: color-mix(in srgb, var(--th-accent) 90%, #000); color: #fff; }
.th-item.is-current .th-item__time { color: rgba(255, 255, 255, .85); }

.th-item.is-current .th-item__state,
.th-item.is-current.is-done .th-item__state {
	border-color: #fff;
	background: var(--th-accent);
	animation: th-latido 4.5s ease-out infinite;
}

@keyframes th-latido {
	0% { box-shadow: 0 0 0 0 rgba(255, 255, 255, .75); }
	14% { box-shadow: 0 0 0 7px rgba(255, 255, 255, 0); }
	100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); }
}

@media (prefers-reduced-motion: reduce) {
	.th-item.is-current .th-item__state { animation: none; }
}

/* --- contenido --- */

.th-lesson__main { min-width: 0; }
.th-lesson__kicker { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--th-ink-3); }
.th-lesson__title { font-size: 30px; font-weight: 700; letter-spacing: -.025em; line-height: 1.15; margin: 0; }
.th-lesson__head { margin-bottom: 24px; padding-bottom: 20px; border-bottom: 1px solid var(--th-line); }

.th-player { margin-bottom: 30px; border: 1px solid var(--th-line); border-radius: var(--th-radius); overflow: hidden; background: #000; }
.th-player__frame { position: relative; aspect-ratio: 16 / 9; }
.th-player__frame iframe,
.th-player__frame embed,
.th-player__frame video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.th-player__video { display: block; width: 100%; aspect-ratio: 16 / 9; background: #000; }

/* Un solo color para todo el texto: blanco en oscuro, negro en claro. */
.th-prose { font-size: 16px; line-height: 1.75; color: var(--th-ink); max-width: none; }
.th-prose > * + * { margin-top: 1.15em; }
.th-prose h2, .th-prose h3, .th-prose h4 { color: var(--th-ink); font-weight: 700; line-height: 1.3; margin-top: 1.6em; }
.th-prose h2 { font-size: 21px; }
.th-prose h3 { font-size: 18px; }
.th-prose strong { color: var(--th-ink); }
.th-prose a { color: var(--th-accent); text-decoration: underline; text-underline-offset: 2px; }
.th-prose ul, .th-prose ol { padding-left: 1.2em; }
.th-prose ul { list-style: disc; }
.th-prose ol { list-style: decimal; }
.th-prose li + li { margin-top: .4em; }
.th-prose blockquote { border-left: 2px solid var(--th-accent); padding-left: 14px; color: var(--th-ink); font-style: italic; }
.th-prose code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .9em; border: 1px solid var(--th-line); border-radius: 5px; padding: 1px 5px; }
.th-prose pre { border: 1px solid var(--th-line); border-radius: var(--th-radius-sm); padding: 14px; overflow-x: auto; }
.th-prose pre code { border: 0; padding: 0; }
.th-prose img { border-radius: var(--th-radius-sm); }

/* --- bloques --- */

.th-block { margin-top: 40px; padding-top: 28px; border-top: 1px solid var(--th-line); }
.th-block__title { font-size: 16px; font-weight: 700; margin-bottom: 16px; }

.th-files { display: flex; flex-direction: column; gap: 8px; }

.th-file {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 11px 13px;
	border: 1px solid var(--th-line);
	border-radius: var(--th-radius-sm);
	transition: border-color .15s ease;
}

.th-file:hover { border-color: var(--th-accent); }

.th-file__ext {
	display: grid;
	place-items: center;
	width: 42px; height: 34px;
	flex: 0 0 auto;
	border: 1px solid var(--th-line-strong);
	border-radius: 6px;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .04em;
	color: var(--th-ink-3);
}

.th-file__body { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.th-file__name { font-size: 14px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.th-file__size { font-size: 12px; color: var(--th-ink-3); }
.th-file__action { color: var(--th-ink-3); display: inline-flex; }
.th-file__action svg { width: 18px; height: 18px; }

.th-complete { margin-top: 32px; }
.th-complete__done { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: #17794a; }
.th-complete__done svg { width: 18px; height: 18px; }
[data-th-theme="dark"] .th-complete__done { color: #6ee7a8; }

.th-community__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.th-community__count { font-size: 14px; color: var(--th-ink-2); }
.th-community__links { display: flex; flex-wrap: wrap; gap: 8px; }
.th-community__links .th-btn { padding: 8px 13px; font-size: 13px; }

/* --- comentarios --- */

.th-comments__list { display: flex; flex-direction: column; gap: 18px; margin-bottom: 22px; }
.th-comment { display: flex; gap: 12px; }
.th-comment--reply { margin-left: 34px; }
.th-avatar--sm { width: 32px; height: 32px; font-size: 11px; flex: 0 0 auto; }
.th-comment__meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; font-size: 12px; color: var(--th-ink-3); }
.th-comment__author { font-size: 14px; font-weight: 600; color: var(--th-ink); }
.th-comment__text { font-size: 14.5px; line-height: 1.6; color: var(--th-ink-2); }
.th-comment__text p { margin: 6px 0 0; }

.th-commentform textarea,
.th-comments textarea {
	width: 100%;
	padding: 12px 14px;
	border: 1px solid var(--th-line-strong);
	border-radius: var(--th-radius-sm);
	background: var(--th-surface);
	color: var(--th-ink);
	font: inherit;
	font-size: 14px;
	resize: vertical;
}

.th-comments textarea:focus { outline: none; border-color: var(--th-accent); }
.th-comments .form-submit { margin-top: 12px; }
.th-comments .comment-form-cookies-consent { display: none; }

/* --- barra inferior --- */

.th-lessonbar {
	position: fixed;
	left: var(--th-sidebar-w);
	right: 0;
	bottom: 0;
	z-index: 25;
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 12px 28px;
	background: var(--th-bg);
	border-top: 1px solid var(--th-line);
}

.th-lessonbar__progress { display: flex; align-items: center; gap: 10px; flex: 1 1 auto; min-width: 0; }
.th-lessonbar__value { font-size: 13px; font-weight: 700; }
.th-lessonbar__progress .th-progress__bar { flex: 1 1 auto; max-width: none; }
.th-lessonbar__count { font-size: 12px; color: var(--th-ink-3); white-space: nowrap; }
.th-lessonbar__actions { display: flex; gap: 8px; }
.th-lessonbar__actions .th-btn { padding: 9px 18px; }

/* --- responsive del aula --- */

@media (max-width: 1024px) {
	.th-lessonbar { left: 0; }
	.th-lesson__grid { grid-template-columns: minmax(0, 1fr); }

	/* El temario entra como panel lateral, no empujando el contenido. */
	.th-curriculum {
		position: fixed;
		top: var(--th-admin-bar);
		right: 0;
		bottom: 0;
		z-index: 70;
		width: min(88vw, 340px);
		max-height: none;
		margin: 0;
		border: 0;
		border-left: 1px solid var(--th-line);
		border-radius: 0;
		overflow-y: auto;
		transform: translateX(100%);
		transition: transform .22s ease;
		box-shadow: 0 0 40px rgba(0, 0, 0, .18);
	}

	.th-lesson.is-curriculum-open .th-curriculum { transform: translateX(0); }

	.th-lesson.is-curriculum-open::before {
		content: "";
		position: fixed;
		inset: var(--th-admin-bar) 0 0;
		z-index: 69;
		background: rgba(0, 0, 0, .45);
		animation: th-fade .18s ease;
	}

	.th-curriculum__close {
		position: sticky;
		top: 0;
		z-index: 2;
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 10px;
		width: 100%;
		padding: 14px 16px;
		border: 0;
		border-bottom: 1px solid var(--th-line);
		background: var(--th-surface);
		font-size: 14px;
		font-weight: 600;
		color: var(--th-ink);
	}

	.th-curriculum__close svg { width: 18px; height: 18px; }
}

@media (max-width: 640px) {
	.th-lesson { padding-bottom: 128px; }
	.th-lesson__title { font-size: 22px; }
	.th-prose { font-size: 15px; }
	.th-lessonbar { flex-wrap: wrap; padding: 10px 16px; gap: 10px; }
	.th-lessonbar__progress { order: 1; width: 100%; }
	.th-lessonbar__actions { order: 2; width: 100%; }
	.th-lessonbar__actions .th-btn { flex: 1 1 0; }
	.th-community__row { flex-direction: column; align-items: flex-start; }
}

/* ------------------------------------------------- sidebar colapsado --- */

.th-app.is-collapsed .th-sidebar { padding: 18px 8px 16px; overflow: visible; }
.th-app.is-collapsed .th-sidebar__head { justify-content: center; padding: 2px 0 18px; }
.th-app.is-collapsed .th-brand,
.th-app.is-collapsed .th-nav__label,
.th-app.is-collapsed .th-nav__text,
.th-app.is-collapsed .th-nav__link .th-pill,
.th-app.is-collapsed .th-promo,
.th-app.is-collapsed .th-version { display: none; }

.th-app.is-collapsed .th-nav { gap: 10px; }
.th-app.is-collapsed .th-nav__group + .th-nav__group { padding-top: 10px; }

.th-app.is-collapsed .th-nav__link {
	justify-content: center;
	padding: 7px 0;
	position: relative;
}

/* Etiqueta al pasar el mouse, ya que el texto queda oculto. */
.th-app.is-collapsed .th-nav__link::after {
	content: attr(data-th-label);
	position: absolute;
	left: calc(100% + 8px);
	top: 50%;
	transform: translateY(-50%);
	padding: 5px 9px;
	border: 1px solid var(--th-line-strong);
	border-radius: var(--th-radius-sm);
	background: var(--th-surface);
	color: var(--th-ink);
	font-size: 12px;
	white-space: nowrap;
	opacity: 0;
	pointer-events: none;
	transition: opacity .12s ease;

	z-index: 60;}

.th-app.is-collapsed .th-nav__link:hover::after,
.th-app.is-collapsed .th-nav__link:focus-visible::after { opacity: 1; }

.th-app.is-collapsed .th-sidebar__foot { padding-top: 14px; }

@media (max-width: 1024px) {
	.th-app.is-collapsed .th-sidebar { padding: 18px 14px 16px; }
	.th-app.is-collapsed .th-sidebar__head { justify-content: space-between; padding: 2px 6px 18px; }
	.th-app.is-collapsed .th-brand { display: block; }
	.th-app.is-collapsed .th-nav__label,
	.th-app.is-collapsed .th-nav__text,
	.th-app.is-collapsed .th-promo,
	.th-app.is-collapsed .th-version { display: revert; }
	.th-app.is-collapsed .th-nav__link { justify-content: flex-start; padding: 9px 10px; }
	.th-app.is-collapsed .th-nav__link::after { content: none; }
}

/* ------------------------------------------------------------ portadas --- */

.th-card__cover {
	position: relative;
	display: block;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: var(--th-surface-2);
}

.th-card__cover--vacia { display: grid; place-items: center; }

.th-card__cover img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform .35s ease;
}

.th-card:hover .th-card__cover img { transform: scale(1.03); }

.th-card__cover--vacia .th-glyph { width: 52px; height: 52px; margin-bottom: 26px; }



.th-course-cover {
	aspect-ratio: 21 / 6;
	max-height: 220px;
	margin-bottom: 20px;
	border: 1px solid var(--th-line);
	border-radius: var(--th-radius);
	overflow: hidden;
	background: var(--th-surface-2);
}

.th-course-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }

@media (max-width: 640px) {
	.th-course-cover { aspect-ratio: 16 / 9; }
}

/* ============================================================= acceso ==== */

.th-campus--bare { background: var(--th-bg-soft); }

.th-auth { min-height: 100vh; display: grid; place-items: center; padding: 24px; }

.th-auth__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	width: min(1020px, 100%);
	border-radius: 18px;
	background: var(--th-surface);
	box-shadow: 0 24px 60px rgba(20, 20, 20, .12), 0 0 0 1px var(--th-line);
	overflow: hidden;
}

/*
 * Sin foto cargada el costado no queda vacío: va con el degradado de la marca
 * y el trazo en blanco por encima.
 */
.th-auth__aside {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	gap: 18px;
	padding: 40px;
	background: linear-gradient(150deg, var(--th-accent), #c2410c 55%, #5944c5);
	color: #fff;
	min-height: 480px;
	overflow: hidden;
}

.th-auth__art { position: absolute; inset: -14% auto auto -14%; width: 128%; opacity: .22; color: #fff; }

.th-campus .th-auth__claim {
	position: relative;
	z-index: 1;
	margin: 0;
	max-width: 20ch;
	font-size: 23px;
	font-weight: 700;
	letter-spacing: -.02em;
	line-height: 1.28;
	color: #fff;
	text-wrap: balance;
}

/* Con foto, la frase se apoya en ella con un velo que la sostiene. */
.th-auth__photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

.th-auth__aside--foto::after {
	content: "";
	position: absolute;
	inset: auto 0 0;
	height: 62%;
	background: linear-gradient(180deg, transparent, rgba(0, 0, 0, .82));
}

.th-auth__panel { padding: 46px 44px; display: flex; flex-direction: column; gap: 15px; }
.th-auth__brand { display: inline-flex; margin-bottom: 10px; }
.th-auth__brand img { max-width: 150px; height: auto; }
.th-campus .th-auth__title { margin: 0; font-size: 27px; font-weight: 750; letter-spacing: -.025em; line-height: 1.2; }
.th-campus .th-auth__subtitle { margin: -9px 0 4px; font-size: 14px; color: var(--th-ink-2); }
.th-campus .th-auth__foot { margin: 0; font-size: 13.5px; color: var(--th-ink-2); }

/* Los campos acompañan el radio de la tarjeta y marcan el foco con el acento. */
.th-auth .th-field input[type="text"],
.th-auth .th-field input[type="email"],
.th-auth .th-field input[type="password"] {
	padding: 13px 15px;
	border-radius: 12px;
	transition: border-color .15s ease, box-shadow .15s ease;
}

.th-auth .th-field input:focus {
	outline: none;
	border-color: var(--th-accent);
	box-shadow: 0 0 0 3px var(--th-accent-soft);
}

.th-campus .th-auth .th-btn { border-radius: 12px; }
.th-campus .th-auth .th-btn--block { height: 48px; font-size: 15px; }

.th-form { display: flex; flex-direction: column; gap: 14px; margin-top: 6px; }
.th-field { display: flex; flex-direction: column; gap: 6px; margin: 0; }
.th-field label { font-size: 13px; font-weight: 600; }

.th-field input[type="text"],
.th-field input[type="email"],
.th-field input[type="password"],
.th-field input[type="tel"],
.th-field input[type="url"],
.th-field input[type="number"],
.th-field textarea,
.th-field select {
	width: 100%;
	padding: 11px 13px;
	border: 1px solid var(--th-line-strong);
	border-radius: var(--th-radius-sm);
	background: var(--th-surface);
	color: var(--th-ink);
	font: inherit;
	font-size: 14.5px;
}

.th-field input:focus,
.th-field textarea:focus,
.th-field select:focus { outline: none; border-color: var(--th-accent); }
.th-field textarea { min-height: 96px; resize: vertical; line-height: 1.5; }
.th-field__hint { font-size: 12px; color: var(--th-ink-3); }
.th-field__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }

.th-check { display: flex; align-items: flex-start; gap: 8px; font-size: 13.5px; color: var(--th-ink-2); cursor: pointer; }
.th-check input { margin-top: 2px; accent-color: var(--th-accent); }

.th-alert { padding: 11px 13px; border: 1px solid var(--th-line-strong); border-left-width: 3px; border-radius: var(--th-radius-sm); font-size: 13.5px; }
.th-alert p { margin: 0; }
.th-alert p + p { margin-top: 5px; }
.th-alert--error { border-left-color: #c2410c; color: #9a3412; background: rgba(194, 65, 12, .06); }
.th-alert--ok { border-left-color: #17794a; color: #17794a; background: rgba(23, 121, 74, .06); }
[data-th-theme="dark"] .th-alert--error { color: #fca97a; }
[data-th-theme="dark"] .th-alert--ok { color: #6ee7a8; }

@media (max-width: 860px) {
	.th-auth__grid { grid-template-columns: minmax(0, 1fr); }
	.th-auth__aside { display: none; }
	.th-auth__panel { padding: 30px 22px; }
}

/* =========================================================== checkout ==== */

.th-checkout { max-width: 1120px; }
.th-checkout__head { margin-bottom: 24px; }
.th-checkout__title { font-size: 26px; font-weight: 700; letter-spacing: -.02em; }

.th-checkout__grid { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 26px; align-items: start; }
.th-checkout__form { min-width: 0; }

.th-summary {
	position: sticky;
	top: calc(var(--th-topbar-h) + var(--th-admin-bar) + 20px);
	padding: 20px;
	border: 1px solid var(--th-line);
	border-radius: var(--th-radius);
	background: var(--th-surface);
}

.th-summary__title { font-size: 15px; font-weight: 700; margin-bottom: 14px; }
.th-summary__items { display: flex; flex-direction: column; gap: 14px; }
.th-summary__item { display: flex; align-items: center; gap: 11px; }
.th-summary__cover { width: 56px; height: 40px; flex: 0 0 auto; border-radius: 7px; overflow: hidden; background: var(--th-surface-2); }
.th-summary__cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.th-summary__body { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.th-summary__name { font-size: 13.5px; font-weight: 600; line-height: 1.3; }
.th-summary__meta { font-size: 12px; color: var(--th-ink-3); }
.th-summary__price { font-size: 13.5px; font-weight: 600; white-space: nowrap; }

.th-summary__totals { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--th-line); display: flex; flex-direction: column; gap: 8px; }
.th-summary__totals > div { display: flex; justify-content: space-between; font-size: 13.5px; color: var(--th-ink-2); }
.th-summary__totals dt, .th-summary__totals dd { margin: 0; }
.th-summary__grand { padding-top: 8px; border-top: 1px solid var(--th-line); font-size: 16px !important; font-weight: 700; color: var(--th-ink) !important; }
.th-summary__note { margin-top: 14px; font-size: 12px; color: var(--th-ink-3); }

/* Piel para el formulario de WooCommerce. */
.th-checkout__form h3 { font-size: 16px; font-weight: 700; margin: 0 0 14px; }
.th-checkout__form .form-row { display: flex; flex-direction: column; gap: 6px; margin: 0 0 14px; }
.th-checkout__form label { font-size: 13px; font-weight: 600; }
.th-checkout__form .input-text,
.th-checkout__form select,
.th-checkout__form textarea {
	width: 100%;
	padding: 11px 13px;
	border: 1px solid var(--th-line-strong);
	border-radius: var(--th-radius-sm);
	background: var(--th-surface);
	color: var(--th-ink);
	font: inherit;
	font-size: 14.5px;
}
.th-checkout__form .input-text:focus { outline: none; border-color: var(--th-accent); }
.th-checkout__form .woocommerce-checkout-review-order-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.th-checkout__form .woocommerce-checkout-review-order-table th,
.th-checkout__form .woocommerce-checkout-review-order-table td { padding: 10px 0; border-bottom: 1px solid var(--th-line); text-align: left; }
.th-checkout__form #payment { border: 1px solid var(--th-line); border-radius: var(--th-radius); padding: 16px; margin-top: 16px; }
.th-checkout__form #payment ul.payment_methods { list-style: none; padding: 0; margin: 0 0 14px; display: flex; flex-direction: column; gap: 10px; }
.th-checkout__form #payment ul.payment_methods li { font-size: 14px; }
.th-checkout__form #payment .payment_box { margin-top: 8px; padding: 12px; border: 1px solid var(--th-line); border-radius: var(--th-radius-sm); font-size: 13px; color: var(--th-ink-2); }
.th-checkout__form #place_order {
	width: 100%;
	padding: 13px 18px;
	border: 0;
	border-radius: var(--th-radius-sm);
	background: var(--th-accent);
	color: #fff;
	font: inherit;
	font-size: 15px;
	font-weight: 600;
	cursor: pointer;
}
.th-checkout__form .woocommerce-info,
.th-checkout__form .woocommerce-error,
.th-checkout__form .woocommerce-message {
	list-style: none;
	padding: 11px 13px;
	margin: 0 0 16px;
	border: 1px solid var(--th-line-strong);
	border-left-width: 3px;
	border-radius: var(--th-radius-sm);
	font-size: 13.5px;
}
.th-checkout__form .woocommerce-error { border-left-color: #c2410c; }
.th-checkout__form .woocommerce-info, .th-checkout__form .woocommerce-message { border-left-color: var(--th-accent); }

@media (max-width: 960px) {
	.th-checkout__grid { grid-template-columns: minmax(0, 1fr); }
	.th-summary { position: static; order: -1; }
}

/* ================================================= checkout propio ======= */

.th-checkout__cols {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 360px;
	gap: 24px;
	align-items: start;
}

.th-checkout__left { min-width: 0; display: flex; flex-direction: column; gap: 18px; }

.th-checkout__right { position: sticky; top: calc(var(--th-topbar-h) + var(--th-admin-bar) + 20px); }

body.th-campus .th-cbox {
	padding: 24px;
	border: 1px solid var(--th-line);
	border-radius: var(--th-radius);
	background: var(--th-surface);
}

body.th-campus .th-cbox__title { font-size: 17px; font-weight: 700; letter-spacing: -.01em; margin: 0 0 4px; }
body.th-campus .th-cbox__hint { font-size: 13px; color: var(--th-ink-3); margin: 0 0 18px; }
body.th-campus .th-cbox__note { font-size: 12px; color: var(--th-ink-3); margin: 16px 0 0; }
body.th-campus .th-cbox__account { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--th-line); }
body.th-campus .th-cbox__shipping { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--th-line); }

.th-grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.th-grid2 > *:not(.form-row):not(.th-field) { grid-column: 1 / -1; }
.th-grid2 > #billing_email_field,
.th-grid2 > #billing_country_field,
.th-grid2 > #billing_phone_field { grid-column: 1 / -1; }

/* Campos: WooCommerce y CartFlows los pintan a su manera, así que acá pisamos. */
body.th-campus .th-checkout .form-row {
	display: flex !important;
	flex-direction: column;
	gap: 7px;
	margin: 0 !important;
	padding: 0 !important;
	float: none !important;
	width: auto !important;
}

body.th-campus .th-checkout .form-row label {
	font-size: 13px;
	font-weight: 600;
	color: var(--th-ink);
	margin: 0;
	line-height: 1.3;
}

body.th-campus .th-checkout .form-row .required { color: var(--th-accent); border: 0; text-decoration: none; }
body.th-campus .th-checkout .form-row .optional { color: var(--th-ink-3); font-weight: 400; }

body.th-campus .th-checkout input[type="text"],
body.th-campus .th-checkout input[type="email"],
body.th-campus .th-checkout input[type="tel"],
body.th-campus .th-checkout input[type="password"],
body.th-campus .th-checkout input[type="number"],
body.th-campus .th-checkout textarea,
body.th-campus .th-checkout select {
	width: 100% !important;
	min-height: 46px;
	padding: 12px 14px !important;
	border: 1px solid var(--th-line-strong) !important;
	border-radius: var(--th-radius-sm) !important;
	background: var(--th-surface) !important;
	color: var(--th-ink) !important;
	font-family: var(--th-font) !important;
	font-size: 14.5px !important;
	line-height: 1.4;
	box-shadow: none !important;
	transition: border-color .15s ease;
}

body.th-campus .th-checkout input:focus,
body.th-campus .th-checkout select:focus,
body.th-campus .th-checkout textarea:focus { outline: none; border-color: var(--th-accent) !important; }
body.th-campus .th-checkout .woocommerce-invalid input.input-text { border-color: #c2410c !important; }
body.th-campus .th-checkout .select2-container .select2-selection--single { height: 46px; border-radius: var(--th-radius-sm); border-color: var(--th-line-strong); }

/* Resumen del pedido. */
.th-review { margin: 0; }
.th-review__items { list-style: none; margin: 0 0 16px; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.th-review__item { display: flex; align-items: center; gap: 12px; }
.th-review__cover { width: 52px; height: 38px; flex: 0 0 auto; border-radius: 8px; overflow: hidden; background: var(--th-surface-2); }
.th-review__cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.th-review__body { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.th-review__name { font-size: 13.5px; font-weight: 600; line-height: 1.3; }
.th-review__meta { font-size: 11.5px; color: var(--th-ink-3); }
.th-review__price { font-size: 13.5px; font-weight: 600; white-space: nowrap; }

.th-review__totals { display: flex; flex-direction: column; gap: 9px; padding-top: 14px; border-top: 1px solid var(--th-line); margin: 0; }
.th-review__totals > div { display: flex; justify-content: space-between; gap: 12px; font-size: 13.5px; color: var(--th-ink-2); }
.th-review__totals dt, .th-review__totals dd { margin: 0; }
.th-review__grand { padding-top: 11px; border-top: 1px solid var(--th-line); font-size: 17px !important; font-weight: 700; color: var(--th-ink) !important; }
.th-review__grand .woocommerce-Price-amount { font-weight: 700; }

/* Cupón. */
.th-coupon { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--th-line); }
.th-coupon__form { margin-top: 10px; }
.th-coupon__row { display: flex; gap: 8px; }
.th-coupon__input { flex: 1 1 auto; min-width: 0; }
.th-coupon__btn { flex: 0 0 auto; padding: 10px 14px; }

/* Medios de pago: sin el fondo lila de WooCommerce. */
body.th-campus .th-checkout #payment {
	background: transparent !important;
	border: 0 !important;
	border-radius: 0 !important;
	padding: 0 !important;
	margin: 0;
}

body.th-campus .th-checkout #payment .th-pay__list,
body.th-campus .th-checkout ul.payment_methods {
	list-style: none;
	margin: 0 0 18px !important;
	padding: 0 !important;
	border: 0 !important;
	background: transparent !important;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

body.th-campus .th-checkout .th-pay__option {
	border: 1px solid var(--th-line-strong);
	border-radius: var(--th-radius-sm);
	background: var(--th-surface);
	overflow: hidden;
	padding: 0;
	margin: 0;
	transition: border-color .15s ease, background .15s ease;
}

body.th-campus .th-checkout .th-pay__option:has( input:checked ) { border-color: var(--th-accent); box-shadow: inset 0 0 0 1px var(--th-accent); background: var(--th-surface); }

body.th-campus .th-checkout .th-pay__label {
	display: flex;
	align-items: center;
	gap: 11px;
	padding: 15px;
	margin: 0;
	font-size: 14.5px;
	font-weight: 600;
	color: var(--th-ink);
	cursor: pointer;
}

body.th-campus .th-checkout .th-pay__label input { accent-color: var(--th-accent); width: 18px; height: 18px; margin: 0; }
body.th-campus .th-checkout .th-pay__name { display: inline-flex; align-items: center; gap: 8px; }
body.th-campus .th-checkout .th-pay__name img { max-height: 22px; width: auto; border-radius: 4px; }

body.th-campus .th-checkout .th-pay__box,
body.th-campus .th-checkout .payment_box {
	background: transparent !important;
	color: var(--th-ink-2) !important;
	border-radius: 0 !important;
	padding: 0 15px 15px 44px !important;
	margin: 0 !important;
	font-size: 13.5px;
	line-height: 1.55;
}

body.th-campus .th-checkout .payment_box::before,
body.th-campus .th-checkout .payment_box::after { content: none !important; display: none !important; }
body.th-campus .th-checkout .payment_box p { margin: 0 0 8px; }
body.th-campus .th-checkout .payment_box p:last-child { margin-bottom: 0; }

.th-terms { margin: 0 0 16px; }
body.th-campus .th-checkout .th-terms .th-check { align-items: flex-start; gap: 9px; font-size: 13.5px; }
body.th-campus .th-checkout .th-terms .th-check input { margin-top: 3px; accent-color: var(--th-accent); }
.th-pay__submit { display: flex; flex-direction: column; gap: 12px; }
body.th-campus .th-checkout #place_order { width: 100%; padding: 14px 18px; font-size: 15px; }
.th-pay__legal { font-size: 12px; color: var(--th-ink-3); text-align: center; margin: 0; }

/* Avisos. */
body.th-campus .th-checkout .woocommerce-error,
body.th-campus .th-checkout .woocommerce-message,
body.th-campus .th-checkout .woocommerce-info {
	list-style: none;
	margin: 0 0 18px;
	padding: 13px 15px;
	border: 1px solid var(--th-line-strong);
	border-left-width: 3px;
	border-left-color: var(--th-accent);
	border-radius: var(--th-radius-sm);
	background: var(--th-surface);
	font-size: 14px;
	color: var(--th-ink-2);
}

body.th-campus .th-checkout .woocommerce-error { border-left-color: #c2410c; }
body.th-campus .th-checkout .woocommerce-error li,
body.th-campus .th-checkout .woocommerce-message li { list-style: none; margin: 0; }
body.th-campus .blockUI.blockOverlay { border-radius: var(--th-radius); }

@media (max-width: 960px) {
	.th-checkout__cols { grid-template-columns: minmax(0, 1fr); }
	.th-checkout__right { position: static; }
}

@media (max-width: 640px) {
	.th-grid2 { grid-template-columns: minmax(0, 1fr); }
	body.th-campus .th-cbox { padding: 18px; }
}

/* ------------------------------------------- fondo propio del documento --- */

/*
 * Al envolver pantallas de terceros (CartFlows, Elementor) el body puede venir
 * pintado por ellos. Nuestro marco define el fondo y el color base, o el tema
 * oscuro termina con texto claro sobre fondo claro.
 */
body.th-campus {
	background-color: var(--th-bg) !important;
	color: var(--th-ink);
}

body.th-campus--bare { background-color: var(--th-bg-soft) !important; }

/* Los bloques que dibuja CartFlows conservan sus colores, pero heredan el nuestro
   cuando no definen ninguno. */
body.th-campus .wcf-embed-checkout-form,
body.th-campus .cartflows-container { color: inherit; }

/* La grilla del checkout ignora los floats y anchos heredados. */
.th-checkout .th-grid2 > .form-row,
.th-checkout .th-grid2 > p.form-row {
	float: none !important;
	width: auto !important;
	max-width: none !important;
	margin: 0 !important;
	padding: 0 !important;
	clear: none !important;
}

.th-checkout .th-grid2::after { content: none; }
.th-checkout .th-grid2 > #billing_phone_field { grid-column: 1 / -1; }
.th-checkout .th-cbox__shipping { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--th-line); }

/* Cualquier cosa que no sea un campo ocupa la fila entera (títulos y envoltorios ajenos). */
.th-checkout .th-grid2 > *:not(.form-row):not(.th-field) { grid-column: 1 / -1; }

/* Los últimos estilos ajenos que se cuelan en el checkout. */
body.th-campus .th-checkout #place_order,
body.th-campus .th-checkout button#place_order,
body.th-campus .th-checkout input#place_order {
	background: var(--th-accent) !important;
	background-image: none !important;
	border: 0 !important;
	border-radius: var(--th-radius-sm) !important;
	color: #fff !important;
	font-family: var(--th-font) !important;
	font-size: 15px !important;
	font-weight: 600 !important;
	letter-spacing: 0 !important;
	text-transform: none !important;
	box-shadow: none !important;
}

body.th-campus .th-checkout #place_order:hover { background: color-mix(in srgb, var(--th-accent) 88%, #000) !important; }

body.th-campus .th-checkout .th-terms .th-check,
body.th-campus .th-checkout .woocommerce-terms-and-conditions-wrapper .th-check {
	display: flex !important;
	flex-direction: row !important;
	align-items: flex-start;
	gap: 10px;
	width: auto !important;
	float: none !important;
}

body.th-campus .th-checkout .th-terms .th-check input[type="checkbox"] {
	width: 17px !important;
	min-height: 0 !important;
	height: 17px !important;
	margin: 2px 0 0 !important;
	padding: 0 !important;
	flex: 0 0 auto;
}

body.th-campus .th-checkout .th-terms .th-check span { flex: 1 1 auto; }

.th-coupon__title { font-size: 13px; font-weight: 600; margin: 0 0 8px; }
body.th-campus .th-checkout .th-coupon__form { margin: 0; padding: 0; border: 0; background: transparent; }
body.th-campus .th-checkout .th-coupon__row { display: flex; gap: 8px; align-items: stretch; }
body.th-campus .th-checkout .th-coupon__input { flex: 1 1 auto; min-width: 0; min-height: 44px; }
body.th-campus .th-checkout .th-coupon__btn { flex: 0 0 auto; white-space: nowrap; }

/*
 * Select2 deja un <select> oculto para accesibilidad; si le aplicamos los
 * estilos de campo, se estira y genera scroll horizontal.
 */
body.th-campus .th-checkout select.select2-hidden-accessible {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	min-height: 0 !important;
	padding: 0 !important;
	margin: -1px !important;
	border: 0 !important;
	clip: rect(0 0 0 0);
	overflow: hidden;
}

body.th-campus .th-checkout .select2-container { width: 100% !important; }

body.th-campus .th-checkout .select2-container--default .select2-selection--single {
	height: 46px;
	display: flex;
	align-items: center;
	padding: 0 14px;
	border: 1px solid var(--th-line-strong);
	border-radius: var(--th-radius-sm);
	background: var(--th-surface);
}

body.th-campus .th-checkout .select2-container--default .select2-selection--single .select2-selection__rendered {
	color: var(--th-ink);
	line-height: 1.4;
	padding: 0;
	font-size: 14.5px;
}

body.th-campus .th-checkout .select2-container--default .select2-selection--single .select2-selection__arrow { height: 44px; right: 8px; }

/* ------------------------------------------------- indicador de pasos --- */

.th-steps {
	display: flex;
	align-items: center;
	gap: 10px;
	list-style: none;
	margin: 18px 0 0;
	padding: 0;
	counter-reset: th-step;
}

.th-step {
	display: flex;
	align-items: center;
	gap: 9px;
	min-width: 0;
	font-size: 13.5px;
	color: var(--th-ink-3);
}

.th-step + .th-step::before {
	content: "";
	width: clamp(16px, 5vw, 48px);
	height: 1px;
	background: var(--th-line-strong);
	flex: 0 0 auto;
	margin-right: 2px;
}

.th-step__mark {
	display: grid;
	place-items: center;
	width: 26px;
	height: 26px;
	flex: 0 0 auto;
	border: 1px solid var(--th-line-strong);
	border-radius: 50%;
	font-size: 12px;
	font-weight: 700;
	background: var(--th-surface);
	transition: background .15s ease, border-color .15s ease, color .15s ease;
}

.th-step__mark svg { width: 14px; height: 14px; }
.th-step__label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.th-step.is-done { color: var(--th-ink-2); }
.th-step.is-done .th-step__mark { border-color: var(--th-accent); background: var(--th-accent); color: #fff; }
.th-step.is-done + .th-step::before { background: var(--th-accent); }

.th-step.is-current { color: var(--th-ink); font-weight: 600; }
.th-step.is-current .th-step__mark { border-color: var(--th-accent); color: var(--th-accent); box-shadow: 0 0 0 3px var(--th-accent-soft); }

@media (max-width: 720px) {
	.th-steps { gap: 6px; }
	.th-step { font-size: 12px; gap: 6px; }
	.th-step__mark { width: 22px; height: 22px; font-size: 11px; }
	.th-step + .th-step::before { width: 12px; margin-right: 0; }
	.th-step.is-todo .th-step__label { display: none; }
}

@media (max-width: 420px) {
	.th-step:not(.is-current) .th-step__label { display: none; }
}

/* --------------------------------------------------- curso bloqueado --- */

.th-locked {
	max-width: 520px;
	margin: 40px auto;
	padding: 40px 28px;
	text-align: center;
	border: 1px solid var(--th-line);
	border-radius: var(--th-radius);
	background: var(--th-surface);
}

.th-locked__mark { display: inline-flex; color: var(--th-ink-3); margin-bottom: 14px; }
.th-locked__mark svg { width: 44px; height: 44px; }
.th-locked__title { font-size: 22px; font-weight: 700; letter-spacing: -.02em; }
.th-locked__text { font-size: 14.5px; color: var(--th-ink-2); margin-top: 8px; }
.th-locked__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 22px; }

/* -------------------------------------------------- procesando pedido --- */

.th-processing {
	position: fixed;
	inset: 0;
	z-index: 200;
	display: grid;
	place-items: center;
	padding: 24px;
	background: color-mix(in srgb, var(--th-bg) 82%, transparent);
	backdrop-filter: blur(6px);
	animation: th-fade .18s ease;
}

body.th-is-processing { overflow: hidden; }

.th-processing__box {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	padding: 32px 34px;
	border: 1px solid var(--th-line);
	border-radius: var(--th-radius);
	background: var(--th-surface);
	text-align: center;
	max-width: 320px;
}

.th-processing__spinner { display: block; width: 48px; height: 48px; margin-bottom: 8px; }
.th-processing__spinner svg { width: 100%; height: 100%; animation: th-spin 1.4s linear infinite; }
.th-processing__track { stroke: var(--th-line-strong); }
.th-processing__arc { stroke: var(--th-accent); stroke-dasharray: 90 126; animation: th-dash 1.4s ease-in-out infinite; }

.th-processing__title { font-size: 16px; font-weight: 700; }
.th-processing__hint { font-size: 13px; color: var(--th-ink-3); }

@keyframes th-spin { to { transform: rotate(360deg); } }
@keyframes th-dash {
	0% { stroke-dasharray: 20 126; stroke-dashoffset: 0; }
	50% { stroke-dasharray: 90 126; stroke-dashoffset: -30; }
	100% { stroke-dasharray: 20 126; stroke-dashoffset: -110; }
}
@keyframes th-fade { from { opacity: 0; } to { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
	.th-processing__spinner svg { animation-duration: 3s; }
	.th-processing__arc { animation: none; stroke-dasharray: 90 126; }
}

/* ------------------------------------------------- gracias: 2 columnas --- */

.th-thanks { max-width: 1080px; margin: 0 auto; padding: 8px 0 40px; text-align: left; }
.th-thanks .th-steps { justify-content: flex-start; margin-bottom: 28px; }

.th-thanks__grid { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 28px; align-items: start; }
.th-thanks__main { min-width: 0; }

.th-thanks__mark { display: inline-flex; color: var(--th-accent); margin-bottom: 12px; }
.th-thanks__mark svg { width: 60px; height: 60px; }
.th-thanks__mark--wait { color: var(--th-ink-3); }

.th-thanks__title { font-size: 30px; font-weight: 700; letter-spacing: -.025em; line-height: 1.15; }
.th-thanks__lead { font-size: 15px; color: var(--th-ink-2); margin-top: 8px; max-width: 46ch; }

.th-thanks__facts {
	margin: 24px 0 0;
	padding: 18px;
	border: 1px solid var(--th-line);
	border-radius: var(--th-radius);
	background: var(--th-surface);
	grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
}

.th-thanks__gateway { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--th-line); font-size: 14.5px; color: var(--th-ink-2); }
.th-thanks__gateway h2, .th-thanks__gateway h3 { color: var(--th-ink); font-size: 15px; margin: 0 0 10px; }
.th-thanks__gateway ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }
.th-thanks__gateway li strong { color: var(--th-ink); }

.th-thanks__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.th-thanks__aside { position: sticky; top: calc(var(--th-topbar-h) + var(--th-admin-bar) + 20px); display: flex; flex-direction: column; gap: 16px; }

@media (max-width: 900px) {
	.th-thanks__grid { grid-template-columns: minmax(0, 1fr); }
	.th-thanks__aside { position: static; }
	.th-thanks__title { font-size: 25px; }
	.th-thanks__actions .th-btn { flex: 1 1 auto; }
}

.th-tag--pendiente { border-color: var(--th-line-strong); color: var(--th-ink-3); }

/* ====================================================== marco público ==== */

.th-campus--public { background: var(--th-bg); display: flex; flex-direction: column; min-height: 100vh; }

.th-site__bar {
	position: sticky;
	top: var(--th-admin-bar);
	z-index: 30;
	background: color-mix(in srgb, var(--th-bg) 90%, transparent);
	backdrop-filter: saturate(180%) blur(10px);
	border-bottom: 1px solid var(--th-line);
}

.th-site__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	max-width: 1180px;
	margin: 0 auto;
	padding: 14px 24px;
	width: 100%;
}

.th-site__nav { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.th-site__link { font-size: 14px; color: var(--th-ink-2); }
.th-site__link:hover { color: var(--th-ink); }
.th-site__nav .th-btn { padding: 8px 14px; font-size: 13.5px; }

.th-site__main {
	flex: 1 1 auto;
	width: 100%;
	max-width: 1180px;
	margin: 0 auto;
	padding: 28px 24px 60px;
}

.th-site__foot { border-top: 1px solid var(--th-line); }
.th-site__foot .th-site__inner { padding: 22px 24px; }
.th-site__copy { font-size: 13px; color: var(--th-ink-3); }

/* Las pantallas públicas se centran dentro del marco. */
.th-site__main > .th-sales,
.th-site__main > .th-checkout,
.th-site__main > .th-thanks { margin-left: auto; margin-right: auto; }

@media (max-width: 640px) {
	.th-site__inner { padding: 12px 16px; flex-wrap: wrap; }
	.th-site__main { padding: 20px 16px 48px; }
	.th-site__nav { gap: 10px; }
}

/* ------------------------------------- el velo propio de WooCommerce --- */

/*
 * WooCommerce bloquea el formulario con blockUI y le pone su propio velo con
 * un spinner. El velo sobra —ya mostramos el nuestro— pero el bloqueo de
 * clicks sirve, así que lo dejamos invisible en vez de quitarlo.
 */
body.th-campus .blockUI.blockOverlay,
body.th-campus .blockUI.blockOverlay::before,
body.th-campus .blockUI.blockOverlay::after {
	opacity: 0 !important;
	background: transparent !important;
	background-image: none !important;
	animation: none !important;
	content: none !important;
}

body.th-campus .blockUI.blockMsg { display: none !important; }

/* Mientras se recalculan los totales, el bloque se atenúa apenas. */
body.th-campus .th-checkout .th-cbox:has( > .blockUI.blockOverlay ),
body.th-campus .th-checkout #order_review:has( > .blockUI.blockOverlay ) {
	opacity: .55;
	transition: opacity .15s ease;
}

body.th-is-locked { overflow: hidden; }

/* El botón de cierre del temario sólo existe en el panel lateral. */
.th-curriculum__close { display: none; }

@media (max-width: 1024px) {
	.th-curriculum__close { display: flex; }
}

/* ------------------------------------ convivencia con la barra de admin --- */

body.admin-bar { --th-admin-bar: 32px; }
body.admin-bar .th-app { min-height: calc(100vh - var(--th-admin-bar)); }
body.admin-bar .th-auth { min-height: calc(100vh - var(--th-admin-bar)); }

@media (max-width: 782px) {
	body.admin-bar { --th-admin-bar: 46px; }
	body.admin-bar .th-sidebar { top: 0; height: 100vh; }
}

/* ============================================================= perfil ==== */

.th-profile-page { max-width: 1100px; }
.th-profile-page__grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 22px; align-items: start; }
.th-profile-page__aside { display: flex; flex-direction: column; gap: 18px; }
.th-profile-page__aside .th-agenda { margin: 0; }

.th-profile-form { display: flex; flex-direction: column; gap: 16px; }
.th-profile-form__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; padding-top: 6px; }

.th-avatarfield {
	display: flex;
	align-items: center;
	gap: 18px;
	padding: 4px 0 18px;
}

.th-avatarfield__preview { display: inline-flex; flex: 0 0 auto; }
.th-avatarfield__preview img { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; display: block; border: 1px solid var(--th-line-strong); }
.th-avatarfield__actions { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; min-width: 0; }
.th-avatarfield__row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.th-avatarfield__actions .th-btn { cursor: pointer; }
.th-avatarfield__remove { font-size: 13px; }

.th-profile-page .th-field input[type="text"],
.th-profile-page .th-field input[type="email"],
.th-profile-page .th-field textarea {
	width: 100%;
	padding: 11px 13px;
	border: 1px solid var(--th-line-strong);
	border-radius: var(--th-radius-sm);
	background: var(--th-surface);
	color: var(--th-ink);
	font: inherit;
	font-size: 14.5px;
	resize: vertical;
}

.th-profile-page .th-field input:focus,
.th-profile-page .th-field textarea:focus { outline: none; border-color: var(--th-accent); }
.th-profile-page .th-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0; max-width: none; }

@media (max-width: 900px) {
	.th-profile-page__grid { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 520px) {
	/* Siguen uno al lado del otro: la foto se achica y el botón entra igual. */
	.th-avatarfield { gap: 14px; }
	.th-avatarfield__preview img { width: 60px; height: 60px; }
	.th-avatarfield__row { gap: 8px 12px; }
}

.th-avatar--photo { padding: 0; border: 1px solid var(--th-line-strong); overflow: hidden; }
.th-avatar--photo img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Sin agenda, el formulario del perfil ocupa todo el ancho. */
.th-profile-page__grid--solo { grid-template-columns: minmax(0, 1fr); max-width: 720px; }

/* ========================================================== comunidad ==== */

.th-forum { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 24px; align-items: start; }
.th-forum__main { min-width: 0; display: flex; flex-direction: column; gap: 16px; }

.th-forum__bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }

.th-forum__search {
	position: relative;
	flex: 1 1 260px;
	display: flex;
	align-items: center;
}

.th-forum__search .th-icon { position: absolute; left: 13px; color: var(--th-ink-3); pointer-events: none; }

.th-forum__search input {
	width: 100%;
	padding: 11px 14px 11px 40px;
	border: 1px solid var(--th-line-strong);
	border-radius: var(--th-radius-sm);
	background: var(--th-surface);
	color: var(--th-ink);
	font: inherit;
	font-size: 14px;
}

.th-forum__search input:focus { outline: none; border-color: var(--th-accent); }
.th-forum__new { border-radius: var(--th-radius-sm); white-space: nowrap; }

.th-forum__sort { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; font-size: 13px; color: var(--th-ink-3); }
.th-forum__sortlink { color: var(--th-ink-2); }
.th-forum__sortlink:hover { color: var(--th-ink); }
.th-forum__sortlink.is-active { color: var(--th-ink); font-weight: 600; }

.th-forum__list { display: flex; flex-direction: column; gap: 12px; list-style: none; margin: 0; padding: 0; }

.th-topiccard {
	padding: 18px 20px;
	border: 1px solid var(--th-line);
	border-radius: var(--th-radius);
	background: var(--th-surface);
	transition: border-color .15s ease;
}

.th-topiccard:hover { border-color: var(--th-line-strong); }
.th-topiccard__head { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--th-ink-3); }
.th-topiccard__author { font-weight: 600; color: var(--th-ink); }
.th-topiccard__title { font-size: 19px; font-weight: 700; line-height: 1.3; margin: 10px 0 8px; letter-spacing: -.01em; }
.th-topiccard__title a:hover { color: var(--th-accent); }
.th-topiccard__excerpt { font-size: 14px; color: var(--th-ink-2); line-height: 1.6; }
.th-topiccard__foot { display: flex; align-items: center; gap: 10px; margin-top: 14px; }

.th-vote {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 6px 12px;
	border: 1px solid var(--th-line-strong);
	border-radius: var(--th-radius-pill);
	background: var(--th-surface);
	color: var(--th-ink-2);
	font-size: 13px;
	font-weight: 600;
	transition: border-color .15s ease, color .15s ease;
}

.th-vote svg, .th-vote .th-icon { width: 15px; height: 15px; }
.th-vote:hover { border-color: var(--th-accent); color: var(--th-accent); }
.th-vote.is-voted { border-color: var(--th-accent); color: var(--th-accent); }
.th-vote--link { cursor: pointer; }

.th-forum__pages { display: flex; flex-wrap: wrap; gap: 6px; }
.th-forum__page { display: grid; place-items: center; min-width: 34px; height: 34px; padding: 0 8px; border: 1px solid var(--th-line-strong); border-radius: var(--th-radius-sm); font-size: 13px; }
.th-forum__page.is-active { border-color: var(--th-accent); background: var(--th-accent); color: #fff; }

.th-forum__back { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; color: var(--th-ink-2); }
.th-forum__back svg { width: 17px; height: 17px; }
.th-forum__back:hover { color: var(--th-accent); }

.th-topic-detail { padding: 24px; border: 1px solid var(--th-line); border-radius: var(--th-radius); background: var(--th-surface); }
.th-topic-detail__title { font-size: 26px; font-weight: 700; letter-spacing: -.02em; line-height: 1.2; margin: 12px 0 10px; }
.th-topic-detail__body { margin: 14px 0 4px; }

.th-replies { margin-top: 22px; }
.th-topicform .th-field textarea,
.th-topicform .th-field input[type="text"],
.th-topicform .th-field select {
	width: 100%;
	padding: 12px 14px;
	border: 1px solid var(--th-line-strong);
	border-radius: var(--th-radius-sm);
	background: var(--th-surface);
	color: var(--th-ink);
	font: inherit;
	font-size: 14.5px;
	resize: vertical;
}

.th-topicform .th-field input:focus,
.th-topicform .th-field textarea:focus,
.th-topicform .th-field select:focus { outline: none; border-color: var(--th-accent); }

/* Columna derecha. */
.th-forum__aside { display: flex; flex-direction: column; gap: 16px; position: sticky; top: calc(var(--th-topbar-h) + var(--th-admin-bar) + 20px); }
.th-forum__introtext { font-size: 13.5px; color: var(--th-ink-2); margin: -10px 0 16px; }

.th-rules { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.th-rule { border-top: 1px solid var(--th-line); }
.th-rule:first-child { border-top: 0; }
.th-rule summary { display: flex; align-items: center; gap: 10px; padding: 12px 0; cursor: pointer; list-style: none; }
.th-rule summary::-webkit-details-marker { display: none; }
.th-rule__num { font-size: 12px; color: var(--th-ink-3); min-width: 12px; }
.th-rule__title { flex: 1 1 auto; font-size: 14px; font-weight: 600; }
.th-rule__chevron { color: var(--th-ink-3); display: inline-flex; }
.th-rule__chevron svg { width: 16px; height: 16px; transition: transform .18s ease; }
.th-rule details[open] .th-rule__chevron svg,
.th-rule[open] .th-rule__chevron svg { transform: rotate(180deg); }
.th-rule__text { font-size: 13.5px; color: var(--th-ink-2); padding: 0 0 12px 22px; margin: 0; line-height: 1.55; }

@media (max-width: 1000px) {
	.th-forum { grid-template-columns: minmax(0, 1fr); }
	.th-forum__aside { position: static; }
}

@media (max-width: 640px) {
	.th-forum__bar { flex-direction: column; align-items: stretch; }
	.th-forum__new { width: 100%; justify-content: center; }
}

/* ------------------------------------------- ajustes de botones y aire --- */

/*
 * Los botones que dibuja WordPress (comentarios) son <input type="submit"> y
 * no heredan la tipografía: se la damos explícitamente.
 */
.th-campus button,
.th-campus input[type="submit"],
.th-campus input[type="button"],
.th-campus .th-btn {
	font-family: var(--th-font);
	font-size: 14px;
	line-height: 1.2;
}

.th-campus input[type="submit"].th-btn { padding: 11px 18px; -webkit-appearance: none; appearance: none; }

/* Sobre naranja, el texto siempre en blanco. */
.th-campus .th-btn--accent,
.th-campus .th-btn--accent:hover,
.th-campus input[type="submit"].th-btn--accent,
.th-campus .th-forum__page.is-active,
.th-campus .th-item.is-current,
.th-campus .th-nav__link.is-active { color: #fff; }

/* Marcar la clase como vista no compite con las acciones principales. */
.th-campus .th-btn--done,
.th-campus button.th-btn--done {
	background: var(--th-done);
	color: #fff;
	border-color: transparent;
}

.th-campus .th-btn--done:hover { background: color-mix(in srgb, var(--th-done) 88%, #000); color: #fff; }

/* Los comentarios necesitan aire entre el aviso y el formulario. */
.th-campus .th-comments .th-note { margin: 0 0 20px; }
.th-campus .th-comments__list { margin-bottom: 28px; }
.th-campus .th-comments .comment-form,
.th-campus .th-comments .th-commentform { margin-top: 24px; display: flex; flex-direction: column; gap: 14px; }
.th-campus .th-comments .form-submit { margin: 0; }
.th-campus .th-replies .th-note { margin: 0 0 20px; }
.th-campus .th-commentform__field { margin: 0; }

/* ============================================== ventana de nuevo tema ==== */

.th-modal { position: fixed; inset: 0; z-index: 120; display: grid; place-items: center; padding: 24px; }
.th-modal__backdrop { position: absolute; inset: 0; background: rgba(9, 10, 14, .55); backdrop-filter: blur(3px); animation: th-fade .16s ease; }

.th-modal__box {
	position: relative;
	width: min(720px, 100%);
	max-height: min(88vh, 860px);
	display: flex;
	flex-direction: column;
	border: 1px solid var(--th-line);
	border-radius: 18px;
	background: var(--th-surface);
	box-shadow: 0 24px 60px rgba(0, 0, 0, .3);
	overflow: hidden;
}

.th-modal__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 22px 24px 6px; }
.th-modal__title { font-size: 24px; font-weight: 700; letter-spacing: -.02em; }

.th-modal__body { padding: 14px 24px 20px; overflow-y: auto; display: flex; flex-direction: column; gap: 22px; }
.th-modal__field { display: flex; flex-direction: column; gap: 10px; }
.th-modal__label { font-size: 15px; font-weight: 600; color: var(--th-ink); }

.th-modal__field input[type="text"] {
	width: 100%;
	padding: 13px 15px;
	border: 1px solid var(--th-line-strong);
	border-radius: var(--th-radius-sm);
	background: var(--th-surface);
	color: var(--th-ink);
	font: inherit;
	font-size: 15px;
}

.th-modal__field input[type="text"]:focus { outline: none; border-color: var(--th-accent); box-shadow: 0 0 0 3px var(--th-accent-soft); }

.th-chipset { display: flex; flex-wrap: wrap; gap: 8px; }

.th-chipset__item {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 9px 15px;
	border: 1px solid transparent;
	border-radius: var(--th-radius-pill);
	background: var(--th-surface-2);
	color: var(--th-ink-2);
	font-size: 14px;
	transition: background .15s ease, color .15s ease, border-color .15s ease;
}

.th-chipset__item .th-icon { width: 16px; height: 16px; }
.th-chipset__item:hover { color: var(--th-ink); border-color: var(--th-line-strong); }
.th-chipset__item.is-on { background: var(--th-accent); border-color: var(--th-accent); color: #fff; }
.th-chipset__item.is-on .th-icon { color: #fff; }

.th-editor { border: 1px solid var(--th-line-strong); border-radius: var(--th-radius-sm); overflow: hidden; }
.th-editor__bar { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; padding: 8px 10px; border-bottom: 1px solid var(--th-line); }

.th-editor__bar button {
	display: grid;
	place-items: center;
	width: 32px;
	height: 32px;
	border: 0;
	border-radius: 8px;
	background: transparent;
	color: var(--th-ink-2);
	font-size: 15px;
}

.th-editor__bar button:hover { background: var(--th-surface-2); color: var(--th-ink); }
.th-editor__bar button svg { width: 18px; height: 18px; }
.th-editor__sep { width: 1px; height: 20px; background: var(--th-line); margin: 0 6px; }

.th-editor textarea {
	width: 100%;
	min-height: 190px;
	padding: 14px 15px;
	border: 0;
	background: var(--th-surface);
	color: var(--th-ink);
	font: inherit;
	font-size: 15px;
	line-height: 1.6;
	resize: vertical;
}

.th-editor textarea:focus { outline: none; }

.th-modal__foot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	padding: 16px 24px 20px;
	border-top: 1px solid var(--th-line);
	background: var(--th-bg-soft);
}

.th-modal__hint { font-size: 13px; color: var(--th-ink-3); margin: 0; }
.th-modal__actions { display: flex; gap: 10px; margin-left: auto; }
.th-modal__actions .th-btn[disabled] { opacity: .5; cursor: not-allowed; }

@media (max-width: 600px) {
	.th-modal { padding: 0; }
	.th-modal__box { width: 100%; max-height: 100vh; border-radius: 0; border: 0; }
	.th-modal__actions { width: 100%; }
	.th-modal__actions .th-btn { flex: 1 1 0; }
}

/* ----------------------------------------------- logo claro / oscuro --- */

.th-brand__logo--dark { display: none; }

@media (prefers-color-scheme: dark) {
	:root:not([data-th-theme="light"]) .th-brand__logo--light { display: none; }
	:root:not([data-th-theme="light"]) .th-brand__logo--dark { display: block; }
}

[data-th-theme="dark"] .th-brand__logo--light { display: none; }
[data-th-theme="dark"] .th-brand__logo--dark { display: block; }
[data-th-theme="light"] .th-brand__logo--light { display: block; }
[data-th-theme="light"] .th-brand__logo--dark { display: none; }

.th-auth__brand .th-brand__logo { max-height: 44px; max-width: 190px; }

/* El logo se adapta al lugar donde vive. */
.th-site__bar .th-brand__logo { max-height: 34px; max-width: 150px; }
.th-sidebar .th-brand { display: inline-flex; align-items: center; min-width: 0; }
.th-modal .th-brand__logo { max-height: 32px; }

@media (max-width: 640px) {
	.th-site__bar .th-brand__logo { max-height: 28px; max-width: 130px; }
}

/* ------------------------------------------------ redes y firma ------- */

.th-social { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; }

.th-social__link {
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	border-radius: var(--th-radius-sm);
	color: var(--th-ink-3);
	transition: background .15s ease, color .15s ease;
}

.th-social__link:hover { background: var(--th-surface-2); color: var(--th-accent); }
.th-social__link .th-icon { width: 18px; height: 18px; }

.th-signature {
	display: block;
	padding-top: 10px;
	text-align: center;
	font-size: 11.5px;
	letter-spacing: .02em;
	color: var(--th-ink-3);
}

.th-signature:hover { color: var(--th-accent); }

/* ================================================ ajustes en mobile ==== */

@media (max-width: 1024px) {
	/* En el aula, el camino de migas ocupa lugar y no aporta. */
	.th-lesson .th-crumbs { display: none; }

	/* Botón del temario: barra clara, con flecha y contador. */
}

@media (max-width: 640px) {
	.th-lesson { padding-bottom: 132px; }
	.th-lesson__head { margin-bottom: 16px; padding-bottom: 14px; }
	.th-lesson__title { font-size: 21px; line-height: 1.2; }

	/* El video va a sangre: se sale del padding del contenido y pierde el marco. */
	.th-player {
		margin: 0 calc(var(--th-pr) * -1) 18px calc(var(--th-px) * -1);
		border: 0;
		border-radius: 0;
	}
	.th-complete { margin-top: 18px; }
	.th-block { margin-top: 26px; padding-top: 20px; }

	/* Comunidad: el buscador entra completo y las tarjetas respiran menos. */
	.th-forum { gap: 16px; }
	.th-forum__main { gap: 12px; }
	.th-forum__bar { gap: 8px; }
	.th-forum__search { flex: 1 1 100%; }
	.th-forum__new { width: 100%; justify-content: center; }
	.th-topiccard { padding: 14px 16px; }
	.th-topiccard__title { font-size: 17px; margin: 8px 0 6px; }
	.th-topiccard__excerpt { font-size: 13.5px; }
	.th-topic-detail { padding: 16px; }
	.th-topic-detail__title { font-size: 21px; }
	.th-forum__aside .th-cbox { padding: 18px; }
	.th-forum__sort { font-size: 12.5px; gap: 10px; }
}


/* -------------------------------------------- recuperar contraseña --- */

.th-recover__done { display: flex; flex-direction: column; gap: 12px; }
.th-recover__mark { display: inline-flex; color: var(--th-accent); }
.th-recover__mark svg { width: 40px; height: 40px; }
.th-recover__steps { font-size: 14.5px; color: var(--th-ink-2); line-height: 1.6; }
.th-recover__spam { font-size: 13px; color: var(--th-ink-3); }
.th-recover__done .th-btn { margin-top: 6px; }
.th-recover__mark--warn { color: var(--th-danger); }

/* De quién es la cuenta que se está cambiando. */
.th-campus .th-resetuser {
	margin: 0;
	padding: 11px 14px;
	border-radius: 12px;
	background: var(--th-surface-2);
	font-size: 13.5px;
	color: var(--th-ink-2);
}

@media (max-width: 640px) {
	/* El orden entra en una línea y se desplaza si hace falta. */
	.th-forum__sort {
		flex-wrap: nowrap;
		overflow-x: auto;
		scrollbar-width: none;
		padding-bottom: 2px;
	}

	.th-forum__sort::-webkit-scrollbar { display: none; }
	.th-forum__sort > * { white-space: nowrap; }

	/* Estados vacíos menos altos. */
	.th-empty { padding: 40px 20px; }
	.th-empty--filtered { padding: 32px 20px; }

	/* Los botones de la cabecera no se parten. */
	.th-site__nav .th-btn { white-space: nowrap; padding: 8px 12px; font-size: 13px; }
	.th-topbar__actions .th-btn { white-space: nowrap; padding: 8px 12px; font-size: 13px; }
}

/* ===================================================== notificaciones ==== */

.th-notifs { max-width: none; }
.th-notifs__list { display: flex; flex-direction: column; gap: 8px; }

.th-notif {
	border: 1px solid var(--th-line);
	border-radius: var(--th-radius);
	background: var(--th-surface);
	transition: border-color .15s ease;
}

.th-notif:hover { border-color: var(--th-line-strong); }
.th-notif.is-new { border-color: var(--th-accent); }

.th-notif__link { display: flex; align-items: flex-start; gap: 14px; padding: 15px 17px; }

.th-notif__icon {
	display: grid;
	place-items: center;
	width: 36px;
	height: 36px;
	flex: 0 0 auto;
	border: 1px solid var(--th-line-strong);
	border-radius: var(--th-radius-sm);
	color: var(--th-ink-3);
}

.th-notif.is-new .th-notif__icon { border-color: var(--th-accent); color: var(--th-accent); }
.th-notif__body { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1 1 auto; }
.th-notif__title { font-size: 14.5px; font-weight: 600; line-height: 1.35; }
.th-notif__text { font-size: 13.5px; color: var(--th-ink-2); }
.th-notif__meta { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; font-size: 12px; color: var(--th-ink-3); white-space: nowrap; }

.th-notif__flag {
	padding: 2px 8px;
	border-radius: var(--th-radius-pill);
	background: var(--th-accent);
	color: #fff;
	font-size: 11px;
	font-weight: 700;
}

.th-dot-count {
	display: inline-grid;
	place-items: center;
	min-width: 20px;
	height: 20px;
	padding: 0 6px;
	border-radius: var(--th-radius-pill);
	background: var(--th-accent);
	color: #fff;
	font-size: 11px;
	font-weight: 700;
}

.th-app.is-collapsed .th-nav__link .th-dot-count {
	position: absolute;
	top: 2px;
	right: 6px;
	min-width: 16px;
	height: 16px;
	font-size: 10px;
	padding: 0 4px;
}

/* ======================================================= certificados ==== */

.th-certs { max-width: none; }
.th-campus .th-certs__lead { max-width: 64ch; margin: -8px 0 26px; font-size: 15px; line-height: 1.65; color: var(--th-ink-2); }
.th-certs__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 18px; }

.th-cert {
	display: flex;
	flex-direction: column;
	border: 1px solid var(--th-line);
	border-radius: var(--th-radius);
	background: var(--th-surface);
	overflow: hidden;
}

/* La cabecera imita el papel del diploma: sello, curso y nombre del alumno. */
.th-cert__paper {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 9px;
	overflow: hidden;
	padding: 26px 24px 24px;
	border-bottom: 1px solid var(--th-line);
	background: radial-gradient(130% 100% at 100% 0, var(--th-accent-soft), transparent 62%), var(--th-surface-2);
}

.th-cert__paper::after {
	content: "";
	position: absolute;
	inset: 9px;
	border: 1px solid var(--th-line);
	border-radius: 9px;
	pointer-events: none;
}

/* La portada del curso, desenfocada, hace de fondo del "papel". */
.th-cert__cover {
	position: absolute;
	inset: -28px;
	background-position: center;
	background-size: cover;
	filter: blur(8px) saturate(1.15);
	opacity: 1;
	pointer-events: none;
}

/*
 * Con foto el papel va siempre en oscuro: la portada la elige cada curso y así
 * el texto se lee igual de bien en tema claro y en oscuro.
 */
.th-cert__paper--foto { background: #14161c; }

.th-cert__paper--foto::before {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, .58);
	pointer-events: none;
	z-index: 0;
}

.th-cert__paper--foto::after { border-color: rgba(255, 255, 255, .22); }
.th-cert__paper--foto .th-cert__kicker { color: rgba(255, 255, 255, .7); }
.th-campus .th-cert__paper--foto .th-cert__title { color: #fff; }
.th-cert__paper--foto .th-cert__owner { color: rgba(255, 255, 255, .82); }

.th-cert__paper--foto .th-cert__seal {
	background: rgba(255, 255, 255, .16);
	border-color: rgba(255, 255, 255, .34);
}

.th-cert__paper > :not(.th-cert__cover) { position: relative; z-index: 1; }

.th-cert__seal {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border: 1px solid rgba(255, 255, 255, .16);
	border-radius: 50%;
	background: #14161c;
	color: #fff;
}

.th-cert__seal svg { width: 22px; height: 22px; }
.th-cert__kicker { font-size: 12.5px; color: var(--th-ink-3); }
.th-campus .th-cert__title { font-size: 19px; font-weight: 700; line-height: 1.28; margin: 0; }
.th-cert__owner { font-size: 13.5px; font-weight: 600; color: var(--th-ink-2); }

.th-cert__meta { margin: 0; padding: 2px 24px; }
.th-cert__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--th-line); }
.th-cert__row:last-child { border-bottom: 0; }
.th-cert__row dt { font-size: 13px; color: var(--th-ink-3); }
.th-cert__row dd { margin: 0; font-size: 13.5px; font-weight: 600; }

.th-cert__actions { display: flex; gap: 10px; margin-top: auto; padding: 16px 24px 22px; }
.th-cert__actions .th-btn { flex: 1 1 0; justify-content: center; }

/* En camino: lo que falta para el próximo certificado. */
.th-certs__pending { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; list-style: none; }

.th-pending {
	display: grid;
	grid-template-columns: 46px minmax(0, 1fr) 150px 44px auto;
	align-items: center;
	gap: 14px;
	padding: 12px 16px;
	border: 1px solid var(--th-line);
	border-radius: var(--th-radius-sm);
	background: var(--th-surface);
}

.th-pending__thumb {
	display: grid;
	place-items: center;
	width: 46px;
	height: 46px;
	border-radius: 10px;
	background: var(--th-surface-2);
	font-size: 17px;
	font-weight: 700;
	color: var(--th-ink-3);
	overflow: hidden;
}

.th-pending__thumb img { width: 100%; height: 100%; object-fit: cover; }
.th-pending__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.th-pending__title { font-size: 14.5px; font-weight: 600; }
.th-pending__title:hover { color: var(--th-accent); }
.th-pending__meta { font-size: 12.5px; color: var(--th-ink-3); }
.th-pending__bar { height: 6px; border-radius: var(--th-radius-pill); background: var(--th-surface-2); overflow: hidden; }
.th-pending__bar span { display: block; height: 100%; background: var(--th-accent); }
.th-pending__pct { font-size: 13px; font-weight: 600; text-align: right; }

/* Cómo funcionan los certificados. */
.th-certhelp { margin-top: 62px; }
.th-campus .th-certhelp .th-blocktitle { margin-bottom: 6px; }
.th-certhelp__list { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; margin: 28px 0 0; padding: 0; list-style: none; }

.th-certhelp__item {
	padding: 26px 24px 28px;
	border: 1px solid var(--th-line);
	border-radius: var(--th-radius);
	background: var(--th-surface);
}

.th-certhelp__ico {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	margin-bottom: 16px;
	border-radius: 10px;
	background: var(--th-accent-soft);
	color: var(--th-accent);
}

.th-certhelp__ico svg { width: 18px; height: 18px; }
.th-campus .th-certhelp__item h3 { font-size: 15.5px; font-weight: 700; margin: 0 0 8px; }
.th-campus .th-certhelp__item p { font-size: 13.5px; line-height: 1.65; color: var(--th-ink-2); margin: 0; }

@media (max-width: 520px) {
	.th-cert__actions { flex-direction: column; }
	.th-campus .th-certs__lead { font-size: 14.5px; }
}

@media (max-width: 860px) {
	.th-pending { grid-template-columns: 44px minmax(0, 1fr) auto; row-gap: 10px; }
	.th-pending__bar { grid-column: 2 / -1; order: 3; }
	.th-pending__pct { order: 4; grid-column: 3; display: none; }
	.th-pending__go { grid-column: 3; }
}

/* ============================================================ soporte ==== */

.th-support { max-width: none; }
.th-support__grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 22px; align-items: start; }
.th-support__form { display: flex; flex-direction: column; gap: 16px; }
.th-support__aside { display: flex; flex-direction: column; gap: 16px; }
.th-support__channels { display: flex; flex-direction: column; gap: 8px; }
.th-support__faqs .th-rule__title { font-size: 13.5px; }

.th-support .th-field input[type="text"],
.th-support .th-field textarea,
.th-support .th-field select {
	width: 100%;
	padding: 12px 14px;
	border: 1px solid var(--th-line-strong);
	border-radius: var(--th-radius-sm);
	background: var(--th-surface);
	color: var(--th-ink);
	font: inherit;
	font-size: 14.5px;
	resize: vertical;
}

.th-support .th-field input:focus,
.th-support .th-field textarea:focus,
.th-support .th-field select:focus { outline: none; border-color: var(--th-accent); }

/* ========================================================= certificado === */

.th-campus.th-view-certificado .th-auth { display: block; place-items: initial; padding: 0; }

.th-certpage { min-height: 100vh; padding: 24px; background: var(--th-bg-soft); }
.th-certpage--empty { display: grid; place-items: center; }
.th-certpage__bar { display: flex; justify-content: space-between; gap: 12px; max-width: 900px; margin: 0 auto 20px; }

.th-diploma {
	max-width: 900px;
	margin: 0 auto;
	padding: 14px;
	border-radius: var(--th-radius);
	background: var(--th-surface);
	box-shadow: 0 10px 40px rgba(0, 0, 0, .08);
}

.th-diploma__inner {
	border: 2px solid var(--th-accent);
	border-radius: 10px;
	padding: 54px 48px;
	text-align: center;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.th-diploma__head { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-bottom: 18px; }
.th-diploma__logo { max-height: 52px; max-width: 220px; width: auto; object-fit: contain; }
.th-diploma__brand { font-size: 18px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.th-diploma__kicker { font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: var(--th-ink-3); }
.th-diploma__intro { font-size: 15px; color: var(--th-ink-2); }
.th-diploma__name { font-size: 32px; font-weight: 700; letter-spacing: -.02em; }
.th-diploma__course { font-size: 24px; font-weight: 700; color: var(--th-accent); margin-top: 4px; }

.th-diploma__meta { display: flex; flex-wrap: wrap; justify-content: center; gap: 34px; margin: 30px 0 8px; }
.th-diploma__meta > div { display: flex; flex-direction: column; gap: 2px; }
.th-diploma__label { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--th-ink-3); }
.th-diploma__value { font-size: 14px; font-weight: 600; }

.th-diploma__foot { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 26px; padding-top: 16px; border-top: 1px solid var(--th-line); font-size: 12px; color: var(--th-ink-3); }

@media print {
	.th-certpage { padding: 0; background: #fff; }
	.th-certpage__bar { display: none; }
	.th-diploma { box-shadow: none; max-width: none; padding: 0; }
	.th-diploma__inner { border-color: #d35400; }
	@page { size: landscape; margin: 12mm; }
}

@media (max-width: 900px) {
	.th-support__grid { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 640px) {
	.th-notif__link { padding: 13px 14px; gap: 11px; }
	.th-notif__meta { align-items: flex-start; flex-direction: row; gap: 8px; }
	.th-diploma__inner { padding: 32px 22px; }
	.th-diploma__name { font-size: 24px; }
	.th-diploma__course { font-size: 19px; }
	.th-diploma__meta { gap: 20px; }
}

/* ============================================= notificaciones del header === */

.th-notifbell { position: relative; }
.th-notifbell__btn { position: relative; width: 38px; height: 38px; border-radius: 50%; }
.th-campus .th-notifbell__btn svg { width: 20px; height: 20px; }

.th-notifbell__count {
	position: absolute;
	top: -1px;
	right: -1px;
	min-width: 17px;
	height: 17px;
	padding: 0 4px;
	font-size: 10px;
	border: 2px solid var(--th-surface);
}

.th-notifpop { width: min(360px, calc(100vw - 32px)); padding: 0; overflow: hidden; }

.th-notifpop__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 12px 14px;
	border-bottom: 1px solid var(--th-line);
}

.th-notifpop__title { font-size: 14px; font-weight: 700; }
.th-notifpop__all { font-size: 13px; color: var(--th-accent); font-weight: 600; }
.th-notifpop__all:hover { text-decoration: underline; }

.th-campus .th-notifpop__list { list-style: none; margin: 0; padding: 0; max-height: 380px; overflow-y: auto; }
.th-notifpop__item + .th-notifpop__item { border-top: 1px solid var(--th-line); }
.th-notifpop__item > a { display: flex; align-items: flex-start; gap: 11px; padding: 11px 14px; }
.th-notifpop__item > a:hover { background: var(--th-surface-2); }
.th-notifpop__item.is-new > a { background: var(--th-accent-soft); }
.th-notifpop__item.is-new > a:hover { background: color-mix(in srgb, var(--th-accent) 14%, transparent); }

.th-notifpop__icon {
	display: grid;
	place-items: center;
	width: 30px;
	height: 30px;
	flex: 0 0 auto;
	border: 1px solid var(--th-line-strong);
	border-radius: var(--th-radius-sm);
	color: var(--th-ink-3);
}

.th-notifpop__item.is-new .th-notifpop__icon { border-color: var(--th-accent); color: var(--th-accent); }
.th-notifpop__icon svg { width: 15px; height: 15px; }

.th-notifpop__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.th-notifpop__name { font-size: 13.5px; font-weight: 600; line-height: 1.3; }
.th-notifpop__text { font-size: 12.5px; color: var(--th-ink-2); line-height: 1.35; }
.th-notifpop__time { font-size: 11.5px; color: var(--th-ink-3); }
.th-campus .th-notifpop__empty { padding: 22px 14px; text-align: center; font-size: 13.5px; color: var(--th-ink-3); margin: 0; }

/* El catálogo entra como un chip más dentro de Mis cursos. */
.th-chip--catalog { margin-left: 6px; }
.th-chip--catalog::before {
	content: "";
	width: 1px;
	height: 16px;
	margin-right: 10px;
	background: var(--th-line-strong);
}

@media (max-width: 640px) {
	.th-notifpop { position: fixed; right: 12px; left: 12px; top: 58px; width: auto; }
	.th-chip--catalog { margin-left: 0; }
	.th-chip--catalog::before { content: none; }
}

/* ================================================== header público v2 ==== */

.th-site__bar .th-site__inner { max-width: 1240px; gap: 22px; }
.th-site__burger { display: none; }
.th-site__tools { display: flex; align-items: center; gap: 12px; margin-left: auto; }
.th-site__nav { flex: 1 1 auto; gap: 20px; }
.th-site__link--auth { font-weight: 600; color: var(--th-ink); }

.th-picker { position: relative; }

.th-campus .th-picker__btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 7px 10px;
	border: 1px solid var(--th-line-strong);
	border-radius: var(--th-radius-pill);
	background: transparent;
	color: var(--th-ink-2);
	font-size: 13px;
	font-weight: 600;
	white-space: nowrap;
}

.th-campus .th-picker__btn:hover { border-color: var(--th-ink-3); color: var(--th-ink); }
.th-picker__btn svg { width: 14px; height: 14px; }
.th-picker__panel { min-width: 160px; }
.th-menu__item.is-current { color: var(--th-accent); font-weight: 600; }

/* --------------------------------------------------------- megamenú ----- */

.th-mega { position: static; }

.th-campus .th-mega__btn {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 0;
	border: 0;
	background: none;
	font-size: 14px;
	font-weight: 600;
	color: var(--th-ink);
}

.th-mega__btn svg { width: 15px; height: 15px; transition: transform .18s ease; }
.th-mega.is-open .th-mega__btn svg { transform: rotate(180deg); }

.th-mega__panel {
	position: absolute;
	left: 0;
	right: 0;
	top: 100%;
	z-index: 40;
	border-top: 1px solid var(--th-line);
	border-bottom: 1px solid var(--th-line);
	background: var(--th-surface);
	box-shadow: 0 20px 40px rgba(0, 0, 0, .1);
}

.th-mega__inner {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto auto;
	max-width: 1240px;
	margin: 0 auto;
	padding: 30px 24px 36px;
}

/* Cada zona del menú, separada de la siguiente por una línea fina. */
.th-mega__zone { padding: 0 34px; }
.th-mega__zone:first-child { padding-left: 0; }
.th-mega__zone + .th-mega__zone { border-left: 1px solid var(--th-line); }
.th-mega__zone--cards { padding-right: 40px; }

.th-mega__title { display: block; margin-bottom: 18px; font-size: 14px; color: var(--th-ink-3); }

/* Los cursos, en tarjetas con la portada. */
.th-mega__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }

.th-megacard {
	position: relative;
	display: block;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	border-radius: 10px;
	background: var(--th-surface-2);
}

.th-megacard img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.th-megacard:hover img { transform: scale(1.04); }

.th-megacard__foot {
	position: absolute;
	inset: auto 0 0 0;
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 34px 12px 12px;
	background: linear-gradient(180deg, transparent, rgba(0, 0, 0, .82));
}

.th-megacard__name { flex: 1 1 auto; min-width: 0; font-size: 14px; font-weight: 700; line-height: 1.25; color: #fff; }
.th-megacard__go { width: 16px; height: 16px; flex: 0 0 auto; color: #fff; transition: transform .15s ease; }
.th-megacard:hover .th-megacard__go { transform: translateX(3px); }

/* Las otras columnas, enlaces de texto. */
.th-campus .th-mega__links { display: flex; flex-direction: column; gap: 14px; margin: 0; padding: 0; list-style: none; min-width: 150px; }
.th-campus .th-mega__links a { font-size: 15px; color: var(--th-ink-2); }
.th-campus .th-mega__links a:hover { color: var(--th-accent); }

.th-campus .th-mega__close {
	position: absolute;
	right: 24px;
	top: 22px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: var(--th-ink-3);
}

.th-mega__close svg { width: 18px; height: 18px; }
.th-campus .th-mega__close:hover { color: var(--th-ink); }

@media (max-width: 1024px) {
	.th-mega__inner { grid-template-columns: minmax(0, 1fr); gap: 26px; padding: 22px 20px 28px; }
	.th-mega__zone { padding: 0; }
	.th-mega__zone + .th-mega__zone { border-left: 0; border-top: 1px solid var(--th-line); padding-top: 22px; }
	.th-mega__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.th-campus .th-mega__close { right: 16px; top: 14px; }
}

@media (max-width: 560px) {
	.th-mega__grid { grid-template-columns: minmax(0, 1fr); }
}


/* ============================================================= pie ====== */

.th-foot__top {
	display: grid;
	grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
	gap: 32px;
	align-items: start;
	padding-top: 40px !important;
	padding-bottom: 30px !important;
}

.th-foot__brand { display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }
.th-campus .th-foot__about { font-size: 13.5px; line-height: 1.55; color: var(--th-ink-2); max-width: 40ch; }
.th-foot__title { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--th-ink-3); margin-bottom: 12px; }
.th-campus .th-foot__list { display: flex; flex-direction: column; gap: 8px; }
.th-foot__list a { font-size: 13.5px; color: var(--th-ink-2); }
.th-foot__list a:hover { color: var(--th-accent); }
.th-foot__bar { border-top: 1px solid var(--th-line); }
.th-foot__sign { font-weight: 600; }
.th-site__foot .th-brand__logo { max-height: 32px; max-width: 150px; }

@media (max-width: 1024px) {
	.th-foot__top { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 1100px) {
	.th-site__burger { display: inline-flex; }
	.th-site__bar .th-site__inner { flex-wrap: nowrap; }

	.th-site__nav {
		position: fixed;
		inset: calc(var(--th-admin-bar) + 62px) 0 auto 0;
		display: none;
		flex-direction: column;
		align-items: stretch;
		gap: 4px;
		max-height: calc(100vh - 62px);
		overflow-y: auto;
		padding: 14px 18px 22px;
		background: var(--th-surface);
		border-bottom: 1px solid var(--th-line);
		box-shadow: 0 14px 30px rgba(0, 0, 0, .12);
	}

	.is-open .th-site__nav { display: flex; }
	.th-site__nav .th-site__link { padding: 10px 0; font-size: 15px; }
	/* En el cajón del menú el panel es parte de la lista, no una capa. */
	.th-mega__panel { position: static; border: 0; box-shadow: none; background: transparent; }
	.th-mega__inner { padding: 4px 0 10px; gap: 18px; }
	.th-campus .th-mega__close { display: none; }
	.th-site__bar .th-site__nav .th-site__link,
	.th-campus .th-site__bar .th-mega__btn { padding: 10px 0; }
	.th-campus .th-site__bar .th-site__nav .th-site__link::after,
	.th-campus .th-site__bar .th-mega__btn::after { content: none; }
	.th-site__tools .th-site__link--auth { display: none; }
}

@media (max-width: 640px) {
	.th-foot__top { grid-template-columns: minmax(0, 1fr); gap: 26px; }
}

/* El sitio público y el header comparten ancho. */
.th-site__main { max-width: 1240px; }

/*
 * WooCommerce Multi Currency trae su propio selector flotante: en nuestras
 * pantallas lo ocultamos porque el cambio de moneda ya vive en el header.
 */
.th-campus .woo-multi-currency.wmc-shortcode-wrap,
.th-campus > .woo-multi-currency { display: none !important; }

/* ======================================================= ficha de venta == */
/*
 * La ficha es una landing: se pinta siempre con la paleta de marca, no con los
 * tokens del tema, para que se vea igual en claro y en oscuro.
 */

.th-sales,
.th-checkout,
.th-thanks {
	--s-ink: #141414;
	--s-ink-2: #4a4a52;
	--s-ink-3: #74747f;
	--s-paper: #f2f2f2;
	--s-white: #ffffff;
	--s-line: #e0e0e2;
	--s-line-strong: #cfcfd4;
	--s-surface-2: #f6f6f7;
	--s-bg: #ffffff;
	--s-orange: #ff5d05;
	--s-violet: #5944c5;

	/*
	 * La ficha es una landing: fijamos también los tokens de la plataforma para
	 * que cualquier componente compartido (avatares, textos, avisos) se vea igual
	 * con el tema claro y con el oscuro.
	 */
	--th-bg: #ffffff;
	--th-bg-soft: #f2f2f2;
	--th-surface: #ffffff;
	--th-surface-2: #f2f2f2;
	--th-ink: #141414;
	--th-ink-2: #4a4a52;
	--th-ink-3: #74747f;
	--th-line: #e0e0e2;
	--th-line-strong: #d2d2d6;

	display: block;
	font-size: 14px;
	line-height: 1.6;
	color: var(--s-ink);
	background: var(--s-white);
}

/* La ficha maneja su propio ancho: el marco público le suelta el contenedor. */
body.th-view-venta .th-site__main,
body.th-view-checkout .th-site__main,
body.th-view-gracias .th-site__main { max-width: none; padding: 0; }

.th-band { background: var(--s-white); }
.th-band__inner { max-width: 1180px; margin: 0 auto; padding: 72px 24px; }

/* La ficha de curso aprovecha todo el ancho disponible. */
.th-course.th-band__inner { max-width: 1440px; padding-left: 40px; padding-right: 40px; }
.th-band--tight .th-band__inner { padding-top: 0; padding-bottom: 0; }
.th-band--paper { background: var(--s-paper); }
.th-band--dark { background: var(--s-ink); color: var(--s-paper); }

.th-sales__notices { padding-top: 20px !important; padding-bottom: 0 !important; }

/* ------------------------------------------------------------- portada --- */

.th-band--hero {
	position: relative;
	background: var(--s-ink);
	color: var(--s-paper);
	overflow: hidden;
}

/* Dos luces de color al fondo, para que el negro no quede plano. */
.th-band--hero::before,
.th-band--hero::after {
	content: "";
	position: absolute;
	border-radius: 50%;
	filter: blur(90px);
	opacity: .5;
	pointer-events: none;
}

.th-band--hero::before { width: 460px; height: 460px; top: -180px; right: -120px; background: var(--s-violet); }
.th-band--hero::after { width: 380px; height: 380px; bottom: -220px; left: -140px; background: var(--s-orange); opacity: .32; }

.th-hero { position: relative; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 56px; align-items: center; }
.th-hero__text { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; }

.th-campus .th-hero__crumbs { font-size: 12px; color: rgba(242, 242, 242, .55); margin-bottom: 0; }
.th-campus .th-hero__crumbs a { color: rgba(242, 242, 242, .8); }
.th-campus .th-hero__crumbs a:hover { color: var(--s-orange); }
.th-campus .th-hero__crumbs .th-crumbs__current { color: rgba(242, 242, 242, .55); font-weight: 500; }

.th-hero__badges { display: flex; flex-wrap: wrap; gap: 8px; }

.th-pillbadge {
	display: inline-flex;
	align-items: center;
	padding: 6px 13px;
	border: 1px solid rgba(242, 242, 242, .22);
	border-radius: var(--th-radius-pill);
	font-size: 11.5px;
	font-weight: 600;
	color: rgba(242, 242, 242, .82);
}

.th-pillbadge--violet { background: var(--s-violet); border-color: var(--s-violet); color: #fff; }
.th-pillbadge--orange { background: var(--s-orange); border-color: var(--s-orange); color: #fff; }

.th-hero__title {
	font-size: clamp(34px, 4vw, 53.5px);
	font-weight: 800;
	line-height: 1.03;
	letter-spacing: -.035em;
	margin: -4px 0 0;
	color: #fff;
}

.th-campus .th-hero__lead { font-size: 17px; line-height: 1.55; color: rgba(242, 242, 242, .76); max-width: 44ch; }

.th-hero__teacher { display: flex; align-items: center; gap: 12px; }
.th-hero__teacher .th-avatar,
.th-hero__teacher img { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; border: 2px solid rgba(242, 242, 242, .2); }
.th-hero__teacher .th-avatar { display: grid; place-items: center; background: var(--s-violet); color: #fff; font-size: 13.5px; font-weight: 700; flex: 0 0 auto; }
.th-hero__teacher span { display: flex; flex-direction: column; line-height: 1.3; }
.th-hero__teacher small { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: rgba(242, 242, 242, .5); }
.th-hero__teacher strong { font-size: 14px; font-weight: 650; color: #fff; }

.th-hero__buy { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 4px; }
.th-hero__price { font-size: 26.5px; font-weight: 800; letter-spacing: -.02em; color: #fff; }
.th-hero__price del { font-size: 16px; font-weight: 500; color: rgba(242, 242, 242, .45); margin-right: 9px; }
.th-hero__price ins { text-decoration: none; }
.th-hero__price .woocommerce-Price-amount { white-space: nowrap; }

.th-herofacts { display: flex; flex-wrap: wrap; gap: 0; margin: 8px 0 0; border-top: 1px solid rgba(242, 242, 242, .16); padding-top: 20px; width: 100%; }
.th-herofacts > div { display: flex; flex-direction: column; gap: 3px; padding-right: 28px; margin-right: 28px; border-right: 1px solid rgba(242, 242, 242, .14); }
.th-herofacts > div:last-child { border-right: 0; margin-right: 0; padding-right: 0; }
.th-herofacts dt { font-size: 11px; letter-spacing: .09em; text-transform: uppercase; color: rgba(242, 242, 242, .5); }
.th-herofacts dd { margin: 0; font-size: 14px; font-weight: 650; color: #fff; }

.th-hero__cover { border-radius: 18px; overflow: hidden; border: 1px solid rgba(242, 242, 242, .14); }
.th-hero__cover img { display: block; width: 100%; height: auto; }

/* --------------------------------------------------------- botón CTA ---- */

.th-campus .th-cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	padding: 15px 30px;
	border: 1px solid var(--s-orange);
	border-radius: var(--th-radius-pill);
	background: var(--s-orange);
	color: #fff;
	font-size: 14px;
	font-weight: 700;
	line-height: 1;
	text-decoration: none;
	transition: transform .14s ease, background .14s ease, border-color .14s ease;
}

.th-campus .th-cta:hover { background: #e85104; border-color: #e85104; color: #fff; transform: translateY(-1px); }
.th-campus .th-cta--block { width: 100%; }

.th-campus .th-cta--ghost {
	background: transparent;
	border-color: rgba(242, 242, 242, .3);
	color: var(--s-paper);
}

.th-campus .th-cta--ghost:hover { background: rgba(242, 242, 242, .1); border-color: rgba(242, 242, 242, .55); color: #fff; transform: none; }

/* --------------------------------------------------------- trailer ------ */

.th-trailer { margin: 0; display: flex; flex-direction: column; gap: 10px; }

.th-trailer__frame {
	position: relative;
	aspect-ratio: 16 / 9;
	border-radius: 18px;
	overflow: hidden;
	background: #000;
	border: 1px solid rgba(242, 242, 242, .16);
	box-shadow: 0 30px 60px rgba(0, 0, 0, .45);
}

.th-trailer__frame iframe,
.th-trailer__frame--raw iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.th-trailer__poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.th-trailer__video { width: 100%; border-radius: 18px; display: block; }

.th-campus .th-trailer__play {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	display: grid;
	place-items: center;
	width: 76px;
	height: 76px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--s-orange);
	color: #fff;
	box-shadow: 0 10px 30px rgba(255, 93, 5, .45);
	transition: transform .15s ease;
}

.th-campus .th-trailer__play:hover { transform: translate(-50%, -50%) scale(1.07); }
.th-trailer__play svg { width: 30px; height: 30px; margin-left: 4px; }
.th-trailer__frame.is-playing .th-trailer__play,
.th-trailer__frame.is-playing .th-trailer__poster { display: none; }
.th-trailer__cap { font-size: 11.5px; color: rgba(242, 242, 242, .5); text-align: center; }

/* ---------------------------------------------------- franja de datos --- */

.th-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: stretch; gap: 0; margin: 0; padding: 34px 0; }
.th-stat { display: flex; flex-direction: column; justify-content: center; gap: 4px; padding: 2px 24px; border-left: 2px solid var(--s-violet); }
.th-stat:first-child { padding-left: 0; border-left: 0; }
.th-stat__num { font-size: clamp(19.5px, 2vw, 26.5px); font-weight: 800; letter-spacing: -.03em; line-height: 1.1; color: var(--s-ink); text-wrap: balance; }
.th-stat__label { margin: 0; font-size: 12.5px; color: var(--s-ink-2); }

/* ------------------------------------------------------- cuerpo/grid ---- */

.th-sales__grid { display: grid; grid-template-columns: minmax(0, 1fr) 366px; gap: 56px; align-items: start; }
.th-sales__main { display: flex; flex-direction: column; gap: 64px; min-width: 0; }
.th-sales__side { position: sticky; top: calc(var(--th-admin-bar) + 92px); }
.th-sales__faqwrap { padding-top: 0 !important; }
.th-sales__wide { display: flex; flex-direction: column; gap: 64px; padding-top: 0 !important; }

.th-sec__head { display: flex; flex-direction: column; gap: 6px; margin-bottom: 20px; }
.th-sec__head--center { align-items: center; text-align: center; }

.th-kicker { font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--s-orange); }
.th-kicker--violet { color: var(--s-violet); }

.th-sec__title { font-size: clamp(23px, 2vw, 30.5px); font-weight: 750; letter-spacing: -.028em; line-height: 1.12; color: var(--s-ink); }
.th-campus .th-sec__lead { font-size: 14.5px; color: var(--s-ink-2); max-width: 60ch; }
.th-campus .th-sales__desc { font-size: 14.5px; line-height: 1.7; color: var(--s-ink-2); max-width: 68ch; }
.th-campus .th-sales__desc h2,
.th-campus .th-sales__desc h3 { color: var(--s-ink); }

/* ------------------------------------------------ qué vas a aprender ---- */

.th-campus .th-learn { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px; }

.th-learn li {
	display: flex;
	align-items: flex-start;
	gap: 13px;
	padding: 18px 20px;
	border: 1px solid var(--s-line);
	border-radius: 14px;
	background: var(--s-white);
	font-size: 14px;
	line-height: 1.45;
	color: var(--s-ink);
}

.th-learn__mark {
	display: grid;
	place-items: center;
	width: 26px;
	height: 26px;
	flex: 0 0 auto;
	border-radius: 50%;
	background: rgba(89, 68, 197, .12);
	color: var(--s-violet);
}

.th-learn__mark svg { width: 15px; height: 15px; }

/* ---------------------------------------------------- plan de estudios -- */

.th-campus .th-road { position: relative; display: flex; flex-direction: column; gap: 14px; padding: 0 0 0 62px; list-style: none; }

/* Línea del recorrido. */
.th-road::before {
	content: "";
	position: absolute;
	left: 21px;
	top: 14px;
	bottom: 14px;
	width: 2px;
	background: linear-gradient(180deg, var(--s-violet), rgba(89, 68, 197, .15));
}

.th-road__item { position: relative; }

.th-road__node {
	position: absolute;
	left: -62px;
	top: 14px;
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--s-violet);
	color: #fff;
	font-size: 12.5px;
	font-weight: 750;
	box-shadow: 0 0 0 5px var(--s-white);
}

.th-road__card { border: 1px solid var(--s-line); border-radius: 16px; background: var(--s-white); overflow: hidden; }
.th-road__card[open] { border-color: var(--s-violet); }
.th-road__item:has(.th-road__card[open]) .th-road__node { background: var(--s-orange); }

.th-road__card > summary { display: flex; align-items: center; gap: 16px; padding: 20px 22px; cursor: pointer; list-style: none; }
.th-road__card > summary::-webkit-details-marker { display: none; }
.th-road__card > summary:hover { background: #fafafa; }

.th-road__ident { display: flex; flex-direction: column; gap: 2px; flex: 1 1 auto; min-width: 0; }
.th-road__kicker { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--s-violet); }
.th-road__title { font-size: 16px; font-weight: 700; line-height: 1.3; letter-spacing: -.015em; color: var(--s-ink); }
.th-road__meta { font-size: 12.5px; color: var(--s-ink-3); white-space: nowrap; }
.th-road__chevron { color: var(--s-ink-3); display: inline-flex; }
.th-road__chevron svg { width: 20px; height: 20px; transition: transform .18s ease; }
.th-road__card[open] .th-road__chevron svg { transform: rotate(180deg); }

.th-road__body { padding: 0 22px 20px; }
.th-campus .th-road__desc { font-size: 14px; line-height: 1.6; color: var(--s-ink-2); margin-bottom: 12px; }
.th-campus .th-road__list { display: flex; flex-direction: column; }

.th-road__list li {
	display: flex;
	align-items: center;
	gap: 11px;
	padding: 12px 0;
	font-size: 14px;
	color: var(--s-ink);
	border-top: 1px solid var(--s-line);
}

.th-road__list svg { width: 18px; height: 18px; flex: 0 0 auto; color: var(--s-violet); }
.th-road__list small { margin-left: auto; font-size: 12px; color: var(--s-ink-3); white-space: nowrap; }

/* --------------------------------------------------------- galería ------ */

.th-campus .th-gallery__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }

.th-campus .th-gallery__shot {
	position: relative;
	display: block;
	width: 100%;
	padding: 0;
	border: 0;
	border-radius: 14px;
	overflow: hidden;
	background: var(--s-paper);
}

.th-gallery__shot img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform .3s ease; }
.th-campus .th-gallery__shot:hover img { transform: scale(1.05); }

.th-gallery__zoom {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	background: rgba(20, 20, 20, .45);
	color: #fff;
	opacity: 0;
	transition: opacity .2s ease;
}

.th-campus .th-gallery__shot:hover .th-gallery__zoom { opacity: 1; }
.th-gallery__zoom svg { width: 26px; height: 26px; }

.th-lightbox {
	position: fixed;
	inset: 0;
	z-index: 90;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	padding: 28px;
	background: rgba(20, 20, 20, .93);
}

.th-lightbox__img { max-width: min(1100px, 92vw); max-height: 86vh; border-radius: 14px; display: block; }

.th-campus .th-lightbox__close,
.th-campus .th-lightbox__nav {
	display: grid;
	place-items: center;
	width: 46px;
	height: 46px;
	padding: 0;
	border: 1px solid rgba(255, 255, 255, .26);
	border-radius: 50%;
	background: rgba(255, 255, 255, .07);
	color: #fff;
	flex: 0 0 auto;
}

.th-campus .th-lightbox__close:hover,
.th-campus .th-lightbox__nav:hover { background: var(--s-orange); border-color: var(--s-orange); }
.th-lightbox__close { position: absolute; top: 22px; right: 22px; }
.th-lightbox__close svg, .th-lightbox__nav svg { width: 21px; height: 21px; }

/* -------------------------------------------------------- requisitos --- */

.th-reqs { display: grid; grid-template-columns: repeat(auto-fit, minmax(205px, 1fr)); gap: 14px; }

.th-reqs__col {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 26px 24px;
	border: 1px solid var(--s-line);
	border-radius: 16px;
	background: var(--s-white);
}

.th-reqs__icon {
	display: grid;
	place-items: center;
	width: 42px;
	height: 42px;
	border-radius: 12px;
	background: var(--s-ink);
	color: var(--s-orange);
}

.th-reqs__icon svg { width: 21px; height: 21px; }
.th-reqs__title { font-size: 15.5px; font-weight: 700; letter-spacing: -.015em; color: var(--s-ink); }
.th-campus .th-reqs__list { display: flex; flex-direction: column; gap: 10px; }
.th-reqs__list li { position: relative; padding-left: 18px; font-size: 14px; line-height: 1.5; color: var(--s-ink-2); }
.th-reqs__list li::before { content: ""; position: absolute; left: 0; top: 9px; width: 7px; height: 7px; border-radius: 50%; background: var(--s-violet); }

/* ------------------------------------------------------------- profe ---- */

.th-teacher {
	display: grid;
	grid-template-columns: 120px minmax(0, 1fr);
	gap: 26px;
	align-items: start;
	padding: 30px;
	border-radius: 18px;
	background: var(--s-paper);
}

.th-campus .th-teacher__photo { width: 120px; height: 120px; border-radius: 18px; object-fit: cover; display: grid; place-items: center; background: var(--s-violet); color: #fff; font-size: 34px; font-weight: 800; letter-spacing: -.02em; }
.th-campus .th-teacher__photo img { width: 100%; height: 100%; border-radius: 18px; object-fit: cover; }
.th-teacher__body { display: flex; flex-direction: column; gap: 8px; }
.th-teacher__name { font-size: 20.5px; font-weight: 750; letter-spacing: -.02em; color: var(--s-ink); }
.th-campus .th-teacher__role { font-size: 12.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--s-violet); margin-top: -4px; }
.th-campus .th-teacher__bio { font-size: 14px; line-height: 1.6; color: var(--s-ink-2); max-width: 62ch; }

.th-campus .th-teacher__facts { display: flex; flex-wrap: wrap; gap: 28px; margin-top: 8px; }
.th-teacher__facts li { display: flex; flex-direction: column; }
.th-teacher__facts strong { font-size: 19.5px; font-weight: 800; letter-spacing: -.02em; color: var(--s-ink); }
.th-teacher__facts span { font-size: 12px; color: var(--s-ink-3); }

/* -------------------------------------------------- tarjeta de compra --- */

.th-pricecard {
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: 28px;
	border: 1px solid var(--s-line);
	border-radius: 20px;
	background: var(--s-white);
	box-shadow: 0 18px 44px rgba(20, 20, 20, .09);
}

.th-pricecard__flag {
	align-self: flex-start;
	padding: 6px 13px;
	border-radius: var(--th-radius-pill);
	background: var(--s-orange);
	color: #fff;
	font-size: 11px;
	font-weight: 700;
}

.th-pricecard__price { font-size: 34px; font-weight: 800; letter-spacing: -.03em; line-height: 1.1; color: var(--s-ink); }
.th-pricecard__price del { display: block; font-size: 16px; font-weight: 500; color: var(--s-ink-3); }
.th-pricecard__price ins { text-decoration: none; }
.th-pricecard__owned, .th-pricecard__free { font-size: 22px; }
.th-campus .th-pricecard__meta { font-size: 13px; color: var(--s-ink-2); margin-top: -6px; }

.th-campus .th-pricecard__list { display: flex; flex-direction: column; gap: 9px; }
.th-pricecard__list li { display: flex; gap: 10px; font-size: 13.5px; line-height: 1.4; color: var(--s-ink); }
.th-pricecard__list svg { width: 18px; height: 18px; flex: 0 0 auto; margin-top: 2px; color: var(--s-orange); }


/* ------------------------------------------------------- testimonios --- */

.th-campus .th-tsts { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; }

.th-tst {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: 28px 26px 24px;
	border-radius: 18px;
	background: var(--s-white);
}

.th-tst__quote { position: absolute; top: 10px; right: 22px; font-size: 75px; line-height: .8; font-weight: 800; color: rgba(89, 68, 197, .16); }
.th-stars { display: inline-flex; gap: 3px; }
.th-star { width: 17px; height: 17px; fill: #d8d8dc; }
.th-star.is-on { fill: var(--s-orange); }
.th-campus .th-tst__text { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--s-ink); }
.th-tst__who { display: flex; align-items: center; gap: 11px; margin-top: auto; padding-top: 6px; }
.th-tst__who img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }
.th-tst__who > span { display: flex; flex-direction: column; }
.th-tst__name { font-size: 13.5px; font-weight: 700; color: var(--s-ink); }
.th-tst__role { font-size: 12px; color: var(--s-ink-3); }

/* -------------------------------------------------------------- faq ---- */

.th-campus .th-qa { display: flex; flex-direction: column; gap: 10px; max-width: 860px; padding: 0; list-style: none; }

.th-qa__item { border: 1px solid var(--s-line); border-radius: 14px; background: var(--s-white); overflow: hidden; }
.th-qa__item:has(details[open]) { border-color: var(--s-violet); }
.th-qa__item > details > summary { display: flex; align-items: center; gap: 18px; padding: 20px 22px; cursor: pointer; list-style: none; }
.th-qa__item > details > summary::-webkit-details-marker { display: none; }
.th-qa__item > details > summary:hover { background: #fafafa; }
.th-qa__q { flex: 1 1 auto; font-size: 15px; font-weight: 650; line-height: 1.35; color: var(--s-ink); }

.th-qa__sign {
	display: grid;
	place-items: center;
	width: 30px;
	height: 30px;
	flex: 0 0 auto;
	border-radius: 50%;
	background: rgba(89, 68, 197, .1);
	color: var(--s-violet);
}

.th-qa__sign svg { width: 17px; height: 17px; }
.th-qa__item > details[open] .th-qa__bar { display: none; }
.th-qa__item > details[open] .th-qa__sign { background: var(--s-violet); color: #fff; }
.th-campus .th-qa__a { padding: 0 22px 22px; font-size: 14px; line-height: 1.65; color: var(--s-ink-2); max-width: 72ch; }

/* ------------------------------------------------------------ cierre --- */

.th-finalcta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 28px; }
.th-finalcta h2 { font-size: clamp(23px, 2.5vw, 32px); font-weight: 800; letter-spacing: -.03em; line-height: 1.1; color: #fff; }
.th-campus .th-finalcta p { margin-top: 10px; font-size: 15px; line-height: 1.55; color: rgba(242, 242, 242, .72); max-width: 52ch; }
.th-finalcta__action { display: flex; flex-direction: column; align-items: flex-end; gap: 12px; }
.th-finalcta__price { font-size: 23px; font-weight: 800; letter-spacing: -.02em; color: #fff; }
.th-finalcta__price del { font-size: 15px; font-weight: 500; color: rgba(242, 242, 242, .45); margin-right: 8px; }
.th-finalcta__price ins { text-decoration: none; }

/* --------------------------------------------- barra de compra móvil --- */

.th-buybar {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 45;
	display: none;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
	background: #141414;
	color: #f2f2f2;
	box-shadow: 0 -8px 26px rgba(0, 0, 0, .3);
	transform: translateY(115%);
	transition: transform .22s ease;
}

.th-buybar.is-on { transform: translateY(0); }
.th-buybar__info { display: flex; flex-direction: column; min-width: 0; }
.th-buybar__name { font-size: 11px; color: rgba(242, 242, 242, .6); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.th-buybar__price { font-size: 17px; font-weight: 800; color: #fff; }
.th-buybar__price del { display: none; }
.th-campus .th-buybar .th-cta { padding: 13px 24px; font-size: 13.5px; }

@media (max-width: 1024px) {
	.th-band__inner { padding: 52px 22px; }
	.th-hero { grid-template-columns: minmax(0, 1fr); gap: 34px; }
	.th-hero__text { align-items: flex-start; }
	.th-sales__grid { grid-template-columns: minmax(0, 1fr); gap: 40px; }
	.th-sales__side { position: static; }
	.th-sales__main { gap: 52px; }
	.th-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 0; }
	.th-stat:nth-child(3) { padding-left: 0; border-left: 0; }
	.th-buybar { display: flex; }
}

@media (max-width: 640px) {
	.th-band__inner { padding: 40px 18px; }
	.th-sales { font-size: 14px; }
	.th-hero__title { letter-spacing: -.03em; }
	.th-campus .th-hero__lead { font-size: 15px; }
	.th-hero__buy { width: 100%; }
	.th-campus .th-hero__buy .th-cta { flex: 1 1 auto; }
	.th-herofacts > div { padding-right: 18px; margin-right: 18px; }
	.th-campus .th-road { padding-left: 0; }
	.th-road::before { display: none; }
	.th-road__node { position: static; margin-bottom: -10px; width: 38px; height: 38px; box-shadow: none; border-radius: 12px; }
	.th-road__item { display: flex; flex-direction: column; gap: 12px; }
	.th-road__card > summary { flex-wrap: wrap; gap: 8px 14px; padding: 16px 18px; }
	.th-road__meta { order: 3; width: 100%; }
	.th-road__body { padding: 0 18px 18px; }
	.th-teacher { grid-template-columns: minmax(0, 1fr); gap: 18px; padding: 24px 20px; }
	.th-teacher__photo { width: 84px; height: 84px; }
	.th-pricecard { padding: 24px 20px; }
	.th-pricecard__price { font-size: 28.5px; }
	.th-finalcta { flex-direction: column; align-items: flex-start; gap: 20px; }
	.th-finalcta__action { align-items: stretch; width: 100%; }
	.th-lightbox { padding: 14px; gap: 6px; }
	.th-campus .th-lightbox__nav { width: 36px; height: 36px; }
	.th-lightbox__close { top: 12px; right: 12px; }
}

/* ================================================== tira de ofertas ====== */

.th-offers {
	position: relative;
	background: #141414;
	color: #f2f2f2;
	overflow: hidden;
}

/* Los bordes a cuadros de la bandera. */
.th-offers::before,
.th-offers::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	height: 10px;
	background-image:
		linear-gradient(45deg, #f2f2f2 25%, transparent 25%, transparent 75%, #f2f2f2 75%),
		linear-gradient(45deg, #f2f2f2 25%, transparent 25%, transparent 75%, #f2f2f2 75%);
	background-size: 20px 20px;
	background-position: 0 0, 10px 10px;
	background-color: #141414;
	z-index: 1;
}

.th-offers::before { top: 0; }
.th-offers::after { bottom: 0; }

.th-offers__viewport { overflow: hidden; padding: 10px 0; }
.th-offers__track { display: flex; width: max-content; animation: th-offers-run 38s linear infinite; }
.th-campus .th-offers__set { display: flex; align-items: center; gap: 0; margin: 0; padding: 0; list-style: none; }

.th-offers__item {
	padding: 12px 26px;
	font-size: clamp(17px, 1.6vw, 22px);
	font-weight: 800;
	letter-spacing: .02em;
	text-transform: uppercase;
	white-space: nowrap;
	line-height: 1.1;
}

.th-offers__flag {
	width: 34px;
	height: 24px;
	flex: 0 0 auto;
	border-radius: 3px;
	background-image:
		linear-gradient(45deg, #f2f2f2 25%, transparent 25%, transparent 75%, #f2f2f2 75%),
		linear-gradient(45deg, #f2f2f2 25%, transparent 25%, transparent 75%, #f2f2f2 75%);
	background-size: 12px 12px;
	background-position: 0 0, 6px 6px;
	background-color: #141414;
}

@keyframes th-offers-run {
	from { transform: translateX(0); }
	to { transform: translateX(-50%); }
}

.th-offers:hover .th-offers__track { animation-play-state: paused; }

@media (prefers-reduced-motion: reduce) {
	.th-offers__track { animation: none; }
	.th-offers__viewport { overflow-x: auto; }
}

/* =================================================== header en negro ==== */

.th-site__bar {
	background: #141414;
	border-bottom: 0;
	backdrop-filter: none;
	color: #f2f2f2;
}

.th-site__bar .th-site__inner { padding-top: 0; padding-bottom: 0; }

/* Cada opción marca su lugar con un subrayado, como en el ejemplo. */
.th-campus .th-site__bar .th-site__nav .th-site__link,
.th-campus .th-site__bar .th-mega__btn {
	position: relative;
	padding: 26px 0;
}

.th-campus .th-site__bar .th-site__nav .th-site__link::after,
.th-campus .th-site__bar .th-mega__btn::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 2px;
	background: var(--th-accent);
	transform: scaleX(0);
	transition: transform .18s ease;
}

.th-campus .th-site__bar .th-site__nav .th-site__link:hover::after,
.th-campus .th-site__bar .th-mega__btn:hover::after,
.th-campus .th-site__bar .th-mega.is-open .th-mega__btn::after { transform: scaleX(1); }
.th-campus .th-site__bar .th-mega.is-open .th-mega__btn { color: #fff; }
.th-site__bar .th-site__link { font-size: 15px; color: rgba(242, 242, 242, .74); }
.th-site__bar .th-site__link:hover { color: #fff; }
.th-site__bar .th-site__link--auth { color: #fff; }
.th-campus .th-site__bar .th-mega__btn { font-size: 15px; color: #fff; }
.th-campus .th-site__bar .th-iconbtn { color: rgba(242, 242, 242, .8); }
.th-campus .th-site__bar .th-iconbtn:hover { background: rgba(242, 242, 242, .12); color: #fff; }

/* En fondo negro mandamos el logo del tema oscuro. */
.th-site__bar .th-brand__logo--dark { display: block; }
.th-site__bar .th-brand:has(.th-brand__logo--dark) .th-brand__logo--light { display: none; }
.th-site__bar .th-brand__text { color: #fff; }

/* Selector de idioma: sin contorno, con bandera y letra grande. */
.th-campus .th-picker--lang .th-picker__btn {
	gap: 8px;
	padding: 6px 4px;
	border: 0;
	background: none;
	color: rgba(242, 242, 242, .82);
	font-size: 16px;
	font-weight: 650;
}

.th-campus .th-picker--lang .th-picker__btn:hover { color: #fff; }
.th-picker__flag { font-size: 21px; line-height: 1; }
.th-picker--lang .th-picker__btn svg { width: 13px; height: 13px; opacity: .7; }
.th-picker--lang .th-menu__item { display: flex; align-items: center; gap: 10px; font-size: 15px; }

/* ------------------------------------------------- megamenú en negro --- */

.th-mega__panel { background: #141414; border-top: 1px solid rgba(242, 242, 242, .1); border-bottom: 0; box-shadow: 0 24px 44px rgba(0, 0, 0, .5); }
.th-mega__panel .th-mega__zone + .th-mega__zone { border-left-color: rgba(242, 242, 242, .14); }
.th-mega__panel .th-mega__title { color: rgba(242, 242, 242, .55); }
.th-mega__panel .th-megacard { background: rgba(242, 242, 242, .08); }
.th-campus .th-mega__panel .th-mega__links a { color: rgba(242, 242, 242, .82); }
.th-campus .th-mega__panel .th-mega__links a:hover { color: #fff; }
.th-campus .th-mega__panel .th-mega__close { color: rgba(242, 242, 242, .6); }
.th-campus .th-mega__panel .th-mega__close:hover { color: #fff; }

@media (max-width: 1024px) {
	.th-mega__panel .th-mega__zone + .th-mega__zone { border-top-color: rgba(242, 242, 242, .14); }
}

/* El panel de idiomas sí queda claro, para que se lea. */
.th-site__bar .th-menu { background: var(--th-surface); color: var(--th-ink); border-color: var(--th-line); }

/* ============================================================ pie v2 ==== */

.th-foot__top { gap: 40px; padding-top: 64px !important; padding-bottom: 52px !important; }
.th-campus .th-foot__about { font-size: 15px; line-height: 1.65; max-width: 42ch; }
.th-foot__title { font-size: 13px; letter-spacing: .09em; margin-bottom: 16px; }
.th-campus .th-foot__list { gap: 11px; }
.th-foot__list a { font-size: 15px; }
.th-site__foot .th-foot__bar { padding-top: 24px !important; padding-bottom: 30px !important; }
.th-site__copy { font-size: 14px; }
.th-site__foot .th-site__link { font-size: 14px; }
.th-site__foot .th-brand__logo { max-height: 40px; max-width: 170px; }
.th-foot__social { gap: 10px; }

@media (max-width: 1100px) {
	.th-site__bar .th-site__nav { background: #141414; border-bottom: 1px solid rgba(242, 242, 242, .12); }
	.th-site__bar .th-site__nav .th-site__link { font-size: 16px; }
}

@media (max-width: 640px) {
	.th-foot__top { padding-top: 46px !important; padding-bottom: 36px !important; }
}

/* El menú fijo no debe tapar el título al saltar a una sección. */
.th-sales [id] { scroll-margin-top: calc(var(--th-admin-bar) + 96px); }

/* El pie se acomoda a las columnas que existan, sin huecos. */
.th-foot__top { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 40px 64px; }
.th-foot__brand { flex: 1 1 300px; max-width: 430px; }
.th-foot__col { flex: 0 1 200px; }

@media (max-width: 640px) {
	.th-foot__col { flex: 1 1 140px; }
}

/* ============================================ ajustes de esta revisión === */

/* --- Tira de ofertas: cinta blanca, texto chico, sin cuadros separadores. */

.th-offers { background: #ffffff; color: #141414; }
/* La bandera queda sólo como filete arriba y abajo, en blanco y negro. */
.th-offers::before,
.th-offers::after {
	height: 6px;
	background-image:
		linear-gradient(45deg, #141414 25%, transparent 25%, transparent 75%, #141414 75%),
		linear-gradient(45deg, #141414 25%, transparent 25%, transparent 75%, #141414 75%);
	background-size: 12px 12px;
	background-position: 0 0, 6px 6px;
	background-color: #ffffff;
}
.th-offers__viewport { padding: 6px 0; }

.th-offers__item {
	padding: 8px 18px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .1em;
}

.th-offers__flag {
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: var(--th-accent);
	background-image: none;
	align-self: center;
}

/* --- Menú: más aire entre opciones y respecto del logo. */

.th-site__bar .th-site__inner { gap: 34px; }
.th-site__bar .th-site__nav { gap: 32px; margin-left: 22px; }
.th-site__tools { gap: 18px; }

/* --- Botón secundario: sin contorno. */

.th-campus .th-cta--ghost {
	border-color: transparent;
	background: transparent;
	padding-left: 12px;
	padding-right: 12px;
	text-decoration: underline;
	text-decoration-color: rgba(242, 242, 242, .35);
	text-underline-offset: 5px;
}

.th-campus .th-cta--ghost:hover {
	background: transparent;
	border-color: transparent;
	color: #fff;
	text-decoration-color: var(--s-orange);
}

/* --- Requisitos: tarjetas más grandes y con más aire. */

.th-reqs { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 18px; }
.th-reqs__col { gap: 16px; padding: 34px 30px; border-radius: 20px; }

.th-reqs__icon {
	width: 52px;
	height: 52px;
	border-radius: 15px;
	background: rgba(89, 68, 197, .1);
	color: var(--s-violet);
}

.th-reqs__icon svg { width: 26px; height: 26px; }
.th-reqs__title { font-size: 17px; line-height: 1.3; }
.th-campus .th-reqs__list { gap: 12px; }
.th-reqs__list li { padding-left: 20px; font-size: 14px; }
.th-reqs__list li::before { top: 10px; }

/* --- Profesor: contenedor más chico. */

.th-teacher {
	grid-template-columns: 88px minmax(0, 1fr);
	gap: 20px;
	padding: 22px 24px;
	border-radius: 16px;
	max-width: 720px;
}

.th-campus .th-teacher__photo { width: 88px; height: 88px; border-radius: 14px; font-size: 25px; }
.th-campus .th-teacher__photo img { border-radius: 14px; }
.th-teacher__name { font-size: 18px; }
.th-campus .th-teacher__bio { font-size: 13.5px; line-height: 1.55; max-width: 54ch; }
.th-campus .th-teacher__facts { gap: 22px; margin-top: 4px; }
.th-teacher__facts strong { font-size: 16px; }
.th-teacher__facts span { font-size: 11px; }

@media (max-width: 640px) {
	.th-offers__item { font-size: 12px; padding: 7px 14px; letter-spacing: .08em; }
	.th-site__bar .th-site__nav { margin-left: 0; }
	.th-reqs__col { padding: 26px 22px; }
	.th-teacher { grid-template-columns: minmax(0, 1fr); }
}

/* ================================================ ajustes finos de UI ==== */

/* --- Cinta: más baja, más chica, todo en negro y sin bandera. */

.th-offers::before,
.th-offers::after { content: none; }
.th-offers__viewport { padding: 0; }
.th-offers { border-bottom: 1px solid var(--th-line); }

.th-offers__item {
	padding: 6px 14px;
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: .12em;
	color: #141414;
}

.th-offers__flag { width: 3px; height: 3px; background: #141414; }

/* --- Botones con esquinas de 10px. */

.th-campus .th-btn,
.th-campus .th-cta,
.th-campus input[type="submit"].th-btn { border-radius: 10px; }
.th-campus .th-cta--ghost { border-radius: 10px; }

/* --- Video más grande y sin epígrafe. */

.th-hero { grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: 44px; }
.th-trailer__frame,
.th-trailer__video { border-radius: 12px; }

/* --- Unidades de estudio y sus tarjetas a 10px. */

.th-road__card { border-radius: 10px; }
.th-road__node { border-radius: 10px; }
.th-learn li,
.th-reqs__col,
.th-qa__item,
.th-tst,
.th-pricecard,
.th-hero__cover,
.th-gallery__shot { border-radius: 10px; }

/* --- Galería: en mobile es un visor con puntos. */

.th-gallery__dots { display: none; }

/* --- Profesor: sin relleno, foto más grande. */

.th-teacher {
	grid-template-columns: 128px minmax(0, 1fr);
	gap: 24px;
	padding: 0;
	background: none;
	border-radius: 0;
	max-width: 760px;
	align-items: center;
}

.th-campus .th-teacher__photo { width: 128px; height: 128px; border-radius: 10px; font-size: 35.5px; }
.th-campus .th-teacher__photo img { border-radius: 10px; }
.th-teacher__body { gap: 6px; }
.th-teacher__name { font-size: 19.5px; }
.th-campus .th-teacher__bio { font-size: 14px; line-height: 1.6; max-width: 56ch; }

/* --- Preguntas frecuentes: más aire arriba, tarjetas e íconos más chicos. */

.th-sales__faqwrap { padding-top: 34px !important; }
.th-campus .th-qa { max-width: 720px; gap: 8px; }
.th-qa__item > details > summary { gap: 14px; padding: 15px 18px; }
.th-qa__q { font-size: 14px; font-weight: 600; }

.th-qa__sign {
	width: 22px;
	height: 22px;
	border-radius: 6px;
	background: transparent;
	color: var(--s-ink-3);
}

.th-qa__sign svg { width: 16px; height: 16px; transition: transform .18s ease; }
.th-qa__item > details[open] .th-qa__sign { background: transparent; color: var(--s-violet); }
.th-qa__item > details[open] .th-qa__sign svg { transform: rotate(180deg); }
.th-campus .th-qa__a { padding: 0 18px 18px; font-size: 13.5px; }

@media (max-width: 1024px) {
	.th-hero { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 640px) {
	.th-offers__item { font-size: 11px; padding: 6px 12px; }

	/* Un visor por vez, con desplazamiento por gesto. */
	.th-campus .th-gallery__grid {
		display: flex;
		gap: 10px;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scrollbar-width: none;
		-webkit-overflow-scrolling: touch;
	}

	.th-campus .th-gallery__grid::-webkit-scrollbar { display: none; }
	.th-gallery__cell { flex: 0 0 100%; scroll-snap-align: center; }
	.th-gallery__shot img { aspect-ratio: 3 / 2; }
	.th-gallery__zoom { opacity: 1; background: transparent; align-items: flex-end; justify-content: flex-end; padding: 10px; }
	.th-gallery__zoom svg { width: 20px; height: 20px; filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .6)); }

	.th-gallery__dots { display: flex; justify-content: center; gap: 7px; margin-top: 14px; }

	.th-campus .th-gallery__dot {
		width: 7px;
		height: 7px;
		padding: 0;
		border: 0;
		border-radius: 50%;
		background: var(--s-line);
	}

	.th-campus .th-gallery__dot.is-on { background: var(--s-violet); width: 20px; border-radius: 4px; }

	.th-teacher { grid-template-columns: 96px minmax(0, 1fr); gap: 16px; align-items: start; }
	.th-campus .th-teacher__photo { width: 96px; height: 96px; font-size: 28.5px; }
}

/* --- Barra de compra fija en mobile. */

@media (max-width: 1024px) {
	.th-buybar {
		display: flex;
		transform: translateY(0);
		padding: 12px 14px calc(12px + env(safe-area-inset-bottom));
		border-top: 1px solid rgba(242, 242, 242, .12);
	}

	.th-buybar__name { font-size: 11px; }
	.th-buybar__price { font-size: 18px; }
	.th-campus .th-buybar .th-cta { border-radius: 10px; padding: 13px 22px; }

	/* Que la barra no tape el final de la página. */
	.th-sales { padding-bottom: 78px; }
}

/* El monograma de los testimonios usa el violeta de la marca. */
.th-sales .th-tst__who .th-avatar { background: rgba(89, 68, 197, .12); color: var(--s-violet); font-weight: 700; }

/* En pantallas chicas el botón del header no se parte en dos líneas. */
@media (max-width: 480px) {
	.th-site__bar .th-btn { white-space: nowrap; padding: 9px 13px; font-size: 13px; }
	.th-site__tools { gap: 12px; }
	.th-campus .th-picker--lang .th-picker__btn { font-size: 15px; gap: 6px; }
}

/* ====================================== comunidad: comentarios y likes === */

/* El corazón se rellena al dar me gusta. */
.th-vote.is-voted svg { fill: currentColor; }
.th-vote.is-voted { background: var(--th-accent-soft); }

@keyframes th-heart-pop {
	0% { transform: scale(1); }
	45% { transform: scale(1.28); }
	100% { transform: scale(1); }
}

.th-vote.is-voted svg { animation: th-heart-pop .28s ease; }

@media (prefers-reduced-motion: reduce) {
	.th-vote.is-voted svg { animation: none; }
}

/* --- Aire de la sección y del tema --- */

.th-topic-detail { padding: 28px 30px; }
.th-topic-detail__title { margin: 14px 0 12px; }
.th-topic-detail__body { margin: 16px 0 6px; }
.th-topiccard__foot { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--th-line); }
.th-replies { margin-top: 30px; }
.th-campus .th-replies .th-block__title { margin-bottom: 18px; }

/* --- Comentarios --- */

.th-campus .th-comments__list { gap: 10px; margin-bottom: 20px; }

.th-comment {
	position: relative;
	align-items: flex-start;
	gap: 13px;
	padding: 16px 18px;
	border: 1px solid var(--th-line);
	border-radius: 10px;
	background: var(--th-surface);
}

.th-comment__body { flex: 1 1 auto; min-width: 0; }
.th-comment__meta { gap: 7px; margin-bottom: 4px; }
.th-comment__edited { font-size: 11.5px; font-style: italic; color: var(--th-ink-3); }
.th-comment__edited::before { content: "· "; }
.th-campus .th-comment__text p { margin: 0; }
.th-campus .th-comment__text p + p { margin-top: 8px; }

/* Menú de tres puntos del comentario propio. */
.th-cmenu { position: relative; flex: 0 0 auto; margin: -4px -6px 0 0; }
.th-cmenu__btn { width: 28px; height: 28px; opacity: .55; }
.th-cmenu__btn svg { width: 16px; height: 16px; }
.th-comment:hover .th-cmenu__btn,
.th-cmenu__btn:focus-visible { opacity: 1; }
.th-cmenu__panel { min-width: 150px; }

.th-campus .th-menu__item--danger { color: #c0392b; }
.th-campus .th-menu__item--danger:hover { background: rgba(192, 57, 43, .1); color: #c0392b; }

/* --- Botón que abre la ventana de comentario --- */

.th-campus .th-commentcta {
	display: flex;
	align-items: center;
	gap: 12px;
	width: 100%;
	padding: 12px 14px;
	border: 1px solid var(--th-line-strong);
	border-radius: 10px;
	background: var(--th-surface);
	text-align: left;
	transition: border-color .15s ease;
}

.th-campus .th-commentcta:hover { border-color: var(--th-accent); }
.th-commentcta__hint { flex: 1 1 auto; font-size: 14.5px; color: var(--th-ink-3); }

.th-commentcta__go {
	padding: 8px 16px;
	border-radius: 10px;
	background: var(--th-accent);
	color: #fff;
	font-size: 13.5px;
	font-weight: 700;
}

/* --- Ventana de comentario --- */

.th-modal__box--sm { max-width: 560px; }

.th-campus .th-modal__box--sm textarea {
	width: 100%;
	min-height: 150px;
	padding: 13px 14px;
	border: 1px solid var(--th-line-strong);
	border-radius: 10px;
	background: var(--th-surface);
	color: var(--th-ink);
	font: inherit;
	font-size: 15px;
	line-height: 1.55;
	resize: vertical;
}

.th-campus .th-modal__box--sm textarea:focus { outline: none; border-color: var(--th-accent); }

@media (max-width: 640px) {
	.th-topic-detail { padding: 18px; }
	.th-comment { padding: 14px; gap: 11px; }
	.th-commentcta__hint { font-size: 13.5px; }
	.th-commentcta__go { padding: 8px 13px; font-size: 13px; }
}

/* ================================ menú lateral y notificaciones (v2) ==== */

/* En escritorio el menú ya está a la vista: la hamburguesa del header sobra. */
@media (min-width: 1025px) {
	.th-topbar__burger { display: none; }
	.th-topbar { padding-left: 24px; }
}

/* --- Pie del menú: redes, línea, firma y tema --- */

.th-sidebar__foot { gap: 12px; }
.th-social { justify-content: center; gap: 6px; }

.th-sidebar__meta {
	flex-direction: column;
	align-items: center;
	gap: 10px;
	padding-top: 14px;
}

.th-signature {
	display: block;
	font-size: 12px;
	font-weight: 600;
	color: var(--th-ink);
	text-align: center;
}

.th-signature:hover { color: var(--th-accent); }

/* --- Riel angosto: logo chico arriba y botón de desplegar abajo --- */

/* Riel angosto: el logo arriba y, justo debajo, el botón para desplegar. */
.th-app.is-collapsed .th-sidebar__head {
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	gap: 12px;
	padding: 0 0 16px;
}

.th-app.is-collapsed .th-sidebar__toggle { display: inline-flex; border: 1px solid var(--th-line); }
.th-app.is-collapsed .th-sidebar__toggle:hover { border-color: var(--th-accent); color: var(--th-accent); }
.th-app.is-collapsed .th-brand { display: flex; justify-content: center; width: 100%; }
.th-app.is-collapsed .th-brand__logo { max-height: 26px; max-width: 100%; }
.th-app.is-collapsed .th-brand__text { font-size: 12px; font-weight: 800; letter-spacing: .04em; }

.th-app.is-collapsed .th-social { flex-direction: row; flex-wrap: wrap; gap: 2px; }
.th-app.is-collapsed .th-signature { display: none; }
.th-app.is-collapsed .th-sidebar__meta { padding-top: 12px; }

@media (max-width: 1024px) {
	.th-app.is-collapsed .th-sidebar__head { flex-direction: row; justify-content: space-between; gap: 8px; padding: 2px 6px 18px; }
	.th-app.is-collapsed .th-sidebar__toggle { border: 0; }
	.th-app.is-collapsed .th-brand__logo { max-height: 34px; max-width: 150px; }
	.th-app.is-collapsed .th-signature { display: block; }
}

/* --- Notificaciones: borrar una o todas --- */

.th-campus .th-notifpop__clear {
	padding: 0;
	border: 0;
	background: none;
	font-size: 13px;
	font-weight: 600;
	color: var(--th-ink-3);
}

.th-campus .th-notifpop__clear:hover { color: var(--th-accent); }
.th-notifpop__item { position: relative; }
.th-notifpop__item > a { padding-right: 38px; }

.th-campus .th-notifpop__drop {
	position: absolute;
	top: 50%;
	right: 8px;
	transform: translateY(-50%);
	display: grid;
	place-items: center;
	width: 24px;
	height: 24px;
	padding: 0;
	border: 0;
	border-radius: 7px;
	background: transparent;
	color: var(--th-ink-3);
	opacity: 0;
	transition: opacity .12s ease, background .12s ease;
}

.th-notifpop__item:hover .th-notifpop__drop,
.th-campus .th-notifpop__drop:focus-visible { opacity: 1; }
.th-campus .th-notifpop__drop:hover { background: var(--th-surface-2); color: var(--th-ink); }
.th-notifpop__drop svg { width: 13px; height: 13px; }

@media (hover: none) {
	.th-campus .th-notifpop__drop { opacity: 1; }
}

/* ================================== comunidad: aire en las tarjetas ===== */

.th-topiccard { padding: 22px 24px; }
.th-topiccard__head { gap: 9px; margin-bottom: 15px; font-size: 13.5px; }
.th-topiccard__title { margin: 0 0 13px; line-height: 1.28; }
.th-topiccard__cats { margin: 0 0 15px; gap: 7px; }
.th-campus .th-topiccard__excerpt { margin: 0; font-size: 14.5px; }
.th-topiccard__foot { margin-top: 18px; }

/* La ficha del tema respira un poco más que la tarjeta del listado. */
.th-topic-detail .th-topiccard__head { margin-bottom: 18px; }
.th-topic-detail__title { margin: 0 0 15px; }
.th-topic-detail .th-topiccard__cats { margin: 0 0 18px; }
.th-topic-detail__body { margin: 0; }

/* --- Comentar: sólo la foto y el botón --- */

.th-commentbar { display: flex; align-items: center; gap: 12px; margin-top: 6px; }
.th-campus .th-commentbar .th-btn { padding: 11px 22px; }

@media (max-width: 640px) {
	.th-topiccard { padding: 18px; }
	.th-topiccard__head { margin-bottom: 12px; }
	.th-topiccard__title { margin: 0 0 11px; }
	.th-topiccard__cats { margin: 0 0 12px; }
	.th-campus .th-commentbar .th-btn { flex: 1 1 auto; }
}

/* ============================== checkout y gracias, con la marca nueva === */

.th-checkout,
.th-thanks { max-width: none; margin: 0; padding: 0; }

/* --- Cabecera oscura, igual que la ficha de venta --- */

.th-checkout__hero .th-band__inner,
.th-thanks__hero .th-band__inner { padding-top: 52px; padding-bottom: 46px; }

.th-checkout__title,
.th-thanks__title {
	font-size: clamp(28px, 3vw, 40px);
	font-weight: 800;
	letter-spacing: -.03em;
	line-height: 1.08;
	color: #fff;
}

.th-campus .th-checkout__lead,
.th-campus .th-thanks__lead {
	margin-top: 12px;
	font-size: 17px;
	line-height: 1.55;
	color: rgba(242, 242, 242, .74);
	max-width: 52ch;
}

.th-campus .th-checkout__lead strong { color: #fff; }

.th-thanks__mark {
	display: grid;
	place-items: center;
	width: 54px;
	height: 54px;
	margin-bottom: 18px;
	border-radius: 14px;
	background: var(--s-orange);
	color: #fff;
}

.th-thanks__mark svg { width: 28px; height: 28px; }
.th-thanks__mark--wait { background: rgba(242, 242, 242, .12); color: rgba(242, 242, 242, .8); }
.th-thanks__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }

/* --- Pasos, sobre fondo oscuro --- */

.th-checkout__hero .th-steps,
.th-thanks__hero .th-steps {
	justify-content: flex-start;
	gap: 0;
	margin: 30px 0 0;
	padding-top: 24px;
	border-top: 1px solid rgba(242, 242, 242, .14);
}

.th-checkout__hero .th-step,
.th-thanks__hero .th-step { color: rgba(242, 242, 242, .5); font-size: 14px; }

.th-checkout__hero .th-step__mark,
.th-thanks__hero .th-step__mark {
	border-color: rgba(242, 242, 242, .28);
	background: transparent;
	color: rgba(242, 242, 242, .6);
}

.th-checkout__hero .th-step.is-current,
.th-thanks__hero .th-step.is-current { color: #fff; font-weight: 700; }

.th-checkout__hero .th-step.is-current .th-step__mark,
.th-thanks__hero .th-step.is-current .th-step__mark { background: var(--s-orange); border-color: var(--s-orange); color: #fff; }

.th-checkout__hero .th-step.is-done,
.th-thanks__hero .th-step.is-done { color: rgba(242, 242, 242, .8); }

.th-checkout__hero .th-step.is-done .th-step__mark,
.th-thanks__hero .th-step.is-done .th-step__mark { background: rgba(242, 242, 242, .16); border-color: transparent; color: #fff; }

.th-checkout__hero .th-step + .th-step::before,
.th-thanks__hero .th-step + .th-step::before { background: rgba(242, 242, 242, .2); }

/* --- Cuerpo del checkout --- */

.th-checkout__body { padding-top: 44px !important; padding-bottom: 64px !important; }
.th-checkout__cols { grid-template-columns: minmax(0, 1fr) 380px; gap: 26px; }
.th-checkout__left { gap: 20px; }
.th-checkout__right { top: calc(var(--th-admin-bar) + 92px); }

body.th-campus .th-checkout .th-cbox {
	padding: 28px;
	border-radius: 10px;
	border-color: var(--s-line);
	background: var(--s-white);
}

body.th-campus .th-checkout .th-cbox--summary { box-shadow: 0 14px 36px rgba(20, 20, 20, .07); }
body.th-campus .th-checkout .th-cbox__title { font-size: 20px; font-weight: 750; letter-spacing: -.02em; color: var(--s-ink); }
body.th-campus .th-checkout .th-cbox__hint { font-size: 14.5px; color: var(--s-ink-2); margin-bottom: 22px; }

body.th-campus .th-checkout .form-row label { font-size: 14px; color: var(--s-ink); }

body.th-campus .th-checkout input[type="text"],
body.th-campus .th-checkout input[type="email"],
body.th-campus .th-checkout input[type="tel"],
body.th-campus .th-checkout input[type="password"],
body.th-campus .th-checkout input[type="number"],
body.th-campus .th-checkout textarea,
body.th-campus .th-checkout select:not(.select2-hidden-accessible) {
	min-height: 50px;
	border-radius: 10px;
	border-color: var(--s-line);
	background: var(--s-white);
	color: var(--s-ink);
	font-size: 15.5px;
}

body.th-campus .th-checkout .select2-container--default .select2-selection--single { height: 50px; border-radius: 10px; border-color: var(--s-line); }
body.th-campus .th-checkout .select2-container--default .select2-selection--single .select2-selection__rendered { line-height: 48px; font-size: 15.5px; color: var(--s-ink); }
body.th-campus .th-checkout .select2-container--default .select2-selection--single .select2-selection__arrow { height: 48px; }

/* Medios de pago */
body.th-campus .th-checkout .th-pay__option { border-radius: 10px; border-color: var(--s-line); }
body.th-campus .th-checkout .th-pay__option:has( input:checked ) { border-color: var(--s-orange); box-shadow: inset 0 0 0 1px var(--s-orange); }
body.th-campus .th-checkout .th-pay__label { font-size: 15.5px; color: var(--s-ink); }
body.th-campus .th-checkout .th-pay__box,
body.th-campus .th-checkout .payment_box { border-radius: 10px; font-size: 14.5px; color: var(--s-ink-2); }

/* Resumen */
.th-review__item { gap: 13px; }
.th-review__name { font-size: 15px; font-weight: 650; color: var(--s-ink); }
.th-review__price { font-size: 15px; font-weight: 700; color: var(--s-ink); }
.th-review__totals { font-size: 15px; color: var(--s-ink-2); }
.th-review__totals .th-review__grand dt,
.th-review__totals .th-review__grand dd { font-size: 20px; font-weight: 800; color: var(--s-ink); }
.th-coupon__title { font-size: 14.5px; color: var(--s-ink); }

body.th-campus .th-checkout #place_order,
body.th-campus .th-checkout button#place_order,
body.th-campus .th-checkout input#place_order {
	border-radius: 10px !important;
	padding: 16px 20px !important;
	font-size: 16px !important;
	font-weight: 700 !important;
}

/* --- Cuerpo de gracias --- */

.th-thanks__grid { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 40px; align-items: start; }
.th-thanks__main { display: flex; flex-direction: column; gap: 40px; min-width: 0; }

/* Flex y no grid: la última fila se estira y no deja huecos vacíos. */
.th-orderfacts {
	display: flex;
	flex-wrap: wrap;
	gap: 1px;
	margin: 0;
	border: 1px solid var(--s-line);
	border-radius: 10px;
	overflow: hidden;
	background: var(--s-line);
}

.th-orderfacts > div { flex: 1 1 140px; display: flex; flex-direction: column; gap: 5px; padding: 18px 20px; background: var(--s-white); }
.th-orderfacts dt { font-size: 11.5px; letter-spacing: .09em; text-transform: uppercase; color: var(--s-ink-3); }
.th-orderfacts dd { margin: 0; font-size: 15px; font-weight: 650; line-height: 1.35; color: var(--s-ink); }
.th-orderfacts__total { color: var(--s-orange) !important; font-weight: 800 !important; }

.th-orderstate {
	display: inline-flex;
	padding: 4px 11px;
	border-radius: var(--th-radius-pill);
	background: rgba(89, 68, 197, .12);
	color: var(--s-violet);
	font-size: 13px;
	font-weight: 700;
}

.th-orderstate.is-paid { background: rgba(23, 121, 74, .12); color: #17794a; }

.th-thanks__gatewaybox {
	padding: 24px;
	border: 1px solid var(--s-line);
	border-radius: 10px;
	background: var(--s-paper);
	font-size: 15.5px;
	line-height: 1.65;
	color: var(--s-ink-2);
}

.th-campus .th-thanks__gatewaybox h2,
.th-campus .th-thanks__gatewaybox h3 { font-size: 16px; color: var(--s-ink); margin: 0 0 10px; }
.th-campus .th-thanks__gatewaybox ul { display: flex; flex-direction: column; gap: 7px; }
.th-thanks__gatewaybox strong { color: var(--s-ink); }

.th-thanks__aside { position: sticky; top: calc(var(--th-admin-bar) + 92px); display: flex; flex-direction: column; gap: 14px; }
.th-thanks__asidetitle { font-size: 12.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--s-ink-3); }
.th-thanks .th-card { border-color: var(--s-line); background: var(--s-white); }

@media (max-width: 1024px) {
	.th-checkout__cols { grid-template-columns: minmax(0, 1fr); }
	.th-checkout__right { position: static; }
	.th-thanks__grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
	.th-thanks__aside { position: static; }
}

@media (max-width: 640px) {
	.th-checkout__hero .th-band__inner,
	.th-thanks__hero .th-band__inner { padding-top: 34px; padding-bottom: 30px; }
	.th-checkout__body { padding-top: 30px !important; padding-bottom: 44px !important; }
	body.th-campus .th-checkout .th-cbox { padding: 20px; }
	.th-campus .th-thanks__actions .th-cta { flex: 1 1 auto; }
	.th-orderfacts > div { flex-basis: 120px; padding: 15px 16px; }
	.th-checkout__hero .th-steps,
	.th-thanks__hero .th-steps { margin-top: 24px; padding-top: 18px; }
}

/* ================================== comunidad: aire real en los títulos == */
/*
 * El reset .th-campus h1/h2/p pisaba los márgenes de una sola clase, así que
 * los títulos quedaban pegados. Con el prefijo ganan.
 */

.th-campus .th-topiccard__title { margin: 0 0 13px; }
.th-campus .th-topiccard__cats { margin: 0 0 15px; }
.th-campus .th-topic-detail__title { margin: 0 0 15px; }
.th-campus .th-topic-detail .th-topiccard__cats { margin: 0 0 18px; }
.th-campus .th-topic-detail__body { margin: 0; }
.th-campus .th-comment__meta { margin: 0 0 5px; }
.th-campus .th-replies .th-block__title { margin: 0 0 18px; }

@media (max-width: 640px) {
	.th-campus .th-topiccard__title { margin: 0 0 11px; }
	.th-campus .th-topiccard__cats { margin: 0 0 12px; }
}

/* ============================== catálogo, tarjetas y tema del sitio ===== */

/* Tarjetas de curso más angostas y de ancho acotado. */
.th-grid { grid-template-columns: repeat(auto-fill, minmax(260px, 296px)); justify-content: start; gap: 16px; }

/* Botón "Más cursos" al lado de los filtros. */
.th-campus .th-morelink {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 9px 16px;
	border: 1px solid var(--th-line-strong);
	border-radius: 10px;
	background: var(--th-surface);
	font-size: 14px;
	font-weight: 600;
	color: var(--th-ink);
	white-space: nowrap;
}

.th-campus .th-morelink:hover { border-color: var(--th-accent); color: var(--th-accent); }
.th-morelink .th-icon { width: 17px; height: 17px; }

/* El sitio público siempre en claro, aunque la app esté en oscuro. */
body.th-campus--public,
body.th-campus--bare {
	--th-bg: #ffffff;
	--th-bg-soft: #fafafa;
	--th-surface: #ffffff;
	--th-surface-2: #f6f6f7;
	--th-ink: #16181d;
	--th-ink-2: #5b6070;
	--th-ink-3: #8a8f9e;
	--th-line: #e7e8ec;
	--th-line-strong: #d6d8de;

	background: var(--th-bg);
	color: var(--th-ink);
}

@media (max-width: 640px) {
	/* Una sola columna a lo ancho: con auto-fill quedaban columnas de 2px. */
	.th-grid { grid-template-columns: minmax(0, 1fr); }
}

/* ============================ lección: título y botón en la misma fila == */

/* Sin separador: el video va pegado al título. */
.th-lesson__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 16px 20px;
	margin-bottom: 18px;
	padding-bottom: 0;
	border-bottom: 0;
}

.th-lesson__title { flex: 1 1 320px; min-width: 0; }
.th-lesson__head .th-complete { margin-top: 0; flex: 0 0 auto; }

/*
 * Marcar como completada queda en contorno: texto y borde blancos sobre el tema
 * oscuro, y al revés sobre el claro.
 */
.th-campus .th-btn--done,
.th-campus button.th-btn--done {
	background: transparent;
	border: 1px solid var(--th-ink);
	color: var(--th-ink);
}

.th-campus .th-btn--done:hover,
.th-campus button.th-btn--done:hover {
	background: var(--th-ink);
	border-color: var(--th-ink);
	color: var(--th-bg);
}

.th-campus .th-btn--done .th-icon { color: currentColor; }

@media (max-width: 640px) {
	.th-lesson__head { margin-bottom: 14px; padding-bottom: 0; gap: 12px; }

	/* El botón no necesita todo el ancho: alcanza con su texto. */
	.th-lesson__head .th-complete { width: auto; }
	.th-campus .th-lesson__head .th-complete .th-btn,
	.th-campus .th-complete .th-btn {
		width: auto;
		padding: 7px 12px;
		font-size: 12.5px;
		gap: 6px;
	}
	.th-campus .th-complete .th-btn .th-icon { width: 15px; height: 15px; }
}

/* ================================== aula: sin header y con volver atrás == */

@media (min-width: 1025px) {
	body.th-view-leccion .th-topbar { display: none; }
	body.th-view-leccion { --th-topbar-h: 0px; }
}
body.th-view-leccion .th-content { padding-top: 20px; }


.th-lesson__top { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.th-lesson__menu { display: none; }

/* Barra de ubicación del aula: se lee como parte del marco de la app. */
.th-lessonnav {
	display: flex;
	align-items: center;
	gap: 4px;
	margin-bottom: 20px;
	padding: 7px 9px;
	border: 1px solid var(--th-line);
	border-radius: 12px;
	background: var(--th-surface);
}

/*
 * En escritorio la barra del aula no flota: se pega arriba y ocupa el ancho
 * completo del contenido, saliéndose del padding con márgenes negativos.
 */
@media (min-width: 1025px) {
	body.th-view-leccion .th-content { padding-top: 0; }

	.th-lessonnav {
		position: sticky;
		top: var(--th-admin-bar);
		z-index: 22;
		margin: 0 calc(var(--th-pr) * -1) 24px calc(var(--th-px) * -1);
		padding: 11px var(--th-pr) 11px var(--th-px);
		border: 0;
		border-bottom: 1px solid var(--th-line);
		border-radius: 0;
		background: var(--th-bg);
	}
}

.th-campus .th-lessonnav__back,
.th-campus .th-lessonnav__course {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-width: 0;
	padding: 8px 12px;
	border-radius: 8px;
	font-size: 14px;
	font-weight: 600;
	transition: background .15s ease, color .15s ease;
}

.th-campus .th-lessonnav__back { flex: 0 0 auto; color: var(--th-ink); }
.th-campus .th-lessonnav__back:hover { background: var(--th-surface-2); color: var(--th-accent); }
.th-lessonnav__back svg { width: 17px; height: 17px; }

.th-lessonnav__sep { flex: 0 0 auto; width: 1px; height: 20px; background: var(--th-line); }

.th-campus .th-lessonnav__course { flex: 1 1 auto; font-weight: 500; color: var(--th-ink-2); }
.th-campus .th-lessonnav__course:hover { background: var(--th-surface-2); color: var(--th-ink); }
.th-lessonnav__course svg { width: 17px; height: 17px; flex: 0 0 auto; color: var(--th-ink-3); }
.th-lessonnav__course span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }


.th-campus .th-backbtn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 9px 15px 9px 12px;
	border: 1px solid var(--th-line-strong);
	border-radius: 10px;
	background: var(--th-surface);
	font-size: 14px;
	font-weight: 600;
	color: var(--th-ink);
	white-space: nowrap;
}

.th-campus .th-backbtn:hover { border-color: var(--th-accent); color: var(--th-accent); }
.th-backbtn svg { width: 17px; height: 17px; }

.th-lesson__course {
	font-size: 14px;
	color: var(--th-ink-3);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	min-width: 0;
}

@media (max-width: 1024px) {
	.th-lesson__menu { display: inline-flex; }
	body.th-view-leccion .th-content { padding-top: 16px; }
}

@media (max-width: 640px) {
	.th-lesson__top { gap: 8px; margin-bottom: 14px; }
	.th-campus .th-backbtn { padding: 8px 12px 8px 10px; font-size: 13.5px; }
	.th-lesson__course { display: none; }
	/* El nombre del curso ya está en la barra de arriba: acá sobra. */
	.th-lessonnav { gap: 0; padding: 0; margin-bottom: 14px; border: 0; background: none; }
	.th-lessonnav__sep { display: none; }
	.th-campus .th-lessonnav__course { display: none; }

	.th-campus .th-lessonnav__back {
		padding: 9px 14px 9px 11px;
		border: 1px solid var(--th-line-strong);
		border-radius: 10px;
		background: var(--th-surface);
		font-size: 13.5px;
	}
}

/* =================== escritorio sin barra superior: todo en el menú ===== */

.th-sideuser { display: none; }

@media (min-width: 1025px) {
	.th-campus { --th-topbar-h: 0px; }
	.th-topbar { display: none; }
	.th-content { padding-top: 28px; }

	.th-sideuser {
		display: flex;
		align-items: center;
		gap: 6px;
		padding-top: 12px;
		border-top: 1px solid var(--th-line);
	}

	.th-sideuser__me { position: relative; flex: 1 1 auto; min-width: 0; }

	.th-campus .th-sideuser__btn {
		display: flex;
		align-items: center;
		gap: 9px;
		width: 100%;
		padding: 7px 8px;
		border: 0;
		border-radius: 10px;
		background: transparent;
		color: var(--th-ink);
		text-align: left;
	}

	.th-campus .th-sideuser__btn:hover { background: var(--th-surface-2); }
	.th-sideuser__btn .th-avatar { width: 30px; height: 30px; font-size: 12px; flex: 0 0 auto; }
	.th-sideuser__btn .th-avatar img { width: 30px; height: 30px; }
	.th-sideuser__name { flex: 1 1 auto; min-width: 0; font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
	.th-sideuser__chev { width: 15px; height: 15px; flex: 0 0 auto; color: var(--th-ink-3); }

	/* El panel se abre hacia arriba: el bloque vive al pie del menú. */
	.th-sideuser__panel,
	.th-sideuser .th-notifpop { top: auto; bottom: calc(100% + 8px); left: 0; right: auto; }
	.th-sideuser .th-notifpop { left: 0; width: min(340px, calc(100vw - 40px)); }
	.th-sideuser .th-notifbell__btn { width: 34px; height: 34px; flex: 0 0 auto; }

	/* Riel angosto: sólo los dos íconos, uno debajo del otro. */
	.th-app.is-collapsed .th-sideuser { flex-direction: column; gap: 8px; }
	.th-app.is-collapsed .th-sideuser__name,
	.th-app.is-collapsed .th-sideuser__chev { display: none; }
	.th-app.is-collapsed .th-sideuser__btn { justify-content: center; padding: 4px; }
	.th-app.is-collapsed .th-sideuser__panel,
	.th-app.is-collapsed .th-sideuser .th-notifpop { left: calc(100% + 8px); bottom: 0; }
}

/* ================================ mis cursos: títulos y filtros nuevos == */

.th-blockhead { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; }
.th-blocktitle { font-size: 27px; font-weight: 750; letter-spacing: -.025em; line-height: 1.2; }

/* Cabecera de pantalla: título grande y, debajo, de qué va la pestaña. */
.th-pagehead { margin-bottom: 20px; }
.th-campus .th-pagehead .th-pagelead {
	max-width: 64ch;
	margin: 8px 0 0;
	font-size: 15px;
	line-height: 1.6;
	color: var(--th-ink-2);
}
.th-blocklink { font-size: 14px; font-weight: 600; color: var(--th-accent); }
.th-blocklink:hover { text-decoration: underline; }
.th-campus .th-blockhead .th-resultline { margin: 0; font-size: 13.5px; color: var(--th-ink-3); }

/* Filtros de "Mis cursos": chips a la izquierda, buscador a la derecha. */
.th-filterbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px 20px;
	margin-bottom: 22px;
	padding-bottom: 16px;
	border-bottom: 1px solid var(--th-line);
}

.th-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.th-filterbar__tools { display: flex; align-items: center; gap: 10px; }

.th-campus .th-chip {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 9px 15px;
	border: 1px solid var(--th-line);
	border-radius: var(--th-radius-pill);
	background: var(--th-surface);
	font-size: 14px;
	font-weight: 600;
	color: var(--th-ink-2);
	transition: border-color .15s ease, background .15s ease, color .15s ease;
}

.th-campus .th-chip:hover { border-color: var(--th-line-strong); color: var(--th-ink); }

.th-campus .th-chip.is-active {
	border-color: var(--th-ink);
	background: var(--th-ink);
	color: var(--th-bg);
}

.th-chip__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--th-ink-3); }
.th-chip__dot--cursando { background: var(--th-accent); }
.th-chip__dot--finalizado { background: var(--th-done); }

.th-chip__n {
	min-width: 21px;
	padding: 0 6px;
	border-radius: var(--th-radius-pill);
	background: var(--th-surface-2);
	font-size: 12px;
	font-weight: 700;
	line-height: 20px;
	text-align: center;
	color: var(--th-ink-3);
}

.th-campus .th-chip.is-active .th-chip__n { background: var(--th-bg); color: var(--th-ink); }

/* Buscador instantáneo dentro de la propia lista. */
.th-findbox { position: relative; display: flex; align-items: center; width: 260px; max-width: 100%; }
.th-findbox__icon { position: absolute; left: 13px; width: 16px; height: 16px; color: var(--th-ink-3); pointer-events: none; }

.th-campus .th-findbox__input {
	width: 100%;
	padding: 10px 36px 10px 37px;
	border: 1px solid var(--th-line);
	border-radius: var(--th-radius-pill);
	background: var(--th-surface);
	font-family: inherit;
	font-size: 14px;
	color: var(--th-ink);
}

.th-campus .th-findbox__input::placeholder { color: var(--th-ink-3); }
.th-campus .th-findbox__input:focus { outline: none; border-color: var(--th-accent); }
.th-findbox__input::-webkit-search-cancel-button,
.th-findbox__input::-webkit-search-decoration { -webkit-appearance: none; display: none; }

.th-campus .th-findbox__clear {
	position: absolute;
	right: 7px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--th-surface-2);
	color: var(--th-ink-2);
}

.th-findbox__clear svg { width: 13px; height: 13px; }
.th-campus .th-findbox__clear:hover { color: var(--th-ink); }

/* Los archivados no son un filtro más: son otra vista. */
.th-campus .th-archivelink {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 9px 15px;
	border: 1px dashed var(--th-line-strong);
	border-radius: var(--th-radius-pill);
	font-size: 13.5px;
	font-weight: 600;
	color: var(--th-ink-2);
	text-decoration: none;
}

.th-campus .th-archivelink:hover { border-color: var(--th-ink-3); color: var(--th-ink); }
.th-campus .th-archivelink.is-active { border-style: solid; border-color: var(--th-ink); color: var(--th-ink); }
.th-archivelink svg { width: 15px; height: 15px; }
.th-archivelink__n { font-size: 12px; font-weight: 700; color: var(--th-ink-3); }

.th-campus .th-viewnote {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 18px;
	padding: 12px 16px;
	border: 1px solid var(--th-line);
	border-radius: var(--th-radius-sm);
	background: var(--th-surface-2);
	font-size: 13.5px;
	color: var(--th-ink-2);
}

.th-viewnote svg { flex: 0 0 auto; width: 17px; height: 17px; color: var(--th-ink-3); }


.th-campus .th-catalog__lead { max-width: 64ch; margin: -8px 0 22px; font-size: 15px; line-height: 1.65; color: var(--th-ink-2); }
.th-findbox--wide { width: 100%; max-width: 420px; }

@media (max-width: 720px) {
	.th-blocktitle { font-size: 23px; }
	/* En columna hay que apagar el wrap: si no, cada "línea" toma el ancho de su
	   contenido y los chips se salen de la pantalla. */
	.th-filterbar { flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 12px; }
	.th-filterbar__tools { order: -1; flex-wrap: wrap; min-width: 0; }
	.th-findbox { flex: 1 1 170px; width: auto; min-width: 0; }
	.th-campus .th-findbox__input { min-width: 0; }
	.th-chips { min-width: 0; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
	.th-chips::-webkit-scrollbar { display: none; }
	.th-campus .th-chip { white-space: nowrap; flex: 0 0 auto; }
}

/* ============================= menú lateral en mobile: más generoso ===== */

@media (max-width: 1024px) {
	.th-sidebar { padding: 20px 16px 22px; }
	.th-nav { gap: 14px; }
	.th-campus .th-nav__link { padding: 11px 12px; font-size: 15.5px; gap: 12px; }
	.th-nav__link .th-icon { width: 21px; height: 21px; }
	.th-sidebar__foot { gap: 16px; }

	.th-social { gap: 10px; }
	.th-social__link { width: 42px; height: 42px; border-radius: 12px; }
	.th-social__link .th-icon { width: 22px; height: 22px; }

	.th-signature { font-size: 13.5px; }
	.th-theme { gap: 4px; padding: 4px; }
	.th-campus .th-theme__btn { padding: 9px; }
	.th-theme__btn svg { width: 19px; height: 19px; }
	.th-sidebar__meta { gap: 14px; padding-top: 16px; }
}

/* ================================ aula: barra superior y pestañas ======= */

/* El menú queda siempre pegado al borde derecho. */
.th-lesson__course { margin-right: auto; }
.th-lesson__menu { margin-left: auto; }

/* Pestañas debajo del video. */
.th-tabsbar { display: flex; gap: 8px; margin: 22px 0 20px; }

.th-campus .th-tabbtn {
	padding: 11px 20px;
	border: 1px solid var(--th-line-strong);
	border-radius: 10px;
	background: var(--th-surface);
	font-size: 14.5px;
	font-weight: 400;
	color: var(--th-ink-2);
	transition: color .15s ease, border-color .15s ease;
}

.th-campus .th-tabbtn:hover { border-color: var(--th-ink-3); color: var(--th-ink); }

/* El activo no se pinta: lo único que cambia es el ícono, que pasa a relleno. */
.th-campus .th-tabbtn.is-active { color: var(--th-ink); }

.th-tabpanel > .th-block:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.th-tabpanel .th-comments { margin-top: 0; }

@media (max-width: 1024px) {
	/* En el aula el menú sale por la derecha, que es donde está su botón. */
}

@media (max-width: 640px) {
	.th-tabsbar { gap: 6px; margin: 16px 0 16px; }
}

/* ================================================ pantallas nuevas ====== */

/* --- Inicio --- */

.th-home__hi { margin-bottom: 22px; }
.th-home__title { font-size: 28px; font-weight: 750; letter-spacing: -.03em; }
.th-campus .th-home__sub { margin-top: 6px; font-size: 15.5px; color: var(--th-ink-2); }

.th-resume {
	display: grid;
	grid-template-columns: 180px minmax(0, 1fr) auto;
	gap: 22px;
	align-items: center;
	padding: 18px;
	border: 1px solid var(--th-line);
	border-radius: 10px;
	background: var(--th-surface);
	margin-bottom: 28px;
}

.th-resume__cover { display: block; aspect-ratio: 16 / 10; border-radius: 8px; overflow: hidden; background: var(--th-surface-2); }
.th-resume__cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.th-resume__body { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.th-resume__kicker { font-size: 11.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--th-accent); }
.th-resume__title { font-size: 20px; font-weight: 700; letter-spacing: -.02em; line-height: 1.25; }
.th-campus .th-resume__next { display: flex; align-items: center; gap: 8px; font-size: 14.5px; color: var(--th-ink-2); }
.th-resume__next .th-icon { width: 16px; height: 16px; color: var(--th-accent); }
.th-resume__bar { height: 6px; border-radius: var(--th-radius-pill); background: var(--th-surface-2); overflow: hidden; }
.th-resume__bar span { display: block; height: 100%; background: var(--th-accent); }
.th-campus .th-resume__meta { font-size: 13px; color: var(--th-ink-3); }
.th-resume__go { white-space: nowrap; }

.th-home__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; margin-bottom: 8px; }

.th-homebox { padding: 20px 22px; border: 1px solid var(--th-line); border-radius: 10px; background: var(--th-surface); }
.th-homebox .th-blockhead { margin-bottom: 14px; }
.th-homebox .th-blocktitle { font-size: 17px; }

.th-homestats { display: flex; flex-wrap: wrap; gap: 22px; margin: 0 0 14px; }
.th-homestats > div { display: flex; flex-direction: column; gap: 2px; }
.th-homestats dt { font-size: 11.5px; letter-spacing: .07em; text-transform: uppercase; color: var(--th-ink-3); }
.th-homestats dd { margin: 0; font-size: 22px; font-weight: 750; letter-spacing: -.02em; }

.th-campus .th-homenews { display: flex; flex-direction: column; gap: 4px; }
.th-homenews a { display: flex; align-items: flex-start; gap: 11px; padding: 9px 10px; margin: 0 -10px; border-radius: 9px; }
.th-homenews a:hover { background: var(--th-surface-2); }
.th-homenews__icon { display: grid; place-items: center; width: 28px; height: 28px; flex: 0 0 auto; border: 1px solid var(--th-line-strong); border-radius: 8px; color: var(--th-ink-3); }
.th-homenews__icon svg { width: 15px; height: 15px; }
.th-homenews li.is-new .th-homenews__icon { border-color: var(--th-accent); color: var(--th-accent); }
.th-homenews a > span:last-child { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.th-homenews__title { font-size: 14px; font-weight: 600; line-height: 1.35; }
.th-homenews__time { font-size: 12px; color: var(--th-ink-3); }

/* --- Primer ingreso --- */

.th-welcome { max-width: 640px; margin: 0 auto; }
.th-welcome__head { margin-bottom: 26px; text-align: center; }
.th-campus .th-welcome__title { margin: 0 0 8px; font-size: 26px; font-weight: 750; letter-spacing: -.025em; }
.th-campus .th-welcome__lead { max-width: 46ch; margin: 0 auto; font-size: 14.5px; line-height: 1.6; color: var(--th-ink-2); }
.th-welcome__steps { margin-bottom: 22px; }
.th-welcome__step { margin-bottom: 16px; }

/* Foto: se elige acá mismo y se ve antes de guardar. */
.th-welcome__photo { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; }
.th-welcome__pic .th-avatar { width: 72px; height: 72px; font-size: 24px; }
.th-welcome__pic img { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; display: block; }
.th-welcome__photoside { display: flex; flex-direction: column; align-items: flex-start; gap: 7px; }
.th-campus .th-welcome__photoside .th-btn { cursor: pointer; }
.th-campus .th-welcome__hint { font-size: 12.5px; line-height: 1.5; color: var(--th-ink-3); }

.th-welcome__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.th-welcome__interests { margin-top: 4px; }
.th-campus .th-field__label { display: block; margin-bottom: 9px; font-size: 14px; font-weight: 600; }
.th-welcome__avisos { display: flex; flex-direction: column; }

.th-welcome__foot { display: flex; gap: 10px; justify-content: flex-end; }
.th-welcome__skip { margin-top: 18px; text-align: center; }

.th-chipset__item input { position: absolute; opacity: 0; pointer-events: none; }
.th-chipset__item:has( input:checked ) { border-color: var(--th-accent); color: var(--th-accent); }

.th-checks { display: flex; flex-direction: column; gap: 11px; }
.th-check { display: flex; align-items: flex-start; gap: 10px; font-size: 14.5px; }
.th-check input { margin-top: 3px; accent-color: var(--th-accent); }

/* --- Buscador --- */

.th-search { max-width: 820px; }

.th-searchbar {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px 8px 8px 14px;
	margin-bottom: 22px;
	border: 1px solid var(--th-line-strong);
	border-radius: 10px;
	background: var(--th-surface);
}

.th-searchbar:focus-within { border-color: var(--th-accent); }
.th-searchbar__icon { display: inline-flex; color: var(--th-ink-3); }
.th-searchbar__icon svg { width: 18px; height: 18px; }

.th-campus .th-searchbar input[type="search"] {
	flex: 1 1 auto;
	min-width: 0;
	border: 0;
	background: none;
	font: inherit;
	font-size: 16px;
	color: var(--th-ink);
	padding: 8px 0;
}

.th-campus .th-searchbar input[type="search"]:focus { outline: none; }

.th-campus .th-hitlist { display: flex; flex-direction: column; gap: 6px; }
.th-hitlist a { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--th-line); border-radius: 10px; background: var(--th-surface); }
.th-hitlist a:hover { border-color: var(--th-accent); }
.th-hit__icon { display: grid; place-items: center; width: 32px; height: 32px; flex: 0 0 auto; border-radius: 9px; background: var(--th-surface-2); color: var(--th-ink-3); }
.th-hit__icon svg { width: 16px; height: 16px; }
.th-hit__body { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.th-hit__title { font-size: 15px; font-weight: 650; line-height: 1.3; }
.th-hit__meta { font-size: 13px; color: var(--th-ink-3); }

/* --- Perfil de un compañero --- */

.th-mate { max-width: 780px; }
.th-mate__head { display: flex; align-items: center; gap: 20px; margin: 18px 0 8px; }
.th-campus .th-mate__photo { width: 96px; height: 96px; border-radius: 14px; font-size: 32px; flex: 0 0 auto; }
.th-campus .th-mate__photo img { width: 96px; height: 96px; border-radius: 14px; object-fit: cover; }
.th-mate__name { font-size: 26px; font-weight: 750; letter-spacing: -.025em; }
.th-campus .th-mate__since { font-size: 13.5px; color: var(--th-ink-3); margin-top: 2px; }
.th-campus .th-mate__bio { font-size: 15px; line-height: 1.55; color: var(--th-ink-2); margin-top: 8px; max-width: 56ch; }

.th-campus .th-matelist { display: flex; flex-direction: column; gap: 6px; }
.th-matelist a { display: flex; align-items: center; gap: 11px; padding: 12px 14px; border: 1px solid var(--th-line); border-radius: 10px; background: var(--th-surface); font-size: 15px; }
.th-matelist a:hover { border-color: var(--th-accent); }
.th-matelist .th-icon { width: 17px; height: 17px; color: var(--th-ink-3); flex: 0 0 auto; }
.th-matelist small { display: block; font-size: 12.5px; color: var(--th-ink-3); }

/* --- Mis compras --- */

/* Los pedidos van en lista: una fila por compra, con el comprobante al final. */
.th-orders { max-width: none; }
.th-campus .th-orderlist { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--th-line); }
.th-orderlist li { border-bottom: 1px solid var(--th-line); }

.th-campus .th-order {
	display: grid;
	grid-template-columns: 74px 88px minmax(0, 1fr) auto auto 16px;
	align-items: center;
	gap: 18px;
	padding: 14px 12px;
	border-radius: var(--th-radius-sm);
	color: var(--th-ink);
	transition: background .15s ease;
}

.th-campus .th-order:hover { background: var(--th-surface-2); }

.th-order__id { font-size: 13.5px; font-weight: 700; font-variant-numeric: tabular-nums; }
.th-order__date { font-size: 13px; color: var(--th-ink-3); font-variant-numeric: tabular-nums; }
.th-order__what { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.th-order__name { overflow: hidden; font-size: 14px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.th-order__more { flex: 0 0 auto; font-size: 12.5px; color: var(--th-ink-3); }
.th-order__total { font-size: 15px; font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }
.th-order__go { width: 16px; height: 16px; color: var(--th-ink-3); }
.th-campus .th-order:hover .th-order__go { color: var(--th-accent); }

@media (max-width: 760px) {
	.th-campus .th-order {
		grid-template-columns: minmax(0, 1fr) auto;
		align-items: start;
		gap: 4px 12px;
		padding: 14px 10px;
	}

	.th-order__id { grid-column: 1; }
	.th-order__date { grid-column: 2; grid-row: 1; text-align: right; }
	.th-order__what { grid-column: 1 / -1; }
	.th-orderstate { grid-column: 1; justify-self: start; margin-top: 6px; }
	.th-order__total { grid-column: 2; margin-top: 6px; }
	.th-order__go { display: none; }
}

/* --- Ajustes de cuenta --- */

.th-settings { max-width: none; }

/* Índice fijo al costado y una sola columna de bloques: todos con la misma
   estructura (título, campos y barra de acción) para que no queden fichas
   sueltas de distinto alto. */
.th-settings__layout { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 34px; align-items: start; }
.th-settings__nav { position: sticky; top: 24px; display: flex; flex-direction: column; gap: 2px; }

.th-campus .th-settings__nav a {
	padding: 8px 12px;
	border-radius: 9px;
	font-size: 14px;
	font-weight: 600;
	color: var(--th-ink-3);
	text-decoration: none;
}

.th-campus .th-settings__nav a:hover { background: var(--th-surface-2); color: var(--th-ink); }


.th-settings__body { display: flex; flex-direction: column; gap: 18px; max-width: 720px; }

.th-set {
	border: 1px solid var(--th-line);
	border-radius: var(--th-radius);
	background: var(--th-surface);
	overflow: hidden;
	scroll-margin-top: 24px;
}

.th-set__head { padding: 20px 22px 0; }
.th-campus .th-set__head h2 { font-size: 17px; font-weight: 700; letter-spacing: -.01em; margin: 0 0 5px; }
.th-campus .th-set__head p { max-width: 62ch; margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--th-ink-3); }

.th-set__body { display: flex; flex-direction: column; gap: 14px; padding: 18px 22px 0; }
.th-set__body--split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 16px; }
.th-set__body--split .th-field--wide { grid-column: 1 / -1; }
.th-set__body--flush { gap: 0; padding-top: 8px; }

.th-set__foot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-top: 18px;
	padding: 14px 22px;
	border-top: 1px solid var(--th-line);
	background: var(--th-surface-2);
}

.th-campus .th-set__foot .th-set__note { max-width: 48ch; margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--th-ink-3); }

.th-set--danger { border-color: var(--th-danger); }
.th-set--danger .th-set__foot { background: var(--th-danger-soft); border-top-color: var(--th-danger); }
.th-campus .th-set--danger .th-set__head h2 { color: var(--th-danger); }

/* Tarjeta de identidad del alumno. */
.th-idcard {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 14px 16px;
	border: 1px solid var(--th-line);
	border-radius: var(--th-radius-sm);
	background: var(--th-surface-2);
}

.th-idcard__pic { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; }
.th-idcard__who { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.th-idcard__who strong { font-size: 15.5px; font-weight: 700; }
.th-idcard__who span { overflow: hidden; font-size: 13px; color: var(--th-ink-3); text-overflow: ellipsis; }
.th-idcard__since { display: flex; flex-direction: column; gap: 2px; margin-left: auto; text-align: right; }
.th-idcard__since span { font-size: 12px; color: var(--th-ink-3); }
.th-idcard__since strong { font-size: 13.5px; font-weight: 600; text-transform: capitalize; }

/* Avisos: una fila por aviso, con interruptor. */
.th-switchrow { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 14px 0; border-bottom: 1px solid var(--th-line); cursor: pointer; }
.th-switchrow:last-child { border-bottom: 0; }
.th-switchrow__text { display: flex; flex-direction: column; gap: 3px; }
.th-switchrow__text strong { font-size: 14px; font-weight: 600; }
.th-switchrow__text span { font-size: 12.5px; line-height: 1.5; color: var(--th-ink-3); }

.th-campus .th-switch {
	position: relative;
	flex: 0 0 auto;
	width: 44px;
	height: 25px;
	margin: 0;
	appearance: none;
	-webkit-appearance: none;
	border: 1px solid var(--th-line-strong);
	border-radius: var(--th-radius-pill);
	background: var(--th-surface-2);
	cursor: pointer;
	transition: background .18s ease, border-color .18s ease;
}

.th-campus .th-switch::after {
	content: "";
	position: absolute;
	top: 2px;
	left: 2px;
	width: 19px;
	height: 19px;
	border-radius: 50%;
	background: var(--th-surface);
	box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
	transition: transform .18s ease;
}

.th-campus .th-switch:checked { background: var(--th-accent); border-color: var(--th-accent); }
.th-campus .th-switch:checked::after { transform: translateX(19px); background: #fff; }
.th-campus .th-switch:focus-visible { outline: 2px solid var(--th-accent); outline-offset: 2px; }

.th-campus .th-settings .th-field { display: flex; flex-direction: column; gap: 6px; margin: 0; }
.th-campus .th-settings .th-field label { font-size: 14px; font-weight: 600; }

.th-campus .th-settings input[type="text"],
.th-campus .th-settings input[type="email"],
.th-campus .th-settings input[type="password"] {
	width: 100%;
	padding: 12px 14px;
	border: 1px solid var(--th-line-strong);
	border-radius: 10px;
	background: var(--th-surface);
	color: var(--th-ink);
	font: inherit;
	font-size: 15px;
}

.th-campus .th-settings input:focus { outline: none; border-color: var(--th-accent); }

@media (max-width: 900px) {
	.th-settings__layout { grid-template-columns: minmax(0, 1fr); gap: 18px; }
	.th-settings__nav { position: static; flex-direction: row; gap: 8px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
	.th-settings__nav::-webkit-scrollbar { display: none; }
	.th-campus .th-settings__nav a { flex: 0 0 auto; padding: 8px 14px; border: 1px solid var(--th-line); border-radius: var(--th-radius-pill); white-space: nowrap; }
	.th-set__body--split { grid-template-columns: minmax(0, 1fr); }
	.th-set__foot { align-items: flex-start; flex-direction: column; }
	.th-set__foot .th-btn { width: 100%; justify-content: center; }
	.th-idcard { flex-wrap: wrap; }
	.th-idcard__since { width: 100%; margin-left: 0; text-align: left; }
}

.th-accountline { display: flex; flex-direction: column; gap: 12px; margin: 0 0 18px; }
.th-accountline > div { display: flex; flex-direction: column; gap: 2px; }
.th-accountline dt { font-size: 11.5px; letter-spacing: .07em; text-transform: uppercase; color: var(--th-ink-3); }
.th-accountline dd { margin: 0; font-size: 15px; font-weight: 600; }

/* --- Evaluación --- */

.th-quiz { max-width: 820px; }
.th-quiz__head { margin: 8px 0 20px; }
.th-quiz__kicker { font-size: 11.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--th-accent); }
.th-quiz__title { font-size: 28px; font-weight: 750; letter-spacing: -.03em; line-height: 1.15; margin-top: 6px; }
.th-campus .th-quiz__lead { margin-top: 10px; font-size: 15.5px; line-height: 1.6; color: var(--th-ink-2); max-width: 60ch; }

.th-quizfacts { display: flex; flex-wrap: wrap; gap: 1px; margin: 0 0 22px; border: 1px solid var(--th-line); border-radius: 10px; overflow: hidden; background: var(--th-line); }
.th-quizfacts > div { flex: 1 1 140px; display: flex; flex-direction: column; gap: 4px; padding: 15px 18px; background: var(--th-surface); }
.th-quizfacts dt { font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--th-ink-3); }
.th-quizfacts dd { margin: 0; font-size: 16px; font-weight: 650; }

.th-quizstart { padding: 22px; border: 1px solid var(--th-line-strong); border-radius: 10px; background: var(--th-surface); }
.th-campus .th-quizstart__note { font-size: 14.5px; color: var(--th-ink-2); margin-bottom: 14px; }
.th-quizbody { padding: 22px; border: 1px solid var(--th-line); border-radius: 10px; background: var(--th-surface); }

.th-campus .th-tries { display: flex; flex-direction: column; gap: 6px; }
.th-try { display: flex; align-items: center; gap: 14px; padding: 12px 16px; border: 1px solid var(--th-line); border-radius: 10px; background: var(--th-surface); }
.th-try__date { font-size: 14px; color: var(--th-ink-2); }
.th-try__score { margin-left: auto; font-size: 17px; font-weight: 750; }
.th-try__state { padding: 3px 10px; border-radius: var(--th-radius-pill); background: var(--th-surface-2); font-size: 12.5px; font-weight: 650; color: var(--th-ink-2); }
.th-try__state.is-pass { background: rgba(23, 121, 74, .12); color: var(--th-done); }

/* --- Consultas de soporte --- */

.th-campus .th-tickets { display: flex; flex-direction: column; gap: 10px; }
.th-ticket { padding: 14px 16px; border: 1px solid var(--th-line); border-radius: 10px; background: var(--th-surface); }
.th-ticket__head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.th-ticket__subject { font-size: 14.5px; font-weight: 650; line-height: 1.35; }
.th-ticket__state { flex: 0 0 auto; padding: 3px 9px; border-radius: var(--th-radius-pill); font-size: 11.5px; font-weight: 700; background: var(--th-surface-2); color: var(--th-ink-2); }
.th-ticket__state.is-respondida { background: rgba(23, 121, 74, .12); color: var(--th-done); }
.th-ticket__state.is-abierta { background: var(--th-accent-soft); color: var(--th-accent); }
.th-campus .th-ticket__meta { font-size: 12.5px; color: var(--th-ink-3); margin-top: 4px; }
.th-campus .th-ticket__reply { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--th-line); font-size: 14px; color: var(--th-ink-2); }

/* --- Archivar y página perdida --- */

.th-lost__go { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 6px; }

@media (max-width: 900px) {
	.th-resume { grid-template-columns: minmax(0, 1fr); gap: 14px; }
	.th-resume__cover { max-width: 240px; }
	.th-resume__go { width: 100%; }
}

@media (max-width: 640px) {
	.th-home__title { font-size: 23px; }
	.th-quiz__title { font-size: 23px; }
	.th-mate__head { flex-direction: column; align-items: flex-start; gap: 14px; }
	.th-welcome__grid { grid-template-columns: minmax(0, 1fr); }
	.th-welcome__foot { justify-content: stretch; }
	.th-campus .th-welcome__foot .th-btn { flex: 1 1 auto; }
}

/* --- El cuerpo del examen lo dibuja Tutor: lo traemos a nuestros colores. */

.th-quizbody { color: var(--th-ink); }
.th-campus .th-quizbody .tutor-quiz-question-title,
.th-campus .th-quizbody .question-title,
.th-campus .th-quizbody h1,
.th-campus .th-quizbody h2,
.th-campus .th-quizbody h3,
.th-campus .th-quizbody h4,
.th-campus .th-quizbody p,
.th-campus .th-quizbody label,
.th-campus .th-quizbody span,
.th-campus .th-quizbody li { color: inherit; }

.th-campus .th-quizbody .tutor-quiz-answer-single,
.th-campus .th-quizbody .tutor-quiz-answer-single-item,
.th-campus .th-quizbody .tutor-form-check,
.th-campus .th-quizbody .quiz-answer-item { border-radius: 10px; }

/* Tutor pinta las opciones en blanco fijo: en tema oscuro quedaban ilegibles. */
.th-campus .th-quizbody .tutor-quiz-answer-single label,
.th-campus .th-quizbody .tutor-quiz-answer-single .tutor-form-check-label,
.th-campus .th-quizbody [class*="tutor-quiz-answer"] label {
	border: 1px solid var(--th-line-strong) !important;
	background: var(--th-surface) !important;
	color: var(--th-ink) !important;
	border-radius: 10px;
}

.th-campus .th-quizbody [class*="tutor-quiz-answer"] label * { color: var(--th-ink) !important; }

.th-campus .th-quizbody input[type="text"],
.th-campus .th-quizbody textarea {
	border: 1px solid var(--th-line-strong);
	border-radius: 10px;
	background: var(--th-surface);
	color: var(--th-ink);
	font: inherit;
	padding: 11px 13px;
}

.th-campus .th-quizbody .tutor-btn,
.th-campus .th-quizbody button[type="submit"] {
	border-radius: 10px !important;
	background: var(--th-accent) !important;
	border-color: var(--th-accent) !important;
	color: #fff !important;
	font-family: inherit !important;
	font-weight: 700 !important;
}

.th-campus .th-quizbody .quiz-attempt-info,
.th-campus .th-quizbody .tutor-quiz-attempt-info { color: var(--th-ink-2); font-size: 14px; }

/* Tutor usa .tutor-card blanca fija dentro de las opciones del examen. */
.th-campus .th-quizbody .tutor-card {
	background: var(--th-surface) !important;
	border: 1px solid var(--th-line-strong) !important;
	border-radius: 10px !important;
	box-shadow: none !important;
}

.th-campus .th-quizbody .tutor-card:hover { border-color: var(--th-accent) !important; }
.th-campus .th-quizbody .tutor-color-black,
.th-campus .th-quizbody .tutor-color-secondary { color: var(--th-ink) !important; }
.th-campus .th-quizbody .tutor-quiz-question-title { color: var(--th-ink) !important; }

/* --- Pestañas de la clase: ícono y nombre. --- */

.th-campus .th-tabbtn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	height: 40px;
	padding: 0 14px;
	flex: 0 0 auto;
	font-size: 13.5px;
}

.th-tabbtn svg { width: 17px; height: 17px; flex: 0 0 auto; }

.th-tabbtn__n { font-size: 13px; font-weight: 400; color: var(--th-ink-3); }
.th-campus .th-tabbtn.is-active .th-tabbtn__n { color: var(--th-ink-2); }

/* Cada pestaña trae el ícono en sus dos versiones y se turnan. */
.th-tabbtn__ico--fill { display: none; }
.th-tabbtn.is-active .th-tabbtn__ico--line { display: none; }
.th-tabbtn.is-active .th-tabbtn__ico--fill { display: block; }

@media (max-width: 640px) {
	/* Con tres nombres no entran a lo ancho: la barra se desliza. */
	.th-tabsbar { overflow-x: auto; scrollbar-width: none; }
	.th-tabsbar::-webkit-scrollbar { display: none; }
	.th-campus .th-tabbtn { flex: 0 0 auto; height: 38px; padding: 0 11px; font-size: 13px; gap: 6px; white-space: nowrap; }
	.th-tabbtn svg { width: 16px; height: 16px; }
}

/* ====================================== comprobante de una compra ======= */

.th-receipt { max-width: 780px; }
.th-campus .th-receipt__back { margin-bottom: 18px; }

.th-receipt__paper {
	border: 1px solid var(--th-line);
	border-radius: var(--th-radius);
	background: var(--th-surface);
	overflow: hidden;
}

.th-receipt__head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px;
	padding: 22px 24px 18px;
	border-bottom: 1px solid var(--th-line);
}

.th-campus .th-receipt__title { font-size: 20px; font-weight: 750; letter-spacing: -.02em; margin: 0 0 4px; }
.th-campus .th-receipt__date { margin: 0; font-size: 13px; color: var(--th-ink-3); }

.th-campus .th-receipt__pending {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	padding: 13px 24px;
	border-bottom: 1px solid var(--th-line);
	background: var(--th-accent-soft);
	font-size: 13.5px;
	color: var(--th-ink-2);
}

.th-receipt__pending svg { width: 18px; height: 18px; flex: 0 0 auto; color: var(--th-accent); }

.th-receipt__lines { padding: 6px 24px; }

.th-receipt__line {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	padding: 14px 0;
	border-bottom: 1px solid var(--th-line);
}

.th-receipt__line:last-child { border-bottom: 0; }
.th-receipt__what { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.th-receipt__name { font-size: 14.5px; font-weight: 600; }
.th-receipt__qty { font-size: 12.5px; color: var(--th-ink-3); }
.th-receipt__amount { flex: 0 0 auto; font-size: 14.5px; font-weight: 600; font-variant-numeric: tabular-nums; }

.th-receipt__totals { margin: 0; padding: 16px 24px; border-top: 1px solid var(--th-line); background: var(--th-surface-2); }
.th-receipt__total { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 5px 0; }
.th-receipt__total dt { font-size: 13.5px; color: var(--th-ink-2); }
.th-receipt__total dd { margin: 0; font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; }
.th-receipt__total:last-child dt { font-weight: 700; color: var(--th-ink); }
.th-receipt__total:last-child dd { font-size: 17px; font-weight: 750; }

.th-receipt__meta {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
	gap: 16px;
	padding: 20px 24px;
	border-top: 1px solid var(--th-line);
}

.th-receipt__meta > div { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.th-receipt__meta span { font-size: 12.5px; color: var(--th-ink-3); }
.th-receipt__meta strong { font-size: 14px; font-weight: 600; line-height: 1.45; }
.th-receipt__meta strong br { line-height: 1.6; }

.th-receipt__foot { display: flex; justify-content: flex-end; padding: 16px 24px; border-top: 1px solid var(--th-line); }
.th-receipt .th-block { margin-top: 32px; }

@media (max-width: 640px) {
	.th-receipt__head { flex-direction: column; gap: 10px; padding: 18px; }
	.th-receipt__lines,
	.th-receipt__totals,
	.th-receipt__meta,
	.th-receipt__foot { padding-left: 18px; padding-right: 18px; }
	.th-receipt__foot .th-btn { width: 100%; justify-content: center; }
}

@media print {
	.th-sidebar,
	.th-topbar,
	.th-themedock,
	.th-receipt__back,
	.th-receipt__foot,
	.th-receipt .th-block { display: none !important; }

	.th-receipt__paper { border: 0; }
	.th-content { padding: 0 !important; }
}

/* ============================ ficha de venta: dos columnas desde arriba == */

.th-course {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 400px;
	gap: 60px;
	align-items: start;
	padding-top: 64px;
	padding-bottom: 88px;
}

.th-course__main { display: flex; flex-direction: column; gap: 48px; min-width: 0; }

/* --- encabezado --- */

.th-course__head { display: flex; flex-direction: column; gap: 0; padding-bottom: 30px; }
.th-campus .th-course__crumbs { margin-bottom: 18px; font-size: 13.5px; }
.th-course__badges { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }

.th-campus .th-course__title {
	margin: 0 0 18px;
	font-size: clamp(29px, 3.2vw, 44px);
	font-weight: 800;
	letter-spacing: -.03em;
	line-height: 1.08;
	color: var(--s-ink);
	text-wrap: balance;
}

.th-rating { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.th-rating__stars { display: inline-flex; gap: 2px; }
.th-rating__star { width: 15px; height: 15px; color: var(--s-line-strong); }
.th-rating__star.is-on { color: #f5a524; }
.th-rating__value { font-size: 14px; font-weight: 700; color: var(--s-ink); }
.th-campus .th-rating__count { font-size: 14px; color: var(--s-ink-2); text-decoration: underline; text-underline-offset: 3px; }
.th-campus .th-rating__count:hover { color: var(--s-orange); }

.th-campus .th-course__date { margin: 0 0 24px; font-size: 13px; color: var(--s-ink-3); }

.th-campus .th-chipbar { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 28px; padding: 0; list-style: none; }

.th-chipbar li {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 7px 12px;
	border: 1px solid var(--s-line);
	border-radius: 10px;
	font-size: 13.5px;
	color: var(--s-ink);
}

.th-chipbar svg { width: 16px; height: 16px; flex: 0 0 auto; color: var(--s-ink-3); }

.th-campus .th-course__lead { max-width: 60ch; margin: 0 0 30px; font-size: 15.5px; line-height: 1.6; color: var(--s-ink-2); }

.th-course__by { display: flex; align-items: center; gap: 12px; }
.th-course__by .th-avatar { width: 44px; height: 44px; display: grid; place-items: center; background: var(--s-violet); color: #fff; font-size: 15px; font-weight: 700; flex: 0 0 auto; }
.th-course__by small { display: block; font-size: 12px; color: var(--s-ink-3); }
.th-course__by strong { font-size: 14.5px; font-weight: 700; color: var(--s-ink); }
.th-course__students { margin-left: auto; font-size: 13.5px; color: var(--s-ink-3); }

/* --- columna de compra --- */

.th-course__rail {
	position: sticky;
	top: calc(var(--th-admin-bar) + 92px);
	display: flex;
	flex-direction: column;
	gap: 14px;
}

/* El video y el precio son una sola tarjeta. */
.th-buycard {
	overflow: hidden;
	border: 1px solid var(--s-line);
	border-radius: 16px;
	background: var(--s-white);
}

.th-buycard__media { position: relative; aspect-ratio: 16 / 9; background: var(--s-ink); }
.th-buycard__media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.th-buycard__media .th-trailer { margin: 0; height: 100%; border-radius: 0; }
.th-buycard__media .th-trailer__frame,
.th-buycard__media .th-trailer__video { height: 100%; border-radius: 0; }

.th-buycard .th-pricecard { gap: 12px; padding: 22px; border: 0; border-radius: 0; box-shadow: none; background: transparent; }

/* El botón de la tarjeta no necesita el cuerpo de un CTA de portada. */
.th-campus .th-buycard .th-cta { padding: 12px 18px; font-size: 15px; border-radius: 10px; }
.th-buycard .th-pricecard__list { margin-top: 4px; padding-top: 16px; border-top: 1px solid var(--s-line); }


/* --- plan de estudio como línea de tiempo --- */

.th-plan { position: relative; padding-left: 34px; }

.th-plan::before {
	content: "";
	position: absolute;
	left: 11px;
	top: 6px;
	bottom: 6px;
	width: 2px;
	background: var(--s-line);
}

.th-plan__unit { position: relative; }
.th-plan__unit + .th-plan__unit { margin-top: 10px; }

.th-plan__unithead {
	position: relative;
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 15px;
	border: 1px solid var(--s-line);
	border-radius: 12px;
	background: var(--s-white);
	cursor: pointer;
	list-style: none;
	transition: border-color .15s ease, background .15s ease;
}

.th-plan__unithead::-webkit-details-marker { display: none; }
.th-plan__unithead:hover { border-color: var(--s-line-strong); }
.th-plan__unit[open] .th-plan__unithead { border-color: var(--s-orange); }

.th-plan__unithead::before {
	content: "";
	position: absolute;
	left: -29px;
	top: 50%;
	width: 12px;
	height: 12px;
	margin-top: -6px;
	border-radius: 50%;
	background: var(--s-line-strong);
	transition: background .15s ease;
}

.th-plan__unit[open] .th-plan__unithead::before { background: var(--s-orange); }

.th-plan__unitname { flex: 1 1 auto; min-width: 0; font-size: 16px; font-weight: 750; letter-spacing: -.015em; color: var(--s-ink); }
.th-plan__unitmeta { flex: 0 0 auto; font-size: 13px; color: var(--s-ink-3); white-space: nowrap; }
.th-plan__chev { width: 18px; height: 18px; flex: 0 0 auto; color: var(--s-ink-3); transition: transform .18s ease; }
.th-plan__unit[open] .th-plan__chev { transform: rotate(180deg); }
.th-campus .th-plan__intro { margin: 14px 0 0; font-size: 14px; line-height: 1.6; color: var(--s-ink-2); }

.th-campus .th-plan__list { display: flex; flex-direction: column; gap: 4px; margin: 10px 0 6px; padding: 0; list-style: none; }

.th-plan__item {
	position: relative;
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 8px 10px;
	border-radius: 10px;
}

.th-plan__item:hover { background: var(--s-surface-2); }

.th-plan__n {
	position: absolute;
	left: -34px;
	display: grid;
	place-items: center;
	width: 24px;
	height: 24px;
	border: 1px solid var(--s-line);
	border-radius: 50%;
	background: var(--s-bg);
	font-size: 12px;
	font-weight: 600;
	color: var(--s-ink-3);
}

.th-plan__tile {
	display: grid;
	place-items: center;
	width: 66px;
	height: 40px;
	flex: 0 0 auto;
	border-radius: 8px;
	background: var(--s-ink);
	color: rgba(255, 255, 255, .82);
}

.th-plan__tile svg { width: 20px; height: 20px; }
.th-plan__body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.th-plan__title { font-size: 14.5px; font-weight: 650; line-height: 1.35; color: var(--s-ink); }
.th-plan__time { font-size: 12.5px; color: var(--s-ink-3); font-variant-numeric: tabular-nums; }

@media (max-width: 1024px) {
	.th-course.th-band__inner { padding-left: 22px; padding-right: 22px; }
	.th-course { grid-template-columns: minmax(0, 1fr); gap: 40px; padding-top: 34px; padding-bottom: 56px; }
	.th-course__rail { position: static; order: -1; }
	.th-course__main { gap: 44px; }
}

@media (max-width: 640px) {
	.th-plan { padding-left: 26px; }
	.th-plan::before { left: 8px; }
	.th-plan__unit::before { left: -24px; width: 10px; height: 10px; }
	.th-plan__n { left: -26px; width: 20px; height: 20px; font-size: 11px; }
	.th-plan__item { gap: 11px; padding: 9px 8px; }
	.th-plan__tile { width: 58px; height: 36px; }
	.th-plan__tile svg { width: 17px; height: 17px; }
	.th-chipbar li { padding: 8px 11px; font-size: 13px; }
}

/* ================================================ pantalla de carga ===== */

/*
 * Se pinta desde el servidor, así que aparece antes que cualquier script. El
 * JS la saca cuando la página terminó; la animación con retardo es la red por
 * si el JS no llega a correr. Va siempre en oscuro, con los dos temas.
 */
.th-splash {
	position: fixed;
	inset: 0;
	z-index: 200;
	display: grid;
	place-items: center;
	background: #08090c;
	animation: th-splash-out .4s ease 8s forwards;
}

.th-splash.is-out { animation: th-splash-out .4s ease forwards; }

@keyframes th-splash-out {
	to { opacity: 0; visibility: hidden; }
}

.th-splash__box { display: flex; flex-direction: column; align-items: center; gap: 26px; padding: 0 24px; text-align: center; }

.th-splash__ring {
	width: 34px;
	height: 34px;
	border: 2px solid rgba(255, 255, 255, .16);
	border-top-color: #fff;
	border-radius: 50%;
	animation: th-splash-spin 1.1s linear infinite;
}

@keyframes th-splash-spin { to { transform: rotate(360deg); } }

.th-campus .th-splash__msg { margin: 0; font-size: 15px; font-weight: 500; letter-spacing: -.005em; color: #fff; }

@media (prefers-reduced-motion: reduce) {
	.th-splash__ring { animation: th-splash-spin 3s linear infinite; }
}

@media print {
	.th-splash { display: none !important; }
}