/* Hallmark · component: modal (Catálogo 2026) · genre: editorial · theme: sistema --yoo-*
 * states: default · hover · focus · active · disabled · loading(n/a) · error(n/a) · success(n/a)
 * contrast: pass · Coherente con el sistema de diseño del sitio (azul de marca, sin serif ni dorado).
 */

.mrc-catmodal {
	position: fixed;
	inset: 0;
	z-index: var(--yoo-z-modal, 100050);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: clamp(1rem, 4vw, 2.5rem);
}
.mrc-catmodal[hidden] { display: none; }

/* Velo oscuro */
.mrc-catmodal__overlay {
	position: absolute;
	inset: 0;
	background: var(--yoo-color-scrim, rgba(13, 18, 28, 0.62));
	opacity: 0;
	transition: opacity 0.24s var(--yoo-ease-in-out, cubic-bezier(0.4, 0, 0.2, 1));
}
.mrc-catmodal.is-open .mrc-catmodal__overlay { opacity: 1; }

/* Diálogo: dos columnas (portada + info) */
.mrc-catmodal__dialog {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
	width: min(880px, 100%);
	max-height: calc(100vh - 3rem);
	background: var(--yoo-color-surface, #fff);
	border-radius: var(--yoo-radius-xl, 16px);
	overflow: hidden;
	box-shadow: 0 24px 70px -20px rgba(13, 18, 28, 0.45);
	/* animación de entrada */
	opacity: 0;
	transform: translateY(12px) scale(0.98);
	transition:
		opacity 0.26s var(--yoo-ease-in-out, cubic-bezier(0.4, 0, 0.2, 1)),
		transform 0.26s var(--yoo-ease-in-out, cubic-bezier(0.4, 0, 0.2, 1));
}
.mrc-catmodal.is-open .mrc-catmodal__dialog {
	opacity: 1;
	transform: none;
}

/* Portada del catálogo */
.mrc-catmodal__figure {
	margin: 0;
	background: var(--yoo-color-surface-2, #f3f5f9);
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}
.mrc-catmodal__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center top;
}

/* Info */
.mrc-catmodal__body {
	position: relative;
	padding: clamp(1.5rem, 3vw, 2.5rem);
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-width: 0;
	overflow: hidden;
	isolation: isolate;
	/* Degradado base muy tenue en el azul de marca (esquina superior derecha) */
	background:
		radial-gradient(120% 90% at 100% 0%,
			color-mix(in srgb, var(--yoo-color-primary, #125bc9) 6%, transparent) 0%,
			transparent 52%),
		var(--yoo-color-surface, #fff);
}
/* Patrón de PUNTOS discreto en la esquina inferior derecha (geométrico, sobrio) */
.mrc-catmodal__body::before {
	content: "";
	position: absolute;
	right: 22px;
	bottom: 22px;
	width: 120px;
	height: 84px;
	z-index: -1;
	pointer-events: none;
	background-image: radial-gradient(
		color-mix(in srgb, var(--yoo-color-primary, #125bc9) 30%, transparent) 1.4px,
		transparent 1.5px);
	background-size: 14px 14px;
	-webkit-mask: linear-gradient(135deg, transparent 0%, #000 85%);
			mask: linear-gradient(135deg, transparent 0%, #000 85%);
	opacity: .7;
}
/* Una fina línea diagonal de acento arriba-izquierda (marca el rincón, discreta) */
.mrc-catmodal__body::after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 3px;
	height: 46px;
	z-index: -1;
	pointer-events: none;
	background: var(--yoo-color-primary, #125bc9);
	border-radius: 0 0 3px 0;
	opacity: .55;
}
/* El contenido siempre por encima del fondo decorativo */
.mrc-catmodal__body > * { position: relative; z-index: 1; }
.mrc-catmodal__eyebrow {
	margin: 0 0 0.5rem;
	font-size: 0.72rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.16em;
	color: var(--yoo-color-primary, #125bc9);
}
.mrc-catmodal__title {
	margin: 0 0 0.75rem;
	font-family: var(--yoo-font-family, inherit);
	font-weight: 700;
	font-size: clamp(1.5rem, 3.2vw, 2.1rem);
	line-height: 1.1;
	letter-spacing: -0.01em;
	color: var(--yoo-color-text, #1a1a1a);
	overflow-wrap: anywhere;
}
.mrc-catmodal__text {
	margin: 0 0 1.5rem;
	font-size: 0.98rem;
	line-height: 1.6;
	color: var(--yoo-color-text-body, #333);
	max-width: 44ch;
}
.mrc-catmodal__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.7rem;
}

/* Botones (8 estados) — blindados contra los estilos globales de .button/a/button
   del tema (eran los que rompían el hover). */
.mrc-catmodal .mrc-catmodal__btn {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	gap: 0.5rem;
	margin: 0;
	padding: 0.75rem 1.4rem !important;
	width: auto;
	min-width: 0;
	height: auto;
	border-radius: var(--yoo-radius-md, 8px) !important;
	font-family: var(--yoo-font-family, inherit);
	font-weight: 600;
	font-size: 0.95rem;
	line-height: 1 !important;
	letter-spacing: 0;
	white-space: nowrap;
	text-decoration: none !important;
	text-transform: none;
	cursor: pointer;
	border: 1px solid transparent;
	box-shadow: none;
	-webkit-appearance: none;
	appearance: none;
	transition:
		background-color 0.16s var(--yoo-ease-in-out, ease),
		color 0.16s var(--yoo-ease-in-out, ease),
		border-color 0.16s var(--yoo-ease-in-out, ease),
		transform 0.16s var(--yoo-ease-in-out, ease) !important;
}
.mrc-catmodal .mrc-catmodal__btn::before,
.mrc-catmodal .mrc-catmodal__btn::after { content: none !important; } /* mata pseudo-iconos del tema */
.mrc-catmodal .mrc-catmodal__btn svg { width: 18px; height: 18px; display: block; stroke: currentColor; }

/* Primary */
.mrc-catmodal .mrc-catmodal__btn--primary,
.mrc-catmodal a.mrc-catmodal__btn--primary {
	background: var(--yoo-color-primary, #125bc9) !important;
	color: #ffffff !important;
	border-color: var(--yoo-color-primary, #125bc9) !important;
}
.mrc-catmodal .mrc-catmodal__btn--primary:hover,
.mrc-catmodal a.mrc-catmodal__btn--primary:hover {
	background: var(--yoo-color-primary-hover, #0f4ea8) !important;
	color: #ffffff !important;
	border-color: var(--yoo-color-primary-hover, #0f4ea8) !important;
	transform: translateY(-1px);
}
.mrc-catmodal .mrc-catmodal__btn--primary:focus-visible { outline: 2px solid var(--yoo-color-text, #1a1a1a); outline-offset: 2px; }
.mrc-catmodal .mrc-catmodal__btn--primary:active { transform: translateY(0); }

/* Ghost */
.mrc-catmodal .mrc-catmodal__btn--ghost {
	background: transparent !important;
	color: var(--yoo-color-text, #1a1a1a) !important;
	border-color: var(--yoo-color-line, #e9ecf1) !important;
}
.mrc-catmodal .mrc-catmodal__btn--ghost:hover {
	border-color: var(--yoo-color-primary, #125bc9) !important;
	background: var(--yoo-color-surface-2, #f3f5f9) !important;
	color: var(--yoo-color-text, #1a1a1a) !important;
}
.mrc-catmodal .mrc-catmodal__btn--ghost:focus-visible { outline: 2px solid var(--yoo-color-primary, #125bc9); outline-offset: 2px; }
.mrc-catmodal .mrc-catmodal__btn--ghost:active { transform: translateY(1px); }

/* Cerrar (X) — blindado contra estilos globales del tema sobre <button> */
.mrc-catmodal .mrc-catmodal__close {
	position: absolute;
	top: 0.85rem;
	right: 0.85rem;
	z-index: 3;
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 40px;
	height: 40px;
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 1px solid var(--yoo-color-line, #e9ecf1) !important;
	border-radius: 50% !important;
	background: #ffffff !important;
	color: #1a1a1a !important;          /* color del trazo del aspa (currentColor) */
	line-height: 1 !important;
	cursor: pointer;
	box-shadow: 0 2px 10px rgba(13, 18, 28, 0.16);
	transition: background-color 0.16s ease, color 0.16s ease, transform 0.16s ease, border-color 0.16s ease;
	-webkit-appearance: none;
	appearance: none;
}
.mrc-catmodal .mrc-catmodal__close svg {
	display: block;
	width: 20px;
	height: 20px;
	stroke: currentColor;               /* garantiza que el aspa se vea (no blanca) */
}
.mrc-catmodal .mrc-catmodal__close:hover {
	background: var(--yoo-color-primary, #125bc9) !important;
	color: #ffffff !important;
	border-color: var(--yoo-color-primary, #125bc9) !important;
	transform: rotate(90deg);
}
.mrc-catmodal .mrc-catmodal__close:focus-visible {
	outline: 2px solid var(--yoo-color-primary, #125bc9);
	outline-offset: 2px;
}

/* Responsive: apila portada arriba, info abajo */
@media (max-width: 640px) {
	.mrc-catmodal__dialog {
		grid-template-columns: 1fr;
		grid-template-rows: auto 1fr;
		max-height: calc(100vh - 2rem);
		overflow-y: auto;
	}
	.mrc-catmodal__figure { max-height: 42vh; }
	.mrc-catmodal__img { max-height: 42vh; }
	.mrc-catmodal__actions .mrc-catmodal__btn { flex: 1 1 auto; }
}

/* Reduced motion: sin desplazamientos, solo aparición instantánea */
@media (prefers-reduced-motion: reduce) {
	.mrc-catmodal__overlay,
	.mrc-catmodal__dialog {
		transition: opacity 0.12s linear;
		transform: none !important;
	}
	.mrc-catmodal__btn,
	.mrc-catmodal__close { transition: none; }
	.mrc-catmodal__close:hover { transform: none; }
	.mrc-catmodal__btn--primary:hover { transform: none; }
}