/* Hero player: video layers, overlays, title block, controls.
   Used by BOTH the single-post hero and every slide of the home slider —
   everything here hangs off the .amcn-player class. */

.amcn-post-hero {
	position: relative;
	width: 100%;
	height: 100vh;
	min-height: 560px;
	overflow: hidden;
	background: #000;
	color: #fff;
	isolation: isolate;
}

.amcn-post-hero__media {
	position: absolute;
	inset: 0;
	overflow: hidden;
	cursor: pointer;
}

.amcn-player .amcn-post-hero-video {
	position: absolute !important;
	inset: 0 !important;
	top: 0 !important;
	left: 0 !important;
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	max-height: none !important;
	object-fit: cover !important;
	object-position: center center;
	display: block;
	transition: filter .9s ease, transform .6s ease;
	filter: blur(0px);

	transform: scale(var(--amcn-video-crop-zoom, 1));
}

.amcn-post-hero-video--bg {
	z-index: 1;
}

.amcn-post-hero-video--fg {
	z-index: 2;
	opacity: 0;
	pointer-events: none;
	transition: opacity .5s ease, filter .9s ease, transform .6s ease;
}

.amcn-player.is-featured .amcn-post-hero-video--fg {
	opacity: 1;
}

.amcn-post-hero__idle-overlay {
	position: absolute;
	inset: 0;
	z-index: 2;
	background: rgba(0, 0, 0, .32);
	pointer-events: none;
	transition: opacity .5s ease;
}

.amcn-player.is-featured .amcn-post-hero__idle-overlay {
	opacity: 0;
}

.amcn-post-hero__overlay {
	position: absolute;
	inset: 0;
	pointer-events: none;
	transition: opacity .4s ease;
	z-index: 3;
	background:

		linear-gradient(to bottom, rgba(0,0,0,.7) 0%, rgba(0,0,0,.35) 12%, rgba(0,0,0,0) 26%),

		radial-gradient(ellipse 140% 65% at 50% 0%, rgba(0,0,0,.65) 0%, rgba(0,0,0,.25) 45%, rgba(0,0,0,0) 78%),

		linear-gradient(to top, rgba(0,0,0,.78) 0%, rgba(0,0,0,.32) 32%, rgba(0,0,0,0) 60%);
}

.amcn-player .amcn-post-hero__content {
	position: absolute;
	left: 50%;
	bottom: 0;
	transform: translateX(-50%);
	z-index: 5;
	width: 100%;
	max-width: var(--amcn-container-width, 1370px);
	box-sizing: border-box;
	padding: 32px var(--amcn-container-gutter, 40px) 28px;
	pointer-events: none;
	transition: transform .5s cubic-bezier(.22, .61, .36, 1), opacity .4s ease;
}

.amcn-player .amcn-post-hero__marca {
	display: block;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: #fff;
	opacity: .9;
	margin: 0 0 10px;
}

.amcn-player h1.amcn-post-hero__titulo,
.amcn-player h2.amcn-post-hero__titulo {
	margin: 0 0 26px;
	padding: 0;
	font-size: clamp(28px, 4.6vw, 52px);
	line-height: 1.05;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: .01em;
	color: #fff;
}

.amcn-player .amcn-post-hero__footer {

	clear: right;

	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding-top: 18px;
	border-top: 1px solid rgba(255, 255, 255, .25);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: #fff;
	opacity: .85;
}

.amcn-player .amcn-post-hero__subtitulo,
.amcn-player .amcn-post-hero__ubicacion {
	color: #fff;
}

.amcn-player .amcn-post-hero__footer {
	position: relative;
}

/* Progress line: not a new bar. The footer's border-top is the rail and
   this paints the played part over it. Width comes from
   --amcn-hero-progreso via scaleX (never width: it would relayout). */
.amcn-player .amcn-post-hero__footer::before {
	content: "";
	position: absolute;

	top: -1px;
	left: 0;
	right: 0;
	height: 1px;

	background: #fff;
	transform: scaleX(var(--amcn-hero-progreso, 0));
	transform-origin: left center;

	pointer-events: none;
}

/* Round controls. Floated right and placed BEFORE the title in the HTML,
   so a float sits beside it where there is room instead of over the foot. */
.amcn-player .amcn-post-hero__ctrl {
	float: right;

	position: relative;
	right: auto;
	bottom: auto;

	margin: 0 0 12px 14px;
	z-index: 6;
	width: 46px;
	height: 46px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(20, 20, 20, .55);
	border: 1px solid rgba(255, 255, 255, .18);
	border-radius: 50%;
	color: #fff;
	cursor: pointer;
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);

	pointer-events: auto;

	transition: background .2s ease, transform .2s ease, border-color .2s ease, opacity .3s ease;
}

.amcn-post-hero__ctrl:hover {
	background: rgba(20, 20, 20, .8);
	border-color: rgba(255, 255, 255, .4);
	transform: scale(1.06);
}

.amcn-post-hero__ctrl:active {
	transform: scale(.96);
}

.amcn-post-hero__icon {
	position: absolute;
	opacity: 0;
	transition: opacity .2s ease;
}

.amcn-post-hero__icon--muted {
	opacity: 1;
}

.amcn-player.is-unmuted .amcn-post-hero__icon--muted {
	opacity: 0;
}

.amcn-player.is-unmuted .amcn-post-hero__icon--unmuted {
	opacity: 1;
}

/* Fullscreen: only while the piece runs, plus whenever already in
   fullscreen so there is always a way out other than Escape. */
.amcn-player .amcn-post-hero__fs-toggle,
.amcn-player .amcn-post-hero__pause-toggle {
	opacity: 0;
	pointer-events: none;
}

/* Pause: visible only while the piece plays. */
.amcn-player.is-featured .amcn-post-hero__pause-toggle {
	opacity: 1;
	pointer-events: auto;
}

.amcn-post-hero__icon--pause {
	opacity: 1;
}

.amcn-player.is-featured .amcn-post-hero__fs-toggle,
.amcn-player.is-fullscreen .amcn-post-hero__fs-toggle {
	opacity: 1;
	pointer-events: auto;
}

.amcn-post-hero__icon--fs-in {
	opacity: 1;
}

.amcn-player.is-fullscreen .amcn-post-hero__icon--fs-in {
	opacity: 0;
}

.amcn-player.is-fullscreen .amcn-post-hero__icon--fs-out {
	opacity: 1;
}

.amcn-post-hero__play-feedback {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 4;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	filter: drop-shadow(0 2px 12px rgba(0, 0, 0, .5));
	opacity: 1;
	pointer-events: none;
	transition: opacity .3s ease;
}

.amcn-player.is-featured .amcn-post-hero__play-feedback {
	opacity: 0;
}

.amcn-post-hero__play-feedback svg {
	margin-left: 6px;
}

.amcn-post-hero__swap-overlay {
	position: absolute;
	inset: 0;
	z-index: 3;
	background: #000;
	opacity: 0;
	pointer-events: none;
	transition: opacity .35s ease;
}

:root {
    --amcn-container-gutter: 10px;
}

.amcn-player.is-switching .amcn-post-hero__swap-overlay {
	opacity: .8;
}

.amcn-player.is-switching .amcn-post-hero-video {
	transform: scale(calc(1.05 * var(--amcn-video-crop-zoom, 1)));
}

.amcn-post-hero.amcn-hero-entering .amcn-post-hero-video {
	filter: blur(26px);
	transform: scale(calc(1.12 * var(--amcn-video-crop-zoom, 1)));
}

.amcn-post-hero.amcn-hero-entering .amcn-post-hero__overlay {
	opacity: .85;
}

/* Fullscreen: title block and gradient get out of the way; they come back
   while the pointer is over the bottom strip (.is-ui-visible, set by JS) or a
   control has KEYBOARD focus. That is :focus-visible, not :focus-within: a
   mouse click also leaves focus on the button, and :focus-within kept the
   block up until the window lost focus. Hover-capable devices only: on touch
   there is no hover to bring it back, so there it stays as it is. */
@media (hover: hover) {
	.amcn-player.is-fullscreen .amcn-post-hero__content {
		transform: translate(-50%, 100%);
		opacity: 0;
	}

	.amcn-player.is-fullscreen .amcn-post-hero__overlay {
		opacity: 0;
	}

	.amcn-player.is-fullscreen.is-ui-visible .amcn-post-hero__content,
	.amcn-player.is-fullscreen .amcn-post-hero__content:has(:focus-visible) {
		transform: translate(-50%, 0);
		opacity: 1;
	}

	.amcn-player.is-fullscreen.is-ui-visible .amcn-post-hero__overlay,
	.amcn-player.is-fullscreen:has(.amcn-post-hero__content :focus-visible) .amcn-post-hero__overlay {
		opacity: 1;
	}
}

@media (max-width: 768px) {
	.amcn-post-hero {
		height: 100vh;
	}
	.amcn-player .amcn-post-hero__footer {
		flex-direction: column;
		align-items: flex-start;
		gap: 10px;
	}

	.amcn-player .amcn-post-hero__ctrl {
		width: 36px;
		height: 36px;
		margin-bottom: 14px;
	}
}

.amcn-post-encabezado {
	width: 100%;
	box-sizing: border-box;
	background: #000;
	color: #fff;
	text-align: center;

	padding:
		calc(var(--amcn-header-height, 88px) + clamp(48px, 6vw, 90px))
		var(--amcn-container-gutter, 0px)
		clamp(40px, 5vw, 72px);
}

.amcn-post-encabezado .amcn-post-encabezado__marca {
	display: block;
	margin: 0 0 12px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: #fff;
	opacity: .9;
}

.amcn-post-encabezado .amcn-post-encabezado__marca::before {
	content: "/";
	margin-right: 2px;
}

.amcn-post-encabezado h1.amcn-post-encabezado__titulo {
	margin: 0;
	padding: 0;
	font-size: clamp(28px, 4.6vw, 52px);
	line-height: 1.05;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: .01em;
	color: #fff;
}