/* Reading scene: the media viewer sticks and blurs while the text scrolls
   over it. The blur goes on an inner div, not on the sticky element itself
   (a filter would make it the containing block of its positioned children). */

.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);

	--amcn-escena-espera: 100vh;

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

.amcn-escena__media {
	position: sticky;

	top: var(--amcn-header-height, 102px);

	z-index: 0;

	overflow: hidden;
}

.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));
}

.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);
}

.amcn-escena.is-usando-galeria .amcn-escena__media-inner {
	filter: none;
	transform: none;
}

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

.amcn-escena.is-usando-galeria .amcn-escena__media-inner,
.amcn-escena.is-usando-galeria .amcn-escena__velo {
	transition-duration: .25s;
}

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

	margin-top: var(--amcn-escena-espera, 100vh);

	padding: clamp(80px, 12vh, 160px) clamp(20px, 5vw, 40px) clamp(90px, 14vh, 180px);

	pointer-events: none;
}

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

	pointer-events: auto;
}

.amcn-escena--plana .amcn-escena__texto {
	margin-top: 0;
	padding-top: clamp(60px, 9vh, 110px);
}

.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;
}

@media (prefers-reduced-motion: reduce) {
	.amcn-escena__media-inner,
	.amcn-escena__velo {
		transition: none;
	}

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