/* ==========================================================================
   SpanishAura — Componentes compartidos
   Nav, footer, sticky CTA, botones, chips, citas e iconos.
   ========================================================================== */

/* --- Iconos -------------------------------------------------------------- */

.sa-icon {
	display: inline-block;
	flex-shrink: 0;
	fill: currentColor;
	vertical-align: middle;
}

/* --- Botones --------------------------------------------------------------

   GeneratePress estiliza los <button> y, desde su CSS dinámico inline,
   también button:hover y button:focus — con especificidad (0,1,1), que gana
   a una clase suelta (0,1,0). Por eso cada variante declara sus estados
   explícitamente: así empatamos en especificidad y ganamos por orden de
   carga, sin recurrir a !important.
   -------------------------------------------------------------------------- */

.sa-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	padding: 0.75rem 2rem;
	border: none;
	border-radius: var(--sa-radius-full);
	font-family: var(--sa-font-body);
	font-size: 0.875rem;
	font-weight: 700;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: filter var(--sa-transition-fast), transform var(--sa-transition-fast),
		background-color var(--sa-transition-fast), color var(--sa-transition-fast);
}

.sa-btn:active {
	transform: scale(0.96);
}

.sa-btn--sm {
	padding: 0.625rem 1.25rem;
}

.sa-btn--lg {
	padding: 1rem 2rem;
	font-size: 1rem;
}

.sa-btn--gradient {
	background-image: var(--sa-grad-primary);
	box-shadow: var(--sa-shadow-lg);
	color: var(--sa-on-primary);
}

.sa-btn--gradient:hover,
.sa-btn--gradient:focus {
	background-color: transparent;
	background-image: var(--sa-grad-primary);
	color: var(--sa-on-primary);
	filter: brightness(1.1);
}

.sa-btn--solid {
	background-color: var(--sa-primary);
	box-shadow: var(--sa-shadow-md);
	color: var(--sa-on-primary);
}

.sa-btn--solid:hover,
.sa-btn--solid:focus {
	background-color: var(--sa-primary);
	color: var(--sa-on-primary);
	filter: brightness(1.1);
}

.sa-btn--soft {
	background-color: var(--sa-surface-container-highest);
	color: var(--sa-primary);
}

.sa-btn--soft:hover,
.sa-btn--soft:focus {
	background-color: var(--sa-surface-container-high);
	color: var(--sa-primary);
}

.sa-btn--outline {
	background-color: transparent;
	box-shadow: inset 0 0 0 2px var(--sa-primary);
	color: var(--sa-primary);
}

.sa-btn--outline:hover,
.sa-btn--outline:focus {
	background-color: var(--sa-primary);
	color: var(--sa-on-primary);
}

/* Fantasma neutro: sigue siendo botón —área de pulsación intacta en móvil— pero
   sin color de marca, para que no compita con el primario cuando van juntos.
   El trazo es gris de un pixel, no terracota de dos. */
.sa-btn--ghost {
	background-color: transparent;
	box-shadow: inset 0 0 0 1px var(--sa-outline-variant);
	color: var(--sa-on-surface-variant);
	font-weight: 600;
}

.sa-btn--ghost:hover,
.sa-btn--ghost:focus {
	background-color: var(--sa-surface-container);
	box-shadow: inset 0 0 0 1px var(--sa-outline);
	color: var(--sa-on-surface);
}

.sa-btn--inverse {
	background-color: var(--sa-on-primary);
	color: var(--sa-primary);
}

.sa-btn--inverse:hover,
.sa-btn--inverse:focus {
	background-color: var(--sa-on-primary);
	color: var(--sa-primary);
	opacity: 0.9;
}

/* --- Chips ---------------------------------------------------------------- */

.sa-chip {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	margin: 0;
	padding: 0.375rem 0.75rem;
	border-radius: var(--sa-radius-full);
	font-size: var(--sa-fs-xs);
	font-weight: 700;
}

.sa-chip--soft {
	background-color: var(--sa-surface-container);
	color: var(--sa-on-surface-variant);
}

.sa-chip--accent {
	background-color: var(--sa-secondary-container);
	color: var(--sa-on-secondary-container);
}

.sa-chip--primary {
	background-color: rgba(160, 59, 37, 0.1);
	color: var(--sa-primary);
}

/* --- Trust strip -----------------------------------------------------------
   La banda de prueba social. Vive aquí y no en pages/home.css porque la usan
   la portada y la página del curso, y solo se carga una hoja de página por
   plantilla. El marcado está en template-parts/components/trust-strip.php. */

.sa-trust {
	background-color: var(--sa-surface-container);
}

.sa-trust__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1rem;
	padding-block: 1.25rem;
}

.sa-trust__item {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.75rem;
	margin: 0;
	color: var(--sa-on-surface-variant);
	font-size: var(--sa-fs-sm);
	text-decoration: none;
}

.sa-trust__item strong {
	color: var(--sa-on-surface);
}

.sa-trust__item .sa-icon {
	color: var(--sa-primary);
}

.sa-trust__stars {
	display: flex;
	gap: 0.0625rem;
	color: var(--sa-secondary);
}

a.sa-trust__item:hover {
	color: var(--sa-on-surface-variant);
	opacity: 0.8;
}

@media (min-width: 640px) {
	.sa-trust__inner {
		flex-direction: row;
		justify-content: center;
		gap: 0;
	}

	.sa-trust__item {
		padding-inline: 2.5rem;
	}

	/* Separación por línea sutil entre items, como en el diseño. */
	.sa-trust__item + .sa-trust__item {
		border-inline-start: 1px solid rgba(222, 192, 185, 0.4);
	}
}

@media (min-width: 768px) {
	.sa-trust__item {
		padding-inline: 4rem;
	}
}

/* --- Citas ---------------------------------------------------------------- */

.sa-quote {
	margin: 0;
}

.sa-quote p {
	font-family: var(--sa-font-serif);
	font-size: 1rem;
	font-style: italic;
	line-height: var(--sa-lh-relaxed);
}

.sa-quote--bordered {
	padding-inline-start: 1.25rem;
	border-inline-start: 3px solid var(--sa-primary);
}

.sa-quote cite {
	display: block;
	margin-block-start: 0.75rem;
	color: rgba(30, 27, 24, 0.4);
	font-size: var(--sa-fs-xs);
	font-style: normal;
	font-weight: 700;
	letter-spacing: 0.02em;
}

/* --- Utilidades de página -------------------------------------------------- */

/*
 * Sección con menos aire. La usan la franja del café virtual de /course/ y el
 * pie de los artículos del blog: bloques que rematan la página y que con el
 * padding normal se separaban demasiado de lo que viene detrás.
 *
 * Vivía en pages/home.css, donde no servía de nada a ninguna de las dos: solo
 * se carga una hoja de pages/ por plantilla (trampa 24) y la portada ya no usa
 * la clase. Mudada aquí el 28/08.
 */
.sa-section--tight {
	padding-block: 1.5rem;
}

.sa-stack {
	display: flex;
	flex-direction: column;
	gap: 2rem;
}

.sa-text-center {
	text-align: center;
}

.sa-text-justify {
	text-align: justify;
}

.sa-section-head {
	max-width: var(--sa-w-3xl);
}

.sa-section-head--center {
	max-width: var(--sa-w-2xl);
	margin-inline: auto;
	text-align: center;
}

.sa-section-head h2 {
	margin-block-end: 0.75rem;
}

.sa-section-head p {
	color: var(--sa-on-surface-variant);
	line-height: var(--sa-lh-relaxed);
}

.sa-lead {
	max-width: var(--sa-w-xl);
	color: var(--sa-on-surface-variant);
	font-size: var(--sa-fs-lead);
	line-height: var(--sa-lh-relaxed);
}

.sa-note {
	color: var(--sa-on-surface-variant);
	font-size: var(--sa-fs-xs);
	font-style: italic;
}

.sa-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1rem;
}

@media (min-width: 640px) {
	.sa-grid--2,
	.sa-grid--3 {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 1024px) {
	.sa-grid--3 {
		grid-template-columns: repeat(3, 1fr);
	}
}

/* --- Eyebrow ---------------------------------------------------------------- */

.sa-eyebrow {
	margin: 0;
	color: var(--sa-primary);
	font-size: var(--sa-fs-sm);
	font-weight: 700;
	letter-spacing: var(--sa-tracking-eyebrow);
	text-transform: uppercase;
}

.sa-eyebrow--pill {
	display: inline-block;
	padding: 0.25rem 0.75rem;
	background-color: var(--sa-secondary-container);
	border-radius: var(--sa-radius-full);
	color: var(--sa-on-secondary-container);
}

/* --- Tarjetas ---------------------------------------------------------------- */

.sa-card {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	padding: 1.25rem;
	background-color: var(--sa-surface-container-lowest);
	border-radius: var(--sa-radius-card);
	box-shadow: var(--sa-shadow-sm);
}

.sa-card h3 {
	margin: 0;
}

.sa-card p {
	margin: 0;
	color: var(--sa-on-surface-variant);
	font-size: var(--sa-fs-sm);
	line-height: var(--sa-lh-relaxed);
}

/* El texto de tarjeta va en gris: la negrita necesita el color plano para
   destacar de verdad. */
.sa-card p strong {
	color: var(--sa-on-surface);
}

/*
 * Icono de tarjeta, donde antes iba un emoji: mismo hueco, pero con el trazo y
 * el color del theme en vez del que decida el sistema operativo.
 *
 * Vivía en pages/course.css hasta el 28/08, cuando /classes/ cambió sus
 * emojis por iconos y pasó a usarlo también (trampa 24).
 */
.sa-card__icon {
	color: var(--sa-primary);
}

/*
 * Bullets del hero con icono: van entre la flecha y el texto, en terracota y
 * sin encogerse cuando la línea ocupa dos renglones. Los usan /course/ y
 * /classes/.
 */
.sa-arrow-list--icons li {
	align-items: flex-start;
}

.sa-bullet-icon {
	flex-shrink: 0;
	color: var(--sa-primary);
}

/* Sigue en uso en page-book-a-class.php y en el dashboard de My Account. */
.sa-card__emoji {
	font-size: 1.5rem;
	line-height: 1;
}

.sa-card__label {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	color: var(--sa-secondary) !important;
	font-size: var(--sa-fs-xs) !important;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

/* Modificadores de énfasis del diseño. */
.sa-card--accent-top {
	border-block-start: 4px solid var(--sa-secondary);
}

.sa-card--primary-top {
	border-block-start: 4px solid var(--sa-primary);
}

.sa-card--accent-left {
	border-inline-start: 4px solid var(--sa-secondary);
}

.sa-chip--number {
	align-self: flex-start;
	padding: 0.25rem 0.625rem;
	background-color: var(--sa-primary);
	color: var(--sa-on-primary);
}

/* --- Listas ------------------------------------------------------------------ */

.sa-arrow-list,
.sa-check-list {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.sa-arrow-list li,
.sa-check-list li {
	display: flex;
	align-items: flex-start;
	gap: 0.75rem;
	line-height: var(--sa-lh-relaxed);
}

.sa-arrow-list .sa-icon,
.sa-check-list .sa-icon {
	flex-shrink: 0;
	margin-block-start: 0.25em;
	color: var(--sa-primary);
}

.sa-icon--accent {
	color: var(--sa-secondary) !important;
}

.sa-icon--error {
	color: var(--sa-error) !important;
}

.sa-check-list--muted li {
	color: var(--sa-on-surface-variant);
}

.sa-quote-inline {
	margin-block-start: 1.25rem;
	color: var(--sa-primary);
	font-family: var(--sa-font-serif);
	font-size: var(--sa-fs-lead);
	font-style: italic;
}

/* --- Testimonios --------------------------------------------------------------- */

.sa-testimonial {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	margin: 0;
	padding: 1.25rem;
	background-color: var(--sa-surface-container-lowest);
	border-radius: var(--sa-radius-card);
	box-shadow: var(--sa-shadow-sm);
}

/* Contexto que hay que leer ANTES de la reseña —por ejemplo, que está escrita
   en español—. Pequeño y en cursiva: avisa, no compite con la cita. */
.sa-testimonial__note {
	margin: 0;
	color: var(--sa-on-surface-variant);
	font-size: var(--sa-fs-xs);
	font-style: italic;
	line-height: var(--sa-lh-relaxed);
}

.sa-testimonial__stars {
	display: flex;
	gap: 0.125rem;
	color: var(--sa-secondary);
}

.sa-testimonial__quote {
	margin: 0;
}

.sa-testimonial__quote p + p {
	margin-block-start: 0.75rem;
}

/*
 * Reseñas largas: el texto va entero en el HTML y aquí solo se tapa. La clase
 * la pone main.js tras medir, así que sin JavaScript no se recorta nada. El
 * degradado del final avisa de que sigue, que un corte a hueso parece una
 * frase terminada.
 */
.sa-testimonial--clamped .sa-testimonial__quote {
	position: relative;
	max-height: 12rem;
	overflow: hidden;
}

.sa-testimonial--clamped .sa-testimonial__quote::after {
	content: "";
	position: absolute;
	inset-inline: 0;
	inset-block-end: 0;
	height: 3rem;
	background: linear-gradient( to bottom, transparent, var(--sa-surface-container-lowest) );
	pointer-events: none;
}

.sa-testimonial__toggle {
	align-self: start;
	padding: 0;
	border: 0;
	background: none;
	color: var(--sa-primary);
	font-family: inherit;
	font-size: var(--sa-fs-xs);
	font-weight: 700;
	cursor: pointer;
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.sa-testimonial__toggle:hover,
.sa-testimonial__toggle:focus-visible {
	color: var(--sa-primary-container);
}

.sa-testimonial__quote p {
	margin: 0;
	font-family: var(--sa-font-serif);
	font-size: var(--sa-fs-sm);
	font-style: italic;
	line-height: var(--sa-lh-relaxed);
}

.sa-testimonial__author {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin-block-start: auto;
	padding-block-start: 0.5rem;
}

.sa-testimonial__avatar {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 1.75rem;
	height: 1.75rem;
	border-radius: var(--sa-radius-full);
	font-size: var(--sa-fs-xs);
	font-weight: 700;
}

.sa-testimonial__avatar--primary  { background-color: var(--sa-primary); color: var(--sa-on-primary); }
.sa-testimonial__avatar--tertiary { background-color: var(--sa-tertiary-fixed); color: var(--sa-on-surface); }
.sa-testimonial__avatar--accent   { background-color: var(--sa-secondary-container); color: var(--sa-on-secondary-container); }
.sa-testimonial__avatar--neutral  { background-color: var(--sa-surface-container-highest); color: var(--sa-on-surface); }

.sa-testimonial__name {
	display: block;
	font-size: var(--sa-fs-sm);
	font-weight: 700;
}

.sa-testimonial__role {
	display: block;
	color: var(--sa-on-surface-variant);
	font-size: var(--sa-fs-xs);
}

/* --- Carrusel de testimonios ---------------------------------------------------- */

.sa-carousel {
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
}

/*
 * El carril es scroll nativo con snap: sin JavaScript se arrastra igual. Las
 * tarjetas no llegan al borde a propósito — asomar la siguiente es lo que
 * indica que hay más que leer.
 */
.sa-carousel__track {
	display: flex;
	/*
	 * Las tarjetas siguen estirando a la altura de la más larga (desde que las
	 * reseñas van íntegras, la de Zanet son siete párrafos). Se probó
	 * «align-items: flex-start» y sale peor: el carril mide igual de todas
	 * formas, así que con las cortas quedaba un hueco muerto debajo en vez de
	 * tarjeta. Al estirar, la firma cae al pie con el «margin-block-start: auto»
	 * del autor y la fila se lee como un bloque.
	 */
	gap: 1.5rem;
	overflow-x: auto;
	padding-block-end: 0.5rem;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	-ms-overflow-style: none;
}

.sa-carousel__track::-webkit-scrollbar {
	display: none;
}

.sa-carousel__track > * {
	flex: 0 0 85%;
	scroll-snap-align: start;
}

.sa-carousel__controls {
	display: flex;
	justify-content: center;
	gap: 0.75rem;
}

.sa-carousel__btn,
.sa-carousel__btn:hover,
.sa-carousel__btn:focus {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	padding: 0;
	background-color: var(--sa-surface-container-lowest);
	background-image: none;
	border: 2px solid var(--sa-primary);
	border-radius: var(--sa-radius-full);
	color: var(--sa-primary);
	cursor: pointer;
	transition: background-color var(--sa-transition-fast), color var(--sa-transition-fast), opacity var(--sa-transition-fast);
}

.sa-carousel__btn:hover {
	background-color: var(--sa-primary);
	color: var(--sa-on-primary);
}

.sa-carousel__btn[disabled] {
	opacity: 0.35;
	cursor: default;
}

.sa-carousel__btn[disabled]:hover {
	background-color: var(--sa-surface-container-lowest);
	color: var(--sa-primary);
}

/* La flecha «anterior» reutiliza el icono de avanzar, girado. */
[data-carousel-prev] .sa-icon {
	transform: rotate(180deg);
}

@media (min-width: 768px) {
	.sa-carousel__track > * {
		flex-basis: calc((100% - 1.5rem) / 2);
	}
}

@media (min-width: 1024px) {
	.sa-carousel__track > * {
		flex-basis: calc((100% - 3rem) / 3);
	}
}

/* --- Marcos de imagen ------------------------------------------------------------ */

.sa-frame {
	overflow: hidden;
	width: 100%;
	border-radius: var(--sa-radius-photo);
	box-shadow: var(--sa-shadow-2xl);
}

.sa-frame--4-5 { aspect-ratio: 4 / 5; }
.sa-frame--3-4 { aspect-ratio: 3 / 4; }
.sa-frame--square { aspect-ratio: 1 / 1; }
.sa-frame--3-2 { aspect-ratio: 3 / 2; border-radius: var(--sa-radius-card); }

.sa-frame--circle {
	border-radius: var(--sa-radius-full);
}

.sa-frame img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Sin foto: el marco guarda el hueco y dentro solo se lee «Photo coming soon». */
.sa-frame__placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	padding: 1.5rem;
	background-color: var(--sa-surface-container);
	box-shadow: inset 0 0 0 2px var(--sa-outline-variant);
	color: var(--sa-outline);
	font-size: 0.85rem;
	letter-spacing: 0.04em;
	text-align: center;
}

/* --- FAQ ---------------------------------------------------------------------- */

.sa-faq {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

.sa-faq__item {
	overflow: hidden;
	background-color: var(--sa-surface-container-lowest);
	border-radius: var(--sa-radius-card);
}

.sa-faq__question {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 1rem 1.25rem;
	font-weight: 700;
	cursor: pointer;
	list-style: none;
}

.sa-faq__question::-webkit-details-marker {
	display: none;
}

.sa-faq__icon {
	flex-shrink: 0;
	color: var(--sa-primary);
	transition: transform var(--sa-transition);
}

.sa-faq__item[open] .sa-faq__icon {
	transform: rotate(45deg);
}

.sa-faq__answer {
	padding: 0 1.25rem 1.25rem;
}

.sa-faq__answer p {
	margin: 0;
	color: var(--sa-on-surface-variant);
	line-height: var(--sa-lh-relaxed);
}

/* --- CTA final ------------------------------------------------------------------ */

.sa-cta-final {
	position: relative;
	overflow: hidden;
	background-color: var(--sa-surface-container-low);
	text-align: center;
}

.sa-cta-final__layout {
	position: relative;
	z-index: 1;
}

.sa-cta-final__inner {
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
	align-items: center;
}

/*
 * Variante con foto: dos columnas y texto alineado a la izquierda. La cara
 * mira hacia el copy, así que va delante en el orden de lectura. Solo se
 * activa cuando la plantilla pasa `image`; el resto de páginas siguen con la
 * columna centrada de siempre.
 */

.sa-cta-final--media {
	text-align: start;
}

.sa-cta-final--media .sa-cta-final__inner {
	align-items: flex-start;
	gap: 1.5rem;
}

.sa-cta-final--media .sa-cta-final__text {
	max-width: none;
}

.sa-cta-final__media {
	max-width: 20rem;
	margin-inline: auto;
	width: 100%;
}

@media (min-width: 900px) {
	.sa-cta-final--media .sa-cta-final__layout {
		display: grid;
		grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
		align-items: center;
		gap: 3.5rem;
	}

	.sa-cta-final__media {
		max-width: none;
	}
}

.sa-cta-final__title {
	font-size: clamp(1.875rem, 1.2rem + 3.4vw, 3rem);
	line-height: var(--sa-lh-tight);
}

.sa-cta-final__title em {
	color: var(--sa-primary);
}

.sa-cta-final__text {
	max-width: var(--sa-w-2xl);
	color: var(--sa-on-surface-variant);
	line-height: var(--sa-lh-relaxed);
}

/* Acción de segundo nivel bajo el botón: se lee, pero no compite con él. */
.sa-cta-final__secondary {
	max-width: var(--sa-w-2xl);
	color: var(--sa-on-surface-variant);
	font-size: var(--sa-fs-sm);
	line-height: var(--sa-lh-relaxed);
}

.sa-cta-final__secondary a {
	color: var(--sa-primary);
	font-weight: 700;
	text-decoration: underline;
	white-space: nowrap;
}

.sa-cta-final__footnote {
	color: var(--sa-on-surface-variant);
	font-size: var(--sa-fs-sm);
	opacity: 0.8;
}

.sa-cta-final__blob {
	position: absolute;
	border-radius: var(--sa-radius-full);
	filter: blur(64px);
	pointer-events: none;
}

.sa-cta-final__blob--left {
	inset-block-start: 50%;
	inset-inline-start: 0;
	width: 16rem;
	height: 16rem;
	background-color: rgba(192, 83, 58, 0.05);
	transform: translate(-50%, -50%);
}

.sa-cta-final__blob--right {
	inset-block-start: 0;
	inset-inline-end: 0;
	width: 24rem;
	height: 24rem;
	background-color: rgba(254, 209, 108, 0.1);
	transform: translate(33%, -33%);
}

/* --- Página genérica y prosa larga ------------------------------------------ */

.sa-page-header {
	margin-block-end: 2rem;
}

.sa-page-header h1 {
	margin: 0 0 0.5rem;
}

/* Estilos para el contenido del editor: legales, políticas y páginas nuevas. */
.sa-prose--page {
	color: var(--sa-on-surface-variant);
	line-height: var(--sa-lh-relaxed);
}

.sa-prose--page > * + * {
	margin-block-start: 1rem;
}

.sa-prose--page h2 {
	margin-block-start: 2.5rem;
	color: var(--sa-on-surface);
	font-size: var(--sa-fs-h2);
}

.sa-prose--page h3 {
	margin-block-start: 2rem;
	color: var(--sa-on-surface);
	font-size: 1.125rem;
}

.sa-prose--page ul,
.sa-prose--page ol {
	padding-inline-start: 1.25rem;
}

.sa-prose--page li + li {
	margin-block-start: 0.5rem;
}

.sa-prose--page a {
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.sa-prose--page strong {
	color: var(--sa-on-surface);
}

.sa-prose--page blockquote {
	padding-inline-start: 1.25rem;
	border-inline-start: 3px solid var(--sa-primary);
	font-family: var(--sa-font-serif);
	font-style: italic;
}

.sa-prose--page table {
	width: 100%;
	border-collapse: collapse;
}

.sa-prose--page th,
.sa-prose--page td {
	padding: 0.75rem;
	border-block-end: 1px solid rgba(30, 27, 24, 0.08);
	text-align: start;
}

/* --- 404 ---------------------------------------------------------------------- */

.sa-404 {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1.25rem;
}

.sa-404 h1 {
	margin: 0;
}

.sa-404 h1 em {
	color: var(--sa-primary);
	font-style: italic;
}

.sa-404__actions {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

@media (min-width: 640px) {
	.sa-404__actions {
		flex-direction: row;
	}
}

/* --- Navegación ----------------------------------------------------------- */

/* La nav es fija: el contenido arranca por debajo. */
body {
	padding-block-start: var(--sa-nav-offset);
}

.sa-nav {
	position: fixed;
	inset-block-start: 0;
	inset-inline: 0;
	z-index: 50;
	background-color: rgba(255, 248, 245, 0.9);
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
	box-shadow: var(--sa-shadow-nav);
}

.sa-nav__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding-block: 0.75rem;
}

.sa-nav__brand {
	flex-shrink: 0;
	color: var(--sa-primary);
	font-family: var(--sa-font-serif);
	font-size: 1.25rem;
	font-weight: 700;
	text-decoration: none;
}

.sa-nav__brand:hover {
	color: var(--sa-primary-container);
}

/* Wordmark oficial: «Spanish» ligero + «Aura» negrita cursiva. Se usa en la
   nav y el footer; el contraste fino/grueso es la marca. */
.sa-wordmark__lite {
	font-weight: 300;
}

.sa-wordmark__bold {
	font-style: italic;
	font-weight: 700;
}

/* Menús: se limpian los estilos de lista de WordPress. */
.sa-nav__links,
.sa-nav__drawer-links,
.sa-footer__links,
.sa-footer__legal,
.sa-footer__contact {
	margin: 0;
	padding: 0;
	list-style: none;
}

.sa-nav__links {
	display: none;
	align-items: center;
	gap: 1.5rem;
	font-family: var(--sa-font-serif);
	font-size: 1rem;
	font-style: italic;
	font-weight: 500;
}

.sa-nav__links a {
	display: inline-block;
	padding-block-end: 0.25rem;
	border-block-end: 2px solid transparent;
	color: var(--sa-on-surface);
	opacity: 0.8;
	text-decoration: none;
	transition: color var(--sa-transition-fast), opacity var(--sa-transition-fast);
}

.sa-nav__links a:hover {
	color: var(--sa-primary);
	opacity: 1;
}

.sa-nav__links .current-menu-item > a,
.sa-nav__links .current_page_item > a {
	border-block-end-color: var(--sa-primary-container);
	color: var(--sa-primary);
	opacity: 1;
}

/* --- Acciones de la nav: carrito y cuenta ---------------------------------- */

.sa-nav__actions {
	display: flex;
	align-items: center;
	gap: 0.25rem;
}

.sa-nav__action {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	padding: 0.5rem;
	border-radius: var(--sa-radius-full);
	color: var(--sa-on-surface);
	text-decoration: none;
	transition: background-color var(--sa-transition-fast), color var(--sa-transition-fast);
}

.sa-nav__action:hover {
	background-color: var(--sa-surface-container);
	color: var(--sa-primary);
}

/* La etiqueta se oculta en móvil: solo iconos, para no comer ancho. */
.sa-nav__action-label {
	display: none;
	font-size: var(--sa-fs-sm);
	font-weight: 700;
}

/* Burbuja con el número de artículos del carrito. */
.sa-nav__badge {
	position: absolute;
	inset-block-start: 0.125rem;
	inset-inline-end: 0.125rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 1.125rem;
	height: 1.125rem;
	padding-inline: 0.25rem;
	background-color: var(--sa-primary);
	border: 2px solid var(--sa-surface);
	border-radius: var(--sa-radius-full);
	color: var(--sa-on-primary);
	font-size: 0.625rem;
	font-weight: 700;
	line-height: 1;
}

.sa-nav__drawer-account {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.75rem;
	padding: 1rem var(--sa-gutter) 0;
	border-block-start: 1px solid rgba(222, 192, 185, 0.3);
}

.sa-nav__logout {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	color: var(--sa-on-surface-variant);
	font-size: var(--sa-fs-sm);
	text-decoration: none;
}

.sa-nav__logout:hover {
	color: var(--sa-primary);
}

.sa-nav__toggle,
.sa-nav__toggle:hover,
.sa-nav__toggle:focus {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.5rem;
	background-color: transparent;
	background-image: none;
	border: none;
	border-radius: var(--sa-radius-sm);
	color: var(--sa-on-surface);
	cursor: pointer;
}

/* Un solo botón con los dos iconos; se alterna cuál se ve. */
.sa-nav__toggle-icon--close,
.sa-nav__toggle.is-open .sa-nav__toggle-icon {
	display: none;
}

.sa-nav__toggle.is-open .sa-nav__toggle-icon--close {
	display: inline-block;
}

.sa-nav__drawer {
	overflow: hidden;
	max-height: 0;
	background-color: rgba(255, 248, 245, 0.95);
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
	border-block-start: 1px solid rgba(222, 192, 185, 0.3);
	transition: max-height var(--sa-transition-slow);
}

.sa-nav__drawer.is-open {
	max-height: 30rem;
}

.sa-nav__drawer-links {
	display: flex;
	flex-direction: column;
	padding: 1rem var(--sa-gutter) 1.5rem;
	font-family: var(--sa-font-serif);
	font-size: 1.125rem;
	font-style: italic;
}

.sa-nav__drawer-links a {
	display: block;
	padding: 0.75rem 0.5rem;
	border-block-end: 1px solid rgba(222, 192, 185, 0.2);
	color: var(--sa-on-surface);
	text-decoration: none;
}

.sa-nav__drawer-links li:last-child a {
	border-block-end: none;
}

.sa-nav__drawer-links .current-menu-item > a,
.sa-nav__drawer-links .current_page_item > a {
	color: var(--sa-primary);
	font-weight: 700;
}

/* Separador inferior por cambio de color, no por borde. */
.sa-nav__rule {
	height: 1px;
	background-color: var(--sa-surface-container-low);
}

body.sa-no-scroll {
	overflow: hidden;
}

@media (min-width: 768px) {
	.sa-nav__inner {
		padding-block: 1rem;
	}

	.sa-nav__brand {
		font-size: 1.5rem;
	}

	.sa-nav__links {
		display: flex;
	}

	.sa-nav__action-label {
		display: inline;
	}

	.sa-nav__action--account {
		padding-inline: 0.875rem;
	}

	.sa-nav__toggle,
	.sa-nav__drawer {
		display: none;
	}
}

/* --- Barra CTA fija en móvil ---------------------------------------------- */

.sa-sticky-cta__sentinel {
	position: absolute;
	inset-block-start: 500px;
	height: 1px;
	width: 1px;
	pointer-events: none;
}

.sa-sticky-cta {
	position: fixed;
	inset-block-end: 0;
	inset-inline: 0;
	z-index: 40;
	transform: translateY(100%);
	transition: transform var(--sa-transition-slow);
}

.sa-sticky-cta.is-visible {
	transform: translateY(0);
}

.sa-sticky-cta__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 0.75rem var(--sa-gutter);
	background-color: rgba(255, 248, 245, 0.95);
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
	border-block-start: 1px solid rgba(222, 192, 185, 0.3);
	box-shadow: var(--sa-shadow-sticky);
}

.sa-sticky-cta__text {
	min-width: 0;
}

.sa-sticky-cta__eyebrow,
.sa-sticky-cta__title {
	margin: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.sa-sticky-cta__eyebrow {
	color: var(--sa-on-surface-variant);
	font-size: var(--sa-fs-xs);
}

.sa-sticky-cta__title {
	font-size: 0.875rem;
	font-weight: 700;
}

/* Botón de cerrar: sin fondo ni borde, que ya hay dos elementos compitiendo en
   la barra. Área de pulsación de 2.25rem, suficiente para el pulgar. */
.sa-sticky-cta__close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 2.25rem;
	height: 2.25rem;
	padding: 0;
	background: none;
	border: none;
	border-radius: var(--sa-radius-full);
	color: var(--sa-outline);
	cursor: pointer;
}

.sa-sticky-cta__close:hover,
.sa-sticky-cta__close:focus {
	background-color: var(--sa-surface-container);
	color: var(--sa-on-surface);
}

@media (min-width: 768px) {
	.sa-sticky-cta {
		display: none;
	}

	/*
	 * La variante de precio sí se queda en escritorio: es la única página con
	 * una compra que cerrar, y ahí abajo no tapa nada porque el contenido
	 * termina en el cierre. Se centra y se recoge en vez de ocupar todo el
	 * ancho, para no leerse como una segunda barra de navegación.
	 */
	.sa-sticky-cta--desktop {
		display: block;
		inset-block-end: 1.25rem;
		inset-inline: 0;
	}

	.sa-sticky-cta--desktop .sa-sticky-cta__inner {
		max-width: var(--sa-w-3xl);
		margin-inline: auto;
		padding: 0.75rem 0.75rem 0.75rem 1.5rem;
		border: none;
		border-radius: var(--sa-radius-full);
		box-shadow: var(--sa-shadow-xl);
	}
}

/* --- Botón de WhatsApp ------------------------------------------------------
   Flotante abajo a la derecha. En móvil sube para no pisar la barra CTA fija;
   cuando esa barra aparece, sube un poco más. */

.sa-whatsapp {
	position: fixed;
	inset-block-end: 1rem;
	inset-inline-end: 1rem;
	z-index: 45;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 3.25rem;
	height: 3.25rem;
	background-color: #25d366;
	border-radius: var(--sa-radius-full);
	box-shadow: 0 6px 20px rgba(37, 211, 102, 0.35);
	color: #fff;
	transition: transform var(--sa-transition-fast), box-shadow var(--sa-transition-fast);
}

.sa-whatsapp:hover {
	transform: scale(1.06);
	box-shadow: 0 8px 26px rgba(37, 211, 102, 0.45);
	color: #fff;
}

.sa-whatsapp:active {
	transform: scale(0.96);
}

/* La barra CTA de móvil mide unos 4.5rem: el botón se coloca encima. */
@media (max-width: 767px) {
	.sa-whatsapp {
		inset-block-end: 5.5rem;
		width: 3rem;
		height: 3rem;
	}

	/* Sin barra CTA en esta página, el botón baja a su sitio natural. */
	body:not(:has(.sa-sticky-cta)) .sa-whatsapp {
		inset-block-end: 1rem;
	}
}

/* --- Modal de venta cruzada --------------------------------------------------
   Aparece centrado tras añadir al carrito. Confirma lo añadido y propone la
   mejora. Se cierra con la X, el fondo, Escape o el enlace de rechazo. */

.sa-crossmodal {
	position: fixed;
	inset: 0;
	z-index: 80;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1rem;
}

.sa-crossmodal__backdrop {
	position: absolute;
	inset: 0;
	background-color: rgba(30, 27, 24, 0.55);
	backdrop-filter: blur(3px);
	animation: sa-crossmodal-fade 0.25s ease both;
}

.sa-crossmodal__card {
	position: relative;
	width: 100%;
	max-width: 32rem;
	max-height: calc(100vh - 2rem);
	overflow-y: auto;
	padding: 2.25rem 2rem 1.75rem;
	background-color: var(--sa-surface-container-lowest);
	border-radius: var(--sa-radius-card);
	box-shadow: 0 36px 80px rgba(45, 41, 38, 0.3);
	animation: sa-crossmodal-pop 0.45s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.sa-crossmodal__card:focus {
	outline: none;
}

/* Cinta de gradiente de marca en el borde superior. */
.sa-crossmodal__card::before {
	content: "";
	position: absolute;
	inset-block-start: 0;
	inset-inline: 0;
	height: 5px;
	background-image: var(--sa-grad-accent);
}

@keyframes sa-crossmodal-fade {
	from {
		opacity: 0;
	}
}

@keyframes sa-crossmodal-pop {
	from {
		opacity: 0;
		transform: translateY(1.25rem) scale(0.94);
	}
}

.sa-crossmodal.is-closing .sa-crossmodal__backdrop {
	animation: sa-crossmodal-fade 0.2s ease both reverse;
}

.sa-crossmodal.is-closing .sa-crossmodal__card {
	animation: sa-crossmodal-pop 0.2s ease both reverse;
}

.sa-crossmodal__close {
	position: absolute;
	inset-block-start: 1rem;
	inset-inline-end: 1rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.25rem;
	height: 2.25rem;
	padding: 0;
	background-color: transparent;
	border: 0;
	border-radius: var(--sa-radius-full);
	color: var(--sa-on-surface-variant);
	cursor: pointer;
	transition: background-color var(--sa-transition-fast), color var(--sa-transition-fast);
}

.sa-crossmodal__close:hover,
.sa-crossmodal__close:focus-visible {
	background-color: var(--sa-surface-container);
	color: var(--sa-on-surface);
}

.sa-crossmodal__added {
	display: flex;
	align-items: center;
	gap: 0.875rem;
	padding-block-end: 1.25rem;
	border-block-end: 1px dashed var(--sa-outline-variant);
}

.sa-crossmodal__badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 3rem;
	height: 3rem;
	background-image: var(--sa-grad-accent);
	border-radius: var(--sa-radius-full);
	color: #fff;
}

.sa-crossmodal__added-title {
	margin: 0;
	font-family: var(--sa-font-serif);
	font-size: 1.125rem;
	font-weight: 700;
}

.sa-crossmodal__added-name {
	margin: 0.125rem 0 0;
	color: var(--sa-on-surface-variant);
	font-size: var(--sa-fs-sm);
}

.sa-crossmodal__offer {
	padding-block: 1.25rem 1.5rem;
	text-align: center;
}

.sa-crossmodal__eyebrow {
	margin: 0 0 0.5rem;
	color: var(--sa-secondary);
	font-size: var(--sa-fs-xs);
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.sa-crossmodal__title {
	margin: 0 0 0.625rem;
	font-family: var(--sa-font-serif);
	font-size: clamp(1.375rem, 3vw, 1.625rem);
	font-weight: 700;
	line-height: 1.25;
}

.sa-crossmodal__text {
	margin: 0;
	color: var(--sa-on-surface-variant);
	line-height: var(--sa-lh-relaxed);
}

.sa-crossmodal__actions {
	display: flex;
	flex-direction: column;
	gap: 0.625rem;
}

.sa-crossmodal__dismiss {
	display: block;
	margin: 1rem auto 0;
	padding: 0.25rem 0.5rem;
	background-color: transparent;
	border: 0;
	color: var(--sa-on-surface-variant);
	font-size: var(--sa-fs-sm);
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
	transition: color var(--sa-transition-fast);
}

.sa-crossmodal__dismiss:hover,
.sa-crossmodal__dismiss:focus-visible {
	color: var(--sa-on-surface);
}

@media (max-width: 479px) {
	.sa-crossmodal__card {
		padding: 1.75rem 1.25rem 1.5rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.sa-crossmodal__backdrop,
	.sa-crossmodal__card,
	.sa-crossmodal.is-closing .sa-crossmodal__backdrop,
	.sa-crossmodal.is-closing .sa-crossmodal__card {
		animation: none;
	}
}

/* --- Footer --------------------------------------------------------------- */

.sa-footer {
	background-color: var(--sa-surface-container-low);
}

.sa-footer__accent {
	height: 3px;
	background-image: var(--sa-grad-accent);
}

.sa-footer__inner {
	padding-block: 3.5rem 2rem;
}

.sa-footer__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 2.5rem;
}

.sa-footer__col {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 1.25rem;
}

.sa-footer__brand {
	color: var(--sa-primary);
	font-family: var(--sa-font-serif);
	font-size: 1.5rem;
	font-weight: 700;
	text-decoration: none;
}

.sa-footer__tagline {
	max-width: 20rem;
	margin: 0;
	color: rgba(30, 27, 24, 0.6);
	font-size: 0.875rem;
	line-height: var(--sa-lh-relaxed);
}

.sa-footer__heading {
	margin: 0;
	color: rgba(30, 27, 24, 0.35);
	font-family: var(--sa-font-body);
	font-size: var(--sa-fs-xs);
	font-weight: 700;
	letter-spacing: var(--sa-tracking-label);
	text-transform: uppercase;
}

.sa-footer__links,
.sa-footer__contact {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

.sa-footer__links a,
.sa-footer__contact-link {
	color: rgba(30, 27, 24, 0.65);
	font-size: 0.875rem;
	text-decoration: none;
	transition: color var(--sa-transition-fast);
}

.sa-footer__links a:hover,
.sa-footer__contact-link:hover {
	color: var(--sa-primary);
}

.sa-footer__contact-link {
	display: flex;
	align-items: center;
	gap: 0.75rem;
}

.sa-footer__contact-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 2.25rem;
	height: 2.25rem;
	background-color: var(--sa-surface-container);
	border-radius: var(--sa-radius-full);
	color: var(--sa-primary);
	transition: background-color var(--sa-transition-fast);
}

.sa-footer__contact-link:hover .sa-footer__contact-icon {
	background-color: rgba(160, 59, 37, 0.1);
}

.sa-footer__col .sa-quote p {
	color: rgba(30, 27, 24, 0.75);
}

/* Mención obligatoria del Kit Digital: los dos logos oficiales, a la misma
   altura visual (el PRTR va recortado sin aire para que iguale al de la UE). */
.sa-footer__funding {
	margin-block-start: 3rem;
}

.sa-footer__funding-logos {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 2.5rem;
	flex-wrap: wrap;
}

.sa-footer__funding-logos img {
	width: auto;
	height: 3.25rem;
}

.sa-footer__bottom {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.75rem;
	margin-block-start: 3rem;
	padding-block-start: 1.5rem;
	border-block-start: 1px solid rgba(30, 27, 24, 0.1);
}

.sa-footer__bottom-left {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.25rem;
}

.sa-footer__copy,
.sa-footer__credit {
	margin: 0;
}

.sa-footer__heart {
	font-style: normal;
}

.sa-footer__copy,
.sa-footer__credit,
.sa-footer__legal a {
	color: rgba(30, 27, 24, 0.35);
	font-size: var(--sa-fs-xs);
	text-decoration: none;
}

.sa-footer__legal {
	display: flex;
	flex-wrap: wrap;
	gap: 1.25rem;
}

.sa-footer__legal a:hover {
	color: var(--sa-primary);
}

@media (min-width: 640px) {
	.sa-footer__grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.sa-footer__col--brand {
		grid-column: span 2;
	}

	.sa-footer__bottom {
		flex-direction: row;
		justify-content: space-between;
	}

	.sa-footer__bottom-left {
		align-items: flex-start;
	}
}

@media (min-width: 1024px) {
	.sa-footer__grid {
		grid-template-columns: repeat(4, 1fr);
		gap: 3rem;
	}

	.sa-footer__col--brand {
		grid-column: span 1;
	}

	.sa-footer__inner {
		padding-block: 5rem 3rem;
	}

	.sa-footer__bottom {
		margin-block-start: 4rem;
	}
}

/* ---------------------------------------------------------------------------
   Acreditación de reseñas de Google
   --------------------------------------------------------------------------- */

.sa-google-proof {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.5rem;
	margin-block-start: 1rem;
}

.sa-google-proof__badge {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	margin: 0;
	padding: 0.5rem 1rem;
	border-radius: 999px;
	background: var(--sa-surface);
	/*
	 * Excepción a «nunca bordes de 1px»: esa regla es para separar secciones.
	 * Aquí el borde cierra una píldora sobre una superficie del mismo tono, que
	 * si no se deshace contra el fondo.
	 */
	border: 1px solid var(--sa-surface-variant, #e9e1dc);
}

.sa-google-proof__stars {
	display: flex;
	gap: 0.0625rem;
	color: var(--sa-secondary);
}

.sa-google-proof__score {
	font-size: var(--sa-fs-sm);
	color: var(--sa-on-surface);
}

.sa-google-proof__score strong {
	font-weight: 700;
}

/*
 * Vivía en pages/home.css, pero la usan la portada y la página del curso.
 * En components.css la ven las dos.
 */
.sa-source-note {
	margin-block-start: 0.75rem;
	color: var(--sa-on-surface-variant);
	font-size: var(--sa-fs-sm);
}

.sa-source-note a {
	color: var(--sa-primary);
	font-weight: 700;
	white-space: nowrap;
}

/* --- Mockup del grupo de WhatsApp ------------------------------------------
 *
 * Vivía en pages/home.css hasta que la página del curso pidió el mismo
 * mockup. Se comparte tal cual —mismo marcado y mismos estilos— porque es el
 * argumento diferencial de las dos páginas, y dos versiones que se separan
 * con el tiempo son peores que ninguna.
 *
 * Está aquí y no en pages/ porque solo se carga una hoja de página por
 * plantilla (ver trampa 24 de CLAUDE.md): en pages/home.css, la portada lo
 * vería con estilos y /course/ lo vería en crudo.
 *
 * El ancho lo pone quien lo use: la portada con .sa-wa .sa-chat.
 * -------------------------------------------------------------------------- */


/*
 * Mockup del grupo de WhatsApp. Todo CSS: ni imagen, ni webfont, ni JS. El
 * verde vive aquí y no en tokens.css porque no es color de marca — es atrezo
 * de un solo componente, y apagado a propósito para que conviva con la crema
 * y el terracota.
 */

.sa-chat {
	--sa-chat-green: #e4ece1;

	max-width: 26rem;
	margin-inline: auto;
	overflow: hidden;
	background-color: var(--sa-surface-container-lowest);
	border-radius: var(--sa-radius-card);
	box-shadow: var(--sa-shadow-xl);
}

.sa-chat__head {
	display: flex;
	flex-direction: column;
	gap: 0.125rem;
	padding: 0.875rem 1.25rem;
	background-color: var(--sa-surface-container-high);
}

.sa-chat__title {
	font-size: var(--sa-fs-sm);
	font-weight: 700;
}

.sa-chat__subtitle {
	color: var(--sa-on-surface-variant);
	font-size: var(--sa-fs-xs);
}

/* Fondo intermedio: así la burbuja blanca de Aurora se distingue sin bordes. */
.sa-chat__body {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
	padding: 1.25rem;
	background-color: var(--sa-surface-container-low);
}

.sa-chat__msg {
	display: flex;
	flex-direction: column;
	gap: 0.375rem;
	align-items: flex-start;
}

.sa-chat__msg--student {
	align-items: flex-end;
}

.sa-chat__bubble {
	display: flex;
	align-items: center;
	gap: 0.625rem;
	max-width: 100%;
	padding: 0.625rem 0.875rem;
	border-radius: var(--sa-radius);
	box-shadow: var(--sa-shadow-sm);
}

.sa-chat__msg--student .sa-chat__bubble {
	background-color: var(--sa-chat-green);
}

.sa-chat__msg--teacher .sa-chat__bubble {
	background-color: var(--sa-surface-container-lowest);
}

.sa-chat__avatar {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 2rem;
	height: 2rem;
	background-color: var(--sa-primary);
	border-radius: var(--sa-radius-full);
	color: var(--sa-on-primary);
	font-size: var(--sa-fs-xs);
	font-weight: 700;
}

.sa-chat__avatar--teacher {
	background-color: var(--sa-secondary);
}

/* Triángulo de reproducción: bordes, sin SVG ni icono extra en el sprite. */
.sa-chat__play {
	flex-shrink: 0;
	width: 0;
	height: 0;
	border-block: 0.4375rem solid transparent;
	border-inline-start: 0.6875rem solid var(--sa-primary);
	border-inline-end: 0;
}

/*
 * min-width: 0 y overflow porque las 14 barras no encogen solas: en pantallas
 * muy estrechas (~280px, la portada exterior de un plegable) el ancho mínimo
 * del bocadillo empujaba a su contenedor y sacaba scroll lateral. Con esto la
 * onda se recorta y el mockup encoge con la pantalla.
 */
.sa-chat__wave {
	min-width: 0;
	overflow: hidden;
	display: flex;
	align-items: center;
	gap: 0.125rem;
	flex: 1;
	min-width: 0;
	height: 1.25rem;
}

.sa-chat__wave span {
	flex: 1;
	min-width: 0.125rem;
	height: 30%;
	background-color: rgba(30, 27, 24, 0.25);
	border-radius: var(--sa-radius-full);
}

/* Alturas irregulares con :nth-child: ni imagen, ni catorce clases. */
.sa-chat__wave span:nth-child(2n) {
	height: 55%;
}

.sa-chat__wave span:nth-child(3n) {
	height: 85%;
}

.sa-chat__wave span:nth-child(5n) {
	height: 45%;
}

.sa-chat__wave span:nth-child(7n) {
	height: 100%;
}

.sa-chat__duration {
	flex-shrink: 0;
	color: var(--sa-on-surface-variant);
	font-size: var(--sa-fs-xs);
	font-variant-numeric: tabular-nums;
}

.sa-chat__meta {
	margin: 0;
	color: var(--sa-on-surface-variant);
	font-size: var(--sa-fs-xs);
}

/* La transcripción sí es texto real: es donde está el argumento. */
.sa-chat__caption {
	width: 100%;
	margin: 0;
	color: var(--sa-on-surface-variant);
	font-size: var(--sa-fs-sm);
	font-style: italic;
	line-height: var(--sa-lh-relaxed);
	text-align: start;
}

.sa-chat__caption strong {
	color: var(--sa-on-surface);
}

/*
 * La respuesta entera solo cabe cómoda en pantalla ancha; en móvil el mockup
 * se comería la sección. Móvil primero: se ve la corta y la larga aparece a
 * partir de 640px.
 */
.sa-chat__caption--full {
	display: none;
}

@media (min-width: 640px) {
	.sa-chat__caption--full {
		display: block;
	}

	.sa-chat__caption--short {
		display: none;
	}
}