/* ==========================================================================
   Células Madre

   La página tiene un trabajo concreto: explicar la terapia sin venderla. Todo
   lo de aquí está puesto para eso, y por eso es la hoja más sobria del sitio
   —sin lentes, sin pilas, sin acordeones—. El contenido es denso y con dato
   duro dentro (una sola indicación aprobada, cero productos de exosomas), y un
   envoltorio espectacular sobre ese contenido lo haría sonar a folleto, que es
   exactamente el registro del que la página huye.

   EL HERO ES PROVISIONAL. El propietario va a diseñar uno aparte. Lo de aquí
   es la estructura sobre la que se montará —rótulo, título, subtítulo, párrafo
   y un botón—, no el diseño final: montar ahora algo elaborado sería trabajo
   que se tira.

   EL COLOR NO SE FIJA POR SECCIÓN, igual que en el resto del sitio: el fondo lo
   interpola main.js con el scroll y la tinta voltea sola por luminancia. Por
   eso aquí no hay ni un color literal de texto — todo cuelga de --ink y de
   --gold, que es lo que permite que la página funcione en el tramo claro y en
   el oscuro sin una sola regla más.
   ========================================================================== */

.cm {
	position: relative;
	z-index: 1;
}

/* El mismo par de valores que .ep__section y .mr__section. El aire horizontal
   vive en la SECCIÓN y no en el inner, como en el resto del tema: así una
   sección a sangre puede anularlo sin desmontar la columna. */
.cm__seccion {
	position: relative;
	padding: clamp(72px, 11vh, 160px) clamp(24px, 6vw, 104px);
}

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

/* --------------------------------------------------------------------------
   EL HERO — provisional, ver la nota de arriba
   -------------------------------------------------------------------------- */
.cm-hero {
	padding-block: clamp(120px, 17vh, 210px) clamp(50px, 7vh, 90px);
}

.cm-hero__texto .cm-hero__titulo,
.cm-hero__texto .cm-hero__sub,
.cm-hero__texto .cm-hero__intro {
	/* Fijo y no --ink: la tinta de la página voltea con el scroll, y sobre esta
	   imagen —que es oscura siempre— el volteo dejaría texto negro ilegible. */
	color: #F4F0E5;
}

.cm-hero__eyebrow,
.cm__eyebrow {
	margin: 0 0 clamp(18px, 2.4vw, 34px);
	font-family: var(--font-sans, system-ui, sans-serif);
	font-size: clamp(.7rem, .9vw, .8rem);
	font-weight: 400;
	letter-spacing: .28em;
	text-transform: uppercase;
	color: var(--gold, #F5DE8A);
}

.cm-hero__titulo {
	margin: 0;
	font-family: var(--font-display, Butler, serif);
	font-weight: 400;
	text-transform: uppercase;
	/* Dos palabras cortas: aguanta el cuerpo grande sin partirse. */
	font-size: clamp(2.8rem, 7vw, 6rem);
	line-height: .94;
	letter-spacing: -.005em;
	color: var(--ink);
}

.cm-hero__sub {
	margin: clamp(20px, 2.6vw, 32px) 0 0;
	max-width: 34ch;
	font-family: var(--font-display, Butler, serif);
	font-weight: 400;
	font-size: clamp(1.24rem, 2vw, 1.84rem);
	line-height: 1.32;
	color: var(--ink);
}

.cm-hero__intro {
	margin: clamp(16px, 2vw, 24px) 0 0;
	max-width: 62ch;
	font-family: var(--font-sans, system-ui, sans-serif);
	font-size: clamp(.98rem, 1.1vw, 1.1rem);
	line-height: 1.66;
	opacity: .82;
	color: var(--ink);
}

/* --------------------------------------------------------------------------
   TIPOGRAFÍA DE SECCIÓN
   -------------------------------------------------------------------------- */
.cm__titulo {
	margin: 0 0 clamp(22px, 2.6vw, 38px);
	font-family: var(--font-display, Butler, serif);
	font-weight: 400;
	/* Los titulares de esta página son frases, no dos palabras sueltas
	   ——«Lo aprobado y lo que está en investigación»——, así que el cuerpo es
	   menor que el de las páginas de pilar y se acota el ancho para que no
	   salgan renglones de una sola palabra. text-wrap:balance reparte por peso
	   en vez de llenar hasta el borde. */
	/* La escala del sistema (.mr__title llega a 5.4rem). Aquí el techo es algo
	   menor porque estos titulares son frases y no dos palabras sueltas, pero
	   el suelo y la pendiente son los del resto del tema: con 3,1rem de techo
	   esta página se leía como una nota al pie de las demás. */
	font-size: clamp(2.3rem, 5vw, 4.4rem);
	line-height: 1.02;
	letter-spacing: -.02em;
	max-width: 18ch;
	text-wrap: balance;
	color: var(--ink);
}

.cm__lead {
	margin: 0 0 clamp(14px, 1.6vw, 22px);
	max-width: 62ch;
	font-family: var(--font-sans, system-ui, sans-serif);
	font-size: clamp(1.02rem, 1.15vw, 1.16rem);
	line-height: 1.72;
	opacity: .84;
	color: var(--ink);
	text-wrap: pretty;
}

.cm__lead--ancho {
	max-width: 66ch;
	margin-bottom: clamp(30px, 3.4vw, 48px);
	opacity: .92;
}

/* --------------------------------------------------------------------------
   02 · LOS TRES MECANISMOS

   En tres columnas y no en lista: son tres explicaciones del MISMO hecho, no
   tres pasos de un proceso. Puestas una debajo de otra se leerían como una
   secuencia —primero esto, luego lo otro— y no lo son.
   -------------------------------------------------------------------------- */
.cm-mec__lista {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 258px), 1fr));
	gap: clamp(20px, 2.4vw, 34px);
}

.cm-mec__item {
	display: grid;
	grid-template-columns: clamp(34px, 3.4vw, 52px) 1fr;
	column-gap: clamp(14px, 1.6vw, 26px);
	align-items: start;
	padding-top: clamp(20px, 2.4vw, 34px);
	border-top: 1px solid rgba(181, 165, 142, .24);
}

.cm-mec__n {
	font-family: var(--font-display, Butler, serif);
	font-size: clamp(1.1rem, 1.4vw, 1.5rem);
	line-height: 1.1;
	color: var(--gold, #F5DE8A);
	/* Alineado con la primera línea del título, no con la caja: sin esto el
	   número flota por encima del texto que numera. */
	padding-top: .12em;
}

.cm-mec__t {
	grid-column: 2;
	margin: 0 0 clamp(10px, 1.2vw, 16px);
	font-family: var(--font-display, Butler, serif);
	font-weight: 400;
	font-size: clamp(1.34rem, 2vw, 1.94rem);
	line-height: 1.14;
	letter-spacing: -.01em;
	color: var(--ink);
}

.cm-mec__d {
	grid-column: 2;
	margin: 0;
	max-width: 54ch;
	font-family: var(--font-sans, system-ui, sans-serif);
	font-size: clamp(.96rem, 1.05vw, 1.05rem);
	line-height: 1.7;
	opacity: .8;
	color: var(--ink);
	text-wrap: pretty;
}

/* --------------------------------------------------------------------------
   04 · EL MARCO REGULATORIO

   Lista de definición y no tarjetas: cada bloque es «un sitio → lo que rige
   allí», que es literalmente la estructura de un <dl>. El filete a la
   izquierda los ata como tres entradas de la misma tabla.
   -------------------------------------------------------------------------- */
/* ==========================================================================
   TARJETAS CON FOCO — 03, 04 y 05

   EL PROBLEMA QUE RESUELVEN. Estas tres secciones eran texto en la columna
   izquierda con la derecha vacía: a 1440 px quedaba media pantalla en blanco
   debajo de cada titular. No era aire, era hueco — el ojo no tenía dónde ir.
   Al convertirlas en rejilla, el mismo contenido ocupa el ancho y el ritmo lo
   marcan las tarjetas, no un margen inventado.

   EL FOCO. El JS publica la posición del cursor dentro de cada tarjeta en
   --mx/--my y aquí se pinta un resplandor centrado en ese punto. Es lo que el
   efecto anterior debía hacer y no hacía: aquel subía a 1 una opacidad que ya
   estaba en 1, así que sólo cambiaba un filete de un píxel — invisible.

   El resplandor va en un ::before con `opacity` a cero en reposo: animar la
   opacidad de una capa ya pintada no recalcula nada, mientras que crear el
   degradado en cada entrada obligaría a repintar la tarjeta entera.
   ========================================================================== */
.cm-duelo,
.cm-marco,
.cm-preg__lista {
	--mx: 50%;
	--my: 50%;
}

.cm-preg__lista {
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: cmq;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
	gap: clamp(16px, 2vw, 28px);
}

.cm-preg__lista li {
	counter-increment: cmq;
	display: grid;
	grid-template-columns: auto 1fr;
	gap: clamp(12px, 1.4vw, 18px);
	align-items: start;
	padding: clamp(20px, 2.2vw, 30px);
	font-family: var(--font-sans, system-ui, sans-serif);
	font-size: clamp(.98rem, 1.06vw, 1.08rem);
	line-height: 1.55;
	color: var(--ink);
	text-wrap: pretty;
}

/* El número. En ::after porque el ::before de estas tarjetas lo ocupa el
   resplandor del cursor. */
.cm-preg__lista li::after {
	content: counter(cmq, decimal-leading-zero);
	grid-column: 1;
	grid-row: 1;
	font-family: var(--font-display, Butler, serif);
	font-size: clamp(1rem, 1.2vw, 1.16rem);
	line-height: 1.35;
	color: var(--gold, #F5DE8A);
	opacity: .8;
}

.cm-preg__lista li > span {
	grid-column: 2;
	grid-row: 1;
	opacity: .86;
}

.cm-ficha,
.cm-duelo__lado,
.cm-marco__ficha,
.cm-preg__lista li {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	border: 1px solid rgba(181, 165, 142, .2);
	border-radius: 2px;
	transition: border-color .35s ease, transform .35s cubic-bezier(.22, 1, .36, 1);
}

/* El resplandor. Radial y no un color plano: un plano marca un rectángulo y
   delata el borde de la tarjeta; el radial se apaga solo antes de llegar. */
.cm-duelo__lado::before,
.cm-marco__ficha::before,
.cm-preg__lista li::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: -1;
	background: radial-gradient(340px circle at var(--mx) var(--my), rgba(245, 222, 138, .11), transparent 62%);
	opacity: 0;
	transition: opacity .32s ease;
	pointer-events: none;
}

.cm-duelo__lado.es-mirada::before,
.cm-marco__ficha.es-mirada::before,
.cm-preg__lista li.es-mirada::before {
	opacity: 1;
}

.cm-duelo__lado.es-mirada,
.cm-marco__ficha.es-mirada,
.cm-preg__lista li.es-mirada {
	border-color: rgba(245, 222, 138, .42);
	/* Dos píxeles, no ocho: el sitio no tiene tarjetas que salten. Es
	   suficiente para que el ojo sepa cuál está señalando. */
	transform: translateY(-2px);
}

/* ── 03 · Las dos preguntas enfrentadas ─────────────────────────────────── */
.cm-duelo {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
	gap: clamp(16px, 2vw, 28px);
}

.cm-duelo__lado {
	padding: clamp(26px, 3vw, 44px);
	display: flex;
	flex-direction: column;
	gap: clamp(12px, 1.4vw, 18px);
}

.cm-duelo__rot {
	margin: 0;
	font-family: var(--font-sans, system-ui, sans-serif);
	font-size: clamp(.7rem, .9vw, .8rem);
	letter-spacing: .28em;
	text-transform: uppercase;
	color: var(--ink);
	opacity: .5;
}

.cm-duelo__q {
	margin: 0;
	font-family: var(--font-display, Butler, serif);
	font-size: clamp(1.5rem, 2.6vw, 2.4rem);
	line-height: 1.12;
	letter-spacing: -.01em;
	color: var(--ink);
	text-wrap: balance;
}

/* La pregunta que no decide se enseña tachada. No es un chiste tipográfico:
   es el argumento de la sección, y verlo tachado ahorra el párrafo que haría
   falta para decir lo mismo. */
.cm-duelo__lado--no .cm-duelo__q {
	text-decoration: line-through;
	text-decoration-thickness: 1px;
	text-decoration-color: rgba(181, 165, 142, .5);
	opacity: .62;
}

.cm-duelo__lado--si .cm-duelo__q {
	color: var(--gold, #F5DE8A);
}

.cm-duelo__d {
	margin: 0;
	font-family: var(--font-sans, system-ui, sans-serif);
	font-size: clamp(.95rem, 1.02vw, 1.04rem);
	line-height: 1.7;
	opacity: .8;
	color: var(--ink);
	text-wrap: pretty;
}

/* ── 04 · El marco regulatorio ──────────────────────────────────────────── */
.cm-marco {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
	gap: clamp(16px, 2vw, 28px);
}

.cm-marco__ficha {
	padding: clamp(26px, 3vw, 42px);
	display: flex;
	flex-direction: column;
	gap: clamp(10px, 1.2vw, 16px);
}

/* EL DATO, delante y grande. «Una» y «Cero» son lo que hay que retener de esta
   sección y estaban enterrados en mitad de un párrafo. Van en la display, que
   es la voz con la que este sitio dice lo que importa. */
.cm-marco__dato {
	font-family: var(--font-display, Butler, serif);
	font-weight: 400;
	font-size: clamp(2.6rem, 4.6vw, 4.4rem);
	line-height: .92;
	letter-spacing: -.02em;
	color: var(--gold, #F5DE8A);
}

.cm-marco__t {
	margin: 0;
	font-family: var(--font-sans, system-ui, sans-serif);
	font-size: clamp(.7rem, .9vw, .8rem);
	font-weight: 400;
	letter-spacing: .28em;
	text-transform: uppercase;
	color: var(--ink);
	opacity: .58;
}

.cm-marco__d {
	margin: 0;
	font-family: var(--font-sans, system-ui, sans-serif);
	font-size: clamp(.93rem, 1vw, 1.02rem);
	line-height: 1.7;
	opacity: .8;
	color: var(--ink);
	text-wrap: pretty;
}
/* --------------------------------------------------------------------------
   BOTONES
   -------------------------------------------------------------------------- */
.cm-cta {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin-top: clamp(24px, 3vw, 38px);
	padding: clamp(13px, 1.4vw, 17px) clamp(24px, 2.6vw, 34px);
	border: 1px solid var(--gold, #F5DE8A);
	border-radius: 2px;
	background: transparent;
	font-family: var(--font-sans, system-ui, sans-serif);
	font-size: clamp(11px, .78vw, 12.5px);
	letter-spacing: .16em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--gold, #F5DE8A);
	transition: background-color .35s ease, color .35s ease;
}

.cm-cta:hover,
.cm-cta:focus-visible {
	background: var(--gold, #F5DE8A);
	/* Sobre el oro se lee el obsidiana, no --ink: --ink voltea con el scroll y
	   en el tramo claro sería oro sobre oro. */
	color: #0E0E10;
}

.cm-cta--ghost {
	border-color: rgba(181, 165, 142, .5);
	color: var(--ink);
	opacity: .9;
}

.cm-aqui__enlaces {
	display: flex;
	flex-wrap: wrap;
	gap: clamp(12px, 1.4vw, 18px);
}

/* --------------------------------------------------------------------------
   CIERRE
   -------------------------------------------------------------------------- */
.cm-cierre {
	padding-bottom: clamp(80px, 11vh, 140px);
}

.cm-cierre__nota {
	margin: clamp(14px, 1.6vw, 20px) 0 0;
	font-family: var(--font-sans, system-ui, sans-serif);
	font-size: clamp(.86rem, .92vw, .94rem);
	opacity: .68;
	color: var(--ink);
}

/* --------------------------------------------------------------------------
   MÓVIL
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
	/* La tabla del marco se apila. A 375 px las dos columnas dejaban el lugar
	   en 80 px y el texto en 192: medido, y a ese ancho no se lee ninguno de
	   los dos. Apilados, el lugar hace de titulillo de su propio párrafo. */
	.cm-marco__item {
		grid-template-columns: 1fr;
		gap: clamp(10px, 2vw, 16px);
	}
}

@media (max-width: 640px) {
	.cm__titulo { max-width: 100%; }
	.cm__lead,
	.cm__lead--ancho,
	.cm-marco__item dd { max-width: 100%; }
	.cm-hero__sub { max-width: 100%; }
	.cm-hero__intro { max-width: 100%; }
	/* Un botón por línea: dos botones fantasma uno al lado del otro salen a
	   menos de la mitad de ancho cada uno y no se aciertan con el pulgar. */
	.cm-aqui__enlaces { flex-direction: column; align-items: flex-start; }
	.cm-cta { width: 100%; justify-content: center; }
}

/* ==========================================================================
   EL HERO — LA MEMBRANA, A SANGRE COMPLETA

   Las dos imágenes son la misma escena de células: una apagada y otra viva. El
   propietario las quiere ocupando TODO el hero, así que la membrana no es una
   columna al lado del texto — es el fondo entero, y el texto va encima.

   EL SANGRADO. `margin-inline: calc(50% - 50vw)` saca la sección del ancho de
   la columna y la lleva a los bordes de la ventana. Se usa esto y no `width:
   100vw` a secas porque 100vw incluye el ancho de la barra de scroll y aparece
   un desplazamiento horizontal de unos quince píxeles en Windows, que es
   justo el que nadie encuentra luego.

   El lienzo va ENCIMA de las dos imágenes del marcado, que quedan invisibles
   pero presentes: el JS las necesita como fuente. Ocultarlas con display:none
   las dejaría sin decodificar y el lienzo pintaría en negro.
   ========================================================================== */
.cm-hero {
	position: relative;
	isolation: isolate;
	margin-inline: calc(50% - 50vw);
	width: auto;
	min-height: clamp(560px, 92vh, 980px);
	display: flex;
	align-items: center;
	overflow: hidden;
	padding-block: clamp(120px, 16vh, 190px) clamp(60px, 9vh, 110px);
	/* El obsidiana de debajo: mientras las imágenes cargan, el hero es negro y
	   no un rectángulo blanco contra el resto de la página. */
	background: #08080A;
}

.cm-hero__reja {
	position: relative;
	z-index: 2;
	width: min(100%, 1180px);
	margin-inline: auto;
}

.cm-hero__texto {
	min-width: 0;
	/* El texto no cruza el hero entero: parado a 46rem deja las células de la
	   derecha despejadas, que es donde el efecto se ve mejor. */
	max-width: min(100%, 46rem);
}

.cm-membrana {
	position: absolute;
	inset: 0;
	z-index: 0;
	/* El cursor no se esconde: se cambia. Un cursor oculto sobre un área tan
	   grande hace perder el puntero al salir de ella. */
	cursor: crosshair;
	touch-action: pan-y;
}

/* El velo. La imagen viva tiene zonas casi blancas y el texto no se leería
   encima; bajarle el brillo a la imagen entera apagaría justo lo que hay que
   enseñar. El degradado pesa a la izquierda —donde va el texto— y se disuelve
   sobre las células de la derecha. El segundo, vertical, sostiene el rótulo de
   arriba y despega el hero de la sección siguiente. */
.cm-hero__velo {
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background: radial-gradient(120% 95% at 8% 82%, rgba(6,6,8,.9) 0%, rgba(6,6,8,.72) 26%, rgba(6,6,8,.34) 52%, rgba(6,6,8,0) 78%);
}

.cm-membrana__lienzo {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	display: block;
	z-index: 2;
}

/* Las fuentes del lienzo. Invisibles pero decodificadas: opacity:0 y no
   display:none, por lo que dice la nota de arriba. */
.cm-membrana__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0;
	pointer-events: none;
}

/* SIN JAVASCRIPT. Si el script no corre, .cm-membrana nunca recibe el lienzo
   pintado y esta regla deja ver la célula a color como imagen normal. Se
   escribe en negativo —sobre el estado por omisión— para que el fallo sea
   enseñar el contenido, nunca esconderlo. */
.no-js .cm-membrana__img--color,
.cm-membrana:not(:has(canvas)) .cm-membrana__img--color {
	opacity: 1;
}

.cm-hero__pista {
	display: block;
	margin-top: clamp(26px, 3.4vw, 44px);
	font-family: var(--font-sans, system-ui, sans-serif);
	font-size: clamp(9.5px, .68vw, 11px);
	letter-spacing: .18em;
	text-transform: uppercase;
	color: #F4F0E5;
	opacity: .42;
	pointer-events: none;
}

/* En pantalla táctil la pista miente: ahí no hay cursor y la membrana se mueve
   sola. Se retira en vez de reescribirla, porque el efecto ya se ve solo y una
   leyenda que explique lo evidente sobra. */
@media (hover: none) {
	.cm-hero__pista { display: none; }
	.cm-membrana { cursor: default; }
}

/* ==========================================================================
   02 · EL VISOR DE LOS MECANISMOS — componente 05

   La columna de la izquierda se queda pegada mientras la de la derecha pasa.
   `position:sticky` y no un `position:fixed` con cálculo de posición: sticky
   se detiene solo al llegar al final de la sección y no hay que devolverlo a
   su sitio a mano, que es donde ese patrón siempre se rompe.
   ========================================================================== */
.cm-visor {
	display: grid;
	grid-template-columns: minmax(0, .86fr) minmax(0, 1fr);
	gap: clamp(28px, 4vw, 68px);
	align-items: start;
}

.cm-visor__fijo {
	position: sticky;
	/* Deja sitio a la cabecera fija, que si no tapa el borde de arriba. */
	top: clamp(88px, 14vh, 132px);
}

/* SIN FONDO DE COLOR. Llevaba un beige al 4 % para «dar cuerpo» al marco y el
   propietario lo retiró: en esta casa el fondo de una superficie es negro o
   blanco, y el beige y el oro son tinta, filete y acento — nunca relleno. Lo
   que separa este marco del resto es el filete de un píxel y el aire, que es
   como se separan las cosas en el resto del sitio. */
.cm-visor__marco {
	position: relative;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	border-radius: 2px;
	border: 1px solid rgba(181, 165, 142, .22);
}

.cm-visor__capa {
	position: absolute;
	inset: 0;
	opacity: 0;
	/* La transición de opacidad va más rápida que la de escala a propósito: la
	   imagen nueva termina de aparecer mientras todavía se está acercando, y el
	   cambio se lee como un solo movimiento y no como un corte. */
	transition: opacity .6s ease, transform 1.1s cubic-bezier(.22, 1, .36, 1);
}

.cm-visor__capa img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
}

/* Los tres encuadres sobre la MISMA imagen: el conjunto, el interior y el
   detalle de las mitocondrias — que son los puntos naranjas de la célula, y
   por eso el tercero se va arriba a la derecha, donde están. */
.cm-visor__capa--1 { transform: scale(1); }
.cm-visor__capa--2 { transform: scale(1.55) translate(2%, 1%); }
.cm-visor__capa--3 { transform: scale(2.3) translate(-7%, 6%); }

.cm-visor.es-vivo .cm-visor__capa { opacity: 0; }
.cm-visor.es-vivo .cm-visor__capa.es-activa { opacity: 1; }

/* El aro: un filete circular fijo sobre el marco. Da la lectura de «esto es
   una observación», no una foto suelta, y ata el visor con el hero. */
.cm-visor__aro {
	position: absolute;
	inset: 12%;
	border: 1px solid rgba(245, 222, 138, .2);
	border-radius: 50%;
	pointer-events: none;
}

.cm-visor__cuenta {
	margin: clamp(12px, 1.4vw, 18px) 0 0;
	font-family: var(--font-display, Butler, serif);
	font-size: clamp(1.1rem, 1.4vw, 1.4rem);
	color: var(--gold, #F5DE8A);
}

.cm-visor__total {
	font-family: var(--font-sans, system-ui, sans-serif);
	font-size: .68em;
	opacity: .6;
	color: var(--ink);
}

.cm-visor__pasos {
	display: grid;
	gap: clamp(30px, 6vh, 78px);
}

/* Los bloques bajan de intensidad cuando no son el que se lee. NO se ocultan:
   quien llega con el scroll a medias tiene que poder leer el de al lado. */
.cm-visor.es-vivo .cm-mec__item {
	opacity: .34;
	transition: opacity .5s ease, border-color .5s ease;
}

.cm-visor.es-vivo .cm-mec__item.es-activo {
	opacity: 1;
	border-top-color: rgba(245, 222, 138, .5);
}

/* --------------------------------------------------------------------------
   EL VISOR Y EL HERO EN PANTALLA ESTRECHA
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
	.cm-hero { min-height: clamp(520px, 86vh, 760px); }

	/* El velo de esquina no sirve en vertical: ahí el texto ocupa el ancho
	   entero y cae sobre las células claras. Medido a 375 px — el bloque se
	   leía sobre la célula naranja y el contraste no llegaba. En estrecho pasa
	   a un degradado vertical que pesa abajo, que es donde está el texto, y
	   deja despejada la mitad de arriba, que es donde se ve el efecto. */
	.cm-hero__velo {
		background: linear-gradient(to bottom, rgba(6,6,8,.28) 0%, rgba(6,6,8,.2) 26%, rgba(6,6,8,.74) 58%, rgba(6,6,8,.94) 100%);
	}

	/* Y el texto baja al pie, para no competir con las células de arriba. */
	.cm-hero { align-items: flex-end; }

	/* Sticky en una columna dejaría la célula pegada tapando el texto que
	   viene debajo: en vertical el visor pasa a ser imagen y texto seguidos. */
	.cm-visor { grid-template-columns: 1fr; }
	.cm-visor__fijo { position: static; }
	.cm-visor__cuenta { display: none; }
}

@media (prefers-reduced-motion: reduce) {
	.cm-visor__capa { transition: none; }
	/* Con el movimiento desactivado los tres bloques se leen a plena
	   intensidad: el atenuado sólo tiene sentido si algo lo va cambiando. */
	.cm-visor.es-vivo .cm-mec__item { opacity: 1; }
}

/* ==========================================================================
   LAS CÉLULAS DE FONDO

   Las dibuja el JS en un lienzo por sección (celulasFondo). Aquí sólo se le da
   sitio: detrás del contenido, sin recibir eventos y sin fondo propio.

   `isolation: isolate` en la sección crea el contexto de apilamiento, así que
   el lienzo en z-index 0 queda por detrás del inner en z-index 1 sin que haya
   que subir el z-index de media página.
   ========================================================================== */
.cm__seccion--celulas {
	isolation: isolate;
	overflow: hidden;
}

.cm-fondo {
	position: absolute;
	inset: 0;
	z-index: 0;
	width: 100%;
	height: 100%;
	display: block;
	pointer-events: none;
}

.cm__seccion--celulas > .cm__inner {
	position: relative;
	z-index: 1;
}

/* ==========================================================================
   01 · EL DÍPTICO

   Texto y lámina, no texto solo. La lámina es la misma imagen del hero
   encuadrada de cerca: la página habla de lo que hay dentro de la célula, y
   verlo de cerca aquí es continuidad, no repetición.
   ========================================================================== */
.cm-que {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, .8fr);
	gap: clamp(28px, 4vw, 64px);
	/* Centrado y no `start`: con el texto más corto que la imagen, alinearlos
	   por arriba dejaba todo el hueco debajo del párrafo. */
	align-items: center;
}

.cm-lamina {
	margin: 0;
	position: relative;
}

.cm-lamina img {
	width: 100%;
	height: auto;
	/* Cuadrada, no 4/5. Con el vertical caía muy por debajo del final del
	   texto y dejaba a su izquierda un vacío tan alto como ella. */
	aspect-ratio: 1 / 1;
	object-fit: cover;
	/* El encuadre se lleva a la derecha, donde la imagen tiene la célula
	   grande: centrado cae en el hueco entre dos. */
	object-position: 72% 50%;
	display: block;
	border-radius: 2px;
}

.cm-lamina figcaption {
	margin-top: clamp(10px, 1.2vw, 15px);
	font-family: var(--font-sans, system-ui, sans-serif);
	font-size: clamp(.7rem, .9vw, .8rem);
	letter-spacing: .28em;
	text-transform: uppercase;
	color: var(--ink);
	opacity: .5;
}

@media (max-width: 900px) {
	.cm-que { grid-template-columns: 1fr; }
	.cm-lamina img { aspect-ratio: 3 / 2; }
}

/* ==========================================================================
   EL ISOTIPO EN EL HERO

   El archivo oficial, sin recolorear ni redibujar. Va al lado despejado —el
   texto ocupa la izquierda— y por encima del velo pero por debajo del texto,
   así que la imagen pasa por detrás de él sin taparlo nunca.

   Se le baja la opacidad y nada más: ni filtro de color, ni mezcla, ni sombra.
   Un activo de marca se coloca, no se interpreta.
   ========================================================================== */
/* El isotipo lo coloca la regla común .p7-iso (main.css), igual que en los
   otros nueve heros del sitio. Aquí no se repite ni se ajusta: una marca que
   aparece en un sitio distinto en cada página deja de leerse como firma. */

/* ==========================================================================
   EL TRAMO DE COLOR: NEGRO Y BLANCO, NADA MÁS

   El fondo de la página lo interpola main.js con el scroll y la tinta voltea
   por luminancia. Aquí sólo se declara con qué tinta se dibujan las células de
   fondo en cada tramo, que es lo que el JS lee de --cm-fondo-tinta.

   Se resuelve con `color-scheme` y no con una clase que ponga el JS porque el
   valor tiene que estar disponible en el primer fotograma, antes de que
   ningún script haya decidido nada.
   ========================================================================== */
.cm {
	/* --ink-rgb la publica main.js en cada fotograma del scroll, con el mismo
	   valor que usa para voltear el texto. Las células de fondo se dibujan con
	   ella, así que pasan de blancas sobre obsidiana a negras sobre blanco a la
	   vez que la tipografía y sin una sola regla más.

	   El respaldo es blanco: si el motor de color no llegara a correr, el fondo
	   se queda en obsidiana y la tinta clara es la correcta. */
	--cm-fondo-tinta: var(--ink-rgb, 255, 255, 255);
}

/* ==========================================================================
   EL RASTRO DEL CURSOR

   Dos gestos en toda la página, no uno por elemento. El JS sólo publica la
   posición en --lx/--ly y pone una clase; cuánto se mueve cada cosa se decide
   aquí.
   ========================================================================== */

/* La lámina se acerca hacia donde apunta el cursor. El desplazamiento va al
   lado CONTRARIO —el JS ya invierte el signo— porque es así como se mira algo
   de cerca: se mueve la cabeza, no el objeto. */
.cm-lamina {
	--lx: 0%;
	--ly: 0%;
	overflow: hidden;
	border-radius: 2px;
}

.cm-lamina img {
	/* La escala en reposo es 1: el acercamiento sólo existe mientras el cursor
	   está encima, y sin él la imagen se ve entera y sin recortar. */
	transform: scale(1) translate(0, 0);
	transition: transform .5s cubic-bezier(.22, 1, .36, 1);
	will-change: transform;
}

.cm-lamina.es-cerca img {
	/* 1,14 es lo justo para que el movimiento tenga recorrido sin que se note
	   la pérdida de definición: la imagen entra a 1536 px y el hueco ronda los
	   500, así que hay margen de sobra. */
	transform: scale(1.14) translate(calc(var(--lx) * .09), calc(var(--ly) * .09));
	transition-duration: .18s;
}

@media (hover: none) {
	/* Sin cursor no hay foco que seguir. Se apaga el acercamiento de la lámina;
	   el resplandor de las tarjetas no hace falta apagarlo porque su clase sólo
	   la pone un pointermove, que en una pantalla táctil no ocurre al pasar. */
	.cm-lamina.es-cerca img { transform: none; }
}