/*
 * LT Media Reveal — v1.0
 * Galería de medios con efecto telón (curtain-up / curtain-clip).
 *
 * Mecánica:
 *  - .lt-mr-sticky queda sticky y ocupa el viewport.
 *  - .lt-mr-media están apiladas (position:absolute) en el mismo hueco.
 *  - El JS escribe --p (0 = tapando / 1 = retirado) por cada medio.
 *  - El CSS sólo describe CÓMO se mueve cada modo.
 *  - .lt-mr-trigger son los disparadores de scroll (texto opcional).
 */

/* ============ VARIABLES ============ */
.lt-mr-widget {
	--lt-mr-float-offset-x: 24px;
	--lt-mr-float-offset-y: 24px;
	--lt-mr-float-dur: 500ms;
	position: relative;
	width: 100%;
}

/* ============ ESTRUCTURA SCROLL ============
 * .lt-mr-stack es el contenedor de scroll. Dentro:
 *   .lt-mr-sticky  → se pega arriba (100vh) mientras pasan los triggers
 *   .lt-mr-trigger × N → invisibles, dan la altura de scroll
 * El primer trigger se solapa con el sticky (margin-top negativo) para que
 * el widget mida N×scroll_length y NO 100vh + N×scroll_length.
 */
.lt-mr-stack {
	position: relative;
}

/* ============ STICKY (viewport del medio) ============ */
.lt-mr-sticky {
	position: sticky;
	top: 0;
	height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	z-index: 1;
}

/* Marco del medio — el max-width lo pone Elementor vía selector */
.lt-mr-frame {
	position: relative;
	width: 100%;
	max-width: 70vw;
	overflow: hidden;
}

/* ============ ASPECT RATIOS ============ */
.lt-mr-ratio-16-9 { aspect-ratio: 16 / 9; }
.lt-mr-ratio-4-3  { aspect-ratio: 4 / 3; }
.lt-mr-ratio-3-2  { aspect-ratio: 3 / 2; }
.lt-mr-ratio-1-1  { aspect-ratio: 1 / 1; }
.lt-mr-ratio-3-4  { aspect-ratio: 3 / 4; }
.lt-mr-ratio-9-16 { aspect-ratio: 9 / 16; }
.lt-mr-ratio-21-9 { aspect-ratio: 21 / 9; }

/* ============ MEDIOS APILADOS ============ */
.lt-mr-media {
	position: absolute;
	inset: 0;
	overflow: hidden;
	will-change: transform, clip-path, opacity;
	background: #000;
}

.lt-mr-media img,
.lt-mr-media video,
.lt-mr-media .lt-mr-embed {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Embeds (YT / Vimeo): el iframe debe llenar el hueco */
.lt-mr-embed {
	position: relative;
	width: 100%;
	height: 100%;
	overflow: hidden;
}

.lt-mr-embed iframe {
	position: absolute;
	top: 50%;
	left: 50%;
	/* sobredimensionado para que el iframe 16:9 cubra cualquier ratio sin barras */
	width: 177.78vh;   /* 16:9 respecto a la altura */
	height: 56.25vw;   /* 16:9 respecto al ancho */
	min-width: 100%;
	min-height: 100%;
	transform: translate(-50%, -50%);
	border: 0;
}

.lt-mr-embed-error {
	display: flex;
	align-items: center;
	justify-content: center;
	background: #1a1a1a;
	color: #ff5a5a;
	font-size: 13px;
	letter-spacing: .03em;
}

/* ---- MODO curtain-up: el medio se va hacia arriba como un telón ---- */
.lt-mr-mode-curtain-up .lt-mr-media {
	transform: translateY(calc(var(--p, 0) * -100%));
}

/* ---- MODO curtain-clip: se recorta desde arriba revelando el de abajo ---- */
.lt-mr-mode-curtain-clip .lt-mr-media {
	clip-path: inset(calc(var(--p, 0) * 100%) 0 0 0);
}

/* El medio ya completamente retirado no captura eventos */
.lt-mr-media[data-p-done="1"] {
	pointer-events: none;
}

/* ============ DISPARADORES DE SCROLL ============ */
.lt-mr-trigger {
	/* la altura real la fija el JS (data-scroll-length) */
	min-height: 100vh;
	pointer-events: none;
	visibility: hidden;
}

/* El primer trigger se solapa con el sticky para no duplicar 100vh:
   el JS ajusta este valor exacto, pero damos un fallback CSS. */
.lt-mr-trigger:first-of-type {
	margin-top: -100vh;
}

/* Medio inline — oculto cuando el efecto telón está activo */
.lt-mr-inline-media {
	display: none;
	width: 100%;
	overflow: hidden;
}

.lt-mr-inline-media img,
.lt-mr-inline-media video,
.lt-mr-inline-media iframe {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	border: 0;
}

/* ============ TÍTULO FLOTANTE ============
 * Ya NO usa position: fixed. Va dentro de .lt-mr-sticky para anclarse
 * al contenedor del medio: se mueve con el sticky, solo se ve cuando el
 * widget está en pantalla, y no flota por toda la página.
 *
 * Dos modos:
 *  - Anclaje FRAME    → absoluto dentro del marco del medio (9 posiciones).
 *  - Anclaje VIEWPORT → absoluto dentro del .lt-mr-sticky (que ocupa el
 *    viewport completo), pegado al borde izquierdo o derecho.
 */
.lt-mr-floating {
	position: absolute;
	z-index: 50;
	pointer-events: none;
	display: flex;
	gap: 6px;
}

/* Layout: vertical (apilado) u horizontal (en línea) */
.lt-mr-float-layout-vertical   { flex-direction: column; }
.lt-mr-float-layout-horizontal { flex-direction: row; align-items: baseline; gap: 14px; }

.lt-mr-float-anchor-frame,
.lt-mr-float-anchor-viewport {
	position: absolute;
}

/* ---- 9 posiciones FRAME (relativas al .lt-mr-frame, que es el contenedor)
 * Usan los offsets X/Y separados, que pueden ser NEGATIVOS para que el
 * texto sobresalga del marco.
 */
.lt-mr-float-frame-top-left {
	top: var(--lt-mr-float-offset-y); left: var(--lt-mr-float-offset-x);
}
.lt-mr-float-frame-top-center {
	top: var(--lt-mr-float-offset-y); left: 50%; transform: translateX(-50%);
	text-align: center; align-items: center;
}
.lt-mr-float-frame-top-right {
	top: var(--lt-mr-float-offset-y); right: var(--lt-mr-float-offset-x);
	text-align: right; align-items: flex-end;
}
.lt-mr-float-frame-middle-left {
	top: 50%; left: var(--lt-mr-float-offset-x); transform: translateY(-50%);
}
.lt-mr-float-frame-middle-center {
	top: 50%; left: 50%; transform: translate(-50%, -50%);
	text-align: center; align-items: center;
}
.lt-mr-float-frame-middle-right {
	top: 50%; right: var(--lt-mr-float-offset-x); transform: translateY(-50%);
	text-align: right; align-items: flex-end;
}
.lt-mr-float-frame-bottom-left {
	bottom: var(--lt-mr-float-offset-y); left: var(--lt-mr-float-offset-x);
}
.lt-mr-float-frame-bottom-center {
	bottom: var(--lt-mr-float-offset-y); left: 50%; transform: translateX(-50%);
	text-align: center; align-items: center;
}
.lt-mr-float-frame-bottom-right {
	bottom: var(--lt-mr-float-offset-y); right: var(--lt-mr-float-offset-x);
	text-align: right; align-items: flex-end;
}

/* ---- 6 posiciones VIEWPORT (extremos laterales del sticky) ---- */
.lt-mr-float-vp-left-top      { top: 0;    left: 0;    align-items: flex-start; }
.lt-mr-float-vp-left-middle   { top: 50%;  left: 0;    transform: translateY(-50%); align-items: flex-start; }
.lt-mr-float-vp-left-bottom   { bottom: 0; left: 0;    align-items: flex-start; }
.lt-mr-float-vp-right-top     { top: 0;    right: 0;   text-align: right; align-items: flex-end; }
.lt-mr-float-vp-right-middle  { top: 50%;  right: 0;   transform: translateY(-50%); text-align: right; align-items: flex-end; }
.lt-mr-float-vp-right-bottom  { bottom: 0; right: 0;   text-align: right; align-items: flex-end; }

/* ---- Tipografía / contenido ---- */
.lt-mr-float-kicker-wrap,
.lt-mr-float-main-wrap {
	overflow: hidden;
	display: block;
}

.lt-mr-float-kicker {
	display: block;
	font-size: 12px;
	letter-spacing: .2em;
	text-transform: uppercase;
}

.lt-mr-float-main {
	display: block;
	font-size: 2em;
	font-weight: 800;
	line-height: 1.05;
}

/* En layout horizontal, los wraps no son block-flex sino inline */
.lt-mr-float-layout-horizontal .lt-mr-float-kicker-wrap,
.lt-mr-float-layout-horizontal .lt-mr-float-main-wrap {
	display: inline-block;
}

/* ---- Efecto SLIDE (rodillo vertical) — SOLO el título, NUNCA el kicker ---- */
.lt-mr-float-fx-slide .lt-mr-float-main {
	transition: transform var(--lt-mr-float-dur) cubic-bezier(.7, 0, .2, 1);
}
.lt-mr-float-fx-slide.is-leaving .lt-mr-float-main {
	transform: translateY(-110%);
}
.lt-mr-float-fx-slide.is-entering .lt-mr-float-main {
	transform: translateY(110%);
	transition: none;
}

/* ---- Efecto FADE — SOLO el título, NUNCA el kicker ---- */
.lt-mr-float-fx-fade .lt-mr-float-main {
	transition: opacity var(--lt-mr-float-dur) ease;
}
.lt-mr-float-fx-fade.is-leaving .lt-mr-float-main,
.lt-mr-float-fx-fade.is-entering .lt-mr-float-main {
	opacity: 0;
}

/* El kicker NUNCA se anima, en ningún efecto */
.lt-mr-float-kicker {
	transition: none !important;
}

/* ---- Efecto TYPEWRITER ---- */
.lt-mr-float-fx-typewriter .lt-mr-float-main {
	white-space: nowrap;
	overflow: hidden;
	border-right: .08em solid currentColor;
}
.lt-mr-float-fx-typewriter .lt-mr-float-main.is-typing {
	animation: lt-mr-caret .7s step-end infinite;
}
@keyframes lt-mr-caret {
	50% { border-color: transparent; }
}

/* ============ RESPONSIVE: EFECTO DESACTIVADO ============ */
/* El JS añade .lt-mr-disabled cuando se supera el breakpoint configurado. */
.lt-mr-widget.lt-mr-disabled .lt-mr-sticky {
	display: none;
}

.lt-mr-widget.lt-mr-disabled .lt-mr-floating {
	display: none;
}

.lt-mr-widget.lt-mr-disabled .lt-mr-stack {
	display: flex;
	flex-direction: column;
	gap: 32px;
}

.lt-mr-widget.lt-mr-disabled .lt-mr-trigger {
	min-height: 0 !important;
	height: auto !important;
	margin-top: 0 !important;
	visibility: visible;
	display: block;
}

.lt-mr-widget.lt-mr-disabled .lt-mr-inline-media {
	display: block;
}

/* ============ ACCESIBILIDAD ============ */
@media (prefers-reduced-motion: reduce) {
	.lt-mr-media,
	.lt-mr-float-main {
		transition: none !important;
	}
	.lt-mr-float-fx-typewriter .lt-mr-float-main.is-typing {
		animation: none;
	}
}

/* ============ VISTA EN EL EDITOR ============ */
.lt-mr-editor-preview {
	padding: 0;
	border: 1px dashed #c3c4c7;
	border-radius: 6px;
	background: #fafafa;
	overflow: hidden;
}

/* Escenario: el primer medio encuadrado en su ratio */
.lt-mr-editor-stage {
	background: #000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
}

.lt-mr-editor-stage .lt-mr-frame {
	position: relative;
	width: 100%;
	max-width: 100%;
	margin: 0 auto;
	overflow: hidden; /* necesario para que el iframe no desborde con sus propias proporciones */
}

.lt-mr-editor-stage .lt-mr-frame img,
.lt-mr-editor-stage .lt-mr-frame video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border: 0;
	display: block;
}

/* El iframe (Vimeo/YouTube en el editor) necesita ignorar su ratio nativo */
.lt-mr-editor-stage .lt-mr-frame iframe {
	position: absolute;
	top: -10%; left: -10%;  /* sobredimensionado para cubrir sin barras */
	width: 120%;
	height: 120%;
	border: 0;
	display: block;
	pointer-events: none;
}

.lt-mr-editor-empty,
.lt-mr-editor-stage .lt-mr-embed-error {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #bbb;
	font-size: 13px;
	letter-spacing: .03em;
	background: #1a1a1a;
}

/* Título flotante simulado sobre el primer medio */
.lt-mr-editor-float {
	position: absolute;
	z-index: 5;
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 10px 12px;
	pointer-events: none;
	color: #fff;
	text-shadow: 0 1px 4px rgba(0, 0, 0, .6);
}

.lt-mr-editor-float-top-left      { top: 8px; left: 8px; }
.lt-mr-editor-float-top-right     { top: 8px; right: 8px; text-align: right; }
.lt-mr-editor-float-bottom-left   { bottom: 8px; left: 8px; }
.lt-mr-editor-float-bottom-right  { bottom: 8px; right: 8px; text-align: right; }
.lt-mr-editor-float-bottom-center { bottom: 8px; left: 50%; transform: translateX(-50%); text-align: center; }

.lt-mr-editor-float-kicker {
	font-size: 10px;
	letter-spacing: .18em;
	text-transform: uppercase;
	opacity: .85;
}

.lt-mr-editor-float-main {
	font-size: 18px;
	font-weight: 800;
	line-height: 1.05;
}

.lt-mr-editor-note {
	font-size: 12px;
	color: #646970;
	padding: 10px 16px;
	background: #fff;
	border-top: 1px solid #ececec;
}

.lt-mr-editor-list {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 12px 16px 16px;
	background: #fff;
}

.lt-mr-editor-item {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px 12px;
	background: #fafafa;
	border: 1px solid #e0e0e0;
	border-radius: 4px;
}

.lt-mr-editor-badge {
	font-size: 10px;
	text-transform: uppercase;
	letter-spacing: .05em;
	background: #2271b1;
	color: #fff;
	padding: 2px 8px;
	border-radius: 3px;
	flex-shrink: 0;
}

.lt-mr-editor-label {
	font-weight: 600;
	font-size: 13px;
}

.lt-mr-editor-current {
	margin-left: auto;
	font-size: 10px;
	color: #2271b1;
	font-style: italic;
}