/* ------------------------------------------------------------------
   Grupo MORAJAR - estilos de los widgets propios y utilidades de marca.
   Los colores y tamanos concretos los controla Elementor desde el panel;
   aqui solo vive la estructura y los efectos que los controles no
   pueden expresar.
   ------------------------------------------------------------------ */

:root {
	--mjr-naranja: #BA5826;
	--mjr-verde: #333F48;
}

/* --- Selector de idioma ------------------------------------------- */
.mjr-lang {
	display: flex;
	align-items: center;
}

.mjr-lang__item {
	font-weight: 700;
	line-height: 1.2;
	text-decoration: none;
	padding: 2px 0;
	border-bottom: 2px solid transparent;
	transition: color .3s ease, border-color .25s ease;
}

.mjr-lang__item:focus-visible {
	outline: 3px solid currentColor;
	outline-offset: 3px;
}

/* --- Cifras clave -------------------------------------------------- */
.mjr-stats {
	display: grid;
	position: relative;
	z-index: 5;
	overflow: hidden;
}

.mjr-stats__item {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 4px;
	border-left: 1px solid rgba(32, 39, 45, .07);
	transition: background .3s ease;
}

.mjr-stats__item:first-child {
	border-left: none;
}

.mjr-stats__item:hover {
	background: #FAFAFA;
}

.mjr-stats__ico {
	display: flex;
	justify-content: center;
	align-items: center;
	margin-bottom: 14px;
	opacity: .78;
}

.mjr-stats__ico svg {
	display: block;
	width: auto;
	transition: transform .45s cubic-bezier(.22, .8, .3, 1);
}

.mjr-stats__item:hover .mjr-stats__ico svg {
	transform: translateY(-4px) scale(1.07);
}

.mjr-stats__value {
	display: block;
	line-height: 1.05;
	font-variant-numeric: tabular-nums;
}

.mjr-stats__label {
	display: block;
}

/* En cuanto la rejilla se parte en varias filas, importa la
   separacion horizontal entre filas, no entre columnas. */
@media (max-width: 1024px) {
	.mjr-stats__item {
		border-top: 1px solid rgba(32, 39, 45, .07);
	}
	.mjr-stats__item:first-child {
		border-top: none;
	}
}

/* --- Etiquetas / sectores ------------------------------------------ */
.mjr-chips {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
}

.mjr-chip {
	display: inline-block;
	line-height: 1.3;
	text-decoration: none;
	transition: transform .25s ease, background-color .25s ease, color .25s ease, border-color .25s ease;
}

.mjr-chips--pill .mjr-chip:hover {
	transform: translateY(-2px);
}

.mjr-chips--brand .mjr-chip {
	border-left-style: solid;
	border-left-color: var(--mjr-chip-accent, currentColor);
	background: none;
}

a.mjr-chip:hover,
a.mjr-chip:focus-visible {
	opacity: .75;
	transform: translateY(-2px);
}

/* --- Paises con bandera -------------------------------------------- */
.mjr-paises {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	row-gap: 8px;
}

.mjr-pais {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-weight: 600;
	transition: transform .25s ease;
}

.mjr-pais:hover {
	transform: translateY(-3px);
}

.mjr-pais svg {
	border-radius: 50%;
	box-shadow: 0 0 0 1px rgba(30, 40, 35, .15);
	flex-shrink: 0;
}

/* --- Trayectoria ---------------------------------------------------- */
.mjr-timeline {
	display: grid;
	position: relative;
	border-left: 2px solid;
}

.mjr-timeline__item {
	position: relative;
}

.mjr-timeline__item::before {
	content: "";
	position: absolute;
	top: 6px;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	/* El punto se apoya sobre la linea: la mitad del punto mas el borde. */
	left: calc((var(--mjr-timeline-indent, 26px) + 7px) * -1);
}

.mjr-timeline__year {
	display: block;
	margin: 0 0 2px;
	line-height: 1.2;
}

.mjr-timeline__text {
	margin: 0;
	max-width: 74ch;
}

/* --- Cabecera sobre el hero ---------------------------------------- */

/* La cabecera flota transparente sobre la portada y, al desplazarse,
   morajar.js le anade .mjr-scrolled: ahi pasa a fondo
   claro translucido con desenfoque y aparece el filete naranja. */
.mjr-header {
	transition: background-color .35s ease, box-shadow .35s ease, border-color .35s ease, backdrop-filter .35s ease;
}

.mjr-header.mjr-scrolled {
	background-color: rgba(255, 255, 255, .82) !important;
	backdrop-filter: blur(16px) saturate(180%);
	-webkit-backdrop-filter: blur(16px) saturate(180%);
	border-bottom-color: rgba(32, 39, 45, .1) !important;
	box-shadow: 0 8px 28px rgba(32, 39, 45, .10);
}

.mjr-header::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -1px;
	height: 2px;
	background: var(--mjr-naranja);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform .5s ease;
}

.mjr-header.mjr-scrolled::after {
	transform: scaleX(1);
}

/* Logo: version blanca sobre la portada, version en color al desplazar.
   Se superponen en la misma celda y se cruzan por opacidad. */
/* Los dos logos ocupan la MISMA celda, uno encima del otro, para que al
   cruzarse por opacidad no se mueva nada. Elementor fija display:flex en
   todos los contenedores con la misma especificidad que una clase suelta,
   asi que aqui hace falta subirla y forzar la rejilla. */
.mjr-header .mjr-logo {
	display: grid !important;
	align-items: center;
	justify-items: start;
}

.mjr-header .mjr-logo > * {
	grid-area: 1 / 1;
	transition: opacity .35s ease;
}

.mjr-header.mjr-scrolled .mjr-logo-claro {
	opacity: 0;
}

.mjr-logo-oscuro {
	opacity: 0;
}

.mjr-header.mjr-scrolled .mjr-logo-oscuro {
	opacity: 1;
}

/* Enlaces y botones de la cabecera: claros sobre la portada,
   oscuros una vez la cabecera tiene fondo. */
.mjr-header .mjr-nav-link .elementor-heading-title,
.mjr-header .mjr-lang__item {
	color: #fff;
	text-shadow: 0 1px 10px rgba(20, 26, 31, .65);
	transition: color .3s ease, text-shadow .3s ease, border-color .25s ease;
}

.mjr-header.mjr-scrolled .mjr-nav-link .elementor-heading-title {
	color: var(--mjr-verde);
	text-shadow: none;
}

/* Los colores que fija cada widget desde el panel de Elementor ganan en
   especificidad a estas reglas, por eso el estado "desplazado" necesita
   !important: es un cambio de estado, no un ajuste de diseno. */
.mjr-header.mjr-scrolled .mjr-lang__item {
	color: #4E5860 !important;
	text-shadow: none;
}

.mjr-header .mjr-nav-link .elementor-heading-title:hover,
.mjr-header .mjr-lang__item:hover {
	color: var(--mjr-naranja) !important;
}

.mjr-header.mjr-scrolled .mjr-lang__item.is-active {
	color: var(--mjr-naranja) !important;
}

.mjr-header .mjr-lang__item.is-active {
	border-bottom-color: var(--mjr-naranja);
}

.mjr-header.mjr-scrolled .mjr-cta .elementor-button {
	color: var(--mjr-naranja) !important;
	border-color: var(--mjr-naranja) !important;
}

.mjr-header.mjr-scrolled .mjr-cta .elementor-button:hover {
	background-color: var(--mjr-naranja) !important;
	color: #fff !important;
}

/* El boton de menu es blanco sobre la portada y pasa al naranja
   corporativo en cuanto la cabecera adquiere fondo claro.
   El icono es un SVG al que Elementor fija 'fill' por separado del
   'color', asi que hay que cambiar los dos o el trazo sigue blanco. */
.mjr-header.mjr-scrolled .mjr-burger .elementor-button,
.mjr-header.mjr-scrolled .mjr-burger .elementor-button svg {
	color: var(--mjr-naranja) !important;
	fill: var(--mjr-naranja) !important;
}

.mjr-header.mjr-scrolled .mjr-burger .elementor-button:hover,
.mjr-header.mjr-scrolled .mjr-burger .elementor-button:hover svg {
	background-color: var(--mjr-naranja) !important;
	color: #fff !important;
	fill: #fff !important;
}

/* Subrayado animado de los enlaces de navegacion. */
.mjr-nav-link .elementor-heading-title {
	display: inline-block;
	padding-bottom: 6px;
	border-bottom: 2px solid transparent;
	transition: color .3s ease, border-color .25s ease;
}

.mjr-nav-link .elementor-heading-title:hover {
	border-bottom-color: var(--mjr-naranja);
}

/* --- Portada -------------------------------------------------------- */

/* Entrada escalonada de los elementos del hero. */
.mjr-hero-rise {
	opacity: 0;
	transform: translateY(20px);
	animation: mjr-rise .85s cubic-bezier(.22, .8, .3, 1) forwards;
}

.mjr-hero-rise-1 { animation-delay: .12s; }
.mjr-hero-rise-2 { animation-delay: .26s; }
.mjr-hero-rise-3 { animation-delay: .42s; }
.mjr-hero-rise-4 { animation-delay: .58s; }

@keyframes mjr-rise {
	to { opacity: 1; transform: none; }
}

/* La flecha del boton principal avanza al pasar el raton. */
.mjr-btn-flecha .elementor-button-text::after {
	content: " →";
	display: inline-block;
	transition: transform .3s ease;
}

.mjr-btn-flecha:hover .elementor-button-text::after {
	transform: translateX(4px);
}

/* --- Palabra destacada dentro de un titular ------------------------- */
.mjr-accent em,
.mjr-accent .elementor-heading-title em {
	font-style: normal;
	color: var(--mjr-naranja);
}

/* --- Parrafo de entrada --------------------------------------------- */
.mjr-lead {
	max-width: 66ch;
}

.mjr-lead strong {
	color: var(--mjr-verde);
	font-weight: 700;
}

/* --- Imagenes con pie y ampliacion al pasar ------------------------- */
.mjr-figura figure {
	position: relative;
	margin: 0;
	overflow: hidden;
	border-radius: 6px;
}

.mjr-figura img {
	transition: transform .6s cubic-bezier(.22, .8, .3, 1);
}

.mjr-figura:hover img {
	transform: scale(1.04);
}

.mjr-figura figcaption.widget-image-caption {
	position: absolute;
	left: 0;
	bottom: 0;
	margin: 0;
	padding: 8px 14px;
	border-radius: 0 6px 0 6px;
	font-size: .76rem;
	font-weight: 600;
	text-align: left;
	background: var(--mjr-verde);
	color: #fff;
}

/* --- Mosaico de obra ------------------------------------------------ */
.mjr-mosaico img {
	transition: filter .4s ease, box-shadow .4s ease, transform .5s cubic-bezier(.22, .8, .3, 1);
}

.mjr-mosaico:hover img {
	filter: brightness(1.07);
	box-shadow: 0 10px 26px rgba(32, 39, 45, .22);
	transform: scale(1.02);
}

/* --- Fotografia difuminada al lado de la seccion -------------------- */

/* Elementor pinta la capa superpuesta del contenedor como un ::before que
   cubre toda la caja. Aqui se recorta a una banda en el lado derecho, se
   desenfoca y se funde con una mascara, como en la referencia. La imagen
   y su opacidad se eligen desde el panel de Elementor. */
.mjr-fondo-lateral::before {
	left: auto !important;
	right: 0;
	pointer-events: none;
}

/* El contenido tiene que quedar por encima de la fotografia. */
.mjr-fondo-lateral > .e-con-inner {
	position: relative;
	z-index: 1;
}

.mjr-fondo-trayectoria::before {
	width: 42% !important;
	filter: blur(1px);
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 70%);
	mask-image: linear-gradient(90deg, transparent, #000 70%);
}

.mjr-fondo-valores::before {
	width: 40% !important;
	filter: blur(2px);
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 60%);
	mask-image: linear-gradient(90deg, transparent, #000 60%);
}

.mjr-fondo-contacto::before {
	width: 46% !important;
	filter: blur(3px);
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 55%);
	mask-image: linear-gradient(90deg, transparent, #000 55%);
}

/* El del modelo de grupo no lleva mascara: es una silueta suelta,
   algo mayor que la seccion y desbordada por arriba y por la derecha. */
.mjr-fondo-plataforma::before {
	top: -10%;
	right: -6%;
	bottom: auto !important;
	width: 52% !important;
	height: 120% !important;
	filter: blur(1px);
}

@media (max-width: 860px) {
	/* En pantallas estrechas la banda lateral estorba la lectura:
	   pasa a ocupar todo el ancho, mucho mas tenue. */
	.mjr-fondo-lateral::before {
		width: 100% !important;
		opacity: .06 !important;
		-webkit-mask-image: none;
		mask-image: none;
	}
}

/* --- Tarjetas que se elevan ----------------------------------------- */
.mjr-card {
	transition: transform .35s cubic-bezier(.22, .8, .3, 1), box-shadow .35s ease;
}

.mjr-card:hover {
	transform: translateY(-7px);
	box-shadow: 0 18px 38px rgba(32, 39, 45, .15) !important;
}

.mjr-card .mjr-card-foto img {
	transition: transform .6s cubic-bezier(.22, .8, .3, 1);
}

.mjr-card:hover .mjr-card-foto img {
	transform: scale(1.07);
}

.mjr-card:hover .mjr-card-logo img {
	transform: scale(1.06);
}

.mjr-card-logo img {
	transition: transform .35s ease;
}

/* Tarjetas menores (pilares, ejes de vision). */
.mjr-lift {
	transition: transform .3s ease, box-shadow .3s ease, background-color .3s ease, border-color .3s ease;
}

.mjr-lift:hover {
	transform: translateY(-4px);
}

/* Los valores se desplazan de lado en vez de elevarse. */
.mjr-slide {
	transition: transform .3s ease, box-shadow .3s ease;
}

.mjr-slide:hover {
	transform: translateX(5px);
	box-shadow: 0 6px 18px rgba(32, 39, 45, .08);
}

/* --- Retrato de la cita --------------------------------------------- */
.mjr-retrato img {
	transition: transform .45s cubic-bezier(.22, .8, .3, 1);
}

.mjr-retrato:hover img {
	transform: scale(1.05);
}

/* --- Aparicion al hacer scroll ------------------------------------- */

/* morajar.js pone .mjr-rv a cada bloque y .mjr-rv-on cuando entra en
   pantalla; al terminar retira las dos para que vuelvan las transiciones
   propias del elemento. El "html" sube la especificidad por encima de las
   transiciones que Elementor fija en .e-con y en los widgets. */
html .mjr-rv {
	opacity: 0;
	transform: translateY(22px);
	transition: opacity .6s ease, transform .6s ease;
	transition-delay: var(--mjr-rv-delay, 0ms);
}

html .mjr-rv.mjr-rv--lado {
	transform: translateX(-24px);
}

html .mjr-rv.mjr-rv-on {
	opacity: 1;
	transform: none;
}

/* Cifras: las celdas suben escalonadas mientras el numero cuenta. */
.mjr-stats--on .mjr-stats__item {
	animation: mjr-rise-in .6s cubic-bezier(.22, .8, .3, 1) backwards;
}

.mjr-stats--on .mjr-stats__item:nth-child(1) { animation-delay: .05s; }
.mjr-stats--on .mjr-stats__item:nth-child(2) { animation-delay: .15s; }
.mjr-stats--on .mjr-stats__item:nth-child(3) { animation-delay: .25s; }
.mjr-stats--on .mjr-stats__item:nth-child(4) { animation-delay: .35s; }

@keyframes mjr-rise-in {
	from { opacity: 0; transform: translateY(20px); }
	to { opacity: 1; transform: none; }
}

/* Trayectoria: el punto de cada hito brota con un pequeno rebote.
   Solo se oculta si morajar.js ha activado la animacion. */
.mjr-timeline--anim .mjr-timeline__item::before {
	transform: scale(0);
	transition: transform .5s cubic-bezier(.34, 1.56, .64, 1);
	transition-delay: calc(var(--mjr-rv-delay, 0ms) + .15s);
}

.mjr-timeline--anim .mjr-timeline__item.mjr-punto-on::before {
	transform: scale(1);
}

/* --- Respeto por quien pide menos movimiento ------------------------ */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation: none !important;
		transition: none !important;
	}
	.mjr-hero-rise,
	html .mjr-rv {
		opacity: 1 !important;
		transform: none !important;
	}
	.mjr-timeline__item::before {
		transform: none !important;
	}
}