/* =========================================================================
   css/mapa2026.css - Mapa "Donde estamos" 2026 (partials/mapa2026.php), con la
   animacion de js/mapa2026.js. Lo usan quienes_somos.php y empleo.php.
   ========================================================================= */

/* ---------- "Donde estamos": mapa con un marcador por pais ----------
   Los marcadores van colocados en % sobre la imagen (left/top en linea, desde sus
   coordenadas). js/mapa2026.js les pone .visible (uno a uno) y .actual
   (el ultimo, que muestra su nombre). */
.mapa26 {
	position: relative;
	line-height: 0;
}

.mapa26-imagen {
	display: block;
	width: 100%;
	height: auto;
}

/* Icono fa-location-dot (SVG): la punta, abajo en el centro, cae sobre el pais. Crece
   desde la punta, como si se clavara en el mapa */
.mapa26-pin {
	position: absolute;
	width: 12px;
	height: 16px;
	margin: -16px 0 0 -6px;
	color: #f4b333;
	opacity: 0;
	transform: scale(0);
	transform-origin: 50% 100%;
	transition: opacity .3s ease, transform .35s cubic-bezier(.34, 1.56, .64, 1);
}

.mapa26-pin svg {
	display: block;
	width: 100%;
	height: 100%;
	filter: drop-shadow(0 1px 1.5px rgba(0, 0, 0, .4));
}

.mapa26-pin.visible {
	opacity: 1;
	transform: scale(1);
}

/* Onda al aparecer, en la punta */
.mapa26-pin.actual::after {
	content: '';
	position: absolute;
	left: 50%;
	top: 100%;
	width: 14px;
	height: 6px;
	margin: -3px 0 0 -7px;
	border: 2px solid #f4b333;
	border-radius: 50%;
	animation: mapa26-onda 1s ease-out;
}

@keyframes mapa26-onda {
	from { opacity: 1; transform: scale(.4); }
	to   { opacity: 0; transform: scale(1.8); }
}

/* Nombre del pais: etiqueta blanca encima del marcador, centrada (en los bordes del mapa,
   alineada con el marcador para que no se salga: --mapa26-x). Entra desde abajo (.etiqueta)
   y se va difuminandose hacia arriba (.saliendo) */
.mapa26-pin-nombre {
	--mapa26-x: -50%;
	position: absolute;
	bottom: calc(100% + 4px);
	left: 50%;
	padding: 3px 7px;
	border: 1px solid #f4b333;
	border-radius: 3px;
	background-color: #fff;
	box-shadow: 0 1px 4px rgba(0, 0, 0, .2);
	color: #232d3b;
	font-family: var(--fuente-texto);
	font-size: 11px;
	font-weight: 600;
	line-height: 1.2;
	white-space: nowrap;
	opacity: 0;
	transform: translate(var(--mapa26-x), 6px);
	transition: opacity .3s ease, transform .3s ease;
	pointer-events: none;
}

.mapa26-pin--borde-izquierdo .mapa26-pin-nombre {
	--mapa26-x: 0;
	left: -4px;
}

.mapa26-pin--borde-derecho .mapa26-pin-nombre {
	--mapa26-x: 0;
	left: auto;
	right: -4px;
}

.mapa26-pin.etiqueta .mapa26-pin-nombre {
	opacity: 1;
	transform: translate(var(--mapa26-x), 0);
}

.mapa26-pin.saliendo .mapa26-pin-nombre {
	opacity: 0;
	filter: blur(4px);
	transform: translate(var(--mapa26-x), -14px);
	transition: opacity .7s ease, transform .7s ease, filter .7s ease;
}

/* ---------- Cartel final: "Clientes en / Mas de 25 paises." ----------
   En la parte de abajo de la imagen (libre bajo el mapa). Medidas en cqw (ancho del mapa)
   para que escale con el. "Clientes en" del mismo gris que "Donde" de la imagen; la banda
   (#f4b333) se pinta de izquierda a derecha y luego aparece el texto. */
.mapa26 {
	container-type: inline-size;
	/* Sitio para el titulo, que sube 5cqw, y el cartel, que baja 5cqw (no padding: moveria
	   los marcadores, en % del alto) */
	margin-top: 5%;
	margin-bottom: 5%;
}

/* Titulo "Donde estamos" + lema, arriba a la izquierda del mapa (hueco libre de la
   imagen). En cqw, como el cartel, para que escale con el mapa */
.mapa26-titulo {
	position: absolute;
	top: calc(3% - 5cqw); /* sube 5cqw para separarlo del mapa, como el cartel de abajo */
	left: 4%;
	right: 4%;
	font-family: var(--fuente-titulos);
	font-size: 9cqw;
	font-weight: 700;
	line-height: 1.05;
	text-align: left;
	-webkit-text-stroke: .15cqw currentColor; /* Fjalla One solo tiene 400: refuerza la negrita */
	pointer-events: none;
}

.mapa26-donde {
	display: block;
	color: #242627;
}

.mapa26-estamos {
	display: inline-block;
	color: #f4b333;
}

.mapa26-lema {
	position: absolute;
	right: 0;
	bottom: 0;
	color: #8a8a8a;
	font-family: var(--fuente-texto);
	font-size: 3cqw;
	font-weight: 400;
	-webkit-text-stroke: 0;
	line-height: 1.2;
}

.mapa26-cifra {
	position: absolute;
	left: 4%;
	right: 4%;
	bottom: -5cqw; /* separado del mapa */
	font-family: var(--fuente-titulos);
	line-height: 1.1;
	text-align: left;
	pointer-events: none;
}

.mapa26-cifra-linea {
	display: block;
	margin-bottom: 3cqw;
	color: #242627;
	font-size: 9cqw;
	opacity: 0;
	transform: translateY(8px);
	transition: opacity .5s ease, transform .5s ease;
}

.mapa26-cifra-banda {
	display: inline-block;
	padding: 1.6cqw 4.5cqw 2cqw;
	background-color: #f4b333;
	color: #242627;
	font-size: 11.5cqw;
	opacity: 0; /* recogida a ancho 0 aun dejaba 1px a la vista */
	clip-path: inset(0 100% 0 0);
	transition: opacity .4s ease .25s, clip-path .6s cubic-bezier(.65, 0, .35, 1) .25s;
}

.mapa26-cifra-banda span {
	display: inline-block;
	opacity: 0;
	transform: translateY(6px);
	transition: opacity .4s ease .7s, transform .4s ease .7s;
}

.mapa26-cifra.visible .mapa26-cifra-linea,
.mapa26-cifra.visible .mapa26-cifra-banda span {
	opacity: 1;
	transform: none;
}

.mapa26-cifra.visible .mapa26-cifra-banda {
	opacity: 1;
	clip-path: inset(0 0 0 0);
}

/* Al irse, todo a la vez y sin esperas */
.mapa26-cifra:not(.visible) .mapa26-cifra-banda,
.mapa26-cifra:not(.visible) .mapa26-cifra-banda span {
	transition-delay: 0s;
}

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