/* ---------- Catálogo: índice, rama y paquete ----------
 * Ningún valor literal de color ni de tipografía: todo sale de los tokens, para
 * que sustituir la identidad no obligue a tocar esta hoja.
 *
 * La rejilla se resuelve primero en una columna y crece con el ancho. El pétalo
 * necesita su envoltorio `petal-slot` alrededor de cada tarjeta: la consulta de
 * contenedor mide un ancestro, nunca el propio elemento, y sin él el escalón de
 * tarjeta estrecha no se dispara. */

.page-catalog__intro {
	margin-top: var(--spacing-md);
}

.catalog-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--spacing-lg);
	margin: 0;
	padding: 0;
	list-style: none;
}

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

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

.catalog-grid__slot {
	display: flex;
	/* El elemento de lista no lleva medida de lectura: la llevan sus párrafos. */
	max-width: none;
}

.catalog-card {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-sm);
	width: 100%;
	/* El enlace del título se estira sobre la tarjeta entera desde aquí. */
	position: relative;
}

/* Filete de acento en el color de la familia de la sección; sin familia toma el
 * de la raíz. Es acento y nunca indicador único: dos ramas pueden compartir
 * color, así que el nombre siempre va al lado. */
.catalog-card::before {
	content: "";
	display: block;
	width: var(--spacing-xl);
	height: var(--spacing-unit);
	border-radius: var(--rounded-pill);
	background: var(--color-branch);
}

.catalog-card__image {
	width: 100%;
	height: auto;
	border-radius: var(--rounded-md);
}

.catalog-card__title {
	margin: 0;
}

.catalog-card__title a {
	text-decoration: none;
}

/* Toda la tarjeta es el objetivo táctil, y en el árbol de accesibilidad sigue
 * habiendo un solo enlace con el nombre de la pieza. */
.catalog-card__title a::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
}

.catalog-card__summary {
	margin: 0;
	color: var(--ink-secondary);
}

/* El precio empuja hacia abajo para que todas las tarjetas de una fila lo
 * alineen aunque sus descripciones midan distinto. */
.catalog-card .price {
	margin-top: auto;
}

/* ---------- Precio ----------
 * El importe mostrado es siempre el total a pagar. La unidad va debajo, más
 * pequeña y en tinta apagada, para que la cifra no compita con ella. */

.price {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-unit);
	margin: 0;
	max-width: none;
	color: var(--color-brand-deep);
	font-size: var(--font-size-h4);
	font-weight: var(--font-weight-black);
	letter-spacing: var(--font-tracking-tight);
}

.price--lead {
	font-size: var(--font-size-h3);
	margin-top: var(--spacing-md);
}

.price__unit {
	font-weight: var(--font-weight-regular);
	letter-spacing: normal;
}

/* ---------- Cabecera de rama y de paquete ---------- */

.page-branch__header,
.page-package__header {
	padding-block: var(--spacing-xl);
}

.page-branch__summary,
.page-package__header .eyebrow {
	margin-top: var(--spacing-sm);
}

.page-package__header .eyebrow a {
	color: inherit;
}

.page-branch__body > * + *,
.page-package__body > * + * {
	margin-top: var(--spacing-section);
}

.page-package__image {
	width: 100%;
	height: auto;
	border-radius: var(--rounded-lg);
}

/* ---------- Temas de una rama ----------
 * Lista, nunca tarjetas: son variantes de un mismo servicio, y presentarlas
 * como opciones fingiría un catálogo que no existe. */

.topic-list {
	display: grid;
	gap: var(--spacing-md);
	margin: var(--spacing-lg) 0 0;
	padding: 0;
	list-style: none;
}

.topic-list__item {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--spacing-xs) var(--spacing-sm);
	max-width: none;
	padding-block-end: var(--spacing-sm);
	border-block-end: 1px solid var(--color-border-default);
}

.topic-list__name {
	font-weight: var(--font-weight-bold);
}

.topic-list__price {
	margin-inline-start: auto;
	color: var(--color-brand-deep);
	font-weight: var(--font-weight-black);
	letter-spacing: var(--font-tracking-tight);
}

.topic-list__unit {
	flex-basis: 100%;
}

/* ---------- Casos de una rama ---------- */

.case-list {
	display: grid;
	gap: var(--spacing-sm);
	margin: var(--spacing-lg) 0 0;
	padding: 0;
	list-style: none;
}

.case-list__item {
	max-width: none;
}

/* ---------- Cierre ----------
 * Una sola acción por página: el diagnóstico y la mensajería ya viven en el pie
 * y no compiten aquí. */

.page-branch__close,
.page-package__close,
.page-branch__single {
	margin-top: var(--spacing-section);
}

.page-branch__single .price {
	margin-bottom: var(--spacing-sm);
}