/*
 * The Sensual Soul · Formación
 * Se apoya en las variables y piezas de assets/base.css.
 */

.tssf {
	--tssf-blanco: #fff;
	--tssf-error: #b3261e;
	--tssf-ok: #4f6b3a;
	--tssf-sombra: 0 1px 2px rgba(60, 69, 53, .06), 0 8px 28px rgba(60, 69, 53, .06);
	--tssf-pegado: 1.5rem;   /* lo que se separa del borde al quedarse pegado */
}

.tssf-icono {
	display: inline-block;
	flex: none;
	width: 1.15em;
	height: 1.15em;
	vertical-align: -.2em;
}

.tssf [hidden] {
	display: none !important;
}

/* ------------------------------------------------------------------
   Piezas comunes
------------------------------------------------------------------ */

.tssf-migas {
	margin: 0 0 1.5rem;
	font: 400 .7rem/1.4 var(--tssf-fuente-texto);
	letter-spacing: .22em;
	text-transform: uppercase;
}

.tssf-migas a {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	color: var(--tssf-suave);
	text-decoration: none;
	transition: color .2s ease;
}

.tssf-migas a:hover {
	color: var(--tssf-secundario);
}

.tssf-nota {
	margin: .4rem 0 0;
	font-size: .84rem;
	line-height: 1.55;
	color: var(--tssf-suave);
}

.tssf-enlace-texto {
	padding: 0;
	border: 0;
	background: none;
	font: inherit;
	font-size: .84rem;
	color: var(--tssf-principal);
	text-decoration: underline;
	text-decoration-color: var(--tssf-linea);
	text-underline-offset: .2em;
	cursor: pointer;
	transition: color .2s ease, text-decoration-color .2s ease;
}

.tssf-enlace-texto:hover {
	color: var(--tssf-secundario);
	text-decoration-color: currentColor;
}

.tssf-enlace-texto--peligro {
	color: var(--tssf-error);
}

.tssf-aviso {
	margin: .2rem 0 0;
}

.tssf-ui-aviso--ok {
	border-left-color: var(--tssf-secundario);
}

.tssf-boton--ancho {
	width: 100%;
	padding-block: 1.2rem;
}

.tssf-boton--claro {
	background: var(--tssf-beige);
	color: var(--tssf-principal);
}

.tssf-boton--claro:hover {
	background: var(--tssf-beige-hover);
}

.tssf-ui-boton .tssf-icono {
	width: 1.05rem;
	height: 1.05rem;
}

.tssf-ui-boton[disabled] {
	opacity: .55;
	cursor: not-allowed;
}

.tssf-ocupado {
	cursor: progress !important;
	opacity: .7;
}

.tssf-ocupado .tssf-icono--candado {
	animation: tssf-latido 1s ease-in-out infinite;
}

@keyframes tssf-latido {
	50% { opacity: .35; }
}

.tssf-etiqueta {
	display: inline-block;
	padding: .2rem .55rem;
	border-radius: 2px;
	background: var(--tssf-fondo);
	font: 400 .62rem/1.4 var(--tssf-fuente-texto);
	letter-spacing: .14em;
	text-transform: uppercase;
	vertical-align: middle;
	color: var(--tssf-principal);
}

.tssf-seguro {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: .45rem;
	margin: .9rem 0 0;
	font-size: .78rem;
	color: var(--tssf-suave);
}

/* Campos */
.tssf-form .tssf-ui-campo input {
	background: var(--tssf-blanco);
}

.tssf-clave {
	position: relative;
	display: block;
}

.tssf-clave input {
	padding-right: 3rem !important;
}

.tssf-clave__ver {
	position: absolute;
	top: 50%;
	right: .55rem;
	display: grid;
	place-items: center;
	width: 2.1rem;
	height: 2.1rem;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: none;
	color: var(--tssf-suave);
	cursor: pointer;
	transform: translateY(-50%);
	transition: color .2s ease, background-color .2s ease;
}

.tssf-clave__ver:hover,
.tssf-clave__ver[aria-pressed="true"] {
	background: var(--tssf-fondo);
	color: var(--tssf-principal);
}

.tssf-error input,
.tssf-error.tssf-ui-check input {
	border-color: var(--tssf-error) !important;
	outline: 1px solid var(--tssf-error);
	outline-offset: 0;
}

.tssf-error.tssf-ui-check span {
	color: var(--tssf-error);
}

/* Progreso */
.tssf-barra {
	position: relative;
	height: 4px;
	overflow: hidden;
	border-radius: 2px;
	background: var(--tssf-linea);
}

.tssf-barra span {
	position: absolute;
	inset: 0 auto 0 0;
	border-radius: 2px;
	background: linear-gradient(90deg, var(--tssf-franja), var(--tssf-secundario));
	transition: width .6s cubic-bezier(.2, .7, .2, 1);
}

.tssf-progreso__texto {
	margin: 0 0 .6rem;
	font-size: .88rem;
	color: var(--tssf-suave);
}

.tssf-progreso__texto strong {
	font: 500 1.5rem/1 var(--tssf-fuente-titulos);
	color: var(--tssf-principal);
}

.tssf-progreso--mini .tssf-progreso__texto {
	font-size: .8rem;
}

.tssf-progreso--mini .tssf-progreso__texto strong {
	font: 400 .85rem/1 var(--tssf-fuente-texto);
}

.tssf-progreso__botones {
	display: flex;
	flex-wrap: wrap;
	gap: .7rem;
	margin: 1.3rem 0 0;
}

/* ------------------------------------------------------------------
   Catálogo
------------------------------------------------------------------ */

.tssf-intro {
	padding-bottom: clamp(1.5rem, 2.5vw, 2rem);
}

.tssf-intro .tssf-ui-cabezal {
	margin-bottom: 0;
}

.tssf-intro .tssf-ui-titulo {
	font-size: clamp(2.6rem, 5vw, 4rem);
}

/*
 * El catálogo. La forma de la tarjeta vive en base.css (es la pieza
 * `tssf-ui-servicio`); aquí solo lo propio de un curso: el precio, el botón y
 * su zona pulsable.
 */
.tssf-cursos {
	padding-top: 0;
}

/* El botón, pegado al fondo, para que todas las tarjetas lo alineen. Lleva la
   clase del contenedor delante porque si no, el margen de los <p> del área
   pesa más que este `auto`. */
.tssf-cursos .tssf-curso__boton {
	width: 100%;
	margin-top: auto;
	padding-top: 1.1rem;
}

.tssf-cursos .tssf-curso__boton .tssf-ui-boton {
	width: 100%;
}

/*
 * Y su zona pulsable se estira a toda la tarjeta: se pulse donde se pulse
 * —foto, título o botón— se va al mismo sitio.
 */
.tssf-cursos .tssf-curso__boton .tssf-ui-boton::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

.tssf-curso__precio {
	margin: 0;
	font: 400 .72rem/1.4 var(--tssf-fuente-texto);
	letter-spacing: .22em;
	text-transform: uppercase;
	color: var(--tssf-principal);
}

/* Ventana */
.tssf-datos {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem 1.6rem;
	margin: -.2rem 0 1.6rem;
	padding: 0;
	list-style: none;
	font-size: .86rem;
	color: var(--tssf-suave);
}

.tssf-datos li {
	display: inline-flex;
	align-items: center;
	gap: .45rem;
}

.tssf-datos .tssf-icono {
	color: var(--tssf-acento);
}

.tssf-programa__texto > :last-child {
	margin-bottom: 0;
}

.tssf-planes {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
	gap: 1rem;
	margin: 2rem 0 0;
}

.tssf-plan {
	padding: 1.4rem 1.5rem;
	border: 1px solid var(--tssf-linea);
	background: var(--tssf-blanco);
}

.tssf-plan p {
	margin: 0;
}

.tssf-plan__nombre {
	font: 400 .66rem/1.4 var(--tssf-fuente-texto);
	letter-spacing: .24em;
	text-transform: uppercase;
	color: var(--tssf-principal);
}

.tssf-plan__precio {
	margin: .45rem 0 .3rem;
	font: 500 2.4rem/1 var(--tssf-fuente-titulos);
	color: var(--tssf-principal);
}

.tssf-plan__precio span {
	font-size: 1.1rem;
	color: var(--tssf-suave);
}

.tssf-plan__nota {
	font-size: .82rem;
	color: var(--tssf-suave);
}

/* Acceso */
.tssf-acceso {
	background: var(--tssf-papel);
	border-top: 1px solid var(--tssf-linea);
}

.tssf-acceso--sola {
	min-height: calc(100vh - 10rem);
}

.tssf-acceso__caja {
	max-width: 30rem;
	margin: 0 auto;
	text-align: center;
}

.tssf-acceso__caja .tssf-ui-titulo {
	font-size: clamp(2rem, 3.4vw, 2.6rem);
}

.tssf-acceso__texto {
	margin: 0 auto 1.8rem;
	color: var(--tssf-suave);
}

.tssf-acceso .tssf-ui-form {
	text-align: left;
}

.tssf-acceso .tssf-ui-form > p {
	margin: 0;
}

.tssf-acceso__olvido {
	text-align: center;
}

.tssf-acceso .tssf-ui-form__envio .tssf-ui-boton {
	margin-left: auto;
}

.tssf-accesos {
	display: grid;
	gap: .5rem;
	margin: 0 0 1.6rem;
	padding: 0;
	list-style: none;
}

.tssf-accesos a {
	display: flex;
	align-items: center;
	gap: .7rem;
	padding: .9rem 1.1rem;
	border: 1px solid var(--tssf-linea);
	background: var(--tssf-blanco);
	color: var(--tssf-principal);
	text-align: left;
	text-decoration: none;
	transition: border-color .2s ease;
}

.tssf-accesos a:hover {
	border-color: var(--tssf-acento);
}

.tssf-acceso__botones {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 1rem 1.5rem;
}

.tssf-vacio .tssf-ui-texto {
	text-align: center;
}

/* ------------------------------------------------------------------
   Pago
------------------------------------------------------------------ */

.tssf-pago {
	padding-top: clamp(2.5rem, 5vw, 3.5rem);
}

.tssf-pago__rejilla {
	display: grid;
	grid-template-columns: minmax(0, 1.35fr) minmax(0, .9fr);
	gap: clamp(2rem, 5vw, 4.5rem);
	align-items: start;
}

.tssf-pago__form {
	gap: 0;
}

.tssf-pago__cabecera .tssf-ui-titulo {
	margin-bottom: 1.8rem;
	font-size: clamp(2.3rem, 4.2vw, 3.3rem);
}

.tssf-paso {
	display: grid;
	gap: .8rem;
	min-width: 0;
	margin: 0 0 2rem;
	padding: 0 0 2rem;
	border: 0;
	border-bottom: 1px solid var(--tssf-linea);
}

.tssf-paso:last-child {
	margin-bottom: 0;
	padding-bottom: 0;
	border-bottom: 0;
}

.tssf-paso__titulo {
	display: flex;
	align-items: center;
	gap: .75rem;
	margin: 0 0 .6rem;
	padding: 0;
	font: 500 1.45rem/1.2 var(--tssf-fuente-titulos);
	color: var(--tssf-principal);
}

.tssf-paso__titulo span {
	display: grid;
	place-items: center;
	width: 1.9rem;
	height: 1.9rem;
	border: 1px solid var(--tssf-principal);
	border-radius: 50%;
	font: 400 .8rem/1 var(--tssf-fuente-texto);
}

.tssf-sesion-actual {
	margin: 0;
	padding: .9rem 1.1rem;
	background: var(--tssf-papel);
	font-size: .9rem;
}

.tssf-cuenta-nueva,
.tssf-entrar-pago {
	display: grid;
	gap: .8rem;
}

.tssf-entrar-pago {
	padding: 1.2rem;
	border: 1px solid var(--tssf-linea);
	background: var(--tssf-papel);
}

.tssf-entrar-pago p {
	margin: 0;
}

.tssf-entrar-pago__botones {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .8rem 1.3rem;
}

/* Plan */
.tssf-opciones {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: .8rem;
}

.tssf-opcion {
	position: relative;
	cursor: pointer;
}

.tssf-opcion input {
	position: absolute;
	opacity: 0;
}

.tssf-opcion__caja {
	display: grid;
	gap: .25rem;
	height: 100%;
	padding: 1.1rem 1.2rem 1.1rem 2.9rem;
	border: 1px solid var(--tssf-linea);
	background: var(--tssf-blanco);
	transition: border-color .2s ease, box-shadow .2s ease;
}

.tssf-opcion__caja::before {
	content: "";
	position: absolute;
	top: 1.25rem;
	left: 1.1rem;
	width: 1rem;
	height: 1rem;
	border: 1px solid var(--tssf-suave);
	border-radius: 50%;
	background: var(--tssf-blanco);
	transition: border .2s ease;
}

.tssf-opcion input:checked + .tssf-opcion__caja {
	border-color: var(--tssf-principal);
	box-shadow: inset 0 0 0 1px var(--tssf-principal);
}

.tssf-opcion input:checked + .tssf-opcion__caja::before {
	border: 5px solid var(--tssf-principal);
}

.tssf-opcion input:focus-visible + .tssf-opcion__caja {
	outline: 1px solid var(--tssf-acento);
	outline-offset: 3px;
}

.tssf-opcion__nombre {
	font: 400 .66rem/1.4 var(--tssf-fuente-texto);
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--tssf-principal);
}

.tssf-opcion__precio {
	font: 500 1.7rem/1.1 var(--tssf-fuente-titulos);
	color: var(--tssf-principal);
}

.tssf-opcion__precio small {
	font-size: .95rem;
	color: var(--tssf-suave);
}

.tssf-opcion__nota {
	font-size: .8rem;
	line-height: 1.45;
	color: var(--tssf-suave);
}

/* Cupón */
.tssf-cupon summary {
	display: inline-block;
	font-size: .86rem;
	color: var(--tssf-principal);
	text-decoration: underline;
	text-decoration-color: var(--tssf-linea);
	text-underline-offset: .2em;
	cursor: pointer;
	list-style: none;
}

.tssf-cupon summary::-webkit-details-marker {
	display: none;
}

.tssf-cupon[open] summary {
	margin-bottom: .7rem;
}

.tssf-cupon__fila {
	display: flex;
	gap: .6rem;
}

.tssf-cupon__fila .tssf-ui-campo {
	flex: 1;
}

.tssf-cupon__fila input {
	text-transform: uppercase;
	letter-spacing: .08em;
}

.tssf-cupon__fila .tssf-ui-boton {
	padding-inline: 1.4rem;
}

/* Stripe */
.tssf-stripe {
	min-height: 5rem;
	padding: 1.2rem;
	border: 1px solid var(--tssf-linea);
	background: var(--tssf-blanco);
}

.tssf-cargando {
	margin: 0;
	font-size: .86rem;
	color: var(--tssf-suave);
}

.tssf-gratis {
	margin: 0;
	padding: 1rem 1.2rem;
	background: rgba(107, 117, 86, .09);
	color: var(--tssf-principal);
}

.tssf-legal {
	display: grid;
	gap: .2rem;
	margin-top: .4rem;
}

.tssf-legal .tssf-ui-check {
	margin: 0;
}

/* Resumen */
.tssf-resumen {
	position: sticky;
	top: var(--tssf-pegado);
}

.tssf-resumen__caja {
	overflow: hidden;
	background: var(--tssf-papel);
	box-shadow: var(--tssf-sombra);
}

.tssf-resumen__foto {
	display: block;
	width: 100%;
	height: 17rem;
	padding: 1.2rem 1.2rem 0;
	background: var(--tssf-fondo);
	object-fit: contain;
	object-position: center bottom;
}

.tssf-resumen__cuerpo {
	padding: 1.8rem 1.9rem 2rem;
}

.tssf-resumen__cuerpo .tssf-ui-antetitulo {
	margin-bottom: .5rem;
}

.tssf-resumen__titulo {
	margin: 0 0 1.4rem;
	font: 500 2rem/1.1 var(--tssf-fuente-titulos);
	color: var(--tssf-principal);
}

.tssf-resumen__lineas {
	margin: 0;
}

.tssf-resumen__lineas > div {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	padding: .75rem 0;
	border-top: 1px solid var(--tssf-linea);
	font-size: .92rem;
}

.tssf-resumen__lineas dt,
.tssf-resumen__lineas dd {
	margin: 0;
}

.tssf-resumen__descuento dd {
	color: var(--tssf-ok);
}

.tssf-resumen__total {
	align-items: baseline;
}

.tssf-resumen__total dt {
	font: 400 .7rem/1.4 var(--tssf-fuente-texto);
	letter-spacing: .22em;
	text-transform: uppercase;
	color: var(--tssf-principal);
}

.tssf-resumen__total dd {
	font: 500 2rem/1 var(--tssf-fuente-titulos);
	color: var(--tssf-principal);
}

.tssf-resumen__nota {
	margin: .3rem 0 0;
	font-size: .82rem;
	line-height: 1.5;
	color: var(--tssf-suave);
}

.tssf-resumen__iva {
	margin: .2rem 0 0;
	font-size: .75rem;
	color: var(--tssf-suave);
}

.tssf-resumen__incluye {
	display: grid;
	gap: .55rem;
	margin: 1.4rem 0 0;
	padding: 1.3rem 0 0;
	border-top: 1px solid var(--tssf-linea);
	list-style: none;
	font-size: .86rem;
	line-height: 1.5;
}

.tssf-resumen__incluye li {
	display: flex;
	gap: .55rem;
}

.tssf-resumen__incluye .tssf-icono {
	margin-top: .15em;
	color: var(--tssf-secundario);
}

/* ------------------------------------------------------------------
   Cabecera del área privada (curso y cuenta)
------------------------------------------------------------------ */

.tssf-cabecera {
	padding: clamp(2.2rem, 5vw, 3.5rem) 0 clamp(2rem, 4vw, 3rem);
	border-bottom: 1px solid var(--tssf-linea);
	background: var(--tssf-papel);
}

.tssf-cabecera .tssf-ui-titulo {
	margin-bottom: .6rem;
	font-size: clamp(2.3rem, 4.4vw, 3.4rem);
}

.tssf-cabecera .tssf-ui-aviso {
	margin-bottom: 1.5rem;
}

.tssf-cabecera__rejilla {
	display: grid;
	grid-template-columns: minmax(0, 1.3fr) minmax(16rem, 1fr);
	gap: 2rem clamp(2rem, 6vw, 5rem);
	align-items: end;
}

.tssf-cabecera .tssf-progreso {
	padding: 1.4rem 1.5rem;
	background: var(--tssf-blanco);
	box-shadow: var(--tssf-sombra);
}

/* Temario */
.tssf-temario {
	padding-top: clamp(2.5rem, 5vw, 3.5rem);
}

.tssf-temario .tssf-ui-subtitulo {
	margin-top: 0;
}

.tssf-sesiones {
	display: grid;
	gap: .8rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.tssf-sesion__enlace {
	display: grid;
	grid-template-columns: 10.5rem minmax(0, 1fr) auto;
	gap: 1.4rem;
	align-items: center;
	padding: .8rem 1.4rem .8rem .8rem;
	border: 1px solid var(--tssf-linea);
	background: var(--tssf-blanco);
	color: inherit;
	text-decoration: none;
	transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease;
}

a.tssf-sesion__enlace:hover {
	border-color: var(--tssf-franja);
	box-shadow: var(--tssf-sombra);
	transform: translateY(-1px);
}

.tssf-sesion__media {
	position: relative;
	display: block;
}

.tssf-sesion__img {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 10;
	object-fit: cover;
	background: var(--tssf-fondo);
}

.tssf-sesion__img--vacia {
	background: linear-gradient(135deg, var(--tssf-fondo), var(--tssf-beige));
}

.tssf-sesion__num {
	position: absolute;
	top: .45rem;
	left: .45rem;
	display: grid;
	place-items: center;
	min-width: 1.8rem;
	height: 1.8rem;
	padding: 0 .4rem;
	border-radius: 1rem;
	background: rgba(247, 244, 238, .92);
	font: 400 .75rem/1 var(--tssf-fuente-texto);
	color: var(--tssf-principal);
}

.tssf-sesion__texto {
	display: grid;
	gap: .35rem;
	min-width: 0;
}

.tssf-sesion__titulo {
	font: 500 1.35rem/1.25 var(--tssf-fuente-titulos);
	color: var(--tssf-principal);
}

.tssf-sesion__datos {
	display: flex;
	flex-wrap: wrap;
	gap: .3rem 1.1rem;
	font-size: .8rem;
	color: var(--tssf-suave);
}

.tssf-sesion__datos span {
	display: inline-flex;
	align-items: center;
	gap: .35rem;
}

.tssf-sesion__estado {
	display: inline-flex;
	align-items: center;
	gap: .45rem;
	font: 400 .66rem/1.3 var(--tssf-fuente-texto);
	letter-spacing: .16em;
	text-transform: uppercase;
	white-space: nowrap;
	color: var(--tssf-principal);
}

.tssf-sesion--hecha .tssf-sesion__estado {
	color: var(--tssf-ok);
}

.tssf-sesion--hecha .tssf-sesion__num {
	background: var(--tssf-secundario);
	color: #fff;
}

.tssf-sesion--cerrada .tssf-sesion__enlace {
	background: transparent;
	cursor: not-allowed;
}

.tssf-sesion--cerrada .tssf-sesion__media,
.tssf-sesion--cerrada .tssf-sesion__titulo {
	opacity: .55;
}

.tssf-sesion--cerrada .tssf-sesion__estado {
	color: var(--tssf-suave);
	text-transform: none;
	letter-spacing: 0;
	font-size: .8rem;
}

/* ------------------------------------------------------------------
   Sesión
------------------------------------------------------------------ */

.tssf-leccion {
	padding: clamp(2rem, 4vw, 3rem) 0 clamp(4rem, 8vw, 6rem);
}

.tssf-leccion__rejilla {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 20rem;
	gap: clamp(2rem, 4vw, 3.5rem);
	align-items: start;
}

.tssf-video {
	position: relative;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: var(--tssf-principal);
	box-shadow: var(--tssf-sombra);
}

.tssf-video__medio {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
	object-fit: contain;
	background: var(--tssf-principal);
}

.tssf-video--imagen {
	background: var(--tssf-fondo);
}

.tssf-video--imagen .tssf-video__medio {
	object-fit: contain;
	background: var(--tssf-fondo);
}

.tssf-video__externo {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	margin: 0;
}

.tssf-leccion__cabecera {
	margin-top: 2rem;
}

.tssf-leccion__cabecera .tssf-ui-antetitulo {
	margin-bottom: .6rem;
}

.tssf-leccion__cabecera .tssf-ui-titulo {
	font-size: clamp(2rem, 3.6vw, 2.8rem);
}

.tssf-leccion__texto {
	max-width: 44rem;
}

/* Dentro de la lección los títulos ordenan, no gritan: el grande es el de la sesión. */
.tssf-leccion__texto h2 {
	margin: 2.2rem 0 .7rem;
	font-size: clamp(1.35rem, 2vw, 1.65rem);
	line-height: 1.25;
}

.tssf-leccion__texto.tssf-ui-texto > p {
	max-width: none;
}

.tssf-leccion__texto li + li {
	margin-top: .35rem;
}

.tssf-materiales {
	margin: 2rem 0 0;
}

.tssf-materiales ul {
	display: grid;
	gap: .5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.tssf-materiales a {
	display: flex;
	align-items: center;
	gap: .8rem;
	padding: .9rem 1.1rem;
	border: 1px solid var(--tssf-linea);
	background: var(--tssf-blanco);
	color: var(--tssf-principal);
	text-decoration: none;
	transition: border-color .2s ease;
}

.tssf-materiales a:hover {
	border-color: var(--tssf-acento);
}

.tssf-materiales__nombre {
	flex: 1;
	min-width: 0;
	overflow-wrap: anywhere;
}

.tssf-materiales__tamano {
	font-size: .75rem;
	color: var(--tssf-suave);
	white-space: nowrap;
}

.tssf-leccion__acciones {
	display: flex;
	flex-wrap: wrap;
	gap: .7rem;
	margin: 2.2rem 0 .8rem;
}

.tssf-completar {
	background: var(--tssf-blanco);
	box-shadow: inset 0 0 0 1px var(--tssf-principal);
	color: var(--tssf-principal);
}

.tssf-completar:hover {
	background: var(--tssf-papel);
}

.tssf-completar--hecha,
.tssf-completar--hecha:hover {
	background: var(--tssf-secundario);
	box-shadow: none;
	color: #fff;
}

.tssf-leccion__nav {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	margin-top: 2.5rem;
	padding-top: 1.5rem;
	border-top: 1px solid var(--tssf-linea);
}

.tssf-leccion__paso {
	display: grid;
	gap: .3rem;
	max-width: 48%;
	color: var(--tssf-principal);
	text-decoration: none;
}

.tssf-leccion__paso small {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	font: 400 .66rem/1.4 var(--tssf-fuente-texto);
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--tssf-suave);
}

.tssf-leccion__paso span {
	font: 500 1.2rem/1.25 var(--tssf-fuente-titulos);
	transition: color .2s ease;
}

.tssf-leccion__paso:hover span {
	color: var(--tssf-secundario);
}

.tssf-leccion__paso--siguiente {
	margin-left: auto;
	text-align: right;
}

.tssf-leccion__paso--siguiente small {
	justify-content: flex-end;
}

.tssf-leccion__lateral {
	position: sticky;
	top: var(--tssf-pegado);
}

.tssf-leccion__lateral-caja {
	padding: 1.5rem;
	background: var(--tssf-papel);
}

.tssf-leccion__lateral-caja .tssf-ui-antetitulo {
	margin-bottom: .8rem;
}

.tssf-temario-mini {
	display: grid;
	gap: .15rem;
	max-height: calc(100vh - var(--tssf-pegado) - 12rem);
	margin: 1.2rem -.5rem 0;
	padding: 0;
	overflow-y: auto;
	list-style: none;
}

.tssf-temario-mini__item > a,
.tssf-temario-mini__item > span {
	display: flex;
	align-items: flex-start;
	gap: .7rem;
	padding: .55rem .5rem;
	font-size: .86rem;
	line-height: 1.4;
	color: var(--tssf-texto);
	text-decoration: none;
	transition: background-color .2s ease;
}

.tssf-temario-mini__item > a:hover {
	background: var(--tssf-fondo);
}

.tssf-temario-mini__marca {
	position: relative;
	display: grid;
	flex: none;
	place-items: center;
	width: 1.5rem;
	height: 1.5rem;
	border: 1px solid var(--tssf-linea);
	border-radius: 50%;
	background: var(--tssf-blanco);
	font-size: .7rem;
	color: var(--tssf-suave);
}

.tssf-temario-mini__marca .tssf-icono {
	display: none;
	width: .85rem;
	height: .85rem;
}

.es-hecha .tssf-temario-mini__marca {
	border-color: var(--tssf-secundario);
	background: var(--tssf-secundario);
	color: #fff;
}

.es-hecha .tssf-temario-mini__marca .tssf-icono,
.es-cerrada .tssf-temario-mini__marca .tssf-icono {
	display: block;
}

.es-hecha .tssf-temario-mini__num,
.es-cerrada .tssf-temario-mini__num {
	display: none;
}

.es-cerrada > span {
	opacity: .55;
}

.es-actual > a {
	background: var(--tssf-blanco);
	font-weight: 400;
	color: var(--tssf-principal);
	box-shadow: inset 2px 0 0 var(--tssf-acento);
}

/* ------------------------------------------------------------------
   Mi cuenta
------------------------------------------------------------------ */

.tssf-cabecera--cuenta {
	padding-bottom: 0;
}

.tssf-pestanas {
	display: flex;
	gap: 1.8rem;
	margin: 2rem 0 0;
	overflow-x: auto;
	scrollbar-width: none;
}

.tssf-pestanas::-webkit-scrollbar {
	display: none;
}

.tssf-pestanas a {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	padding: .9rem 0 1rem;
	border-bottom: 2px solid transparent;
	font: 400 .7rem/1 var(--tssf-fuente-texto);
	letter-spacing: .18em;
	text-transform: uppercase;
	white-space: nowrap;
	color: var(--tssf-suave);
	text-decoration: none;
	transition: color .2s ease, border-color .2s ease;
}

.tssf-pestanas a:hover,
.tssf-pestanas a[aria-current="page"] {
	color: var(--tssf-principal);
}

.tssf-pestanas a[aria-current="page"] {
	border-bottom-color: var(--tssf-acento);
}

.tssf-pestanas__salir {
	margin-left: auto;
}

.tssf-cuenta {
	padding-top: clamp(2.5rem, 5vw, 3.5rem);
}

.tssf-caja-cuenta {
	display: grid;
	gap: 1rem;
	align-content: start;
	padding: clamp(1.5rem, 3vw, 2.2rem);
	background: var(--tssf-papel);
}

.tssf-caja-cuenta .tssf-ui-subtitulo {
	margin: 0 0 .4rem;
}

.tssf-caja-cuenta > p {
	margin: 0;
}

.tssf-caja-cuenta .tssf-ui-boton {
	justify-self: start;
}

.tssf-cuenta__rejilla {
	display: grid;
	grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
	gap: 1.5rem;
	align-items: start;
}

.tssf-campos {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: .9rem 1rem;
}

.tssf-campo {
	display: grid;
	gap: .35rem;
}

.tssf-campo--ancho {
	grid-column: 1 / -1;
}

.tssf-campo__etiqueta {
	font: 400 .64rem/1.4 var(--tssf-fuente-texto);
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--tssf-principal);
}

.tssf-campo__etiqueta small {
	letter-spacing: 0;
	text-transform: none;
	color: var(--tssf-suave);
}

.tssf-vacio-caja {
	padding: clamp(2.5rem, 6vw, 4rem) 1.5rem;
	background: var(--tssf-papel);
	text-align: center;
}

/* Mis cursos */
.tssf-mis-cursos {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr));
	gap: 1.5rem;
}

.tssf-mi-curso {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	background: var(--tssf-blanco);
	box-shadow: var(--tssf-sombra);
	position: relative;
		transition: box-shadow .3s ease, transform .3s ease;
}

.tssf-mi-curso__foto {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	transition: filter .5s ease, transform 1.2s cubic-bezier(.2, .7, .2, 1);
}

.tssf-mi-curso__cuerpo {
	display: flex;
	flex: 1;
	flex-direction: column;
	padding: 1.5rem 1.6rem 1.7rem;
}

.tssf-mi-curso__cuerpo .tssf-ui-antetitulo {
	margin-bottom: .4rem;
}

.tssf-mi-curso__titulo {
	margin: 0 0 .4rem;
	font: 500 1.9rem/1.1 var(--tssf-fuente-titulos);
	color: var(--tssf-principal);
}

.tssf-mi-curso__estado {
	margin: 0 0 1.2rem;
	font-size: .84rem;
	color: var(--tssf-suave);
}

.tssf-mi-curso__botones {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .8rem 1.3rem;
	margin: auto 0 0;
	padding-top: 1.3rem;
}

/* Toda la tarjeta es un enlace. */

.tssf-mi-curso:has(.tssf-mi-curso__enlace):hover {
	box-shadow: 0 2px 4px rgba(60, 69, 53, .08), 0 14px 36px rgba(60, 69, 53, .12);
	transform: translateY(-2px);
}

.tssf-mi-curso__enlace {
	color: inherit;
	text-decoration: none;
}

.tssf-mi-curso__enlace::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

.tssf-mi-curso__enlace:focus-visible {
	outline: none;
}

.tssf-mi-curso:has(.tssf-mi-curso__enlace:focus-visible) {
	outline: 1px solid var(--tssf-acento);
	outline-offset: 4px;
}

.tssf-mi-curso__extra {
	position: relative;
	z-index: 2;
}

.tssf-mi-curso__media {
	position: relative;
	height: 19rem;
	padding: 1.4rem 1.4rem 0;
	overflow: hidden;
	background: var(--tssf-fondo);
}

.tssf-mi-curso--sin .tssf-mi-curso__media {
	background: #ebe7df;
}


.tssf-mi-curso:hover .tssf-mi-curso__foto {
	transform: scale(1.03);
}

/* Sin acceso: en gris hasta pasar el cursor. */
.tssf-mi-curso--sin {
	background: var(--tssf-papel);
}

.tssf-mi-curso--sin .tssf-mi-curso__foto {
	filter: grayscale(1) contrast(.9);
	opacity: .75;
}

.tssf-mi-curso--sin:hover .tssf-mi-curso__foto {
	filter: grayscale(.2);
	opacity: 1;
}

.tssf-mi-curso--sin .tssf-mi-curso__titulo,
.tssf-mi-curso--sin .tssf-ui-antetitulo {
	color: var(--tssf-suave);
}

.tssf-mi-curso--sin:hover .tssf-mi-curso__titulo {
	color: var(--tssf-principal);
}

.tssf-mi-curso--sin .tssf-ui-boton {
	background: var(--tssf-beige);
	color: var(--tssf-principal);
}

.tssf-mi-curso--sin:hover .tssf-ui-boton {
	background: var(--tssf-boton);
	color: var(--tssf-boton-texto);
}

.tssf-mi-curso__sello {
	position: absolute;
	top: .9rem;
	left: .9rem;
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	padding: .35rem .7rem;
	background: rgba(247, 244, 238, .92);
	font: 400 .62rem/1.3 var(--tssf-fuente-texto);
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--tssf-principal);
}

.tssf-mi-curso__resumen {
	margin: 0;
	font-size: .88rem;
	line-height: 1.55;
	color: var(--tssf-suave);
}

/* Métodos de pago */
.tssf-metodos {
	max-width: 44rem;
}

.tssf-metodos__lista {
	display: grid;
	gap: .6rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.tssf-metodo {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .8rem 1rem;
	padding: 1rem 1.2rem;
	border: 1px solid var(--tssf-linea);
	background: var(--tssf-blanco);
}

.tssf-metodo--defecto {
	border-color: var(--tssf-franja);
}

.tssf-metodo__icono {
	color: var(--tssf-principal);
	font-size: 1.4rem;
}

.tssf-metodo__texto {
	flex: 1;
	min-width: 10rem;
}

.tssf-metodo__texto small {
	display: block;
	font-size: .78rem;
	color: var(--tssf-suave);
}

.tssf-metodo__acciones {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .6rem 1.1rem;
}

.tssf-metodo-nuevo {
	display: grid;
	gap: .8rem;
}

.tssf-metodo-nuevo p {
	margin: 0;
}

.tssf-metodo-nuevo__botones {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1rem;
}

/* Pagos */
.tssf-tabla-envoltura {
	overflow-x: auto;
}

.tssf-tabla {
	width: 100%;
	border-collapse: collapse;
	font-size: .9rem;
}

.tssf-tabla th {
	padding: 0 .8rem .7rem 0;
	border-bottom: 1px solid var(--tssf-linea);
	font: 400 .64rem/1.4 var(--tssf-fuente-texto);
	letter-spacing: .16em;
	text-align: left;
	text-transform: uppercase;
	color: var(--tssf-principal);
}

.tssf-tabla td {
	padding: .85rem .8rem .85rem 0;
	border-bottom: 1px solid var(--tssf-linea);
	vertical-align: top;
}

.tssf-descarga {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	color: var(--tssf-principal);
	white-space: nowrap;
}

/* Suscripciones */
.tssf-suscripciones {
	display: grid;
	gap: .6rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.tssf-suscripcion {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 1.1rem 1.3rem;
	border: 1px solid var(--tssf-linea);
	background: var(--tssf-blanco);
}

.tssf-suscripcion p {
	margin: 0;
}

.tssf-suscripcion__titulo {
	font: 500 1.35rem/1.2 var(--tssf-fuente-titulos);
	color: var(--tssf-principal);
}

.tssf-suscripcion__estado {
	font-size: .84rem;
	color: var(--tssf-suave);
}

/* ------------------------------------------------------------------
   Pantallas medianas y pequeñas
------------------------------------------------------------------ */

@media (max-width: 1000px) {
	.tssf-leccion__rejilla {
		grid-template-columns: minmax(0, 1fr);
	}

	.tssf-leccion__lateral {
		position: static;
	}

	.tssf-temario-mini {
		max-height: none;
	}
}

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

	.tssf-pago__rejilla {
		grid-template-columns: minmax(0, 1fr);
	}

	/* En móvil, el resumen va primero y sin foto. */
	.tssf-resumen {
		position: static;
		order: -1;
	}

	.tssf-resumen__foto,
	.tssf-resumen__incluye {
		display: none;
	}

	.tssf-cabecera__rejilla,
	.tssf-cuenta__rejilla {
		grid-template-columns: minmax(0, 1fr);
	}
}

@media (max-width: 640px) {
	.tssf-opciones,
	.tssf-campos {
		grid-template-columns: minmax(0, 1fr);
	}

	.tssf-sesion__enlace {
		grid-template-columns: 6.5rem minmax(0, 1fr);
		gap: .9rem;
		padding: .6rem;
	}

	.tssf-sesion__estado {
		grid-column: 2;
		white-space: normal;
	}

	.tssf-sesion__titulo {
		font-size: 1.15rem;
	}

	.tssf-leccion__paso {
		max-width: none;
	}

	.tssf-leccion__nav {
		flex-direction: column;
	}

	.tssf-leccion__paso--siguiente {
		margin-left: 0;
	}

	.tssf-cupon__fila {
		flex-direction: column;
	}

	.tssf-tabla thead {
		display: none;
	}

	.tssf-tabla tr {
		display: grid;
		padding: .8rem 0;
		border-bottom: 1px solid var(--tssf-linea);
	}

	.tssf-tabla td {
		display: flex;
		justify-content: space-between;
		gap: 1rem;
		padding: .2rem 0;
		border: 0;
	}

	.tssf-tabla td::before {
		content: attr(data-titulo);
		font-size: .75rem;
		color: var(--tssf-suave);
	}

	.tssf-pestanas__salir {
		margin-left: 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	.tssf-barra span,
	a.tssf-sesion__enlace {
		transition: none;
	}
}

/* ------------------------------------------------------------------
   Tarjeta del modo simulación
------------------------------------------------------------------ */

.tssf-simulada {
	display: grid;
	gap: .8rem;
	padding: 1.2rem;
	border: 1px dashed var(--tssf-acento);
	background: var(--tssf-blanco);
}

.tssf-simulada__aviso {
	display: grid;
	gap: .2rem;
	margin: 0;
	padding: .7rem .9rem;
	background: rgba(192, 116, 63, .08);
	font-size: .82rem;
	color: var(--tssf-principal);
}

.tssf-simulada__aviso span {
	color: var(--tssf-suave);
}

.tssf-simulada__aviso code {
	font-size: .78rem;
	white-space: nowrap;
}

.tssf-simulada .tssf-ui-form__fila {
	margin: 0;
}

.tssf-simulada .tssf-ui-campo input {
	letter-spacing: .04em;
}

.tssf-simulada__numero {
	position: relative;
	display: block;
}

.tssf-simulada__numero input {
	padding-right: 3.5rem;
}

.tssf-simulada__marca {
	position: absolute;
	top: 50%;
	right: .9rem;
	color: var(--tssf-suave);
	transform: translateY(-50%);
}

.tssf-simulada__marca[data-marca="visa"],
.tssf-simulada__marca[data-marca="mastercard"],
.tssf-simulada__marca[data-marca="amex"] {
	color: var(--tssf-principal);
}

.tssf-simulada__marca[data-marca]:not([data-marca="tarjeta"])::after {
	content: attr(data-marca);
	margin-left: .35rem;
	font: 400 .62rem/1 var(--tssf-fuente-texto);
	letter-spacing: .12em;
	text-transform: uppercase;
	vertical-align: middle;
}

.tssf-metodo-nuevo .tssf-simulada {
	max-width: 30rem;
}

/* ==================================================================
   Modalidad (online, semipresencial, presencial), gratuitos y plazas
================================================================== */

.tssf-curso__modalidad {
	color: var(--tssf-acento);
}

.tssf-modalidad {
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: .88rem;
	color: var(--tssf-suave);
}

.tssf-modalidad li {
	display: flex;
	align-items: flex-start;
	gap: .5rem;
	line-height: 1.45;
}

.tssf-modalidad .tssf-icono {
	flex: none;
	width: 1.05rem;
	height: 1.05rem;
	margin-top: .1rem;
	color: var(--tssf-acento);
}

.tssf-datos--modalidad li {
	align-items: flex-start;
}

.tssf-modalidad--cabecera {
	display: flex;
	flex-wrap: wrap;
	gap: .4rem 1.5rem;
	margin-top: .8rem;
}

.tssf-resumen__modalidad {
	display: grid;
	gap: .35rem;
	margin: .2rem 0 1.1rem;
	font-size: .85rem;
}

.tssf-plan--gratis {
	border-color: var(--tssf-secundario);
}

.tssf-boton--agotado,
.tssf-boton--agotado:hover {
	border-color: var(--tssf-linea);
	background: var(--tssf-fondo);
	color: var(--tssf-suave);
	cursor: not-allowed;
}

.tssf-nota--gratis {
	margin: 0 0 1.2rem;
	padding: .9rem 1.1rem;
	border-left: 2px solid var(--tssf-secundario);
	background: var(--tssf-papel);
}

.tssf-sesion__tipo {
	color: var(--tssf-acento);
}

/* Sesión presencial */

.tssf-presencial {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: .7rem;
	padding: clamp(1.75rem, 4vw, 3rem);
	background: var(--tssf-principal);
	color: var(--tssf-fondo);
	box-shadow: var(--tssf-sombra);
}

.tssf-presencial p {
	margin: 0;
}

.tssf-presencial__etiqueta {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	font: 400 .75rem/1 var(--tssf-fuente-texto);
	letter-spacing: .2em;
	text-transform: uppercase;
	opacity: .85;
}

.tssf-presencial__etiqueta .tssf-icono,
.tssf-presencial__botones .tssf-icono,
.tssf-directo__calendario .tssf-icono {
	width: 1.1rem;
	height: 1.1rem;
}

.tssf-presencial__cuando {
	font: italic 400 clamp(1.7rem, 3.4vw, 2.5rem)/1.1 var(--tssf-fuente-titulos);
}

.tssf-presencial__cuando span {
	display: block;
	margin-top: .35rem;
	font: 300 1.05rem/1.3 var(--tssf-fuente-texto);
	font-style: normal;
	letter-spacing: .06em;
	opacity: .85;
}

.tssf-presencial__lugar {
	max-width: 34rem;
	font: 300 1rem/1.55 var(--tssf-fuente-texto);
	opacity: .9;
}

.tssf-presencial__botones {
	display: flex;
	flex-wrap: wrap;
	gap: .6rem;
	margin-top: .6rem;
}

.tssf-presencial .tssf-boton--claro {
	border-color: rgba(242, 238, 230, .5);
	background: transparent;
	color: var(--tssf-fondo);
}

.tssf-presencial .tssf-boton--claro:hover {
	border-color: var(--tssf-fondo);
	background: rgba(242, 238, 230, .1);
}

.tssf-directo__calendario {
	display: inline-flex;
	align-items: center;
	gap: .45rem;
	margin-top: .4rem;
	color: var(--tssf-fondo);
	font: 400 .82rem/1 var(--tssf-fuente-texto);
	text-decoration: underline;
	text-underline-offset: .2em;
}

/* Aviso al entrar como un alumno desde el escritorio */
.tssf-suplantando {
	position: sticky;
	top: 0;
	z-index: 50;
	padding: .7rem var(--tssf-margen, 1.25rem);
	background: var(--tssf-acento);
	color: #fff;
	font-size: .9rem;
	text-align: center;
}

.tssf-suplantando p {
	margin: 0;
}

.tssf-suplantando a {
	color: #fff;
	font-weight: 500;
}

/* Vídeo: aviso al reanudar */
.tssf-video__reanudar {
	position: absolute;
	top: 1rem;
	left: 1rem;
	margin: 0;
	padding: .45rem .8rem;
	background: rgba(29, 33, 26, .8);
	color: var(--tssf-fondo);
	font-size: .82rem;
	pointer-events: none;
}

/* Pago: datos de facturación opcionales */
.tssf-facturacion {
	margin: .4rem 0 1.2rem;
}

.tssf-facturacion summary {
	cursor: pointer;
	color: var(--tssf-principal);
	font-size: .9rem;
}

.tssf-facturacion summary span {
	color: var(--tssf-suave);
}

.tssf-facturacion[open] summary {
	margin-bottom: .9rem;
}

/* Lista de espera */
.tssf-espera {
	margin: 1.5rem 0;
	padding: 1.25rem 1.4rem;
	border: 1px solid var(--tssf-linea);
	background: var(--tssf-blanco);
}

.tssf-espera__texto {
	margin: 0 0 .9rem;
	color: var(--tssf-principal);
}

.tssf-espera .tssf-ui-boton {
	margin-top: .6rem;
}

.tssf-programa__espera .tssf-espera {
	margin-bottom: 0;
}

/* Privacidad */
.tssf-boton--peligro,
.tssf-boton--peligro:hover {
	background: var(--tssf-error);
	color: var(--tssf-blanco);
}

.tssf-baja {
	border-color: #e8c4c1;
}

/* ------------------------------------------------------------------
   La página del programa

   La que pinta el plugin cuando el curso no tiene una diseñada a medida.
   Mismo lenguaje que el resto de la web: portada con la foto a sangre y un
   velo para que se lea el título, cuerpo estrecho y bloque de compra.
------------------------------------------------------------------ */

.tssf-programa__portada {
	padding: clamp(2.5rem, 4vw, 3.5rem) 0 clamp(1.5rem, 3vw, 2.25rem);
	background: var(--tssf-papel);
}

.tssf-programa__portada-caja {
	display: grid;
	gap: clamp(2rem, 5vw, 3.5rem);
	align-items: center;
}

@media (min-width: 60rem) {
	.tssf-programa__portada-caja {
		grid-template-columns: 1fr minmax(18rem, 26rem);
	}
}

.tssf-programa__portada .tssf-ui-titulo {
	margin: 0 0 1rem;
}

.tssf-programa__resumen {
	max-width: 34rem;
	margin: 0 0 1.4rem;
	font-size: 1.05rem;
	line-height: 1.8;
}

.tssf-programa__portada-precio {
	margin: 1.6rem 0 0;
	font: 500 2.2rem/1 var(--tssf-fuente-titulos);
	color: var(--tssf-principal);
}

.tssf-programa__portada-boton {
	margin: 1.1rem 0 0;
}

/* La foto, en su marco: vertical, redondeada y sin recortes raros. */
.tssf-programa__foto {
	margin: 0;
	border-radius: var(--tssf-radio);
	overflow: hidden;
}

.tssf-programa__foto img {
	display: block;
	width: 100%;
	height: 100%;
	aspect-ratio: 3 / 4;
	object-fit: cover;
}

.tssf-programa__cuerpo {
	padding-top: clamp(1.75rem, 3vw, 2.5rem);
	padding-bottom: 0;
}

.tssf-programa__incluye {
	margin-top: 2.5rem;
}

.tssf-programa__botones {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 1rem 2rem;
	margin-top: 1.8rem;
}

.tssf-programa__compra {
	text-align: center;
}

.tssf-programa__proximamente {
	margin: 0;
	color: var(--tssf-suave);
}

.tssf-programa__iva {
	margin: .9rem 0 0;
	font-size: .75rem;
	color: var(--tssf-suave);
	text-align: center;
}

/* La vuelta al aula, al final de la página. */
.tssf-migas--pie {
	margin-top: 3rem;
}

/* ------------------------------------------------------------------
   Early bird: la frase que acompaña al precio y el normal tachado.
------------------------------------------------------------------ */
.tssf-early-bird {
	margin: .35rem 0 0;
	font-size: .8rem;
	line-height: 1.5;
	color: var(--tssf-secundario);
}

.tssf-plan__precio del {
	margin-left: .4rem;
	font-size: 1.1rem;
	color: var(--tssf-suave);
}

.tssf-plan--early {
	border-color: var(--tssf-acento);
}

/* ------------------------------------------------------------------
   Color del texto de los botones, blindado.
   El tema pone `button:hover { color: tinta }` y `a:hover { color: marrón }`
   para toda la web; sin esto se colaban en los botones del aula y dejaban
   texto oscuro sobre negro (o crema sobre beige). Cada variante fija su
   color en reposo, al pasar el ratón y con el foco.
------------------------------------------------------------------ */
.tssf-ui-boton,
.tssf-ui-boton:hover,
.tssf-ui-boton:focus,
.tssf-ui-boton:focus-visible {
	color: var(--tssf-boton-texto);
}

.tssf-ui-boton.tssf-boton--claro,
.tssf-ui-boton.tssf-boton--claro:hover,
.tssf-ui-boton.tssf-boton--claro:focus-visible,
.tssf-ui-boton.tssf-completar,
.tssf-ui-boton.tssf-completar:hover,
.tssf-ui-boton.tssf-completar:focus-visible {
	color: var(--tssf-principal);
}

.tssf-ui-boton.tssf-completar--hecha,
.tssf-ui-boton.tssf-completar--hecha:hover,
.tssf-ui-boton.tssf-completar--hecha:focus-visible {
	color: #fff;
}

.tssf-mi-curso--sin:not(:hover) .tssf-ui-boton {
	color: var(--tssf-principal);
}

/* Sobre fondo oscuro (clase presencial, escena del directo) el botón claro va en crema. */
.tssf-presencial .tssf-ui-boton.tssf-boton--claro,
.tssf-presencial .tssf-ui-boton.tssf-boton--claro:hover,
.tssf-escena__capa .tssf-ui-boton.tssf-boton--claro,
.tssf-escena__capa .tssf-ui-boton.tssf-boton--claro:hover {
	color: var(--tssf-fondo);
}

/* El `button:hover` del tema cambia la sombra, y el borde de este botón es una sombra. */
.tssf-ui-boton.tssf-completar:not(.tssf-completar--hecha):hover {
	box-shadow: inset 0 0 0 1px var(--tssf-principal), 0 10px 26px rgba(122, 92, 62, .18);
}

/* Pago con las inscripciones cerradas: la lista de espera ocupa el sitio del formulario. */
.tssf-pago__espera .tssf-espera {
	margin-top: 0;
}