/*
 * Idiomas (4-oct-2026). Reglas tipograficas por idioma; casi todo va acotado con :lang() para no tocar el
 * ingles. Ver memoria feedback-sitio-idiomas-reglas (regla 12).
 */

/* (3) Red de seguridad: una palabra que no entra se corta antes de salirse de su caja. Solo actua si desborda. */
main :is(p, h1, h2, h3, li, figcaption),
.z2-btn,
.z2-card {
	overflow-wrap: break-word;
}

/* (2) Parrafos sin una palabra sola en la ultima linea (los navegadores que no lo soportan lo ignoran). */
main p {
	text-wrap: pretty;
}

/* (1) Corte con guion en idiomas de palabras largas, solo en texto corrido (nunca titulos ni botones). */
:is(:lang(de), :lang(fi), :lang(hu), :lang(nl), :lang(sv), :lang(da), :lang(nb), :lang(cs), :lang(pl), :lang(ru), :lang(uk), :lang(el), :lang(tr)) main p {
	hyphens: auto;
	-webkit-hyphens: auto;
}

/*
 * (4) Fuente correcta por idioma. Inter cubre latin, cirilico, griego y vietnamita; para el resto se usan las
 * fuentes del sistema de cada idioma (Windows, macOS, Linux/Android), sin descargar megas de fuentes.
 * El japones y el chino comparten caracteres pero se dibujan distinto: cada uno con la suya.
 */
:root:lang(ja) { --pm-font-ui: "Inter var", "Inter", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic UI", "Yu Gothic", "Meiryo", "Noto Sans JP", sans-serif; }
:root:lang(ko) { --pm-font-ui: "Inter var", "Inter", "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", sans-serif; }
:root:lang(zh-Hans) { --pm-font-ui: "Inter var", "Inter", "PingFang SC", "Microsoft YaHei UI", "Microsoft YaHei", "Noto Sans SC", sans-serif; }
:root:lang(zh-Hant) { --pm-font-ui: "Inter var", "Inter", "PingFang TC", "Microsoft JhengHei UI", "Microsoft JhengHei", "Noto Sans TC", sans-serif; }
:root:lang(th) { --pm-font-ui: "Inter var", "Inter", "Leelawadee UI", "Thonburi", "Noto Sans Thai", sans-serif; }
:root:lang(hi) { --pm-font-ui: "Inter var", "Inter", "Nirmala UI", "Kohinoor Devanagari", "Noto Sans Devanagari", sans-serif; }
:root:lang(ar) { --pm-font-ui: "Inter var", "Inter", "Segoe UI", "Geeza Pro", "Noto Sans Arabic", sans-serif; }
:root:lang(he) { --pm-font-ui: "Inter var", "Inter", "Segoe UI", "Arial Hebrew", "Noto Sans Hebrew", sans-serif; }

/* (6) Sin negritas ni cursivas "inventadas" (trazo engrosado, borroso) en escrituras sin esas variantes. */
:is(:lang(ja), :lang(ko), :lang(zh), :lang(th), :lang(hi)) {
	font-synthesis: none;
}

/* (5) Corte de linea como lo haria un tipografo nativo. */
:lang(ko) main :is(p, h1, h2, h3, li, span) {
	word-break: keep-all; /* el coreano no parte palabras al medio */
}
:is(:lang(ja), :lang(zh)) main :is(p, h1, h2, h3, li, span) {
	line-break: strict; /* ninguna linea empieza con signo de puntuacion */
}

/* (8) Arabe y hebreo: precios siempre de izquierda a derecha y aislados del texto que los rodea. */
[dir="rtl"] :is(.z2-price__amount, .z2-btn__price, .z2-price-inline, .z2-orange) {
	direction: ltr;
	unicode-bidi: isolate;
}

/* Red de seguridad de botones fuera del ingles: si un texto no entra, el boton crece en vez de desbordarse.
   Mientras el texto entra (siempre en ingles) el boton queda identico: 52 px de alto, una linea. */
html:not([lang="en-US"]):not([lang="en"]) .z2-btn {
	max-width: 100%;
	height: auto;
	min-height: 52px;
	padding-block: 8px;
	white-space: normal;
	text-align: center;
	line-height: 1.2;
}

/* ---- Selector de idioma (header) ---- */
.pm-lang {
	position: relative;
	display: flex;
	justify-content: center;
	width: 100%;
}
.pm-lang__btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 8px 6px;
	border: 0;
	background: transparent;
	color: #fff;
	font: 500 13px/1 var(--pm-font-ui);
	letter-spacing: 0.02em;
	cursor: pointer;
	transition: color 0.3s;
}
.pm-lang__btn:hover,
.pm-lang__btn:focus-visible,
.pm-lang__btn[aria-expanded="true"] {
	color: var(--pm-gold);
}
.pm-lang__globe {
	width: 18px;
	height: 18px;
	fill: currentColor;
	flex: none;
}
.pm-lang__list {
	position: absolute;
	top: calc(100% + 14px);
	inset-inline-end: 0;
	z-index: 6000;
	display: grid;
	grid-template-columns: repeat(2, minmax(150px, 1fr));
	gap: 2px 8px;
	width: max-content;
	max-width: calc(100vw - 24px);
	max-height: min(70vh, 640px);
	overflow-y: auto;
	margin: 0;
	padding: 10px;
	list-style: none;
	background: rgba(12, 12, 12, 0.97);
	border: 1px solid #2a2a2a;
	border-radius: 12px;
	box-shadow: 0 16px 40px rgba(0, 0, 0, 0.6);
}
.pm-lang__list[hidden] {
	display: none;
}
.pm-lang__list a {
	display: block;
	padding: 8px 10px;
	border-radius: 8px;
	color: #ddd;
	font: 400 14px/1.3 var(--pm-font-ui);
	text-decoration: none;
	white-space: nowrap;
}
.pm-lang__list a:hover,
.pm-lang__list a:focus-visible {
	background: #1d1d1d;
	color: #fff;
}
.pm-lang__list a[aria-current] {
	color: var(--pm-gold);
	font-weight: 600;
}
@media (max-width: 767px) {
	.pm-lang__list {
		position: fixed;
		top: 70px;
		inset-inline: 12px;
		width: auto;
		grid-template-columns: repeat(2, 1fr);
	}
}

/* ---- Aviso "esta pagina tambien esta en tu idioma" (abajo, no tapa el contenido principal) ---- */
.pm-langbar {
	position: fixed;
	inset-inline: 16px;
	bottom: 16px;
	z-index: 7000;
	display: flex;
	align-items: center;
	gap: 14px;
	max-width: 640px;
	margin-inline: auto;
	padding: 12px 14px 12px 18px;
	background: rgba(16, 16, 16, 0.96);
	border: 1px solid #2f2f2f;
	border-radius: 14px;
	box-shadow: 0 12px 36px rgba(0, 0, 0, 0.55);
	color: #eee;
	font: 400 14px/1.4 var(--pm-font-ui);
}
.pm-langbar__msg {
	flex: 1;
	margin: 0;
}
.pm-langbar__go {
	flex: none;
	padding: 8px 14px;
	border-radius: 999px;
	background: var(--pm-gold);
	color: #000;
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
}
.pm-langbar__close {
	flex: none;
	width: 32px;
	height: 32px;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: #aaa;
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
}
.pm-langbar__close:hover {
	color: #fff;
	background: #222;
}
@media (max-width: 480px) {
	.pm-langbar {
		flex-wrap: wrap;
	}
	.pm-langbar__msg {
		flex-basis: calc(100% - 46px);
	}
}

/* Titulos equilibrados en todas las paginas, fuera del ingles (en la home ya lo hace home-v2.css para todos). */
html:not([lang="en-US"]):not([lang="en"]) main :is(h1, h2, h3) {
	text-wrap: balance;
}