/**
 * ccmts-blog-portada.css — la sección del blog en la portada, [ccm_blog_portada].
 *
 * Fuente: la maqueta aprobada por el dueño el 23-sep,
 * `docs/blog/plantillas/plantilla-home-blog.html` (repo ccm-ia-n8n-chatwoot),
 * con el estilo del diseño ya aprobado del artículo:
 *   - Tokens de `ccmts-articulos.css` (copiados: esa hoja solo se carga en una
 *     entrada individual y pesa 1.400 líneas; no se trae a la portada por esto).
 *   - Founders Grotesk (la que ya carga la web), cero fuentes nuevas: la Red Hat
 *     de la maqueta no se carga en el sitio.
 *   - `--ccmts-radio: 4px` en todo lo rectangular; píldoras, flechas y el botón
 *     de WhatsApp siguen redondos.
 *
 * Todo colgado de .ccmts-bp: no toca nada del tema ni de Elementor.
 * Las variantes por número de entradas (`--1`, `--2`, `--solo`, `--par--1`…)
 * son las que impiden huecos cuando hay pocos artículos.
 */

.ccmts-bp {
	--ccmts-tinta: #191818;
	--ccmts-rojo: #E60000;
	--ccmts-papel: #FFFFFF;
	--ccmts-aluminio: #F2F2F0;
	--ccmts-fondo: #F6F6F4;
	--ccmts-grafito: #646464;
	--ccmts-linea: #E7E7E7;
	--ccmts-display: "founder grotesk CCM", "Founders Grotesk", "Helvetica Neue", Arial, sans-serif;
	--ccmts-texto: "founder grotesk CCM", "Founders Grotesk", "Helvetica Neue", Arial, sans-serif;
	--ccmts-mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, "Liberation Mono", monospace;
	--ccmts-radio: 4px;

	position: relative;
	overflow: hidden;
	padding: clamp( 48px, 7vw, 88px ) 0 clamp( 56px, 7vw, 96px );
	background: linear-gradient( 180deg, #fff 0, var( --ccmts-fondo ) 22%, var( --ccmts-fondo ) 100% );
	color: var( --ccmts-tinta );
	font: 400 16px/1.55 var( --ccmts-texto );
	-webkit-font-smoothing: antialiased;
	text-align: left;
}

.ccmts-bp::before {
	content: "";
	position: absolute;
	inset: -30% -10% auto;
	height: 60%;
	background:
		radial-gradient( 40% 60% at 30% 40%, rgba( 230, 0, 0, .06 ), transparent 70% ),
		radial-gradient( 35% 55% at 75% 30%, rgba( 25, 24, 24, .05 ), transparent 70% );
	pointer-events: none;
}

.ccmts-bp *,
.ccmts-bp *::before,
.ccmts-bp *::after {
	box-sizing: border-box;
}

/* El reset de Hello Elementor pinta los enlaces de #c36 y subraya al pasar. */
.ccmts-bp a,
.ccmts-bp a:hover,
.ccmts-bp a:active {
	color: inherit;
	text-decoration: none;
}

.ccmts-bp :focus-visible {
	outline: 2px solid var( --ccmts-rojo );
	outline-offset: 3px;
	border-radius: var( --ccmts-radio );
}

.ccmts-bp img {
	display: block;
	max-width: 100%;
	height: auto;
}

.ccmts-bp h2,
.ccmts-bp h3,
.ccmts-bp p {
	color: inherit;
}

@media ( prefers-reduced-motion: reduce ) {
	.ccmts-bp * {
		transition: none !important;
		animation: none !important;
	}
}

.ccmts-bp__envase {
	position: relative;
	max-width: 1180px;
	margin: 0 auto;
	padding: 0 clamp( 16px, 4vw, 40px );
}

/* ── Título ── */

.ccmts-bp__titulo {
	text-align: center;
	margin-bottom: clamp( 28px, 4vw, 44px );
}

/*
 * El título de la sección con el MISMO estilo que los demás títulos de la
 * portada (pedido del dueño, 23-sep). Medido en dev con getComputedStyle sobre
 * «Testimonios» (.elementor-element-380efd94 .elementor-heading-title) y
 * «Beneficios de comprar en CCM»: founder grotesk CCM 500, 24px/24px, #333,
 * centrado, sin letter-spacing; en ≤ 767 px, 16px con line-height 24px (el
 * interlineado NO baja con el tamaño: Elementor no tiene valor móvil y hereda
 * el de escritorio).
 */
.ccmts-bp .ccmts-bp__titulo h2 {
	margin: 0;
	font-family: "founder grotesk CCM", sans-serif;
	font-size: 24px;
	font-weight: 500;
	line-height: 24px;
	letter-spacing: normal;
	color: #333333;
	text-align: center;
	text-wrap: balance;
}

/* Por debajo del título, no por encima: con el título a 24/16 px, el
 * subtítulo a 17 px le quitaba la jerarquía (en el móvil era MÁS grande). */
.ccmts-bp__titulo p {
	margin: 8px auto 0;
	max-width: 52ch;
	color: var( --ccmts-grafito );
	font-size: 15px;
	line-height: 1.45;
	text-wrap: balance;
}

@media ( max-width: 767px ) {
	.ccmts-bp .ccmts-bp__titulo h2 {
		font-size: 16px;
	}

	.ccmts-bp__titulo p {
		font-size: 14px;
	}
}

/* ── Chip + meta ── */

.ccmts-bp__meta {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
	font: 400 12px/1 var( --ccmts-mono );
	color: var( --ccmts-grafito );
}

.ccmts-bp__chip {
	font: 500 12.5px/1 var( --ccmts-texto );
	color: var( --ccmts-tinta );
	background: var( --ccmts-papel );
	border: 1px solid var( --ccmts-linea );
	padding: 6px 10px 5px;
	border-radius: 999px;
}

.ccmts-bp__chip--rojo {
	background: #FCE8E8;
	border-color: #F7CFCF;
	color: #A80000;
}

.ccmts-bp__punto {
	width: 3px;
	height: 3px;
	border-radius: 50%;
	background: #bbb;
}

/* ── Flecha en muesca ── */

.ccmts-bp__flecha {
	position: absolute;
	right: 0;
	bottom: 0;
	width: 48px;
	height: 48px;
	display: grid;
	place-items: center;
	background: var( --ccmts-papel );
	border-radius: var( --ccmts-radio ) 0 var( --ccmts-radio ) 0;
}

.ccmts-bp__flecha > span {
	width: 34px;
	height: 34px;
	display: grid;
	place-items: center;
	border-radius: 50%;
	border: 1px solid var( --ccmts-linea );
	transition: background .2s, color .2s, border-color .2s;
}

.ccmts-bp__flecha svg {
	width: 15px;
	height: 15px;
}

.ccmts-bp a:hover .ccmts-bp__flecha > span,
.ccmts-bp a:focus-visible .ccmts-bp__flecha > span {
	background: var( --ccmts-rojo );
	border-color: var( --ccmts-rojo );
	color: #fff;
}

/* ── El hueco de la imagen (tres modos) ── */

.ccmts-bp__img {
	position: relative;
	display: grid;
	place-items: center;
	overflow: hidden;
	background: var( --ccmts-aluminio );
	border-radius: var( --ccmts-radio );
	/* Que el recorte redondeado aguante el zoom al pasar el ratón (Safari
	 * pierde el recorte de overflow+radius con un transform dentro). */
	isolation: isolate;
}

/* La foto a sangre también lleva el radio: la esquina se ve aunque un
 * navegador no recorte bien el hijo absoluto. */
.ccmts-bp__img img {
	border-radius: inherit;
}

/* Producto sobre aluminio, como en la maqueta. */
.ccmts-bp__img--producto img {
	max-height: 82%;
	max-width: 78%;
	width: auto;
	object-fit: contain;
	mix-blend-mode: multiply;
	transition: transform .5s cubic-bezier( .2, .7, .2, 1 );
}

/* Imagen destacada: es una foto de portada, va a sangre. */
.ccmts-bp__img--foto img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	transition: transform .5s cubic-bezier( .2, .7, .2, 1 );
}

/* Sin imagen: bloque tipográfico, la tarjeta no cambia de altura. */
.ccmts-bp__img--tipo {
	place-items: end start;
	padding: 20px 22px;
	background:
		linear-gradient( 135deg, rgba( 230, 0, 0, .05 ), transparent 55% ),
		var( --ccmts-aluminio );
}

.ccmts-bp__img--tipo span {
	font: 700 clamp( 26px, 3vw, 40px )/.95 var( --ccmts-display );
	letter-spacing: -.03em;
	color: rgba( 25, 24, 24, .16 );
	text-wrap: balance;
}

.ccmts-bp__img--tipo::before {
	content: "";
	position: absolute;
	top: 20px;
	left: 22px;
	width: 12px;
	height: 12px;
	background: var( --ccmts-rojo );
}

.ccmts-bp a:hover .ccmts-bp__img img {
	transform: scale( 1.04 );
}

/* ── Panel flotante ── */

.ccmts-bp__panel {
	position: relative;
	margin: -64px 14px 0;
	padding: 16px 18px 20px;
	background: rgba( 255, 255, 255, .93 );
	-webkit-backdrop-filter: blur( 14px );
	backdrop-filter: blur( 14px );
	border: 1px solid rgba( 255, 255, 255, .9 );
	border-radius: var( --ccmts-radio );
	box-shadow: 0 10px 30px rgba( 25, 24, 24, .06 );
}

.ccmts-bp__panel h3 {
	margin: 12px 0 8px;
	font: 700 clamp( 20px, 1.8vw, 23px )/1.12 var( --ccmts-display );
	letter-spacing: -.015em;
	text-wrap: balance;
}

.ccmts-bp__panel p {
	margin: 0;
	padding-right: 40px;
	font-size: 15px;
	color: var( --ccmts-grafito );
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* Dentro del panel la muesca no se pinta: sobre una foto oscura se vería un
 * cuadro blanco encima del panel translúcido. */
.ccmts-bp__panel .ccmts-bp__flecha {
	background: transparent;
}

/* ── 1. Destacadas ── */

.ccmts-bp__destacadas {
	display: grid;
	grid-template-columns: repeat( 3, minmax( 0, 1fr ) );
	gap: clamp( 14px, 2vw, 22px );
}

/* Con una o dos, centradas y más estrechas: nunca un hueco a la derecha. */
.ccmts-bp__destacadas--1 {
	grid-template-columns: minmax( 0, 560px );
	justify-content: center;
}

.ccmts-bp__destacadas--2 {
	grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	max-width: 860px;
	margin-inline: auto;
}

.ccmts-bp__dest {
	position: relative;
	display: block;
	border-radius: var( --ccmts-radio );
}

.ccmts-bp__dest .ccmts-bp__img {
	height: clamp( 220px, 24vw, 300px );
}

/* El panel tapa los 64 px de abajo: el producto se centra en lo que se ve. */
.ccmts-bp__dest .ccmts-bp__img--producto {
	padding-bottom: 56px;
}

.ccmts-bp__dest .ccmts-bp__img--producto img {
	max-height: 86%;
}

/* Con una o dos entradas, el cierre no es más ancho que las tarjetas. */
.ccmts-bp--corta .ccmts-bp__cierre {
	max-width: 860px;
	margin-inline: auto;
}

@media ( max-width: 880px ) {
	.ccmts-bp__destacadas,
	.ccmts-bp__destacadas--2 {
		grid-template-columns: minmax( 0, 1fr );
	}
}

/* ── 2. Temas ── */

.ccmts-bp__temas {
	position: relative;
	margin: clamp( 40px, 5vw, 56px ) 0;
}

.ccmts-bp__temas ul {
	list-style: none;
	margin: 0;
	padding: 6px clamp( 16px, 4vw, 40px );
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
	overflow-x: auto;
	scrollbar-width: none;
}

.ccmts-bp__temas ul::-webkit-scrollbar {
	display: none;
}

.ccmts-bp__temas li {
	margin: 0;
	padding: 0;
}

.ccmts-bp__temas a {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	white-space: nowrap;
	padding: 10px 14px;
	background: var( --ccmts-papel );
	border: 1px solid var( --ccmts-linea );
	border-radius: var( --ccmts-radio );
	font: 500 15px/1 var( --ccmts-texto );
	/* Misma altura con y sin número («Todo el blog» no lleva). */
	min-height: 40px;
	transition: border-color .2s;
}

.ccmts-bp__temas a:hover {
	border-color: var( --ccmts-tinta );
}

.ccmts-bp__temas b {
	font: 500 11px/1 var( --ccmts-mono );
	background: var( --ccmts-aluminio );
	padding: 4px 6px;
	border-radius: var( --ccmts-radio );
}

@media ( max-width: 880px ) {
	.ccmts-bp__temas ul {
		flex-wrap: nowrap;
		justify-content: flex-start;
	}

	/* Pista de que se desliza: el borde derecho se desvanece. */
	.ccmts-bp__temas::after {
		content: "";
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		width: 32px;
		background: linear-gradient( 90deg, rgba( 246, 246, 244, 0 ), var( --ccmts-fondo ) );
		pointer-events: none;
	}
}

/* Si no hay barra de temas, «Lo último» no se pega a las destacadas. */
.ccmts-bp__envase + .ccmts-bp__envase {
	margin-top: clamp( 40px, 5vw, 56px );
}

/* ── 3. Lo último ── */

.ccmts-bp__barra {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 18px;
	padding: 14px 14px 14px 20px;
	background: var( --ccmts-papel );
	border-radius: var( --ccmts-radio );
}

.ccmts-bp__barra h2 {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0;
	font: 700 21px/1 var( --ccmts-display );
	letter-spacing: -.015em;
}

.ccmts-bp__barra h2 i {
	display: inline-block;
	width: 12px;
	height: 12px;
	background: var( --ccmts-rojo );
}

.ccmts-bp__barra h2 small {
	font: 400 14px/1 var( --ccmts-texto );
	color: var( --ccmts-grafito );
	letter-spacing: 0;
}

.ccmts-bp__ver-todo {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	white-space: nowrap;
	font: 500 15px/1 var( --ccmts-texto );
}

.ccmts-bp__ver-todo span {
	width: 36px;
	height: 36px;
	display: grid;
	place-items: center;
	border-radius: 50%;
	background: var( --ccmts-tinta );
	color: #fff;
	transition: background .2s;
}

.ccmts-bp__ver-todo:hover span {
	background: var( --ccmts-rojo );
}

.ccmts-bp__ver-todo svg {
	width: 15px;
	height: 15px;
}

@media ( max-width: 560px ) {
	.ccmts-bp__barra h2 small {
		display: none;
	}
}

.ccmts-bp__mosaico {
	display: grid;
	grid-template-columns: minmax( 0, 1.25fr ) minmax( 0, 1fr );
	gap: 18px;
}

/* Solo la grande (4 entradas): a todo el ancho, sin columna vacía. */
.ccmts-bp__mosaico--solo {
	grid-template-columns: minmax( 0, 1fr );
}

.ccmts-bp__grande {
	position: relative;
	display: block;
	min-height: 420px;
	border-radius: var( --ccmts-radio );
	overflow: hidden;
}

.ccmts-bp__grande .ccmts-bp__img {
	position: absolute;
	inset: 0;
}

.ccmts-bp__grande .ccmts-bp__img--producto img {
	max-height: 62%;
	max-width: 86%;
	transform: translateY( -12% );
}

.ccmts-bp a.ccmts-bp__grande:hover .ccmts-bp__img--producto img {
	transform: translateY( -14% ) scale( 1.03 );
}

.ccmts-bp__img--tipo span {
	max-width: 14ch;
}

.ccmts-bp__grande .ccmts-bp__img--tipo {
	place-items: start end;
	padding: 28px 30px;
}

.ccmts-bp__grande .ccmts-bp__img--tipo span {
	font-size: clamp( 40px, 5vw, 72px );
	text-align: right;
}

.ccmts-bp__grande .ccmts-bp__panel {
	position: absolute;
	left: 18px;
	bottom: 18px;
	margin: 0;
	max-width: min( 440px, calc( 100% - 36px ) );
}

.ccmts-bp__grande .ccmts-bp__panel h3 {
	font-size: clamp( 23px, 2.3vw, 29px );
}

.ccmts-bp__lado {
	display: grid;
	gap: 18px;
}

.ccmts-bp__fila {
	position: relative;
	display: grid;
	grid-template-columns: 42% minmax( 0, 1fr );
	min-height: 200px;
	background: var( --ccmts-papel );
	border-radius: var( --ccmts-radio );
	overflow: hidden;
}

.ccmts-bp__fila .ccmts-bp__img {
	/* Miniatura con sus cuatro esquinas de 4 px (pedido del dueño, 23-sep):
	 * antes iba a 0 y el lado que da al texto quedaba en ángulo recto. */
	border-radius: var( --ccmts-radio );
}

.ccmts-bp__fila .ccmts-bp__img--producto img {
	max-height: 78%;
	max-width: 80%;
}

.ccmts-bp__fila .ccmts-bp__img--tipo span {
	font-size: clamp( 20px, 2vw, 26px );
}

.ccmts-bp__txt {
	padding: 18px 18px 56px;
}

.ccmts-bp__fila h3 {
	margin: 12px 0 0;
	font: 700 18px/1.22 var( --ccmts-display );
	letter-spacing: -.01em;
}

@media ( max-width: 880px ) {
	.ccmts-bp__mosaico {
		grid-template-columns: minmax( 0, 1fr );
	}

	.ccmts-bp__grande {
		min-height: 380px;
	}
}

@media ( max-width: 420px ) {
	.ccmts-bp__fila {
		grid-template-columns: 38% minmax( 0, 1fr );
		min-height: 170px;
	}

	.ccmts-bp__txt {
		padding: 14px 14px 52px;
	}

	.ccmts-bp__fila h3 {
		font-size: 17px;
	}
}

.ccmts-bp__par {
	display: grid;
	grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	gap: 18px;
	margin-top: 18px;
}

.ccmts-bp__ancha {
	position: relative;
	display: flex;
	flex-direction: column;
	padding: 22px 22px 60px;
	background: var( --ccmts-papel );
	border-radius: var( --ccmts-radio );
}

.ccmts-bp__ancha h3 {
	margin: 12px 0 0;
	font: 700 clamp( 21px, 2vw, 25px )/1.12 var( --ccmts-display );
	letter-spacing: -.015em;
	text-wrap: balance;
}

.ccmts-bp__ancha p {
	margin: 12px 0 0;
	font-size: 15.5px;
	color: var( --ccmts-grafito );
}

.ccmts-bp__ancha .ccmts-bp__img {
	order: 0;
	height: 220px;
	margin-top: 16px;
}

.ccmts-bp__ancha .ccmts-bp__img--producto img {
	max-height: 82%;
	max-width: 70%;
}

/* Una sola ancha (7 entradas): a todo el ancho, texto e imagen lado a lado. */
.ccmts-bp__par--1 {
	grid-template-columns: minmax( 0, 1fr );
}

.ccmts-bp__par--1 .ccmts-bp__ancha {
	display: grid;
	grid-template-columns: minmax( 0, 1fr ) minmax( 0, 1fr );
	align-items: center;
	gap: 28px;
}

.ccmts-bp__par--1 .ccmts-bp__ancha .ccmts-bp__img {
	margin-top: 0;
}

@media ( max-width: 720px ) {
	.ccmts-bp__par,
	.ccmts-bp__par--1 .ccmts-bp__ancha {
		grid-template-columns: minmax( 0, 1fr );
	}

	.ccmts-bp__par--1 .ccmts-bp__ancha {
		gap: 0;
	}

	.ccmts-bp__par--1 .ccmts-bp__ancha .ccmts-bp__img {
		margin-top: 16px;
	}
}

/* ── 4. Cierre por WhatsApp ── */

.ccmts-bp__cierre {
	display: grid;
	grid-template-columns: minmax( 0, 1fr ) auto;
	align-items: center;
	gap: 18px;
	margin-top: 18px;
	padding: clamp( 22px, 3vw, 32px );
	background: var( --ccmts-tinta );
	color: #fff;
	border-radius: var( --ccmts-radio );
}

.ccmts-bp__cierre small {
	font: 500 12px/1 var( --ccmts-mono );
	letter-spacing: .06em;
	text-transform: uppercase;
	color: #bbb;
}

.ccmts-bp__cierre h3 {
	margin: 8px 0 0;
	font: 700 clamp( 21px, 2.3vw, 27px )/1.15 var( --ccmts-display );
	letter-spacing: -.015em;
	color: #fff;
}

.ccmts-bp .ccmts-bp__cierre a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 46px;
	padding: 0 22px;
	border-radius: 999px;
	background: var( --ccmts-rojo );
	color: #fff;
	font: 500 16px/1 var( --ccmts-texto );
	white-space: nowrap;
	transition: background .2s, color .2s;
}

.ccmts-bp .ccmts-bp__cierre a:hover {
	background: #fff;
	color: var( --ccmts-tinta );
}

@media ( max-width: 620px ) {
	.ccmts-bp__cierre {
		grid-template-columns: minmax( 0, 1fr );
	}
}

/* ══ Página de categoría del blog (CCMTS_Blog_Categoria, 1.13.0) ══════════
 * Hermana de la sección de portada: mismas piezas (tarjeta de destacada,
 * barra de temas, cierre). Aquí solo lo propio: migas, H1, rejilla,
 * paginación y el estado sin entradas. */

/* Hello Elementor encajona `.site-main` a 1140 px y le da 10 px de margen
 * en el móvil: la sección de categoría va a todo el ancho, como la de portada
 * (el envase interior ya pone el ancho y el margen de 16 px). */
body .site-main.ccmts-bp-main {
	max-width: none;
	width: 100%;
	margin: 0;
	padding: 0;
}

.ccmts-bp--categoria {
	padding-top: clamp( 28px, 4vw, 48px );
}

.ccmts-bp__migas ol {
	list-style: none;
	margin: 0 0 clamp( 18px, 2.4vw, 28px );
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 6px;
	font: 400 13px/1.3 var( --ccmts-texto );
	color: var( --ccmts-grafito );
}

.ccmts-bp__migas li {
	margin: 0;
}

.ccmts-bp__migas li + li::before {
	content: "›";
	margin-right: 6px;
	color: #bbb;
}

.ccmts-bp .ccmts-bp__migas a:hover {
	color: var( --ccmts-rojo );
}

.ccmts-bp__migas [aria-current] {
	color: var( --ccmts-tinta );
}

.ccmts-bp__cab-cat {
	text-align: center;
	margin-bottom: clamp( 8px, 2vw, 16px );
}

/* El mismo título que la portada (founder grotesk CCM 500, #333, sin
 * letter-spacing), a tamaño de H1 de página. */
.ccmts-bp .ccmts-bp__cab-cat h1 {
	margin: 0;
	font-family: "founder grotesk CCM", sans-serif;
	font-size: clamp( 28px, 3.2vw, 40px );
	font-weight: 500;
	line-height: 1.15;
	letter-spacing: normal;
	color: #333333;
	text-wrap: balance;
}

.ccmts-bp__desc {
	margin: 10px auto 0;
	max-width: 60ch;
	font-size: 16px;
	line-height: 1.5;
	color: var( --ccmts-grafito );
	text-wrap: balance;
}

.ccmts-bp__desc p {
	margin: 0;
}

.ccmts-bp__temas--cat {
	margin: clamp( 24px, 3vw, 36px ) 0 clamp( 28px, 4vw, 44px );
}

.ccmts-bp .ccmts-bp__temas a.ccmts-bp__tema--activo {
	background: var( --ccmts-tinta );
	border-color: var( --ccmts-tinta );
	color: #fff;
}

.ccmts-bp__tema--activo b {
	background: rgba( 255, 255, 255, .16 );
	color: #fff;
}

/* Rejilla: 3 por fila; la última fila incompleta se centra (sin hueco a la
 * derecha) y una sola tarjeta sale con ancho razonable. */
.ccmts-bp__rejilla {
	--ccmts-gap: clamp( 14px, 2vw, 22px );
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: clamp( 28px, 3vw, 36px ) var( --ccmts-gap );
}

.ccmts-bp__rejilla > .ccmts-bp__dest {
	flex: 0 1 calc( ( 100% - 2 * var( --ccmts-gap ) ) / 3 );
	min-width: 0;
}

.ccmts-bp__rejilla--1 > .ccmts-bp__dest {
	flex-basis: 560px;
}

.ccmts-bp__rejilla--2 > .ccmts-bp__dest {
	flex-basis: calc( ( min( 100%, 860px ) - var( --ccmts-gap ) ) / 2 );
}

@media ( max-width: 880px ) {
	.ccmts-bp__rejilla > .ccmts-bp__dest,
	.ccmts-bp__rejilla--1 > .ccmts-bp__dest,
	.ccmts-bp__rejilla--2 > .ccmts-bp__dest {
		flex-basis: 100%;
	}
}

.ccmts-bp__paginas ul {
	list-style: none;
	margin: clamp( 28px, 4vw, 40px ) 0 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
}

.ccmts-bp__paginas li {
	margin: 0;
}

.ccmts-bp__paginas .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding: 0 12px;
	background: var( --ccmts-papel );
	border: 1px solid var( --ccmts-linea );
	border-radius: var( --ccmts-radio );
	font: 500 15px/1 var( --ccmts-texto );
}

.ccmts-bp .ccmts-bp__paginas a.page-numbers:hover {
	border-color: var( --ccmts-tinta );
}

.ccmts-bp__paginas .page-numbers.current {
	background: var( --ccmts-tinta );
	border-color: var( --ccmts-tinta );
	color: #fff;
}

.ccmts-bp__paginas .page-numbers.dots {
	background: transparent;
	border-color: transparent;
}

.ccmts-bp__vacio {
	text-align: center;
	padding: clamp( 28px, 4vw, 48px ) 16px;
	background: var( --ccmts-papel );
	border-radius: var( --ccmts-radio );
}

.ccmts-bp__vacio p {
	margin: 0 0 14px;
	color: var( --ccmts-grafito );
}

.ccmts-bp .ccmts-bp__vacio a {
	font-weight: 500;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.ccmts-bp--categoria .ccmts-bp__cierre {
	margin-top: clamp( 36px, 4vw, 48px );
}

/* Índice del blog (1.14.0): destacadas arriba y la rejilla debajo, con el
 * mismo aire que entre filas de la rejilla (si no, el panel flotante de las
 * destacadas toca la imagen de la primera tarjeta de la rejilla). */
.ccmts-bp__destacadas + .ccmts-bp__rejilla {
	margin-top: clamp( 28px, 3vw, 36px );
}

/* Índice del blog (1.14.1): el carrusel «Ofertas» de ccm-gallery, recuperado
 * de la página Elementor. Su tarjeta es la de ccm-gallery (la misma de la
 * portada); aquí solo el aire y lo que el widget de Elementor le daba al host
 * (sin recorte, altura libre), que fuera de Elementor no aplica. */
.ccmts-bp__ofertas {
	margin-top: clamp( 36px, 4vw, 48px );
}

.ccmts-bp__ofertas .ccmg-carousel-host,
.ccmts-bp__ofertas .ccmg-carousel,
.ccmts-bp__ofertas .ccmg-carousel__track-wrap,
.ccmts-bp__ofertas .ccmg-carousel__track {
	height: auto;
	min-height: max-content;
}

.ccmts-bp__ofertas .ccmg-carousel-host {
	display: block;
	overflow: visible;
}

.ccmts-bp__ofertas + .ccmts-bp__cierre {
	margin-top: clamp( 28px, 3vw, 36px );
}