/* ============================================================================
   CANAL MISTERIO · Portada
   Hero cinematográfico (dentro del cielo que abre header.php), tira de
   destacadas, bandas por sección con revelado escalonado, HORÓSCOPO con la
   identidad del plugin Dunes AI, reportaje y lo más leído.
   Solo se carga en la portada. Toda pieza: imagen + categoría + autor.
   ============================================================================ */

/* .cm-home comparte elemento con .cm-wrap: NUNCA el atajo `padding` aquí
   o se carga los laterales del móvil. Solo ritmo vertical. */
.cm-home{padding-bottom:8px}

/* ══════════ HERO · LA PRIMERA SEÑAL (vive dentro de .cm-skyhead) ══════════
   Texto a la izquierda con la cabecera de sección de la casa; a la derecha
   LA LENTE: la foto en frío (duotono azulado) con un CÍRCULO DE ENFOQUE que
   revela el color real y sigue al ratón. En reposo el enfoque deriva solo
   (keyframes sobre --hx/--hy registradas con inherits:true — el círculo lo
   leen dos hijos). El cielo de estrellas queda a la vista detrás. */
@property --hx{syntax:'<percentage>';inherits:true;initial-value:68%}
@property --hy{syntax:'<percentage>';inherits:true;initial-value:38%}
.cm-chero{position:relative;z-index:1;display:flex;align-items:center;
	min-height:clamp(430px,54vh,600px);overflow:hidden;
	padding-top:56px;padding-bottom:56px}
.cm-chero__grid{display:grid;grid-template-columns:1.04fr .96fr;
	gap:clamp(28px,4vw,64px);align-items:center;width:100%}
.cm-chero__txt{min-width:0}
.cm-chero__hd{margin-bottom:18px;padding-bottom:10px}
.cm-chero__hd .cm-sec__mono{color:rgba(255,255,255,.55)}
.cm-chero__hd .cm-sec__t{color:#F2F5FA}
.cm-chero__hd .cm-sec__t a:hover{color:#fff}
/* El hero abre la página: su meridiano nace ya dibujado. */
.cm-chero__hd .cm-sec__ln{transform:scaleX(1)}
.cm-chero__h{font-size:clamp(30px,3.9vw,52px);font-weight:800;
	letter-spacing:-.036em;line-height:1.04;color:#fff;max-width:20ch;text-wrap:balance;
	text-shadow:0 2px 34px rgba(0,0,0,.45);
	opacity:0;transform:translateY(22px);animation:cm-rise .8s .2s cubic-bezier(.2,.7,.2,1) forwards}
.cm-chero__h a{color:inherit}
.cm-chero__dek{margin-top:18px;font-size:clamp(15.5px,1.5vw,19px);line-height:1.5;
	color:rgba(255,255,255,.86);max-width:52ch;
	opacity:0;transform:translateY(20px);animation:cm-rise .8s .36s cubic-bezier(.2,.7,.2,1) forwards}
.cm-chero__m{margin-top:18px;font-size:12px;font-weight:600;letter-spacing:.1em;
	text-transform:uppercase;color:rgba(255,255,255,.68);
	opacity:0;transform:translateY(16px);animation:cm-rise .7s .5s cubic-bezier(.2,.7,.2,1) forwards}
.cm-chero__m b{color:#fff;font-weight:700}
@keyframes cm-rise{to{opacity:1;transform:none}}
.cm-chero__lens{position:relative;display:block;aspect-ratio:16/10;border-radius:10px;
	overflow:hidden;cursor:crosshair;
	box-shadow:0 30px 80px rgba(0,0,0,.5),0 0 0 1px rgba(255,255,255,.1);
	opacity:0;transform:translateY(26px);
	animation:cm-rise .9s .3s cubic-bezier(.2,.7,.2,1) forwards,
		cm-lens-drift 18s 1.6s ease-in-out infinite}
/* El puntero manda: la deriva se apaga mientras enfoca el usuario. */
.cm-chero__lens.is-focus{animation:cm-rise .9s .3s cubic-bezier(.2,.7,.2,1) forwards}
@keyframes cm-lens-drift{
	0%{--hx:68%;--hy:38%}
	25%{--hx:42%;--hy:30%}
	50%{--hx:30%;--hy:58%}
	75%{--hx:60%;--hy:64%}
	100%{--hx:68%;--hy:38%}
}
.cm-chero__ph{position:absolute;inset:0}
.cm-chero__ph img,.cm-chero__ph .cm-skyimg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cm-chero__ph--dim img{filter:grayscale(.85) brightness(.5) contrast(1.05)}
.cm-chero__ph--dim::after{content:"";position:absolute;inset:0;background:rgba(9,20,40,.4)}
.cm-chero__ph--live{clip-path:circle(150px at var(--hx,68%) var(--hy,38%))}
.cm-chero__ring{position:absolute;left:var(--hx,68%);top:var(--hy,38%);width:302px;height:302px;
	transform:translate(-50%,-50%);border-radius:50%;pointer-events:none;
	box-shadow:0 0 0 1.5px rgba(255,255,255,.75),0 0 34px rgba(76,160,230,.45),
		inset 0 0 26px rgba(76,160,230,.2)}
.cm-chero__ring::before,.cm-chero__ring::after{content:"";position:absolute;left:50%;
	width:1.5px;height:15px;transform:translateX(-50%);background:rgba(255,255,255,.55)}
.cm-chero__ring::before{top:6px}
.cm-chero__ring::after{bottom:6px}
.cm-chero__cap{position:absolute;left:14px;bottom:12px;z-index:2;
	font-family:'JetBrains Mono',monospace;font-size:9.5px;letter-spacing:.16em;
	text-transform:uppercase;color:rgba(255,255,255,.66)}
@media(max-width:940px){
	.cm-chero{min-height:auto;padding-top:36px;padding-bottom:40px}
	.cm-chero__grid{grid-template-columns:1fr;gap:26px}
	.cm-chero__ph--live{clip-path:circle(110px at var(--hx,68%) var(--hy,38%))}
	.cm-chero__ring{width:222px;height:222px}
}

/* La tarjeta (.cm-card), la fila (.cm-row) y los cielos de reserva (.cm-sky)
   viven en site.css desde F2: los comparten portada y listados. Las bandas
   antiguas (band/histrip/g4/g3/ll) se retiraron en v0.19.0: el home nuevo
   es la EDICIÓN OBSERVATORIO, al final de este fichero. */

/* El HORÓSCOPO (.cm-dh) ya no vive aquí: se movió a site.css porque también
   cierra el artículo (single.php). Aquí solo quedaría duplicado. */

/* ══════════ EL REPORTAJE · la sala de proyección ══════════
   Cine que responde: la foto hace un Ken Burns lentísimo y toda la pantalla
   se INCLINA en 3D siguiendo al ratón (site.js pone --fx/--fy/--fpx/--fpy;
   el contenido contra-flota para dar profundidad). Detrás, la palabra
   REPORTAJE en trazo hueco; en las esquinas, los rótulos de proyección y el
   tiempo de lectura real. */
.cm-feat{position:relative;margin-top:72px;min-height:clamp(420px,52vh,560px);
	display:flex;align-items:center;justify-content:center;overflow:hidden}
.cm-feat__bg{position:absolute;inset:0;display:block;will-change:transform;
	transform:perspective(1200px) rotateX(var(--fy,0deg)) rotateY(var(--fx,0deg))
		translate3d(var(--fpx,0px),var(--fpy,0px),0) scale(1.08);
	transition:transform .25s ease-out}
.cm-feat__bg img,.cm-feat__bg .cm-sky{position:absolute;inset:-4% 0;width:100%;height:108%;
	object-fit:cover;animation:cm-kenburns 26s ease-in-out infinite alternate}
@keyframes cm-kenburns{from{transform:scale(1) translateX(0)}to{transform:scale(1.1) translateX(-2.5%)}}
.cm-feat__scrim{position:absolute;inset:0;pointer-events:none;background:
	radial-gradient(90% 120% at 50% 50%,rgba(4,8,15,.55) 0%,rgba(4,8,15,.82) 100%),
	linear-gradient(to top,rgba(4,8,15,.9),transparent 30%),
	linear-gradient(to bottom,rgba(4,8,15,.9),transparent 30%)}
.cm-feat__word{position:absolute;left:50%;top:50%;z-index:1;pointer-events:none;
	transform:translate(-50%,-50%);white-space:nowrap;
	font-size:clamp(80px,13vw,180px);font-weight:800;letter-spacing:.08em;line-height:1;
	color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.13)}
.cm-feat__mono,.cm-feat__time{position:absolute;top:22px;z-index:2;pointer-events:none;
	font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.16em;
	text-transform:uppercase;color:rgba(255,255,255,.55)}
.cm-feat__mono{left:26px}
.cm-feat__time{right:26px}
.cm-feat__in{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;
	text-align:center;padding-top:64px;padding-bottom:64px;
	transform:translate3d(calc(var(--fpx,0px) * -.55),calc(var(--fpy,0px) * -.55),0);
	transition:transform .25s ease-out}
.cm-feat__h{margin-top:22px;font-size:clamp(28px,3.6vw,48px);font-weight:800;
	letter-spacing:-.032em;line-height:1.05;color:#fff;text-wrap:balance;max-width:22ch;
	text-shadow:0 2px 30px rgba(0,0,0,.5)}
.cm-feat__h a{color:inherit;transition:opacity .2s}
.cm-feat__h a:hover{opacity:.85}
.cm-feat__dek{margin-top:18px;font-size:clamp(15px,1.4vw,17.5px);line-height:1.55;
	color:rgba(255,255,255,.82);max-width:58ch}
.cm-feat__m{margin-top:18px;font-size:12px;font-weight:600;letter-spacing:.1em;
	text-transform:uppercase;color:rgba(255,255,255,.62)}
.cm-feat__m b{color:#fff;font-weight:700}
.cm-feat__cta{margin-top:26px;display:inline-flex;align-items:center;gap:10px;
	font-size:12.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#fff;
	border:1px solid rgba(255,255,255,.35);padding:14px 26px;
	backdrop-filter:blur(6px);background:rgba(255,255,255,.04);
	transition:border-color .2s,gap .2s,background .2s,box-shadow .2s}
.cm-feat__cta:hover{border-color:#5FA3D9;gap:16px;background:rgba(95,163,217,.12);
	box-shadow:0 8px 30px rgba(0,90,159,.25)}
@media(max-width:640px){
	.cm-feat{min-height:auto}
	.cm-feat__in{padding-top:56px;padding-bottom:48px}
	.cm-feat__word{font-size:64px}
	.cm-feat__mono{left:16px;font-size:9px}
	.cm-feat__time{display:none}
}

/* ══════════ LO MÁS LEÍDO · banda oscura a sangre ══════════
   Una de las TRES piezas en negro del home (con el Reportaje y el pie).
   Mismo idioma nocturno: números huecos de luz azul sobre la sombra. */
.cm-most{margin-top:64px;background:var(--cm-shell);
	padding-top:56px;padding-bottom:60px}
/* Si el Reportaje queda pegado a Lo más leído (secciones intermedias sin
   piezas), nada de franja blanca entre bandas oscuras: negro seguido. */
.cm-feat + .cm-most{margin-top:0}
.cm-most__head{display:flex;align-items:center;gap:14px;margin-bottom:24px}
.cm-most__title{font-size:15px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#F2F5FA}
.cm-most__rule{flex:1;height:1px;background:rgba(255,255,255,.14)}
.cm-most__list{display:grid;grid-template-columns:repeat(2,1fr);gap:0 52px}
.cm-most__it{display:grid;grid-template-columns:auto 1fr;gap:20px;padding:17px 0;
	border-bottom:1px solid rgba(255,255,255,.08);align-items:start}
/* Números huecos que se rellenan de azul al pasar por encima. */
.cm-most__n{font-size:30px;font-weight:800;line-height:1;font-variant-numeric:tabular-nums;
	padding-top:1px;color:transparent;-webkit-text-stroke:1.3px #4CA0E6;transition:color .25s}
.cm-most__it:hover .cm-most__n{color:#4CA0E6}
.cm-most__t{display:block;font-size:20px;font-weight:700;line-height:1.3;
	letter-spacing:-.015em;color:#F2F5FA;transition:color .15s}
.cm-most__it:hover .cm-most__t{color:#4CA0E6}
.cm-most__m{display:block;margin-top:6px;font-size:11px;font-weight:600;
	letter-spacing:.02em;color:#8793A3}
@media(max-width:720px){.cm-most__list{grid-template-columns:1fr}}

/* ══════════ Portada vacía ══════════ */
.cm-empty{text-align:center;padding-top:80px;padding-bottom:80px}
.cm-empty__t{font-size:22px;font-weight:700;color:var(--cm-ink)}
.cm-empty__d{margin-top:8px;color:var(--cm-muted)}

/* ══════════ Cielos de reserva (posts sin imagen destacada) ══════════ */
.cm-sky{display:block}
.cm-sky::after{content:"";position:absolute;inset:0;box-shadow:inset 0 0 80px rgba(3,6,12,.55)}
.cm-sky{background:
	radial-gradient(1.5px 1.5px at 12% 22%,#fff,transparent),radial-gradient(1px 1px at 28% 66%,#fff,transparent),
	radial-gradient(1.5px 1.5px at 47% 34%,rgba(255,255,255,.9),transparent),radial-gradient(1px 1px at 62% 74%,#fff,transparent),
	radial-gradient(2px 2px at 78% 26%,#fff,transparent),radial-gradient(1px 1px at 88% 58%,rgba(255,255,255,.85),transparent),
	radial-gradient(1px 1px at 35% 88%,#fff,transparent),radial-gradient(1.5px 1.5px at 68% 12%,#fff,transparent),
	radial-gradient(130% 100% at 72% 22%,rgba(0,90,159,.5),transparent 58%),radial-gradient(100% 80% at 20% 82%,rgba(47,95,168,.4),transparent 55%),
	linear-gradient(158deg,#0d1b30,#060b16 70%)}
.cm-sky--mist{background:
	radial-gradient(1.5px 1.5px at 20% 30%,#fff,transparent),radial-gradient(1px 1px at 55% 60%,#fff,transparent),
	radial-gradient(2px 2px at 80% 20%,#fff,transparent),radial-gradient(1px 1px at 40% 80%,#fff,transparent),
	radial-gradient(130% 100% at 30% 30%,rgba(107,74,158,.5),transparent 60%),radial-gradient(90% 80% at 80% 80%,rgba(139,58,98,.35),transparent 55%),
	linear-gradient(150deg,#171126,#08060f 72%)}
.cm-sky--sci{background:
	radial-gradient(1.5px 1.5px at 22% 40%,#fff,transparent),radial-gradient(1px 1px at 60% 30%,#fff,transparent),
	radial-gradient(1.5px 1.5px at 78% 66%,#fff,transparent),radial-gradient(130% 100% at 70% 30%,rgba(46,107,69,.45),transparent 60%),
	radial-gradient(90% 80% at 20% 78%,rgba(15,122,112,.4),transparent 55%),linear-gradient(155deg,#0c1f18,#05100c 72%)}
.cm-sky--tec{background:
	radial-gradient(1.5px 1.5px at 18% 28%,#fff,transparent),radial-gradient(1px 1px at 50% 66%,#fff,transparent),
	radial-gradient(2px 2px at 82% 24%,#fff,transparent),radial-gradient(130% 100% at 74% 26%,rgba(168,84,32,.42),transparent 58%),
	radial-gradient(90% 80% at 22% 80%,rgba(0,90,159,.4),transparent 55%),linear-gradient(155deg,#1c1408,#0a0a10 72%)}
.cm-sky--ufo{background:
	radial-gradient(1.5px 1.5px at 25% 34%,#fff,transparent),radial-gradient(1px 1px at 62% 58%,#fff,transparent),
	radial-gradient(2px 2px at 80% 26%,#fff,transparent),radial-gradient(130% 100% at 68% 30%,rgba(15,122,112,.5),transparent 60%),
	radial-gradient(90% 80% at 24% 80%,rgba(47,95,168,.35),transparent 55%),linear-gradient(155deg,#07201d,#050f14 72%)}
.cm-sky--para{background:
	radial-gradient(1.5px 1.5px at 24% 32%,#fff,transparent),radial-gradient(1px 1px at 58% 62%,#fff,transparent),
	radial-gradient(2px 2px at 78% 22%,#fff,transparent),radial-gradient(130% 100% at 66% 28%,rgba(139,58,98,.5),transparent 60%),
	radial-gradient(90% 80% at 26% 80%,rgba(107,74,158,.35),transparent 55%),linear-gradient(155deg,#20101c,#0d0710 72%)}
.cm-sky--feat{background:
	radial-gradient(1.5px 1.5px at 15% 25%,#fff,transparent),radial-gradient(1px 1px at 42% 70%,#fff,transparent),
	radial-gradient(2px 2px at 72% 30%,#fff,transparent),radial-gradient(1px 1px at 88% 62%,#fff,transparent),
	radial-gradient(1px 1px at 55% 15%,#fff,transparent),
	radial-gradient(140% 110% at 30% 78%,rgba(0,90,159,.42),transparent 58%),radial-gradient(100% 90% at 78% 22%,rgba(47,95,168,.35),transparent 55%),
	linear-gradient(160deg,#0d1626,#070a12 72%)}
/* El del hero cuando la destacada no tiene foto. */
.cm-skyimg{display:block;background:
	radial-gradient(60% 55% at 68% 34%,rgba(120,180,240,.35),transparent 60%),
	radial-gradient(130% 100% at 74% 26%,rgba(0,90,159,.5),transparent 60%),
	radial-gradient(120% 90% at 18% 82%,rgba(107,74,158,.38),transparent 58%),
	linear-gradient(155deg,#0e1c33,#05090f 74%)}

/* ════════════════════════════════════════════════════════════════════
   REPARTO DE LUZ (decisión del CEO, 17/07, tercera y definitiva):
   el home es PAPEL BLANCO con tinta negra, como el resto del periódico.
   El cielo animado vive solo en la cabecera. Se quedan EN NEGRO tres
   piezas, y solo esas: el Reportaje (nace oscuro), "Lo más leído" (banda
   oscura, ver su bloque arriba) y el pie (su fondo propio de site.css).
   La clase body.cm-cosmos sigue existiendo: site.js la usa para activar
   los extras del cielo (visitantes, clic-fugaz, parallax) solo en portada.
   ════════════════════════════════════════════════════════════════════ */

@media(prefers-reduced-motion:reduce){
	.cm-chero__h,.cm-chero__dek,.cm-chero__m{animation:none;opacity:1;transform:none}
	.cm-chero__lens{animation:none;opacity:1;transform:none}
	.cm-feat__bg{transform:none;transition:none}
	.cm-feat__bg img,.cm-feat__bg .cm-sky{animation:none}
	.cm-feat__in{transform:none;transition:none}
	.cm-band .cm-card,.cm-band .cm-row{transition:none;opacity:1;transform:none}
	.cm-band__head::after{transition:none;transform:scaleX(1)}
}

/* ═════════════════════════════════════════════════════════════════
   EDICIÓN OBSERVATORIO (v0.19.0) — el home de las señales.

   Lenguaje común: cabecera de sección con línea de datos en MONO
   (coordenadas del boletín), título grande y meridiano que se dibuja;
   números fantasma; pocas piezas, muy grandes. Tres firmas interactivas:
   el dúo Espacio↔OVNIS que respira, la linterna del Expediente y el
   cielo de hoy. El revelado al hacer scroll solo se arma si hay JS
   (body.cm-rv-armed): sin JS, todo visible.
   ═════════════════════════════════════════════════════════════════ */

/* ── Cabecera de sección compartida ── */
.cm-sec__hd{display:flex;align-items:baseline;gap:16px;position:relative;
	padding-bottom:12px;margin-bottom:28px}
.cm-sec__mono{font-family:'JetBrains Mono',monospace;font-size:10.5px;font-weight:500;
	letter-spacing:.14em;color:var(--cm-muted);white-space:nowrap}
.cm-sec__t{font-size:clamp(22px,2.6vw,30px);font-weight:800;letter-spacing:-.03em;
	color:var(--cm-ink);margin:0}
.cm-sec__t a{color:inherit;transition:color .15s}
.cm-sec__t a:hover{color:var(--c,var(--cm-primary))}
.cm-sec__ln{flex:1;height:2px;align-self:center;background:var(--c,var(--cm-primary));
	transform:scaleX(0);transform-origin:left;transition:transform .9s cubic-bezier(.2,.7,.2,1)}
.in .cm-sec__ln{transform:scaleX(1)}
@media(max-width:640px){
	/* La línea de datos mono pasa a SU propia línea encima del título:
	   en 360px no caben mono + título grande + meridiano en una fila. */
	.cm-sec__hd{flex-wrap:wrap;gap:6px 14px}
	.cm-sec__mono{flex-basis:100%;order:-1;font-size:10px}
	.cm-sec__t{font-size:24px}
}

/* Revelado: SOLO si el JS armó el sistema. */
.cm-rv-armed [data-cmrv]{opacity:0;transform:translateY(22px);
	transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1)}
.cm-rv-armed [data-cmrv].in{opacity:1;transform:none}

/* ══════════ LAS TRES SEÑALES · destacadas fijadas ══════════ */
.cm-dst{padding-top:34px}
.cm-dst__it{display:grid;grid-template-columns:110px 1fr 216px;gap:26px;align-items:center;
	padding:26px 0;border-bottom:1px solid var(--cm-line);position:relative}
.cm-dst__it:last-child{border-bottom:0}
.cm-dst__n{font-size:84px;font-weight:800;line-height:.8;letter-spacing:-.05em;
	color:transparent;-webkit-text-stroke:1.5px var(--cm-line);
	font-variant-numeric:tabular-nums;transition:all .35s ease;align-self:start}
.cm-dst__it:hover .cm-dst__n{color:var(--c,var(--cm-primary));-webkit-text-stroke:1.5px var(--c,var(--cm-primary))}
.cm-dst__b{min-width:0}
.cm-dst__k{display:inline-flex;align-items:center;gap:8px;font-size:10.5px;font-weight:700;
	letter-spacing:.14em;text-transform:uppercase;color:var(--c,var(--cm-primary));margin-bottom:9px}
.cm-dst__k::before{content:"";width:16px;height:2px;background:var(--c,var(--cm-primary));transition:width .25s}
.cm-dst__it:hover .cm-dst__k::before{width:28px}
.cm-dst__t{display:block;font-size:clamp(20px,2.4vw,28px);font-weight:800;line-height:1.16;
	letter-spacing:-.025em;color:var(--cm-ink);text-wrap:balance;transition:color .15s}
.cm-dst__it:hover .cm-dst__t{color:var(--c,var(--cm-primary))}
.cm-dst__m{display:block;margin-top:10px;font-size:11.5px;font-weight:600;color:var(--cm-muted)}
.cm-dst__m b{color:var(--cm-ink-2)}
/* La placa fotográfica: llega con un grado de inclinación, como recién
   clavada en el corcho, y se endereza al pasar. */
.cm-dst__ph{position:relative;aspect-ratio:4/3;overflow:hidden;border-radius:6px;
	border:1px solid var(--cm-line);background:var(--cm-bg-soft);
	transform:rotate(1.1deg);box-shadow:0 10px 26px -14px rgba(11,18,32,.28);
	transition:transform .4s cubic-bezier(.2,.7,.2,1),box-shadow .4s}
.cm-dst__it:nth-child(2) .cm-dst__ph{transform:rotate(-1.1deg)}
.cm-dst__it:hover .cm-dst__ph{transform:rotate(0) scale(1.03);box-shadow:0 18px 40px -16px rgba(11,18,32,.35)}
.cm-dst__ph img,.cm-dst__ph .cm-sky{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
@media(max-width:860px){
	.cm-dst__it{grid-template-columns:1fr 128px;gap:16px;padding:22px 0}
	.cm-dst__n{position:absolute;top:14px;right:0;font-size:52px;opacity:.55}
	.cm-dst__ph{align-self:start}
	.cm-dst__t{font-size:19px}
}

/* ══════════ LA JORNADA · Actualidad ══════════ */
.cm-act{padding-top:60px}
.cm-act__lead{display:grid;grid-template-columns:1.35fr 1fr;gap:34px;align-items:center}
.cm-act__fig{position:relative;aspect-ratio:16/9;overflow:hidden;border-radius:6px;
	border:1px solid var(--cm-line);background:var(--cm-bg-soft)}
.cm-act__fig img,.cm-act__fig .cm-sky{position:absolute;inset:0;width:100%;height:100%;
	object-fit:cover;transition:transform 1.2s cubic-bezier(.2,.7,.2,1)}
.cm-act__lead:hover .cm-act__fig img,.cm-act__lead:hover .cm-act__fig .cm-sky{transform:scale(1.06)}
/* Barrido de luz: una banda diagonal cruza la foto al pasar. */
.cm-act__sweep{position:absolute;inset:0;background:linear-gradient(105deg,transparent 42%,rgba(255,255,255,.28) 50%,transparent 58%);
	transform:translateX(-120%);pointer-events:none}
.cm-act__lead:hover .cm-act__sweep{transition:transform .9s ease;transform:translateX(120%)}
.cm-act__t{display:block;font-size:clamp(24px,2.8vw,34px);font-weight:800;line-height:1.12;
	letter-spacing:-.028em;color:var(--cm-ink);text-wrap:balance;transition:color .15s}
.cm-act__lead:hover .cm-act__t{color:var(--cm-primary)}
.cm-act__d{display:block;margin-top:14px;font-size:15.5px;line-height:1.55;color:var(--cm-ink-2)}
.cm-act__m{display:block;margin-top:12px;font-size:11.5px;font-weight:600;color:var(--cm-muted)}
.cm-act__m b{color:var(--cm-ink-2)}
.cm-act__briefs{display:grid;grid-template-columns:1fr 1fr;gap:0 40px;margin-top:26px;
	border-top:1px solid var(--cm-line);padding-top:6px}
.cm-act__brief{display:block;padding:15px 0;border-bottom:1px solid var(--cm-line-soft)}
.cm-act__brief:nth-last-child(-n+2){border-bottom:0}
.cm-act__bt{display:block;font-size:19px;font-weight:700;line-height:1.3;letter-spacing:-.015em;
	color:var(--cm-ink);transition:color .15s}
.cm-act__brief:hover .cm-act__bt{color:var(--cm-primary)}
.cm-act__bm{display:block;margin-top:6px;font-size:12px;font-weight:600;color:var(--cm-muted)}
.cm-act__bm b{color:var(--cm-ink-2)}
@media(max-width:860px){
	.cm-act__lead{grid-template-columns:1fr;gap:18px}
	.cm-act__briefs{grid-template-columns:1fr}
	.cm-act__brief:nth-last-child(-n+2){border-bottom:1px solid var(--cm-line-soft)}
	.cm-act__brief:last-child{border-bottom:0}
}

/* ══════════ DOS FRECUENCIAS · los instrumentos del observatorio ══════════
   Banda oscura a sangre con DOS aparatos en vivo pintados por site.js:
   el VISOR (estrellas con paralaje + planeta anillado) y el RADAR (barrido
   con estela de fósforo y contactos). Sin JS los canvas quedan vacíos y
   mandan estos fondos CSS: un instrumento apagado sigue pareciendo un
   instrumento. */
.cm-duo{margin-top:64px;background:#04070D;position:relative;
	border-top:1px solid rgba(255,255,255,.06);border-bottom:1px solid rgba(255,255,255,.06)}
/* Una banda DEBAJO de la otra, a todo lo ancho: el visor de Espacio ocupa
   su franja entera (planeta a la izquierda, texto a la derecha) y el radar
   la suya en espejo (texto a la izquierda, radar a la derecha). */
.cm-duo__grid{display:block}
.cm-duo__h{position:relative;overflow:hidden;display:flex;align-items:center;
	min-width:0;min-height:440px}
.cm-duo__h--sky{justify-content:flex-end}
.cm-duo__h--radar{justify-content:flex-start}
/* Reserva sin JS: un puñado de estrellas y la nebulosa azul a gradientes. */
.cm-duo__h--sky{background:
	radial-gradient(1.5px 1.5px at 12% 18%,rgba(255,255,255,.9),transparent 60%),
	radial-gradient(1px 1px at 28% 52%,rgba(255,255,255,.7),transparent 60%),
	radial-gradient(1.5px 1.5px at 46% 12%,rgba(214,230,255,.8),transparent 60%),
	radial-gradient(1px 1px at 62% 38%,rgba(255,255,255,.6),transparent 60%),
	radial-gradient(2px 2px at 78% 20%,rgba(255,255,255,.85),transparent 60%),
	radial-gradient(1px 1px at 86% 58%,rgba(200,222,255,.6),transparent 60%),
	radial-gradient(1px 1px at 36% 76%,rgba(255,255,255,.5),transparent 60%),
	radial-gradient(120% 100% at 18% 12%,rgba(47,95,168,.30),transparent 62%),
	linear-gradient(180deg,#050B16,#081226)}
/* Reserva del radar: anillos concéntricos y fósforo apagado. */
.cm-duo__h--radar{cursor:crosshair;background:
	repeating-radial-gradient(circle at 76% 40%,transparent 0 68px,rgba(64,205,175,.07) 68px 69px),
	radial-gradient(120% 100% at 80% 16%,rgba(15,122,112,.26),transparent 65%),
	linear-gradient(180deg,#040D0A,#071510)}
.cm-duo__cv{position:absolute;inset:0;width:100%;height:100%;display:block}
/* Velo de legibilidad sobre el canvas, en el LADO del texto. */
.cm-duo__h::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:1;
	background:linear-gradient(to left,rgba(3,6,10,.92) 22%,rgba(3,6,10,.5) 52%,transparent 78%)}
.cm-duo__h--radar::after{background:linear-gradient(to right,rgba(2,8,6,.92) 22%,rgba(2,8,6,.5) 52%,transparent 78%)}
/* El texto ocupa SU lado de la banda, con aire y ancho de lectura sano. */
.cm-duo__in{position:relative;z-index:2;padding:52px clamp(28px,5vw,110px);
	min-width:0;width:min(880px,56%)}
/* La cabecera de sección de cada instrumento es LA MISMA que la de Ciencia
   (cm-sec__hd: mono + título grande + meridiano), en versión nocturna. */
.cm-duo__hd{margin-bottom:16px;padding-bottom:10px}
.cm-duo__hd .cm-sec__mono{color:rgba(255,255,255,.55)}
.cm-duo__hd .cm-sec__t{color:#F2F5FA}
.cm-duo__hd .cm-sec__t a:hover{color:#fff}
.cm-duo__t{display:block;font-size:clamp(24px,2.9vw,42px);font-weight:800;line-height:1.1;
	letter-spacing:-.028em;color:#F2F5FA;text-wrap:balance;transition:color .15s}
.cm-duo__t:hover{color:#fff;text-decoration:underline;text-decoration-thickness:2px;
	text-underline-offset:4px;text-decoration-color:var(--c)}
.cm-duo__t--idle{color:rgba(255,255,255,.5);font-size:19px;font-weight:700}
.cm-duo__m{display:block;margin-top:9px;font-size:11px;font-weight:600;color:rgba(255,255,255,.6)}
.cm-duo__m b{color:rgba(255,255,255,.85)}
.cm-duo__mini{display:block;margin-top:14px;padding-top:12px;border-top:1px solid rgba(255,255,255,.14);
	font-size:16px;font-weight:600;color:rgba(255,255,255,.78);line-height:1.35;transition:color .15s}
.cm-duo__mini:hover{color:#fff}
.cm-duo__mini span{color:var(--c)}
.cm-duo__status{margin-top:18px;display:inline-flex;align-items:center;gap:8px;
	font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.14em;
	text-transform:uppercase;color:rgba(255,255,255,.5)}
.cm-duo__status i{width:7px;height:7px;border-radius:50%;background:var(--c);
	box-shadow:0 0 9px var(--c);animation:cm-duo-blink 2.4s ease-in-out infinite}
/* El eje entre bandas: hilo horizontal con un nodo que respira. */
.cm-duo__axis{position:relative;display:block;height:1px;background:rgba(255,255,255,.08)}
.cm-duo__axis i{position:absolute;top:50%;left:50%;width:9px;height:9px;margin:-4.5px 0 0 -4.5px;
	border-radius:50%;background:var(--cm-sky-accent);box-shadow:0 0 12px var(--cm-sky-accent);
	animation:cm-duo-blink 3.2s ease-in-out infinite}
@keyframes cm-duo-blink{0%,100%{opacity:1}50%{opacity:.3}}
@media(max-width:860px){
	.cm-duo__h,.cm-duo__h--sky,.cm-duo__h--radar{min-height:380px;align-items:flex-end;
		justify-content:flex-start}
	.cm-duo__h::after,.cm-duo__h--radar::after{background:
		linear-gradient(to top,rgba(3,6,10,.94) 0%,rgba(3,6,10,.55) 45%,transparent 100%)}
	.cm-duo__in{padding:30px 22px;width:100%}
}

/* ══════════ EL INFORME · Ciencia ══════════ */
.cm-lab{padding-top:64px;position:relative;display:grid;grid-template-columns:64px 1fr;gap:20px}
.cm-lab__word{writing-mode:vertical-rl;transform:rotate(180deg);align-self:start;
	font-size:56px;font-weight:800;letter-spacing:.08em;line-height:1;
	color:transparent;-webkit-text-stroke:1.5px var(--cm-line);
	transition:all .4s ease;user-select:none;margin-top:6px}
.cm-lab:hover .cm-lab__word{color:var(--c);-webkit-text-stroke:1.5px var(--c)}
.cm-lab__b{min-width:0}
.cm-lab__lead{display:grid;grid-template-columns:300px 1fr;gap:28px;align-items:center}
.cm-lab__fig{position:relative;aspect-ratio:4/3;overflow:hidden;border-radius:6px;
	border:1px solid var(--cm-line);background:var(--cm-bg-soft)}
.cm-lab__fig img,.cm-lab__fig .cm-sky{position:absolute;inset:0;width:100%;height:100%;
	object-fit:cover;transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.cm-lab__lead:hover .cm-lab__fig img,.cm-lab__lead:hover .cm-lab__fig .cm-sky{transform:scale(1.06)}
.cm-lab__bx{min-width:0}
.cm-lab__t{display:block;font-size:clamp(20px,2.3vw,27px);font-weight:800;line-height:1.16;
	letter-spacing:-.024em;color:var(--cm-ink);text-wrap:balance;transition:color .15s}
.cm-lab__lead:hover .cm-lab__t{color:var(--c)}
.cm-lab__d{display:block;margin-top:11px;font-size:14.5px;line-height:1.55;color:var(--cm-ink-2)}
.cm-lab__m{display:block;margin-top:10px;font-size:11.5px;font-weight:600;color:var(--cm-muted)}
.cm-lab__m b{color:var(--cm-ink-2)}
.cm-lab__row{display:flex;align-items:baseline;gap:16px;margin-top:20px;padding-top:16px;
	border-top:1px solid var(--cm-line-soft)}
.cm-lab__rt{font-size:18px;font-weight:700;letter-spacing:-.015em;color:var(--cm-ink);
	line-height:1.3;transition:color .15s}
.cm-lab__row:hover .cm-lab__rt{color:var(--c)}
.cm-lab__rm{margin-left:auto;font-size:12px;font-weight:600;color:var(--cm-muted);white-space:nowrap}
.cm-lab__rm b{color:var(--cm-ink-2)}
@media(max-width:860px){
	.cm-lab{grid-template-columns:1fr}
	.cm-lab__word{display:none}
	.cm-lab__lead{grid-template-columns:1fr;gap:16px}
	.cm-lab__rm{display:none}
}

/* ══════════ EL CIELO DE HOY · banda astro ══════════
   Noche luminosa a sangre justo antes del centro astrológico: fecha en
   mono, el signo que manda hoy con su tinte del plugin, y accesos. */
.cm-ab{margin-top:72px;background:
	radial-gradient(1.5px 1.5px at 14% 30%,#fff,transparent),
	radial-gradient(1px 1px at 38% 70%,rgba(255,255,255,.8),transparent),
	radial-gradient(1.5px 1.5px at 64% 24%,#fff,transparent),
	radial-gradient(1px 1px at 85% 60%,rgba(255,255,255,.7),transparent),
	linear-gradient(120deg,#0B1524 0%,#0E1A30 55%,#11224A 100%)}
.cm-ab__in{display:flex;align-items:center;gap:26px;padding-top:22px;padding-bottom:22px;flex-wrap:wrap}
.cm-ab__l{min-width:0}
.cm-ab__mono{display:block;font-family:'JetBrains Mono',monospace;font-size:10px;
	letter-spacing:.18em;color:#7FA8D9;margin-bottom:4px}
.cm-ab__t{display:block;font-size:21px;font-weight:800;letter-spacing:-.02em;color:#F2F5FA}
.cm-ab__sign{display:inline-flex;align-items:center;gap:12px;background:var(--bg,#F2F2F0);
	border-radius:12px;padding:9px 16px 9px 11px;transition:transform .25s,box-shadow .25s}
.cm-ab__sign:hover{transform:translateY(-3px);box-shadow:0 12px 30px rgba(0,0,0,.35)}
.cm-ab__si{width:34px;height:34px;color:var(--c,#0A0A0A)}
.cm-ab__si svg{width:100%;height:100%}
.cm-ab__sb small{display:block;font-size:9.5px;font-weight:700;letter-spacing:.14em;
	text-transform:uppercase;color:#6A6A64}
.cm-ab__sb b{display:block;font-size:15px;font-weight:800;letter-spacing:-.02em;color:#1F1F1F}
.cm-ab__sa{color:var(--c,#0A0A0A);font-size:15px;transition:transform .25s}
.cm-ab__sign:hover .cm-ab__sa{transform:translateX(4px)}
.cm-ab__links{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap}
.cm-ab__links a{font-size:12px;font-weight:700;color:#DCE7F5;padding:8px 15px;
	border:1px solid rgba(255,255,255,.22);border-radius:999px;
	transition:background .2s,border-color .2s,color .2s}
.cm-ab__links a:hover{background:#fff;border-color:#fff;color:#0B1524}
@media(max-width:760px){
	.cm-ab__in{gap:16px}
	.cm-ab__links{margin-left:0;width:100%}
	/* Dedos, no cursores: accesos de ≥44px de alto. */
	.cm-ab__links a{padding:12px 18px;font-size:13px}
}

/* La banda astro y el horóscopo forman UNA isla: sin hueco entre ambas. */
.cm-ab + .cm-dh{margin-top:0;border-top:0}

/* ══════════ LA SEÑAL · Tecnología ══════════ */
.cm-sig{padding-top:64px}
.cm-sig__row{display:grid;grid-template-columns:1fr 1fr;gap:32px}
.cm-sig__row--solo{grid-template-columns:1fr}
.cm-sig__c{display:block;min-width:0}
.cm-sig__fig{position:relative;aspect-ratio:16/9;overflow:hidden;border-radius:6px;
	border:1px solid var(--cm-line);background:var(--cm-bg-soft);margin-bottom:14px}
.cm-sig__fig img,.cm-sig__fig .cm-sky{position:absolute;inset:0;width:100%;height:100%;
	object-fit:cover;transition:transform .7s cubic-bezier(.2,.7,.2,1)}
.cm-sig__c:hover .cm-sig__fig img,.cm-sig__c:hover .cm-sig__fig .cm-sky{transform:scale(1.05)}
/* Línea de escaneo: cruza la foto de arriba abajo al pasar. */
.cm-sig__fig::after{content:"";position:absolute;left:0;right:0;top:-3px;height:2px;
	background:var(--c);opacity:0;box-shadow:0 0 14px var(--c)}
.cm-sig__c:hover .cm-sig__fig::after{opacity:.9;transition:top 1s linear;top:100%}
.cm-sig__mono{display:block;font-family:'JetBrains Mono',monospace;font-size:10.5px;
	letter-spacing:.1em;color:var(--c);margin-bottom:8px}
.cm-sig__t{display:block;font-size:clamp(18px,2vw,22px);font-weight:800;line-height:1.2;
	letter-spacing:-.02em;color:var(--cm-ink);text-wrap:balance;
	background-image:linear-gradient(var(--c),var(--c));background-repeat:no-repeat;
	background-size:0% 2px;background-position:0 100%;transition:background-size .45s ease,color .15s;
	padding-bottom:3px}
.cm-sig__c:hover .cm-sig__t{background-size:100% 2px}
.cm-sig__m{display:block;margin-top:9px;font-size:11.5px;font-weight:600;color:var(--cm-muted)}
.cm-sig__m b{color:var(--cm-ink-2)}
@media(max-width:760px){.cm-sig__row{grid-template-columns:1fr;gap:34px}}

/* ══════════ EL EXPEDIENTE · Misterios · la LINTERNA ══════════
   Una sola pieza en penumbra. La imagen vive debajo de una capa casi
   negra con un agujero de luz (radial en --mx/--my): el ratón ES la
   linterna (site.js). Sin ratón, la luz deriva sola (animación). */
.cm-exp{margin-top:64px;position:relative;overflow:hidden;border-radius:14px;
	min-height:420px;display:flex;align-items:flex-end;background:#07090F}
.cm-exp__bg{position:absolute;inset:0}
.cm-exp__bg img,.cm-exp__bg .cm-sky{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cm-exp__dark{position:absolute;inset:0;
	background:radial-gradient(circle 230px at var(--mx,70%) var(--my,35%),
		rgba(5,7,12,0) 0%,rgba(5,7,12,.52) 46%,rgba(5,7,12,.94) 78%);
	transition:background .1s linear}
/* Deriva automática mientras nadie toca (se pausa con el ratón encima). */
@keyframes cm-exp-drift{
	0%{--mx:70%;--my:35%}25%{--mx:38%;--my:28%}50%{--mx:26%;--my:60%}
	75%{--mx:58%;--my:70%}100%{--mx:70%;--my:35%}
}
.cm-exp__in{position:relative;z-index:2;padding:34px 38px;max-width:640px}
.cm-exp__stamp{display:inline-block;font-family:'JetBrains Mono',monospace;font-size:10px;
	letter-spacing:.2em;color:#E8D9A0;border:1px solid rgba(232,217,160,.45);
	padding:6px 12px;border-radius:3px;margin-bottom:16px;
	transform:rotate(-1.2deg);background:rgba(10,8,2,.35)}
.cm-exp__t{display:block;font-size:clamp(22px,2.6vw,32px);font-weight:800;line-height:1.14;
	letter-spacing:-.025em;color:#F2F5FA;text-wrap:balance;transition:color .15s}
.cm-exp__t:hover{color:#fff}
.cm-exp__m{display:block;margin-top:10px;font-size:11.5px;font-weight:600;color:rgba(255,255,255,.6)}
.cm-exp__m b{color:rgba(255,255,255,.85)}
.cm-exp__cta{display:inline-flex;align-items:center;gap:9px;margin-top:18px;
	font-size:12.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#0B1524;
	background:#F2F5FA;padding:11px 20px;border-radius:999px;transition:gap .2s,transform .2s}
.cm-exp__cta:hover{gap:14px;transform:translateY(-2px)}
.cm-exp__all{position:absolute;top:26px;right:30px;z-index:2;font-size:11px;font-weight:700;
	letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.65);transition:color .15s}
.cm-exp__all:hover{color:#fff}
@media(max-width:700px){
	.cm-exp{min-height:360px}
	.cm-exp__in{padding:24px 20px}
	.cm-exp__all{top:20px;right:20px}
	.cm-exp__dark{background:radial-gradient(circle 170px at var(--mx,60%) var(--my,40%),
		rgba(5,7,12,0) 0%,rgba(5,7,12,.52) 46%,rgba(5,7,12,.94) 78%)}
}

/* ── Reduced motion: quieto y visible todo ── */
@media(prefers-reduced-motion:reduce){
	.cm-rv-armed [data-cmrv]{opacity:1;transform:none;transition:none}
	.cm-sec__ln{transform:scaleX(1);transition:none}
	.cm-dst__ph{transform:none;transition:none}
	.cm-duo__status i,.cm-duo__axis i,.cm-lab__rd--live i{animation:none}
	.cm-act__sweep,.cm-sig__fig::after{display:none}
	.cm-exp__dark{background:radial-gradient(circle 260px at 60% 45%,
		rgba(5,7,12,0) 0%,rgba(5,7,12,.5) 50%,rgba(5,7,12,.9) 80%)}
}

/* La deriva de la linterna necesita @property para interpolar los
   porcentajes; sin soporte, la luz queda quieta (y el ratón sigue
   funcionando). En cuanto el usuario toca, .is-torch apaga la deriva
   y manda el puntero. */
@property --mx{syntax:'<percentage>';inherits:false;initial-value:70%}
@property --my{syntax:'<percentage>';inherits:false;initial-value:35%}
.cm-exp__dark{animation:cm-exp-drift 16s ease-in-out infinite}
.cm-exp.is-torch .cm-exp__dark{animation:none}
@media(prefers-reduced-motion:reduce){.cm-exp__dark{animation:none}}

/* ══════════ EL OSCILOSCOPIO del Informe (Ciencia) ══════════
   Papel milimetrado en fósforo verde (tinte de la sección) con la traza en
   canvas que pinta site.js. Sin JS queda la línea base del ::after: un
   aparato en reposo. Cuando el JS arranca añade .is-live y la apaga. */
.cm-lab__scope{position:relative;margin:26px 0 32px;height:150px;border-radius:10px;
	overflow:hidden;background-color:#0A140D;
	background-image:
		linear-gradient(rgba(88,214,141,.05) 1px,transparent 1px),
		linear-gradient(90deg,rgba(88,214,141,.05) 1px,transparent 1px),
		linear-gradient(rgba(88,214,141,.13) 1px,transparent 1px),
		linear-gradient(90deg,rgba(88,214,141,.13) 1px,transparent 1px);
	background-size:8px 8px,8px 8px,40px 40px,40px 40px;
	box-shadow:inset 0 0 0 1px rgba(46,107,69,.4),inset 0 0 46px rgba(0,0,0,.6)}
.cm-lab__scope::after{content:"";position:absolute;left:0;right:0;top:50%;height:2px;
	background:linear-gradient(90deg,transparent,rgba(88,214,141,.65) 10%,rgba(88,214,141,.65) 90%,transparent);
	filter:drop-shadow(0 0 6px rgba(88,214,141,.8))}
.cm-lab__scope.is-live::after{display:none}
.cm-lab__cv{position:absolute;inset:0;width:100%;height:100%;display:block}
.cm-lab__read{position:absolute;top:10px;right:14px;z-index:2;display:flex;gap:16px;
	font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.1em;
	color:rgba(146,224,174,.7)}
.cm-lab__rd b{color:#BFF3D2;font-weight:600}
.cm-lab__rd--live{display:inline-flex;align-items:center;gap:6px}
.cm-lab__rd--live i{width:6px;height:6px;border-radius:50%;background:#58D68D;
	box-shadow:0 0 8px #58D68D;animation:cm-duo-blink 2s ease-in-out infinite}
@media(max-width:640px){
	.cm-lab__scope{height:110px;margin:20px 0 24px}
	.cm-lab__read{gap:10px;font-size:9px;top:8px;right:10px}
	.cm-lab__rd--live{display:none}
}