/* ==========================================================================
   Medicina Regenerativa — página completa

   El resto de los pilares usa el layout angosto de .doc-page; esta página no:
   ocupa el ancho de la pantalla como la portada, y cada sección es una escena.

   EL COLOR NO ESTÁ FIJADO. El hero es negro y el cuerpo es blanco, pero el
   paso de uno a otro lo conduce el scroll y la tinta voltea sola por
   luminancia — el mismo motor de la portada y de las otras subpáginas, que es
   el estándar de la casa, no un efecto de una página.

   De ahí que aquí casi no queden colores literales: todo lo que tiene que
   voltear se compone sobre --mr-tinta-rgb y --mr-acento-rgb, y una sola clase
   (.es-oscuro) las reescribe. Las variables antiguas —--beige, --ink,
   --ink-dim— siguen existiendo, derivadas de esas dos, para que el resto de la
   hoja no tenga que perseguir cada declaración.
   ========================================================================== */

.mr {
	/* Las dos que mandan. */
	--mr-fondo: #FFFFFF;
	--mr-tinta-rgb: 10, 10, 11;
	/* #7C6B4E. El beige de marca #B8A890 da 2,3:1 sobre blanco y no se lee;
	   éste da 4,98:1 y sigue siendo el mismo tono de la casa. */
	--mr-acento-rgb: 124, 107, 78;
	--mr-e: cubic-bezier(0.22, 1, 0.36, 1);

	/* Derivadas: lo que ya usaba la hoja, ahora compuesto sobre las de arriba. */
	--beige: rgb(var(--mr-acento-rgb));
	--beige-soft: rgba(var(--mr-acento-rgb), 0.55);
	--beige-faint: rgba(var(--mr-acento-rgb), 0.16);
	--ink: rgb(var(--mr-tinta-rgb));
	--ink-dim: rgba(var(--mr-tinta-rgb), 0.74);

	position: relative;
	background: var(--mr-fondo);
	color: var(--ink);
	/* El fondo no lleva transition: lo escribe el JS en cada cuadro y una
	   transición encima lo dejaría siempre un paso por detrás del scroll. */
}

.mr.es-oscuro {
	--mr-tinta-rgb: 247, 245, 240;
	--mr-acento-rgb: 184, 168, 144;   /* #B8A890 — sobre obsidiana, 8,0:1 */
}

/* Saca la página del contenedor centrado del tema. */
.mr__bleed {
	margin-inline: calc(50% - 50vw);
	width: 100vw;
	max-width: 100vw;
}

.mr__section {
	position: relative;
	padding: clamp(72px, 11vh, 160px) clamp(24px, 6vw, 104px);
}

.mr__inner {
	max-width: 1560px;
	margin: 0 auto;
}

/* ── Rótulo de sección: número + título contundente ── */
.mr__eyebrow {
	display: flex;
	align-items: center;
	gap: 14px;
	font-family: var(--font-sans, system-ui, sans-serif);
	font-size: clamp(0.7rem, 0.9vw, 0.8rem);
	letter-spacing: 0.28em;
	text-transform: uppercase;
	color: var(--beige);
	margin: 0 0 clamp(18px, 2.4vw, 34px);
}

.mr__eyebrow::after {
	content: "";
	flex: 1;
	height: 1px;
	background: linear-gradient(90deg, var(--beige-soft), transparent);
	max-width: 200px;
}

.mr__title {
	font-family: var(--font-display, Butler, serif);
	font-weight: 400;
	text-transform: uppercase;
	line-height: 0.94;
	letter-spacing: -0.005em;
	font-size: clamp(2.4rem, 6vw, 5.4rem);
	margin: 0 0 clamp(24px, 3vw, 46px);
	color: var(--ink);
}

.mr__lead {
	font-size: clamp(1.05rem, 1.35vw, 1.35rem);
	line-height: 1.65;
	font-weight: 300;
	color: var(--ink-dim);
	margin: 0 0 1.25em;
	max-width: 60ch;
}

.mr__lead strong {
	color: var(--ink);
	font-weight: 400;
}

/* ══════════ 01 · QUÉ ES — texto + carrete de imágenes ══════════

   Las tres tomas son escenas concretas —el laboratorio, la aplicación, la
   valoración—, no composiciones de luz. El marco creció y se hizo más
   vertical (5:4 en vez de 4:3) y la columna de imagen pesa ahora más que la
   de texto: la sección la abre la fotografía, no el párrafo.
   ══════════════════════════════════════════════════════════════ */
.mr-que {
	display: grid;
	grid-template-columns: minmax(0, 0.84fr) minmax(0, 1.16fr);
	gap: clamp(32px, 5vw, 88px);
	align-items: center;
}

.mr-shots-wrap { position: relative; }

.mr-shots {
	position: relative;
	aspect-ratio: 5 / 4;
	overflow: hidden;
	background: #000;
	box-shadow: 0 40px 120px rgba(var(--mr-tinta-rgb), 0.28), 0 0 0 1px var(--beige-faint);
	/* El paralaje del cursor lo escribe el JS en estas dos; en reposo valen
	   cero y el marco se queda quieto. */
	--mr-px: 0px;
	--mr-py: 0px;
	transform: translate3d(var(--mr-px), var(--mr-py), 0);
	transition: transform 600ms var(--mr-e), box-shadow 600ms ease;
}

.mr-shots__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0;
	/* La imagen va un punto más grande que su marco: así el paralaje puede
	   moverla sin descubrir el fondo por ningún canto. */
	transform: scale(1.1);
	transition: opacity 1200ms ease, transform 6000ms linear;
}

.mr-shots__img.is-on {
	opacity: 1;
	transform: scale(1.03);
}

/* Marco luminoso: se enciende con la imagen activa. */
.mr-shots::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	border: 1px solid var(--beige-faint);
	box-shadow: inset 0 0 90px rgba(var(--mr-acento-rgb), 0.12);
}

.mr-shots__dots {
	position: absolute;
	left: 18px;
	bottom: 16px;
	z-index: 2;
	display: flex;
	gap: 8px;
}

.mr-shots__dot {
	width: 26px;
	height: 2px;
	/* Los indicadores viven SIEMPRE sobre la fotografía, que es oscura, así
	   que no voltean con la página: se quedan en marfil. */
	background: rgba(247, 245, 240, 0.28);
	border: 0;
	padding: 0;
	overflow: hidden;
	position: relative;
	cursor: pointer;
}

.mr-shots__dot.is-on::after {
	content: "";
	position: absolute;
	inset: 0;
	background: #B8A890;
	transform-origin: left center;
	animation: mr-dot 3000ms linear forwards;
}

@keyframes mr-dot {
	from { transform: scaleX(0); }
	to   { transform: scaleX(1); }
}

.mr-shots__pie {
	margin: 14px 0 0;
	font-family: var(--font-sans, system-ui, sans-serif);
	font-size: 0.6rem;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: rgba(var(--mr-tinta-rgb), 0.62);
}

/* ══════════ 02 · CÓMO LO HACEMOS — tarjetas 3D ══════════

   La tarjeta hace, en pequeño, lo que dice la página: se rehace bajo el
   cursor. En reposo es una superficie apagada con un filo gris; al llegar el
   puntero el filo gris se apaga, se enciende un canto de oro que sigue a la
   mano, la tarjeta se levanta hacia el lector y un brillo la cruza.

   Cuatro capas coordinadas por la misma medición del puntero:
     · la inclinación y la elevación, en la propia tarjeta;
     · el canto de oro (::before, un degradado enmascarado a marco);
     · el halo interior (::after);
     · el brillo especular y el ordinal en paralaje, que van a profundidades
       distintas — es lo que hace que se vea volumen de verdad y no una foto
       girada.
   ══════════════════════════════════════════════════════════════ */
.mr-cards {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: clamp(18px, 2vw, 30px);
	perspective: 1400px;
	perspective-origin: 50% 42%;
}

.mr-card {
	position: relative;
	padding: clamp(30px, 2.6vw, 46px);
	background: rgba(var(--mr-tinta-rgb), 0.028);
	border: 1px solid rgba(var(--mr-tinta-rgb), 0.14);
	min-height: clamp(320px, 34vh, 420px);
	display: flex;
	flex-direction: column;
	transform-style: preserve-3d;
	overflow: hidden;
	/* --mx/--my los escribe el JS con la posición del cursor dentro de la
	   tarjeta; sin cursor se quedan en el centro y la tarjeta queda plana. */
	--mx: 50%;
	--my: 50%;
	--nx: 0;
	--ny: 0;
	transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateZ(var(--tz, 0px));
	transition:
		transform 500ms var(--mr-e),
		background-color 500ms ease,
		border-color 500ms ease,
		box-shadow 500ms ease;
	will-change: transform;
}

/* La elevación. La tarjeta se acerca al lector, y la sombra crece con ella:
   sin sombra, un translateZ se lee como un simple zoom. */
.mr-card.is-hot {
	--tz: 26px;
	background: rgba(var(--mr-tinta-rgb), 0.045);
	border-color: transparent;
	box-shadow: 0 40px 80px -40px rgba(var(--mr-tinta-rgb), 0.42), 0 0 0 1px rgba(var(--mr-acento-rgb), 0.55);
}

/* El canto de oro: un degradado que sólo pinta el marco (mask compuesta) y
   que sigue al cursor. Es el borde, no una sombra: por eso el mask. Arranca
   apagado del todo —antes salía ya medio encendido— para que al llegar el
   puntero se vea COSER el filo, que es el gesto de la página. */
.mr-card::before {
	content: "";
	position: absolute;
	inset: 0;
	padding: 1px;
	background: radial-gradient(240px circle at var(--mx) var(--my), rgb(var(--mr-acento-rgb)), rgba(var(--mr-acento-rgb), 0.55) 42%, rgba(var(--mr-acento-rgb), 0.3) 100%);
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	        mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	-webkit-mask-composite: xor;
	        mask-composite: exclude;
	opacity: 0;
	transition: opacity 500ms ease;
	pointer-events: none;
	z-index: 3;
}

/* Halo interior que acompaña al cursor. */
.mr-card::after {
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient(340px circle at var(--mx) var(--my), rgba(var(--mr-acento-rgb), 0.16), transparent 68%);
	opacity: 0;
	transition: opacity 400ms ease;
	pointer-events: none;
	z-index: 1;
}

.mr-card.is-hot::before { opacity: 1; }
.mr-card.is-hot::after  { opacity: 1; }

/* El brillo especular: un filo diagonal que cruza la tarjeta siguiendo al
   cursor. Es lo que convence de que hay superficie; sin él, la inclinación se
   lee como una imagen girada y no como un objeto con cara.

   ES UNA RAYA, NO UNA BANDA. La primera versión era un degradado ancho, y
   sobre superficie clara eso no se lee como reflejo: se lee como un velo, y
   se comía el texto de la tarjeta. Un filo estrecho —cinco puntos de ancho—
   hace lo que hace la luz en el canto de un cristal, y no tapa nada. */
.mr-card__sheen {
	position: absolute;
	inset: -18%;
	z-index: 2;
	pointer-events: none;
	opacity: 0;
	background: linear-gradient(
		105deg,
		transparent 47.4%,
		rgba(var(--mr-acento-rgb), 0.22) 49.2%,
		rgba(255, 255, 255, 0.62) 50%,
		rgba(var(--mr-acento-rgb), 0.22) 50.8%,
		transparent 52.6%);
	transform: translate3d(calc(var(--nx) * 42%), calc(var(--ny) * 22%), 0);
	transition: opacity 420ms ease, transform 320ms linear;
	mix-blend-mode: overlay;
}

.mr-card.is-hot .mr-card__sheen { opacity: 1; }

/* Sobre fondo oscuro el mismo reflejo casi no se ve —la mezcla overlay aclara
   poco cuando lo que hay debajo es negro—, así que ahí sí puede subir. */
.mr.es-oscuro .mr-card__sheen {
	background: linear-gradient(
		105deg,
		transparent 46.6%,
		rgba(var(--mr-acento-rgb), 0.3) 48.8%,
		rgba(255, 255, 255, 0.75) 50%,
		rgba(var(--mr-acento-rgb), 0.3) 51.2%,
		transparent 53.4%);
}

/* El ordinal va al FONDO y se mueve AL CONTRARIO que la inclinación.

   Es la pieza que da la profundidad: dos capas que giran juntas se leen como
   una lámina, y dos que se desplazan en sentidos opuestos se leen como dos
   planos separados. Por eso el número está grande y apagado —es fondo, no
   dato— y el texto va delante. */
.mr-card__n {
	position: relative;
	z-index: 2;
	font-family: var(--font-display, Butler, serif);
	font-size: clamp(3.4rem, 5vw, 5.6rem);
	line-height: 0.86;
	color: rgba(var(--mr-acento-rgb), 0.78);
	margin-bottom: clamp(16px, 2vw, 26px);
	letter-spacing: -0.04em;
	transform: translateZ(-14px) translate3d(calc(var(--nx) * -16px), calc(var(--ny) * -12px), 0);
	transition: transform 500ms var(--mr-e), color 500ms ease;
}

.mr-card.is-hot .mr-card__n { color: rgb(var(--mr-acento-rgb)); }

.mr-card__t {
	position: relative;
	z-index: 2;
	font-family: var(--font-display, Butler, serif);
	font-size: clamp(1.3rem, 1.7vw, 1.85rem);
	font-weight: 400;
	line-height: 1.15;
	margin: 0 0 0.7em;
	color: var(--ink);
	transform: translateZ(45px);
}

.mr-card__d {
	position: relative;
	z-index: 2;
	font-size: clamp(0.95rem, 1.05vw, 1.06rem);
	line-height: 1.66;
	font-weight: 300;
	color: var(--ink-dim);
	margin: 0;
	transform: translateZ(22px);
}

/* ══════════ 03 · POR QUÉ ══════════ */
.mr-why {
	position: relative;
	background: radial-gradient(1100px 520px at 50% 0%, rgba(var(--mr-acento-rgb), 0.10), transparent 70%);
}

.mr-why__inner {
	max-width: 1100px;
	margin: 0 auto;
	text-align: center;
}

.mr-why__inner .mr__eyebrow { justify-content: center; }
.mr-why__inner .mr__eyebrow::after { display: none; }
.mr-why__inner .mr__lead { margin-inline: auto; }

.mr-cta {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	margin-top: clamp(22px, 3vw, 40px);
	padding: 17px 34px;
	border: 1px solid var(--beige-soft);
	color: var(--ink);
	background: transparent;
	text-decoration: none;
	font-family: var(--font-sans, system-ui, sans-serif);
	font-size: 0.82rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	position: relative;
	overflow: hidden;
	transition: color 400ms ease, border-color 400ms ease;
}

.mr-cta span { position: relative; z-index: 1; }

.mr-cta::before {
	content: "";
	position: absolute;
	inset: 0;
	background: rgb(var(--mr-acento-rgb));
	transform: translateY(101%);
	transition: transform 500ms var(--mr-e);
}

.mr-cta:hover,
.mr-cta:focus-visible { color: var(--mr-fondo); border-color: rgb(var(--mr-acento-rgb)); }
.mr-cta:hover::before,
.mr-cta:focus-visible::before { transform: translateY(0); }

/* ══════════ 04 · PARA QUIÉN ES — a sangre ══════════

   Deja de ser un bloque de texto suelto: la fotografía ocupa el ancho de la
   pantalla y el texto va encima. Misma construcción que cierra Movimiento
   Estratégico, y por el mismo motivo — después de una página de superficies
   claras, una escena.

   La sección NO voltea con el arco de color: la fotografía es su propio fondo
   y siempre es oscura, así que su tinta se queda en marfil pase lo que pase
   con el resto de la página.
   ══════════════════════════════════════════════════════════════ */
.mr-who {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	min-height: clamp(540px, 84vh, 880px);
	display: grid;
	align-items: center;
	color: #F7F5F0;
}

.mr-who__foto {
	position: absolute;
	inset: 0;
	z-index: -1;
	margin: 0;
	overflow: hidden;
	background: #0A0A0B;
}

.mr-who__foto img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* La conversación vive en el centro del encuadre y el texto ocupa la
	   izquierda, así que el foco se corre a la derecha. */
	object-position: 62% 46%;
	/* 0,82 y no menos: con el degradado encima, bajar más deja un rectángulo
	   negro con texto, que es lo contrario de lo que se busca. La escena
	   tiene que verse. */
	filter: brightness(0.82) saturate(0.9) contrast(1.04);
}

.mr-who__foto::after {
	content: "";
	position: absolute;
	inset: 0;
	/* Denso donde va el texto —la mitad izquierda— y despejado a partir del
	   72 %, que es donde está la escena. */
	background:
		linear-gradient(90deg, rgba(10, 10, 11, 0.88) 0%, rgba(10, 10, 11, 0.8) 30%, rgba(10, 10, 11, 0.56) 50%, rgba(10, 10, 11, 0.16) 72%, rgba(10, 10, 11, 0) 100%),
		linear-gradient(180deg, rgba(10, 10, 11, 0.34) 0%, rgba(10, 10, 11, 0) 22%, rgba(10, 10, 11, 0) 72%, rgba(10, 10, 11, 0.44) 100%);
}

/* El pie va abajo a la IZQUIERDA: a la derecha caería sobre la zona
   despejada de la fotografía, donde el degradado ya vale cero, y una nota de
   PROCEDENCIA que no se lee no sirve de nada. */
.mr-who__foto figcaption {
	position: absolute;
	left: clamp(24px, 6vw, 104px);
	bottom: clamp(14px, 2.4vh, 24px);
	font-family: var(--font-sans, system-ui, sans-serif);
	font-size: 0.6rem;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: rgba(247, 245, 240, 0.82);
	text-shadow: 0 1px 6px rgba(10, 10, 11, 0.7);
}

.mr-who__inner {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: 1560px;
	margin: 0 auto;
	padding: clamp(70px, 10vh, 130px) clamp(24px, 6vw, 104px);
}

/* Sobre la fotografía la tinta es fija, no la del arco: el fondo de esta
   sección es la imagen, y la imagen siempre es oscura. */
.mr-who .mr__eyebrow { color: #C9B98F; width: max-content; max-width: 100%; }
.mr-who .mr__eyebrow::after { background: linear-gradient(90deg, rgba(201, 185, 143, 0.6), transparent); }

.mr-who__text {
	font-family: var(--font-display, Butler, serif);
	font-size: clamp(1.5rem, 3.1vw, 2.9rem);
	line-height: 1.24;
	font-weight: 400;
	color: #F7F5F0;
	margin: 0;
	max-width: min(24ch, 52%);
}

.mr-who__text em {
	font-style: normal;
	color: #C9B98F;
}

/* Sin fotografía la sección vuelve a ser un bloque de texto sobre el fondo de
   la página, y entonces sí voltea con el arco de color. */
.mr-who--sin-foto {
	min-height: 0;
	color: var(--ink);
	padding: clamp(72px, 11vh, 160px) 0;
}

.mr-who--sin-foto .mr__eyebrow { color: var(--beige); }
.mr-who--sin-foto .mr-who__text { color: var(--ink); max-width: 26ch; }
.mr-who--sin-foto .mr-who__text em { color: var(--beige); }

/* ══════════ Riel de progreso (recorrido de la página) ══════════ */
.mr-rail {
	position: fixed;
	right: clamp(14px, 2vw, 34px);
	top: 50%;
	transform: translateY(-50%);
	z-index: 40;
	display: flex;
	flex-direction: column;
	gap: 16px;
	pointer-events: none;
	/* Oculto mientras el hero ocupa la pantalla: el bloque de título del hero
	   está anclado a la derecha y el riel se le montaba encima. */
	opacity: 0;
	transition: opacity 500ms ease;
}

.mr-rail.is-ready { opacity: 1; }

.mr-rail__step {
	display: flex;
	align-items: center;
	gap: 10px;
	justify-content: flex-end;
	font-family: var(--font-sans, system-ui, sans-serif);
	font-size: 0.66rem;
	letter-spacing: 0.2em;
	color: rgba(var(--mr-tinta-rgb), 0.62);
	transition: color 500ms ease;
}

/* La raya crece con scaleX y no con width: animar el ancho recalcularía el
   layout del riel en cada fotograma y además empujaría la etiqueta. Con el
   origen a la derecha se extiende hacia la izquierda y el texto no se mueve. */
.mr-rail__step i {
	display: block;
	width: 44px;
	height: 1px;
	background: rgba(var(--mr-tinta-rgb), 0.38);
	transform: scaleX(0.5);
	transform-origin: right center;
	transition: transform 500ms var(--mr-e), background 500ms ease;
}

.mr-rail__step.is-on { color: var(--beige); }
.mr-rail__step.is-on i { transform: scaleX(1); background: var(--beige); }

/* Sobre la sección a sangre el riel va en marfil: ahí el fondo es la
   fotografía, no el fondo de la página. */
.mr-rail.es-sobre-foto .mr-rail__step { color: rgba(247, 245, 240, 0.5); }
.mr-rail.es-sobre-foto .mr-rail__step i { background: rgba(247, 245, 240, 0.34); }
.mr-rail.es-sobre-foto .mr-rail__step.is-on { color: #C9B98F; }
.mr-rail.es-sobre-foto .mr-rail__step.is-on i { background: #C9B98F; }

/* ══════════ Aparición al hacer scroll ══════════
   El estado oculto se aplica SOLO bajo .mr--anim, que el JS añade nada más
   arrancar. Si el script no corre, falla o el observador no llega a dispararse,
   el contenido queda visible: nunca se esconde algo que dependa de JS para
   volver a aparecer. */
.mr--anim .mr-in {
	opacity: 0;
	transform: translateY(28px);
	transition: opacity 900ms var(--mr-e), transform 900ms var(--mr-e);
}

.mr--anim .mr-in.is-in {
	opacity: 1;
	transform: none;
}

/* ══════════ Halo de cursor ══════════
   El elemento es solo un ancla sin tamaño que el JS mueve; el aro visible vive
   en el pseudoelemento y crece con scale. Animar width/height aquí obligaba a
   recalcular el layout en cada fotograma de cada hover. */
.mr-halo {
	position: fixed;
	top: 0;
	left: 0;
	width: 0;
	height: 0;
	pointer-events: none;
	z-index: 60;
	opacity: 0;
	transition: opacity 400ms ease;
	/* `screen` desaparecía por completo sobre el blanco del cuerpo: aclarar lo
	   que ya es blanco no cambia nada. `multiply` hace lo propio del lado
	   claro, y el JS devuelve `screen` mientras la página está oscura. */
	mix-blend-mode: multiply;
}

/* El halo y el resplandor son hijos de <body>, no de .mr: no pueden leer su
   clase. La marca la pone el JS en <html>, que sí es antepasado de los dos. */
:root.mr-es-oscuro .mr-halo {
	mix-blend-mode: screen;
	--mr-halo-borde: rgba(184, 168, 144, 0.55);
	--mr-halo-borde-on: #B8A890;
	--mr-halo-fondo: rgba(184, 168, 144, 0.12);
}

:root.mr-es-oscuro .mr-glow { --mr-glow-rgb: 184, 168, 144; }

.mr-halo::before {
	content: "";
	position: absolute;
	left: -38px;
	top: -38px;
	width: 76px;
	height: 76px;
	border-radius: 50%;
	border: 1.5px solid var(--mr-halo-borde, rgba(124, 107, 78, 0.55));
	transform: scale(0.342);
	transition: transform 350ms var(--mr-e), background 350ms ease, border-color 350ms ease;
}

.mr-halo.is-on { opacity: 1; }

.mr-halo.is-big::before {
	transform: scale(1);
	background: var(--mr-halo-fondo, rgba(124, 107, 78, 0.12));
	border-color: var(--mr-halo-borde-on, rgba(124, 107, 78, 0.9));
}

.mr-glow {
	position: fixed;
	top: 0;
	left: 0;
	width: 460px;
	height: 460px;
	border-radius: 50%;
	pointer-events: none;
	z-index: 1;
	opacity: 0;
	transform: translate3d(-50%, -50%, 0);
	background: radial-gradient(circle, rgba(var(--mr-glow-rgb, 124, 107, 78), 0.13) 0%, rgba(var(--mr-glow-rgb, 124, 107, 78), 0.04) 42%, transparent 72%);
	filter: blur(30px);
	transition: opacity 700ms ease;
}

.mr-glow.is-on { opacity: 1; }

/* ══════════ Responsive ══════════ */
@media (min-width: 1081px) {
	.mr__section { padding-right: clamp(150px, 11vw, 200px); }
	/* La sección a sangre no: ahí el texto vive en la mitad izquierda y la
	   fotografía tiene que llegar al borde. */
	.mr-who { padding-right: 0; }
	.mr-who__inner { padding-right: clamp(150px, 11vw, 200px); }
}

@media (max-width: 1080px) {
	.mr-que { grid-template-columns: 1fr; }
	.mr-cards { grid-template-columns: 1fr; }
	.mr-card { min-height: 0; }
	.mr-rail { display: none; }
	.mr-shots { aspect-ratio: 4 / 3; }
	.mr-who { min-height: 0; }
	.mr-who__text { max-width: 100%; }
	.mr-who__foto::after {
		background:
			linear-gradient(180deg, rgba(10, 10, 11, 0.42) 0%, rgba(10, 10, 11, 0.72) 46%, rgba(10, 10, 11, 0.86) 100%);
	}
}

@media (hover: none), (pointer: coarse) {
	.mr-halo, .mr-glow { display: none; }
}

@media (prefers-reduced-motion: reduce) {
	.mr--anim .mr-in { opacity: 1; transform: none; transition: none; }
	.mr-shots { transform: none !important; }
	.mr-shots__img { transition: opacity 300ms ease; transform: none; }
	.mr-shots__img.is-on { transform: none; }
	.mr-shots__dot.is-on::after { animation: none; transform: scaleX(1); }
	.mr-card { transform: none !important; transition: none; }
	.mr-card__n, .mr-card__sheen { transform: none !important; }
	.mr-card__sheen { display: none; }
	.mr-halo, .mr-glow { display: none; }
}