/*
 * Mercados Pro Suite: capa tipográfica y de ritmo de marca (1.29.18).
 *
 * Una sola capa, cargada la última (después de la de botones), que unifica en
 * todo el plugin la tipografía, los tamaños, los saltos de línea y la separación
 * entre títulos y texto. Las páginas comerciales reciben la escala completa; los
 * paneles (Radar, Mi Cuenta, foros...) solo las reglas que no cambian su densidad.
 *
 * Marca: Montserrat · negro #0B0B0C · amarillo #F4C10F · dorado #FFD400 · blanco.
 *
 * Escala comercial (móvil → escritorio):
 *   H1  30 → 52 px / 900 / 1.08      H2  25 → 38 px / 900 / 1.15
 *   H3  18 → 21 px / 800 / 1.28      H4  16 → 17 px / 800 / 1.3
 *   Texto 15 → 16 px / 500 / 1.65    Nota legal 13 px / 1.55
 * Ritmo: título → texto 0,5 em; párrafo → párrafo 0,9 em; elemento de lista 0,4 em.
 */

:root {
	--mps-type-font: 'Montserrat', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	--mps-type-h1: clamp(30px, 3.4vw + 14px, 52px);
	--mps-type-h2: clamp(25px, 2.2vw + 14px, 38px);
	--mps-type-h3: clamp(18px, .5vw + 15px, 21px);
	--mps-type-h4: clamp(16px, .2vw + 15px, 17px);
	--mps-type-body: clamp(15px, .15vw + 14.4px, 16px);
	--mps-type-small: 13px;
	--mps-type-measure: 70ch;
}

/* ---------------------------------------------------------------------
 * 1. Todo el plugin: misma familia y títulos que nunca se parten a media
 *    palabra (en móvil salía «patrimoni-o»).
 * ------------------------------------------------------------------ */
html body :is([class*="mps-"], [class*="sab-"], .mpsw) :is(h1, h2, h3, h4, h5, h6) {
	font-family: var(--mps-type-font) !important;
	overflow-wrap: normal !important;
	word-break: normal !important;
	-webkit-hyphens: manual !important;
	hyphens: manual !important;
	text-wrap-style: balance; /* 1.29.28: solo el estilo; el atajo «text-wrap» anulaba white-space:nowrap */
}
html body :is([class*="mps-"], [class*="sab-"], .mpsw) :is(p, li, dd, td, th, label, blockquote, figcaption) {
	font-family: var(--mps-type-font) !important;
	text-wrap-style: pretty;
}

/* ---------------------------------------------------------------------
 * 2. Páginas comerciales y de contenido: escala completa y ritmo.
 * ------------------------------------------------------------------ */
html body :is(.mps-sales-page, .mps-planes, .mpsw, .mps-aviso, .mps-manual, .mps-community-head, .mps-legal-notice) :is(h1) {
	font-size: var(--mps-type-h1) !important;
	line-height: 1.08 !important;
	font-weight: 900 !important;
	letter-spacing: -.025em !important;
	margin: 0 0 .45em !important;
}
html body :is(.mps-sales-page, .mps-planes, .mpsw, .mps-aviso, .mps-manual, .mps-legal-notice) :is(h2) {
	font-size: var(--mps-type-h2) !important;
	line-height: 1.15 !important;
	font-weight: 900 !important;
	letter-spacing: -.02em !important;
	margin-bottom: .5em !important;
}
html body :is(.mps-sales-page, .mps-planes, .mpsw, .mps-aviso, .mps-manual, .mps-legal-notice) :is(h3) {
	font-size: var(--mps-type-h3) !important;
	line-height: 1.28 !important;
	font-weight: 800 !important;
	letter-spacing: -.01em !important;
	margin-bottom: .45em !important;
}
html body :is(.mps-sales-page, .mps-planes, .mpsw, .mps-aviso, .mps-manual, .mps-legal-notice) :is(h4, h5) {
	font-size: var(--mps-type-h4) !important;
	line-height: 1.3 !important;
	font-weight: 800 !important;
	margin-bottom: .4em !important;
}
/* Un título que sigue a un bloque de texto necesita aire por encima. */
html body :is(.mps-sales-page, .mps-planes, .mpsw, .mps-manual, .mps-legal-notice) :is(p, ul, ol, table, div) + :is(h2, h3, h4) {
	margin-top: 1.4em !important;
}

html body :is(.mps-sales-page, .mps-planes, .mpsw, .mps-aviso, .mps-manual, .mps-legal-notice) p,
html body :is(.mps-sales-page, .mps-planes, .mpsw, .mps-manual, .mps-legal-notice) :is(li, dd) {
	font-size: var(--mps-type-body) !important;
	line-height: 1.65 !important;
	font-weight: 500 !important;
}
html body :is(.mps-sales-page, .mps-planes, .mpsw, .mps-aviso, .mps-manual, .mps-legal-notice) p {
	margin: 0 0 .9em !important;
}
html body :is(.mps-sales-page, .mps-planes, .mpsw, .mps-aviso, .mps-manual, .mps-legal-notice) p:last-child {
	margin-bottom: 0 !important;
}
html body :is(.mps-sales-page, .mps-planes, .mpsw, .mps-manual, .mps-legal-notice) :is(ul, ol):not([class*="nav"]):not([class*="grid"]) {
	margin: 0 0 1em !important;
}
html body :is(.mps-sales-page, .mps-planes, .mpsw, .mps-manual, .mps-legal-notice) :is(ul, ol) > li {
	margin: 0 0 .4em !important;
}
html body :is(.mps-sales-page, .mps-planes, .mpsw, .mps-manual, .mps-legal-notice) :is(ul, ol) > li:last-child {
	margin-bottom: 0 !important;
}
/* Ningún texto por debajo de 12 px (había listas a 10 px). */
html body :is(.mps-sales-page, .mps-planes, .mpsw, .mps-manual) :is(small, .mps-sales-fit-terms, .mps-sales-compare-note, .mps-legal-notice p, .mpsw-legal p) {
	font-size: var(--mps-type-small) !important;
	line-height: 1.55 !important;
}

/* Líneas de lectura cómodas: los párrafos sueltos de cada sección no pasan de ~70 caracteres. */
html body .mps-sales-section > p,
html body .mps-sales-section-head p,
html body .mps-manual-section > p {
	max-width: var(--mps-type-measure);
}
html body :is(.mps-sales-hero, .mps-sales-outcome, .mps-sales-payment-choice) p {
	margin-left: auto !important;
	margin-right: auto !important;
}

/* Etiquetas y distintivos (Opcional, Recomendado, Activo, Mayor ahorro…): estaban a 10 px. */
html body :is(.mps-sales-page, .mps-planes) :is(.mps-sales-optional, .mps-plan-badge, .mps-plan-active-badge, .mps-sales-bundle-action span, .is-recommended em, .mps-plans-risk-callout span, .mps-sales-fit-prices span, .mps-sales-fit-founder-note, .mps-sales-compare-card__row dt, [class*="__eyebrow"], th) {
	font-size: 12px !important;
	line-height: 1.3 !important;
	letter-spacing: .02em !important;
}

/* Etiqueta encima del título (eyebrow): misma en todas las secciones. */
html body :is(.mps-sales-page, .mps-planes, .mpsw) .mps-sales-eyebrow {
	display: inline-block;
	margin: 0 0 .7em !important;
	font-size: 12px !important;
	font-weight: 800 !important;
	letter-spacing: .1em !important;
	text-transform: uppercase !important;
	line-height: 1.3 !important;
}

/* Navegación de la página (Qué consigues · Cómo funciona…): en móvil se desliza, no se corta. */
html body .mps-sales-decision-nav {
	scrollbar-width: none;
}
html body .mps-sales-decision-nav a {
	white-space: nowrap !important;
	flex: 0 0 auto !important;
}

/* ---------------------------------------------------------------------
 * 3. Página con portada propia: fuera el título duplicado del tema.
 *    (El H1 de la portada ya es el título; dos H1 confunden y empujan el contenido.)
 * ------------------------------------------------------------------ */
html body .single-content:has(> .entry-content :is([class*="mps-"], .mpsw) h1) > header .single-title {
	display: none !important;
}
html body .single-content:has(> .entry-content :is([class*="mps-"], .mpsw) h1) > header:not(:has(> :not(.single-title))) {
	display: none !important;
	margin: 0 !important;
}
/* Título del tema en el resto de páginas del plugin: mismo peso y escala en todas
 * (unas salían en fino y otras en negrita). */
html body .single-content:has(> .entry-content :is([class*="mps-"], [class*="sab-"])) > header .single-title {
	font-family: var(--mps-type-font) !important;
	font-size: clamp(28px, 2.2vw + 16px, 44px) !important;
	font-weight: 900 !important;
	line-height: 1.1 !important;
	letter-spacing: -.02em !important;
	text-wrap-style: balance; /* 1.29.28: solo el estilo; el atajo «text-wrap» anulaba white-space:nowrap */
}
/* Botones de «Comparte esto» fuera de las páginas funcionales (registro, acceso, cuenta,
 * paneles, foros). Se mantienen en las páginas de venta con portada. */
html body .single-content:has(> .entry-content [class*="mps-"]):not(:has(.mps-sales-hero)) :is(.sharedaddy, .sd-sharing-enabled, .jp-relatedposts) {
	display: none !important;
}

/* ---------------------------------------------------------------------
 * 4. Móvil: el contenido usaba solo 242 de 390 px porque se sumaban los
 *    márgenes del tema (32 + 16 + 16 px por lado) y los del plugin.
 * ------------------------------------------------------------------ */
@media (max-width: 640px) {
	html body .container:has(> .single-content > .entry-content :is([class*="mps-"], [class*="sab-"], .mpsw)) {
		padding-left: 12px !important;
		padding-right: 12px !important;
	}
	html body :is(.single-content, .entry-content):has(:is(.mps-sales-page, .mps-planes, .mpsw, .mps-funnel)) {
		padding-left: 0 !important;
		padding-right: 0 !important;
	}
	html body .mps-sales-page {
		padding-left: 14px !important;
		padding-right: 14px !important;
	}
	html body .mps-sales-page .mps-sales-section,
	html body .mps-sales-page .mps-sales-card {
		max-width: 100% !important;
		box-sizing: border-box !important;
	}
	/* En pantallas estrechas, todo el texto de las secciones a la izquierda salvo la portada. */
	html body .mps-sales-page .mps-sales-section:not(.mps-sales-hero) :is(h2, h3, p, li) {
		text-align: left !important;
	}
}

/* ---------------------------------------------------------------------
 * 5. Tarjetas de precio de Planes: el importe destaca y los dos botones
 *    van uno debajo de otro (en escritorio se partían en dos líneas).
 * ------------------------------------------------------------------ */
html body .mps-sales-fit-prices b {
	display: block;
	margin-top: 2px;
	color: #ffffff !important;
	font-size: 16px !important;
	font-weight: 800 !important;
	line-height: 1.35 !important;
}
html body .mps-sales-fit-actions {
	display: grid !important;
	grid-template-columns: 1fr !important;
	gap: 10px !important;
}
html body .mps-sales-fit-actions .button {
	width: 100% !important;
	white-space: nowrap !important;
	justify-content: center;
}

/* Las tarjetas de una misma fila alinean precios y botones aunque el texto mida distinto. */
html body .mps-sales-fit-card {
	display: flex !important;
	flex-direction: column !important;
}
html body .mps-sales-fit-card .mps-sales-fit-prices {
	margin-top: auto !important;
}