/**
 * Preguntas frecuentes 2026 — estilos propios (prefijo mpsa-; el chrome vive en chrome-2026.css).
 * No hay mockup de esta página: sigue el lenguaje de Nosotros y Embajadores (cabecera oscura con
 * trama de puntos, títulos en dos pesos, bordes finos) con MÁS AIRE entre secciones, que es lo
 * que pidió gerencia el 18-09: 104 px de padding vertical en escritorio, 56 px en móvil.
 * Gutter maestro: max(56px, calc(50% - 664px)); móvil: 18 px. Sin las tres barras del diseño viejo.
 *
 * El tema viejo (Bricks + Automatic.css) se cuela por wp_head. Por eso aquí:
 *  - toda <section> declara display, dirección, alineación y ancho (el tema le pone
 *    align-items:center y apila a sus hijos);
 *  - todo <div> hijo directo de <section> declara su gap (el tema le pone 30 px);
 *  - los <button> y el <input> declaran su caja COMPLETA con selector reforzado (.mps-2026 …);
 *  - los encabezados fuerzan fuente, tamaño y transformaciones;
 *  - el foco visible se declara con !important (el tema trae *:focus{outline:none !important});
 *  - las columnas usan minmax(0, 1fr) + min-width:0 (un "1fr" no baja del min-content).
 */

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body.mps-faq-2026 { background: #FFFFFF; }

/* line-height: el tema pone en <body> una longitud fija (~24.6 px) que se hereda tal cual e
   infla todo lo que no declare el suyo. */
.mpsa-main { display: block; margin: 0; padding: 0; width: 100%; max-width: none; line-height: normal; }
/* El atributo hidden manda siempre: un display:flex de más abajo no debe "desocultar" nada. */
.mpsa-main [hidden] { display: none !important; }

.mpsa-b { font-weight: 800; }
.mpsa-l { font-weight: 300; }
.mpsa-l em { color: #C73D2C; font-style: normal; }
.mpsa-main .mpsc-eyebrow { display: block; line-height: normal; }

/* Foco visible: rojo sobre claro, blanco sobre los bloques oscuros. */
.mps-2026 .mpsa-main a:focus-visible,
.mps-2026 .mpsa-main button:focus-visible { outline: 2px solid #C73D2C !important; outline-offset: 3px !important; }
.mps-2026 .mpsa-cab a:focus-visible,
.mps-2026 .mpsa-cab button:focus-visible,
.mps-2026 .mpsa-caja-test a:focus-visible { outline-color: #FFFFFF !important; }

/* ============ Cabecera + buscador ============ */

.mpsa-cab {
	display: block; margin: 0; width: 100%; max-width: none;
	padding: 96px max(56px, calc(50% - 664px)) 88px;
	background-color: #0B0B0B; color: #FFFFFF;
	background-image: radial-gradient(rgba(255,255,255,0.05) 1px, transparent 1.2px); background-size: 3px 3px;
}
.mpsa-cab-in { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; width: 100%; max-width: 820px; min-width: 0; margin: 0; }
.mps-2026 .mpsa-cab h1 {
	margin: 0; padding: 0;
	font-family: "Creato Display", Figtree, "Segoe UI", Arial, sans-serif; font-style: normal;
	font-size: 72px; font-weight: 400; line-height: 0.92; letter-spacing: -0.02em;
	text-transform: uppercase; color: #FFFFFF; overflow-wrap: break-word; max-width: 100%;
}
.mps-2026 .mpsa-cab h1 .mpsa-b { font-weight: 800; }
.mps-2026 .mpsa-cab h1 .mpsa-l { font-weight: 300; }
.mpsa-bajada { margin: 0; font-size: 18px; line-height: 1.6; color: #D6D4D1; max-width: 560px; }

.mpsa-buscar { display: flex; flex-direction: column; align-items: stretch; gap: 12px; width: 100%; max-width: 640px; min-width: 0; margin: 12px 0 0; }
.mpsa-buscar-caja { position: relative; display: block; width: 100%; min-width: 0; color: #8A8782; }
.mpsa-buscar-caja svg { position: absolute; left: 18px; top: 50%; width: 20px; height: 20px; margin-top: -10px; pointer-events: none; }
/* font-size 16 px: con menos, iOS hace zoom al enfocar el campo. */
.mps-2026 .mpsa-buscar input[type="search"] {
	display: block; box-sizing: border-box; width: 100%; max-width: 100%; min-width: 0; height: 60px; min-height: 0; margin: 0;
	padding: 0 60px 0 50px;
	border: 1.5px solid #FFFFFF; border-radius: 2px; background: #FFFFFF; background-image: none; box-shadow: none; outline: none;
	-webkit-appearance: none; -moz-appearance: none; appearance: none;
	font-family: "Creato Display", Figtree, "Segoe UI", Arial, sans-serif;
	font-size: 16px; font-weight: 500; line-height: normal; letter-spacing: 0; text-transform: none; color: #111111;
	transition: border-color .15s ease;
}
.mps-2026 .mpsa-buscar input[type="search"]::placeholder { color: #8A8782; opacity: 1; }
/* La "x" nativa de WebKit fuera: el botón propio hace lo mismo en todos los navegadores. */
.mps-2026 .mpsa-buscar input[type="search"]::-webkit-search-cancel-button,
.mps-2026 .mpsa-buscar input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; appearance: none; display: none; }
.mps-2026 .mpsa-buscar input[type="search"]:focus { border-color: #C73D2C; box-shadow: none; }
.mps-2026 .mpsa-buscar input[type="search"]:focus-visible { outline: 2px solid #C73D2C !important; outline-offset: 3px !important; }

.mps-2026 .mpsa-limpiar {
	position: absolute; right: 6px; top: 50%; margin: -24px 0 0; padding: 0;
	display: flex; flex-direction: row; align-items: center; justify-content: center;
	box-sizing: border-box; width: 48px; height: 48px; min-width: 0; min-height: 0;
	border: 0; border-radius: 2px; background: none; box-shadow: none; cursor: pointer;
	-webkit-appearance: none; -moz-appearance: none; appearance: none;
	font-family: "Creato Display", Figtree, "Segoe UI", Arial, sans-serif;
	font-size: 28px; font-weight: 300; line-height: 1; letter-spacing: 0; text-align: center; text-transform: none; color: #111111;
}
.mps-2026 .mpsa-limpiar:hover, .mps-2026 .mpsa-limpiar:focus { background: #F5F4F2; color: #C73D2C; box-shadow: none; }
.mps-2026 .mpsa-cab .mpsa-limpiar:focus-visible { outline-color: #C73D2C !important; outline-offset: -3px !important; }

.mpsa-estado { margin: 0; min-height: 15px; font-size: 11.5px; font-weight: 700; line-height: 1.3; letter-spacing: 0.12em; text-transform: uppercase; color: #9A9A9A; }

/* ============ Preguntas + columna de ayuda ============ */

.mpsa-cuerpo {
	margin: 0; width: 100%; max-width: none; background: #FFFFFF;
	padding: 104px max(56px, calc(50% - 664px)) 112px;
	display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 0.8fr); gap: 88px;
	align-items: start; justify-items: stretch;
	scroll-margin-top: 90px;
}
/* Sin preguntas disponibles: solo el bloque de ayuda, a un ancho cómodo. */
.mpsa-cuerpo-solo { grid-template-columns: minmax(0, 560px); }

.mpsa-col-lista { display: flex; flex-direction: column; align-items: stretch; gap: 0; width: 100%; min-width: 0; }
.mpsa-lista { display: flex; flex-direction: column; align-items: stretch; gap: 0; width: 100%; min-width: 0; border-top: 1.5px solid #111111; }
/* Las anclas (#p-…) no deben quedar debajo del nav pegajoso (anuncio + nav ≈ 90 px). */
.mpsa-item { display: block; margin: 0; padding: 0; min-width: 0; border-bottom: 1px solid #E4E2E0; scroll-margin-top: 104px; }
body.admin-bar .mpsa-item { scroll-margin-top: 136px; }

/* El <h2> está por accesibilidad (patrón acordeón): visualmente manda el botón. */
.mps-2026 .mpsa-h {
	margin: 0; padding: 0;
	font-family: "Creato Display", Figtree, "Segoe UI", Arial, sans-serif; font-style: normal;
	font-size: 18px; font-weight: 700; line-height: 1.25; letter-spacing: -0.01em; text-transform: none; color: #111111;
}
/* .mps-2026 delante: el tema le mete padding, min-width y display:block a todo <button>, y
   chrome-2026.css les centra el texto. */
.mps-2026 .mpsa-btn {
	box-sizing: border-box; width: 100%; max-width: 100%; min-width: 0; min-height: 76px; margin: 0; padding: 24px 0;
	display: flex; flex-direction: row; align-items: center; justify-content: space-between; gap: 20px;
	background: none; border: 0; border-radius: 0; box-shadow: none; cursor: pointer;
	-webkit-appearance: none; -moz-appearance: none; appearance: none;
	font-family: "Creato Display", Figtree, "Segoe UI", Arial, sans-serif;
	font-size: 18px; font-weight: 700; line-height: 1.25; letter-spacing: -0.01em;
	text-align: left; text-transform: none; white-space: normal; color: #111111;
	-webkit-tap-highlight-color: transparent;
}
.mps-2026 .mpsa-btn:hover, .mps-2026 .mpsa-btn:focus { background: none; color: #111111; box-shadow: none; }
.mpsa-num { display: block; flex: none; width: 36px; font-size: 13px; font-weight: 600; line-height: 1; letter-spacing: 0.06em; color: #8A8782; text-align: left; transition: color .15s ease; }
.mpsa-q { display: block; flex: 1 1 auto; min-width: 0; text-align: left; overflow-wrap: break-word; transition: color .15s ease; }
.mps-2026 .mpsa-btn:hover .mpsa-q { color: #C73D2C; }
.mps-2026 .mpsa-btn:hover .mpsa-num, .mpsa-abierta .mpsa-num { color: #C73D2C; }

/* Signo + / − dibujado con dos barras: el estado sale de aria-expanded, no de un texto que el JS cambie. */
.mpsa-icono { position: relative; display: block; flex: none; width: 20px; height: 20px; color: #C73D2C; }
.mpsa-icono::before, .mpsa-icono::after {
	content: ""; position: absolute; left: 50%; top: 50%; display: block; background: currentColor; border-radius: 1px;
	transition: transform .2s ease, opacity .2s ease;
}
.mpsa-icono::before { width: 16px; height: 2px; margin: -1px 0 0 -8px; }
.mpsa-icono::after { width: 2px; height: 16px; margin: -8px 0 0 -1px; }
.mpsa-btn[aria-expanded="true"] .mpsa-icono::after { transform: rotate(90deg); opacity: 0; }

/* La respuesta se alinea con el texto de la pregunta (36 px del número + 20 px de gap).
   wp-components trae [role="region"]{position:relative}: aquí no molesta, nada se posiciona contra el panel. */
.mpsa-panel { display: block; margin: 0; padding: 0 56px 32px 56px; min-width: 0; }
.mpsa-panel[hidden] { display: none; }
.mpsa-panel-in { display: block; max-width: 640px; font-size: 15.5px; line-height: 1.7; color: #111111; overflow-wrap: break-word; }
.mpsa-panel-in p { margin: 0 0 12px; font-size: 15.5px; line-height: 1.7; color: #111111; }
.mpsa-panel-in ul, .mpsa-panel-in ol { margin: 0 0 12px; padding: 0 0 0 20px; }
.mpsa-panel-in ul { list-style: disc outside; }
.mpsa-panel-in ol { list-style: decimal outside; }
.mpsa-panel-in li { margin: 0 0 6px; font-size: 15.5px; line-height: 1.7; color: #111111; }
.mpsa-panel-in > :last-child, .mpsa-panel-in li:last-child { margin-bottom: 0; }
.mpsa-panel-in b, .mpsa-panel-in strong { font-weight: 700; }
/* chrome-2026.css apaga la cursiva de todo <em>; el editor de respuestas sí ofrece el botón. */
.mps-2026 .mpsa-panel-in em, .mps-2026 .mpsa-panel-in i { font-style: italic; }
.mps-2026 .mpsa-panel-in a { color: #C73D2C; text-decoration: underline; text-underline-offset: 2px; overflow-wrap: anywhere; }
.mps-2026 .mpsa-panel-in a:hover { color: #B23425; }

/* ---- Sin resultados ---- */

.mpsa-vacio {
	display: flex; flex-direction: column; align-items: flex-start; gap: 14px; min-width: 0;
	padding: 36px 32px; border: 1px solid #E4E2E0; border-radius: 6px; background: #F5F4F2;
}
.mpsa-vacio-t { margin: 0; font-size: 24px; font-weight: 800; line-height: 1.05; letter-spacing: -0.01em; text-transform: uppercase; color: #111111; }
.mpsa-vacio-p { margin: 0 0 6px; font-size: 15px; line-height: 1.6; color: #8A8782; max-width: 460px; }

/* ---- Columna de ayuda ---- */

.mpsa-lado { position: sticky; top: 122px; display: flex; flex-direction: column; align-items: stretch; gap: 20px; width: 100%; min-width: 0; margin: 0; padding: 0; }
body.admin-bar .mpsa-lado { top: 154px; }
.mpsa-caja { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; min-width: 0; padding: 32px; border-radius: 6px; }
.mpsa-caja-duda { background: #F5F4F2; border: 1px solid #E4E2E0; color: #111111; }
.mpsa-caja-test {
	background-color: #0B0B0B; color: #FFFFFF; border: 1px solid #0B0B0B;
	background-image: radial-gradient(rgba(255,255,255,0.05) 1px, transparent 1.2px); background-size: 3px 3px;
}
.mps-2026 .mpsa-caja-t {
	margin: 0; padding: 0;
	font-family: "Creato Display", Figtree, "Segoe UI", Arial, sans-serif; font-style: normal;
	font-size: 28px; font-weight: 800; line-height: 1; letter-spacing: -0.02em; text-transform: uppercase; color: #111111;
}
.mpsa-caja p { margin: 0; font-size: 15px; line-height: 1.6; color: #8A8782; }
.mpsa-caja .mpsa-test-t { font-size: 26px; font-weight: 300; line-height: 1.05; letter-spacing: -0.02em; text-transform: uppercase; color: #FFFFFF; }
.mpsa-test-t span { display: block; font-weight: 300; }
.mpsa-test-t b { display: block; font-weight: 800; }

/* Botón a todo el ancho de su caja. "Recomendación personalizada" no cabe en un renglón a 375 px:
   alto automático (mínimo el del design system) y texto que puede partir. */
.mps-2026 .mpsa-btn-ancho {
	display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 10px;
	box-sizing: border-box; width: 100%; max-width: 100%; height: auto; min-height: 54px; margin: 4px 0 0; padding: 12px 20px;
	line-height: 1.2; text-align: center; white-space: normal;
}
.mpsa-btn-ancho svg { flex: none; width: 20px; height: 20px; }
.mps-2026 .mpsa-vacio .mpsa-btn-ancho { width: auto; padding: 12px 28px; }

.mps-2026 .mpsa-enlace {
	display: inline-flex; flex-direction: row; align-items: center; gap: 8px; min-height: 48px; margin: 0; padding: 0;
	font-size: 13px; font-weight: 700; line-height: 1.2; letter-spacing: 0.06em; text-transform: uppercase;
	color: #111111; text-decoration: underline; text-decoration-color: #C73D2C; text-decoration-thickness: 2px; text-underline-offset: 6px;
	transition: color .15s ease;
}
.mps-2026 .mpsa-enlace:hover { color: #C73D2C; }
.mpsa-enlace span { color: #C73D2C; }

/* ============ Intermedio ============ */

@media (max-width: 1180px) {
	.mps-2026 .mpsa-cab h1 { font-size: 60px; }
	.mpsa-cuerpo { gap: 56px; }
	.mpsa-caja { padding: 26px; }
}

/* ============ Tablet y móvil: una columna, la ayuda al final ============ */

@media (max-width: 900px) {
	/* 56 abajo (antes 48): compensa el contador "11 preguntas", que en reposo se oculta (ver abajo). */
	.mpsa-cab { padding: 56px 18px; }
	.mpsa-cab-in { gap: 18px; max-width: none; }
	.mps-2026 .mpsa-cab h1 { font-size: 46px; }
	.mpsa-bajada { font-size: 15px; line-height: 1.55; max-width: none; }
	.mpsa-buscar { max-width: none; margin-top: 6px; }
	.mps-2026 .mpsa-buscar input[type="search"] { height: 56px; padding: 0 56px 0 46px; }
	.mpsa-buscar-caja svg { left: 16px; }
	.mps-2026 .mpsa-limpiar { right: 4px; }

	/* La lista a 48px del buscador (es su resultado); 72px entre lista y ayuda, y antes de la trustbar. */
	.mpsa-cuerpo { grid-template-columns: minmax(0, 1fr); gap: 72px; padding: 48px 18px 72px; scroll-margin-top: 60px; }
	.mpsa-cuerpo-solo { grid-template-columns: minmax(0, 1fr); }
	/* En móvil la barra pegajosa es solo el nav (~56 px), sin la tira de anuncio. */
	.mpsa-item { scroll-margin-top: 68px; }
	body.admin-bar .mpsa-item { scroll-margin-top: 114px; }

	.mpsa-lado, body.admin-bar .mpsa-lado { position: static; top: auto; gap: 48px; }
	.mpsa-caja { padding: 26px 22px; gap: 14px; }
	/* "¿No está tu duda?" sin caja gris: texto abierto alineado con la lista. La única caja que queda
	   es la negra del test. (0,2,0) gana a .mpsa-caja (0,1,0). */
	.mpsa-lado .mpsa-caja-duda { background: none; border: 0; border-radius: 0; padding: 0; }
	.mps-2026 .mpsa-caja-t { font-size: 26px; }
	.mpsa-caja .mpsa-test-t { font-size: 24px; }
	/* Un solo botón rojo en pantalla (el de WhatsApp): el del test pasa a blanco. (0,3,0) gana
	   también al :hover de .mpsc-btn-primary. */
	.mps-2026 .mpsa-caja-test .mpsa-btn-ancho { background: #FFFFFF; color: #0B0B0B; border-color: #FFFFFF; }

	.mpsa-vacio { padding: 28px 22px; }
	.mps-2026 .mpsa-vacio .mpsa-btn-ancho { width: 100%; padding: 12px 20px; }

	/* Declutter móvil (21-09): 11 "+" rojos seguidos eran ruido; pasan a negro y solo el "−" de la
	   pregunta abierta queda en rojo. */
	.mpsa-icono { color: #111111; }
	.mpsa-btn[aria-expanded='true'] .mpsa-icono { color: #C73D2C; }
	/* Muro de 11 negritas: las cerradas en Medium (500, declarado en chrome-2026.css) y la abierta en Bold.
	   Mismo peso de selector que la base: gana por orden. El @media 600 no toca el peso. */
	.mps-2026 .mpsa-btn { font-weight: 500; }
	.mps-2026 .mpsa-btn[aria-expanded='true'] { font-weight: 700; }
}

/* Contador "11 preguntas" oculto a la vista mientras no se busca: no display:none, así el
   role=status sigue anunciando y reaparece en cuanto se escribe. Regla SOLA a propósito: sin
   soporte de :has() el navegador la descarta entera y la página queda como antes. */
@media (max-width: 900px) {
	.mpsa-buscar:has(input:placeholder-shown) .mpsa-estado {
		position: absolute; width: 1px; height: 1px; min-height: 0; margin: -1px; padding: 0;
		overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
	}
}

@media (max-width: 420px) {
	/* "NOS PREGUNTAN." a 46 px no cabe en 339 px: baja un punto para no partir la palabra. */
	.mps-2026 .mpsa-cab h1 { font-size: 38px; letter-spacing: -0.03em; }
}

@media (max-width: 600px) {
	/* El número le quita renglón a la pregunta en pantallas angostas: fuera. */
	.mpsa-num { display: none; }
	.mps-2026 .mpsa-h, .mps-2026 .mpsa-btn { font-size: 16.5px; }
	.mps-2026 .mpsa-btn { min-height: 68px; padding: 20px 0; gap: 16px; }
	.mpsa-panel { padding: 0 12px 26px 0; }
	.mpsa-panel-in, .mpsa-panel-in p, .mpsa-panel-in li { font-size: 15px; line-height: 1.65; }
}

/* Al FINAL a propósito: misma especificidad que las reglas de arriba, gana por orden. */
@media (prefers-reduced-motion: reduce) {
	.mpsa-icono::before, .mpsa-icono::after, .mpsa-q, .mpsa-num, .mps-2026 .mpsa-enlace, .mps-2026 .mpsa-buscar input[type="search"] { transition: none; }
}