/**
 * El aula.
 *
 * El tema encierra el contenido en una columna estrecha; aquí se suelta para
 * que el aula ocupe la pantalla, igual que hace la pasarela de pago.
 */

/* ---------------------------------------------------------------------
   Paleta

   Va en el body y no en .tssa porque la usa también .site-main, que está por
   encima.
   --------------------------------------------------------------------- */
.tssa-es-aula {
	--tssa-fondo: #fbf7f4;
	--tssa-papel: #ffffff;
	--tssa-tinta: #2b2320;
	--tssa-suave: #7d6f68;
	--tssa-linea: #e9ded7;
	--tssa-marca: #b4674b;
	--tssa-marca-oscura: #98523a;
	--tssa-bien: #4b7d5a;
	--tssa-mal: #a33a2c;
	--tssa-radio: 16px;
	--tssa-sombra: 0 1px 2px rgba(43, 35, 32, .04), 0 8px 24px rgba(43, 35, 32, .06);
}

/* ---------------------------------------------------------------------
   Soltar el ancho del tema
   --------------------------------------------------------------------- */
/* Solo el contenido: el .container del pie es otro y no se toca. */
.tssa-es-aula .site-main,
.tssa-es-aula .entry-content,
.tssa-es-aula .layout {
	max-width: none;
	width: 100%;
	padding-left: 0;
	padding-right: 0;
}

.tssa-es-aula .entry-header,
.tssa-es-aula .entry-title,
.tssa-es-aula .page-header {
	display: none;
}

.tssa-es-aula .site-main {
	background: var(--tssa-fondo);
}

.tssa {
	box-sizing: border-box;
	width: 100%;
	max-width: 1180px;
	margin: 0 auto;
	padding: 32px 24px 80px;
	color: var(--tssa-tinta);
	font-size: 17px;
	line-height: 1.6;
}

.tssa--entrada {
	padding: 48px 24px 72px;
}

/* ---------------------------------------------------------------------
   Entrada: el formulario a la izquierda y la foto a la derecha
   --------------------------------------------------------------------- */
.tssa-entrada {
	display: grid;
	grid-template-columns: 1fr 1fr;
	min-height: 560px;
	border-radius: var(--tssa-radio);
	overflow: hidden;
	background: var(--tssa-papel);
	border: 1px solid var(--tssa-linea);
	box-shadow: var(--tssa-sombra);
}

.tssa-entrada__forma {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 56px clamp(28px, 5vw, 64px);
}

.tssa-entrada__foto {
	position: relative;
	min-height: 320px;
	background-color: #3a2c26;
	background-size: cover;
	background-position: center;
}

/* Un velo para que el texto se lea sin tapar la foto. */
.tssa-entrada__foto::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(30, 22, 18, .72) 0%, rgba(30, 22, 18, .18) 48%, rgba(30, 22, 18, 0) 78%);
}

.tssa-cita {
	position: absolute;
	inset: auto 0 0 0;
	z-index: 1;
	margin: 0;
	padding: 34px clamp(24px, 4vw, 40px);
	color: #fff;
}

.tssa-cita p {
	margin: 0 0 10px;
	font-size: clamp(18px, 2vw, 22px);
	line-height: 1.42;
	font-style: italic;
}

.tssa-cita cite {
	font-size: 13px;
	font-style: normal;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .74);
}

@media (max-width: 820px) {
	.tssa-entrada {
		grid-template-columns: 1fr;
	}

	/* En el móvil primero la foto, que da la bienvenida, y luego el formulario. */
	.tssa-entrada__forma {
		order: 2;
		padding: 36px 24px 40px;
	}

	.tssa-entrada__foto {
		order: 1;
		min-height: 220px;
	}
}

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

/* ---------------------------------------------------------------------
   Tipografía
   --------------------------------------------------------------------- */
.tssa-h1 {
	margin: 0;
	font-size: clamp(30px, 4vw, 44px);
	line-height: 1.12;
	font-weight: 400;
	letter-spacing: -.01em;
}

.tssa-h1--clase {
	font-size: clamp(24px, 3vw, 32px);
}

.tssa-h2 {
	margin: 0 0 14px;
	font-size: 15px;
	font-weight: 600;
	letter-spacing: .11em;
	text-transform: uppercase;
	color: var(--tssa-suave);
}

.tssa-h2--sep {
	margin-top: 34px;
	padding-top: 26px;
	border-top: 1px solid var(--tssa-linea);
}

.tssa-ante {
	margin: 0 0 8px;
	font-size: 13px;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--tssa-marca);
}

.tssa-sub {
	margin: 12px 0 0;
	color: var(--tssa-suave);
}

.tssa-ayuda {
	display: block;
	margin-top: 6px;
	font-size: 14px;
	line-height: 1.45;
	color: var(--tssa-suave);
}

.tssa-cab {
	margin-bottom: 26px;
}

/* ---------------------------------------------------------------------
   La barra de arriba
   --------------------------------------------------------------------- */
.tssa-barra {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	align-items: center;
	justify-content: space-between;
	padding: 0 0 20px;
	margin-bottom: 34px;
	border-bottom: 1px solid var(--tssa-linea);
}

.tssa-barra__quien {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0;
	font-size: 16px;
	font-weight: 500;
}

.tssa-avatar {
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--tssa-marca);
	color: #fff;
	font-size: 17px;
	font-weight: 600;
	text-transform: uppercase;
}

.tssa-barra__menu {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.tssa-barra__menu a {
	display: inline-block;
	padding: 9px 16px;
	border-radius: 999px;
	color: var(--tssa-suave);
	font-size: 15px;
	text-decoration: none;
	transition: background .15s, color .15s;
}

.tssa-barra__menu a:hover {
	background: #f2e9e3;
	color: var(--tssa-tinta);
}

.tssa-barra__menu a.es-activa {
	background: var(--tssa-tinta);
	color: #fff;
}

/* ---------------------------------------------------------------------
   Portada del listado
   --------------------------------------------------------------------- */
/* Sin bloque de color: la portada es la propia página, separada del listado
   por una línea fina. */
.tssa-portada {
	padding: 34px 0 32px;
	margin-bottom: 34px;
	border-bottom: 1px solid var(--tssa-linea);
}

.tssa-portada__texto {
	max-width: 620px;
}

.tssa-progreso {
	max-width: 440px;
	margin-top: 22px;
}

.tssa-progreso__barra {
	height: 8px;
	border-radius: 999px;
	background: #ece0d8;
	overflow: hidden;
}

.tssa-progreso__barra span {
	display: block;
	height: 100%;
	border-radius: 999px;
	background: var(--tssa-marca);
	transition: width .4s ease;
}

.tssa-progreso__texto {
	margin: 10px 0 0;
	font-size: 14px;
	color: var(--tssa-suave);
}

.tssa-portada .tssa-btn--principal {
	margin-top: 24px;
}

.tssa-cifra {
	margin: 0 0 10px;
	font-size: 38px;
	line-height: 1;
	font-weight: 400;
}

/* ---------------------------------------------------------------------
   Botones
   --------------------------------------------------------------------- */
.tssa-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	padding: 15px 26px;
	border: 1px solid transparent;
	border-radius: 999px;
	font: inherit;
	font-size: 16px;
	font-weight: 600;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: background .15s, color .15s, border-color .15s;
}

.tssa-btn--auto {
	width: auto;
}

.tssa-btn--principal {
	background: var(--tssa-marca);
	color: #fff;
}

.tssa-btn--principal:hover,
.tssa-btn--principal:focus-visible {
	background: var(--tssa-marca-oscura);
	color: #fff;
}

.tssa-btn--hecha {
	background: transparent;
	border-color: var(--tssa-bien);
	color: var(--tssa-bien);
}

.tssa-btn--hecha:hover {
	background: rgba(75, 125, 90, .08);
	color: var(--tssa-bien);
}

/* ---------------------------------------------------------------------
   Tarjetas y formularios
   --------------------------------------------------------------------- */
.tssa-tarjeta {
	background: var(--tssa-papel);
	border: 1px solid var(--tssa-linea);
	border-radius: var(--tssa-radio);
	box-shadow: var(--tssa-sombra);
}

.tssa-form {
	margin: 0;
}

.tssa-campo {
	margin: 0 0 20px;
}

.tssa-campo label {
	display: block;
	margin-bottom: 7px;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: .02em;
}

.tssa-campo input {
	display: block;
	width: 100%;
	padding: 13px 16px;
	border: 1px solid var(--tssa-linea);
	border-radius: 12px;
	background: #fdfbfa;
	font: inherit;
	font-size: 16px;
	color: var(--tssa-tinta);
	transition: border-color .15s, box-shadow .15s;
}

.tssa-campo input:focus {
	outline: none;
	border-color: var(--tssa-marca);
	box-shadow: 0 0 0 3px rgba(180, 103, 75, .14);
}

.tssa-pie {
	margin: 22px 0 0;
	text-align: center;
	font-size: 15px;
	color: var(--tssa-suave);
}

.tssa-pie a {
	color: var(--tssa-marca);
	text-decoration: none;
	border-bottom: 1px solid rgba(180, 103, 75, .3);
}

.tssa-pie a:hover {
	color: var(--tssa-marca-oscura);
	border-bottom-color: currentColor;
}

/* ---------------------------------------------------------------------
   Avisos
   --------------------------------------------------------------------- */
.tssa-aviso {
	margin: 0 0 22px;
	padding: 14px 18px;
	border-radius: 12px;
	border-left: 3px solid var(--tssa-suave);
	background: #f4ede8;
	font-size: 15px;
	line-height: 1.5;
}

.tssa-aviso--mal {
	border-left-color: var(--tssa-mal);
	background: #fbecea;
	color: #7c2b20;
}

.tssa-aviso--bien {
	border-left-color: var(--tssa-bien);
	background: #edf5ef;
	color: #33573f;
}

/* ---------------------------------------------------------------------
   Rejilla de clases
   --------------------------------------------------------------------- */
.tssa-rejilla {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(310px, 1fr));
	gap: 22px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.tssa-tarjeta--clase {
	overflow: hidden;
	transition: transform .18s ease, box-shadow .18s ease, border-color .18s;
}

.tssa-tarjeta--clase:hover {
	transform: translateY(-3px);
	border-color: #d9c7bc;
	box-shadow: 0 2px 4px rgba(43, 35, 32, .05), 0 16px 34px rgba(43, 35, 32, .11);
}

/* El color se fija también para :visited: si no, el tema aclara las clases
   ya abiertas y parecen desactivadas. */
.tssa-tarjeta__enlace,
.tssa-tarjeta__enlace:visited,
.tssa-vecinas a,
.tssa-vecinas a:visited,
.tssa-descargas a,
.tssa-descargas a:visited {
	color: var(--tssa-tinta);
	text-decoration: none;
}

.tssa-tarjeta__enlace {
	display: block;
}

/* Sin foto, la miniatura es arena clara: el marrón oscuro pesaba demasiado
   cuando aún no hay portadas subidas. */
.tssa-mini {
	position: relative;
	display: block;
	aspect-ratio: 16 / 9;
	background: linear-gradient(135deg, #f4e9e1 0%, #e8d6ca 100%);
	background-size: cover;
	background-position: center;
}

.tssa-mini__num {
	position: absolute;
	top: 12px;
	left: 18px;
	font-size: 34px;
	font-weight: 300;
	color: rgba(180, 103, 75, .55);
	letter-spacing: .02em;
}

.tssa-mini__play {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 56px;
	height: 56px;
	transform: translate(-50%, -50%);
	border-radius: 50%;
	background: rgba(255, 255, 255, .92);
	box-shadow: 0 4px 14px rgba(43, 35, 32, .16);
	transition: transform .18s ease;
}

.tssa-mini__play::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 54%;
	transform: translate(-50%, -50%);
	border-style: solid;
	border-width: 9px 0 9px 15px;
	border-color: transparent transparent transparent var(--tssa-tinta);
}

.tssa-tarjeta--clase:hover .tssa-mini__play {
	transform: translate(-50%, -50%) scale(1.08);
}

.tssa-mini__hecha {
	position: absolute;
	right: 12px;
	bottom: 12px;
	padding: 4px 12px;
	border-radius: 999px;
	background: var(--tssa-bien);
	color: #fff;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .05em;
	text-transform: uppercase;
}

.tssa-tarjeta--clase.es-pendiente .tssa-mini {
	background: linear-gradient(135deg, #f1ece8 0%, #ded4cd 100%);
}

.tssa-tarjeta__cuerpo {
	display: block;
	padding: 20px 22px 22px;
}

.tssa-tarjeta__titulo {
	display: block;
	color: var(--tssa-tinta);
	margin-bottom: 10px;
	font-size: 19px;
	line-height: 1.3;
	font-weight: 500;
}

.tssa-metas {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 14px;
	margin: 0;
	font-size: 14px;
	color: var(--tssa-suave);
}

.tssa-metas__pronto {
	color: var(--tssa-marca);
}

/* ---------------------------------------------------------------------
   Una clase
   --------------------------------------------------------------------- */
.tssa-volver {
	margin: 0 0 20px;
	font-size: 15px;
}

.tssa-volver a {
	color: var(--tssa-suave);
	text-decoration: none;
}

.tssa-volver a:hover {
	color: var(--tssa-marca);
}

.tssa-clase,
.tssa-cuenta {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 320px;
	gap: 34px;
	align-items: start;
}

.tssa-video {
	position: relative;
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	margin-bottom: 28px;
	border-radius: var(--tssa-radio);
	overflow: hidden;
	background: #1b1512;
	box-shadow: var(--tssa-sombra);
}

.tssa-video iframe,
video.tssa-video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

video.tssa-video {
	position: relative;
}

.tssa-vacio {
	display: grid;
	place-content: center;
	gap: 6px;
	aspect-ratio: 16 / 9;
	margin-bottom: 28px;
	padding: 24px;
	border-radius: var(--tssa-radio);
	background: #efe6e0;
	border: 1px dashed #d5c4b9;
	text-align: center;
}

.tssa-vacio p {
	margin: 0;
	font-size: 17px;
}

.tssa-vacio__sub {
	color: var(--tssa-suave);
	font-size: 15px;
}

.tssa-notas {
	margin-top: 22px;
	font-size: 17px;
	line-height: 1.7;
}

.tssa-notas p:last-child {
	margin-bottom: 0;
}

.tssa-lado {
	display: grid;
	gap: 20px;
}

.tssa-bloque {
	padding: 22px 24px;
}

.tssa-lado > .tssa-bloque:not(.tssa-tarjeta) {
	background: var(--tssa-papel);
	border: 1px solid var(--tssa-linea);
	border-radius: var(--tssa-radio);
	box-shadow: var(--tssa-sombra);
}

.tssa-marcar {
	margin: 0;
}

/* Descargas */
.tssa-descargas {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 10px;
}

.tssa-descargas a {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 12px 14px;
	border: 1px solid var(--tssa-linea);
	border-radius: 12px;
	color: inherit;
	text-decoration: none;
	transition: border-color .15s, background .15s;
}

.tssa-descargas a:hover {
	border-color: var(--tssa-marca);
	background: #fdf6f2;
}

.tssa-descargas__icono {
	display: grid;
	place-items: center;
	flex: 0 0 auto;
	width: 42px;
	height: 42px;
	border-radius: 10px;
	background: #f2e5dd;
	color: var(--tssa-marca);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .06em;
}

.tssa-descargas__texto {
	display: block;
	min-width: 0;
	font-size: 15px;
	line-height: 1.35;
}

.tssa-descargas__texto strong {
	display: block;
	color: var(--tssa-tinta);
	font-weight: 500;
}

.tssa-descargas__texto span {
	color: var(--tssa-suave);
	font-size: 13px;
}

/* Anterior / siguiente */
.tssa-vecinas a {
	display: block;
	padding: 12px 0;
	border-top: 1px solid var(--tssa-linea);
	color: inherit;
	text-decoration: none;
}

.tssa-vecinas a:first-of-type {
	border-top: 0;
	padding-top: 0;
}

.tssa-vecinas a span {
	display: block;
	font-size: 12px;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--tssa-suave);
}

.tssa-vecinas a strong {
	color: var(--tssa-tinta);
	font-weight: 500;
	font-size: 15px;
	line-height: 1.35;
}

.tssa-vecinas a:hover strong {
	color: var(--tssa-marca);
}

/* ---------------------------------------------------------------------
   Mi cuenta
   --------------------------------------------------------------------- */
.tssa-cuenta > .tssa-form {
	padding: 32px 34px;
}

.tssa-compras {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 14px;
}

.tssa-compras li {
	display: grid;
	gap: 2px;
	padding-bottom: 14px;
	border-bottom: 1px solid var(--tssa-linea);
	font-size: 15px;
}

.tssa-compras li:last-child {
	padding-bottom: 0;
	border-bottom: 0;
}

.tssa-compras span {
	color: var(--tssa-suave);
	font-size: 14px;
}

/* ---------------------------------------------------------------------
   Pantallas pequeñas
   --------------------------------------------------------------------- */
@media (max-width: 900px) {
	.tssa-clase,
	.tssa-cuenta {
		grid-template-columns: minmax(0, 1fr);
	}
}

@media (max-width: 600px) {
	.tssa {
		padding: 22px 16px 60px;
	}

	.tssa-cuenta > .tssa-form {
		padding: 28px 22px;
	}

	.tssa-barra {
		gap: 12px;
	}
}

/* Un campo que solo se enseña, no se toca. */
.tssa-campo input[disabled],
.tssa-campo input[readonly] {
	background: #f4efec;
	border-color: #e4d9d2;
	color: var(--tssa-suave);
	cursor: default;
}