/**
 * Mi Arcano — Compatibilidad landing pages
 * Affinity dial, content sections, FAQ and hub grid.
 * Consumes the design tokens from main.css; frame chrome comes from
 * .card-frame — no additional box outlines here.
 *
 * @package Mi_Arcano
 */

/*--------------------------------------------------------------
# Plate header extras
--------------------------------------------------------------*/
.compat-monogram {
	width: auto;
	min-width: 78px;
	padding: 0 1.1rem;
	border-radius: 39px;
	letter-spacing: 0.18em;
	text-indent: 0.18em; /* optically recenter the tracked glyph pair */
}

.compat-signos-meta a {
	color: var(--color-gold-ink);
	text-decoration: none;
}

.compat-signos-meta a:hover,
.compat-signos-meta a:focus {
	color: var(--color-gold);
	text-decoration: underline;
}

/*--------------------------------------------------------------
# Affinity dial — CSS-only conic ring, gold on ivory
--------------------------------------------------------------*/
.compat-score {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 128px;
	height: 128px;
	margin: calc(var(--spacing-unit) * 1.25) auto 0;
	border-radius: 50%;
	background: conic-gradient(
		var(--color-gold) var(--compat-deg, 0deg),
		var(--color-ivory-deep) var(--compat-deg, 0deg)
	);
}

.compat-score-inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 108px;
	height: 108px;
	border-radius: 50%;
	background: var(--color-ivory);
}

.compat-score-number {
	font-family: var(--font-serif);
	font-size: 2.4rem;
	line-height: 1;
	color: var(--color-slate);
}

.compat-score-pct {
	font-size: 1.2rem;
	color: var(--color-gold-ink);
}

.compat-score-label {
	font-size: 0.72rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	color: var(--color-text-muted);
	margin-top: 0.35rem;
}

.compat-lead {
	margin-top: calc(var(--spacing-unit) * 1.25);
}

/*--------------------------------------------------------------
# Content sections
--------------------------------------------------------------*/
.compat-section h2 {
	margin-bottom: calc(var(--spacing-unit) * 0.75);
}

.compat-consejo {
	padding: calc(var(--spacing-unit) * 1.5) calc(var(--spacing-unit) * 1.5);
}

.compat-consejo p {
	font-family: var(--font-serif);
	font-size: 1.15rem;
	line-height: 1.6;
	color: var(--color-slate);
	margin: 0;
	text-align: center;
}

/*--------------------------------------------------------------
# FAQ
--------------------------------------------------------------*/
.compat-faq-item {
	margin-bottom: calc(var(--spacing-unit) * 1.25);
}

.compat-faq-item h3 {
	font-size: 1.1rem;
	margin: 0 0 0.5rem;
	color: var(--color-slate);
}

.compat-faq-item p {
	margin: 0;
	color: var(--color-text-light);
}

/*--------------------------------------------------------------
# Sibling strips
--------------------------------------------------------------*/
.compat-related-group {
	margin-bottom: calc(var(--spacing-unit) * 1.5);
}

.compat-related-group h2 {
	font-size: 1.25rem;
	margin-bottom: calc(var(--spacing-unit) * 0.75);
}

/*--------------------------------------------------------------
# Hub grid (/compatibilidad/)
--------------------------------------------------------------*/
.compat-hub-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: calc(var(--spacing-unit) * 1.25);
	max-width: 1100px;
	margin: 0 auto calc(var(--spacing-unit) * 2);
	padding: 0 var(--spacing-unit);
}

.compat-hub-card {
	padding: calc(var(--spacing-unit) * 1.25) calc(var(--spacing-unit) * 1.25) var(--spacing-unit);
}

.compat-hub-sign {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	font-size: 1.2rem;
	margin: 0 0 0.85rem;
	color: var(--color-slate);
}

.compat-hub-sign .card-monogram {
	font-size: 1.5rem;
}

.compat-hub-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
}

.compat-hub-list a {
	color: var(--color-text-light);
	text-decoration: none;
}

.compat-hub-list a:hover,
.compat-hub-list a:focus {
	color: var(--color-gold-ink);
	text-decoration: underline;
}

.compat-hub-empty {
	font-size: 0.85rem;
	font-style: italic;
	color: var(--color-text-muted);
	margin: 0;
}