/**
 * Pantallas del catalogo: hero, tarjetas de area, pestañas de etapa, chips de
 * anclas, grid de productos y bandas. Nivel wireframe: estructura correcta,
 * el acabado visual llegara con el diseño final.
 */

html {
	scroll-behavior: smooth;
}

/* Contenedor comun de cada franja: alineado con la navbar y el pie. */
.mm-hero-catalogo,
.mm-etapas,
.mm-anclas,
.mm-seccion-tipo,
.mm-vacio,
.mm-banda-isbn {
	max-width: var( --contenedor );
	margin-left: auto;
	margin-right: auto;
	padding-left: var( --margen-pagina );
	padding-right: var( --margen-pagina );
}

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

.mm-hero-catalogo {
	padding-top: var( --s-5 );
	padding-bottom: var( --s-5 );
}

.mm-hero-catalogo h1 {
	margin: var( --s-2 ) 0 0;
	font-size: var( --h1-size );
	line-height: var( --h1-line );
	font-weight: var( --h1-weight );
}

.mm-hero-catalogo p {
	margin: var( --s-2 ) 0 0;
	max-width: 740px;
	color: var( --text-soft );
}

.mm-migas {
	font-size: var( --caption-size );
	font-weight: 500;
	color: var( --text-muted );
}

.mm-migas a {
	color: inherit;
	text-decoration: none;
}

.mm-migas a:hover {
	color: var( --accent );
}

/* --------------------------------------------------------- Pestañas etapa */

.mm-etapas {
	display: flex;
	gap: var( --s-2 );
	overflow-x: auto;
	border-bottom: 1px solid var( --line );
}

.mm-etapas a {
	padding: var( --s-3 ) var( --s-4 );
	color: var( --text-soft );
	font-size: var( --body-sm-size );
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
	border-bottom: 3px solid transparent;
}

.mm-etapas a:hover {
	color: var( --text );
}

.mm-etapas a.is-activa {
	color: var( --accent );
	border-bottom-color: var( --accent );
}

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

.mm-anclas {
	display: flex;
	flex-wrap: wrap;
	gap: var( --s-2 );
	padding-top: var( --s-3 );
	padding-bottom: var( --s-3 );
}

.mm-anclas__chip {
	padding: 7px 15px;
	border: 1px solid var( --border-fn );
	border-radius: var( --rad-pill );
	color: var( --text );
	font-size: var( --body-sm-size );
	font-weight: 600;
	text-decoration: none;
}

.mm-anclas__chip:hover {
	border-color: var( --accent );
	color: var( --accent );
}

/* --------------------------------------------------- Secciones y productos */

.mm-seccion-tipo {
	padding-top: var( --s-6 );
	padding-bottom: var( --s-6 );
	scroll-margin-top: calc( var( --cabecera-alto ) + var( --s-4 ) );
}

.mm-seccion-tipo h2 {
	margin: 0 0 var( --s-5 );
	font-size: var( --h4-size );
	line-height: var( --h4-line );
	font-weight: var( --h4-weight );
}

.mm-productos {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( min( 100%, 340px ), 1fr ) );
	gap: var( --s-5 );
}

.mm-producto {
	background: var( --surface );
	border: 1px solid var( --line );
	border-radius: var( --rad-sm );
	overflow: hidden;
}

.mm-producto__portada {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 440 / 272;
	background: var( --surface-portada );
	border-bottom: 1px solid var( --line );
}

.mm-producto__portada img {
	max-height: 200px;
	max-width: 60%;
	width: auto;
	border-radius: 4px;
	object-fit: contain;
	box-shadow: 6px 8px 14px rgba( 17, 20, 23, .18 );
}

/* Pastilla de contorno sobre la portada, arriba a la derecha. */
.mm-producto__novedad {
	position: absolute;
	top: 15px;
	right: 15px;
	padding: 3px 10px;
	background: var( --surface );
	border: 1px solid var( --accent );
	border-radius: var( --rad-pill );
	color: var( --accent );
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .08em;
}

.mm-producto__cuerpo {
	display: flex;
	flex-direction: column;
	gap: var( --s-2 );
	padding: 14px var( --s-4 ) var( --s-4 );
}

.mm-producto__cuerpo h3 {
	margin: 0;
	font-size: var( --h6-size );
	line-height: 1.3;
	font-weight: 700;
}

.mm-producto__cuerpo p {
	margin: 0;
	font-size: var( --body-sm-size );
	line-height: 1.45;
	color: var( --text-soft );
}

/* Mismo tratamiento que el enlace de las tarjetas de area. */
.mm-producto__enlace {
	color: var( --text );
	font-size: var( --body-sm-size );
	font-weight: 700;
	text-decoration: underline;
}

.mm-producto__enlace:hover {
	color: var( --accent );
}

.mm-vacio {
	padding-top: var( --s-6 );
	padding-bottom: var( --s-6 );
	color: var( --text-soft );
}

/* ------------------------------------------------------------------ Bandas */

.mm-banda-isbn {
	padding-top: var( --s-5 );
	padding-bottom: var( --s-5 );
}

.mm-banda-isbn__caja {
	padding: var( --s-6 ) var( --gutter );
	background: var( --surface-alt );
	border: 1px solid var( --line );
	border-radius: var( --rad-sm );
	text-align: center;
}

.mm-banda-isbn__caja h2 {
	margin: 0;
	font-size: var( --h5-size );
	font-weight: 700;
}

.mm-banda-isbn__caja p {
	max-width: 760px;
	margin: var( --s-2 ) auto var( --s-4 );
	font-size: var( --body-sm-size );
	color: var( --text-soft );
}

/* -------------------------------------------------------- Ficha de producto */

/*
 * Cambiar de pestaña dentro de la ficha es cambiar de pagina, y el navegador lo
 * enseña como un corte seco. Con esto funde una pagina en la siguiente.
 *
 * Aqui y no en todo el sitio, que es donde se ha pedido: para que haya fundido
 * tienen que llevarlo las dos paginas, asi que ir de una ficha a cualquier otra
 * parte sigue siendo un corte normal. Sin movimiento para quien lo ha pedido en
 * el sistema. Y donde no se entiende —Firefox, por ahora— tambien es un corte.
 */
@media ( prefers-reduced-motion: no-preference ) {
	@view-transition {
		navigation: auto;
	}
}