/* ==========================================================
   CONTENIDO DEL POST (escena de lectura) — Amén McCann
   El visor de galería/audio queda pinneado y blureado, y el
   contenido del editor scrollea por encima.
   ========================================================== */

.amcn-escena {
	--amcn-escena-blur: 20px;
	--amcn-escena-velo: .68;
	--amcn-escena-escala: .94;
	--amcn-escena-vel: .8s;
	--amcn-escena-ease: cubic-bezier(.22, .61, .36, 1);

	/* Cuánto scroll hay que hacer con el visor pinneado ANTES de que
	   empiece a asomar el texto. Es el margen que evita que el contenido
	   tape la galería mientras todavía se la está usando. */
	--amcn-escena-espera: 100vh;

	position: relative;
	width: 100%;
	background: #000;
	color: #fff;
}

/* ---------- Media pinneado ----------
   NO lleva margin negativo ni nada raro: el media es sticky y reserva su
   viewport en el flujo, y el texto viene DESPUÉS. Eso da justo la
   secuencia que se busca — primero se ve el visor normal, y al seguir
   scrolleando el texto sube por encima mientras el visor se queda fijo
   atrás.

   Si el texto llevara un margin-top negativo, arrancaría tapando el visor
   desde el primer momento y no habría "entrada". */
/* SIN height: 100vh. La caja mide lo que mide el visor y nada más.
 *
 * Con 100vh y el visor centrado quedaba un hueco enorme entre el
 * encabezado y el visor: todo lo que sobraba del viewport se leía como un
 * padding gigante que antes no existía. Sticky no necesita alto propio —
 * reserva en el flujo exactamente lo que ocupa el visor, así que el
 * bloque se ve igual que antes hasta que empieza el scroll. */
.amcn-escena__media {
	position: sticky;

	/* Se pinea DEBAJO del header, que es transparente y se dibuja encima
	   del contenido (ver --amcn-header-height en slider-hero.css). Con
	   top: 0 el menú le quedaría montado al visor mientras está fijo. */
	top: var(--amcn-header-height, 102px);

	z-index: 0;

	/* Recorta el desenfoque en el borde del visor: un blur se derrama
	   fuera de la caja y sin esto quedarían los bordes difuminados
	   invadiendo lo de al lado. */
	overflow: hidden;
}

/* El filtro va en un div interno y NO en el sticky: aplicar filter a un
   elemento lo convierte en bloque contenedor de sus descendientes
   posicionados, y no conviene tocar eso justo en el que está pinneado. */
.amcn-escena__media-inner {
	width: 100%;
	transition:
		filter var(--amcn-escena-vel) var(--amcn-escena-ease),
		transform calc(var(--amcn-escena-vel) * 1.3) var(--amcn-escena-ease);
}

.amcn-escena.is-atras .amcn-escena__media-inner {
	filter: blur(var(--amcn-escena-blur));
	transform: scale(var(--amcn-escena-escala));
}

/* El oscurecido va aparte del blur para poder graduarlo sin recalcular el
   desenfoque, que es la parte cara. */
.amcn-escena__velo {
	position: absolute;
	inset: 0;
	background: #000;
	opacity: 0;
	pointer-events: none;
	transition: opacity var(--amcn-escena-vel) var(--amcn-escena-ease);
}

.amcn-escena.is-atras .amcn-escena__velo {
	opacity: var(--amcn-escena-velo);
}

/* MIENTRAS SE USA LA GALERÍA, EL VISOR SE VE NÍTIDO.
 *
 * Si el mouse está sobre la tira de miniaturas es porque se están
 * mirando: dejarlo blureado ahí obliga a elegir imágenes a ciegas.
 * Vuelve a su estado al salir.
 *
 * El disparador es la TIRA y no el visor entero a propósito. La capa de
 * texto no captura el mouse (pointer-events: none), así que un hover
 * sobre todo el visor se dispararía también al mover el mouse por los
 * costados del texto mientras se lee, y el fondo estaría parpadeando.
 *
 * La clase la pone el JS con mouseenter/mouseleave sobre la tira. Se
 * podría hacer en CSS puro con :has(.trabajo-media-thumbs:hover), y de
 * hecho funciona, pero la clase explícita se lee mejor y no depende del
 * soporte de :has() en el navegador. */
.amcn-escena.is-usando-galeria .amcn-escena__media-inner {
	filter: none;
	transform: none;
}

.amcn-escena.is-usando-galeria .amcn-escena__velo {
	opacity: 0;
}

/* Entrar a la galería tiene que responder rápido: los 0.8s de la entrada
   están pensados para el scroll, pero como respuesta a "puse el mouse
   acá" se sienten lentos. Al salir vuelve a la duración normal, porque
   ahí sí es un fundido y no una respuesta. */
.amcn-escena.is-usando-galeria .amcn-escena__media-inner,
.amcn-escena.is-usando-galeria .amcn-escena__velo {
	transition-duration: .25s;
}

/* ---------- Texto ---------- */
.amcn-escena__texto {
	position: relative;
	z-index: 2;

	/* ESPERA ANTES DE QUE EMPIECE EL TEXTO.
	 *
	 * El visor está pinneado, así que nunca sale de pantalla solo: sin
	 * esto, apenas se consumía su propio alto el texto ya empezaba a
	 * taparlo, justo cuando todavía se está mirando o eligiendo
	 * miniaturas.
	 *
	 * Este margen es puro recorrido de scroll con el visor fijo y nada
	 * encima: recién cuando se termina de pasar la zona de la galería
	 * asoma el texto. No deja hueco visible porque el visor pinneado
	 * ocupa la pantalla durante todo ese tramo. */
	margin-top: var(--amcn-escena-espera, 100vh);

	/* El padding lateral es propio y NO sale de --amcn-container-gutter:
	   esa variable vale 0 en este sitio (el hero alinea a los bordes a
	   propósito), y una columna de lectura pegada al borde no se lee. */
	padding: clamp(80px, 12vh, 160px) clamp(20px, 5vw, 40px) clamp(90px, 14vh, 180px);

	/* NO CAPTURA CLICKS.
	 *
	 * Esta capa ocupa todo el ancho aunque la columna de texto sea
	 * angosta, así que su caja queda por encima de las miniaturas de la
	 * galería —que están a un costado— y las volvía imposibles de
	 * clickear apenas el texto empezaba a subir.
	 *
	 * Con pointer-events: none el click atraviesa hacia el visor, y se le
	 * devuelve solo a la columna, que es lo único que tiene contenido.
	 * Mismo criterio que .amcn-post-hero__content en el hero. */
	pointer-events: none;
}

.amcn-escena__col {
	width: 100%;
	max-width: 720px;
	margin: 0 auto;
	box-sizing: border-box;

	/* Se le devuelve el click a la columna: sin esto no se podría
	   seleccionar el texto ni usar los enlaces del contenido. */
	pointer-events: auto;
}

/* Sin visor (post de solo texto): ni sticky ni blur, solo la columna.
   Y sin la espera, obviamente: no hay galería que dejar pasar, así que
   ese margen sería un viewport de negro antes del texto. */
.amcn-escena--plana .amcn-escena__texto {
	margin-top: 0;
	padding-top: clamp(60px, 9vh, 110px);
}

/* ---------- Tipografía del contenido ----------
   Genérico sobre lo que salga del editor: los h2/h3 que se carguen quedan
   en el mismo tono que el resto del sitio. */
.amcn-escena__col > *:first-child {
	margin-top: 0;
}

.amcn-escena__col > *:last-child {
	margin-bottom: 0;
}

.amcn-escena__col h2,
.amcn-escena__col h3,
.amcn-escena__col h4 {
	margin: 1.6em 0 .5em;
	color: #fff;
	line-height: 1.1;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: .01em;
}

.amcn-escena__col h2 {
	font-size: clamp(24px, 2.6vw, 38px);
}

.amcn-escena__col h3 {
	font-size: clamp(19px, 1.9vw, 27px);
}

.amcn-escena__col h4 {
	font-size: clamp(16px, 1.4vw, 20px);
}

.amcn-escena__col p,
.amcn-escena__col li {
	font-size: clamp(15px, 1.15vw, 17px);
	line-height: 1.7;
	color: rgba(255, 255, 255, .84);
}

.amcn-escena__col p {
	margin: 0 0 1.2em;
}

.amcn-escena__col ul,
.amcn-escena__col ol {
	margin: 0 0 1.2em 1.2em;
}

.amcn-escena__col li {
	margin-bottom: .5em;
}

.amcn-escena__col a {
	color: #fff;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.amcn-escena__col img,
.amcn-escena__col video,
.amcn-escena__col iframe {
	max-width: 100%;
	height: auto;
	display: block;
	margin: 2em 0;
}

.amcn-escena__col blockquote {
	margin: 2em 0;
	padding-left: 20px;
	border-left: 2px solid rgba(255, 255, 255, .3);
	font-style: italic;
}

/* ==========================================================
   Accesibilidad
   ==========================================================
   El texto nunca depende del JS ni del efecto para verse. Con menos
   movimiento pedido, el visor se queda quieto y nítido. */
@media (prefers-reduced-motion: reduce) {
	.amcn-escena__media-inner,
	.amcn-escena__velo {
		transition: none;
	}

	.amcn-escena.is-atras .amcn-escena__media-inner {
		transform: none;
	}
}