/* =========================================================================
   Catálogo Interactivo MPF3D
   Solo escritorio. Sin media queries (la versión responsive es otra iteración).

   Todos los selectores cuelgan de .ci-mpf3d para no chocar con el tema ni con
   Elementor. No hay reset global.

   Medidas y colores tomados de las capturas del Figma (frame de 1920px):
     contenedor 1270 · tarjeta 298x428 · gap 26 · botón filtros 300x48
     tarjeta de tipo 142x116 (gap 25) · pill de nivel 300x40 (gap 32)
     pill de opción alto 28 (gap 14 fila / 6 columna)
   ========================================================================= */

.ci-mpf3d {
	/* Paleta muestreada de los PNG */
	--ci-fondo: #1e2a2f;
	--ci-cian: #31b9cc;
	--ci-azul: #02698a;
	--ci-azul-borde: #06617e;
	--ci-blanco: #ffffff;
	--ci-texto-tenue: #cfd6d9;
	--ci-apagado: #3a5560;
	--ci-apagado-texto: #6b8a97;

	/* Altura de apilamiento del panel de filtros de responsive MIENTRAS ESTÁ
	   ABIERTO. Cerrado no lleva z-index, así que el catálogo no compite con el
	   header ni el footer del tema salvo en el momento en que el panel tapa la
	   pantalla, que es cuando debe estar por encima de todo.
	   Para ajustarlo basta con cambiar este número: la barra superior se
	   recalcula sola un punto por encima. */
	--ci-z-panel: 9999;

	--ci-ancho: 1272px;
	--ci-gap: 26px;
	/* Gap de la rejilla de productos, medido en el Figma nuevo. */
	--ci-gap-grid: 24px;
	--ci-cols: 4;

	box-sizing: border-box;
	width: 100%;
	background: var(--ci-fondo);
	padding: 40px 24px 64px;
	font-family: "Poppins", "Montserrat", -apple-system, BlinkMacSystemFont,
		"Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	color: var(--ci-blanco);
	line-height: 1.4;
	-webkit-font-smoothing: antialiased;
}

.ci-mpf3d *,
.ci-mpf3d *::before,
.ci-mpf3d *::after {
	box-sizing: border-box;
}

.ci-mpf3d .ci-inner {
	max-width: var(--ci-ancho);
	margin: 0 auto;
}

.ci-mpf3d .ci-noscript {
	margin: 0;
	color: var(--ci-texto-tenue);
	font-size: 15px;
}

/* Los temas suelen inyectar estilos en <button>; los neutralizamos aquí dentro. */
.ci-mpf3d button {
	margin: 0;
	font: inherit;
	color: inherit;
	background: none;
	border: 0;
	border-radius: 0;
	text-transform: none;
	letter-spacing: normal;
	box-shadow: none;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}

.ci-mpf3d button:focus-visible {
	outline: 2px solid var(--ci-cian);
	outline-offset: 2px;
}

/* --- Blindaje de los iconos SVG ---
   Los atributos de presentación (fill="..." stroke="..." escritos en la propia
   etiqueta) tienen MENOS peso que cualquier declaración CSS, así que una regla
   del tema tipo `svg path { fill: currentColor }` los pisa y deja los iconos
   deformados o invisibles. Aquí se fijan desde CSS, bajo la clase raíz, para
   que no dependan de los atributos. */
.ci-mpf3d svg {
	display: block;
	overflow: visible;
	max-width: none;
	max-height: none;
}

/* Iconos de trazo: el dibujo es la línea, el relleno tiene que ser nulo. */
.ci-mpf3d .ci-tipo-icono svg,
.ci-mpf3d .ci-tipo-icono svg *,
.ci-mpf3d .ci-papelera svg,
.ci-mpf3d .ci-papelera svg *,
.ci-mpf3d .ci-volteo-btn svg,
.ci-mpf3d .ci-volteo-btn svg *,
.ci-mpf3d .ci-chevron,
.ci-mpf3d .ci-chevron *,
.ci-mpf3d .ci-x,
.ci-mpf3d .ci-x * {
	fill: none;
	stroke: currentColor;
}

/* Iconos macizos: el dibujo es el relleno. */
.ci-mpf3d .ci-cols svg,
.ci-mpf3d .ci-cols svg * {
	fill: currentColor;
	stroke: none;
}

.ci-mpf3d button:disabled {
	cursor: not-allowed;
}

/* =========================================================================
   1. Barra superior
   ========================================================================= */

.ci-mpf3d .ci-toolbar {
	display: flex;
	align-items: center;
	gap: 36px;
	flex-wrap: wrap;
}

.ci-mpf3d .ci-toggle {
	/* Centrado explícito con flex y no confiando en el text-align por defecto
	   del <button>: algunos temas lo pisan y el texto se queda a la izquierda. */
	display: flex;
	align-items: center;
	justify-content: center;
	width: 300px;
	height: 48px;
	flex: 0 0 auto;
	padding: 0;
	background: var(--ci-cian);
	color: var(--ci-blanco);
	border-radius: 6px;
	font-size: 17px;
	font-weight: 500;
	line-height: 1;
	text-align: center;
	transition: background-color 0.15s ease;
}

.ci-mpf3d .ci-toggle:hover {
	background: #2aa8ba;
}

.ci-mpf3d .ci-chips {
	display: flex;
	align-items: center;
	gap: var(--ci-gap);
	flex-wrap: wrap;
}

.ci-mpf3d .ci-chip {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-width: 140px;
	height: 36px;
	padding: 0 18px;
	background: var(--ci-blanco);
	border: 2px solid var(--ci-azul-borde);
	border-radius: 999px;
	color: var(--ci-azul);
	font-size: 14px;
	font-weight: 500;
	white-space: nowrap;
}

.ci-mpf3d .ci-chip:hover {
	background: #eef7fa;
}

.ci-mpf3d .ci-chip .ci-x {
	display: block;
	width: 11px;
	height: 11px;
	flex: 0 0 auto;
}

.ci-mpf3d .ci-chip--borrar {
	font-weight: 600;
}

/* =========================================================================
   2. Panel de filtros
   ========================================================================= */

.ci-mpf3d .ci-panel {
	margin-top: 20px;
}

.ci-mpf3d .ci-panel[hidden] {
	display: none;
}

/* ---- 2a. Nivel 1: tipos. Siempre visible mientras el panel esté abierto ---- */

.ci-mpf3d .ci-tipos {
	display: flex;
	gap: 25px;
}

.ci-mpf3d .ci-tipo {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: 142px;
	height: 116px;
	background: var(--ci-blanco);
	border: 2px solid transparent;
	border-radius: 8px;
	transition: transform 0.15s ease, background-color 0.15s ease,
		border-color 0.15s ease, box-shadow 0.15s ease;
}

/* Los tres estados llevan fondo Y color de dibujo declarados. Dejar el fondo al
   aire hacía que el del tema se colase al pasar por encima y, al coincidir con
   el azul del icono, el dibujo se perdía. Mismo criterio que el nivel 2: tinte
   claro al pasar, relleno macizo al estar elegido. */
.ci-mpf3d .ci-tipo:hover,
.ci-mpf3d .ci-tipo:focus-visible {
	transform: translateY(-2px);
	background: #e6f4f8;
	border-color: var(--ci-cian);
	box-shadow: 0 6px 16px rgba(0, 0, 0, 0.28);
}

.ci-mpf3d .ci-tipo:hover .ci-tipo-icono,
.ci-mpf3d .ci-tipo:focus-visible .ci-tipo-icono {
	color: var(--ci-azul);
}

.ci-mpf3d .ci-tipo:hover .ci-tipo-label,
.ci-mpf3d .ci-tipo:focus-visible .ci-tipo-label {
	color: #1e2a2f;
}

/* Elegida: relleno azul y dibujo en blanco, como .ci-grupo.is-activo. Va después
   del hover para que al pasar por encima de la elegida siga mandando el relleno. */
.ci-mpf3d .ci-tipo.is-activo {
	background: var(--ci-azul);
	border-color: var(--ci-azul);
	box-shadow: 0 0 0 3px rgba(2, 105, 138, 0.35);
}

.ci-mpf3d .ci-tipo.is-activo:hover,
.ci-mpf3d .ci-tipo.is-activo:focus-visible {
	background: #05769a;
	border-color: #05769a;
}

.ci-mpf3d .ci-tipo.is-activo .ci-tipo-icono,
.ci-mpf3d .ci-tipo.is-activo .ci-tipo-label {
	color: var(--ci-blanco);
}

.ci-mpf3d .ci-tipo-icono {
	display: block;
	width: 42px;
	height: 42px;
	color: var(--ci-azul);
}

.ci-mpf3d .ci-tipo-label {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.06em;
	color: #1e2a2f;
	text-transform: uppercase;
}

/* ---- 2b. Pills de nivel ---- */

.ci-mpf3d .ci-grupos {
	display: flex;
	gap: 32px;
	margin-top: 18px;
}

.ci-mpf3d .ci-grupo {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 300px;
	height: 40px;
	background: transparent;
	border: 1px solid var(--ci-cian);
	border-radius: 6px;
	color: var(--ci-cian);
	font-size: 15px;
	font-weight: 500;
	transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.ci-mpf3d .ci-grupo:hover:not(:disabled) {
	background: rgba(49, 185, 204, 0.12);
}

/* Relleno azul: el nivel está desplegado o ya tiene una opción elegida. */
.ci-mpf3d .ci-grupo.is-activo {
	background: var(--ci-azul);
	border-color: var(--ci-azul);
	color: var(--ci-blanco);
}

.ci-mpf3d .ci-grupo.is-activo:hover {
	background: #05769a;
}

.ci-mpf3d .ci-grupo:disabled {
	background: transparent;
	border-color: var(--ci-apagado);
	color: var(--ci-apagado-texto);
}

/* El nivel que aún no toca se oculta, no se apaga. Hace falta declararlo: el
   display del UA para [hidden] lo pisa el display:inline-flex de arriba. */
.ci-mpf3d .ci-grupo[hidden] {
	display: none;
}

.ci-mpf3d .ci-chevron {
	display: block;
	width: 12px;
	height: 12px;
	flex: 0 0 auto;
	transition: transform 0.15s ease;
}

.ci-mpf3d .ci-grupo.is-activo .ci-chevron {
	transform: rotate(90deg);
}

/* ---- 2c. Rejilla de opciones. El nº de columnas lo fija el JS ---- */

.ci-mpf3d .ci-opciones {
	display: grid;
	grid-template-columns: repeat(var(--ci-cols), 1fr);
	gap: 14px 6px;
	margin-top: 26px;
}

.ci-mpf3d .ci-opciones[hidden] {
	display: none;
}

.ci-mpf3d .ci-opcion {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 28px;
	padding: 0 8px;
	background: var(--ci-blanco);
	border: 1px solid var(--ci-azul-borde);
	border-radius: 999px;
	color: var(--ci-azul);
	font-size: 12.5px;
	font-weight: 500;
	line-height: 1;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	transition: background-color 0.12s ease, color 0.12s ease;
}

.ci-mpf3d .ci-opcion:hover {
	background: #d9edf4;
}

.ci-mpf3d .ci-opcion.is-activo {
	background: var(--ci-azul);
	color: var(--ci-blanco);
}

/* =========================================================================
   3. Rejilla de productos
   ========================================================================= */

/* Escritorio: 3 columnas (antes 4) y 24 productos por página = 8 filas. */
.ci-mpf3d .ci-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--ci-gap-grid);
	margin-top: 32px;
	transition: opacity 0.15s ease;
}

.ci-mpf3d .ci-grid.is-cargando {
	opacity: 0.45;
	pointer-events: none;
}

/* Tramo intermedio: por debajo de ~1340px las tres columnas dejaban la tarjeta
   en menos de 400px y la ficha del dorso ya no cabía (medido contra las 1.076
   fichas). Con dos columnas la tarjeta vuelve a tener sitio de sobra. La foto no
   se ve afectada: el 4/3 no depende del ancho. */
@media (min-width: 769px) and (max-width: 1339px) {
	.ci-mpf3d .ci-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}


.ci-mpf3d .ci-vacio {
	grid-column: 1 / -1;
	padding: 70px 0;
	text-align: center;
	color: var(--ci-texto-tenue);
	font-size: 16px;
}

/* ---- 3a. Tarjeta con dos caras ---- */

/* La tarjeta es horizontal. En el Figma medía 408x311 (1,312), pero las fotos
   del catálogo son 4:3 clavado: de los 3.103 archivos de catalogo-mpf3d, 3.053
   dan 1,333 (1200x900 la inmensa mayoría) y el resto se queda a milésimas. Con
   408x311 la foto entraba por ancho y dejaba dos bandas horizontales de ~2px.
   Poniendo 4/3 la imagen ocupa la cara entera y no sobra fondo. */
.ci-mpf3d .ci-card {
	position: relative;
	aspect-ratio: 4 / 3;
	perspective: 1400px;
}

.ci-mpf3d .ci-card-giro {
	position: relative;
	width: 100%;
	height: 100%;
	transform-style: preserve-3d;
	-webkit-transform-style: preserve-3d;
	transition: transform 0.55s cubic-bezier(0.4, 0.1, 0.2, 1);
}

.ci-mpf3d .ci-card.is-volteada .ci-card-giro {
	transform: rotateY(180deg);
	-webkit-transform: rotateY(180deg);
}

.ci-mpf3d .ci-cara {
	position: absolute;
	inset: 0;
	overflow: hidden;
	border-radius: 10px;
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
	/* Cada cara aplana su propio contenido. Sin esto, Safari en iOS ordena los
	   hijos en el espacio 3D en lugar de por orden de pintado, y la marca de
	   agua acaba tapando el texto de la ficha. */
	transform-style: flat;
	-webkit-transform-style: flat;
}

/* Las dos caras estaban en el mismo plano (z=0). Chrome y Firefox lo resuelven
   con backface-visibility, pero iOS entra en z-fighting y muestra la foto de la
   cara frontal en lugar del dorso. Separándolas 1px en Z deja de haber empate. */
.ci-mpf3d .ci-frente {
	transform: translateZ(1px);
	-webkit-transform: translateZ(1px);
}

/* Cara frontal: la foto sobre un degradado de estudio.
   Calibrado contra el fondo real de las fotos del catálogo (medido: de #F1F1F1
   en su borde superior a #D5DDE1 abajo, con un tono ligeramente frío), para que
   las bandas que deja object-fit:contain no canten contra la imagen.
   No se usa el #BEBEC0-#DCDCDC del Figma porque allí las fotos eran verticales
   y llenaban la tarjeta; las reales son horizontales. */
.ci-mpf3d .ci-frente {
	background: linear-gradient(180deg, #eff1f3 0%, #e2e7ea 55%, #d7dee2 100%);
}

.ci-mpf3d .ci-card-img {
	position: relative;
	z-index: 1;
	display: block;
	width: 100%;
	height: 100%;
	/* contain, no cover: las fotos son horizontales y con cover se recortaban
	   los laterales del producto. */
	object-fit: contain;
}

.ci-mpf3d .ci-ph {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	padding: 24px;
	text-align: center;
	color: #6a7278;
	font-size: 13px;
	font-weight: 500;
	line-height: 1.5;
}

/* Cara trasera: ficha del producto. */
.ci-mpf3d .ci-dorso {
	transform: rotateY(180deg) translateZ(1px);
	-webkit-transform: rotateY(180deg) translateZ(1px);
	background: linear-gradient(180deg, #edeeef 0%, #fcfcfc 100%);
}

/* La foto se repite muy tenue detrás del texto, como en el diseño. */
.ci-mpf3d .ci-dorso-fondo {
	position: absolute;
	inset: 0;
	z-index: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0.1;
	pointer-events: none;
}

/* z-index explícito: sin él, iOS podía pintar la marca de agua por encima. */
/* Espaciado comprobado contra las 1.076 fichas reales: con la tarjeta a 306px
   de alto (el 4/3) la más larga —título de 80 caracteres, material de 85 y
   descripción de 150— entra entera y no la corta el overflow:hidden. */
.ci-mpf3d .ci-dorso-txt {
	position: relative;
	z-index: 1;
	height: 100%;
	padding: 18px 20px;
	overflow: hidden;
}

.ci-mpf3d .ci-dorso-txt .ci-dorso-titulo {
	/* Hueco a la derecha para que el título no pase por debajo del botón de
	   volteo, que no gira con la tarjeta y sigue estando encima. */
	margin: 0 44px 10px 0;
	color: var(--ci-azul);
	font-size: 17px;
	font-weight: 700;
	line-height: 1.25;
}

/* Ficha a dos columnas: al ser la tarjeta horizontal, el flujo del grid coloca
   Lugar y Peana en la primera fila, Material debajo a la izquierda y
   Descripción ocupando el ancho completo. */
.ci-mpf3d .ci-ficha {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0 18px;
	margin: 0;
}

.ci-mpf3d .ci-campo {
	margin: 0 0 8px;
	min-width: 0;
}

/* Lugar y Peana comparten la primera fila; Material y Descripción ocupan las
   dos columnas. En el Figma el material iba en media columna, pero partía los
   nombres de color en tiras de dos palabras y se decidió darle el ancho entero. */
.ci-mpf3d .ci-campo--material,
.ci-mpf3d .ci-campo--descripcion {
	grid-column: 1 / -1;
}

.ci-mpf3d .ci-campo--descripcion {
	margin-bottom: 0;
}

.ci-mpf3d .ci-ficha dt {
	margin: 0 0 2px;
	color: var(--ci-azul);
	font-size: 14px;
	font-weight: 700;
}

.ci-mpf3d .ci-ficha dd {
	margin: 0;
	color: #1a1a1a;
	font-size: 14px;
	font-weight: 400;
	line-height: 1.35;
	overflow-wrap: break-word;
}

/* ---- 3b. Zona de volteo (arriba a la derecha) ----
   Va FUERA de .ci-card-giro a propósito: al no girar con la tarjeta, el ratón
   nunca la pierde y no se produce el parpadeo de entrar/salir en bucle. */

/* El contenedor solo coloca el botón: no recibe puntero, así el área sensible
   es exactamente el círculo de 34px y no el cuadrado de 78px que lo envuelve. */
.ci-mpf3d .ci-zona-volteo {
	position: absolute;
	top: 0;
	right: 0;
	z-index: 3;
	display: flex;
	align-items: flex-start;
	justify-content: flex-end;
	width: 78px;
	height: 78px;
	padding: 14px;
	pointer-events: none;
}

.ci-mpf3d .ci-volteo-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	background: rgba(255, 255, 255, 0.9);
	border: 1px solid #cfd4d6;
	border-radius: 50%;
	color: var(--ci-azul);
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
	transition: background-color 0.15s ease, transform 0.15s ease;
	pointer-events: auto;
	cursor: pointer;
}

.ci-mpf3d .ci-volteo-btn:hover,
.ci-mpf3d .ci-volteo-btn:focus-visible {
	background: #ffffff;
	transform: scale(1.08);
}

.ci-mpf3d .ci-volteo-btn svg {
	display: block;
	width: 17px;
	height: 17px;
}

/* =========================================================================
   4. Paginación
   ========================================================================= */

.ci-mpf3d .ci-footer {
	margin-top: 30px;
	text-align: center;
}

.ci-mpf3d .ci-pagina {
	margin: 0;
	color: var(--ci-texto-tenue);
	font-size: 14px;
}

.ci-mpf3d .ci-paginacion {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin-top: 18px;
	flex-wrap: wrap;
}

.ci-mpf3d .ci-pag {
	min-width: 38px;
	height: 38px;
	padding: 0 10px;
	background: transparent;
	border: 1px solid var(--ci-cian);
	border-radius: 6px;
	color: var(--ci-cian);
	font-size: 14px;
	font-weight: 500;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.ci-mpf3d .ci-pag:hover:not(:disabled):not(.is-activo) {
	background: rgba(49, 185, 204, 0.15);
}

.ci-mpf3d .ci-pag.is-activo {
	background: var(--ci-azul);
	border-color: var(--ci-azul);
	color: var(--ci-blanco);
}

.ci-mpf3d .ci-pag:disabled {
	border-color: var(--ci-apagado);
	color: var(--ci-apagado-texto);
}

.ci-mpf3d .ci-pag--flecha {
	font-size: 18px;
	line-height: 1;
}

.ci-mpf3d .ci-elipsis {
	color: var(--ci-apagado-texto);
	font-size: 14px;
	padding: 0 2px;
}

/* =========================================================================
   5. Elementos exclusivos de responsive
   Se pintan siempre en el HTML pero aquí, en escritorio, se ocultan. El
   comportamiento de los filtros de escritorio no se toca en ningún caso.
   ========================================================================= */

.ci-mpf3d .ci-cols,
.ci-mpf3d .ci-papelera,
.ci-mpf3d .ci-aviso,
.ci-mpf3d .ci-aplicar {
	display: none;
}

/* En el extremo estrecho del tramo de dos columnas (justo por encima del corte
   de responsive) la tarjeta ronda los 345px y la ficha se aprieta un punto más
   para seguir entrando entera. Va aquí, después de las reglas del dorso, porque
   una media query no añade peso: si fuese antes, la perdería. */
@media (min-width: 769px) and (max-width: 900px) {

	.ci-mpf3d .ci-dorso-txt {
		padding: 14px 16px;
	}

	.ci-mpf3d .ci-dorso-txt .ci-dorso-titulo {
		margin-bottom: 6px;
		font-size: 14px;
	}

	.ci-mpf3d .ci-campo {
		margin-bottom: 5px;
	}

	.ci-mpf3d .ci-ficha dt,
	.ci-mpf3d .ci-ficha dd {
		font-size: 12px;
	}

	.ci-mpf3d .ci-ficha dd {
		line-height: 1.25;
	}
}

/* =========================================================================
   6. RESPONSIVE  (<= 768px)
   Medidas tomadas de las capturas, hechas a 390px de ancho:
     contenedor 358 (16px de margen a cada lado)
     tarjeta 175 x 133 · gap 8 · mismo ratio 1,32 que en escritorio
     botón 267 + conmutador/papelera 81 (gap 9) · alto 40
     tarjetas de tipo 175 x 46 · pills de nivel 358 x 40 · opciones 175 x 34
   ========================================================================= */

@media (max-width: 768px) {

	.ci-mpf3d {
		padding: 24px 16px 40px;
	}

	.ci-mpf3d .ci-inner {
		max-width: none;
	}

	/* ---- 6a. Barra superior ---- */

	.ci-mpf3d .ci-toolbar {
		display: grid;
		grid-template-columns: 1fr 81px;
		align-items: center;
		gap: 9px;
	}

	.ci-mpf3d .ci-toggle {
		width: auto;
		height: 40px;
		font-size: 16px;
	}

	/* El conmutador solo tiene sentido con la rejilla a la vista; la papelera
	   solo dentro del panel. Nunca se ven los dos a la vez. */
	.ci-mpf3d .ci-cols {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 81px;
		height: 40px;
		background: var(--ci-azul);
		border-radius: 6px;
		color: #fff;
	}

	.ci-mpf3d.is-panel-abierto .ci-cols {
		display: none;
	}

	.ci-mpf3d .ci-cols svg {
		display: block;
		width: 24px;
		height: 24px;
	}

	/* Se muestra el icono del modo activo. */
	.ci-mpf3d .ci-cols .ci-icono-1 { display: none; }
	.ci-mpf3d.is-cols-1 .ci-cols .ci-icono-1 { display: block; }
	.ci-mpf3d.is-cols-1 .ci-cols .ci-icono-2 { display: none; }

	.ci-mpf3d.is-panel-abierto .ci-papelera {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 81px;
		height: 40px;
		background: var(--ci-azul);
		border-radius: 6px;
		color: #fff;
	}

	.ci-mpf3d .ci-papelera[hidden] {
		display: none;
	}

	.ci-mpf3d .ci-papelera svg {
		display: block;
		width: 22px;
		height: 22px;
	}

	/* Chips de filtros aplicados: justo debajo del botón, a todo el ancho. */
	.ci-mpf3d .ci-chips {
		grid-column: 1 / -1;
		gap: 9px;
	}

	.ci-mpf3d .ci-chips:empty {
		display: none;
	}

	.ci-mpf3d .ci-chip {
		min-width: 0;
		height: 33px;
		padding: 0 14px;
		border-width: 1px;
		font-size: 13.5px;
	}

	/* ---- 6b. Aviso de pulsar la tarjeta ---- */

	.ci-mpf3d .ci-aviso {
		display: block;
		overflow: hidden;
		margin: 9px 0 0;
		padding: 10px 16px;
		max-height: 90px;
		background: #93999b;
		border-radius: 8px;
		color: #fff;
		font-size: 15px;
		font-weight: 700;
		line-height: 1.3;
		text-align: center;
		opacity: 1;
		/* Se colapsa el alto y los márgenes a la vez para que al desaparecer no
		   dé un salto: la rejilla sube de forma continua. */
		transition: max-height 0.35s ease, opacity 0.25s ease,
			margin 0.35s ease, padding 0.35s ease;
	}

	.ci-mpf3d .ci-aviso.is-oculto {
		max-height: 0;
		margin-top: 0;
		padding-top: 0;
		padding-bottom: 0;
		opacity: 0;
	}

	/* Si en este navegador ya se pulsó una tarjeta alguna vez, el aviso no se
	   anima: desaparece sin más, para no ver un colapso en cada carga. */
	.ci-mpf3d .ci-aviso.is-visto {
		display: none;
	}

	/* ---- 6c. Rejilla ---- */

	.ci-mpf3d .ci-grid {
		gap: 8px;
		margin-top: 9px;
	}

	.ci-mpf3d .ci-grid--cols-2 {
		grid-template-columns: repeat(2, 1fr);
	}

	.ci-mpf3d .ci-grid--cols-1 {
		grid-template-columns: 1fr;
	}

	/* El 4/3 de escritorio vale para los dos modos: es la proporción real de las
	   fotos, así que ni en una ni en dos columnas queda fondo a la vista.
	   En responsive se voltea pulsando la tarjeta entera. */
	.ci-mpf3d .ci-card {
		cursor: pointer;
	}

	.ci-mpf3d .ci-zona-volteo {
		display: none;
	}

	/* Ficha del dorso: se conserva el reparto a dos columnas del diseño. El
	   texto de la descripción puede recortarse, es asumido. */
	.ci-mpf3d .ci-dorso-txt {
		padding: 10px 9px;
	}

	.ci-mpf3d .ci-dorso-txt .ci-dorso-titulo {
		margin: 0 0 6px;
		font-size: 10px;
		line-height: 1.2;
	}

	.ci-mpf3d .ci-ficha {
		gap: 0 6px;
	}

	.ci-mpf3d .ci-campo {
		margin-bottom: 4px;
	}


	.ci-mpf3d .ci-ficha dt {
		margin-bottom: 0;
		font-size: 8px;
	}

	.ci-mpf3d .ci-ficha dd {
		font-size: 8px;
		line-height: 1.25;
	}

	/* Una columna es el modo de lectura: aquí la ficha tiene que caber entera.
	   La tarjeta mide 343x257 a 390px de ancho; con el padding de 20 y los
	   márgenes de 10px anteriores las fichas más largas perdían las últimas
	   líneas, así que van un punto más apretadas. */
	.ci-mpf3d .ci-grid--cols-1 .ci-dorso-txt {
		padding: 16px 16px;
	}

	.ci-mpf3d .ci-grid--cols-1 .ci-dorso-txt .ci-dorso-titulo { font-size: 15px; margin-bottom: 8px; line-height: 1.25; }
	.ci-mpf3d .ci-grid--cols-1 .ci-ficha { gap: 0 14px; }
	.ci-mpf3d .ci-grid--cols-1 .ci-campo { margin-bottom: 6px; }
	.ci-mpf3d .ci-grid--cols-1 .ci-ficha dt { font-size: 12.5px; margin-bottom: 1px; }
	.ci-mpf3d .ci-grid--cols-1 .ci-ficha dd { font-size: 12.5px; line-height: 1.3; }

	/* Pantallas pequeñas (iPhone SE/mini y Android de 360): la tarjeta baja de
	   los 313px de alto y hay que apretar otro punto. */
	@media (max-width: 380px) {
		.ci-mpf3d .ci-grid--cols-1 .ci-dorso-txt { padding: 13px 14px; }
		.ci-mpf3d .ci-grid--cols-1 .ci-dorso-txt .ci-dorso-titulo { font-size: 14px; margin-bottom: 6px; }
		.ci-mpf3d .ci-grid--cols-1 .ci-campo { margin-bottom: 5px; }
		.ci-mpf3d .ci-grid--cols-1 .ci-ficha dt,
		.ci-mpf3d .ci-grid--cols-1 .ci-ficha dd { font-size: 11.5px; }
	}

	/* ---- 6d. Paginación ---- */

	.ci-mpf3d .ci-footer {
		margin-top: 18px;
	}

	.ci-mpf3d .ci-paginacion {
		gap: 6px;
	}

	.ci-mpf3d .ci-pag {
		min-width: 34px;
		height: 34px;
		padding: 0 7px;
		font-size: 13px;
	}

	/* ---- 6e. Panel de filtros: se despliega desde la izquierda ---- */

	/* Cerrado: sin z-index y oculto. Sigue siendo un elemento fijo del tamaño
	   del viewport, pero ni se apila por encima de nada ni es alcanzable con el
	   tabulador. El z-index y la visibilidad se devuelven al final de la
	   animación de cierre (delay = duración del deslizamiento), para que no
	   desaparezca de golpe a mitad de camino. */
	.ci-mpf3d .ci-panel {
		position: fixed;
		inset: 0;
		z-index: 0;
		visibility: hidden;
		display: flex;
		flex-direction: column;
		margin: 0;
		padding: 24px 16px 0;
		background: #0f1417;
		transform: translateX(-100%);
		transition: transform 0.32s cubic-bezier(0.4, 0.1, 0.2, 1),
			visibility 0s linear 0.32s,
			z-index 0s linear 0.32s;
	}

	/* Siempre presente en el DOM para poder animarlo: el atributo hidden lo
	   sacaría de golpe, así que se neutraliza y se controla con la clase. */
	.ci-mpf3d .ci-panel[hidden] {
		display: flex;
	}

	/* Abierto: se eleva y se hace visible de inmediato, sin esperar. */
	.ci-mpf3d.is-panel-abierto .ci-panel {
		z-index: var(--ci-z-panel);
		visibility: visible;
		transform: translateX(0);
		transition: transform 0.32s cubic-bezier(0.4, 0.1, 0.2, 1),
			visibility 0s linear 0s,
			z-index 0s linear 0s;
	}

	/* Con el panel CERRADO la barra no lleva z-index ni posicionamiento: así el
	   header del tema puede pasar por encima al hacer scroll. Antes tenía 100000
	   fijo y tapaba el header incluso sin el panel abierto.
	   Solo cuando el panel está abierto se eleva, y justo un punto por encima de
	   él, porque contiene "Ocultar Filtros" y la papelera. */
	.ci-mpf3d.is-panel-abierto .ci-toolbar {
		position: fixed;
		top: 24px;
		left: 16px;
		right: 16px;
		z-index: calc(var(--ci-z-panel) + 1);
	}

	.ci-mpf3d.is-panel-abierto .ci-chips {
		display: none;
	}

	/* Hueco para que el contenido del panel no quede debajo de la barra. */
	.ci-mpf3d .ci-panel-scroll {
		flex: 1 1 auto;
		overflow-y: auto;
		padding-top: 49px;
		-webkit-overflow-scrolling: touch;
	}

	/* ---- 6f. Tarjetas de tipo: 2x2, icono a la izquierda ---- */

	.ci-mpf3d .ci-tipos {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 9px 8px;
		margin-top: 9px;
	}

	.ci-mpf3d .ci-tipo {
		flex-direction: row;
		justify-content: flex-start;
		gap: 8px;
		width: auto;
		height: 46px;
		padding: 0 10px;
		border-width: 1px;
		border-color: var(--ci-blanco);
	}

	.ci-mpf3d .ci-tipo:hover,
	.ci-mpf3d .ci-tipo:focus-visible {
		transform: none;
		box-shadow: none;
	}

	.ci-mpf3d .ci-tipo-icono {
		width: 26px;
		height: 26px;
		flex: 0 0 auto;
	}

	.ci-mpf3d .ci-tipo-label {
		font-size: 11.5px;
		letter-spacing: 0.02em;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	/* Seleccionada: relleno oscuro y texto blanco (en escritorio es al revés,
	   tarjeta blanca con anillo). */
	.ci-mpf3d .ci-tipo.is-activo {
		background: #0a3746;
		border-color: var(--ci-cian);
		box-shadow: none;
	}

	.ci-mpf3d .ci-tipo.is-activo .ci-tipo-label {
		color: var(--ci-blanco);
	}

	.ci-mpf3d .ci-tipo.is-activo .ci-tipo-icono {
		color: var(--ci-cian);
	}

	/* En responsive la elegida es oscura (Figma), no azul: se mantiene también
	   al pasar por encima. */
	.ci-mpf3d .ci-tipo.is-activo:hover,
	.ci-mpf3d .ci-tipo.is-activo:focus-visible {
		background: #0a3746;
		border-color: var(--ci-cian);
	}

	/* ---- 6g. Pills de nivel y opciones ---- */

	.ci-mpf3d .ci-grupos {
		display: block;
		margin-top: 16px;
	}

	.ci-mpf3d .ci-grupo {
		width: 100%;
		height: 40px;
		font-size: 16px;
	}

	.ci-mpf3d .ci-grupo + .ci-grupo {
		margin-top: 16px;
	}

	/* Aquí el chevron indica abierto/cerrado, no si hay selección: en menu 3
	   "Categoría" está rellena pero con la flecha a la derecha porque está
	   cerrada. En escritorio es al contrario y no se toca. */
	.ci-mpf3d .ci-grupo.is-activo .ci-chevron {
		transform: none;
	}

	.ci-mpf3d .ci-grupo.is-abierto .ci-chevron {
		transform: rotate(90deg);
	}

	.ci-mpf3d .ci-opciones {
		grid-template-columns: repeat(2, 1fr) !important;
		gap: 8px;
		margin-top: 8px;
		padding-bottom: 16px;
	}

	.ci-mpf3d .ci-opcion {
		height: 34px;
		font-size: 13.5px;
	}

	/* ---- 6h. Mostrar resultados: fijo al fondo del panel ---- */

	.ci-mpf3d .ci-aplicar {
		display: flex;
		align-items: center;
		justify-content: center;
		flex: 0 0 auto;
		width: 100%;
		height: 44px;
		margin: 0 0 16px;
		padding: 0;
		background: var(--ci-cian);
		border-radius: 8px;
		color: var(--ci-blanco);
		font-size: 16px;
		font-weight: 500;
		line-height: 1;
		text-align: center;
	}
}