/* ==========================================================================
   60 · PORTADA
   --------------------------------------------------------------------------
   Solo lo que NO existe ya en el catálogo. Las secciones de la portada se
   montan con .section, .container, .grid, .card, .stat, .accordion, .btn, .orb,
   .gradient-text y el hero; aquí abajo quedan únicamente unos ajustes de
   colocación para piezas que ya existen.

   El hero vivía aquí hasta la sesión 6. Al necesitarlo también la landing se
   mudó a 40-components.css, en lugar de escribir una segunda versión.

   Si al tocar esta portada te encuentras escribiendo una tarjeta, un botón o
   un badge nuevos, para: es señal de que hay que ampliar 40-components.css y
   enseñarlo en el kit, no de que la portada necesite los suyos (invariante 8).

   Se carga solo en is_front_page(), vía p2080_ctx_home() en inc/assets.php.
   ========================================================================== */

/* ==========================================================================
   COLOCACIÓN DE PIEZAS EXISTENTES
   Ninguna de estas reglas define un componente: todas mueven de sitio algo
   que ya está definido en 40-components.css.
   ========================================================================== */

/* Las promesas del hero, con el texto pequeño para que acompañen al botón sin
   competir con él. En una columna: la primera no cabe en la mitad del hero. */
.home-promises {
	gap: var(--space-1);
	color: var(--c-text);
	font-size: var(--fs-small);
}

/* El mismo margen arriba y abajo: las cifras cierran el hero, y con el de una
   sección normal quedaban lejos de lo que viene después. */
.home-stats {
	padding-block: var(--space-5);
}

/* Las cuatro cifras, de dos en dos: sus etiquetas son largas y, envolviendo como
   .stat-row, saldría una por fila. Con sitio para todas se reparten de extremo a
   extremo del contenedor. */
.home-stats .stat-row {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (min-width: 1024px) {
	.home-stats .stat-row {
		grid-template-columns: repeat(4, auto);
		justify-content: space-between;
	}
}

/* Lo que tienen en común las herramientas, bajo sus tarjetas. No son pasos:
   van sin número y sin caja, con el icono de las tarjetas de característica,
   para que se lean como rasgos y no como una segunda fila de tarjetas. */
.home-traits {
	display: grid;
	gap: var(--space-4);
	margin-block-start: var(--space-5);
	padding: var(--space-4) 0 0;
	border-block-start: 1px solid var(--c-border);
	list-style: none;
}

.home-traits li + li {
	margin-block-start: 0;
}

.home-trait {
	display: grid;
	gap: var(--space-2);
	align-content: start;
}

.home-trait__title {
	font-size: var(--fs-h3);
}

.home-trait__text {
	color: var(--c-text);
}

@media (min-width: 768px) {
	.home-traits {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/* Quién está detrás: la foto y las cifras al lado del texto, que va en columna
   de prosa. Hasta 1024 px, la foto encima. */
.home-author {
	display: grid;
	gap: var(--space-5);
	align-items: start;
}

.home-author__aside {
	display: grid;
	justify-items: center;
	gap: var(--space-4);
	width: min(100%, 320px);
	margin-inline: auto;
}

/* El reflejo: un disco con el degradado de marca, desenfocado, detrás de la foto.
   El aro lo pone el mismo degradado asomando por el relleno. */
.home-author__photo {
	position: relative;
	isolation: isolate;
	padding: 3px;
	border-radius: var(--radius-pill);
	background-image: var(--g-dual);
}

.home-author__photo::before {
	content: "";
	position: absolute;
	inset: -10%;
	z-index: -1;
	border-radius: var(--radius-pill);
	background-image: var(--g-dual);
	filter: blur(36px);
	opacity: 0.45;
}

.home-author__photo .avatar {
	display: block;
	width: 256px;
	height: 256px;
	border: 4px solid var(--c-bg);
}

.home-author__stats {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--space-1);
	width: 100%;
}

.home-author__stats .card {
	gap: var(--space-1);
	padding: var(--space-2) var(--space-1);
	text-align: center;
}

.home-author__stats .stat__value {
	font-size: var(--fs-h3);
}

.home-author__stats .stat__label {
	font-size: var(--fs-data);
	line-height: 1.3;
}

.home-author__body {
	max-width: var(--w-prose);
}

/* Entre el H3 y el H2: destaca sobre el texto sin competir con el título de la
   sección, que va justo encima. */
.home-author__name {
	font-size: calc(var(--fs-h3) * 1.25);
}

.home-author__role {
	color: var(--c-accent);
	font-size: var(--fs-body);
	font-weight: 600;
}

.home-author__tools {
	padding-block-start: var(--space-3);
	border-block-start: 1px solid var(--c-border);
}

.home-author__tools ul {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-1) var(--space-3);
	margin-block-start: var(--space-2);
	padding: 0;
	list-style: none;
}

.home-author__tools li {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin: 0;
	color: var(--c-muted);
	font-size: var(--fs-small);
}

.home-author__tools .icon {
	width: 16px;
	height: 16px;
	color: var(--c-accent);
}

@media (min-width: 1024px) {
	.home-author {
		grid-template-columns: 320px minmax(0, 1fr);
		gap: var(--space-6);
	}

	.home-author__aside {
		margin-inline: 0;
	}
}

/* «Avísame» al pie de cada formato: `auto` lo empuja abajo para que los tres
   queden a la misma altura aunque los textos midan distinto. */
.home-format .btn {
	align-self: flex-start;
	margin-block-start: auto;
}

/* La tarjeta de un programa. Monta piezas que ya existen (.facts, .checklist,
   .offer__price); aquí solo se colocan. El precio y los botones van al pie, para
   que queden a la misma altura aunque los textos midan distinto. */
.home-program__head {
	display: flex;
	align-items: center;
	gap: var(--space-2);
}

.home-program .card__icon {
	flex-shrink: 0;
}

.home-program .card__excerpt {
	flex: none;
}

.home-program .checklist {
	gap: var(--space-1);
	font-size: var(--fs-small);
}

.home-program .offer__amount {
	font-size: var(--fs-h2);
}

.home-program__foot {
	display: grid;
	gap: var(--space-2);
	margin-block-start: auto;
	padding-block-start: var(--space-3);
	border-block-start: 1px solid var(--c-border);
}

/* El resultado, con el canto de acento: es lo que más pesa de la tarjeta. */
.home-outcome {
	display: grid;
	gap: var(--space-1);
	padding: var(--space-2);
	border-inline-start: 3px solid var(--c-accent);
	border-radius: var(--radius-input);
	background-color: var(--tint-forest);
	color: var(--c-heading);
	font-size: var(--fs-small);
	font-weight: 600;
}

/* Sin el plugin no hay modal: la alternativa va bajo las tres tarjetas. */
.home-waitlist {
	max-width: var(--w-narrow);
	margin-block-start: var(--space-5);
}

/* Las preguntas frecuentes, un grupo por columna en escritorio. `start` porque
   abrir una respuesta solo debe alargar su columna. */
.home-faq {
	display: grid;
	gap: var(--space-4);
}

@media (min-width: 1024px) {
	.home-faq {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		align-items: start;
	}
}

.home-faq__title {
	margin-block-end: var(--space-2);
}

/* ¿Es para ti?: el titular de cada elemento, encima de su explicación. */
.home-fit .checklist {
	font-size: var(--fs-small);
}

.home-fit strong {
	display: block;
	color: var(--c-heading);
	font-size: var(--fs-body);
}

/* Lo que todavía no está abierto: el hueco de los programas y los próximos. */
.home-soon {
	border-style: dashed;
}

/* La tarjeta de cierre de una sección: situaciones, ¿es para ti? y preguntas
   frecuentes. El
   botón puede partir en dos líneas: en móvil no cabe en una dentro del relleno. */
.home-closing {
	align-items: center;
	margin-block-start: var(--space-4);
	text-align: center;
}

.home-closing .btn {
	white-space: normal;
}

/* Sola bajo la cabecera, cuando hace de hueco de una sección sin programas. */
.section__head + .home-closing {
	margin-block-start: 0;
}

/* Apunte al pie de una sección: los diccionarios bajo los pilares, la
   consultoría bajo los cursos. */
.home-aside {
	display: flex;
	align-items: flex-start;
	gap: var(--space-2);
	margin-block-start: var(--space-4);
	color: var(--c-muted);
	font-size: var(--fs-small);
}

.home-aside .icon {
	flex-shrink: 0;
	color: var(--c-cta);
}

/* El cierre es la única parte centrada de la portada. Se lo puede permitir
   porque es lo último y porque solo pide una cosa. */
.home-cta {
	text-align: center;
}

/* Sin JavaScript, el alta del modal se muestra aquí mismo (40-components.css). */
.no-js .home-cta dialog.modal {
	margin-inline: auto;
}