/* ==========================================================================
   SpanishAura — Portada
   Solo lo específico de la home. Lo compartido vive en components.css.
   ========================================================================== */

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

.sa-home-hero {
	padding-block-start: 1.5rem;
}

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

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

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

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

.sa-home-hero__content .sa-lead {
	margin-inline: auto;
	font-weight: 300;
}

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

/* Los cuatro datos que deciden si el curso encaja, sin hacer scroll. */
.sa-home-hero__chips {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.sa-home-hero__media {
	position: relative;
	flex: 1;
	width: 100%;
	max-width: 24rem;
	margin-inline: auto;
}

/* Pull-quote: inline bajo la foto en móvil, flotante a partir de lg. */
.sa-home-hero__quote {
	margin-block-start: 1rem;
	padding: 1rem;
	background-color: var(--sa-secondary-container);
	border-radius: var(--sa-radius-card);
	box-shadow: var(--sa-shadow-md);
	color: var(--sa-on-secondary-container);
	font-family: var(--sa-font-serif);
	font-size: var(--sa-fs-sm);
	font-style: italic;
	text-align: center;
}

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

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

	.sa-home-hero__inner {
		flex-direction: row;
		gap: 3rem;
	}

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

	.sa-home-hero__content .sa-lead {
		margin-inline: 0;
	}

	.sa-home-hero__actions {
		justify-content: flex-start;
	}

	.sa-home-hero__chips {
		justify-content: flex-start;
	}

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

@media (min-width: 1024px) {
	.sa-home-hero__inner {
		gap: 6rem;
	}

	.sa-home-hero__quote {
		position: absolute;
		inset-block-end: -2rem;
		inset-inline-start: -2rem;
		max-width: 12.5rem;
		margin: 0;
		box-shadow: var(--sa-shadow-xl);
		text-align: start;
	}
}

/* --- Sección del problema -------------------------------------------------- */

.sa-home-problem__intro {
	max-width: var(--sa-w-3xl);
	margin-inline: auto;
	color: var(--sa-on-surface-variant);
	line-height: var(--sa-lh-relaxed);
}

.sa-objections {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1rem;
	margin: 0;
	padding: 0;
	list-style: none;
	text-align: start;
}

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

/*
 * Caja, no píldora. Con seis objeciones cortas la píldora funcionaba; las
 * cuatro nuevas ocupan dos líneas y el radio completo dejaba el texto
 * flotando dentro de una cápsula deformada.
 */
.sa-objection {
	display: flex;
	align-items: flex-start;
	gap: 0.75rem;
	padding: 1rem;
	background-color: var(--sa-surface-container-lowest);
	border-radius: var(--sa-radius);
	font-size: var(--sa-fs-body);
	font-weight: 500;
	line-height: var(--sa-lh-relaxed);
}

/*
 * La respuesta, dentro de la tarjeta y debajo de su pregunta. En terracota y
 * semibold para que se distinga de la cita a simple vista: son dos voces
 * distintas en la misma caja —lo que piensa la lectora y lo que contesta
 * Aurora— y sin contraste se leen como un solo párrafo.
 *
 * La de la cuarta hace además de bisagra hacia la sección del método.
 */
.sa-objection__quote {
	margin: 0;
}

.sa-objection__answer {
	margin-block-start: 0.5rem;
	margin-block-end: 0;
	color: var(--sa-primary);
	font-weight: 600;
}

.sa-objection__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	padding: 0.5rem;
	background-color: rgba(160, 59, 37, 0.1);
	border-radius: var(--sa-radius-full);
	color: var(--sa-primary);
}

/*
 * Los cuatro momentos de la semana. Pasaron de tres a cuatro al entrar los
 * ejercicios corregidos a mano, y con cuatro la rejilla es 2×2 en cuanto hay
 * sitio: cuatro en fila salen estrechísimas y tres arriba + una huérfana
 * abajo es justo el desequilibrio que se arregló en su día.
 *
 * Las dos columnas las pone .sa-grid--2, que ya lo hace de 640px hacia
 * arriba y no sube a tres. Con eso desaparece solo el parche de la banda
 * 640-1023: la tarjeta huérfana la producía un número impar de tarjetas.
 *
 * Las alturas las iguala la propia rejilla; el stretch y el height: 100% solo
 * lo dejan escrito y a prueba de que alguien cambie el contenedor.
 */
.sa-week-grid {
	align-items: stretch;
}

.sa-week-grid .sa-card {
	height: 100%;
}

/*
 * Cierre en cursiva de una sección. Lo comparten los dolores y los tres
 * momentos de la semana: en los dos casos es una frase que remata el bloque y
 * encadena con el siguiente, y conviene que suenen igual.
 */
.sa-closing-line {
	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;
}

/* --- Lo que no hace nadie más (WhatsApp) ------------------------------------ */

.sa-wa {
	display: grid;
	grid-template-columns: 1fr;
	align-items: center;
	gap: 2.5rem;
}

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

/*
 * Separación entre las cuatro tarjetas y el bloque de la nota de voz: van en
 * la misma sección —cuentan lo mismo, cómo es una semana— y necesitan aire
 * entre ellos sin que parezcan dos secciones distintas. Menos que el
 * padding de sección, que es justo lo que los separaría.
 *
 * Aquí vivía .sa-section--wa, que le quitaba aire por arriba a la sección
 * cuando el mockup era lo primero que se veía. Ahora tiene las tarjetas
 * encima y ese recorte ya no hace falta.
 */
.sa-method__split {
	margin-block-start: 3.5rem;
}

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

	.sa-method__split {
		margin-block-start: 4.5rem;
	}

	.sa-wa .sa-chat {
		max-width: 30rem;
	}
}

/*
 * El mockup en sí (.sa-chat*) vive en components.css: lo usan la portada y
 * /course/, y solo se carga una hoja de pages/ por plantilla (trampa 24).
 * Aquí queda únicamente el ancho que le da la portada, justo arriba.
 */

/* --- Sobre Aurora ---------------------------------------------------------- */

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

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

.sa-home-about__content {
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
	flex: 1;
}

.sa-prose {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	color: var(--sa-on-surface-variant);
	line-height: var(--sa-lh-relaxed);
}

.sa-prose p {
	margin: 0;
}

/* El cuerpo va en gris: la negrita necesita el color plano para destacar. */
.sa-prose strong {
	color: var(--sa-on-surface);
}

.sa-quote-inline--lg {
	margin: 0;
	font-size: 1.25rem;
}

@media (min-width: 768px) {
	.sa-home-about {
		flex-direction: row;
		gap: 3rem;
	}

	.sa-home-about__media {
		max-width: none;
	}
}

/* --- Tarjeta del curso ------------------------------------------------------ */

.sa-course-card {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	background-color: var(--sa-surface-container-lowest);
	border-radius: var(--sa-radius-card);
	box-shadow: var(--sa-shadow-xl);
}

/* Ilustración: conversación que progresa del módulo 1 al 12. CSS puro, sin
   imagen — así no depende de fotos pendientes ni pesa nada.

   El panel va en terracota de marca, no en crema. Antes era un degradado
   #fbf2ed → #efe6e2 dentro de una tarjeta blanca sobre una sección crema, con
   las burbujas del mismo blanco que la tarjeta: cuatro tonos del mismo color
   apilados, sin contraste en ninguna capa, así que la ilustración se leía como
   más texto de la web en vez de como un objeto aparte. Invertido, se recorta
   sola contra la tarjeta. */
.sa-course-card__art {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 1.375rem;
	overflow: hidden;
	min-height: 12rem;
	padding: 2.5rem 1.5rem 3.5rem;
	background-image: linear-gradient(135deg, #8f3220 0%, #a03b25 60%, #ab4229 100%);
}

.sa-course-card__step {
	display: flex;
	flex-direction: column;
	gap: 0.3125rem;
	align-items: flex-start;
	max-width: 85%;
	margin: 0;
}

/* La del medio va a la derecha: sugiere ida y vuelta, no monólogo. */
.sa-course-card__step--right {
	align-self: flex-end;
	align-items: flex-end;
}

/* Sobre terracota, el gris de antes no se leía. Blanco rebajado: se distingue
   de la burbuja sin competir con ella. El 0.85 no es estético, es el mínimo
   que mantiene 4.5:1 contra el extremo más claro del panel —por debajo, esta
   línea y la traducción se quedaban sobre 3.3:1. */
.sa-course-card__week {
	color: rgba(255, 255, 255, 0.85);
	font-size: var(--sa-fs-xs);
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.sa-course-card__bubble {
	padding: 0.5rem 0.9375rem;
	background-color: var(--sa-surface-container-lowest);
	border-radius: var(--sa-radius-full);
	box-shadow: var(--sa-shadow-sm);
	color: var(--sa-on-surface);
	font-size: var(--sa-fs-sm);
}

/* La última frase en amarillo: es el «ya hablas» del curso, y con el panel en
   terracota el gradiente de marca que llevaba antes desaparecería contra el
   fondo. El amarillo es el otro color del sistema y aquí hace de destino. */
.sa-course-card__bubble--final {
	background-color: var(--sa-secondary-container);
	color: var(--sa-on-secondary-container);
	font-weight: 600;
}

/* Traducción al inglés bajo cada frase. La página es para quien empieza de
   cero: sin ella, «el finde fui a Granada y me encantó» no significa nada
   para justo el público al que se le enseña. */
.sa-course-card__gloss {
	padding-inline: 0.9375rem;
	color: rgba(255, 255, 255, 0.85);
	font-size: var(--sa-fs-xs);
	font-style: italic;
	line-height: 1.35;
}

/* La franja llevaba el gradiente de marca, que ahora es el fondo del panel: se
   invierte a crema sobre terracota para que siga separándose. */
.sa-course-card__strip {
	position: absolute;
	inset-block-end: 0;
	inset-inline: 0;
	padding: 0.625rem 1.25rem;
	background-color: rgba(30, 27, 24, 0.28);
	color: var(--sa-on-primary);
	font-size: var(--sa-fs-xs);
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.sa-course-card__body {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	padding: 1.5rem;
}

.sa-course-card__body h3 {
	margin: 0;
	font-size: var(--sa-fs-h2);
}

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

.sa-course-card__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 0.375rem;
}

/* Chips compactos para que los cinco quepan en una sola línea en escritorio. */
.sa-course-card__chips .sa-chip {
	padding-inline: 0.5rem;
}

@media (min-width: 1024px) {
	.sa-course-card {
		flex-direction: row;
	}

	.sa-course-card__art,
	.sa-course-card__body {
		width: 50%;
	}

	.sa-course-card__art {
		min-height: 16rem;
	}

	.sa-course-card__body {
		justify-content: center;
		padding: 2rem;
	}
}

/*
 * `.sa-section--tight` vivía aquí y se mudó a components.css el 28/08. La
 * portada ya no la usa —se fue con el bloque «antes y después»—, pero
 * page-course.php y single.php sí, y esas dos plantillas no cargan esta hoja
 * (trampa 24), así que allí la clase no hacía nada.
 */

/* --- Ajustes de sección compartidos ------------------------------------------ */

.sa-eyebrow--accent {
	color: var(--sa-secondary);
}