/* ==========================================================================
   SpanishAura — Página de venta del curso
   Solo lo específico de esta página: hero, bloque de precio, garantía y café.
   Lo compartido vive en components.css.
   ========================================================================== */

/* --- Hero ---------------------------------------------------------------- */

.sa-cursos-hero {
	padding-block-start: 2rem;
}

.sa-cursos-hero__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2rem;
}

.sa-cursos-hero__content {
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
	flex: 1;
	text-align: center;
}

.sa-cursos-hero__content h1 {
	margin: 0;
}

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

.sa-cursos-hero__content p,
.sa-cursos-hero__content ul {
	margin-inline: auto;
}

.sa-cursos-hero__content .sa-arrow-list {
	max-width: 28rem;
	text-align: start;
}

.sa-cursos-hero__media {
	flex: 1;
	width: 100%;
	max-width: 20rem;
	margin-inline: auto;
}

@media (min-width: 768px) {
	.sa-cursos-hero {
		padding-block-start: 3.5rem;
	}

	.sa-cursos-hero__inner {
		flex-direction: row;
		gap: 4rem;
	}

	.sa-cursos-hero__content {
		text-align: start;
	}

	.sa-cursos-hero__content p,
	.sa-cursos-hero__content ul {
		margin-inline: 0;
	}

	.sa-cursos-hero__media {
		max-width: none;
	}
}

/* Los bullets con icono del hero y .sa-card__icon se mudaron a
   components.css el 28/08: /classes/ los usa también (trampa 24). */

/* ---------------------------------------------------------------------------
   Gancho emocional

   Ancho de lectura corto. El H2 va centrado y el recorrido de tres tiempos,
   alineado a la izquierda: son frases de largos muy distintos y centradas
   quedaban como un poema.
   --------------------------------------------------------------------------- */

.sa-hook {
	max-width: var(--sa-w-3xl);
	text-align: center;
}

.sa-hook h2 {
	margin-block-end: 1.5rem;
}

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

/*
 * EL RECORRIDO EN TRES TIEMPOS: lo que probaste → la realidad → la verdad.
 *
 * Cuarta forma que tiene este bloque, y las tres anteriores se rechazaron por
 * lo mismo, la estética: prosa suelta («bloque macizo que no invita a ser
 * leído»), cuatro fichas en rejilla 2×2 («cajas vacías» —el tinte quedaba casi
 * del color del fondo y la ficha corta dejaba media caja en blanco—) y un panel
 * único con iconos.
 *
 * La clave no era el color ni el espaciado: el bloque cuenta UN RECORRIDO, y
 * hasta ahora la forma no lo contaba. Tres tarjetas y un hilo sí.
 *
 * EL PUNTO MONTA SOBRE EL BORDE IZQUIERDO, NO VIVE DENTRO. Con el punto
 * dentro, el hilo tiene que pasar por detrás de las tarjetas y el recorrido
 * solo asoma en los huecos — justo lo que la caja venía a arreglar. Fuera, la
 * caja y el hilo dejan de estorbarse y el texto empieza más a la izquierda.
 */
.sa-hook__path {
	position: relative;
	display: grid;
	gap: 1rem;
	margin-block-start: 2rem;
	margin-inline-start: 1.125rem;
	text-align: start;
}

/*
 * El hilo. Empieza y acaba dentro del primer y del último punto, no en el
 * borde de las tarjetas: así no sobresale por arriba ni por abajo.
 */
.sa-hook__path::before {
	content: "";
	position: absolute;
	inset-block: 2.75rem;
	inset-inline-start: -1.125rem;
	width: 2px;
	background-color: #ddd2cb;
}

.sa-hook__step {
	position: relative;
	padding: 1.5rem 1.75rem 1.5rem 2.5rem;
	background-color: var(--sa-surface-container-lowest);
	border-radius: var(--sa-radius-card);
	box-shadow: var(--sa-shadow);
}

/*
 * El anillo del color de la sección tapa el hilo por detrás del punto. Si
 * algún día esta sección gana fondo propio, hay que cambiarlo aquí también.
 */
.sa-hook__dot {
	position: absolute;
	inset-block-start: 1.5rem;
	inset-inline-start: -1.125rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.25rem;
	height: 2.25rem;
	border-radius: var(--sa-radius-full);
	box-shadow: 0 0 0 5px var(--sa-surface);
}

.sa-hook__step--tried .sa-hook__dot {
	background-color: var(--sa-surface-container);
	color: var(--sa-on-surface-variant);
}

/* Amarillo: es el único aviso de la sección. */
.sa-hook__step--wall .sa-hook__dot {
	background-color: var(--sa-secondary-container);
	color: var(--sa-on-secondary-container);
}

/* Terracota de marca: el único de los tres que resuelve. */
.sa-hook__step--truth .sa-hook__dot {
	background-image: var(--sa-grad-primary);
	color: var(--sa-on-primary);
}

.sa-hook__eyebrow {
	margin: 0.25rem 0 0.75rem !important;
	color: var(--sa-secondary);
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

/*
 * Cuerpo, no lead: .sa-hook p sube el tamaño para la versión en prosa que
 * hubo aquí, y dentro de las tarjetas queda demasiado grande.
 */
.sa-hook__step p {
	margin: 0;
	font-size: var(--sa-fs-body);
}

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

.sa-hook__list {
	display: grid;
	gap: 0.625rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.sa-hook__list li {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	color: var(--sa-on-surface-variant);
	line-height: var(--sa-lh-relaxed);
}

/* La cruz marca lo que no funcionó, en gris: no es un error, es un intento. */
.sa-hook__list .sa-icon {
	flex-shrink: 0;
	color: var(--sa-outline);
}

.sa-hook__close {
	margin-block-start: 0.75rem !important;
	color: var(--sa-on-surface) !important;
	font-family: var(--sa-font-serif);
	font-size: var(--sa-fs-lead) !important;
	font-style: italic;
	font-weight: 700;
}

/* ---------------------------------------------------------------------------
   Los 12 módulos — timeline

   Una sola columna con la línea conectando: el recorrido se ve de un vistazo,
   que es lo que doce tarjetas en rejilla no conseguían. La línea es un
   pseudoelemento sobre la columna del número, no un borde de la fila, para que
   arranque y termine dentro de la lista.
   --------------------------------------------------------------------------- */

.sa-timeline {
	display: flex;
	flex-direction: column;
	gap: 1.75rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.sa-timeline__item {
	position: relative;
	display: grid;
	grid-template-columns: 2.25rem 1fr;
	gap: 1rem;
	align-items: start;
}

/* El tramo de línea lo pinta cada fila menos la última, así no sobra rabo. */
.sa-timeline__item:not(:last-child)::before {
	content: '';
	position: absolute;
	inset-block-start: 2.75rem;
	inset-inline-start: 1.09375rem;
	width: 1px;
	height: calc(100% + 1.75rem - 2.75rem);
	background-color: var(--sa-outline-variant);
}

.sa-timeline__num {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.25rem;
	height: 2.25rem;
	background-color: var(--sa-surface-container);
	border-radius: var(--sa-radius-full);
	color: var(--sa-primary);
	font-family: var(--sa-font-serif);
	font-size: var(--sa-fs-sm);
	font-weight: 700;
}

.sa-timeline__body > * {
	margin: 0;
}

.sa-timeline__title {
	color: var(--sa-on-surface-variant);
	font-family: var(--sa-font-body);
	font-size: var(--sa-fs-xs);
	font-weight: 700;
	letter-spacing: var(--sa-tracking-label);
	text-transform: uppercase;
}

/*
 * La protagonista de cada fila: es lo que se compra —«esto es lo que vas a
 * poder decir»—, así que va en serif, cursiva, terracota y por encima del
 * tamaño de cuerpo. La gramática, en cambio, se lee solo si te interesa.
 */
.sa-timeline__phrase {
	margin-block: 0.375rem !important;
	color: var(--sa-primary);
	font-family: var(--sa-font-serif);
	font-size: clamp(1.0625rem, 1rem + 0.5vw, 1.375rem);
	font-style: italic;
	line-height: var(--sa-lh-tight);
}

.sa-timeline__text {
	color: var(--sa-on-surface-variant);
	font-size: var(--sa-fs-body);
	line-height: var(--sa-lh-relaxed);
}

.sa-timeline__grammar {
	margin-block-start: 0.625rem !important;
	color: var(--sa-outline);
	font-size: var(--sa-fs-xs);
}

/*
 * Etiqueta de la línea de contenidos. En bloque y en versalitas: sin ella la
 * línea aparecía suelta debajo del párrafo y no se entendía que fueran los
 * contenidos formales del módulo.
 */
.sa-timeline__grammar-label {
	display: block;
	margin-block-end: 0.125rem;
	color: var(--sa-secondary);
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

@media (min-width: 768px) {
	.sa-timeline {
		gap: 2.25rem;
	}

	.sa-timeline__item {
		grid-template-columns: 2.75rem 1fr;
		gap: 1.75rem;
	}

	.sa-timeline__item:not(:last-child)::before {
		inset-inline-start: 1.34375rem;
		inset-block-start: 3.25rem;
		height: calc(100% + 2.25rem - 3.25rem);
	}

	.sa-timeline__num {
		width: 2.75rem;
		height: 2.75rem;
		font-size: var(--sa-fs-body);
	}
}

/* ---------------------------------------------------------------------------
   Cita destacada

   Una reseña sola, sin tarjeta ni sombra: después de doce módulos de promesas,
   alguien que ya lo ha hecho. Sin caja porque el carrusel de más abajo ya usa
   tarjetas y aquí la voz tiene que sonar distinta.
   --------------------------------------------------------------------------- */

.sa-pullquote {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.75rem;
	margin: 0;
	text-align: center;
}

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

.sa-pullquote__quote {
	margin: 0;
	padding: 0;
	border: none;
}

.sa-pullquote__quote p {
	margin: 0;
	font-family: var(--sa-font-serif);
	font-size: clamp(1.125rem, 1rem + 1vw, 1.625rem);
	font-style: italic;
	line-height: var(--sa-lh-relaxed);
	text-wrap: balance;
}

.sa-pullquote__author {
	color: var(--sa-on-surface-variant);
	font-size: var(--sa-fs-sm);
	font-weight: 700;
}

/* ---------------------------------------------------------------------------
   Cómo es una semana

   Bloques anchos con la cifra suelta y grande. Ritmo deliberadamente distinto
   al timeline: sin línea, sin círculo y con el número como elemento gráfico,
   para que dos listas numeradas seguidas no se lean como la misma sección.
   --------------------------------------------------------------------------- */

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

/*
 * min-width: 0 porque los items de una rejilla no bajan de su ancho mínimo de
 * contenido: el paso 3 lleva el mockup del chat dentro y en pantallas muy
 * estrechas empujaba la columna más allá del contenedor, con scroll lateral.
 */
.sa-week-step {
	min-width: 0;
	padding: 1.5rem;
	background-color: var(--sa-surface-container-lowest);
	border-radius: var(--sa-radius-card);
}

/*
 * Cifra e icono en la misma línea, alineados por la base de la cifra. El icono
 * repite el símbolo que esa misma cosa lleva en «Everything you need».
 */
.sa-week-step__head {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin: 0 0 0.25rem;
}

.sa-week-step__num {
	color: var(--sa-primary-container);
	font-family: var(--sa-font-serif);
	font-size: 2.5rem;
	font-weight: 700;
	line-height: 1;
	opacity: 0.55;
}

.sa-week-step__icon {
	color: var(--sa-primary);
}

.sa-week-step__title {
	margin: 0 0 0.5rem;
}

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

.sa-week-close {
	max-width: var(--sa-w-3xl);
	margin: 0 auto;
	font-size: var(--sa-fs-lead);
	font-style: italic;
	font-weight: 700;
	line-height: var(--sa-lh-relaxed);
	text-wrap: balance;
}

/*
 * El mockup del chat, dentro del paso 3. En móvil cae debajo del texto y ya
 * viene centrado y con su ancho máximo desde components.css, así que aquí solo
 * necesita aire por arriba.
 */
.sa-week-step__media {
	margin-block-start: 1.5rem;
}

@media (min-width: 768px) {
	.sa-week-steps {
		grid-template-columns: repeat(2, 1fr);
		gap: 1.5rem;
	}

	.sa-week-step {
		padding: 2rem;
	}

	/*
	 * Los pasos 3 y 4 ocupan las dos columnas. El 3 porque lleva el mockup y
	 * en media columna lo aplastaría; el 4 porque solo, a media anchura,
	 * quedaría huérfano al lado de un hueco.
	 *
	 * De paso el peso visual sube hasta el 3 —la nota de voz contestada, que
	 * es lo que no hace nadie— y remata en el 4, que es la recompensa.
	 */
	.sa-week-step--wide {
		grid-column: 1 / -1;
	}
}

/*
 * El texto y el chat, uno al lado del otro. A 1024px y no a 768: el mockup
 * mide 416px fijos, así que en la banda de 768-1023 el texto se quedaba en
 * unos 200px —cuatro palabras por línea— mientras el chat se llevaba el doble
 * de sitio. Ahí abajo el paso sigue ocupando el ancho entero y el chat cae
 * debajo del texto, que es lo que hace en móvil.
 */
@media (min-width: 1024px) {
	.sa-week-step--split {
		display: grid;
		grid-template-columns: 1fr auto;
		align-items: center;
		gap: 2.5rem;
	}

	.sa-week-step--split .sa-week-step__media {
		margin-block-start: 0;
	}
}

/* ---------------------------------------------------------------------------
   Qué incluye — lista compacta

   Sin tarjetas ni sombras: es un inventario, y siete cajas pesaban más que lo
   que dicen. Tercer ritmo de la página, después del timeline y de los bloques
   de la semana.
   --------------------------------------------------------------------------- */

.sa-includes {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.25rem 2.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

/*
 * Cada línea sobre su propia superficie, sin sombra ni borde. Como lista
 * pelada eran siete filas grises seguidas y la sección quedaba plana; como
 * tarjetas de verdad —que es lo que fue hasta julio— pesaban demasiado, y
 * además caen justo antes de los cuatro bonuses, que ya son cajas.
 */
.sa-includes__item {
	display: flex;
	align-items: flex-start;
	gap: 1rem;
	padding: 1.125rem 1.25rem;
	background-color: var(--sa-surface-container-lowest);
	border-radius: var(--sa-radius);
}

/*
 * El icono, en círculo terracota tenue: es el mismo tratamiento que llevan los
 * iconos de las objeciones de la portada, y sin él el icono se perdía dentro
 * de la caja nueva.
 */
.sa-includes__icon {
	flex-shrink: 0;
	box-sizing: content-box;
	padding: 0.5rem;
	background-color: rgba(160, 59, 37, 0.1);
	border-radius: var(--sa-radius-full);
	color: var(--sa-primary);
}

.sa-includes__title {
	margin: 0 0 0.25rem;
}

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

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

/* ---------------------------------------------------------------------------
   Comparativa

   Móvil primero, y sin scroll horizontal: hasta 900px la tabla se despliega en
   bloques —un concepto por bloque, y dentro las cuatro alternativas con su
   etiqueta— usando el atributo data-label de cada celda. Una tabla de cinco
   columnas en 390px solo se puede leer con zoom o arrastrando, y las dos cosas
   hacen que no se lea.

   A partir de 900px vuelve a ser tabla de verdad. La columna del curso lleva
   superficie propia en las dos formas: es la respuesta, no una opción más.
   --------------------------------------------------------------------------- */

.sa-compare__table {
	width: 100%;
	margin: 0;
	border-collapse: collapse;
}

.sa-compare__mark {
	font-size: 1.125rem;
	line-height: 1;
}

.sa-compare__cell--yes .sa-compare__mark {
	color: var(--sa-primary);
}

/* El «no» no debe gritar: es información, no un reproche a lo que ya probaste. */
.sa-compare__cell--no .sa-compare__mark {
	color: var(--sa-outline-variant);
}

.sa-compare__cell--partial .sa-compare__mark {
	color: var(--sa-outline);
}

/* --- Hasta 900px: bloques ------------------------------------------------- */

@media (max-width: 899.98px) {
	.sa-compare__table,
	.sa-compare__table tbody,
	.sa-compare__table tr,
	.sa-compare__table td,
	.sa-compare__table th {
		display: block;
	}

	/* La fila de cabeceras sobra: cada celda lleva su etiqueta. */
	.sa-compare__table thead {
		display: none;
	}

	.sa-compare__table tbody tr {
		margin-block-end: 1rem;
		padding: 1.25rem;
		background-color: var(--sa-surface-container-lowest);
		border-radius: var(--sa-radius-card);
	}

	.sa-compare__table tbody tr:last-child {
		margin-block-end: 0;
	}

	.sa-compare__table tbody th[scope='row'] {
		margin-block-end: 0.75rem;
		font-size: var(--sa-fs-body);
		font-weight: 700;
		text-align: start;
	}

	/* Con la etiqueta a un lado y el símbolo al otro se lee de un vistazo. El
	   selector lleva el td porque la regla de bloque de arriba, con td, gana a
	   una clase suelta. */
	.sa-compare__table td.sa-compare__cell {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 1rem;
		padding-block: 0.375rem;
		color: var(--sa-on-surface-variant);
		font-size: var(--sa-fs-sm);
	}

	.sa-compare__cell::before {
		content: attr(data-label);
	}

	.sa-compare__table td.sa-compare__cell.is-featured {
		margin-block-start: 0.375rem;
		padding: 0.5rem 0.75rem;
		background-color: rgba(160, 59, 37, 0.08);
		border-radius: var(--sa-radius-sm);
		color: var(--sa-on-surface);
		font-weight: 700;
	}
}

/* --- Desde 900px: tabla --------------------------------------------------- */

@media (min-width: 900px) {
	.sa-compare__table th,
	.sa-compare__table td {
		padding: 0.875rem 1rem;
		text-align: center;
		vertical-align: middle;
	}

	.sa-compare__table thead th {
		color: var(--sa-on-surface-variant);
		font-size: var(--sa-fs-xs);
		font-weight: 700;
		letter-spacing: var(--sa-tracking-label);
		text-transform: uppercase;
	}

	.sa-compare__table tbody th[scope='row'] {
		width: 40%;
		color: var(--sa-on-surface);
		font-size: var(--sa-fs-sm);
		font-weight: 400;
		text-align: start;
	}

	/*
	 * Separación por superficie y no por bordes de 1px, que es la regla del
	 * sistema: las filas alternan fondo y la columna del curso va tintada de
	 * arriba abajo, con las esquinas redondeadas en la primera y la última.
	 */
	.sa-compare__table tbody tr:nth-child(odd) th[scope='row'],
	.sa-compare__table tbody tr:nth-child(odd) td {
		background-color: var(--sa-surface-container-lowest);
	}

	.sa-compare__table .is-featured {
		background-color: rgba(160, 59, 37, 0.08) !important;
	}

	.sa-compare__table thead .is-featured {
		color: var(--sa-primary);
		border-start-start-radius: var(--sa-radius);
		border-start-end-radius: var(--sa-radius);
	}

	.sa-compare__table tbody tr:last-child .is-featured {
		border-end-start-radius: var(--sa-radius);
		border-end-end-radius: var(--sa-radius);
		font-weight: 700;
	}

	.sa-compare__table tbody tr:last-child th[scope='row'],
	.sa-compare__table tbody tr:last-child td {
		font-weight: 700;
	}
}

/* --- Precio y garantía ---------------------------------------------------- */

.sa-pricing {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.5rem;
	align-items: start;
}

@media (min-width: 768px) {
	.sa-pricing {
		grid-template-columns: minmax(0, 22rem) 1fr;
	}
}

.sa-pricing__card {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 1rem;
	padding: 1.75rem 1.5rem 1.5rem;
	background-color: var(--sa-primary);
	border-radius: var(--sa-radius-card);
	color: var(--sa-on-primary);
}

.sa-pricing__badge {
	position: absolute;
	inset-block-start: -0.75rem;
	inset-inline-start: 1.25rem;
	padding: 0.25rem 0.75rem;
	background-color: var(--sa-secondary-container);
	border-radius: var(--sa-radius-full);
	color: var(--sa-on-secondary-container);
	font-size: var(--sa-fs-xs);
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.sa-pricing__label {
	margin: 0;
	font-size: var(--sa-fs-xs);
	font-weight: 700;
	letter-spacing: var(--sa-tracking-label);
	text-transform: uppercase;
	opacity: 0.7;
}

/* El precio lo pinta WooCommerce: hay que teñir su marcado, incluido el
   tachado del precio regular. */
.sa-pricing__price {
	margin: 0;
	font-family: var(--sa-font-serif);
	font-size: var(--sa-fs-price);
	font-weight: 700;
	line-height: 1.1;
}

.sa-pricing__price .amount,
.sa-pricing__price .woocommerce-Price-amount,
.sa-pricing__price ins {
	color: var(--sa-on-primary);
	text-decoration: none;
}

.sa-pricing__price del {
	display: block;
	margin-block-start: 0.25rem;
	font-size: 0.875rem;
	font-weight: 400;
	opacity: 0.55;
}

.sa-pricing__price del .amount {
	color: var(--sa-on-primary);
}

.sa-pricing__list {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.sa-pricing__list li {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-size: var(--sa-fs-sm);
}

.sa-pricing__list .sa-icon {
	color: var(--sa-secondary-container);
}

.sa-pricing__note {
	margin: 0;
	font-size: var(--sa-fs-xs);
	opacity: 0.8;
}

.sa-btn--block {
	display: flex;
	width: 100%;
}

.sa-guarantee {
	display: flex;
	align-items: flex-start;
	gap: 1rem;
	padding: 1.5rem;
	background-color: var(--sa-surface-container-low);
	border-radius: var(--sa-radius-card);
}

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


.sa-guarantee h3 {
	margin: 0 0 0.375rem;
	color: var(--sa-primary);
}

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

/* ---------------------------------------------------------------------------
   Café virtual, en franja

   Era una caja con foto y H2 propio, y competía con el cierre que viene justo
   después. Es la salida para quien duda, no el remate: pesa lo que pesa una
   nota al margen.
   --------------------------------------------------------------------------- */

.sa-coffee-strip {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.75rem;
	padding: 1.25rem 1.5rem;
	background-color: var(--sa-surface-container-low);
	border-radius: var(--sa-radius-card);
}

.sa-coffee-strip__icon {
	flex-shrink: 0;
	color: var(--sa-primary);
}

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

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

.sa-coffee-strip__link {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	flex-shrink: 0;
	color: var(--sa-primary);
	font-size: var(--sa-fs-sm);
	font-weight: 700;
	text-decoration: none;
	white-space: nowrap;
}

.sa-coffee-strip__link:hover,
.sa-coffee-strip__link:focus {
	color: var(--sa-primary);
	text-decoration: underline;
}

@media (min-width: 768px) {
	.sa-coffee-strip {
		flex-direction: row;
		align-items: center;
		gap: 1.25rem;
	}
}

/* ---------------------------------------------------------------------------
   ¿Es para mí? — las dos listas enfrentadas
   --------------------------------------------------------------------------- */

.sa-fit {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1rem;
	align-items: start;
}

.sa-fit__card {
	padding: 2rem;
	border-radius: var(--sa-radius-card);
}

.sa-fit__card h3 {
	margin: 0 0 1.25rem;
}

/*
 * Cada tarjeta con su superficie: es como el sistema separa bloques, en vez de
 * bordes de 1px. La del «sí» sube sobre el fondo de la sección; la del «no»
 * baja, que es exactamente la jerarquía que queremos.
 */
.sa-fit__card--yes {
	background-color: var(--sa-surface);
}

.sa-fit__card--yes h3 {
	color: var(--sa-primary);
}

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

.sa-fit__card--no h3 {
	color: var(--sa-on-surface-variant);
}

@media (min-width: 900px) {
	.sa-fit {
		/*
		 * Asimétrica a propósito: la lista del «sí» tiene 6 líneas y es la que
		 * vende; la del «no» tiene 3 y solo cualifica. A 1fr/1fr la segunda
		 * quedaba con un hueco muerto debajo.
		 */
		grid-template-columns: 1.35fr 1fr;
		gap: 1.5rem;
	}
}

/* ---------------------------------------------------------------------------
   Quién te enseña
   --------------------------------------------------------------------------- */

.sa-teacher {
	display: grid;
	grid-template-columns: 1fr;
	gap: 2rem;
	justify-items: center;
	text-align: center;
}

.sa-teacher__media {
	width: min(220px, 60vw);
}

/*
 * Aire entre las piezas del bloque.
 *
 * OJO CON LA ESPECIFICIDAD: esto era `> * + *` y NO APLICABA A LOS PÁRRAFOS.
 * `.sa-teacher__body p { margin: 0 }`, aquí abajo, es (0,1,1) y ganaba a
 * `.sa-teacher__body > * + *`, que es (0,1,0) —el universal no suma—. O sea que
 * los párrafos iban pegados sin que lo pareciera al leer el CSS, y de ahí que
 * la sección se viera apelmazada.
 *
 * `:not(:first-child)` sube a (0,2,0) y sí gana. No cambiar por `> * + *`.
 */
.sa-teacher__body > :not(:first-child) {
	margin-block-start: 1.5rem;
}

/* El eyebrow pertenece al titular: pegado a él, no separado de él. */
.sa-teacher__body .sa-eyebrow + h2 {
	margin-block-start: 0.5rem;
}

/* La cita respira más que un párrafo: es el remate de la historia. */
.sa-teacher__body > .sa-quote-inline {
	margin-block-start: 2rem;
}

/* El botón cierra el bloque y necesita más aire que un párrafo cualquiera. */
.sa-teacher__body > p:last-child {
	margin-block-start: 2.25rem;
}

.sa-teacher__body h2 {
	margin: 0;
}

.sa-teacher__body p {
	margin: 0;
	line-height: var(--sa-lh-relaxed);
}

@media (min-width: 768px) {
	.sa-teacher {
		grid-template-columns: auto 1fr;
		gap: 3rem;
		align-items: center;
		justify-items: start;
		text-align: start;
	}

	.sa-teacher__media {
		width: 240px;
	}
}