/**
 * CIRCULOVIVO — sections.
 *
 * Estilos de secciones: header, footer, heroes, bandas, six layers,
 * system map y ritmo vertical. Cada sección usa primitives/components;
 * aquí solo vive lo específico de composición.
 */

/* ---------- Ritmo de secciones ---------- */
.cv-section {
	padding-top: var(--wp--preset--spacing--2-xl);
	padding-bottom: var(--wp--preset--spacing--2-xl);
}

.cv-section--quiet {
	padding-top: var(--wp--preset--spacing--xl);
	padding-bottom: var(--wp--preset--spacing--xl);
}

.cv-section--emphasis {
	padding-top: var(--wp--preset--spacing--3-xl);
	padding-bottom: var(--wp--preset--spacing--3-xl);
}

/* ---------- Header ---------- */
.cv-header {
	position: sticky;
	top: 0;
	z-index: var(--cv-z-header);
	background: color-mix(in srgb, var(--cv-surface) 88%, transparent);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	border-bottom: 1px solid var(--cv-border);
}

@supports not (backdrop-filter: blur(1px)) {
	.cv-header {
		background: var(--cv-surface);
	}
}

.cv-header .wp-block-site-title {
	letter-spacing: 0.06em;
}

.cv-header .wp-block-site-title a {
	text-decoration: none;
	text-transform: uppercase;
}

/* Navegación: subrayado de señal */
.cv-header .wp-block-navigation a {
	text-decoration: none;
	padding-block: 0.35rem;
	border-bottom: 2px solid transparent;
	transition: border-color var(--cv-duration-fast) var(--cv-ease);
}

.cv-header .wp-block-navigation a:hover,
.cv-header .wp-block-navigation a:focus-visible {
	border-bottom-color: var(--cv-signal);
}

.cv-header .wp-block-navigation .current-menu-item > a {
	border-bottom-color: var(--cv-accent);
}

/*
 * Overlay móvil de core/navigation alineado al sistema.
 *
 * El backdrop-filter del header crea un containing block para descendientes
 * fixed. Por eso se fijan dimensiones de viewport explícitas: sin ellas el
 * overlay queda limitado al alto del header. La especificidad adicional
 * también vence los fallbacks blanco/negro de core/navigation.
 */
.cv-header .wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open {
	box-sizing: border-box;
	width: 100vw;
	height: 100dvh;
	max-height: 100dvh;
	background: var(--cv-surface-inverse);
	color: var(--cv-text-inverse);
	padding: var(--wp--preset--spacing--xl) var(--wp--preset--spacing--m);
}

/* Vence los colores fallback de core/navigation sin usar !important. */
.cv-header .wp-block-navigation:not(.has-background) .wp-block-navigation__responsive-container.is-menu-open:not(.disable-default-overlay) {
	background-color: var(--cv-surface-inverse);
}

.cv-header .wp-block-navigation:not(.has-text-color) .wp-block-navigation__responsive-container.is-menu-open:not(.disable-default-overlay) {
	color: var(--cv-text-inverse);
}

.cv-header .wp-block-navigation__responsive-container.is-menu-open a {
	color: var(--cv-text-inverse);
	font-size: var(--wp--preset--font-size--large);
	font-family: var(--wp--preset--font-family--display);
}

.cv-header .wp-block-navigation__responsive-container.is-menu-open a:hover,
.cv-header .wp-block-navigation__responsive-container.is-menu-open a:focus-visible {
	color: var(--cv-signal-soft);
}

.wp-block-navigation__responsive-container-close,
.wp-block-navigation__responsive-container-open {
	color: currentColor;
}

/* ---------- Hero ---------- */
.cv-hero {
	padding-top: var(--wp--preset--spacing--3-xl);
	padding-bottom: var(--wp--preset--spacing--2-xl);
	position: relative;
}

.cv-hero__title {
	max-width: 22ch;
	text-wrap: balance;
}

.cv-hero--center .cv-hero__title {
	margin-inline: auto;
}

/* Atmósfera: gradiente mineral muy sutil, nunca saturado */
.cv-hero--atmo {
	background:
		radial-gradient(60% 50% at 85% 10%, color-mix(in srgb, var(--cv-signal-soft) 16%, transparent) 0%, transparent 70%),
		radial-gradient(45% 40% at 10% 90%, color-mix(in srgb, var(--cv-accent) 7%, transparent) 0%, transparent 70%);
}

.is-style-band-inverse.cv-hero--atmo,
.cv-hero--atmo-inverse {
	background:
		radial-gradient(60% 50% at 85% 8%, color-mix(in srgb, var(--cv-signal) 26%, transparent) 0%, transparent 70%),
		radial-gradient(45% 45% at 8% 95%, color-mix(in srgb, var(--cv-accent) 12%, transparent) 0%, transparent 72%),
		var(--cv-surface-inverse);
}

/* ---------- Tension band ---------- */
.cv-tension__statement {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--x-large);
	line-height: 1.25;
	max-width: 30ch;
	text-wrap: balance;
}

/* ---------- Thesis ---------- */
.cv-thesis__statement {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--xx-large);
	line-height: 1.15;
	max-width: 24ch;
	text-wrap: balance;
	margin: 0;
}

/* ---------- Six layers ---------- */
.cv-layers {
	counter-reset: cv-layer;
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	gap: var(--wp--preset--spacing--s);
	position: relative;
}

@media (min-width: 768px) {
	.cv-layers {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 1024px) {
	.cv-layers {
		grid-template-columns: repeat(3, 1fr);
	}
}

.cv-layers > li {
	display: grid;
}

/* Loop visual: línea que sugiere continuidad (decorativa) */
.cv-layers::before {
	content: "";
	position: absolute;
	inset: -1rem;
	border: 1px dashed color-mix(in srgb, var(--cv-signal-soft) 45%, transparent);
	border-radius: var(--cv-radius-l);
	pointer-events: none;
}

@media (max-width: 767px) {
	.cv-layers::before {
		display: none;
	}
}

/* ---------- System map (clusters de soluciones) ---------- */
.cv-sysmap {
	display: grid;
	gap: var(--wp--preset--spacing--m);
}

@media (min-width: 1024px) {
	.cv-sysmap {
		grid-template-columns: repeat(3, 1fr);
	}
}

.cv-sysmap__cluster {
	position: relative;
	padding-left: var(--wp--preset--spacing--m);
	border-left: 1px solid var(--cv-border);
}

.cv-sysmap__cluster::before {
	content: "";
	position: absolute;
	left: -0.32rem;
	top: 0.5rem;
	width: 0.6rem;
	height: 0.6rem;
	border-radius: 50%;
	background: var(--cv-signal);
}

.cv-sysmap__links {
	list-style: none;
	padding: 0;
	margin: var(--wp--preset--spacing--s) 0 0;
	display: grid;
	gap: 0.4rem;
}

.cv-sysmap__links a {
	text-decoration: none;
	color: var(--cv-text);
	border-bottom: 1px solid var(--cv-border);
	padding-bottom: 0.4rem;
	display: inline-block;
}

.cv-sysmap__links a:hover,
.cv-sysmap__links a:focus-visible {
	color: var(--cv-signal);
	border-bottom-color: var(--cv-signal);
}

/* ---------- Before / after ---------- */
.cv-beforeafter__state {
	border: 1px solid var(--cv-border);
	border-radius: var(--cv-radius-m);
	padding: var(--wp--preset--spacing--m);
	height: 100%;
}

.cv-beforeafter__state--after {
	border-color: var(--cv-signal-soft);
	background: color-mix(in srgb, var(--cv-signal-soft) 9%, var(--cv-surface-raised));
}

/* ---------- Callout editorial ---------- */
.cv-callout {
	border: 1px solid var(--cv-border);
	border-left: 3px solid var(--cv-signal);
	border-radius: var(--cv-radius-m);
	background: var(--cv-surface-raised);
	padding: var(--wp--preset--spacing--m);
}

.cv-callout--note {
	border-left-color: var(--cv-signal);
}

.cv-callout--principle {
	border-left-color: var(--cv-accent);
}

.cv-callout--warning {
	border-left-color: var(--cv-warning);
}

.cv-callout--example {
	border-left-color: var(--cv-success);
}

.cv-callout__label {
	display: block;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--cv-text-muted);
	margin-bottom: 0.4rem;
}

/* ---------- Key takeaways ---------- */
.cv-takeaways {
	border: 1px solid var(--cv-border);
	border-radius: var(--cv-radius-l);
	background: var(--cv-surface-tint);
	padding: var(--wp--preset--spacing--l);
}

.cv-takeaways :is(h2, h3) {
	margin-top: 0;
	font-size: var(--wp--preset--font-size--medium);
	font-family: var(--wp--preset--font-family--body);
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

/* ---------- CTA band ---------- */
.cv-cta-band {
	border-radius: var(--cv-radius-l);
}

.cv-cta-band__note {
	color: var(--cv-text-inverse-muted);
	font-size: var(--wp--preset--font-size--small);
}

/* ---------- Footer ---------- */
.cv-footer {
	background: var(--cv-surface-inverse);
	color: var(--cv-text-inverse);
	margin-top: var(--wp--preset--spacing--3-xl);
}

.cv-footer :is(h2, h3, h4) {
	color: var(--cv-text-inverse);
}

.cv-footer a {
	color: var(--cv-text-inverse-muted);
	text-decoration: none;
}

.cv-footer a:hover,
.cv-footer a:focus-visible {
	color: var(--cv-text-inverse);
	text-decoration: underline;
}

.cv-footer__legal {
	color: var(--cv-text-inverse-muted);
	font-size: var(--wp--preset--font-size--small);
	border-top: 1px solid var(--cv-border-inverse);
	padding-top: var(--wp--preset--spacing--m);
}

.cv-footer .wp-block-navigation a {
	font-size: var(--wp--preset--font-size--small);
}

/* ---------- Archive / search results ---------- */
.cv-results {
	display: grid;
	gap: var(--wp--preset--spacing--l);
}

/* ---------- Pagination ---------- */
.wp-block-query-pagination a,
.wp-block-query-pagination-numbers a {
	text-decoration: none;
}

/* ---------- Long-form: contenido de artículo ---------- */
.cv-article-content > * + * {
	margin-top: var(--wp--preset--spacing--m);
}

/* ---------- Print básico ---------- */
@media print {
	.cv-header,
	.cv-footer,
	.cv-skip-link,
	.wp-block-navigation {
		display: none !important;
	}
}