/* ============================================================
   MexiCasas — Páginas de contenido (page.php): guías, FAQ,
   institucionales. Solo variables de tokens.css. Mobile-first.
   ============================================================ */

.mxc-pagina { padding-bottom: 80px; }

.mxc-pagina__cabecera {
	background: var(--mxc-bone);
	border-bottom: 1px solid var(--mxc-line);
	padding: 44px 0 36px;
	margin-bottom: 40px;
}

.mxc-pagina__titulo {
	font-size: clamp(1.75rem, 4vw, 2.5rem);
	max-width: 760px;
}

/* ---------- Prosa del sistema ---------- */

.mxc-prosa {
	max-width: 760px;
	font-size: var(--mxc-text-base);
	line-height: 1.7;
	color: var(--mxc-ink);
}

.mxc-prosa h2 {
	font-family: var(--mxc-font-display);
	font-size: var(--mxc-text-xl);
	font-weight: 700;
	letter-spacing: -0.01em;
	line-height: 1.25;
	margin: 44px 0 14px;
}
.mxc-prosa h2:first-child { margin-top: 0; }

.mxc-prosa h3 {
	font-size: var(--mxc-text-lg);
	font-weight: 700;
	margin: 30px 0 10px;
}

.mxc-prosa p { margin: 0 0 16px; }

.mxc-prosa ul,
.mxc-prosa ol {
	margin: 0 0 18px;
	padding-left: 22px;
}
.mxc-prosa li { margin-bottom: 8px; }
.mxc-prosa li::marker { color: var(--mxc-indigo); }

.mxc-prosa a {
	color: var(--mxc-indigo);
	font-weight: 600;
	text-decoration: none;
}
.mxc-prosa a:hover { text-decoration: underline; }
.mxc-prosa a:focus-visible {
	outline: 2px solid var(--mxc-indigo);
	outline-offset: 2px;
	border-radius: var(--mxc-radius-sm);
}

.mxc-prosa strong { font-weight: 700; }

/* ---------- FAQ con <details> ---------- */

.mxc-prosa details {
	background: var(--mxc-bone);
	border: 1px solid var(--mxc-line);
	border-radius: var(--mxc-radius);
	padding: 0;
	margin: 0 0 10px;
	overflow: hidden;
}

.mxc-prosa summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	cursor: pointer;
	list-style: none;
	font-size: var(--mxc-text-base);
	font-weight: 600;
	padding: 16px 18px;
}
.mxc-prosa summary::-webkit-details-marker { display: none; }
.mxc-prosa summary::after {
	content: '';
	flex: none;
	width: 10px;
	height: 10px;
	border-right: 2px solid var(--mxc-ink-3);
	border-bottom: 2px solid var(--mxc-ink-3);
	transform: rotate(45deg);
	transition: transform 0.15s ease;
	margin-top: -4px;
}
.mxc-prosa details[open] summary::after { transform: rotate(-135deg); margin-top: 4px; }
.mxc-prosa summary:hover { color: var(--mxc-indigo); }
.mxc-prosa summary:focus-visible { outline: 2px solid var(--mxc-indigo); outline-offset: -2px; }

.mxc-prosa details > *:not(summary) { padding: 0 18px; }
.mxc-prosa details > p:last-child,
.mxc-prosa details > ul:last-child { padding-bottom: 16px; margin-bottom: 0; }