/* Mapa de presencia internacional — [frinsa_mapa] */

.fm-mapa {
	--fm-fondo: #f3f5f7;
	--fm-fantasma: #f4f6f9;
	--fm-arco: #aab3be;
	--fm-tierra: #c5ccd6;
	--fm-pais: #5b97d4;
	--fm-punto: #0f2a4d;
	--fm-fabrica: #3a9cf2;
	--fm-texto: #0f2a4d;
	--fm-texto-suave: #2c353d;
	--fm-ritmo: 0.5s;
	position: relative;
	overflow: hidden;
	background: radial-gradient(ellipse at 50% 40%, #fff 0%, #fbfcfd 45%, var(--fm-fondo) 100%);
}

.fm-defs {
	position: absolute;
	width: 0;
	height: 0;
	overflow: hidden;
}

.fm-svg {
	display: block;
	width: 100%;
	height: auto;
}

.fm-svg--movil {
	display: none;
}

/* Fondo */

.fm-fantasma {
	fill: var(--fm-fantasma);
	stroke: none;
}

.fm-arcos ellipse {
	fill: none;
	stroke: var(--fm-arco);
	stroke-width: 0.8;
	stroke-linecap: round;
	stroke-dasharray: 0 2.2;
}

.fm-mundo {
	fill: var(--fm-tierra);
	stroke: #dde2e8;
	stroke-width: 0.3;
	stroke-linejoin: round;
}

.fm-pais {
	fill: var(--fm-pais);
	stroke: #fff;
	stroke-width: 0.35;
	stroke-linejoin: round;
}

/* Sedes */

.fm-punto {
	fill: var(--fm-punto);
}

.fm-sede--fabrica .fm-punto {
	fill: var(--fm-fabrica);
}

.fm-linea {
	fill: none;
	stroke: var(--fm-punto);
	stroke-width: 1.05;
	stroke-linecap: round;
	stroke-dasharray: 0 2;
}

.fm-sede--fabrica .fm-linea {
	stroke: var(--fm-fabrica);
}

/* Máscara que "dibuja" la línea de puntos */
.fm-revela {
	fill: none;
	stroke: #fff;
	stroke-width: 6;
	stroke-dasharray: 1;
	stroke-dashoffset: 0;
}

.fm-etiqueta text {
	fill: var(--fm-texto);
}

.fm-b {
	font-family: "Neutroface 2 Text - Bold", Helvetica, Arial, sans-serif;
	font-weight: normal;
}

.fm-l {
	font-family: "Neutraface 2 Text - Book", Helvetica, Arial, sans-serif;
	font-weight: normal;
}

.fm-sede--fabrica .fm-etiqueta text,
.fm-icono {
	fill: var(--fm-fabrica);
}

/* Texto de presentación ([frinsa_mapa_intro]), con los mismos estilos que el mapa de la portada
   (capas de Revolution Slider sobre una rejilla de 1920 px: los tamaños escalan con el ancho del mapa).
   Va en el Pacífico, abajo a la izquierda; el encuadre de escritorio tiene océano de sobra para que no tape tierra.
   Las unidades cqw miden el ancho del mapa; la línea anterior con vw es el respaldo para navegadores antiguos. */

.fm-mapa {
	/* Ancho explícito: en /presencia-internacional/ el módulo de código de Divi lo maquetaba ajustado al contenido
	   y, con container-type, el mapa se quedaba en el 10 % del ancho. */
	width: 100%;
	container-type: inline-size;
}

.fm-intro {
	position: absolute;
	z-index: 2;
	left: 1.2%;
	bottom: 3%;
	width: 32%;
	box-sizing: border-box;
	padding: 2.3% 2.5% 1.4%;
	background: rgba(255, 255, 255, 0.65); /* 65 % de opacidad */
	color: #2c353d;
	font-family: "Neutraface 2 Text - Book", Helvetica, Arial, sans-serif;
	font-size: calc(19 / 1920 * 100vw);
	font-size: calc(19 / 1920 * 100cqw);
	line-height: calc(28 / 1920 * 100vw);
	line-height: calc(28 / 1920 * 100cqw);
}

.fm-intro h2 {
	margin: 0;
	padding: 0;
	color: #02396d;
	font-family: "Neutroface 2 Text - Demi", Helvetica, Arial, sans-serif;
	font-weight: 500;
	line-height: 1.15;
	text-transform: uppercase;
	font-size: calc(50 / 1920 * 100vw);
	font-size: calc(50 / 1920 * 100cqw);
	letter-spacing: calc(2 / 1920 * 100vw);
	letter-spacing: calc(2 / 1920 * 100cqw);
	margin-bottom: calc(22 / 1920 * 100vw);
	margin-bottom: calc(22 / 1920 * 100cqw);
}

.fm-intro h3 {
	margin: 0;
	padding: 0;
	color: #004f9f;
	font-family: "Neutroface 2 Text - Bold", Helvetica, Arial, sans-serif;
	font-weight: 500;
	line-height: 1.15;
	font-size: calc(44 / 1920 * 100vw);
	font-size: calc(44 / 1920 * 100cqw);
	margin-bottom: calc(16 / 1920 * 100vw);
	margin-bottom: calc(16 / 1920 * 100cqw);
}

.fm-intro p {
	margin: 0;
	padding-bottom: calc(28 / 1920 * 100vw);
	padding-bottom: calc(28 / 1920 * 100cqw);
}

.fm-intro .fm-intro__destacado {
	color: #004f9f;
	font-family: "Neutroface 2 Text - Bold", Helvetica, Arial, sans-serif;
	font-size: calc(30 / 1920 * 100vw);
	font-size: calc(30 / 1920 * 100cqw);
	line-height: calc(36 / 1920 * 100vw);
	line-height: calc(36 / 1920 * 100cqw);
	padding-bottom: calc(22 / 1920 * 100vw);
	padding-bottom: calc(22 / 1920 * 100cqw);
}

/* Por debajo de 1200 px no hay hueco: el texto va encima del mapa, con tamaños fijos. */
@media (max-width: 1199px) {
	.fm-intro {
		position: static;
		width: auto;
		max-width: 900px;
		margin: 0 auto;
		padding: 30px 6% 10px;
		background: none;
		font-size: 16px;
		line-height: 1.5;
	}

	.fm-intro h2 {
		font-size: 30px;
		letter-spacing: 1.5px;
		margin-bottom: 10px;
	}

	.fm-intro h3 {
		font-size: 24px;
		margin-bottom: 10px;
	}

	.fm-intro p {
		padding-bottom: 14px;
	}

	.fm-intro .fm-intro__destacado {
		font-size: 19px;
		line-height: 1.35;
		padding-bottom: 12px;
	}
}

/* Leyenda: oculta a la vista en escritorio, pero legible para lectores de pantalla */

.fm-leyenda {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

/* Móvil y tableta */

@media (max-width: 980px) {
	.fm-svg--escritorio {
		display: none;
	}

	.fm-svg--movil {
		display: block;
	}

	.fm-intro h2 {
		text-align: center;
	}

	.fm-leyenda {
		position: static;
		width: auto;
		height: auto;
		margin: 0;
		padding: 10px 6% 30px !important;
		overflow: visible;
		clip: auto;
		white-space: normal;
		list-style: none !important;
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
		gap: 8px 16px;
		color: var(--fm-texto);
		font-family: "Neutraface 2 Text - Book", Helvetica, Arial, sans-serif;
		font-size: 14px;
		line-height: 1.3;
	}

	.fm-leyenda__item {
		display: flex;
		align-items: center;
		gap: 8px;
		margin: 0 !important;
		padding: 0 !important;
		list-style: none !important;
	}

	.fm-leyenda__item strong {
		font-family: "Neutroface 2 Text - Bold", Helvetica, Arial, sans-serif;
		font-weight: normal;
	}

	.fm-leyenda__marca {
		flex: none;
		width: 7px;
		height: 7px;
		border-radius: 50%;
		background: var(--fm-punto);
	}

	.fm-leyenda__item.fm-sede--fabrica {
		color: var(--fm-fabrica);
	}

	.fm-leyenda__item.fm-sede--fabrica .fm-leyenda__marca {
		width: 9px;
		height: 9px;
		background: var(--fm-fabrica);
	}
}

/* Animación: solo con JS (clase fm-js) y si el usuario no pide menos movimiento */

.fm-marca {
	transform-box: fill-box;
	transform-origin: center;
}

@media (prefers-reduced-motion: no-preference) {
	.fm-js .fm-pais,
	.fm-js .fm-etiqueta,
	.fm-js .fm-leyenda__item {
		opacity: 0;
	}

	.fm-js .fm-marca {
		opacity: 0;
		transform: scale(0);
	}

	.fm-js .fm-revela {
		stroke-dashoffset: 1;
	}

	.fm-js.is-visible .fm-pais {
		animation: fm-aparecer 0.6s ease forwards;
		animation-delay: calc(var(--i) * var(--fm-ritmo));
	}

	.fm-js.is-visible .fm-marca {
		animation: fm-saltar 0.4s cubic-bezier(0.3, 1.6, 0.6, 1) forwards;
		animation-delay: calc(var(--i) * var(--fm-ritmo) + 0.2s);
	}

	.fm-js.is-visible .fm-revela {
		animation: fm-trazar 0.5s ease-out forwards;
		animation-delay: calc(var(--i) * var(--fm-ritmo) + 0.4s);
	}

	.fm-js.is-visible .fm-etiqueta,
	.fm-js.is-visible .fm-leyenda__item {
		animation: fm-aparecer 0.4s ease forwards;
		animation-delay: calc(var(--i) * var(--fm-ritmo) + 0.75s);
	}

	.fm-js.is-saliendo .fm-paises,
	.fm-js.is-saliendo .fm-sedes,
	.fm-js.is-saliendo .fm-leyenda {
		transition: opacity 0.6s ease;
		opacity: 0;
	}
}

@keyframes fm-aparecer {
	to { opacity: 1; }
}

@keyframes fm-saltar {
	to { opacity: 1; transform: scale(1); }
}

@keyframes fm-trazar {
	to { stroke-dashoffset: 0; }
}