/**
 * Studiosjohan Motion
 *
 * Reglas de apoyo. El ocultado anti-CLS NO vive aqui: va inline en el <head>
 * bajo html.sjm-js, para que sin JS o con prefers-reduced-motion el contenido
 * se vea desde el primer pintado. Aqui no hay ni un opacity:0 incondicional.
 */

/* --- Split text ---------------------------------------------------------- */

.sjm-split {
	display: inline;
}

.sjm-split__line {
	display: block;
}

.sjm-split__line--mask {
	overflow: hidden;
	/* El padding evita que se corten acentos y descendentes (g, j, p, q). */
	padding-bottom: 0.12em;
	margin-bottom: -0.12em;
}

.sjm-split__word,
.sjm-split__char {
	display: inline-block;
	will-change: transform, opacity;
	/* Necesario para que rotationX y rotationY no se vean planas. */
	transform-style: preserve-3d;
	backface-visibility: visible;
}

/* --- Marquee ------------------------------------------------------------- */

.sjm-marquee {
	position: relative;
	overflow: hidden;
}

.sjm-marquee__track {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	width: max-content;
	will-change: transform;
}

.sjm-marquee__track > * {
	flex: 0 0 auto;
}

/**
 * Boton de pausa. WCAG 2.1 AA criterio 2.2.2: todo movimiento automatico de
 * mas de 5 s necesita un mecanismo para detenerlo, y el hover no basta en
 * pantallas tactiles ni para teclado sin puntero.
 */
.sjm-marquee__toggle {
	position: absolute;
	top: 50%;
	right: 0;
	z-index: 2;
	display: grid;
	place-items: center;
	width: 2rem;
	height: 2rem;
	padding: 0;
	transform: translateY(-50%);
	border: 1px solid currentColor;
	border-radius: 999px;
	background: transparent;
	color: inherit;
	font-size: 0.7rem;
	line-height: 1;
	opacity: 0.35;
	cursor: pointer;
	transition: opacity 0.2s ease;
}

.sjm-marquee__toggle:hover,
.sjm-marquee__toggle:focus-visible {
	opacity: 1;
}

.sjm-marquee__toggle:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

/* --- Parallax ------------------------------------------------------------ */

.sjm-parallax {
	overflow: hidden;
}

.sjm-parallax__inner {
	will-change: transform;
}

/* --- Magnetico ----------------------------------------------------------- */

.sjm-magnetic__target {
	display: inline-block;
	will-change: transform;
}

/* --- Respeto explicito a la preferencia del sistema ---------------------- */

@media (prefers-reduced-motion: reduce) {
	.sjm-marquee__track,
	.sjm-parallax__inner,
	.sjm-magnetic__target,
	.sjm-split__word,
	.sjm-split__char {
		will-change: auto;
		transform: none !important;
		animation: none !important;
	}
}

/* --- Botones ------------------------------------------------------------- */

/**
 * Todo el hover vive aqui, no en JavaScript: un efecto que dispara en cada
 * movimiento del raton no debe pasar por el hilo principal. Como consecuencia
 * util, :focus-visible se comporta igual que :hover sin codigo extra.
 */

.sjm-btn {
	--sjm-btn-speed: 0.35s;
	--sjm-btn-color: rgba(0, 0, 0, 0.28);

	position: relative;
	z-index: 0;
	isolation: isolate;
	overflow: hidden;
	transition: transform var(--sjm-btn-speed) cubic-bezier(0.2, 0.7, 0.3, 1),
		box-shadow var(--sjm-btn-speed) ease,
		letter-spacing var(--sjm-btn-speed) ease;
}

/* Relleno que barre */

.sjm-btn[data-sjm-btn="fill"]::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: var(--sjm-btn-color);
	transform-origin: var(--sjm-btn-origin, left center);
	transform: var(--sjm-btn-from, scaleX(0));
	transition: transform var(--sjm-btn-speed) cubic-bezier(0.2, 0.7, 0.3, 1);
}

.sjm-btn[data-sjm-btn="fill"][data-sjm-btn-dir="left"]   { --sjm-btn-origin: left center;  --sjm-btn-from: scaleX(0); }
.sjm-btn[data-sjm-btn="fill"][data-sjm-btn-dir="right"]  { --sjm-btn-origin: right center; --sjm-btn-from: scaleX(0); }
.sjm-btn[data-sjm-btn="fill"][data-sjm-btn-dir="top"]    { --sjm-btn-origin: center top;   --sjm-btn-from: scaleY(0); }
.sjm-btn[data-sjm-btn="fill"][data-sjm-btn-dir="bottom"] { --sjm-btn-origin: center bottom; --sjm-btn-from: scaleY(0); }
.sjm-btn[data-sjm-btn="fill"][data-sjm-btn-dir="center"] { --sjm-btn-origin: center center; --sjm-btn-from: scale(0); }

.sjm-btn[data-sjm-btn="fill"]:hover::before,
.sjm-btn[data-sjm-btn="fill"]:focus-visible::before {
	transform: scale(1);
}

/* Texto que sube y se releva */

.sjm-btn[data-sjm-btn="slide"] .sjm-btn__label,
.sjm-btn[data-sjm-btn="slide"].sjm-btn__label {
	position: relative;
	display: inline-block;
	overflow: hidden;
	vertical-align: bottom;
}

.sjm-btn__ghost {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	transform: translateY(100%);
	transition: transform var(--sjm-btn-speed) cubic-bezier(0.2, 0.7, 0.3, 1);
}

.sjm-btn[data-sjm-btn="slide"] .sjm-btn__label > :not(.sjm-btn__ghost) {
	display: inline-block;
}

.sjm-btn[data-sjm-btn="slide"]:hover .sjm-btn__ghost,
.sjm-btn[data-sjm-btn="slide"]:focus-visible .sjm-btn__ghost {
	transform: translateY(0);
}

/* Subrayado que se dibuja */

.sjm-btn[data-sjm-btn="underline"] {
	overflow: visible;
}

.sjm-btn[data-sjm-btn="underline"]::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -0.15em;
	height: 2px;
	background: var(--sjm-btn-color, currentColor);
	transform-origin: var(--sjm-btn-origin, left center);
	transform: scaleX(0);
	transition: transform var(--sjm-btn-speed) cubic-bezier(0.2, 0.7, 0.3, 1);
}

.sjm-btn[data-sjm-btn="underline"][data-sjm-btn-dir="right"]  { --sjm-btn-origin: right center; }
.sjm-btn[data-sjm-btn="underline"][data-sjm-btn-dir="center"] { --sjm-btn-origin: center center; }

.sjm-btn[data-sjm-btn="underline"]:hover::after,
.sjm-btn[data-sjm-btn="underline"]:focus-visible::after {
	transform: scaleX(1);
}

/* Elevacion */

.sjm-btn[data-sjm-btn="lift"] {
	overflow: visible;
}

.sjm-btn[data-sjm-btn="lift"]:hover,
.sjm-btn[data-sjm-btn="lift"]:focus-visible {
	transform: translateY(-3px);
	box-shadow: 0 10px 24px rgba(0, 0, 0, 0.18);
}

/* Separacion de letras */

.sjm-btn[data-sjm-btn="expand"] {
	overflow: visible;
}

.sjm-btn[data-sjm-btn="expand"]:hover,
.sjm-btn[data-sjm-btn="expand"]:focus-visible {
	letter-spacing: 0.06em;
}

/**
 * Con menos movimiento pedido: se conserva el cambio de color, que es lo que
 * informa de que el elemento reacciona, y se elimina todo desplazamiento.
 */
@media (prefers-reduced-motion: reduce) {
	.sjm-btn,
	.sjm-btn::before,
	.sjm-btn::after,
	.sjm-btn__ghost {
		transition-duration: 0.01ms !important;
	}

	.sjm-btn[data-sjm-btn="lift"]:hover,
	.sjm-btn[data-sjm-btn="lift"]:focus-visible {
		transform: none;
	}

	.sjm-btn[data-sjm-btn="expand"]:hover,
	.sjm-btn[data-sjm-btn="expand"]:focus-visible {
		letter-spacing: normal;
	}

	.sjm-btn__ghost {
		display: none;
	}
}

/* Color del texto mientras dura el efecto (relleno oscuro sobre texto oscuro) */

.sjm-btn[data-sjm-btn="fill"]:hover,
.sjm-btn[data-sjm-btn="fill"]:focus-visible,
.sjm-btn[data-sjm-btn="swap"]:hover,
.sjm-btn[data-sjm-btn="swap"]:focus-visible {
	color: var(--sjm-btn-text, inherit);
	transition: color var(--sjm-btn-speed) ease;
}

/* Borde que se dibuja: dos trazos que recorren el perimetro */

.sjm-btn[data-sjm-btn="border"] {
	overflow: visible;
}

.sjm-btn[data-sjm-btn="border"]::before,
.sjm-btn[data-sjm-btn="border"]::after {
	content: "";
	position: absolute;
	inset: 0;
	border: 2px solid var(--sjm-btn-color, currentColor);
	pointer-events: none;
	transition: transform var(--sjm-btn-speed) ease;
}

.sjm-btn[data-sjm-btn="border"]::before {
	border-left: 0;
	border-right: 0;
	transform: scaleX(0);
}

.sjm-btn[data-sjm-btn="border"]::after {
	border-top: 0;
	border-bottom: 0;
	transform: scaleY(0);
	transition-delay: calc(var(--sjm-btn-speed) * 0.5);
}

.sjm-btn[data-sjm-btn="border"]:hover::before,
.sjm-btn[data-sjm-btn="border"]:focus-visible::before,
.sjm-btn[data-sjm-btn="border"]:hover::after,
.sjm-btn[data-sjm-btn="border"]:focus-visible::after {
	transform: scale(1);
}

/* Brillo que cruza en diagonal */

.sjm-btn[data-sjm-btn="shine"]::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: -80%;
	width: 55%;
	z-index: 1;
	background: linear-gradient(
		100deg,
		transparent 0%,
		rgba(255, 255, 255, 0.38) 50%,
		transparent 100%
	);
	transform: skewX(-18deg);
	transition: left calc(var(--sjm-btn-speed) * 1.8) ease;
	pointer-events: none;
}

.sjm-btn[data-sjm-btn="shine"]:hover::before,
.sjm-btn[data-sjm-btn="shine"]:focus-visible::before {
	left: 130%;
}

/* Flecha que avanza */

.sjm-btn[data-sjm-btn="arrow"] {
	overflow: visible;
}

.sjm-btn__arrow {
	display: inline-block;
	margin-left: 0.5em;
	transition: transform var(--sjm-btn-speed) cubic-bezier(0.2, 0.7, 0.3, 1);
}

.sjm-btn[data-sjm-btn="arrow"]:hover .sjm-btn__arrow,
.sjm-btn[data-sjm-btn="arrow"]:focus-visible .sjm-btn__arrow {
	transform: translateX(0.35em);
}

/* Inversion de color */

.sjm-btn[data-sjm-btn="swap"]::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: var(--sjm-btn-color, rgba(0, 0, 0, 0.16));
	opacity: 0;
	transition: opacity var(--sjm-btn-speed) ease;
}

.sjm-btn[data-sjm-btn="swap"]:hover::before,
.sjm-btn[data-sjm-btn="swap"]:focus-visible::before {
	opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
	.sjm-btn__arrow,
	.sjm-btn[data-sjm-btn="shine"]::before {
		display: none;
	}
}

/* --- Correcciones de maquetacion sobre botones de Elementor -------------- */

/**
 * Elementor monta el boton como <a> con un <span> envoltorio en flex.
 * Cualquier cosa que anadamos tiene que respetar ese flujo o el boton se
 * parte en dos lineas.
 */
.sjm-btn {
	white-space: nowrap;
}

.sjm-btn[data-sjm-btn="arrow"] .elementor-button-content-wrapper {
	display: inline-flex;
	align-items: center;
	flex-wrap: nowrap;
}

.sjm-btn .sjm-btn__arrow {
	flex: 0 0 auto;
	line-height: 1;
}

/* --- Borde al pasar el cursor ------------------------------------------- */

/**
 * Se dibuja con box-shadow hacia dentro, no con border: un border real
 * cambiaria el tamano del boton al pasar el cursor y movería lo de al lado.
 */
.sjm-btn[style*="--sjm-btn-bd"]:hover,
.sjm-btn[style*="--sjm-btn-bd"]:focus-visible {
	box-shadow: inset 0 0 0 var(--sjm-btn-bdw, 2px) var(--sjm-btn-bd);
}

.sjm-btn[data-sjm-btn="lift"][style*="--sjm-btn-bd"]:hover,
.sjm-btn[data-sjm-btn="lift"][style*="--sjm-btn-bd"]:focus-visible {
	box-shadow: inset 0 0 0 var(--sjm-btn-bdw, 2px) var(--sjm-btn-bd),
		0 10px 24px rgba(0, 0, 0, 0.18);
}

/* --- Circulo que crece --------------------------------------------------- */

.sjm-btn[data-sjm-btn="circle"]::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: -1;
	width: 120%;
	aspect-ratio: 1;
	border-radius: 50%;
	background: var(--sjm-btn-color);
	transform: translate(-50%, -50%) scale(0);
	transition: transform var(--sjm-btn-speed) cubic-bezier(0.2, 0.7, 0.3, 1);
}

.sjm-btn[data-sjm-btn="circle"]:hover::before,
.sjm-btn[data-sjm-btn="circle"]:focus-visible::before {
	transform: translate(-50%, -50%) scale(1);
}

/* --- Cierre desde arriba y abajo a la vez -------------------------------- */

.sjm-btn[data-sjm-btn="split"]::before,
.sjm-btn[data-sjm-btn="split"]::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	height: 50%;
	z-index: -1;
	background: var(--sjm-btn-color);
	transition: transform var(--sjm-btn-speed) cubic-bezier(0.2, 0.7, 0.3, 1);
}

.sjm-btn[data-sjm-btn="split"]::before {
	top: 0;
	transform: translateY(-100%);
}

.sjm-btn[data-sjm-btn="split"]::after {
	bottom: 0;
	transform: translateY(100%);
}

.sjm-btn[data-sjm-btn="split"]:hover::before,
.sjm-btn[data-sjm-btn="split"]:focus-visible::before,
.sjm-btn[data-sjm-btn="split"]:hover::after,
.sjm-btn[data-sjm-btn="split"]:focus-visible::after {
	transform: translateY(0);
}

/* --- Empuje horizontal del texto ---------------------------------------- */

.sjm-btn[data-sjm-btn="push"] .sjm-btn__label {
	position: relative;
	display: inline-block;
	overflow: hidden;
	vertical-align: bottom;
}

.sjm-btn[data-sjm-btn="push"] .sjm-btn__ghost {
	transform: translateX(-110%);
	transition: transform var(--sjm-btn-speed) cubic-bezier(0.2, 0.7, 0.3, 1);
}

.sjm-btn[data-sjm-btn="push"]:hover .sjm-btn__ghost,
.sjm-btn[data-sjm-btn="push"]:focus-visible .sjm-btn__ghost {
	transform: translateX(0);
}

@media (prefers-reduced-motion: reduce) {
	.sjm-btn[data-sjm-btn="circle"]::before,
	.sjm-btn[data-sjm-btn="split"]::before,
	.sjm-btn[data-sjm-btn="split"]::after {
		transition-duration: 0.01ms !important;
	}
}

/* --- Imagenes ------------------------------------------------------------ */

/**
 * Los efectos de zoom necesitan recortar el desbordamiento en el contenedor,
 * no en la imagen, o la foto se sale de su hueco.
 */
.sjm-img-clip {
	overflow: hidden;
}

.sjm-img-hover {
	transition: transform var(--sjm-img-speed, 0.6s) cubic-bezier(0.2, 0.7, 0.3, 1);
	will-change: transform;
}

.sjm-img-clip:hover .sjm-img-hover,
.sjm-img-clip:focus-within .sjm-img-hover {
	transform: scale(var(--sjm-img-scale, 1.12));
}

.sjm-img-gray {
	filter: grayscale(1);
}

/* La transicion se activa un frame despues, para que no haya parpadeo
   de color a blanco y negro al cargar la pagina. */
.sjm-img-gray--live {
	transition: filter var(--sjm-img-speed, 0.6s) ease;
}

.sjm-img-clip:hover .sjm-img-gray,
.sjm-img-clip:focus-within .sjm-img-gray,
.sjm-img-gray:hover {
	filter: grayscale(0);
}

/* La flecha admite icono de fuente o SVG */

.sjm-btn__arrow i,
.sjm-btn__arrow svg,
.sjm-btn__arrow img {
	display: inline-block;
	width: 1em;
	height: 1em;
	font-size: inherit;
	line-height: 1;
	vertical-align: -0.1em;
}

@media (prefers-reduced-motion: reduce) {
	.sjm-img-hover,
	.sjm-img-gray {
		transition-duration: 0.01ms !important;
	}

	.sjm-img-clip:hover .sjm-img-hover {
		transform: none;
	}
}

/**
 * Mascara por pieza para el texto troceado.
 *
 * El padding compensado es lo que evita comerse las colas de g, j, p, q, y
 * y las tildes: el envoltorio es un poco mas alto que la linea y se recoloca
 * con un margen negativo, asi que recorta el desplazamiento pero no la letra.
 */
.sjm-split__mask {
	display: inline-block;
	overflow: hidden;
	vertical-align: bottom;
	padding-bottom: 0.16em;
	margin-bottom: -0.16em;
	padding-top: 0.06em;
	margin-top: -0.06em;
}

/* El SVG que devuelve Elementor no hereda el color por si solo. */
.sjm-btn__arrow svg {
	fill: currentColor;
}

/* ======================================================================
   LOTE 1 - Estilos de boton adicionales
   ====================================================================== */

/* --- Iris que se abre (recorte circular, no escala de fondo) ------------- */

.sjm-btn[data-sjm-btn="iris"]::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: var(--sjm-btn-color);
	clip-path: circle(0% at 50% 50%);
	transition: clip-path var(--sjm-btn-speed) cubic-bezier(0.2, 0.7, 0.3, 1);
}

.sjm-btn[data-sjm-btn="iris"]:hover::before,
.sjm-btn[data-sjm-btn="iris"]:focus-visible::before {
	clip-path: circle(75% at 50% 50%);
}

/* --- Relleno por bloques ------------------------------------------------- */

.sjm-btn__pixels {
	position: absolute;
	inset: 0;
	z-index: -1;
	display: flex;
	flex-wrap: wrap;
	pointer-events: none;
}

.sjm-btn__pixels > span {
	flex: 0 0 16.6667%;
	height: 25%;
	background: var(--sjm-btn-color);
	opacity: 0;
	transition: opacity calc(var(--sjm-btn-speed) * 0.5) linear;
}

.sjm-btn[data-sjm-btn="pixel"]:hover .sjm-btn__pixels > span,
.sjm-btn[data-sjm-btn="pixel"]:focus-visible .sjm-btn__pixels > span {
	opacity: 1;
}

/* --- Texto que se parte por la mitad ------------------------------------- */

.sjm-btn[data-sjm-btn="splitText"] .sjm-btn__label {
	position: relative;
	display: inline-block;
	overflow: hidden;
	vertical-align: bottom;
}

/* La copia entra por abajo mientras el original sale por arriba. */
.sjm-btn[data-sjm-btn="splitText"] .sjm-btn__ghost {
	transform: translateY(100%);
	transition: transform var(--sjm-btn-speed) cubic-bezier(0.7, 0, 0.2, 1);
}

.sjm-btn[data-sjm-btn="splitText"] .sjm-btn__label > :not(.sjm-btn__ghost) {
	display: inline-block;
	transition: transform var(--sjm-btn-speed) cubic-bezier(0.7, 0, 0.2, 1);
}

.sjm-btn[data-sjm-btn="splitText"]:hover .sjm-btn__label > :not(.sjm-btn__ghost),
.sjm-btn[data-sjm-btn="splitText"]:focus-visible .sjm-btn__label > :not(.sjm-btn__ghost) {
	transform: translateY(-100%);
}

.sjm-btn[data-sjm-btn="splitText"]:hover .sjm-btn__ghost,
.sjm-btn[data-sjm-btn="splitText"]:focus-visible .sjm-btn__ghost {
	transform: translateY(0);
}

/* --- Texto en bucle continuo -------------------------------------------- */

.sjm-btn[data-sjm-btn="textLoop"] .sjm-btn__label {
	position: relative;
	display: inline-block;
	overflow: hidden;
	vertical-align: bottom;
}

.sjm-btn[data-sjm-btn="textLoop"] .sjm-btn__ghost {
	transform: translateX(100%);
}

/**
 * El bucle solo corre mientras el cursor esta encima, asi que nunca supera
 * los 5 s de movimiento automatico: no entra en el criterio WCAG 2.2.2.
 */
.sjm-btn[data-sjm-btn="textLoop"]:hover .sjm-btn__label > :not(.sjm-btn__ghost),
.sjm-btn[data-sjm-btn="textLoop"]:focus-visible .sjm-btn__label > :not(.sjm-btn__ghost) {
	animation: sjm-loop-out calc(var(--sjm-btn-speed) * 3) linear infinite;
}

.sjm-btn[data-sjm-btn="textLoop"]:hover .sjm-btn__ghost,
.sjm-btn[data-sjm-btn="textLoop"]:focus-visible .sjm-btn__ghost {
	animation: sjm-loop-in calc(var(--sjm-btn-speed) * 3) linear infinite;
}

@keyframes sjm-loop-out {
	from { transform: translateX(0); }
	to   { transform: translateX(-100%); }
}

@keyframes sjm-loop-in {
	from { transform: translateX(100%); }
	to   { transform: translateX(0); }
}

/* --- Glitch -------------------------------------------------------------- */

.sjm-btn[data-sjm-btn="glitch"] {
	overflow: visible;
}

.sjm-btn[data-sjm-btn="glitch"] [data-sjm-text] {
	position: relative;
	display: inline-block;
}

.sjm-btn[data-sjm-btn="glitch"] [data-sjm-text]::before,
.sjm-btn[data-sjm-btn="glitch"] [data-sjm-text]::after {
	content: attr(data-sjm-text);
	position: absolute;
	inset: 0;
	opacity: 0;
	pointer-events: none;
}

.sjm-btn[data-sjm-btn="glitch"] [data-sjm-text]::before {
	color: #00e5ff;
	transform: translateX(-2px);
}

.sjm-btn[data-sjm-btn="glitch"] [data-sjm-text]::after {
	color: #ff2e63;
	transform: translateX(2px);
}

.sjm-btn[data-sjm-btn="glitch"]:hover [data-sjm-text]::before,
.sjm-btn[data-sjm-btn="glitch"]:focus-visible [data-sjm-text]::before {
	animation: sjm-glitch-a calc(var(--sjm-btn-speed) * 1.2) steps(2, end) infinite;
}

.sjm-btn[data-sjm-btn="glitch"]:hover [data-sjm-text]::after,
.sjm-btn[data-sjm-btn="glitch"]:focus-visible [data-sjm-text]::after {
	animation: sjm-glitch-b calc(var(--sjm-btn-speed) * 1.2) steps(2, end) infinite;
}

/* Sin destellos ni parpadeos: solo desplazamiento lateral (WCAG 2.3.1). */
@keyframes sjm-glitch-a {
	0%, 100% { opacity: 0.85; transform: translateX(-2px); }
	50%      { opacity: 0.85; transform: translateX(2px); }
}

@keyframes sjm-glitch-b {
	0%, 100% { opacity: 0.85; transform: translateX(2px); }
	50%      { opacity: 0.85; transform: translateX(-2px); }
}

/* --- Destellos ----------------------------------------------------------- */

.sjm-btn[data-sjm-btn="sparkle"] {
	overflow: visible;
}

.sjm-btn__sparks {
	position: absolute;
	inset: 0;
	pointer-events: none;
}

.sjm-btn__sparks > span {
	position: absolute;
	width: 6px;
	height: 6px;
	background: var(--sjm-btn-color, currentColor);
	clip-path: polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%);
	opacity: 0;
	transform: scale(0);
}

.sjm-btn[data-sjm-btn="sparkle"]:hover .sjm-btn__sparks > span,
.sjm-btn[data-sjm-btn="sparkle"]:focus-visible .sjm-btn__sparks > span {
	animation: sjm-spark calc(var(--sjm-btn-speed) * 2.4) ease-in-out infinite;
}

@keyframes sjm-spark {
	0%, 100% { opacity: 0; transform: scale(0) rotate(0deg); }
	50%      { opacity: 1; transform: scale(1) rotate(90deg); }
}

/* --- Capsula que se abre ------------------------------------------------- */

.sjm-btn[data-sjm-btn="capsule"] .elementor-button-content-wrapper {
	display: inline-flex;
	align-items: center;
	flex-wrap: nowrap;
}

.sjm-btn[data-sjm-btn="capsule"] .sjm-btn__arrow {
	display: inline-grid;
	place-items: center;
	width: 0;
	margin-left: 0;
	overflow: hidden;
	border-radius: 999px;
	background: var(--sjm-btn-color);
	transition: width var(--sjm-btn-speed) cubic-bezier(0.2, 0.7, 0.3, 1),
		margin-left var(--sjm-btn-speed) cubic-bezier(0.2, 0.7, 0.3, 1);
}

.sjm-btn[data-sjm-btn="capsule"]:hover .sjm-btn__arrow,
.sjm-btn[data-sjm-btn="capsule"]:focus-visible .sjm-btn__arrow {
	width: 1.9em;
	height: 1.9em;
	margin-left: 0.6em;
}

/* --- Fusion invertida ---------------------------------------------------- */

/**
 * Una cortina blanca sube y el boton pasa a modo de fusion, asi que el texto
 * se invierte contra lo que tenga debajo. Solo en hover: dejarlo permanente
 * rompe el contraste del boton en reposo.
 */
.sjm-btn[data-sjm-btn="blend"]::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: #fff;
	transform: scaleY(0);
	transform-origin: bottom;
	transition: transform var(--sjm-btn-speed) cubic-bezier(0.2, 0.7, 0.3, 1);
}

.sjm-btn[data-sjm-btn="blend"]:hover::before,
.sjm-btn[data-sjm-btn="blend"]:focus-visible::before {
	transform: scaleY(1);
}

.sjm-btn[data-sjm-btn="blend"]:hover,
.sjm-btn[data-sjm-btn="blend"]:focus-visible {
	mix-blend-mode: difference;
}

/* --- Esquinas que se redondean ------------------------------------------ */

.sjm-btn[data-sjm-btn="morph"] {
	transition: border-radius var(--sjm-btn-speed) cubic-bezier(0.2, 0.7, 0.3, 1),
		transform var(--sjm-btn-speed) ease;
}

.sjm-btn[data-sjm-btn="morph"]:hover,
.sjm-btn[data-sjm-btn="morph"]:focus-visible {
	border-radius: 999px;
}

/* --- Escala del contenido ------------------------------------------------ */

.sjm-btn[data-sjm-btn="scaleUp"] .elementor-button-content-wrapper {
	display: inline-block;
	transition: transform var(--sjm-btn-speed) cubic-bezier(0.2, 0.7, 0.3, 1);
}

.sjm-btn[data-sjm-btn="scaleUp"]:hover .elementor-button-content-wrapper,
.sjm-btn[data-sjm-btn="scaleUp"]:focus-visible .elementor-button-content-wrapper {
	transform: scale(1.08);
}

/* --- Respeto a prefers-reduced-motion en todo el lote ------------------- */

@media (prefers-reduced-motion: reduce) {
	.sjm-btn__sparks,
	.sjm-btn[data-sjm-btn="glitch"] [data-sjm-text]::before,
	.sjm-btn[data-sjm-btn="glitch"] [data-sjm-text]::after {
		display: none;
	}

	.sjm-btn[data-sjm-btn="textLoop"]:hover .sjm-btn__label > *,
	.sjm-btn[data-sjm-btn="textLoop"]:focus-visible .sjm-btn__label > * {
		animation: none;
	}

	.sjm-btn[data-sjm-btn="scaleUp"]:hover .elementor-button-content-wrapper {
		transform: none;
	}
}

/* ======================================================================
   LOTE 2 - Adornos del texto
   ====================================================================== */

/* --- Marcador que barre por detras -------------------------------------- */

/**
 * z-index negativo para que la banda pase POR DETRAS de la letra. Si fuera
 * por delante habria que jugar con opacidades y el contraste del texto se
 * volveria impredecible.
 */
.sjm-split__marker {
	position: absolute;
	left: -0.1em;
	right: -0.1em;
	bottom: 0.05em;
	height: 0.42em;
	z-index: -1;
	background: rgba(253, 196, 72, 0.55);
	transform: scaleX(0);
	transform-origin: left center;
	pointer-events: none;
}

/* --- Trazo que se rellena ------------------------------------------------ */

/**
 * El texto real conserva su color: lo que se anima es una capa superpuesta
 * que se recorta de izquierda a derecha. Si el JS fallara a medias, el
 * titular sigue leyendose con su color definitivo.
 */
.sjm-split--stroke {
	position: relative;
	-webkit-text-stroke: 1px var(--sjm-stroke-color, currentColor);
	color: transparent;
}

.sjm-split--stroke::after {
	content: attr(aria-label);
	position: absolute;
	inset: 0;
	color: var(--sjm-stroke-color, currentColor);
	-webkit-text-stroke: 0;
	clip-path: inset(0 calc(100% - var(--sjm-stroke-fill, 0%)) 0 0);
	pointer-events: none;
}

/**
 * Sin JavaScript no hay variable --sjm-stroke-fill ni clase: el titular se
 * ve con su color normal. El hueco solo existe mientras la animacion corre.
 */
@media (prefers-reduced-motion: reduce) {
	.sjm-split__marker {
		transform: scaleX(1);
	}

	.sjm-split--stroke {
		-webkit-text-stroke: 0;
		color: inherit;
	}

	.sjm-split--stroke::after {
		display: none;
	}
}

/* ======================================================================
   LOTE 3 - Composiciones con scroll, pulso y botones atados al scroll
   ====================================================================== */

/* --- Tarjetas que se apilan --------------------------------------------- */

/**
 * El apilado lo hace position:sticky, no JavaScript. Sin JS la seccion se
 * lee como una lista normal de tarjetas, que es el comportamiento correcto.
 */
.sjm-stack__item.sjm-stack__item {
	position: sticky;
	top: var(--sjm-stack-top, 0);
	will-change: transform;
}

/* --- Avance paso a paso -------------------------------------------------- */

.sjm-stepper.sjm-stepper {
	/* Clase duplicada: Elementor pone display:flex en .elementor-widget-wrap
	   con la misma especificidad y su hoja carga despues. */
	display: flex;
	flex-direction: column;
	justify-content: center;
}

/* --- Contenidos que se relevan ------------------------------------------- */

/**
 * En el relevo todos los hijos comparten hueco. El primero marca la altura
 * y el resto se superpone: asi la seccion no da un salto al montarse.
 *
 * NO se impone el display del contenedor, y es a proposito.
 *
 * La version anterior usaba `display: grid` + `grid-area: 1/1`. Pero cuando el
 * contenedor es una columna de Elementor, quien manda es
 * `.elementor:not(.elementor-bc-flex-widget) .elementor-widget-wrap { display: flex }`,
 * con especificidad 0,3,0. Ganar esa pelea obliga a repetir la clase tres o
 * cuatro veces, y se vuelve a romper en cuanto Elementor toque ese selector.
 *
 * Asi que la superposicion no depende del display: el primer item se queda en
 * el flujo —y es quien da la altura— y los demas se colocan encima en
 * absoluto. Funciona igual con flex, con grid y con block.
 */
.sjm-switcher.sjm-switcher {
	position: relative;
}

.sjm-switcher__item.sjm-switcher__item {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
}

.sjm-switcher__item.sjm-switcher__item:first-child {
	position: relative;
}

/* --- Galeria en 3D ------------------------------------------------------- */

/* Mismo criterio que el relevo: sin depender del display del contenedor. */
.sjm-gallery3d.sjm-gallery3d {
	position: relative;
	perspective: 1200px;
	/* Lo que mide la tarjeta mas aire: con `60vh` fijo, una tarjeta de
	   360 px se salia en cuanto la ventana era baja. */
	min-height: calc(var(--sjm-anillo-alto, 360px) + 90px);
	overflow: hidden;
}

/**
 * El anillo es lo unico que gira: un solo elemento animado.
 *
 * Ocupa toda la caja en absoluto en vez de centrarse con grid. Sus tarjetas ya
 * se colocan solas respecto a el, y asi el centrado no depende de que el padre
 * sea una rejilla. Ojo: aqui NO se puede usar transform para centrar, porque
 * GSAP anima rotationY sobre este mismo nodo y se pisarian.
 */
.sjm-gallery3d__ring {
	position: absolute;
	inset: 0;
	transform-style: preserve-3d;
	will-change: transform;
}

/**
 * La tarjeta del anillo necesita tamaño PROPIO.
 *
 * Al colocarla en absoluto pierde el ancho que le daba su sitio en la
 * columna, y sin ancho ni alto se encoge a lo que mida su contenido: el
 * anillo se veia como seis astillas de 18 px, no como seis fotos. Es el
 * mismo fallo que tuvieron las fotos que atraviesan y los paneles del
 * carrusel, por el mismo motivo.
 *
 * Triple clase porque el alto que Elementor escribe para cada elemento
 * vale lo mismo que dos y se carga despues de este fichero.
 */
.sjm-gallery3d__item.sjm-gallery3d__item.sjm-gallery3d__item {
	position: absolute;
	top: 50%;
	left: 50%;
	translate: -50% -50%;
	width: var(--sjm-anillo-ancho, 280px);
	height: var(--sjm-anillo-alto, 360px);
	min-height: 0;
	margin: 0;
	overflow: hidden;
	backface-visibility: hidden;
}

/* --- Zona que cambia de color -------------------------------------------- */

.sjm-zone {
	transition: background-color 0.6s ease, color 0.6s ease;
}

.sjm-zone--on {
	background-color: var(--sjm-zone-bg, inherit);
	color: var(--sjm-zone-fg, inherit);
}

/**
 * El cambio de color debe arrastrar al texto de dentro, pero NUNCA a los
 * botones: si un CTA hereda el color de la zona pierde su contraste propio.
 */
.sjm-zone--on :is(h1, h2, h3, h4, h5, h6, p, li, span:not([class*="elementor-button"])) {
	color: inherit;
}

/* --- Cabecera que se adapta ---------------------------------------------- */

.sjm-adaptive {
	transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
	transform-origin: top center;
}

.sjm-adaptive--on {
	transform: scaleY(var(--sjm-adaptive-shrink, 0.75));
	box-shadow: 0 6px 24px rgba(0, 0, 0, 0.12);
}

/**
 * Contraste con la seccion de detras.
 *
 * Se pinta el color en la cabecera y en TODO lo que lleve dentro que no
 * tenga color propio: un menu de Elementor pinta sus enlaces con su propia
 * regla, y sin `currentColor` heredado se quedarian del color de siempre.
 */
/*
 * Aqui el `!important` es necesario, no pereza.
 *
 * El color de los enlaces del menu lo pinta el kit global de Elementor con
 * selectores mas especificos que cualquiera que se escriba desde fuera:
 * medido en la miniatura, el enlace seguia en rgb(204,51,102) con la clase
 * ya aplicada. Y este efecto no es decorativo —existe justo para que el
 * menu se lea sobre la seccion que tiene detras—, asi que tiene que ganar.
 * Solo actua cuando el usuario enciende «Adaptar el color al fondo».
 */
.sjm-adaptive--sobre-oscuro,
.sjm-adaptive--sobre-oscuro a,
.sjm-adaptive--sobre-oscuro .elementor-heading-title,
.sjm-adaptive--sobre-oscuro .elementor-item {
	color: var(--sjm-adaptive-oscuro, #ffffff) !important;
	transition: color 0.3s ease;
}

.sjm-adaptive--sobre-claro,
.sjm-adaptive--sobre-claro a,
.sjm-adaptive--sobre-claro .elementor-heading-title,
.sjm-adaptive--sobre-claro .elementor-item {
	color: var(--sjm-adaptive-claro, #14162b) !important;
	transition: color 0.3s ease;
}

/* Los SVG del logotipo y los iconos siguen al texto. */
.sjm-adaptive--sobre-oscuro svg,
.sjm-adaptive--sobre-claro svg {
	fill: currentColor;
}

/* El contenido no debe deformarse cuando la cabecera se comprime. */
.sjm-adaptive--on > * {
	transform: scaleY(calc(1 / var(--sjm-adaptive-shrink, 0.75)));
	transform-origin: top center;
}

/* --- Pulso de fondo ------------------------------------------------------ */

.sjm-pulse {
	position: relative;
	z-index: 0;
}

.sjm-pulse::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: -1;
	width: 100%;
	aspect-ratio: 1;
	border-radius: 50%;
	background: var(--sjm-pulse-color, currentColor);
	opacity: 0.18;
	transform: translate(-50%, -50%) scale(1);
	/* `forwards` deja el halo en el ultimo fotograma —invisible—. Sin el,
	   al acabar los latidos volvia a su estado estatico y se quedaba un
	   circulo de color fijo en la pagina. */
	animation: sjm-pulse 1.6s ease-out var(--sjm-pulse-cycles, 3) forwards;
	pointer-events: none;
}

/**
 * Sin bucle infinito a proposito: se detiene tras los ciclos indicados, que
 * es la manera limpia de no incumplir WCAG 2.2.2 (movimiento automatico de
 * mas de 5 s necesita mecanismo de pausa).
 */
@keyframes sjm-pulse {
	0%   { transform: translate(-50%, -50%) scale(1); opacity: 0.18; }
	70%  { transform: translate(-50%, -50%) scale(var(--sjm-pulse-size, 1.8)); opacity: 0; }
	100% { transform: translate(-50%, -50%) scale(1); opacity: 0; }
}

/* --- Boton que se rellena con el scroll de la pagina --------------------- */

.sjm-btn[data-sjm-btn="scrollFill"]::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: var(--sjm-btn-color);
	clip-path: inset(0 calc(100% - var(--sjm-btn-fill, 0%)) 0 0);
	transition: clip-path 0.15s linear;
}

/* --- Columna que se queda pegada (sticky scroll) ------------------------- */

/**
 * `align-self: flex-start` no es opcional.
 *
 * Una columna de Elementor se estira a toda la altura de la fila, y algo
 * que ya ocupa todo el alto no tiene por donde desplazarse: el sticky no
 * se notaba en absoluto. Encogiendola a su contenido, si.
 */
.sjm-sticky.sjm-sticky {
	position: sticky;
	top: var(--sjm-sticky-top, 40px);
	align-self: flex-start;
}

/* Apilado en movil: pegar una columna cuando van una debajo de otra solo
   sirve para tapar la siguiente. */
@media screen and (max-width: 767px) {
	.sjm-sticky.sjm-sticky {
		position: static;
	}
}

/* --- Boton que se queda pegado ------------------------------------------- */

.sjm-btn[data-sjm-btn="sticky"] {
	position: sticky;
	top: var(--sjm-btn-sticky-top, 16px);
	z-index: 10;
}

/* --- Respeto a prefers-reduced-motion ----------------------------------- */

/**
 * Con menos movimiento: nada se fija, nada gira, nada late. Las secciones
 * vuelven a leerse en vertical, que siempre es la version accesible.
 */
@media (prefers-reduced-motion: reduce) {
	.sjm-stack__item {
		position: static;
		transform: none !important;
	}

	/* Con menos movimiento pedido no hay relevo: los contenidos se leen uno
	   detras de otro, en el flujo normal. */
	.sjm-switcher__item.sjm-switcher__item {
		position: static;
		opacity: 1 !important;
	}

	.sjm-gallery3d__item {
		transform: none !important;
	}

	.sjm-adaptive,
	.sjm-adaptive--on,
	.sjm-adaptive--on > * {
		transform: none;
	}

	.sjm-pulse::before {
		animation: none;
		opacity: 0;
	}

	.sjm-btn[data-sjm-btn="sticky"] {
		position: static;
	}
}

/* ======================================================================
   LOTES 4 y 5 - Acordeon de fotos, crecimiento a pantalla completa
                 y componentes de interfaz
   ====================================================================== */

/* --- Acordeon de fotos --------------------------------------------------- */

/**
 * Resuelto con flex-grow y :hover. Sin JavaScript en el movimiento, y
 * :focus-within hace que el acordeon responda igual al teclado: se tabula
 * entre paneles y el que recibe el foco se abre.
 */
.sjm-accordion {
	display: flex;
	flex-wrap: nowrap;
	gap: 8px;
	overflow: hidden;
}

.sjm-accordion__panel {
	flex: 1 1 0;
	min-width: 0;
	overflow: hidden;
	transition: flex-grow 0.5s cubic-bezier(0.2, 0.7, 0.3, 1);
}

.sjm-accordion__panel img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.sjm-accordion:hover .sjm-accordion__panel,
.sjm-accordion:focus-within .sjm-accordion__panel {
	flex-grow: 0.6;
}

.sjm-accordion .sjm-accordion__panel:hover,
.sjm-accordion .sjm-accordion__panel:focus-within {
	flex-grow: 3;
}

.sjm-accordion__panel:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: -2px;
}

/* En pantallas estrechas el acordeon no cabe: se apila. */
@media screen and (max-width: 767px) {
	.sjm-accordion {
		flex-wrap: wrap;
	}

	.sjm-accordion__panel,
	.sjm-accordion:hover .sjm-accordion__panel,
	.sjm-accordion .sjm-accordion__panel:hover {
		flex: 1 1 100%;
	}
}

/* --- Linea que se dibuja ------------------------------------------------- */

.sjm-line-host {
	position: relative;
}

.sjm-line {
	display: block;
	width: 100%;
	background: currentColor;
	transform: scaleX(0);
	transform-origin: left center;
	pointer-events: none;
}

.sjm-line--top {
	margin-bottom: 1.2em;
}

.sjm-line--bottom {
	margin-top: 1.2em;
}

/* --- Barra de progreso de lectura --------------------------------------- */

.sjm-progress-host {
	position: relative;
}

.sjm-progress {
	display: block;
	width: 0;
	background: currentColor;
	pointer-events: none;
	transition: width 0.12s linear;
}

/**
 * Fijada al borde superior de la ventana. z-index alto pero por debajo de
 * los 100000 que usan los modales de Elementor, para no taparlos.
 */
.sjm-progress--sticky {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 9990;
	max-width: 100vw;
}

/* --- Respeto a prefers-reduced-motion ----------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.sjm-accordion__panel {
		transition: none;
	}

	.sjm-line {
		transform: scaleX(1);
	}

	.sjm-progress {
		transition: none;
	}
}
/* --- Texto en trazado (lote 6) ------------------------------------------ */

/**
 * Un SVG en linea con solo viewBox y sin dimensiones se colapsa a cero en
 * muchos contextos de maquetacion. Hay que darle ancho explicito.
 */
/**
 * aspect-ratio derivado del viewBox: sin el, un SVG con viewBox y height:auto
 * puede quedarse en cero de alto y el titular colapsa sobre lo que tenga
 * debajo. Con la proporcion fijada, el alto sale del ancho siempre.
 */
.sjm-path {
	display: block;
	width: 100%;
	max-width: 100%;
	height: auto;
	aspect-ratio: 1000 / 400;
	overflow: visible;
}

.sjm-path[viewBox="0 0 1000 1000"] {
	aspect-ratio: 1 / 1;
}

/**
 * El texto del SVG no hereda la tipografia del titular por su cuenta: hay
 * que pasarle familia, tamano, grosor y color uno a uno. Asi el trazado
 * respeta los estilos globales del kit en vez de caer en el serif por
 * defecto del navegador.
 */
.sjm-path text {
	fill: currentColor;
	font-family: inherit;
	font-size: inherit;
	font-weight: inherit;
	letter-spacing: inherit;
}

/* El circulo completo necesita quedar cuadrado y contenido. */
.sjm-path[viewBox$="1000 1000"] {
	max-width: min(100%, 520px);
	margin-inline: auto;
}

/* --- Desplazamiento horizontal ------------------------------------------ */

/**
 * Va en la hoja principal, no en la del cursor: esa solo se carga cuando hay
 * cursor personalizado activo, y el desplazamiento horizontal es una
 * composicion de seccion independiente.
 */
.sjm-horizontal {
	overflow: hidden;
}

/* El carril: en fila y sin envolver, pase lo que pase con el tema. */
.sjm-horizontal__track.sjm-horizontal__track {
	display: flex;
	flex-wrap: nowrap;
}

.sjm-horizontal__panel.sjm-horizontal__panel {
	flex: 0 0 100%;
	will-change: transform;
}

@media (prefers-reduced-motion: reduce) {
	.sjm-horizontal__panel {
		transform: none !important;
	}
}

/* --- Lista que se enfoca con el scroll ---------------------------------- */

/**
 * En reposo NO hay desenfoque: los valores los escribe el JavaScript. Si el
 * script no llega a correr, la lista se lee nitida y entera, que es lo unico
 * aceptable cuando lo que se desenfoca es texto.
 */
.sjm-focuslist__item {
	transition: filter 0.18s linear, opacity 0.18s linear, transform 0.18s linear;
	will-change: filter, opacity;
}

@media (prefers-reduced-motion: reduce) {
	.sjm-focuslist__item {
		filter: none !important;
		opacity: 1 !important;
		transform: none !important;
		transition: none;
	}
}

/* --- Widgets de composicion ---------------------------------------------- */

/**
 * Estos son los unicos elementos que pinta el plugin por su cuenta.
 *
 * El alto lo manda el panel (`min-height`), no el contenido: es justo lo que
 * hace que la composicion ocupe lo que tu digas en vez de una pantalla entera
 * por elemento.
 */
.sjm-comp__item {
	position: relative;
	display: flex;
	align-items: flex-end;
	overflow: hidden;
	background-color: #3827c8;
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
	color: #fff;
}

/* Solo la pila necesita aire entre elementos: en el anillo y en la fila los
   coloca el motor, y un margen ahi los descuadraria. */
.sjm-comp--stack .sjm-comp__item + .sjm-comp__item {
	margin-top: 16px;
}

.sjm-comp__velo {
	position: absolute;
	inset: 0;
	background-color: #14162b;
	opacity: 0.45;
	pointer-events: none;
}

.sjm-comp__texto {
	position: relative;
	z-index: 1;
	padding: 40px 44px;
	width: 100%;
}

.sjm-comp__titulo {
	font-size: 30px;
	font-weight: 700;
	line-height: 1.15;
	color: #fff;
}

.sjm-comp__parrafo {
	margin-top: 8px;
	font-size: 16px;
	line-height: 1.6;
	color: #e7e6f5;
}

/**
 * El enlace cubre el elemento entero.
 *
 * Envolver el bloque en un <a> romperia las composiciones que colocan los
 * hijos con transform. Asi el elemento se pulsa entero y el texto sigue
 * siendo texto.
 */
.sjm-comp__enlace {
	position: absolute;
	inset: 0;
	z-index: 2;
}

/* Por si el tema no la trae: el enlace necesita un nombre accesible. */
.sjm-comp__enlace .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}

/**
 * Como se ven la galeria y el carrusel ANTES de que corra el efecto.
 *
 * Sin esto son elementos a tamaño completo uno debajo de otro: con tres a
 * pantalla completa eso son tres pantallas de altura antes de que el motor
 * los recoja, y mientras bajas hacia ellos se ve fatal. En fila y recortado
 * ocupa lo justo, y ademas es el aspecto que queda en movil y en modo Kit
 * Digital, donde estas dos composiciones no se aplican.
 */
.sjm-comp--gallery3d,
.sjm-comp--horizontal {
	display: flex;
	flex-wrap: nowrap;
	gap: 16px;
	overflow: hidden;
}

.sjm-comp--gallery3d .sjm-comp__item {
	flex: 0 0 clamp(240px, 26%, 380px);
}

/**
 * Tamaño de las tarjetas del anillo.
 *
 * Al pasar al anillo, el motor las pone en `position: absolute` y con eso
 * pierden el ancho que tenian como elementos de una fila: se quedan con el
 * de su contenido. Medido en la pagina de Johan: **2 970 px de ancho** cada
 * una. De ahi que la galeria se viera destrozada.
 */
.sjm-comp--gallery3d .sjm-gallery3d__item {
	height: auto;
	/* Relativo al CONTENEDOR, no a la pantalla: al estrechar el bloque las
	   tarjetas se estrechan con el y el anillo sigue cuadrando. */
	width: clamp(170px, 22%, 320px);
}

/* --- Trazo SVG ----------------------------------------------------------- */

.sjm-draw svg {
	display: block;
	max-width: 100%;
	height: auto;
	overflow: visible;
}

/* --- Tarjeta que gira ---------------------------------------------------- */

.sjm-flip {
	perspective: 1400px;
	min-height: 320px;
}

.sjm-flip__interior {
	position: relative;
	width: 100%;
	min-height: inherit;
	transform-style: preserve-3d;
	transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.3, 1);
}

/**
 * `:focus-within` ademas de `:hover`.
 *
 * El dorso lleva las condiciones y el boton de solicitar. Si solo girara con el
 * raton, quien navega con teclado no llegaria nunca a ellos.
 */
.sjm-flip:hover .sjm-flip__interior,
.sjm-flip:focus-within .sjm-flip__interior {
	transform: rotateY(180deg);
}

.sjm-flip--x:hover .sjm-flip__interior,
.sjm-flip--x:focus-within .sjm-flip__interior {
	transform: rotateX(180deg);
}

.sjm-flip__cara {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: flex-end;
	overflow: hidden;
	border-radius: 16px;
	backface-visibility: hidden;
	background-size: cover;
	background-position: center center;
	color: #fff;
}

.sjm-flip__cara--dorso {
	transform: rotateY(180deg);
}

.sjm-flip--x .sjm-flip__cara--dorso {
	transform: rotateX(180deg);
}

.sjm-flip__velo {
	position: absolute;
	inset: 0;
	background: rgba(20, 22, 43, 0.45);
}

.sjm-flip__texto {
	position: relative;
	z-index: 1;
	padding: 28px 30px;
	width: 100%;
}

.sjm-flip__titulo {
	font-size: 24px;
	font-weight: 700;
	line-height: 1.15;
}

.sjm-flip__parrafo {
	margin-top: 8px;
	font-size: 15px;
	line-height: 1.6;
	opacity: 0.9;
}

.sjm-flip__boton {
	display: inline-block;
	margin-top: 16px;
	padding: 11px 24px;
	border-radius: 8px;
	background: #fdc448;
	color: #14162b;
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
}

/* En tactil no hay cursor que pase por encima: se muestran las dos caras. */
@media (hover: none) {
	.sjm-flip__interior { transform: none !important; }
	.sjm-flip__cara { position: relative; inset: auto; }
	.sjm-flip__cara--dorso { transform: none; margin-top: 12px; }
}

/* --- Indicador de valor -------------------------------------------------- */

.sjm-gauge {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	color: #3827c8;
}

.sjm-gauge__aro {
	position: relative;
	width: clamp(140px, 18vw, 220px);
}

.sjm-gauge__aro svg { display: block; width: 100%; height: auto; }
.sjm-gauge__pista { stroke: #e0e0ee; }

.sjm-gauge__cifra {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	font-size: clamp(24px, 3.4vw, 38px);
	font-weight: 700;
	color: currentColor;
}

.sjm-gauge__etiqueta {
	font-size: 15px;
	color: #5f6179;
	text-align: center;
}

/* --- Linea de tiempo ----------------------------------------------------- */

.sjm-tl {
	position: relative;
	margin: 0;
	padding: 0 0 0 54px;
	list-style: none;
	color: #3827c8;
}

/* La linea es un pseudoelemento: ni un div de mas ni un elemento que un lector
   de pantalla tenga que anunciar. */
.sjm-tl::before {
	content: "";
	position: absolute;
	top: 8px;
	bottom: 8px;
	left: 17px;
	width: 2px;
	background: currentColor;
	opacity: 0.25;
}

.sjm-tl__paso {
	position: relative;
	padding-bottom: 30px;
}

.sjm-tl__paso:last-child { padding-bottom: 0; }

.sjm-tl__marca {
	position: absolute;
	top: 0;
	left: -54px;
	display: grid;
	place-items: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: currentColor;
	color: #fff;
	font-size: 13px;
	font-weight: 700;
}

.sjm-tl__titulo {
	font-size: 20px;
	font-weight: 700;
	color: #14162b;
}

.sjm-tl__texto {
	margin-top: 4px;
	font-size: 15.5px;
	line-height: 1.6;
	color: #5f6179;
}

/* --- Pasador de testimonios ---------------------------------------------- */

.sjm-slider {
	position: relative;
	padding: 34px 38px 40px;
	border-radius: 16px;
	background: #eeeef7;
}

.sjm-slider__mando {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 22px;
	font-size: 13px;
	color: #5f6179;
}

.sjm-slider__flecha {
	width: 34px;
	height: 34px;
	border: 1px solid #cfcfe4;
	border-radius: 8px;
	background: transparent;
	color: #14162b;
	font-size: 15px;
	line-height: 1;
	cursor: pointer;
}

.sjm-slider__flecha:hover,
.sjm-slider__flecha:focus-visible {
	background: #fff;
}

.sjm-slider__ante { margin-left: 6px; }

/* Con JS las laminas se superponen; el alto lo sostiene la pista. */
.sjm-slider--listo .sjm-slider__pista {
	position: relative;
	min-height: 210px;
}

.sjm-slider__lamina {
	margin: 0;
	padding-top: 18px;
}

.sjm-slider__linea {
	display: block;
	width: 100%;
	height: 2px;
	margin-bottom: 18px;
	background: #3827c8;
	transform-origin: left center;
}

.sjm-slider__cita {
	margin: 0;
	font-size: clamp(19px, 2.2vw, 26px);
	line-height: 1.4;
	color: #14162b;
}

.sjm-slider__firma {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-top: 22px;
	font-size: 14px;
	color: #5f6179;
}

.sjm-slider__foto {
	width: 42px;
	height: 42px;
	border-radius: 50%;
	object-fit: cover;
}

.sjm-slider__firma strong { display: block; color: #14162b; }
.sjm-slider__firma em { font-style: normal; }

/**
 * La caja del anillo, a la medida de sus tarjetas.
 *
 * La perspectiva AGRANDA lo que tiene delante: con 1 200 px y un radio de
 * 477, la tarjeta de frente se proyectaba a 664 px dentro de una caja de
 * 540 y se cortaba por arriba y por abajo. Subiendo la perspectiva la
 * deformacion baja, y la caja se calcula a partir del alto que se haya
 * elegido en el panel en vez de un 60 % de la pantalla fijo.
 */
.sjm-comp--gallery3d {
	perspective: 2000px;
	min-height: calc(var(--sjm-alto, 400px) * 1.45);
}

/* --- Fotos que atraviesan ------------------------------------------------ */

/**
 * La caja ocupa la pantalla entera.
 *
 * Es lo que evita el hueco en blanco: al fijar un bloque mas bajo que la
 * ventana, alrededor se ve el fondo de la seccion y parece espacio muerto.
 * Ocupando la pantalla, lo que se queda quieto ES la pantalla.
 */
.sjm-fly.sjm-fly {
	position: relative;
	display: grid;
	place-items: center;
	min-height: 100vh;
	overflow: hidden;
}

/* El bloque del centro se queda quieto y las fotos le pasan por detras. */
.sjm-fly > *:not(.sjm-fly__foto) {
	position: relative;
	z-index: 2;
}

.sjm-fly__centro {
	max-width: 620px;
	margin: 0 auto;
	padding: 0 20px;
	text-align: center;
}

.sjm-fly__antetitulo {
	margin-bottom: 14px;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

.sjm-fly__titulo {
	margin: 0 0 16px;
	font-size: clamp(28px, 4.4vw, 56px);
	line-height: 1.1;
}

.sjm-fly__texto {
	max-width: 46ch;
	margin: 0 auto;
	font-size: 16px;
	line-height: 1.6;
}

.sjm-fly__boton {
	display: inline-block;
	margin-top: 26px;
	padding: 14px 30px;
	border-radius: 999px;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-decoration: none;
	text-transform: uppercase;
}

a.sjm-fly__boton:hover,
a.sjm-fly__boton:focus-visible {
	opacity: 0.88;
}

/**
 * La foto: tamaño fijo y previsible.
 *
 * Triple clase a proposito. El alto que Elementor escribe en la pagina para
 * cada elemento —`.elementor-element-x .sjm-comp__item`— vale lo mismo que
 * dos clases y se carga despues de este fichero, asi que ganaba: las fotos
 * salian de 400 px de alto y ancho completo, y lo que se veia era un monton
 * de tarjetas encimadas en vez de fotos volando.
 */
.sjm-fly__foto.sjm-fly__foto.sjm-fly__foto {
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 1;
	width: calc(var(--sjm-foto, 260px) * 0.74);
	height: var(--sjm-foto, 260px);
	min-height: 0;
	margin: 0;
	pointer-events: none;
	will-change: transform, opacity;
}

/*
 * El texto de la foto, a la escala de la foto. Dos clases y no tres: asi,
 * si se toca la tipografia desde el panel, manda el panel.
 */
.sjm-fly__foto .sjm-comp__titulo {
	font-size: 20px;
	line-height: 1.15;
}

.sjm-fly__foto .sjm-comp__parrafo {
	font-size: 13px;
	line-height: 1.4;
}

/* Sin JavaScript, o con menos movimiento pedido, las fotos se leen en fila. */
@media (prefers-reduced-motion: reduce) {
	.sjm-fly.sjm-fly {
		display: flex;
		flex-wrap: wrap;
		gap: 14px;
		justify-content: center;
		min-height: 0;
	}

	.sjm-fly__centro {
		flex: 1 1 100%;
	}

	.sjm-fly__foto.sjm-fly__foto.sjm-fly__foto {
		position: relative;
		top: auto;
		left: auto;
		flex: 0 1 200px;
		transform: none !important;
		opacity: 1 !important;
	}
}

/**
 * El respaldo: el bloque del centro arriba y las fotos en fila debajo.
 *
 * Se usa en el editor, donde no hay rueda que traiga las fotos. Nunca puede
 * quedarse un bloque vacio donde hay contenido.
 */
.sjm-fly--quieto.sjm-fly--quieto {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	justify-content: center;
	align-items: stretch;
	min-height: 0;
	place-items: stretch;
}

.sjm-fly--quieto .sjm-fly__centro {
	flex: 1 1 100%;
	margin-bottom: 10px;
}

.sjm-fly--quieto .sjm-comp__item.sjm-comp__item {
	position: relative;
	top: auto;
	left: auto;
	flex: 0 1 200px;
	width: auto;
	min-height: 0;
	height: var(--sjm-foto, 260px);
	transform: none;
	opacity: 1;
}

/* --- Transición de píxeles en el borde de una sección --------------------- */

/**
 * La franja va DENTRO de la sección, pegada a su borde de abajo.
 *
 * Se probó tapando la pantalla entera y no era eso: un telón a pantalla
 * completa se come el contenido de las dos secciones y se lee como un corte,
 * no como una costura. Aquí sólo se pinta la juntura.
 *
 * En reposo está oculta con `visibility`, no con `display`: así la rejilla ya
 * está medida y el primer pintado no provoca un reflujo en mitad del scroll.
 */
.sjm-pix {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 5;
	height: var(--sjm-pix-alto, 160px);
	display: grid;
	grid-template-columns: repeat(var(--sjm-pix-cols, 12), 1fr);
	grid-template-rows: repeat(var(--sjm-pix-filas, 2), 1fr);
	pointer-events: none;
	visibility: hidden;
}

.sjm-pix--activa {
	visibility: visible;
}

.sjm-pix > span {
	background-color: var(--sjm-pix-color, #14162b);
	opacity: 0;
	/*
	 * La transición corta es a propósito: suaviza el salto entre dos posiciones
	 * de rueda seguidas sin llegar a retrasar el dibujo. Más larga y la franja
	 * iría por detrás del scroll.
	 */
	transition: opacity 0.18s linear;
	will-change: opacity;
}

.sjm-pix > span.sjm-pix__on {
	opacity: 1;
}

/* Con menos movimiento pedido no hay transición: no se pierde contenido. */
@media (prefers-reduced-motion: reduce) {
	.sjm-pix {
		display: none;
	}
}