/* ==========================================================================
   MARCADORES — la sección editorial

   Dos superficies con la misma voz: el índice (.mrc) y el artículo (.mrca).

   EL COLOR NO ESTÁ FIJADO POR SECCIÓN. Igual que en la portada y que en las
   otras subpáginas, el fondo se interpola con el avance del scroll y la tinta
   voltea sola por luminancia — lo escribe marcadores.js en --mrc-bg,
   --mrc-tinta-rgb y --mrc-acento-rgb. Aquí no hay un solo color literal en el
   texto: todo se compone sobre esas variables. Es lo que permite que el mismo
   párrafo se lea igual cuando el fondo pasa de obsidiana a marfil.

   Y por eso el acento tiene DOS valores. El beige de marca (#B8A890) da 2,3:1
   sobre blanco: sobre los tramos claros no es legible. En claro baja a
   #7C6B4E (4,98:1 sobre #FBFBFA) y en oscuro vuelve al beige.

   El estado de reposo —sin JavaScript— es el tramo claro, que es donde vive la
   mayor parte de la lectura. Si el script no llega, la página se lee entera.
   ========================================================================== */

.mrc,
.mrca {
	/* Valores de reposo: el tramo claro. Los reescribe el script. */
	--mrc-bg: #FBFBFA;
	--mrc-tinta-rgb: 10, 10, 11;
	--mrc-acento-rgb: 124, 107, 78;

	--mrc-tinta: rgb(var(--mrc-tinta-rgb));
	--mrc-suave: rgba(var(--mrc-tinta-rgb), 0.72);
	/* 0,62 y no 0,46. Medido componiendo la tinta sobre el fondo real: al 46 %
	   el pie de las figuras de dato, el índice lateral y la descripción de cada
	   fuente daban 3,24:1 — por debajo de lo legible para 12 y 13 px. Al 62 %
	   suben a 6,1:1 y siguen leyéndose como texto secundario, que es su papel. */
	--mrc-tenue: rgba(var(--mrc-tinta-rgb), 0.62);
	--mrc-hilo: rgba(var(--mrc-tinta-rgb), 0.16);
	--mrc-hilo-fino: rgba(var(--mrc-tinta-rgb), 0.09);
	--mrc-acento: rgb(var(--mrc-acento-rgb));

	--mrc-negro: #0A0A0B;
	--mrc-marfil: #FBFBFA;
	--mrc-beige: #B8A890;

	--mrc-display: var(--font-display, 'Butler', Georgia, serif);
	--mrc-sans: var(--font-sans, 'Work Sans', system-ui, sans-serif);
	--mrc-e: cubic-bezier(0.22, 1, 0.36, 1);

	--mrc-gut: clamp(22px, 6vw, 104px);
	--mrc-max: 1440px;

	position: relative;
	background: var(--mrc-bg);
	color: var(--mrc-tinta);
	/* La misma duración que el resto del sitio: las secciones que comparten
	   fondo tienen que moverse a la vez o el límite entre ellas se ve como una
	   costura. */
	transition: background-color 0.18s linear, color 0.18s linear;
}

/* A sangre, como el resto de subpáginas. */
.mrc__bleed,
.mrca__bleed {
	margin-inline: calc(50% - 50vw);
	width: 100vw;
	max-width: 100vw;
}

.mrc ::selection,
.mrca ::selection { background: rgba(var(--mrc-acento-rgb), 0.28); }

.mrc :focus-visible,
.mrca :focus-visible {
	outline: 2px solid var(--mrc-acento);
	outline-offset: 3px;
}

/* Contenedor común. */
.mrc-hero__in,
.mrc-filtro,
.mrc-lista,
.mrc-obligada__in,
.mrc-rabo__in,
.mrca-cuerpo__in,
.mrca-ev__in,
.mrca-fuentes__in,
.mrca-cta__in,
.mrca-mas__in {
	width: min(var(--mrc-max), 100% - var(--mrc-gut) * 2);
	margin-inline: auto;
}


/* ══════════════════════════════════════════════════════════════════════════
   1 · ÍNDICE — el hero
   ══════════════════════════════════════════════════════════════════════════ */
.mrc-hero {
	position: relative;
	isolation: isolate;
	padding: clamp(120px, 20vh, 230px) 0 clamp(56px, 8vh, 92px);
	background: var(--mrc-negro);
	color: var(--mrc-marfil);
	overflow: hidden;
}

/* Grano finísimo sobre el negro. Sobre una superficie plana tan grande, los
   degradados largos se escalonan en bandas visibles porque en ocho bits no hay
   valores intermedios suficientes; el grano las rompe. Es el mismo recurso del
   hero de Movimiento. */
.mrc-hero__grano {
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	opacity: 0.04;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}

.mrc-hero__in { position: relative; z-index: 4; }

/* ── EL UMBRAL — la escena del hero ──────────────────────────────────────
   Tres capas sobre el negro: la fotografía apagada, el lienzo del campo de
   medición y un velo que protege la lectura del texto. Ninguna lleva
   contenido: si el lienzo no llega a pintarse, lo que queda es una fotografía
   oscura detrás de un titular — un hero correcto, no un hueco. */
.mrc-hero__fondo {
	position: absolute;
	inset: 0;
	z-index: 0;
	overflow: hidden;
	pointer-events: none;
}

.mrc-hero__fondo img {
	position: absolute;
	/* Ocupa la mitad derecha, que es donde vive el campo. A la izquierda
	   queda el negro limpio sobre el que se lee el titular. */
	right: -6%;
	top: -10%;
	width: 62%;
	height: 130%;
	object-fit: cover;
	object-position: center 40%;
	/* Materia, no imagen. Con más presencia competía con los rieles y la
	   escena se leía como una fotografía con líneas encima en vez de como un
	   instrumento. */
	filter: grayscale(1) brightness(0.3) contrast(1.15) blur(1px);
	opacity: 0.32;
	transform: translate3d(0, var(--mrc-hero-par, 0px), 0);
}

.mrc-hero__campo {
	position: absolute;
	inset: 0;
	z-index: 1;
	width: 100%;
	height: 100%;
	pointer-events: none;
	/* Lo escribe el script con el avance del scroll: el campo se retira a
	   medida que la lectura entra en la lista. */
	opacity: var(--mrc-campo-op, 1);
	transform: translate3d(0, var(--mrc-hero-par, 0px), 0);
}

/* El velo. Denso a la izquierda —donde va el texto— y transparente a la
   derecha, para que el campo se vea limpio. Es lo que permite que las dos
   mitades convivan sin que ninguna estorbe a la otra. */
.mrc-hero__velo {
	position: absolute;
	inset: 0;
	z-index: 2;
	pointer-events: none;
	background:
		/* El corte del velo cae en el 50 %, justo antes de donde arrancan los
		   rieles (52,5 %): así el titular tiene negro limpio debajo y el campo
		   no queda medio apagado, que era lo que pasaba con el corte al 58 %. */
		linear-gradient(90deg, #0A0A0B 0%, rgba(10, 10, 11, 0.95) 38%, rgba(10, 10, 11, 0.34) 52%, rgba(10, 10, 11, 0.05) 78%, rgba(10, 10, 11, 0) 100%),
		linear-gradient(180deg, rgba(10, 10, 11, 0.7) 0%, rgba(10, 10, 11, 0) 22%, rgba(10, 10, 11, 0) 62%, rgba(10, 10, 11, 0.88) 100%);
}

.mrc-hero__grano { z-index: 3; }
.mrc-hero__in { z-index: 4; }
/* En vertical el campo se recoge en una banda arriba y el texto empieza
   debajo, sobre negro limpio. La primera versión lo extendía a todo el ancho
   por detrás del texto y los rieles cruzaban las líneas del párrafo: se veía
   bonito en una captura y era ilegible en la mano. Aquí manda la lectura. */
@media (max-aspect-ratio: 1 / 1) {
	.mrc-hero {
		/* Deja libre la banda de arriba, que termina en el 24 % del alto. */
		padding-top: clamp(200px, 30vh, 320px);
	}
	.mrc-hero__fondo img {
		right: -14%;
		top: 0;
		width: 128%;
		height: 30%;
		opacity: 0.26;
	}
	.mrc-hero__campo { opacity: var(--mrc-campo-op, 1); }
	.mrc-hero__velo {
		background:
			linear-gradient(180deg, rgba(10, 10, 11, 0.82) 0%, rgba(10, 10, 11, 0.1) 12%, rgba(10, 10, 11, 0.1) 22%, rgba(10, 10, 11, 0.92) 32%, #0A0A0B 44%, rgba(10, 10, 11, 0.96) 100%);
	}
}


.mrc-hero__marca {
	margin: 0 0 clamp(22px, 3vh, 34px);
	font-family: var(--mrc-sans);
	font-size: 0.7rem;
	font-weight: 500;
	letter-spacing: 0.34em;
	text-transform: uppercase;
	color: var(--mrc-beige);
}

.mrc-hero__t {
	margin: 0;
	font-family: var(--mrc-display);
	font-weight: 300;
	font-size: clamp(2.9rem, 9vw, 8.2rem);
	line-height: 0.94;
	letter-spacing: -0.032em;
	color: var(--mrc-marfil);
	text-wrap: balance;
}

.mrc-hero__lead {
	margin: clamp(28px, 4vh, 46px) 0 0;
	max-width: 54ch;
	font-family: var(--mrc-sans);
	font-weight: 300;
	font-size: clamp(1.06rem, 1.5vw, 1.34rem);
	line-height: 1.62;
	color: rgba(251, 251, 250, 0.82);
	text-wrap: pretty;
}

/* Las cuatro reglas. Van en el hero y no en un pie porque son la razón de ser
   de la sección: quien no las lea no entiende por qué esto no es un blog de
   clínica más. */
.mrc-hero__reglas {
	list-style: none;
	margin: clamp(44px, 7vh, 82px) 0 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 0;
	border-top: 1px solid rgba(184, 168, 144, 0.34);
}

.mrc-hero__reglas li {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 22px clamp(16px, 2vw, 30px) 4px 0;
	font-family: var(--mrc-sans);
	font-size: 0.9rem;
	font-weight: 300;
	line-height: 1.5;
	color: rgba(251, 251, 250, 0.74);
	text-wrap: pretty;
}

.mrc-hero__reglas li + li {
	padding-left: clamp(16px, 2vw, 30px);
	border-left: 1px solid rgba(184, 168, 144, 0.2);
}

.mrc-hero__reglas span {
	font-family: var(--mrc-display);
	font-size: 0.86rem;
	letter-spacing: 0.08em;
	color: var(--mrc-beige);
}


/* ══════════════════════════════════════════════════════════════════════════
   2 · El filtro

   Son ENLACES, no botones: ?area=… funciona sin JavaScript y devuelve la
   página filtrada desde el servidor. El script sólo intercepta el clic para
   que la transición sea instantánea. Un filtro que sólo existe con JS es una
   navegación que puede desaparecer.
   ══════════════════════════════════════════════════════════════════════════ */
.mrc-filtro {
	position: sticky;
	/* Justo debajo de la cabecera fija. */
	top: calc(clamp(64px, 7.2vh, 90px));
	z-index: 20;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	padding: 14px 0;
	background: var(--mrc-bg);
	border-bottom: 1px solid var(--mrc-hilo-fino);
	transition: background-color 0.18s linear;
}

.mrc-filtro__b {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 40px;
	padding: 0 16px;
	border: 1px solid var(--mrc-hilo);
	border-radius: 2px;
	font-family: var(--mrc-sans);
	font-size: 0.74rem;
	font-weight: 400;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--mrc-suave);
	text-decoration: none;
	white-space: nowrap;
	transition: color 0.4s var(--mrc-e), border-color 0.4s var(--mrc-e), background-color 0.4s var(--mrc-e);
}

.mrc-filtro__n {
	font-family: var(--mrc-display);
	font-size: 0.72rem;
	color: var(--mrc-acento);
	opacity: 0.8;
}

.mrc-filtro__b:hover { color: var(--mrc-tinta); border-color: var(--mrc-acento); }

.mrc-filtro__b.es-activo {
	color: var(--mrc-bg);
	background: var(--mrc-tinta);
	border-color: var(--mrc-tinta);
}
.mrc-filtro__b.es-activo .mrc-filtro__n { color: var(--mrc-bg); opacity: 0.66; }


/* ══════════════════════════════════════════════════════════════════════════
   3 · La apertura
   ══════════════════════════════════════════════════════════════════════════ */
.mrc-apertura {
	padding: clamp(52px, 8vh, 104px) 0 clamp(40px, 6vh, 78px);
}

.mrc-apertura__a {
	display: grid;
	grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
	align-items: center;
	gap: clamp(30px, 4vw, 76px);
	width: min(var(--mrc-max), 100% - var(--mrc-gut) * 2);
	margin-inline: auto;
	text-decoration: none;
	color: inherit;
}

.mrc-apertura__lam {
	position: relative;
	margin: 0;
	overflow: hidden;
	border-radius: 3px;
	aspect-ratio: 3 / 2;
	background: rgba(var(--mrc-tinta-rgb), 0.06);
}

.mrc-apertura__lam img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: saturate(0.94) contrast(1.04);
	transform: scale(1.02);
	transition: transform 1.2s var(--mrc-e), filter 0.7s ease;
}

.mrc-apertura__a:hover .mrc-apertura__lam img { transform: scale(1.05); }

.mrc-apertura__eyebrow {
	margin: 0 0 clamp(16px, 2vw, 24px);
	font-family: var(--mrc-sans);
	font-size: 0.68rem;
	font-weight: 500;
	letter-spacing: 0.26em;
	text-transform: uppercase;
	color: var(--mrc-acento);
}

.mrc-apertura__t {
	margin: 0;
	font-family: var(--mrc-display);
	font-weight: 300;
	font-size: clamp(2rem, 3.6vw, 3.6rem);
	line-height: 1.04;
	letter-spacing: -0.026em;
	text-wrap: balance;
}

.mrc-apertura__g {
	margin: clamp(18px, 2.2vw, 28px) 0 0;
	max-width: 46ch;
	font-family: var(--mrc-sans);
	font-weight: 300;
	font-size: clamp(1rem, 1.2vw, 1.14rem);
	line-height: 1.64;
	color: var(--mrc-suave);
	text-wrap: pretty;
}

.mrc-apertura__ir,
.mrc-ficha__ir,
.mrc-obligada__ir {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin-top: clamp(20px, 2.4vw, 30px);
	font-family: var(--mrc-sans);
	font-size: 0.66rem;
	font-weight: 500;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--mrc-acento);
}

.mrc-apertura__ir svg,
.mrc-ficha__ir svg,
.mrc-obligada__ir svg { width: 15px; height: 15px; transition: transform 0.5s var(--mrc-e); }

.mrc-apertura__a:hover .mrc-apertura__ir svg,
.mrc-ficha__a:hover .mrc-ficha__ir svg,
.mrc-obligada__a:hover .mrc-obligada__ir svg { transform: translateX(5px); }


/* ══════════════════════════════════════════════════════════════════════════
   4 · La lista, con ritmo

   No es una rejilla de tarjetas iguales: la secuencia alterna dos medias y una
   ancha, así que la vista cambia cada tres piezas. El patrón lo escribe PHP
   para el estado inicial y lo recalcula el script al filtrar, porque al ocultar
   tarjetas la secuencia visible cambia.
   ══════════════════════════════════════════════════════════════════════════ */
.mrc-lista {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	gap: clamp(30px, 4vw, 64px) clamp(24px, 3vw, 48px);
	padding-bottom: clamp(56px, 9vh, 110px);
}

.mrc-ficha { min-width: 0; }
.mrc-ficha--media { grid-column: span 6; }
.mrc-ficha--ancha { grid-column: span 12; }

.mrc-ficha__a {
	display: grid;
	gap: clamp(18px, 2vw, 26px);
	text-decoration: none;
	color: inherit;
}

.mrc-ficha--ancha .mrc-ficha__a {
	grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.14fr);
	align-items: center;
	gap: clamp(26px, 3.4vw, 58px);
}

.mrc-ficha__lam {
	display: block;
	overflow: hidden;
	border-radius: 3px;
	aspect-ratio: 3 / 2;
	background: rgba(var(--mrc-tinta-rgb), 0.06);
}

.mrc-ficha--ancha .mrc-ficha__lam { aspect-ratio: 4 / 3; }

.mrc-ficha__lam img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: saturate(0.94) contrast(1.04);
	transform: scale(1.02);
	transition: transform 1.1s var(--mrc-e);
}

.mrc-ficha__a:hover .mrc-ficha__lam img { transform: scale(1.055); }

.mrc-ficha__txt { display: block; }

.mrc-ficha__meta {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 14px;
	font-family: var(--mrc-sans);
	font-size: 0.64rem;
	font-weight: 500;
	letter-spacing: 0.2em;
	text-transform: uppercase;
}

.mrc-ficha__area { color: var(--mrc-acento); }
.mrc-ficha__sep { width: 16px; height: 1px; background: var(--mrc-hilo); }
.mrc-ficha__min { color: var(--mrc-tenue); }

.mrc-ficha__t {
	margin: 0;
	font-family: var(--mrc-display);
	font-weight: 300;
	font-size: clamp(1.34rem, 2vw, 1.96rem);
	line-height: 1.12;
	letter-spacing: -0.02em;
	text-wrap: balance;
}

.mrc-ficha--ancha .mrc-ficha__t { font-size: clamp(1.5rem, 2.5vw, 2.4rem); }

.mrc-ficha__g {
	display: block;
	margin-top: 14px;
	max-width: 52ch;
	font-family: var(--mrc-sans);
	font-weight: 300;
	font-size: 0.98rem;
	line-height: 1.6;
	color: var(--mrc-suave);
	text-wrap: pretty;
}

/* ── EL SUBRAYADO — el efecto de cursor de esta sección ──────────────────
   Un filete que se traza bajo el titular DESDE EL LADO POR EL QUE ENTRÓ el
   puntero, como quien subraya con un lápiz. El script sólo escribe el origen
   en --mrc-org; el trazo, la duración y la curva son de aquí.

   Es el único efecto de cursor de Marcadores y no se parece a ninguno de los
   doce que ya viven en el sitio — ni lupa, ni visor, ni huella, ni linterna.
   Y es el gesto correcto para una sección de lectura. */
[data-mrc-sub] {
	position: relative;
	display: inline;
	background-image: linear-gradient(var(--mrc-acento), var(--mrc-acento));
	background-repeat: no-repeat;
	background-size: 0% 1px;
	background-position: var(--mrc-org, 0%) calc(100% - 0.02em);
	transition: background-size 0.52s var(--mrc-e);
}

.mrc-ficha__a:hover [data-mrc-sub],
.mrc-ficha__a:focus-visible [data-mrc-sub],
.mrc-apertura__a:hover [data-mrc-sub],
.mrc-obligada__a:hover [data-mrc-sub] { background-size: 100% 1px; }

@media (hover: none) {
	/* Sin puntero no hay lado por el que entrar: el filete se queda puesto,
	   discreto, para que el titular siga leyéndose como un enlace. */
	[data-mrc-sub] { background-size: 100% 1px; opacity: 1; }
}


/* ══════════════════════════════════════════════════════════════════════════
   5 · La lectura obligada — banda oscura
   ══════════════════════════════════════════════════════════════════════════ */
.mrc-obligada {
	position: relative;
	padding: clamp(64px, 11vh, 128px) 0;
	background: var(--mrc-negro);
	color: var(--mrc-marfil);
}

.mrc-obligada__in {
	display: grid;
	grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
	align-items: center;
	gap: clamp(30px, 4vw, 70px);
}

.mrc-obligada__marca {
	grid-column: 1 / -1;
	margin: 0 0 clamp(24px, 3vh, 40px);
	padding-bottom: 16px;
	border-bottom: 1px solid rgba(184, 168, 144, 0.3);
	font-family: var(--mrc-sans);
	font-size: 0.68rem;
	font-weight: 500;
	letter-spacing: 0.26em;
	text-transform: uppercase;
	color: var(--mrc-beige);
}

.mrc-obligada__a { text-decoration: none; color: inherit; }

.mrc-obligada__t {
	margin: 0;
	font-family: var(--mrc-display);
	font-weight: 300;
	font-size: clamp(1.9rem, 3.4vw, 3.4rem);
	line-height: 1.05;
	letter-spacing: -0.026em;
	color: var(--mrc-marfil);
	text-wrap: balance;
	/* El subrayado sobre negro va en beige, no en el acento oscuro. */
	--mrc-acento: var(--mrc-beige);
}

.mrc-obligada__g {
	margin: clamp(18px, 2.2vw, 26px) 0 0;
	max-width: 50ch;
	font-family: var(--mrc-sans);
	font-weight: 300;
	font-size: clamp(1rem, 1.2vw, 1.12rem);
	line-height: 1.64;
	color: rgba(251, 251, 250, 0.78);
	text-wrap: pretty;
}

.mrc-obligada__ir { color: var(--mrc-beige); }

.mrc-obligada__lam {
	margin: 0;
	overflow: hidden;
	border-radius: 3px;
	aspect-ratio: 4 / 3;
}

.mrc-obligada__lam img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: saturate(0.9) contrast(1.05) brightness(0.94);
}

.mrc-rabo { padding: clamp(40px, 7vh, 80px) 0 clamp(56px, 9vh, 100px); }


/* ══════════════════════════════════════════════════════════════════════════
   6 · ARTÍCULO — progreso y hero
   ══════════════════════════════════════════════════════════════════════════ */

/* El filete de progreso. Es un indicador de estado —cuánto queda—, no una
   decoración: por eso mide 2px y no compite con nada. */
.mrca-progreso {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 70;
	height: 2px;
	background: rgba(184, 168, 144, 0.16);
	pointer-events: none;
	opacity: 0;
	transition: opacity 0.5s ease;
}
.mrca-progreso.es-visible { opacity: 1; }

.mrca-progreso i {
	display: block;
	height: 100%;
	width: 100%;
	background: var(--mrc-beige);
	transform: scaleX(var(--mrca-p, 0));
	transform-origin: 0 50%;
}

.mrca-hero {
	position: relative;
	isolation: isolate;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	min-height: clamp(560px, 84vh, 940px);
	padding: clamp(110px, 16vh, 190px) var(--mrc-gut) clamp(46px, 7vh, 86px);
	background: var(--mrc-negro);
	color: var(--mrc-marfil);
	overflow: hidden;
}

.mrca-hero__lam {
	position: absolute;
	inset: 0;
	z-index: 0;
	margin: 0;
}

.mrca-hero__lam img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: saturate(0.86) contrast(1.06);
	/* El desplazamiento por scroll lo escribe el JS en --mrca-par. Sin script
	   se queda en cero, que es una imagen quieta y correcta. */
	transform: translate3d(0, var(--mrca-par, 0px), 0) scale(1.06);
	will-change: transform;
}

.mrca-hero__velo {
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background:
		linear-gradient(180deg, rgba(10, 10, 11, 0.72) 0%, rgba(10, 10, 11, 0.12) 26%, rgba(10, 10, 11, 0.2) 48%, rgba(10, 10, 11, 0.86) 88%, #0A0A0B 100%),
		radial-gradient(120% 80% at 30% 90%, rgba(10, 10, 11, 0.6), transparent 62%);
}

.mrca-hero__in {
	position: relative;
	z-index: 2;
	width: min(var(--mrc-max), 100%);
	margin-inline: auto;
}

.mrca-miga {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: clamp(20px, 3vh, 32px);
	font-family: var(--mrc-sans);
	font-size: 0.66rem;
	font-weight: 500;
	letter-spacing: 0.22em;
	text-transform: uppercase;
}

/* 44 px de alto de área, aunque la letra siga midiendo 11: medido, la miga
   daba 17 px y es el único camino de vuelta al índice desde un artículo. */
.mrca-miga a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	color: var(--mrc-beige);
	text-decoration: none;
}
.mrca-miga a:hover { text-decoration: underline; text-underline-offset: 4px; }
.mrca-miga span { color: rgba(251, 251, 250, 0.34); }

.mrca-hero__t {
	margin: 0;
	max-width: 19ch;
	font-family: var(--mrc-display);
	font-weight: 300;
	font-size: clamp(2.3rem, 6vw, 5.4rem);
	line-height: 0.98;
	letter-spacing: -0.03em;
	color: var(--mrc-marfil);
	text-wrap: balance;
}

.mrca-hero__g {
	margin: clamp(22px, 3vh, 34px) 0 0;
	max-width: 56ch;
	font-family: var(--mrc-sans);
	font-weight: 300;
	font-size: clamp(1.06rem, 1.4vw, 1.3rem);
	line-height: 1.6;
	color: rgba(251, 251, 250, 0.84);
	text-wrap: pretty;
}

.mrca-hero__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin: clamp(26px, 3.4vh, 40px) 0 0;
	font-family: var(--mrc-sans);
	font-size: 0.68rem;
	font-weight: 400;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: rgba(251, 251, 250, 0.6);
}

.mrca-hero__pie {
	position: absolute;
	right: var(--mrc-gut);
	bottom: clamp(14px, 2vh, 22px);
	z-index: 2;
	font-family: var(--mrc-sans);
	font-size: 0.58rem;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: rgba(251, 251, 250, 0.44);
}


/* ══════════════════════════════════════════════════════════════════════════
   7 · El cuerpo del artículo
   ══════════════════════════════════════════════════════════════════════════ */
.mrca-cuerpo { padding: clamp(56px, 9vh, 120px) 0 clamp(40px, 6vh, 80px); }

.mrca-cuerpo__in {
	display: grid;
	grid-template-columns: minmax(0, 15rem) minmax(0, 68ch) minmax(0, 1fr);
	gap: clamp(30px, 5vw, 88px);
	align-items: start;
}

/* El índice lateral. Se construye con los mismos subtítulos del cuerpo, no con
   una segunda lista: una lista paralela se desincroniza el día que alguien
   añade un apartado. */
.mrca-indice {
	position: sticky;
	top: calc(clamp(64px, 7.2vh, 90px) + 28px);
	font-family: var(--mrc-sans);
}

.mrca-indice__t {
	margin: 0 0 16px;
	padding-bottom: 12px;
	border-bottom: 1px solid var(--mrc-hilo);
	font-size: 0.62rem;
	font-weight: 500;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--mrc-tenue);
}

.mrca-indice ol {
	list-style: none;
	margin: 0;
	padding: 0;
	counter-reset: mrca;
}

.mrca-indice li { counter-increment: mrca; }

.mrca-indice a {
	display: flex;
	gap: 12px;
	padding: 9px 0;
	font-size: 0.86rem;
	font-weight: 300;
	line-height: 1.4;
	color: var(--mrc-tenue);
	text-decoration: none;
	transition: color 0.4s var(--mrc-e);
}

.mrca-indice a::before {
	content: counter(mrca, decimal-leading-zero);
	flex: none;
	font-family: var(--mrc-display);
	font-size: 0.7rem;
	color: var(--mrc-acento);
	opacity: 0.6;
	padding-top: 0.18em;
}

.mrca-indice a:hover { color: var(--mrc-tinta); }
.mrca-indice li.es-activo a { color: var(--mrc-tinta); }
.mrca-indice li.es-activo a::before { opacity: 1; }

.mrca-columna { min-width: 0; }

.mrca-p {
	margin: 0 0 1.25em;
	font-family: var(--mrc-sans);
	font-weight: 300;
	font-size: clamp(1.06rem, 1.16vw, 1.2rem);
	line-height: 1.74;
	color: var(--mrc-suave);
	text-wrap: pretty;
}

.mrca-p strong { font-weight: 500; color: var(--mrc-tinta); }
.mrca-p em { font-style: italic; }

.mrca-h {
	margin: clamp(46px, 6vh, 78px) 0 clamp(18px, 2.4vh, 28px);
	padding-top: clamp(18px, 2.4vh, 26px);
	border-top: 1px solid var(--mrc-hilo-fino);
	font-family: var(--mrc-display);
	font-weight: 300;
	font-size: clamp(1.5rem, 2.4vw, 2.2rem);
	line-height: 1.14;
	letter-spacing: -0.02em;
	color: var(--mrc-tinta);
	text-wrap: balance;
	scroll-margin-top: calc(clamp(64px, 7.2vh, 90px) + 28px);
}

.mrca-h:first-child { margin-top: 0; border-top: 0; padding-top: 0; }

/* La cita. La comilla grande es un signo tipográfico, no un icono. */
.mrca-cita {
	position: relative;
	margin: clamp(38px, 5vh, 64px) 0;
	padding-left: clamp(28px, 4vw, 54px);
}

.mrca-cita::before {
	content: "“";
	position: absolute;
	left: -0.04em;
	top: -0.28em;
	font-family: var(--mrc-display);
	font-size: clamp(3.4rem, 6vw, 5.4rem);
	line-height: 1;
	color: var(--mrc-acento);
	opacity: 0.42;
}

.mrca-cita blockquote {
	margin: 0;
	font-family: var(--mrc-display);
	font-weight: 300;
	font-style: italic;
	font-size: clamp(1.4rem, 2.3vw, 2rem);
	line-height: 1.3;
	letter-spacing: -0.018em;
	color: var(--mrc-tinta);
	text-wrap: balance;
}

.mrca-cita figcaption {
	margin-top: 14px;
	font-family: var(--mrc-sans);
	font-size: 0.72rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--mrc-tenue);
}

/* La figura de dato. La cifra está escrita en el HTML ya formateada; el conteo
   es sólo entrada. Se sale de la columna por la izquierda para que se lea como
   una nota al margen y no como un párrafo más. */
.mrca-dato {
	display: grid;
	gap: 6px;
	margin: clamp(38px, 5vh, 62px) 0;
	padding: clamp(22px, 3vh, 32px) 0 clamp(22px, 3vh, 32px) clamp(22px, 3vw, 34px);
	border-left: 1px solid var(--mrc-acento);
}

.mrca-dato__n {
	font-family: var(--mrc-display);
	font-weight: 300;
	font-size: clamp(3rem, 7vw, 5.6rem);
	line-height: 0.92;
	letter-spacing: -0.04em;
	color: var(--mrc-tinta);
	font-variant-numeric: tabular-nums;
}

.mrca-dato__u {
	max-width: 40ch;
	font-family: var(--mrc-sans);
	font-weight: 400;
	font-size: clamp(0.98rem, 1.1vw, 1.1rem);
	line-height: 1.42;
	color: var(--mrc-tinta);
}

.mrca-dato__f {
	max-width: 52ch;
	margin-top: 6px;
	font-family: var(--mrc-sans);
	font-weight: 300;
	font-size: 0.78rem;
	line-height: 1.5;
	color: var(--mrc-tenue);
}

.mrca-lista,
.mrca-pasos {
	margin: clamp(24px, 3vh, 36px) 0 clamp(30px, 4vh, 44px);
	padding: 0;
	list-style: none;
	counter-reset: mrcap;
}

.mrca-lista li,
.mrca-pasos li {
	position: relative;
	padding: 14px 0 14px clamp(26px, 3vw, 40px);
	border-top: 1px solid var(--mrc-hilo-fino);
	font-family: var(--mrc-sans);
	font-weight: 300;
	font-size: clamp(1rem, 1.08vw, 1.1rem);
	line-height: 1.62;
	color: var(--mrc-suave);
	text-wrap: pretty;
}

.mrca-lista li:last-child,
.mrca-pasos li:last-child { border-bottom: 1px solid var(--mrc-hilo-fino); }

.mrca-lista li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 1.62em;
	width: clamp(12px, 1.5vw, 18px);
	height: 1px;
	background: var(--mrc-acento);
}

.mrca-pasos li { counter-increment: mrcap; }

.mrca-pasos li::before {
	content: counter(mrcap, decimal-leading-zero);
	position: absolute;
	left: 0;
	top: 1.05em;
	font-family: var(--mrc-display);
	font-size: 0.86rem;
	color: var(--mrc-acento);
}

.mrca-lam { margin: clamp(38px, 5vh, 64px) 0; }
.mrca-lam img { display: block; width: 100%; height: auto; border-radius: 3px; }
.mrca-lam figcaption {
	margin-top: 12px;
	font-family: var(--mrc-sans);
	font-size: 0.74rem;
	color: var(--mrc-tenue);
}

/* El apartado de cautela. Filete beige a la izquierda y cuerpo menor: se lee
   como un aparte, no como una interrupción. */
.mrca-nota {
	display: flex;
	gap: clamp(16px, 2vw, 22px);
	margin: clamp(32px, 4vh, 52px) 0;
	padding: clamp(18px, 2.4vh, 26px) clamp(18px, 2.4vw, 28px);
	background: rgba(var(--mrc-acento-rgb), 0.07);
	border-radius: 3px;
}

.mrca-nota__r {
	flex: none;
	width: 2px;
	background: var(--mrc-acento);
	opacity: 0.7;
}

.mrca-nota p {
	margin: 0;
	font-family: var(--mrc-sans);
	font-weight: 300;
	font-size: 0.96rem;
	line-height: 1.62;
	color: var(--mrc-suave);
	text-wrap: pretty;
}


/* ══════════════════════════════════════════════════════════════════════════
   8 · EL MÓDULO QUE DEFINE LA SECCIÓN

   Las dos listas van con el MISMO cuerpo tipográfico y una junto a la otra a
   propósito. Enterrar «lo que todavía no» en letra pequeña al final sería
   exactamente lo que hace el resto del sector; ponerlo al lado, al mismo
   tamaño, es el argumento entero.

   Lo único que las distingue es la marca: filete lleno frente a filete
   discontinuo. Suficiente para leerlas como distintas, insuficiente para
   leer una como secundaria.
   ══════════════════════════════════════════════════════════════════════════ */
.mrca-ev {
	padding: clamp(64px, 11vh, 130px) 0;
	background: var(--mrc-negro);
	color: var(--mrc-marfil);
	scroll-margin-top: 90px;
}

.mrca-ev__t {
	margin: 0 0 clamp(34px, 5vh, 60px);
	padding-bottom: 18px;
	border-bottom: 1px solid rgba(184, 168, 144, 0.3);
	font-family: var(--mrc-display);
	font-weight: 300;
	font-size: clamp(1.8rem, 3.2vw, 3rem);
	line-height: 1.06;
	letter-spacing: -0.024em;
	color: var(--mrc-marfil);
}

.mrca-ev__par {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(30px, 4vw, 70px);
}

.mrca-ev__cab {
	display: flex;
	align-items: center;
	gap: 14px;
	margin: 0 0 clamp(20px, 2.6vh, 30px);
	font-family: var(--mrc-sans);
	font-size: 0.7rem;
	font-weight: 500;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--mrc-marfil);
}

.mrca-ev__marca {
	flex: none;
	width: clamp(28px, 3vw, 44px);
	height: 0;
	border-top: 2px solid var(--mrc-beige);
}

.mrca-ev__col--no .mrca-ev__marca {
	border-top-style: dashed;
	border-top-color: rgba(251, 251, 250, 0.5);
}

.mrca-ev__col ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.mrca-ev__col li {
	position: relative;
	padding: 16px 0 16px clamp(22px, 2.4vw, 30px);
	border-top: 1px solid rgba(251, 251, 250, 0.12);
	font-family: var(--mrc-sans);
	font-weight: 300;
	/* MISMO cuerpo en las dos columnas. Es el punto. */
	font-size: clamp(0.98rem, 1.06vw, 1.06rem);
	line-height: 1.62;
	color: rgba(251, 251, 250, 0.82);
	text-wrap: pretty;
}

.mrca-ev__col li:last-child { border-bottom: 1px solid rgba(251, 251, 250, 0.12); }

.mrca-ev__col li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 1.68em;
	width: clamp(12px, 1.4vw, 16px);
	height: 0;
	border-top: 1px solid var(--mrc-beige);
}

.mrca-ev__col--no li::before {
	border-top-style: dashed;
	border-top-color: rgba(251, 251, 250, 0.44);
}


/* ══════════════════════════════════════════════════════════════════════════
   9 · Fuentes, cierre y «sigue leyendo»
   ══════════════════════════════════════════════════════════════════════════ */
.mrca-fuentes { padding: clamp(56px, 9vh, 110px) 0 clamp(30px, 5vh, 60px); }

.mrca-fuentes__in { max-width: 78ch; }

.mrca-fuentes__t {
	margin: 0 0 clamp(22px, 3vh, 34px);
	font-family: var(--mrc-sans);
	font-size: 0.7rem;
	font-weight: 500;
	letter-spacing: 0.26em;
	text-transform: uppercase;
	color: var(--mrc-tenue);
}

.mrca-fuentes ol {
	list-style: none;
	margin: 0;
	padding: 0;
	counter-reset: mrcaf;
}

.mrca-fuentes li {
	counter-increment: mrcaf;
	position: relative;
	padding: 16px 0 16px clamp(30px, 3vw, 42px);
	border-top: 1px solid var(--mrc-hilo-fino);
}

.mrca-fuentes li:last-child { border-bottom: 1px solid var(--mrc-hilo-fino); }

.mrca-fuentes li::before {
	content: counter(mrcaf, decimal-leading-zero);
	position: absolute;
	left: 0;
	top: 1.35em;
	font-family: var(--mrc-display);
	font-size: 0.78rem;
	color: var(--mrc-acento);
}

.mrca-fuentes a {
	font-family: var(--mrc-sans);
	font-weight: 400;
	font-size: 0.98rem;
	line-height: 1.5;
	color: var(--mrc-tinta);
	text-decoration: underline;
	text-decoration-color: rgba(var(--mrc-acento-rgb), 0.5);
	text-underline-offset: 4px;
	/* El relleno vertical en un enlace en línea NO cambia el alto de línea,
	   pero sí agranda el área que responde al dedo: sube de 19 a 43 px sin
	   mover un solo píxel de la maqueta. */
	padding-block: 12px;
	transition: text-decoration-color 0.4s ease;
}

.mrca-fuentes a:hover { text-decoration-color: var(--mrc-acento); }

.mrca-fuentes li span {
	display: block;
	margin-top: 6px;
	font-family: var(--mrc-sans);
	font-weight: 300;
	font-size: 0.86rem;
	line-height: 1.55;
	color: var(--mrc-tenue);
}

.mrca-fuentes__aviso {
	margin: clamp(26px, 3.4vh, 40px) 0 0;
	font-family: var(--mrc-sans);
	font-weight: 300;
	font-size: 0.82rem;
	line-height: 1.6;
	color: var(--mrc-tenue);
	max-width: 62ch;
}

.mrca-cta { padding: clamp(56px, 10vh, 120px) 0; }

.mrca-cta__t {
	margin: 0;
	font-family: var(--mrc-display);
	font-weight: 300;
	font-size: clamp(2.1rem, 4.6vw, 4.2rem);
	line-height: 1.02;
	letter-spacing: -0.03em;
	color: var(--mrc-tinta);
}

.mrca-cta__l {
	margin: clamp(18px, 2.4vh, 28px) 0 clamp(28px, 3.6vh, 42px);
	max-width: 48ch;
	font-family: var(--mrc-sans);
	font-weight: 300;
	font-size: clamp(1.02rem, 1.2vw, 1.16rem);
	line-height: 1.62;
	color: var(--mrc-suave);
}

.mrca-cta__b {
	display: inline-flex;
	align-items: center;
	gap: 16px;
	min-height: 56px;
	padding: 0 clamp(24px, 3vw, 36px);
	border: 1px solid var(--mrc-acento);
	border-radius: 2px;
	font-family: var(--mrc-sans);
	font-size: 0.74rem;
	font-weight: 500;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--mrc-tinta);
	text-decoration: none;
	transition: background-color 0.5s var(--mrc-e), color 0.5s var(--mrc-e);
}

.mrca-cta__b svg { width: 17px; height: 17px; transition: transform 0.5s var(--mrc-e); }
.mrca-cta__b:hover { background: var(--mrc-acento); color: var(--mrc-bg); }
.mrca-cta__b:hover svg { transform: translateX(5px); }

.mrca-mas { padding: 0 0 clamp(56px, 9vh, 110px); }

.mrca-mas__t {
	margin: 0 0 clamp(28px, 4vh, 44px);
	padding-bottom: 16px;
	border-bottom: 1px solid var(--mrc-hilo);
	font-family: var(--mrc-sans);
	font-size: 0.7rem;
	font-weight: 500;
	letter-spacing: 0.26em;
	text-transform: uppercase;
	color: var(--mrc-tenue);
}

.mrca-mas__par {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(28px, 4vw, 56px);
	margin-bottom: clamp(34px, 5vh, 56px);
}

.mrca-mas__par .mrc-ficha { grid-column: auto; }


/* ══════════════════════════════════════════════════════════════════════════
   10 · Aparición

   El estado oculto SÓLO existe bajo .mrc--anim / .mrca--anim, que pone el
   script, y hay red de seguridad por temporizador. Sin JavaScript no hay nada
   escondido esperando una clase que no va a llegar.
   ══════════════════════════════════════════════════════════════════════════ */
.mrc--anim [data-mrc-in],
.mrca--anim [data-mrc-in] {
	opacity: 0;
	transform: translateY(22px);
	transition: opacity 0.85s var(--mrc-e), transform 0.85s var(--mrc-e);
}

.mrc--anim [data-mrc-in].es-dentro,
.mrca--anim [data-mrc-in].es-dentro { opacity: 1; transform: none; }


/* ══════════════════════════════════════════════════════════════════════════
   11 · Responsive
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 1100px) {
	/* El índice lateral no cabe: el cuerpo pasa a una sola columna y el índice
	   se retira. No se convierte en un desplegable arriba porque duplicaría la
	   navegación que ya da el propio texto. */
	.mrca-cuerpo__in { grid-template-columns: minmax(0, 1fr); }
	.mrca-indice { display: none; }
}

@media (max-width: 900px) {
	.mrc-hero__reglas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.mrc-hero__reglas li:nth-child(3) { padding-left: 0; border-left: 0; }
	.mrc-hero__reglas li:nth-child(n + 3) { border-top: 1px solid rgba(184, 168, 144, 0.2); margin-top: 4px; }

	.mrc-apertura__a { grid-template-columns: minmax(0, 1fr); }
	.mrc-obligada__in { grid-template-columns: minmax(0, 1fr); }
	.mrc-obligada__lam { grid-row: 2; aspect-ratio: 16 / 9; }

	.mrca-ev__par { grid-template-columns: minmax(0, 1fr); gap: clamp(34px, 5vh, 50px); }
	.mrca-mas__par { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 700px) {
	/* En vertical todas las tarjetas miden lo mismo: el ritmo de anchos no
	   significa nada cuando sólo hay una columna. */
	.mrc-lista { grid-template-columns: minmax(0, 1fr); }
	.mrc-ficha--media,
	.mrc-ficha--ancha { grid-column: auto; }
	.mrc-ficha--ancha .mrc-ficha__a { grid-template-columns: minmax(0, 1fr); }
	.mrc-ficha--ancha .mrc-ficha__lam { aspect-ratio: 3 / 2; }

	.mrc-hero__reglas { grid-template-columns: minmax(0, 1fr); }
	.mrc-hero__reglas li { padding-left: 0 !important; border-left: 0 !important; }
	.mrc-hero__reglas li + li { border-top: 1px solid rgba(184, 168, 144, 0.2); }

	/* El filtro se desplaza en horizontal en vez de partirse en tres filas. */
	.mrc-filtro {
		flex-wrap: nowrap;
		overflow-x: auto;
		scrollbar-width: none;
		-webkit-overflow-scrolling: touch;
		margin-inline: 0;
		padding-inline: var(--mrc-gut);
		width: 100%;
	}
	.mrc-filtro::-webkit-scrollbar { display: none; }
	.mrc-filtro__b { flex: none; }

	.mrca-dato { padding-left: 18px; }
	.mrca-cita { padding-left: 20px; }
	.mrca-cita::before { font-size: 3rem; }
}


/* ══════════════════════════════════════════════════════════════════════════
   12 · Movimiento reducido — se apaga el movimiento, no el contenido
   ══════════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
	.mrc--anim [data-mrc-in],
	.mrca--anim [data-mrc-in] { opacity: 1; transform: none; transition: none; }
	.mrca-hero__lam img { transform: scale(1.02); }
	[data-mrc-sub] { transition: none; }
	.mrc-ficha__lam img,
	.mrc-apertura__lam img { transition: none; }
	.mrca-progreso { transition: none; }
}

/* ══════════════════════════════════════════════════════════════════════════
   13 · La entrada al filtrar

   Cuando el filtro resuelve sin recargar, las tarjetas que quedan hacen una
   entrada corta y escalonada. No es adorno: sin ella el cambio ocurre en un
   fotograma y el ojo no sabe si la lista se filtró o si la página saltó.

   El escalonado va por --mrc-i, que escribe el script con la posición dentro
   de la lista YA filtrada.
   ══════════════════════════════════════════════════════════════════════════ */
.mrc-ficha.es-entra {
	animation: mrc-entra 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
	animation-delay: calc(var(--mrc-i, 0) * 45ms);
}

@keyframes mrc-entra {
	from { opacity: 0; transform: translateY(14px); }
	to   { opacity: 1; transform: none; }
}

/* Y las tarjetas filtradas no dejan hueco: `hidden` las saca del flujo de la
   rejilla, no sólo de la vista. */
.mrc-lista [hidden],
.mrc [hidden] { display: none !important; }

@media (prefers-reduced-motion: reduce) {
	.mrc-ficha.es-entra { animation: none; }
}