/* Copia de assets/mcf.css (plugin MTG Canarias – Ficha 1.12.1). La Tienda solo la usa cuando ese plugin no está instalado, para que se vea igual. No editar aquí: se actualiza copiando el original. */
/* MTG Canarias – Ficha de carta
 * Las tarjetas de cartas y de mazos NO se estilan aquí: usan bcs.css (bulk-card-search) y
 * mcm.css (Mazos). Aquí solo va la estructura de la ficha y el carrusel.
 */

.mcf-ficha {
	--mcf-tinta: #151515;
	--mcf-suave: #6d6d72;
	--mcf-linea: #ececef;
	--mcf-fondo-suave: #f5f5f7;
	--mcf-acento: #e96400;
	--mcf-gap: 20px;
	display: block;
	width: 100%;
	color: var(--mcf-tinta);
	background: #fff;
	font-size: 15px;
	line-height: 1.5;
}
.mcf-ficha *, .mcf-ficha *::before, .mcf-ficha *::after { box-sizing: border-box; }

.mcf-contenedor { width: 100%; max-width: 1820px; margin: 0 auto; padding: 0 48px; }
@media (max-width: 1024px) { .mcf-contenedor { padding: 0 24px; } }
@media (max-width: 600px)  { .mcf-contenedor { padding: 0 16px; } }
/* Con el tema MTG Canarias: el ancho y los márgenes comunes del sitio (Personalizar → Cabeceras y ancho). */
.mcf-contenedor { max-width: var(--mtc-ancho, 1820px); padding-left: var(--mtc-lado, 48px); padding-right: var(--mtc-lado, 48px); }
.mcf-pc .mcf-gc, .mcf-pc [class*="gc"] { margin: 0; }

/* ---------------------------------------------------------------- Vista previa (admin) */
.mcf-previa { padding: 8px 16px; background: #fff4e5; color: #7a4a00; font-size: 13px; text-align: center; border-bottom: 1px solid #f3d9b1; }
.mcf-previa a { color: inherit; font-weight: 700; }

/* ---------------------------------------------------------------- Cabecera */
.mcf-hero { position: relative; overflow: hidden; display: flex; align-items: center; min-height: 250px; background: #151515; color: #fff; }
.mcf-hero::before {
	content: ""; position: absolute; inset: -12px;
	background: var(--mcf-hero) center 22% / cover no-repeat;
	filter: blur(2px) saturate(.9);
	transform: scale(1.05);
}
.mcf-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0,0,0,.82), rgba(0,0,0,.6) 55%, rgba(0,0,0,.45)); }
.mcf-hero-txt { position: relative; z-index: 1; padding-top: 36px; padding-bottom: 36px; }
.mcf-ficha h1.mcf-titulo { margin: 0 0 12px !important; padding: 0 0 12px !important; color: #fff !important; font-size: 30px !important; font-weight: 700 !important; line-height: 1.2 !important; position: relative; }
.mcf-ficha h1.mcf-titulo::after { content: ""; position: absolute; left: 0; bottom: 0; width: 50px; height: 3px; background: var(--mcf-acento); border-radius: 2px; }
.mcf-hero-en { margin: 0 0 4px !important; color: rgba(255,255,255,.75) !important; font-style: italic; font-size: 15px; }
.mcf-hero-col { margin: 0 !important; color: rgba(255,255,255,.92) !important; font-size: 17px; }
@media (max-width: 600px) {
	.mcf-hero { min-height: 190px; }
	.mcf-ficha h1.mcf-titulo { font-size: 24px !important; }
}

/* ---------------------------------------------------------------- Migas */
.mcf-migas { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: 24px 0 8px; font-size: 14px; color: var(--mcf-suave); }
.mcf-migas a { color: var(--mcf-suave) !important; text-decoration: none !important; }
.mcf-migas a:hover { color: var(--mcf-acento) !important; }
.mcf-migas-sep { color: #c7c7cc; }
.mcf-avisos:empty { display: none; }

/* ---------------------------------------------------------------- Rejilla principal */
.mcf-rejilla { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; margin: 24px 0 8px; align-items: start; }
@media (min-width: 768px) {
	.mcf-rejilla { grid-template-columns: minmax(240px, 300px) minmax(0, 1fr); gap: 36px; }
	.mcf-col-der { grid-column: 2; }
}
@media (min-width: 1280px) {
	.mcf-rejilla { grid-template-columns: minmax(280px, 350px) minmax(0, 1.9fr) minmax(260px, 1fr); gap: 48px; }
	.mcf-col-der { grid-column: auto; }
}
.mcf-col { min-width: 0; }


.mcf-imagen { max-width: 360px; margin: 0 auto; }
.mcf-imagen img { display: block; width: 100%; height: auto; aspect-ratio: 488 / 680; object-fit: cover; border-radius: 4.7% / 3.5%; box-shadow: 0 6px 22px rgba(0,0,0,.18); }

.mcf-bloque { margin: 0 0 28px; }
.mcf-ficha h2.mcf-h2 { margin: 0 0 14px !important; padding: 0 !important; color: var(--mcf-tinta) !important; font-size: 24px !important; font-weight: 600 !important; line-height: 1.25 !important; text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 2px; }
.mcf-texto { font-size: 16px; line-height: 1.6; }
.mcf-texto p { margin: 0 0 .6em; }
.mcf-texto img.mcf-mana { display: inline !important; vertical-align: text-bottom; }
.mcf-oracle-nombre { margin: 0 0 6px !important; font-weight: 700; }
.mcf-vacio { margin: 0; color: var(--mcf-suave); font-style: italic; }

/* Pestañas Reglamento · Oracle · Atributos (el aspecto de los botones viene de mcm.css) */
.mcf-pestanas .mcf-pestanas-nav { margin-bottom: 16px; }
.mcf-panel[hidden] { display: none !important; }
.mcf-panel .mss-rulings-box { margin-top: 0; }

/* Atributos */
.mcf-attr { margin: 0; border-top: 1px solid var(--mcf-linea); }
.mcf-attr-fila { display: grid; grid-template-columns: minmax(0, 42%) minmax(0, 1fr); gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--mcf-linea); font-size: 14px; }
.mcf-attr dt { margin: 0; color: var(--mcf-suave); font-weight: 600; }
.mcf-attr dd { margin: 0; color: var(--mcf-tinta); word-break: break-word; }

/* Ofertas (la tabla es del plugin Inventario) */
.mcf-ofertas .mci-wrapper { margin-top: 8px; }
.mcf-ofertas .mci-tabla { width: 100%; }

/* ---------------------------------------------------------------- Carruseles */
.mcf-seccion { margin: 40px 0 0; }
.mcf-seccion:last-child { margin-bottom: 56px; }
.mcf-seccion-cab { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 4px; min-height: 0; }
.mcf-seccion-cab .mcf-h2 { margin-bottom: 0 !important; text-decoration: none !important; font-size: 28px !important; }
.mcf-cuenta { display: inline-block; min-width: 26px; margin-left: 6px; padding: 1px 8px; border-radius: 999px; background: var(--mcf-fondo-suave); color: var(--mcf-suave); font-size: 13px; font-weight: 700; vertical-align: middle; text-align: center; }
/* Carril (todos los carruseles de la web): flechas redondas en la cabecera de la sección, junto al título,
 * una barrita de progreso debajo y arrastre con el ratón. Lo pone el JS (MCFCarril). */
.mcf-carril { --mcf-ac: var(--mcp-acento, var(--mtc-acento, #e8641b)); position: relative; }
.mcf-flechas { --mcf-ac: var(--mcp-acento, var(--mtc-acento, #e8641b)); display: inline-flex; flex: none; align-items: center; gap: 8px; }
.mcf-flechas[hidden] { display: none !important; }
.mcf-flechas.is-suelto { display: flex; justify-content: flex-end; margin: 0 0 10px; }
.mcf-flechas .mcf-flecha {
	display: inline-flex !important; align-items: center; justify-content: center;
	width: 40px !important; height: 40px !important; min-width: 0 !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important;
	border: 0 !important; border-radius: 50% !important;
	background: #18181b !important; color: #fff !important;
	box-shadow: 0 6px 16px rgba(0, 0, 0, .18), inset 0 1px 0 rgba(255, 255, 255, .08) !important;
	font-size: 0 !important; line-height: 0 !important; cursor: pointer;
	transition: background .2s, color .2s, box-shadow .2s, transform .2s;
}
.mcf-flechas .mcf-flecha svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s; }
.mcf-flechas .mcf-flecha.is-ant svg { transform: scaleX(-1); }
.mcf-flechas .mcf-flecha:not([disabled]):hover, .mcf-flechas .mcf-flecha:focus-visible { background: var(--mcf-ac) !important; box-shadow: 0 8px 20px color-mix(in srgb, var(--mcf-ac) 45%, transparent) !important; transform: translateY(-1px); }
.mcf-flechas .mcf-flecha.is-sig:not([disabled]):hover svg { transform: translateX(2px); }
.mcf-flechas .mcf-flecha.is-ant:not([disabled]):hover svg { transform: scaleX(-1) translateX(2px); }
.mcf-flechas .mcf-flecha:focus-visible { outline: 2px solid var(--mcf-ac); outline-offset: 2px; }
.mcf-flechas .mcf-flecha[disabled] { background: #ececef !important; color: #a1a1aa !important; box-shadow: none !important; cursor: default; }
.mcf-progreso { position: relative; width: min(160px, 40%); height: 3px; margin: 4px auto 0; overflow: hidden; border-radius: 3px; background: rgba(0, 0, 0, .08); }
.mcf-progreso i { position: absolute; top: 0; left: 0; height: 100%; min-width: 12px; border-radius: 3px; background: var(--mcf-ac); transition: left .2s ease, width .2s ease; }
.mcf-carril.is-quieto .mcf-progreso { display: none !important; }
/* Arrastrar con el ratón. */
@media (hover: hover) and (pointer: fine) {
	[data-mcf-carril] { cursor: grab; }
}
[data-mcf-carril].is-arrastrando { cursor: grabbing; scroll-snap-type: none !important; scroll-behavior: auto !important; user-select: none; }
[data-mcf-carril].is-arrastrando a, [data-mcf-carril].is-arrastrando img { pointer-events: none; }
/* En pantallas táctiles se desliza con el dedo: sin flechas, solo el progreso. */
@media (hover: none), (max-width: 767px) { .mcf-flechas { display: none !important; } }
@media (prefers-reduced-motion: reduce) { .mcf-flechas .mcf-flecha, .mcf-flechas .mcf-flecha svg, .mcf-progreso i { transition: none; } }

/* El contenedor lleva la clase bcs-app para heredar el estilo de las tarjetas, pero no su rejilla. */
.mcf-ficha .bcs-app.mcf-bcs { display: block; gap: 0; font-size: 15px; }

.mcf-pista {
	--mcf-n: 2;
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: calc((100% - (var(--mcf-n) - 1) * var(--mcf-gap)) / var(--mcf-n));
	gap: var(--mcf-gap);
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	padding: 10px 2px 18px; /* aire para el efecto de elevación y la sombra al pasar el ratón */
	scrollbar-width: none;
}
.mcf-pista::-webkit-scrollbar { display: none; }
.mcf-pista > * { scroll-snap-align: start; min-width: 0; }

.mcf-pista-cartas { --mcf-n: 2; }
@media (min-width: 560px)  { .mcf-pista-cartas { --mcf-n: 3; } }
@media (min-width: 768px)  { .mcf-pista-cartas { --mcf-n: 4; } }
@media (min-width: 1025px) { .mcf-pista-cartas { --mcf-n: 6; } }

.mcf-pista-mazos { --mcf-n: 1.15; }
@media (min-width: 560px)  { .mcf-pista-mazos { --mcf-n: 2; } }
@media (min-width: 1025px) { .mcf-pista-mazos { --mcf-n: 4; } }

.mcf-edicion { font-size: 12px; color: #8a8a90; letter-spacing: .02em; }
.mcf-copias { font-weight: 700; color: var(--mcf-tinta); }

@media (prefers-reduced-motion: reduce) {
	.mcf-pista { scroll-behavior: auto; }
}

/* ---------------------------------------------------------------- Ediciones · Similares · Alternativas en columnas (1.5) */
.mcf-rel { --mcf-c: 1; display: grid; grid-template-columns: repeat(var(--mcf-c), minmax(0, 1fr)); gap: 32px 28px; margin: 40px 0 0; }
.mcf-rel > .mcf-seccion { margin: 0 !important; min-width: 0; container-type: inline-size; }
@media (min-width: 768px) { .mcf-rel { --mcf-c: var(--mcf-c-tab, 2); } }
@media (min-width: 1100px) { .mcf-rel { --mcf-c: var(--mcf-c-esc, 3); } }
/* Dentro de cada columna, las cartas visibles dependen del ancho de la columna, no de la pantalla. */
.mcf-rel .mcf-pista-cartas { --mcf-n: 2; }
@container (min-width: 430px) { .mcf-rel .mcf-pista-cartas { --mcf-n: 3; } }
@container (min-width: 640px) { .mcf-rel .mcf-pista-cartas { --mcf-n: 4; } }
@container (min-width: 960px) { .mcf-rel .mcf-pista-cartas { --mcf-n: 6; } }
@container (max-width: 520px) { .mcf-rel .mcf-seccion-cab .mcf-h2 { font-size: 22px !important; } }

/* Carruseles de cartas: igual que el listado de Cartas sueltas (sin apagar las agotadas, esquinas redondeadas). */
.mcf-bcs .bcs-card.is-out img.bcs-img { filter: none !important; opacity: 1 !important; }
.bcs-app.mcf-bcs img.bcs-img { border-radius: 4.7% / 3.5% !important; aspect-ratio: 488 / 680; object-fit: cover; box-shadow: 0 2px 8px rgba(0, 0, 0, .12); }

/* Bajadas de precio (portada): precio anterior tachado y etiqueta con el %. */
.mcf-bcs .bcs-media { position: relative; }
.mcf-bcs .mcf-baja { position: absolute; top: 8px; left: 8px; z-index: 2; padding: 2px 8px; border-radius: 999px; background: #0e7c3a; color: #fff; font-size: 12px; font-weight: 700; line-height: 1.5; box-shadow: 0 2px 6px rgba(0, 0, 0, .25); }
.mcf-bcs .mcf-etiqueta { position: absolute; top: 8px; left: 8px; z-index: 2; padding: 3px 10px; border-radius: 999px; background: rgba(17, 17, 20, .78); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); color: #fff; font-size: 12px; font-weight: 700; line-height: 1.5; box-shadow: 0 2px 8px rgba(0, 0, 0, .25); }
.mcf-bcs .mcf-etiqueta.is-abajo { top: auto; bottom: 8px; }
.mcf-bcs .mcf-antes { margin-left: 4px; color: #8a8a90; font-size: .85em; font-weight: 400; }

/* Legalidad por formatos (pestaña) */
.mcf-legal { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 6px 14px; margin: 4px 0 0; padding: 0; list-style: none; }
.mcf-legal li { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 0; border-bottom: 1px solid rgba(0, 0, 0, .06); font-size: 14px; }
.mcf-legal-e { padding: 2px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; white-space: nowrap; }
.mcf-legal-e.is-legal { background: #e7f6ec; color: #1a7f37; }
.mcf-legal-e.is-ban { background: #fdeceb; color: #b32d2e; }
.mcf-legal-e.is-res { background: #fff1e0; color: #a35b00; }
.mcf-legal-e.is-notlegal { background: #f0f0f1; color: #6b6b72; }
.mcf-legal-nota { margin: 10px 0 0; color: #8a8a92; font-size: 12px; }

/* Nombre editable por el administrador (1.11.1) */
.mcf-nombre-editable { cursor: text; }
.mcf-nombre-editable:hover { outline: 1px dashed rgba(255, 255, 255, .45); outline-offset: 4px; border-radius: 4px; }
.mcf-nombre-input { width: 100%; max-width: 900px; padding: 0 6px !important; border: 0 !important; border-bottom: 2px solid #e8651a !important; border-radius: 0 !important; background: rgba(0, 0, 0, .35) !important; color: inherit !important; font: inherit !important; line-height: 1.2 !important; letter-spacing: inherit; box-shadow: none !important; outline: none !important; }
.mcf-nombre-admin.is-manual { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: 999px; background: rgba(232, 101, 26, .18); color: #ffd7bf; font-size: 12px; font-weight: 600; }
.mcf-nombre-oficial { padding: 0 !important; border: 0 !important; background: none !important; color: #fff !important; font: inherit !important; text-decoration: underline; cursor: pointer; }

/* 1.12 · «Principales arquetipos» en la cabecera (lo pinta Metajuego). */
.mcmj-princ { display: block; margin-top: 6px; font-size: 14.5px; }
.mcmj-princ a { color: inherit !important; font-weight: 700; text-decoration: underline; text-decoration-color: rgba(255,255,255,.45); text-underline-offset: 3px; }
.mcmj-princ a:hover { text-decoration-color: currentColor; }
.mcmj-princ small { opacity: .75; font-size: .85em; }
@media (max-width: 600px) { .mcmj-princ { font-size: 13.5px; } }