/* ==========================================================
   MC Scroll Showcase v1.9.8 — pin sticky/fixed nativo + fallback manual
   ========================================================== */

.mcss-showcase {
	--mcss-vh: 100vh;
	--mcss-card-w: 55vw;
	--mcss-gap: 8vw;
	--mcss-media-ratio: 1.5;
	--mcss-panel-w: 38vw;
	--mcss-card-bg: #dbdbdb;
	--mcss-divider: rgba(0, 0, 0, 0.14);
	--mcss-divider-thickness: 1px;
	--mcss-divider-height: 85vh;
	--mcss-divider-display-desktop: block;
	--mcss-divider-display-tablet: block;
	--mcss-divider-display-mobile: block;
	--mcss-reveal-y: 90px;
	--mcss-reveal-dur: 1100ms;
	--mcss-reveal-ease: cubic-bezier(0.16, 1, 0.3, 1);
	--mcss-reveal-opacity: 0;
	--mcss-reveal-scale: 0.98;
	--mcss-link-btn-bg: rgba(27, 27, 27, 0.06);
	--mcss-link-btn-bg-hover: rgba(27, 27, 27, 0.12);
	--mcss-link-btn-radius: 8px;
	--mcss-link-btn-padding: 10px 22px;
	--mcss-link-btn-border-color: rgba(27, 27, 27, 0.16);
	--mcss-link-btn-border-w: 1px;
	--mcss-link-btn-blur: 12px;
	position: relative;
	width: 100%;
}

/* ---------- Ancho completo (rompe contenedor boxed) ---------- */
.mcss-fullwidth-yes .mcss-showcase,
.elementor-widget.mcss-fullwidth-yes {
	width: 100%;
}

.mcss-fullwidth-yes .mcss-showcase {
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}

/* El JS fija la altura total del wrapper (alto viewport + recorrido). */

.mcss-viewport {
	position: relative;
	width: 100%;
	overflow: hidden;
	display: flex;
	align-items: center;
	box-sizing: border-box;
	/* Defaults sensatos si se usa imagen de fondo (Elementor los
	   sobrescribe si el usuario elige otros valores). */
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center center;
}

/* Pin nativo con position:sticky (sin retemblor en móvil/tablet: lo fija
   el navegador en el hilo del compositor). */
.mcss-showcase.is-horizontal .mcss-viewport {
	position: sticky;
	top: 0;
	height: var(--mcss-vh);
}

/* Fallbacks si el entorno rompe sticky (los activa el JS):
   - .mcss-pin-fixed: el JS pone position:fixed solo durante el recorrido
     (también estable en compositor → sin retemblor).
   - .mcss-pin-manual: translateY por frame (último recurso, solo si hay
     transform/filter en ancestros que rompen también fixed). */
.mcss-showcase.is-horizontal.mcss-pin-fixed .mcss-viewport,
.mcss-showcase.is-horizontal.mcss-pin-manual .mcss-viewport {
	position: absolute;
	top: 0;
	left: 0;
	/* Capa compuesta permanente. Antes solo el modo manual la tenía.
	   En modo fixed, alternar position (''  ↔ 'fixed') sin este hint
	   puede hacer que WebKit (Safari iOS) destruya y vuelva a crear
	   la capa GPU en cada cruce del pin, lo que se ve como un
	   parpadeo o un fotograma en negro justo en ese instante.
	   Mantener la capa siempre creada evita esa recreación. */
	will-change: transform;
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
}

/* iOS/Android: evita que la barra del navegador tape la sección. */
@supports (height: 100dvh) {
	.mcss-showcase.is-horizontal .mcss-viewport {
		height: min(var(--mcss-vh), 100dvh);
	}
}

.mcss-track {
	display: flex;
	align-items: center;
	gap: var(--mcss-gap);
	will-change: transform;
}

/* ---------- Línea divisoria vertical entre elementos (horizontal) --------
   Centrada por defecto en el hueco entre tarjetas; --mcss-line-offset
   permite desplazarla (responsive). La opacidad la controla el JS con
   --mcss-line-op, ligada al mismo progreso de aparición de cada tarjeta
   (0 → 1 según entra en pantalla con el scroll).

   El alto se define con --mcss-divider-height en una unidad de viewport
   (vh) en vez de en % del propio elemento: un % ahí se calcularía sobre
   la altura de CADA tarjeta/panel (intro, tarjeta, outro...), que no es
   igual entre todas, y por eso la línea antes de un panel más bajo (p.ej.
   el outro, al final) salía más corta que el resto. Con vh todas las
   líneas miden lo mismo sin importar el contenido que tengan al lado. */
.mcss-showcase.is-horizontal .mcss-track > * {
	position: relative;
}

.mcss-divider-yes .mcss-showcase.is-horizontal .mcss-track > * + *::before {
	content: "";
	position: absolute;
	left: calc((var(--mcss-gap) / -2) + var(--mcss-line-offset, 0px));
	top: 50%;
	transform: translateY(-50%);
	display: var(--mcss-divider-display-desktop, block);
	height: min(var(--mcss-divider-height, 85vh), 100vh);
	width: var(--mcss-divider-thickness, 1px);
	background: var(--mcss-divider);
	opacity: var(--mcss-line-op, 1);
	pointer-events: none;
}

/* ---------- Paneles de texto ---------- */
.mcss-panel {
	flex: 0 0 auto;
	width: var(--mcss-panel-w);
	/* Red de seguridad que NO pisa el ancho elegido por el usuario. */
	min-width: min(280px, var(--mcss-panel-w));
}

.mcss-intro__heading,
.mcss-outro__text {
	margin: 0 0 1.2rem;
	line-height: 1.12;
	letter-spacing: -0.02em;
}

.mcss-intro__text {
	margin: 0;
	line-height: 1.55;
	font-size: 1.05rem;
}

.mcss-outro__link,
.mcss-card__cta {
	display: inline-block;
	margin-top: 1.4rem;
	font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
	font-size: 0.85rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	text-decoration: none !important;
	color: inherit;
	padding-bottom: 4px;
	transition: opacity 0.3s ease;
}

.mcss-cta-underline-yes .mcss-card__cta,
.mcss-cta-underline-yes .mcss-outro__link {
	border-bottom: 1px solid currentColor;
}

.mcss-card__cta:hover,
.mcss-outro__link:hover {
	opacity: 0.6;
}

/* ---------- Estilo "Botón" para el enlace del proyecto / panel final ----------
   Alternativa al subrayado: convierte el enlace de texto en un botón. Se
   activa con "Estilo del enlace" → Botón. Las variables (fondo, radio,
   relleno, borde) las escriben los controles de Elementor; con valores
   por defecto sensatos aquí por si algo no llega a fijarse. */
.mcss-link-style-button .mcss-card__cta,
.mcss-link-style-button .mcss-outro__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-bottom: none !important;
	padding: var(--mcss-link-btn-padding, 10px 22px);
	background: var(--mcss-link-btn-bg, rgba(27, 27, 27, 0.06));
	border-radius: var(--mcss-link-btn-radius, 8px);
	border: var(--mcss-link-btn-border-w, 1px) solid var(--mcss-link-btn-border-color, rgba(27, 27, 27, 0.16));
	transition: background-color 0.3s ease, border-color 0.3s ease, opacity 0.3s ease;
}

/* En botón, el hover cambia de fondo en vez de desvanecerse (eso tiene
   sentido para texto subrayado, no para un botón). */
.mcss-link-style-button .mcss-card__cta:hover,
.mcss-link-style-button .mcss-outro__link:hover {
	opacity: 1;
	background: var(--mcss-link-btn-bg-hover, rgba(27, 27, 27, 0.12));
}

/* Variante "Cristal esmerilado": añade el desenfoque de lo que hay detrás.
   Necesita que el fondo elegido tenga transparencia para notarse. */
.mcss-link-btnstyle-glass .mcss-card__cta,
.mcss-link-btnstyle-glass .mcss-outro__link {
	-webkit-backdrop-filter: blur(var(--mcss-link-btn-blur, 12px)) saturate(1.4);
	backdrop-filter: blur(var(--mcss-link-btn-blur, 12px)) saturate(1.4);
}

/* ---------- Tarjetas ---------- */
.mcss-card {
	flex: 0 0 auto;
	width: var(--mcss-card-w);
	/* Red de seguridad que NO pisa el ancho elegido por el usuario. */
	min-width: min(280px, var(--mcss-card-w));
}

.mcss-card__media {
	position: relative;
	width: 100%;
	aspect-ratio: var(--mcss-media-ratio);
	background: var(--mcss-card-bg);
	overflow: hidden;
	transform: translateZ(0);
}

.mcss-card__media img,
.mcss-card__media video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.mcss-hoverzoom-yes .mcss-card:hover .mcss-card__media img,
.mcss-hoverzoom-yes .mcss-card:hover .mcss-card__media video {
	transform: scale(1.045);
}

.mcss-card__media::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
}

.mcss-card__medialink {
	position: absolute;
	inset: 0;
	z-index: 3;
}

.mcss-card__badges {
	position: absolute;
	z-index: 4;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	max-width: calc(100% - var(--mcss-badge-offset, 18px) * 2);
	pointer-events: none;
}

.mcss-badges-top-left .mcss-card__badges     { top: var(--mcss-badge-offset, 18px); left: var(--mcss-badge-offset, 18px); }
.mcss-badges-top-right .mcss-card__badges    { top: var(--mcss-badge-offset, 18px); right: var(--mcss-badge-offset, 18px); justify-content: flex-end; }
.mcss-badges-bottom-left .mcss-card__badges  { bottom: var(--mcss-badge-offset, 18px); left: var(--mcss-badge-offset, 18px); }
.mcss-badges-bottom-right .mcss-card__badges { bottom: var(--mcss-badge-offset, 18px); right: var(--mcss-badge-offset, 18px); justify-content: flex-end; }

.mcss-card__badge {
	display: inline-block;
	padding: 6px 14px;
	font-size: 0.78rem;
	letter-spacing: 0.06em;
	line-height: 1.4;
	white-space: nowrap;
}

.mcss-card__title {
	margin: 28px 0 0;
	line-height: 1.1;
	letter-spacing: -0.02em;
}

.mcss-card__footer {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 24px;
	margin-top: 12px;
}

.mcss-card__desc {
	margin: 0;
	line-height: 1.5;
}

/* Todas las tarjetas se centran verticalmente según SU PROPIA altura
   total (imagen + título + descripción). Si la descripción de un
   proyecto ocupa 1 línea y la de otro ocupa 2 (según lo larga que sea
   el texto y el ancho de tarjeta elegido), esa tarjeta mide menos y
   queda descuadrada frente a las demás al centrarse cada una por su
   lado. Reservando siempre el alto de 2 líneas (quepa el texto en 1 o
   en 2) todas las tarjetas miden lo mismo pase lo que pase con el
   ancho o la longitud del texto. Solo aplica en escritorio: en modo
   apilado las tarjetas van en columna y no necesitan alinearse entre
   sí. */
.mcss-showcase.is-horizontal .mcss-card__desc {
	min-height: calc(1.5em * 2);
}

.mcss-card__footer .mcss-card__cta {
	margin-top: 4px;
	white-space: nowrap;
	flex: 0 0 auto;
}

/* ---------- Animación de aparición ---------- */
.mcss-anim .mcss-reveal {
	opacity: var(--mcss-reveal-opacity);
	transform: translateY(var(--mcss-reveal-y)) scale(var(--mcss-reveal-scale));
	transition:
		opacity var(--mcss-reveal-dur) var(--mcss-reveal-ease),
		transform var(--mcss-reveal-dur) var(--mcss-reveal-ease);
	transition-delay: var(--mcss-stagger, 0ms);
	will-change: transform, opacity;
}

.mcss-anim .mcss-reveal.is-visible {
	opacity: 1;
	transform: translateY(0) scale(1);
}

@media (prefers-reduced-motion: reduce) {
	.mcss-anim .mcss-reveal {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
	}
}

/* ---------- "Gran final": efecto de cierre del panel final ----------
   Activado con el interruptor "Gran final" en Elementor (clase
   mcss-finale-yes en el wrapper). El JS escribe --mcss-fin-p (0 → 1)
   según avanza el tramo extra de scroll; todo lo de abajo se conduce
   con esa variable, así que retroceder el scroll deshace el efecto.
   Solo actúa en modo horizontal (es donde existe el recorrido fijado). */

/* El panel final ocupa todo el ancho de pantalla, con padding generoso. */
.mcss-finale-yes .mcss-showcase.is-horizontal .mcss-outro {
	position: relative;
	z-index: 0;
	/* Compensación exacta (la mide el JS del layout real) para que el
	   panel quede clavado al borde físico de la pantalla. `left`
	   relativo no altera las medidas del carril. */
	left: var(--mcss-fin-shift, 0px);
	width: 100vw;
	/* Pantalla completa también en alto: así el padding de 4 lados es
	   un margen real respecto a los bordes de la pantalla. Unidad
	   ESTABLE (nada de dvh): las unidades dinámicas cambian cuando la
	   barra del navegador móvil aparece/desaparece en pleno scroll y
	   hacían saltar el panel (retiemble). */
	min-height: var(--mcss-vh, 100vh);
	box-sizing: border-box;
	/* Padding de 4 lados, ajustable por dispositivo desde Elementor
	   (--mcss-fin-pad-user); vacío = automático. */
	padding: var(--mcss-fin-pad-user, clamp(24px, 7vw, 110px));
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
}

/* Fondo del gran final: capa del color elegido que aparece con el
   progreso. Vive en el marco fijado (.mcss-viewport), que mide EXACTA-
   MENTE la pantalla mientras la sección está clavada: cubre el 100%
   sin franjas. Nunca debe vivir dentro del carril: cualquier cosa que
   sobresalga ahí cuenta como contenido en la medida del recorrido
   (scrollWidth) e infla el viaje del carrusel, descolocándolo todo.
   El carril va por encima (z-index como flex item) para que el texto y
   el botón queden sobre el color. */
.mcss-finale-yes .mcss-showcase.is-horizontal .mcss-viewport::after {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--mcss-fin-bg, #1B1B1B);
	opacity: var(--mcss-fin-p, 0);
	z-index: 0;
	pointer-events: none;
}

.mcss-finale-yes .mcss-showcase.is-horizontal .mcss-track {
	z-index: 1;
}

/* Titular: centrado, funde del color inicial (--mcss-fin-txt0, lo
   escribe el control "Color del título" existente) al final, y crece
   hasta el múltiplo elegido. El ancho base se limita a "pantalla ÷
   múltiplo": así, al alcanzar el crecimiento máximo, el titular ocupa
   exactamente el ancho completo de la pantalla (menos el padding) sin
   salirse jamás por los bordes, sea cual sea el múltiplo elegido.
   transform-origin centro-abajo: crece simétricamente hacia los lados
   y hacia arriba, nunca hacia abajo, para no solaparse con el botón
   que tiene debajo (transform no reserva sitio en el layout). */
.mcss-finale-yes .mcss-showcase.is-horizontal .mcss-outro__text {
	max-width: calc((100vw - var(--mcss-fin-pad-l, clamp(24px, 7vw, 110px)) - var(--mcss-fin-pad-r, clamp(24px, 7vw, 110px))) / var(--mcss-fin-scale, 2));
	overflow-wrap: break-word;
	/* !important: si el color se eligió desde los Colores Globales de
	   Elementor, Elementor añade !important a su propia regla (para que
	   el kit de color siempre gane); sin esto, el titular se quedaba
	   siempre en el color inicial, sin fundir nunca al final. */
	color: color-mix(in srgb, var(--mcss-fin-txt0, #2A2A2A), var(--mcss-fin-txt, #F5F1EA) calc(var(--mcss-fin-p, 0) * 100%)) !important;
	transform: scale(calc(1 + (var(--mcss-fin-scale, 2) - 1) * var(--mcss-fin-p, 0)));
	transform-origin: center bottom;
}

/* Botón: quieto de tamaño y centrado en el panel; sus colores funden
   hacia los finales. Los colores iniciales (--mcss-fin-btn*0) los
   escriben los controles de color existentes del botón del panel
   final. */
.mcss-finale-yes .mcss-showcase.is-horizontal .mcss-outro__link {
	align-self: center;
	color: color-mix(in srgb, var(--mcss-fin-btntxt0, #1B1B1B), var(--mcss-fin-btntxt, #1B1B1B) calc(var(--mcss-fin-p, 0) * 100%));
	background-color: color-mix(in srgb, var(--mcss-fin-btnbg0, transparent), var(--mcss-fin-btnbg, #F5F1EA) calc(var(--mcss-fin-p, 0) * 100%));
}

/* !important también en hover, mismo motivo que el titular (color
   global de Elementor con !important propio en el color de hover).
   Sin exigir etiqueta <a>: cuando el botón no tiene URL asignada se
   renderiza como <span>, y una regla que exija <a> no coincide nunca. */
.mcss-finale-yes .mcss-showcase.is-horizontal .mcss-outro__link:hover {
	color: color-mix(in srgb, var(--mcss-fin-btntxth0, var(--mcss-fin-btntxt0, #1B1B1B)), var(--mcss-fin-btntxth, #1B1B1B) calc(var(--mcss-fin-p, 0) * 100%)) !important;
	background-color: color-mix(in srgb, var(--mcss-fin-btnbgh0, var(--mcss-fin-btnbg0, transparent)), var(--mcss-fin-btnbgh, #FFFFFF) calc(var(--mcss-fin-p, 0) * 100%)) !important;
}

/* ---------- Modo apilado (tablet / móvil) ---------- */
.mcss-showcase.is-stacked .mcss-track {
	flex-direction: column;
	align-items: stretch;
	transform: none !important;
	gap: var(--mcss-gap-stacked, 56px);
}

.mcss-showcase.is-stacked .mcss-viewport {
	position: relative;
	height: auto;
	overflow: visible;
	transform: none !important;
	padding-left: var(--mcss-pad-stacked, 20px) !important;
	padding-right: var(--mcss-pad-stacked, 20px) !important;
}

.mcss-showcase.is-stacked .mcss-panel,
.mcss-showcase.is-stacked .mcss-card {
	width: 100%;
	max-width: 100%;
	min-width: 0;
}

.mcss-showcase.is-stacked .mcss-card__footer {
	flex-direction: column;
	gap: 10px;
}

.mcss-showcase.is-stacked .mcss-card__desc {
	max-width: 100% !important;
}

/* Línea divisoria horizontal entre tarjetas apiladas: mismo interruptor
   (--mcss-divider) y clase (.mcss-divider-yes) que en horizontal, para
   que también se vea en móvil/tablet. --mcss-line-offset-stacked permite
   desplazarla (responsive); por defecto centrada en el hueco. */
.mcss-divider-yes .mcss-showcase.is-stacked .mcss-track > * + * {
	position: relative;
}

.mcss-divider-yes .mcss-showcase.is-stacked .mcss-track > * + *::before {
	content: "";
	position: absolute;
	top: calc((var(--mcss-gap-stacked, 56px) / -2) + var(--mcss-line-offset-stacked, 0px));
	left: 0;
	right: 0;
	height: var(--mcss-divider-thickness, 1px);
	background: var(--mcss-divider);
	opacity: 0;
	transition: opacity 700ms ease;
	pointer-events: none;
}

/* Visibilidad por dispositivo dentro del modo apilado: mismo corte de
   767px que ya se usa más abajo para los ajustes específicos de móvil. */
@media (min-width: 768px) {
	.mcss-divider-yes .mcss-showcase.is-stacked .mcss-track > * + *::before {
		display: var(--mcss-divider-display-tablet, block);
	}
}

@media (max-width: 767px) {
	.mcss-divider-yes .mcss-showcase.is-stacked .mcss-track > * + *::before {
		display: var(--mcss-divider-display-mobile, block);
	}
}

/* Aparece (0 → 100% opacidad) junto con la tarjeta a la que precede,
   según entra en pantalla con el scroll (misma detección que .is-visible). */
.mcss-divider-yes .mcss-showcase.is-stacked .mcss-track > .is-visible + *::before,
.mcss-divider-yes .mcss-showcase.is-stacked .mcss-track > *.is-visible::before {
	opacity: 1;
}

/* Si el reveal está desactivado, las líneas se muestran siempre. */
.mcss-divider-yes .mcss-showcase.is-stacked:not(.mcss-anim) .mcss-track > * + *::before {
	opacity: 1;
}

/* ---------- Ajustes móviles en modo horizontal ---------- */
@media (max-width: 767px) {
	.mcss-showcase.is-horizontal .mcss-card,
	.mcss-showcase.is-horizontal .mcss-panel {
		min-width: 0;
	}

	.mcss-showcase.is-horizontal .mcss-card__footer {
		flex-direction: column;
		gap: 8px;
	}

	.mcss-showcase.is-horizontal .mcss-card__footer .mcss-card__cta {
		margin-top: 8px;
	}

	.mcss-showcase.is-horizontal .mcss-card__title {
		margin-top: 18px;
	}
}

/* ---------- Editor de Elementor ---------- */
.elementor-editor-active .mcss-showcase .mcss-reveal {
	opacity: 1;
	transform: none;
}