/* =====================================================================
   Mega menú de países — VE_Menu_Paises

   Los colores toman los tokens del tema (--ve-*) y dejan el valor del diseño
   como reserva, para que el menú siga presentable si el tema no está activo.
   Todo lo que el widget de Elementor deja tocar se expone como --ve-menu-*.
   ===================================================================== */

.ve-menu-paises {
	--ve-menu-cols: 4;
	--ve-menu-gap: 30px;
	--ve-menu-gap-fila: 26px;
	--ve-menu-alto-max: 66vh;

	--ve-menu-color-titulo: var(--ve-verde, #12a150);
	--ve-menu-color-pais: #3a473f;
	--ve-menu-color-pais-hover: var(--ve-verde-osc, #0b6e39);
	--ve-menu-color-pais-fondo: #f0f6f1;
	--ve-menu-color-visado: var(--ve-gris, #6a7a70);
	--ve-menu-color-enlace: var(--ve-verde-link, #0e8a48);
	--ve-menu-borde: var(--ve-borde, #eaeee6);
	--ve-menu-borde-suave: var(--ve-borde-2, #eef1ea);
	--ve-menu-fondo-barra: var(--ve-bg-claro, #f6f8f4);

	font-family: var(--ve-fuente-txt, system-ui, -apple-system, sans-serif);
	line-height: 1.35;
	color: var(--ve-menu-color-pais);
	background: var(--ve-blanco, #fff);
}

/* El reset.css de Elementor subraya TODOS los enlaces (a, a:visited) y les
   cambia el color al pasar el ratón (a:hover → #336). Esas reglas son (0,1,1),
   así que le ganan a un solo nombre de clase y su hoja se carga después que
   esta. Se neutraliza aquí, una vez para todo el menú; el color de cada tipo de
   enlace lo ponen las reglas de más abajo, encadenadas para llegar a (0,2,1). */
.ve-menu-paises a,
.ve-menu-paises a:visited,
.ve-menu-paises a:hover,
.ve-menu-paises a:focus-visible {
	text-decoration: none;
}

.ve-menu-paises__encabezado {
	margin: 0;
	padding: 18px 24px 0;
	font-family: var(--ve-fuente-tit, inherit);
	font-size: 1rem;
	font-weight: 700;
	color: var(--ve-oscuro, #0e2436);
}

/* --- Barra superior: buscador + contador + «Ver todos» ----------------- */

.ve-menu-paises__barra {
	display: flex;
	align-items: center;
	gap: 16px;
	flex-wrap: wrap;
	padding: 20px 24px;
	border-bottom: 1px solid var(--ve-menu-borde-suave);
	background: var(--ve-menu-fondo-barra);
}

.ve-menu-paises__buscador {
	display: flex;
	align-items: center;
	gap: 10px;
	flex: 1 1 320px;
	max-width: 420px;
	padding: 0 14px;
	border: 1px solid #dfe5da;
	border-radius: 9px;
	background: var(--ve-blanco, #fff);
}

.ve-menu-paises__buscador:focus-within {
	border-color: var(--ve-menu-color-titulo);
}

.ve-menu-paises__lupa {
	flex: none;
	color: #7a8a80;
}

/* El selector va encadenado a propósito. El reset.css de Elementor trae:
     input[type=search] { border:1px solid #666; border-radius:3px; padding:.5rem 1rem }
     input[type=search]:focus { border-color:#333 }
   que son (0,1,1) y (0,2,1), y su hoja se carga DESPUÉS que esta. Con un solo
   nombre de clase (0,1,0) perdíamos y salía el recuadro negro. Encadenando
   tres clases (0,3,0) ganamos también al :focus.

   El aspecto de "campo enfocado" lo lleva la caja de alrededor (:focus-within),
   así que el anillo y el borde del propio input sobran. */
.ve-menu-paises .ve-menu-paises__buscador .ve-menu-paises__input,
.ve-menu-paises .ve-menu-paises__buscador .ve-menu-paises__input:focus,
.ve-menu-paises .ve-menu-paises__buscador .ve-menu-paises__input:focus-visible {
	width: 100%;
	padding: 13px 0;
	border: 0;
	border-radius: 0;
	outline: none;
	box-shadow: none;
	background: transparent;
	transition: none;
	font-family: inherit;
	font-size: 15px;
	color: var(--ve-oscuro, #0e2436);
}

.ve-menu-paises__contador {
	margin: 0;
	font-size: 13.5px;
	color: var(--ve-menu-color-visado);
}

.ve-menu-paises .ve-menu-paises__todos {
	margin-left: auto;
	font-family: var(--ve-fuente-tit, inherit);
	font-size: 13.5px;
	font-weight: 600;
	color: var(--ve-menu-color-enlace);
	text-decoration: none;
	white-space: nowrap;
}

.ve-menu-paises .ve-menu-paises__todos:hover,
.ve-menu-paises .ve-menu-paises__todos:focus-visible {
	text-decoration: underline;
}

/* --- Rejilla de regiones ---------------------------------------------- */

.ve-menu-paises__regiones {
	display: grid;
	grid-template-columns: repeat(var(--ve-menu-cols), minmax(0, 1fr));
	gap: var(--ve-menu-gap-fila) var(--ve-menu-gap);
	align-items: start;
	padding: 26px 24px 30px;
	max-height: var(--ve-menu-alto-max);
	overflow-y: auto;
	overscroll-behavior: contain;
}

.ve-menu-paises__region[hidden] {
	display: none;
}

.ve-menu-paises__titulo {
	margin: 0 0 12px;
	padding-bottom: 10px;
	border-bottom: 1px solid var(--ve-menu-borde);
	font-family: var(--ve-fuente-tit, inherit);
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--ve-menu-color-titulo);
}

.ve-menu-paises__lista,
.ve-menu-paises__visados {
	display: flex;
	flex-direction: column;
	gap: 2px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ve-menu-paises__pais[hidden] {
	display: none;
}

.ve-menu-paises .ve-menu-paises__enlace {
	display: block;
	margin-left: -8px;
	padding: 6px 8px;
	border-radius: 6px;
	font-size: 14.5px;
	line-height: 1.45;
	text-decoration: none;
	color: var(--ve-menu-color-pais);
}

.ve-menu-paises .ve-menu-paises__enlace:hover,
.ve-menu-paises .ve-menu-paises__enlace:focus-visible {
	background: var(--ve-menu-color-pais-fondo);
	color: var(--ve-menu-color-pais-hover);
}

/* --- «Ver más países»: colapso por región ----------------------------- */

/* El colapso solo actúa con JS (clase --js). Sin JS se ven todos los países
   y el botón no aparece, así no queda contenido inaccesible. */
.ve-menu-paises--js:not(.is-searching) .ve-menu-paises__region:not(.is-expanded) .ve-menu-paises__pais--extra {
	display: none;
}

/* Encadenado por lo mismo que el buscador: el reset.css de Elementor pinta
   [type=button] y button:hover en frambuesa (#c36) con la misma especificidad
   que un solo nombre de clase, y al cargarse después ganaba él. */
.ve-menu-paises .ve-menu-paises__vermas {
	display: none; /* Se muestra solo cuando hay JS. */
	margin-top: 12px;
	padding: 9px 14px;
	border: 1px solid #cfe9d8;
	border-radius: 8px;
	background: var(--ve-blanco, #fff);
	cursor: pointer;
	font-family: var(--ve-fuente-tit, inherit);
	font-size: 13px;
	font-weight: 600;
	color: var(--ve-menu-color-enlace);
}

.ve-menu-paises--js .ve-menu-paises__vermas {
	display: inline-block;
}

/* Con el buscador activo el botón no pinta nada: ya se ven las coincidencias. */
.ve-menu-paises.is-searching .ve-menu-paises__vermas {
	display: none;
}

.ve-menu-paises .ve-menu-paises__vermas:hover,
.ve-menu-paises .ve-menu-paises__vermas:focus-visible {
	background: var(--ve-bg-verde, #e7f5ec);
	border-color: var(--ve-menu-color-titulo);
	color: var(--ve-menu-color-enlace);
}

.ve-menu-paises__vacio {
	margin: 0;
	padding: 0 24px 26px;
	font-size: 14px;
	color: var(--ve-menu-color-visado);
}

/* --- Segundo nivel: visados con página propia -------------------------- */

.ve-menu-paises__visados {
	margin: 1px 0 6px;
	padding-left: 10px;
	border-left: 1px solid var(--ve-menu-borde);
}

.ve-menu-paises .ve-menu-paises__visado {
	display: block;
	padding: 2px 0;
	font-size: .82rem;
	text-decoration: none;
	color: var(--ve-menu-color-visado);
}

.ve-menu-paises .ve-menu-paises__visado:hover,
.ve-menu-paises .ve-menu-paises__visado:focus-visible {
	color: var(--ve-menu-color-pais-hover);
	text-decoration: underline;
}

/* --- Pie con la llamada a la acción ------------------------------------ */

.ve-menu-paises__pie {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
	padding: 18px 24px;
	border-top: 1px solid var(--ve-menu-borde-suave);
	background: var(--ve-menu-fondo-barra);
}

.ve-menu-paises__pie-texto {
	margin: 0;
	font-size: 14px;
	color: #4a5a51;
}

.ve-menu-paises .ve-menu-paises__cta {
	padding: 12px 22px;
	border-radius: 8px;
	background: var(--ve-menu-color-titulo);
	box-shadow: 0 10px 22px -10px rgba(18, 161, 80, .7);
	font-family: var(--ve-fuente-tit, inherit);
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
	color: var(--ve-blanco, #fff);
	white-space: nowrap;
}

.ve-menu-paises .ve-menu-paises__cta:hover,
.ve-menu-paises .ve-menu-paises__cta:focus-visible {
	background: var(--ve-menu-color-pais-hover);
	color: var(--ve-blanco, #fff);
}

/* =====================================================================
   Integración con el desplegable del Mega Menu de Elementor

   Se ajusta fijando las custom properties DEL PROPIO widget de Elementor
   (--n-menu-*), no sobrescribiendo sus reglas: así no hay que pelearse con su
   CSS en cada actualización.

   SOBRE EL SELECTOR, que tiene truco. Elementor escribe para cada widget un
   CSS generado con tres clases de especificidad, y ahí mete valores por defecto
   que pisan lo de aquí:

     .elementor-78 .elementor-element.elementor-element-9a65193 {
         --n-menu-title-distance-from-content: 0px;
     }

   Además esa hoja se carga DESPUÉS que esta, así que a igualdad de
   especificidad tampoco ganaríamos. Por eso el prefijo de abajo encadena
   .elementor + .elementor-element + .elementor-widget-n-menu y suma el :has():
   cuatro clases, una más que las suyas. No se usan .elementor-78 ni el id del
   elemento a propósito: cambian si se rehace la cabecera.

   :has() acota el efecto al desplegable que contiene ESTE menú: los demás
   items del mega menú se quedan exactamente como estén. Si un navegador no
   soporta :has(), el selector entero se descarta y el menú se ve como antes.
   ===================================================================== */

.elementor .elementor-element.elementor-widget-n-menu:has(.ve-menu-paises) {
	/* Separación entre la cabecera y el desplegable. Es padding del contenedor
	   del desplegable, no margen: el hueco sigue siendo zona sensible al ratón,
	   así que al bajar desde el título no se cierra el menú por el camino. */
	--n-menu-title-distance-from-content: 10px;

	/* OJO: pese al nombre, Elementor solo lee estas variables de caja en el menú
	   MÓVIL, en la regla .e-n-menu[data-layout=dropdown] .e-n-menu-wrapper. En
	   escritorio no las mira nadie. Se dejan puestas porque dan el mismo aspecto
	   al plegable del móvil; el escritorio se resuelve en la regla de abajo. */
	--n-menu-dropdown-content-box-border-radius: 18px;
	--n-menu-dropdown-content-box-shadow-horizontal: 0px;
	--n-menu-dropdown-content-box-shadow-vertical: 40px;
	--n-menu-dropdown-content-box-shadow-blur: 80px;
	--n-menu-dropdown-content-box-shadow-spread: -40px;
	--n-menu-dropdown-content-box-shadow-color: rgba(10, 26, 41, .55);
}

/* Caja del desplegable en ESCRITORIO.

   Aquí la caja visible es el contenedor de dentro (.e-n-menu-content > .e-con):
   es quien lleva el fondo blanco, y por defecto va sin radio ni sombra —los
   pondría el panel de Elementor si alguien tocara Borde/Sombra en la pestaña
   Estilo del widget, cosa que nadie ha hecho—. Así que se aplican directamente
   sobre él en vez de por variable.

   El padding se pone a cero porque las bandas del menú (barra del buscador y
   pie) van a sangre; el relleno lo reparte el propio menú por dentro. Y el
   overflow recorta esas bandas contra las esquinas redondeadas.

   La sombra no la recorta nadie: el overflow:hidden del desplegable también es
   exclusivo del modo móvil. */
.elementor .elementor-element.elementor-widget-n-menu .e-n-menu-content:has(.ve-menu-paises) > .e-con {
	padding: 0;
	border: 1px solid var(--ve-borde, #eaeee6);
	border-radius: 18px;
	overflow: hidden;
	box-shadow: 0 40px 80px -40px rgba(10, 26, 41, .55);
}

/* El contenedor del desplegable es "boxed", y en esa variante Elementor NO pone
   el relleno vertical en .e-con sino en el .e-con-inner de dentro (regla
   .e-con-inner{padding-block-start/end}). Si solo se pisa el de fuera, queda una
   banda blanca arriba y abajo por la que la barra y el pie no llegan al borde.
   El max-width también se suelta: aquí el ancho ya lo fija el desplegable. */
.elementor .elementor-element.elementor-widget-n-menu .e-n-menu-content:has(.ve-menu-paises) > .e-con > .e-con-inner {
	width: 100%;
	max-width: none;
	padding: 0;
}

/* Ancho igual al del contenedor principal del sitio.

   El desplegable va en position:absolute, así que su ancho y su alineación las
   decide el ancestro posicionado más cercano. Por defecto hay DOS en el camino:
   el <nav> (.e-n-menu, position:relative) y el propio contenedor del widget
   (.elementor-widget, position:relative), y ambos miden más o menos lo mismo que
   el menú; de ahí que el desplegable saliera estrecho y descolgado a la derecha.

   Quitándoles la posición a los dos, el ancla pasa a ser el contenedor de la
   fila de la cabecera, que ocupa todo el ancho y está centrado con la página:
   centrando ahí el desplegable y limitándolo al ancho del sitio, queda alineado
   con el resto del contenido. Se listan también los elementos intermedios, que
   hoy ya son estáticos, para que esto no vuelva a romperse si Elementor le pone
   posición a alguno en una actualización.

   Solo en escritorio: el widget está configurado para pasar a modo plegable en
   tablet (clase e-n-menu-tablet) y ahí no conviene tocarle el posicionamiento. */
@media (min-width: 1025px) {
	.elementor .elementor-element.elementor-widget-n-menu:has(.ve-menu-paises),
	.elementor .elementor-element.elementor-widget-n-menu:has(.ve-menu-paises) .e-n-menu,
	.elementor .elementor-element.elementor-widget-n-menu:has(.ve-menu-paises) .e-n-menu-wrapper,
	.elementor .elementor-element.elementor-widget-n-menu:has(.ve-menu-paises) .e-n-menu-heading:not(.e-scroll-active),
	.elementor .elementor-element.elementor-widget-n-menu:has(.ve-menu-paises) .e-n-menu-item {
		position: static;
	}

	.elementor .elementor-element.elementor-widget-n-menu .e-n-menu-content:has(.ve-menu-paises) {
		/* --container-max-width es la anchura de contenedor del kit de Elementor;
		   --ve-ancho es la del tema. Se usa la que haya, sin número fijo aquí. */
		--stretch-width: min(var(--container-max-width, var(--ve-ancho, 1140px)), 100% - 24px);
		--stretch-left: 50%;
		--stretch-right: auto;

		transform: translateX(-50%);
	}
}

/* --- Adaptación -------------------------------------------------------
   Mismos cortes que el diseño: 4 columnas, 3, 2 y 1. El min() respeta el
   número de columnas configurado en el widget cuando es menor que el máximo
   de cada franja. */

@media (max-width: 1100px) {
	.ve-menu-paises__regiones {
		grid-template-columns: repeat(min(var(--ve-menu-cols), 3), minmax(0, 1fr));
	}
}

@media (max-width: 820px) {
	.ve-menu-paises__regiones {
		grid-template-columns: repeat(min(var(--ve-menu-cols), 2), minmax(0, 1fr));
	}
}

@media (max-width: 560px) {
	.ve-menu-paises__regiones {
		grid-template-columns: 1fr;
		padding: 20px 16px 24px;
	}

	.ve-menu-paises__barra,
	.ve-menu-paises__pie {
		padding: 16px;
	}

	.ve-menu-paises__buscador {
		max-width: none;
	}

	.ve-menu-paises__todos {
		margin-left: 0;
	}

	.ve-menu-paises__cta {
		white-space: normal;
	}
}