/* ==========================================================================
   Play Marketing — Design tokens
   ========================================================================== */
:root {
	--color-bg: #fffef9;
	--color-bg-alt: #fff8c1;
	--color-surface: #ffffff;
	--color-ink: #0e2a1f;
	--color-ink-soft: #3f5c50;
	--color-line: #978d51;
	/* Same hue at reduced opacity — the growing scroll-reveal divider
	   lines (numbered lists, service rows, pillar-page section borders)
	   read as too heavy/solid at full --color-line opacity, especially
	   once fully grown-in; this keeps them as a quiet hairline instead. */
	--color-line-soft: rgba(151, 141, 81, 0.35);

	/* "Autoridad Dorada" revisado: dorado apagado (bronce), gastado con
	   disciplina como acento raro — nunca como relleno grande. El verde
	   pasa a ser el color de cada botón/acción; ver la Named Rule
	   "Green-Leads, Gold-Is-Rare" en DESIGN.md. */
	--color-accent: #8a6d2f;
	--color-accent-dark: #6f5726;
	--color-accent-soft: #e8dcb8;
	--color-accent-ink: #fffef9;
	/* Variante clara del dorado, solo para texto/bordes SOBRE fondo verde
	   oscuro (.system, .diagnostico) — el bronce base no tiene contraste
	   suficiente ahí; ver DESIGN.md. */
	--color-accent-on-deep: #d4bd7a;
	/* Foco de teclado: color dedicado, no el acento de marca — necesita
	   ser visible sobre cualquier fondo (claro, oscuro, tarjeta), y el
	   bronce apagado no lo garantiza. Es el único lugar que conserva el
	   dorado brillante original. */
	--color-focus: #ffd230;

	--color-deep: #095138;
	--color-deep-ink: #063826;
	--color-deep-line: #1c6b4d;
	--color-cream-on-deep: #fff8c1;

	/* Bright gold, reserved for small/rare highlights on dark (ink/deep) sections
	   only — an eyebrow label, a stat number, ::selection. Distinct from
	   --color-focus (same hue, different job: keyboard-focus rings). Never a
	   large-area fill; see the Two-Color Rule in DESIGN.md. */
	--color-sun: #f2c230;

	--font-display: 'Outfit', ui-sans-serif, system-ui, sans-serif;
	--font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	/* Italic accent word treatment only — never full headings. */
	--font-script: 'Instrument Serif', Georgia, 'Times New Roman', serif;

	--wrap: 1180px;
	--radius: 20px;
	--radius-btn: 999px;
	--space-xs: 0.5rem;
	--space-sm: 1rem;
	--space-md: 1.75rem;
	--space-lg: 3rem;
	--space-xl: 7rem;
	--space-2xl: 10rem;

	--ease-out: cubic-bezier(0.23, 1, 0.32, 1);
	--ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
}

/* Base44 has no capped container at all (just px-6/md:px-12 side padding,
   full-bleed otherwise) — our 1180px .wrap is the sitewide convention,
   used on prose-heavy pages (blog posts, FAQ) where a full-bleed column
   would make text lines uncomfortably long for the 40+ audience. Widening
   --wrap everywhere would fix Home's proportions but regress blog
   readability, so it's scoped to the pages actually rebuilt to the Base44
   concept instead: Home and the standalone Diagnóstico page (which reuses
   section-diagnostico.php). Individual paragraphs already cap their own
   line length in ch units regardless of this value, so widening it only
   gives headlines/grids/cards more room — it doesn't create long body-text
   lines. */
.home,
.page-diagnostico-standalone {
	--wrap: 1440px;
}

/* ==========================================================================
   Reset
   ========================================================================== */
*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	overflow-x: hidden;
}

/* El header ahora es "fixed" (flota sobre el contenido siempre, no solo al
   scrollear) — sin esto, saltar a un ancla (#diagnostico, etc.) dejaría el
   destino tapado debajo del header. */
[id] {
	scroll-margin-top: 100px;
}

body {
	margin: 0;
	background: var(--color-bg);
	color: var(--color-ink);
	font-family: var(--font-body);
	font-size: 18px;
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}

::selection {
	background: var(--color-sun);
	color: var(--color-ink);
}

img {
	max-width: 100%;
	display: block;
}

a {
	color: inherit;
}

ul,
fieldset {
	margin: 0;
	padding: 0;
	border: 0;
	list-style: none;
}

button {
	font-family: inherit;
	cursor: pointer;
}

h1,
h2,
h3 {
	font-family: var(--font-display);
	line-height: 1.15;
	margin: 0;
	font-weight: 700;
}

p {
	margin: 0;
}

.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
}

.skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	background: var(--color-ink);
	color: var(--color-bg);
	padding: 0.75rem 1.25rem;
	z-index: 200;
}

.skip-link:focus {
	left: var(--space-sm);
	top: var(--space-sm);
}

:focus-visible {
	outline: 2px solid var(--color-focus);
	outline-offset: 2px;
}

/* ==========================================================================
   Layout helpers
   ========================================================================== */
.wrap {
	max-width: var(--wrap);
	margin: 0 auto;
	padding: 0 1.5rem;
}

.eyebrow {
	font-family: var(--font-body);
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--color-deep);
	margin: 0 0 var(--space-sm);
}

.eyebrow--on-dark {
	color: var(--color-accent-on-deep);
}

/* Brighter than --on-dark on purpose — --color-sun, reserved for a single
   short eyebrow label on the darkest (ink) sections, matching Base44's
   Caso Real treatment. */
.eyebrow--sun {
	color: var(--color-sun);
}

.section-title {
	font-size: clamp(2.25rem, 1.5rem + 3.2vw, 4rem);
	letter-spacing: -0.01em;
	max-width: 32ch;
	margin: 0 0 var(--space-md);
}

.section-title--on-dark {
	color: var(--color-cream-on-deep);
}

/* ==========================================================================
   Editorial system — added for the "kinetic editorial" Home redesign
   (client-approved reference: a Base44-built concept adapting Caleb
   Raney's portfolio site to this brand). Two reusable pieces: a large
   italic Fraunces accent for key words inside a heading, and a
   numbered/divider list pattern (Problem, System, Differentiators all
   use the same rhythm — a thin top rule, a muted italic-on-hover number,
   then content) instead of each section inventing its own layout.
   ========================================================================== */
.accent-script {
	font-family: var(--font-script);
	font-style: italic;
	font-weight: 400;
	color: var(--color-deep);
}

/* Gold stays the rare exception even here — a short connector word
   ("&", "y"), never a whole clause. */
.accent-script--gold {
	color: var(--color-accent);
}

/* On dark (ink/deep) sections the green accent has no contrast, so the
   script word shifts to the light sand tint instead — same role Base44
   gives "ecosistema" inside the dark Caso Real section. */
.accent-script--on-deep {
	color: var(--color-accent-soft);
}

/* Bright sun gold, only on dark (ink/deep) sections — see --color-sun. */
.accent-script--sun {
	color: var(--color-sun);
}

.numbered-list {
	display: grid;
	grid-template-columns: repeat(var(--numbered-list-cols, 3), minmax(0, 1fr));
	gap: var(--space-md) var(--space-lg);
	margin-top: var(--space-lg);
}

.numbered-list__item {
	padding-top: var(--space-sm);
}

/* A real element instead of a static border so it can grow in from the
   left when the group scrolls into view — matches Base44's Pains section
   (a scaleX(0)→1 line per item, staggered). */
.numbered-list__rule {
	display: block;
	height: 1px;
	background: var(--color-line-soft);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.9s var(--ease-out);
}

.numbered-list.is-visible .numbered-list__rule {
	transform: scaleX(1);
}

.numbered-list.is-visible > *:nth-child(2) .numbered-list__rule { transition-delay: 80ms; }
.numbered-list.is-visible > *:nth-child(3) .numbered-list__rule { transition-delay: 160ms; }
.numbered-list.is-visible > *:nth-child(4) .numbered-list__rule { transition-delay: 240ms; }
.numbered-list.is-visible > *:nth-child(n + 5) .numbered-list__rule { transition-delay: 300ms; }

/* Static italic gold, not hover-triggered — Base44's number treatment has
   no hover state at all. */
.numbered-list__num {
	display: block;
	margin-top: var(--space-sm);
	font-family: var(--font-script);
	font-style: italic;
	font-size: 1.5rem;
	color: var(--color-accent);
}

.numbered-list__num--on-dark {
	color: var(--color-accent-on-deep);
}

@media (max-width: 900px) {
	.numbered-list {
		grid-template-columns: 1fr;
	}
}

/* ==========================================================================
   Buttons
   ========================================================================== */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 1px solid transparent;
	border-radius: var(--radius-btn);
	font-weight: 700;
	text-decoration: none;
	transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

/* El verde lidera cada acción del sitio ahora — antes era el dorado.
   Sobre la sección de fondo verde oscuro (.diagnostico) el botón se
   invierte más abajo, porque un botón verde sobre fondo verde sería
   invisible. .system pasó a ser una sección clara (ver Base44 rebuild),
   así que ya no necesita la inversión. */
.btn--primary {
	background: var(--color-deep);
	color: var(--color-cream-on-deep);
}

.btn--primary:hover {
	background: var(--color-deep-ink);
}

.diagnostico .btn--primary {
	background: var(--color-cream-on-deep);
	color: var(--color-deep);
}

.diagnostico .btn--primary:hover {
	background: var(--color-bg);
}

.btn--outline {
	background: transparent;
	border-color: var(--color-ink);
	color: var(--color-ink);
}

.btn--outline:hover {
	background: var(--color-ink);
	color: var(--color-bg);
}

.btn--small {
	padding: 0.55rem 1.1rem;
	font-size: 0.9375rem;
}

.btn--large {
	height: 56px;
	padding: 0 2rem;
	font-size: 0.9375rem;
}

/* ==========================================================================
   Header
   ========================================================================== */
/* "fixed", no "sticky" — a propósito. Con sticky, el header vive en el
   flujo normal y recién se superpone al contenido cuando empezás a
   scrollear; con fixed, flota sobre el hero desde el primer frame, así el
   efecto vidrio se nota de entrada en vez de solo después de scrollear. */
.site-header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 100;
	background: transparent;
	transition: background-color 0.2s ease, backdrop-filter 0.2s ease, transform 0.3s ease;
}

/* Al hacer scroll, el header transparente queda pegado directo al contenido
   de abajo (secciones oscuras, etc.) — agrega un fondo translúcido propio
   una vez que el usuario se mueve, para que las cápsulas siempre floten
   sobre su propia "superficie" en vez de quedar cortadas contra lo de abajo. */
.site-header.is-scrolled {
	background: rgba(255, 254, 249, 0.75);
	-webkit-backdrop-filter: saturate(180%) blur(14px);
	backdrop-filter: saturate(180%) blur(14px);
}

/* Con el menú mobile abierto, el overlay a pantalla completa (opaco, ver
   más abajo) ya cubre todo el header — el blur del propio header detrás
   no aporta nada y en iOS Safari un backdrop-filter en el padre combinado
   con un hijo fixed también opaco genera un glitch de render real (el
   overlay se ve traslúcido, con el contenido de atrás transparentándose).
   Se apaga acá para eliminar esa combinación por completo. */
.site-header.is-nav-open {
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
	/* El overlay de pantalla completa aparece de golpe (display no se
	   puede animar) — si el propio blur del header tarda 0.2s en
	   apagarse, queda una fracción de segundo donde no coinciden, y eso
	   es el parpadeo que se percibe al abrir el menú. Sin transición acá,
	   ambos cambian en el mismo frame. */
	transition: none;
}

/* Se esconde al bajar, reaparece al subir — evita que el header quede
   flotando sobre contenido mientras el usuario navega hacia abajo. */
.site-header.is-hidden {
	transform: translateY(-110%);
}

.site-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-sm);
	padding-top: 1.25rem;
	padding-bottom: 1.25rem;
}

.site-header__left {
	display: flex;
	align-items: center;
	gap: var(--space-md);
}

.site-menu-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 48px;
	padding: 0 1.5rem;
	background: rgba(14, 42, 31, 0.05);
	border: none;
	border-radius: var(--radius-btn);
	font-family: var(--font-body);
	font-size: 0.9375rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	color: var(--color-ink);
	cursor: pointer;
	transition: background-color 0.2s ease;
}

.site-menu-toggle:hover {
	background: rgba(14, 42, 31, 0.1);
}

.site-logo {
	text-decoration: none;
	display: inline-flex;
	align-items: center;
}

.site-logo__mark {
	display: inline-flex;
	align-items: center;
	text-decoration: none;
	font-family: var(--font-display);
	font-weight: 600;
	font-size: 1.375rem;
	letter-spacing: -0.02em;
	color: var(--color-deep);
}

.site-logo__mark svg {
	width: 0.85em;
	height: 0.85em;
	margin: 0 -0.08em;
	color: var(--color-accent);
	stroke-width: 3.5;
}

.site-logo img,
.custom-logo {
	display: block;
	height: 28px;
	width: auto;
}

.site-header__cta {
	position: relative;
	overflow: hidden;
	white-space: nowrap;
	height: 48px;
	padding: 0 1.5rem;
	font-size: 0.9375rem;
}

/* "Menú" toggle + logo + "Quiero mi Diagnóstico" together are wider than
   a narrow phone screen at their desktop sizing — white-space: nowrap
   above means the CTA text can't wrap internally, so without this the
   row would force the whole page into horizontal scroll instead. Shrinks
   the toggle and CTA down at the width where that first becomes a risk. */
@media (max-width: 480px) {
	.site-header__left {
		gap: var(--space-xs);
	}

	.site-menu-toggle {
		height: 40px;
		padding: 0 0.85rem;
		font-size: 0.8125rem;
	}

	.site-header__cta {
		height: 40px;
		padding: 0 0.9rem;
		font-size: 0.8125rem;
	}
}

.site-header__cta span {
	position: relative;
	z-index: 1;
	transition: color 0.5s ease;
}

/* Sun-colored fill sweeps up from below on hover — Base44's Navbar CTA. */
.site-header__cta::before {
	content: '';
	position: absolute;
	inset: 0;
	background: var(--color-sun);
	transform: translateY(100%);
	transition: transform 0.5s var(--ease-out);
	z-index: 0;
}

.site-header__cta:hover::before,
.site-header__cta:focus-visible::before {
	transform: translateY(0);
}

.site-header__cta:hover span,
.site-header__cta:focus-visible span {
	color: var(--color-ink);
}

/* ==========================================================================
   Fullscreen menu overlay
   ========================================================================== */
.site-menu-overlay {
	position: fixed;
	inset: 0;
	z-index: 200;
	overflow-y: auto;
	background: var(--color-deep);
	color: var(--color-cream-on-deep);
	clip-path: circle(0% at 3.5rem 3rem);
	visibility: hidden;
	/* visibility switches only once the closing clip-path animation has
	   finished, so the circle visibly shrinks shut instead of the whole
	   overlay just vanishing mid-animation. */
	transition: clip-path 0.9s var(--ease-out), visibility 0s 0.9s;
}

.site-menu-overlay.is-open {
	clip-path: circle(150% at 3.5rem 3rem);
	visibility: visible;
	transition: clip-path 0.9s var(--ease-out), visibility 0s;
}

.site-menu-overlay__close {
	position: absolute;
	top: 1.5rem;
	left: 1.5rem;
	z-index: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	background: rgba(255, 248, 193, 0.1);
	border: none;
	border-radius: var(--radius-btn);
	color: var(--color-cream-on-deep);
	cursor: pointer;
	transition: background-color 0.2s ease;
}

.site-menu-overlay__close:hover {
	background: rgba(255, 248, 193, 0.2);
}

.site-menu-overlay__close svg {
	width: 18px;
	height: 18px;
}

.site-menu-overlay__grid {
	display: grid;
	gap: var(--space-xl);
	padding: 7rem 0 var(--space-xl);
	min-height: 100%;
	align-content: center;
}

.site-menu-overlay__nav {
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.site-menu-overlay__link {
	display: flex;
	align-items: baseline;
	gap: var(--space-sm);
	padding: var(--space-sm) 0;
	border-top: 1px solid rgba(255, 248, 193, 0.15);
	text-decoration: none;
	font-family: var(--font-display);
	font-weight: 300;
	font-size: clamp(2.25rem, 1.3rem + 5.5vw, 5rem);
	line-height: 1.1;
	color: var(--color-cream-on-deep);
	opacity: 0;
	transform: translateY(40px);
	transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out), color 0.3s ease;
}

.site-menu-overlay.is-open .site-menu-overlay__link {
	opacity: 1;
	transform: translateY(0);
}

.site-menu-overlay__link:hover,
.site-menu-overlay__link:focus-visible {
	color: var(--color-sun);
}

.site-menu-overlay__link-num {
	font-family: var(--font-body);
	font-size: 0.9rem;
	font-weight: 500;
	color: rgba(255, 248, 193, 0.4);
}

.site-menu-overlay__link-label {
	display: inline-block;
	transition: transform 0.5s var(--ease-out), font-style 0.2s ease;
}

.site-menu-overlay__link:hover .site-menu-overlay__link-label,
.site-menu-overlay__link:focus-visible .site-menu-overlay__link-label {
	transform: translateX(0.25em);
	font-family: var(--font-script);
	font-style: italic;
}

.site-menu-overlay__aside {
	display: flex;
	flex-direction: column;
	gap: var(--space-lg);
}

.site-menu-overlay__group-title {
	margin: 0 0 var(--space-xs);
	font-size: 0.75rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.25em;
	color: var(--color-sun);
}

.site-menu-overlay__group a {
	display: block;
	padding: 0.3rem 0;
	color: rgba(255, 248, 193, 0.75);
	text-decoration: none;
	transition: color 0.2s ease;
}

.site-menu-overlay__group a:hover {
	color: var(--color-cream-on-deep);
}

.site-menu-overlay__langs {
	display: flex;
	gap: 0.5rem;
}

.site-menu-overlay__langs a {
	display: inline-flex;
	padding: 0.35rem 0.75rem;
	border: 1px solid rgba(255, 248, 193, 0.25);
	border-radius: var(--radius-btn);
	font-size: 0.8125rem;
	font-weight: 600;
	color: rgba(255, 248, 193, 0.75);
	text-decoration: none;
	transition: border-color 0.2s ease, color 0.2s ease;
}

.site-menu-overlay__langs a:hover,
.site-menu-overlay__langs a.is-active {
	border-color: var(--color-sun);
	color: var(--color-cream-on-deep);
}

.site-menu-overlay__cta {
	color: var(--color-cream-on-deep);
	text-decoration: underline;
	text-decoration-color: var(--color-sun);
	text-underline-offset: 8px;
	transition: color 0.2s ease;
}

.site-menu-overlay__cta:hover {
	color: var(--color-sun);
}

@media (min-width: 900px) {
	.site-menu-overlay__grid {
		grid-template-columns: 8fr 4fr;
	}
}

@media (prefers-reduced-motion: reduce) {
	.site-menu-overlay {
		transition: opacity 0.3s ease;
		clip-path: none;
		opacity: 0;
		pointer-events: none;
	}

	.site-menu-overlay.is-open {
		clip-path: none;
		opacity: 1;
		pointer-events: auto;
	}

	.site-menu-overlay__link {
		transform: none;
	}
}

/* ==========================================================================
   Hero
   ========================================================================== */
.hero {
	position: relative;
	overflow: hidden;
	padding: calc(var(--space-2xl) + 2rem) 0 var(--space-xl);
}

/* Concentric ripple rings behind the headline — Base44's Circles
   component (its source wasn't available to copy directly, since Base44
   doesn't expose component files through its API; rebuilt from the
   reference screenshot instead). Purely a static background texture, not
   an entrance moment, so no animation — matches the reference, which
   doesn't animate these either. */
.hero__rings {
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 0;
	pointer-events: none;
}

.hero__ring {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	border-radius: 50%;
	border: 1px solid rgba(138, 109, 47, 0.16);
}

.hero__ring--1 {
	width: 420px;
	height: 420px;
}

.hero__ring--2 {
	width: 700px;
	height: 700px;
}

.hero__ring--3 {
	width: 980px;
	height: 980px;
}

.hero__ring--4 {
	width: 1260px;
	height: 1260px;
}

/* Título, eyebrow, lead y CTA entran en cascada detrás de las formas —
   cada uno arranca --pm-delay milisegundos después del anterior (ver
   section-hero.php), nunca todos a la vez. */
.hero__reveal {
	opacity: 0;
	transform: translateY(16px);
	animation: pm-reveal 650ms var(--ease-out) forwards;
	animation-delay: var(--pm-delay, 0ms);
}

@keyframes pm-reveal {
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* Scroll-triggered reveals below the fold — same translateY+opacity
   language and 650ms/ease-out timing as .hero__reveal above, but gated by
   IntersectionObserver (see main.js) since these sections load off-screen.
   A lone `.reveal` element (an eyebrow, a title, a lead paragraph) needs no
   extra stagger: because it's observed on its own, its trigger point
   naturally follows its position on the page, which already reads as a
   cascade when a few sit stacked close together. `.reveal-group` is for the
   opposite case — a grid of same-height siblings (cards, pillars, stat
   tiles) that would otherwise all cross the viewport line at once; its
   children stagger via the capped nth-child delays below instead. */
.reveal {
	opacity: 0;
	transform: translateY(20px);
	transition: opacity 650ms var(--ease-out), transform 650ms var(--ease-out);
}

.reveal.is-visible {
	opacity: 1;
	transform: translateY(0);
}

.reveal-group > * {
	opacity: 0;
	transform: translateY(20px);
	transition: opacity 550ms var(--ease-out), transform 550ms var(--ease-out);
}

.reveal-group.is-visible > * {
	opacity: 1;
	transform: translateY(0);
}

.reveal-group.is-visible > *:nth-child(2) { transition-delay: 80ms; }
.reveal-group.is-visible > *:nth-child(3) { transition-delay: 160ms; }
.reveal-group.is-visible > *:nth-child(4) { transition-delay: 240ms; }
.reveal-group.is-visible > *:nth-child(n + 5) { transition-delay: 300ms; }

@media (prefers-reduced-motion: reduce) {
	.hero__reveal,
	.hero__word,
	.hero__eyebrow-fade,
	.hero__sub-fade {
		animation: none;
		transform: none;
		opacity: 1;
	}

	.diagnostico__reaffirm,
	.diagnostico__schedule {
		transition: none;
	}

	.reveal,
	.reveal-group > * {
		transition: none;
		transform: none;
		opacity: 1;
	}

	.service-card,
	.resource-card,
	.pillar,
	.pillar__num {
		transition: none;
	}

	.service-card:hover,
	.resource-card:hover,
	.pillar:hover .pillar__num,
	.pillar:focus-within .pillar__num {
		transform: none;
	}
}

.hero__inner {
	position: relative;
	z-index: 1;
	max-width: 1000px;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}

.hero__eyebrow-fade {
	margin-bottom: var(--space-md);
	opacity: 0;
	animation: pm-reveal 1s ease forwards;
	animation-delay: 0.2s;
}

.hero__title {
	margin: 0;
	max-width: 15ch;
	font-family: var(--font-display);
	font-weight: 300;
	font-size: clamp(2.8rem, 1.6rem + 5.5vw, 8rem);
	line-height: 1;
	letter-spacing: -0.02em;
	color: var(--color-ink);
}

/* Each word slides up from below on load, one by one — see the inline
   animation-delay on .hero__word in section-hero.php. The mask clips the
   slide so a word doesn't visibly overlap the line above it in transit. */
.hero__word-mask {
	display: inline-block;
	overflow: hidden;
	padding-bottom: 0.12em;
	margin-right: 0.22em;
	vertical-align: bottom;
}

.hero__word {
	display: inline-block;
	opacity: 0;
	transform: translateY(110%);
	animation: hero-word-in 1.1s var(--ease-out) forwards;
}

@keyframes hero-word-in {
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.hero__sub-fade {
	opacity: 0;
	transform: translateY(20px);
	animation: pm-reveal 1s var(--ease-out) forwards;
	animation-delay: 1.1s;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.hero__title-accent {
	margin: var(--space-sm) 0 0;
	font-family: var(--font-script);
	font-style: italic;
	font-weight: 400;
	font-size: clamp(1.5rem, 1rem + 2.5vw, 2.25rem);
	color: var(--color-accent);
}

.hero__lead {
	margin-top: var(--space-md);
	font-size: 1.1875rem;
	color: var(--color-ink-soft);
	max-width: 42ch;
}

.hero__actions {
	margin-top: var(--space-lg);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-md);
}

.hero__actions-line {
	display: none;
	height: 1px;
	width: 5rem;
	background: var(--color-ink);
}

@media (min-width: 640px) {
	.hero__actions {
		flex-direction: row;
		gap: 0;
	}

	.hero__actions-line {
		display: block;
		margin: 0 var(--space-md);
	}
}

.hero__note {
	margin-top: var(--space-sm);
	font-size: 0.9rem;
	color: var(--color-ink-soft);
}

/* ==========================================================================
   Statement — single full-viewport thesis line, Home only
   ========================================================================== */
.statement {
	min-height: 68vh;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: var(--space-xl) 0;
}

.statement__inner {
	max-width: 1100px;
}

.statement__text {
	font-family: var(--font-display);
	font-weight: 300;
	font-size: clamp(2rem, 1.3rem + 3.5vw, 4.5rem);
	line-height: 1.2;
	letter-spacing: -0.01em;
	color: var(--color-ink);
	margin: 0;
}

/* font-size lives on the CONTAINER, not the word span — .statement__rotator's
   own height (1.15em) and each word's ±100% slide transform both compute
   against this element's font-size. Setting the huge clamp() only on the
   child left the container sized off the small inherited body font-size
   instead, so the mask was ~20px tall against ~176px text and the ±100%
   slide moved words by only that same ~20px — nowhere near enough to
   clear their own height, so outgoing/incoming words visibly overlapped
   instead of cleanly sliding off.

   width is 100% + text-align: center, not width: max-content — the only
   child is position: absolute (out of normal flow), so it contributes
   nothing for max-content to measure against; the container collapsed to
   ~0 width and overflow: hidden clipped the word to nothing. */
.statement__rotator {
	position: relative;
	width: 100%;
	margin: 0.1em 0;
	height: 1.15em;
	overflow: hidden;
	font-family: var(--font-script);
	font-style: italic;
	font-size: clamp(3.5rem, 1rem + 13vw, 11rem);
	line-height: 1;
	text-align: center;
}

.statement__rotator-word {
	position: absolute;
	inset: 0;
	display: block;
	color: var(--color-deep);
	transition: transform 0.4s var(--ease-out), opacity 0.4s var(--ease-out);
}

.statement__rotator-word.is-leaving {
	transform: translateY(-100%);
	opacity: 0;
}

.statement__rotator-word.is-entering {
	transition: none;
	transform: translateY(100%);
	opacity: 0;
}

.statement__arrow {
	display: inline-flex;
	margin-top: var(--space-lg);
	color: var(--color-ink-soft);
	animation: statement-bounce 2s ease-in-out infinite;
}

.statement__arrow svg {
	width: 22px;
	height: 22px;
}

@keyframes statement-bounce {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(8px); }
}

@media (prefers-reduced-motion: reduce) {
	.statement__arrow {
		animation: none;
	}

	.statement__rotator-word {
		transition: opacity 0.4s ease;
	}

	.statement__rotator-word.is-leaving,
	.statement__rotator-word.is-entering {
		transform: none;
	}
}

/* ==========================================================================
   Problem
   ========================================================================== */
.problem {
	padding: var(--space-xl) 0;
}

.problem .section-title {
	max-width: none;
	font-size: clamp(3rem, 1.2rem + 9vw, 9rem);
	font-weight: 300;
	line-height: 0.95;
	letter-spacing: -0.02em;
}

.problem__text {
	font-size: 1.0625rem;
	color: var(--color-ink);
	margin: 0;
}

.problem__closing {
	margin-top: var(--space-2xl);
	font-family: var(--font-display);
	font-weight: 300;
	font-size: clamp(2rem, 1rem + 3.2vw, 4.2rem);
	line-height: 1.1;
	max-width: 46rem;
	color: var(--color-ink);
}

/* ==========================================================================
   Case study / social proof
   ========================================================================== */
.case-study {
	padding: var(--space-2xl) 0;
	background: var(--color-ink);
	color: var(--color-bg);
}

.case-study__header {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--space-md);
}

.case-study__title {
	margin: var(--space-sm) 0 0;
	max-width: 44rem;
	font-family: var(--font-display);
	font-weight: 300;
	font-size: clamp(2.25rem, 1.4rem + 4vw, 4.5rem);
	line-height: 1.05;
	letter-spacing: -0.01em;
	color: var(--color-bg);
}

.case-study__name {
	font-size: 0.9rem;
	color: rgba(255, 254, 249, 0.5);
}

.case-study__inner {
	margin-top: var(--space-xl);
	display: grid;
	grid-template-columns: 1.4fr 1fr;
	gap: var(--space-xl);
	align-items: center;
}

.case-study__media {
	aspect-ratio: 4 / 3;
	overflow: hidden;
	border-radius: var(--radius);
}

.case-study__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.case-study__content {
	display: flex;
	flex-direction: column;
	gap: var(--space-lg);
}

.case-study__body {
	font-size: 1.125rem;
	line-height: 1.65;
	color: rgba(255, 254, 249, 0.75);
}

.case-study__stats {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--space-md);
}

/* Ontario's case study has a 4th stat (locations) — a real CSS class, not
   an inline style, specifically so the shared max-width:720px rule below
   (which also targets plain .case-study__stats) can still collapse it to
   1 column on mobile. An inline style would have silently won over any
   later media query, stuck at 4 columns forever on a phone screen. */
.case-study__stats--four {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

@media (max-width: 900px) {
	.case-study__inner {
		grid-template-columns: 1fr;
	}
}

.stat {
	border-top: 1px solid rgba(255, 254, 249, 0.2);
	padding-top: var(--space-sm);
}

.stat__value {
	display: block;
	font-family: var(--font-display);
	font-size: clamp(2.75rem, 2rem + 3vw, 4.5rem);
	font-weight: 200;
	color: var(--color-bg);
	line-height: 1;
	font-variant-numeric: tabular-nums;
}

.stat__label {
	display: block;
	margin-top: var(--space-xs);
	color: rgba(255, 254, 249, 0.6);
	font-size: 0.95rem;
}

/* ==========================================================================
   Sistema Integral (anchor offer)
   ========================================================================== */
.system {
	padding: var(--space-2xl) 0;
}

.system__header {
	display: grid;
	gap: var(--space-lg);
	align-items: end;
}

.system__eyebrow {
	font-size: 0.8125rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.25em;
	color: var(--color-deep);
}

.system__title {
	margin: var(--space-sm) 0 0;
	font-family: var(--font-display);
	font-weight: 300;
	font-size: clamp(2.25rem, 1.2rem + 6vw, 6.5rem);
	line-height: 1;
	letter-spacing: -0.01em;
	color: var(--color-ink);
}

.system__intro {
	font-size: 1.125rem;
	line-height: 1.65;
	color: var(--color-ink-soft);
}

@media (min-width: 900px) {
	.system__header {
		grid-template-columns: 7fr 5fr;
	}

	.system__header .system__intro {
		padding-bottom: 0.3em;
	}
}

.system__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--space-lg) var(--space-md);
	margin-top: var(--space-2xl);
}

.pillar {
	padding-top: var(--space-md);
}

.pillar__rule {
	display: block;
	height: 1px;
	background: var(--color-line-soft);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.9s var(--ease-out);
}

.system__grid.is-visible .pillar__rule {
	transform: scaleX(1);
}

.system__grid.is-visible > *:nth-child(2) .pillar__rule { transition-delay: 80ms; }
.system__grid.is-visible > *:nth-child(3) .pillar__rule { transition-delay: 160ms; }
.system__grid.is-visible > *:nth-child(4) .pillar__rule { transition-delay: 240ms; }

/* Number swap on hover: a faint ghost numeral slides up and out while an
   italic gold one slides up into view from below — same idea as the
   accent-script hover elsewhere, applied as a two-layer stack since it
   needs to slide rather than crossfade. */
.pillar__num-stack {
	position: relative;
	margin-top: var(--space-md);
	height: 1em;
	overflow: hidden;
	font-family: var(--font-display);
	font-weight: 200;
	font-size: 3.5rem;
	line-height: 1;
}

.pillar__num-ghost,
.pillar__num-hover {
	display: block;
	transition: transform 0.5s var(--ease-out);
}

.pillar__num-ghost {
	color: var(--color-ink);
	opacity: 0.12;
}

.pillar__num-hover {
	position: absolute;
	inset: 0;
	transform: translateY(100%);
	font-family: var(--font-script);
	font-style: italic;
	font-weight: 400;
	color: var(--color-deep);
}

@media (hover: hover) and (pointer: fine) {
	.pillar:hover .pillar__num-ghost,
	.pillar:focus-within .pillar__num-ghost {
		transform: translateY(-100%);
	}

	.pillar:hover .pillar__num-hover,
	.pillar:focus-within .pillar__num-hover {
		transform: translateY(0);
	}
}

.pillar__sub {
	margin-top: var(--space-md);
	font-size: 0.75rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.2em;
	color: var(--color-accent);
}

.pillar__title {
	margin-top: 0.6rem;
	font-family: var(--font-display);
	font-weight: 400;
	font-size: 1.375rem;
	color: var(--color-ink);
}

.pillar__title a {
	text-decoration: none;
	color: inherit;
}

.pillar__title a:hover {
	text-decoration: underline;
}

.pillar__body {
	margin-top: var(--space-sm);
	font-size: 1rem;
	line-height: 1.6;
	color: var(--color-ink-soft);
}

.system__callout {
	margin-top: var(--space-2xl);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-lg);
	padding: var(--space-lg);
	border-radius: var(--radius);
	background: rgba(232, 220, 184, 0.6);
}

.system__callout p {
	max-width: 46rem;
	font-size: 1.125rem;
	line-height: 1.6;
	color: var(--color-ink);
	margin: 0;
}

.system__callout strong {
	font-weight: 600;
}

@media (max-width: 900px) {
	.system__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 560px) {
	.system__grid {
		grid-template-columns: 1fr;
	}
}

/* ==========================================================================
   Servicios independientes
   ========================================================================== */
.services {
	padding: var(--space-2xl) 0;
}

.services__header {
	display: grid;
	gap: var(--space-lg);
	align-items: end;
}

.services__kicker {
	font-family: var(--font-script);
	font-style: italic;
	font-size: 1.375rem;
	color: var(--color-accent);
	margin: 0;
}

.services__title {
	margin: var(--space-sm) 0 0;
	font-family: var(--font-display);
	font-weight: 300;
	font-size: clamp(2.25rem, 1.2rem + 6vw, 6.5rem);
	line-height: 1;
	letter-spacing: -0.01em;
	color: var(--color-ink);
}

.services__intro {
	font-size: 1.125rem;
	line-height: 1.65;
	color: var(--color-ink-soft);
}

@media (min-width: 900px) {
	.services__header {
		grid-template-columns: 7fr 5fr;
	}

	.services__header .services__intro {
		padding-bottom: 0.3em;
	}
}

.services__list {
	margin-top: var(--space-2xl);
}

.service-row {
	position: relative;
	display: flex;
	align-items: baseline;
	gap: var(--space-lg);
	padding: var(--space-md) 0;
	text-decoration: none;
	color: inherit;
}

.service-row__rule {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 1px;
	background: var(--color-line-soft);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.9s var(--ease-out);
}

.services__list.is-visible .service-row__rule {
	transform: scaleX(1);
}

.services__list.is-visible > *:nth-child(2) .service-row__rule { transition-delay: 80ms; }
.services__list.is-visible > *:nth-child(3) .service-row__rule { transition-delay: 160ms; }
.services__list.is-visible > *:nth-child(4) .service-row__rule { transition-delay: 240ms; }

.service-row__num {
	flex: none;
	font-family: var(--font-script);
	font-style: italic;
	font-size: 1.375rem;
	color: var(--color-accent);
}

.service-row__text {
	display: flex;
	flex: 1 1 auto;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--space-sm) var(--space-lg);
}

.service-row__title {
	font-family: var(--font-display);
	font-weight: 400;
	font-size: 1.5rem;
	color: var(--color-ink);
	transition: transform 0.35s var(--ease-out);
}

.service-row__body {
	font-size: 1.0625rem;
	color: var(--color-ink-soft);
	max-width: 42ch;
}

/* Two icons stacked in one circle: a subtle diagonal arrow at rest, a
   filled circle with a straight right arrow on hover — matches Base44's
   ServiceRow exactly (a quiet "open" affordance vs. an active "go" one). */
.service-row__arrow {
	position: relative;
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	border: 1px solid var(--color-line);
	color: var(--color-ink-soft);
	transition: background-color 0.25s var(--ease-out), border-color 0.25s var(--ease-out);
}

.service-row__arrow-icon {
	position: absolute;
	width: 18px;
	height: 18px;
	transition: opacity 0.2s ease, transform 0.25s var(--ease-out);
}

.service-row__arrow-icon--right {
	opacity: 0;
	transform: scale(0.6);
	color: var(--color-cream-on-deep);
}

@media (hover: hover) and (pointer: fine) {
	.service-row:hover .service-row__title,
	.service-row:focus-visible .service-row__title {
		transform: translateX(6px);
	}

	.service-row:hover .service-row__arrow,
	.service-row:focus-visible .service-row__arrow {
		border-color: var(--color-deep);
		background: var(--color-deep);
	}

	.service-row:hover .service-row__arrow-icon--diag,
	.service-row:focus-visible .service-row__arrow-icon--diag {
		opacity: 0;
		transform: scale(0.6);
	}

	.service-row:hover .service-row__arrow-icon--right,
	.service-row:focus-visible .service-row__arrow-icon--right {
		opacity: 1;
		transform: scale(1);
	}
}

@media (max-width: 640px) {
	.service-row {
		flex-wrap: wrap;
	}

	.service-row__arrow {
		display: none;
	}
}

/* ==========================================================================
   Services — cursor-following thumbnail (desktop hover only)
   ========================================================================== */
.services__list-wrap {
	position: relative;
}

.services__thumb {
	position: fixed;
	left: 0;
	top: 0;
	z-index: 40;
	width: 16rem;
	height: 20rem;
	border-radius: 1.5rem;
	overflow: hidden;
	pointer-events: none;
	opacity: 0;
	transform: translate(-50%, -50%) scale(0.92);
	transition: transform 0.15s linear, opacity 0.3s ease;
	display: none;
}

.services__thumb.is-visible {
	opacity: 1;
}

.services__thumb-img {
	position: absolute;
	inset: 0;
	opacity: 0;
	transition: opacity 0.5s ease;
}

.services__thumb-img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.services__thumb-img.is-active {
	opacity: 1;
}

@media (hover: hover) and (pointer: fine) {
	.services__thumb {
		display: block;
	}
}

/* ==========================================================================
   Differentiators
   ========================================================================== */
.differentiators {
	padding: var(--space-2xl) 0;
	overflow: hidden;
}

.differentiators__grid {
	display: grid;
	gap: var(--space-2xl);
	align-items: center;
}

@media (min-width: 900px) {
	.differentiators__grid {
		grid-template-columns: 5fr 7fr;
	}
}

.differentiators__media {
	position: relative;
	width: 100%;
	max-width: 420px;
	margin: 0 auto;
}

/* Slow, decorative, purely ambient — a 40s rotation is well below the
   threshold where it reads as busy, and it's gated out entirely under
   reduced motion below. */
.differentiators__ring {
	position: absolute;
	inset: -2.5rem;
	border: 1px solid rgba(138, 109, 47, 0.4);
	border-radius: 50%;
	animation: differentiators-spin 40s linear infinite;
}

@keyframes differentiators-spin {
	to {
		transform: rotate(360deg);
	}
}

.differentiators__blob {
	position: absolute;
	top: -3rem;
	left: -4rem;
	width: 12rem;
	height: 12rem;
	border-radius: 50%;
	background: var(--color-accent-soft);
	z-index: 0;
}

.differentiators__photo {
	position: relative;
	z-index: 1;
	aspect-ratio: 4 / 5;
	overflow: hidden;
	border-radius: 999px 999px 0 0;
}

.differentiators__photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

@media (prefers-reduced-motion: reduce) {
	.differentiators__ring {
		animation: none;
	}
}

.differentiators__eyebrow {
	font-size: 0.8125rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.25em;
	color: var(--color-deep);
	margin: 0;
}

.differentiators__title {
	margin: var(--space-sm) 0 0;
	font-family: var(--font-display);
	font-weight: 300;
	font-size: clamp(2.25rem, 1.4rem + 5vw, 5.5rem);
	line-height: 1;
	letter-spacing: -0.01em;
	color: var(--color-ink);
	max-width: 44rem;
}

.differentiators__list {
	margin-top: var(--space-2xl);
	list-style: none;
	padding: 0;
}

.differentiators__item {
	position: relative;
	display: flex;
	align-items: baseline;
	gap: var(--space-lg);
	padding: var(--space-md) 0;
	font-size: 1.125rem;
	line-height: 1.6;
	color: var(--color-ink-soft);
}

.differentiators__rule {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 1px;
	background: var(--color-line-soft);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.9s var(--ease-out);
}

.differentiators__list.is-visible .differentiators__rule {
	transform: scaleX(1);
}

.differentiators__list.is-visible > *:nth-child(2) .differentiators__rule { transition-delay: 80ms; }
.differentiators__list.is-visible > *:nth-child(3) .differentiators__rule { transition-delay: 160ms; }
.differentiators__list.is-visible > *:nth-child(4) .differentiators__rule { transition-delay: 240ms; }

.differentiators__num {
	flex: none;
	font-family: var(--font-script);
	font-style: italic;
	font-size: 1.25rem;
	color: var(--color-accent);
}

.differentiators__cta {
	margin-top: var(--space-xl);
}

/* ==========================================================================
   Diagnóstico
   ========================================================================== */
/* Reconsidered after seeing the shipped section next to Base44's: keeping
   this dark while every other section flipped light made it read as a
   different, disconnected product, and the FluentForms overrides below
   needed a real pass regardless (the checkbox layout didn't match
   Base44's card grid yet, dark or light) — so this section now matches
   Base44's light background like the rest of Home. */
.diagnostico {
	padding: var(--space-2xl) 0;
	background: #f4efdf;
	color: var(--color-ink);
}

/* On the standalone /diagnostico/ page this section is the very first
   thing under the fixed header, same situation .hero is always in — so
   it needs the same extra clearance .hero adds (see .hero above), which
   this section doesn't need when it appears further down the homepage
   or the Sistema Integral page (its two other, non-first placements). */
.page-diagnostico-standalone .diagnostico {
	padding-top: calc(var(--space-2xl) + 2rem);
}

.diagnostico__inner {
	max-width: none;
	display: grid;
	gap: var(--space-xl);
}

.diagnostico__info {
	max-width: 560px;
}

@media (min-width: 1000px) {
	.diagnostico__inner {
		grid-template-columns: 5fr 7fr;
		align-items: start;
	}

	.diagnostico__info {
		position: sticky;
		top: 8rem;
	}
}

/* Matches Base44's Diagnostic.jsx exactly (font-serif text-2xl italic
   text-gold) — same treatment as .services__kicker, not the standard
   uppercase-tracked .eyebrow used elsewhere on Home. */
.diagnostico__kicker {
	font-family: var(--font-script);
	font-style: italic;
	font-size: 1.375rem;
	color: var(--color-accent);
	margin: 0;
}

.diagnostico__title {
	margin: var(--space-sm) 0 0;
	font-family: var(--font-display);
	font-weight: 300;
	font-size: clamp(2.25rem, 1.2rem + 5.5vw, 5.5rem);
	line-height: 1.05;
	letter-spacing: -0.01em;
	color: var(--color-ink);
}

.diagnostico__lead {
	margin-top: var(--space-md);
	font-size: 1.125rem;
	color: var(--color-ink-soft);
	max-width: 56ch;
}

/* Reassurance line for the highest-stakes ask on the site — dimmer than
   the lead since it's a supporting reassurance, not the primary pitch. */
.diagnostico__reassurance {
	margin-top: 0.6rem;
	font-size: 0.9375rem;
	color: var(--color-ink-soft);
	max-width: 56ch;
}

.diagnostico__clocks {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--space-md);
	margin-top: var(--space-lg);
	padding-top: var(--space-md);
	border-top: 1px solid var(--color-line);
}

.diagnostico__clock-label {
	margin: 0;
	font-size: 0.75rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.2em;
	color: var(--color-accent);
}

.diagnostico__clock-time {
	margin: 0.4rem 0 0;
	font-family: var(--font-display);
	font-weight: 200;
	font-size: clamp(1.5rem, 1rem + 2vw, 2.25rem);
	color: var(--color-ink);
	font-variant-numeric: tabular-nums;
}

.diagnostico__quicklink {
	margin-top: var(--space-lg);
}

.diagnostico__quicklink p {
	margin: 0 0 0.35rem;
	color: var(--color-ink-soft);
	font-size: 0.9375rem;
}

.diagnostico__quicklink a {
	font-family: var(--font-display);
	font-size: 1.125rem;
	color: var(--color-deep);
	text-decoration: underline;
	text-decoration-color: var(--color-accent);
	text-underline-offset: 6px;
	transition: color 0.2s ease;
}

.diagnostico__quicklink a:hover {
	color: var(--color-deep-ink);
}

.diagnostico__form {
	margin-top: 0;
}

/* Fluent Forms renders the checkbox group's own label — shown as a
   visible uppercase heading above the card grid, matching Base44's
   "¿Cuál es tu mayor reto ahora mismo?" treatment, instead of the
   visually-hidden version this used to be (when the lead paragraph
   above was doing that job instead). */
.diagnostico__form .ff-el-group:first-of-type .ff-el-input--label {
	margin-bottom: var(--space-sm);
}

.diagnostico__form .ff-el-input--label label {
	display: block;
	margin-bottom: var(--space-xs);
	font-family: var(--font-body);
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--color-deep);
}

/* The plugin's own tooltip mechanism depends on CSS that's intentionally
   stripped (see functions.php) — any help text is communicated as plain
   copy in the template instead, so the tooltip icon itself stays hidden. */
.diagnostico__form .ff-el-tooltip {
	display: none;
}

/* Two mutually exclusive question groups share this one form: "¿cuál es
   tu reto?" for an organic visitor who doesn't know yet, and "¿ya cuentas
   con algo de esto?" for a visitor who arrived already saying what they
   want (Sistema Integral or a specific pillar). "ya_tienes" starts
   hidden by default in plain CSS — no JS-timing flash — and main.js adds
   `.is-high-intent` on the section to flip which one shows once it reads
   the `?interes=` query string. */
.diagnostico__form .ff-el-group:has(input[name='ya_tienes[]']) {
	display: none;
}

.diagnostico.is-high-intent .ff-el-group:has(input[name='reto[]']) {
	display: none;
}

.diagnostico.is-high-intent .ff-el-group:has(input[name='ya_tienes[]']) {
	display: block;
}

.diagnostico__form input[type='email'] {
	width: 100%;
	padding: var(--space-sm) var(--space-md);
	border: 1px solid var(--color-line);
	border-radius: var(--radius);
	background: var(--color-surface);
	color: var(--color-ink);
	font-family: var(--font-body);
	font-size: 1.0625rem;
	transition: border-color 0.15s ease;
}

.diagnostico__form input[type='email']::placeholder {
	color: var(--color-ink-soft);
}

.diagnostico__form input[type='email']:hover {
	border-color: var(--color-accent);
}

.diagnostico__form .ff-el-input--content {
	display: grid;
	gap: var(--space-md);
	margin-bottom: var(--space-lg);
}

@media (min-width: 640px) {
	.diagnostico__form .ff-el-group:has(input[name='reto[]']) .ff-el-input--content,
	.diagnostico__form .ff-el-group:has(input[name='ya_tienes[]']) .ff-el-input--content {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* Base44's card: a white rounded box, a hollow circle in the corner
   instead of a checkbox on the left, title + description always visible
   (the description used to be a reveal-on-check reward; Base44 shows it
   upfront so a visitor can self-diagnose before picking anything). */
.diagnostico__form .ff-el-form-check {
	position: relative;
	background: var(--color-surface);
	border: 1px solid var(--color-line);
	border-radius: var(--radius);
	transition: border-color 0.15s ease, transform 0.15s var(--ease-out);
}

.diagnostico__form .ff-el-form-check:hover {
	border-color: var(--color-accent);
	transform: translateY(-2px);
}

.diagnostico__reaffirm {
	margin: 0;
	padding: 0 var(--space-md) var(--space-md);
	font-size: 0.9375rem;
	line-height: 1.5;
	color: var(--color-ink-soft);
}

.diagnostico__form .ff-el-form-check-label {
	display: block !important;
	padding: var(--space-md) 2.75rem var(--space-sm) var(--space-md);
	margin: 0 !important;
	cursor: pointer;
	font-size: 1.0625rem;
	font-weight: 600;
	color: var(--color-ink);
}

.diagnostico__form .ff-el-form-check-input {
	position: absolute;
	top: var(--space-md);
	right: var(--space-md);
	appearance: none;
	-webkit-appearance: none;
	width: 22px;
	height: 22px;
	margin: 0 !important;
	border: 2px solid var(--color-line);
	border-radius: 50%;
	background: var(--color-surface);
	cursor: pointer;
	transition: border-color 0.15s ease, background-color 0.15s ease;
}

.diagnostico__form .ff-el-form-check-input:checked {
	border-color: var(--color-deep);
	background: var(--color-deep);
	box-shadow: inset 0 0 0 3px var(--color-surface);
}

.diagnostico__form .ff_submit_btn_wrapper {
	text-align: left;
}

.diagnostico__form .ff-btn-submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 56px;
	padding: 0 var(--space-lg);
	background: var(--color-deep) !important;
	color: var(--color-cream-on-deep) !important;
	border: none !important;
	border-radius: var(--radius-btn);
	font-family: var(--font-body);
	font-size: 1.0625rem;
	font-weight: 600;
	cursor: pointer;
	transition: background-color 0.15s ease, transform 0.15s ease;
}

.diagnostico__form .ff-btn-submit:hover {
	background: var(--color-deep-ink) !important;
	transform: translateY(-2px);
}

/* No red exists in the 3-color brand palette — the invalid state reuses
   Autoridad Dorada at double border weight, so it reads as urgent through
   emphasis rather than a fourth hue. */
.diagnostico__form .ff-el-is-error .ff-el-form-check {
	border-width: 2px;
	border-color: var(--color-accent);
}

.diagnostico__form .error {
	color: var(--color-accent-dark);
	font-size: 0.875rem;
	margin-top: var(--space-xs);
}

/* Fluent Forms' own top-of-form error summary (shown on a failed submit
   attempt) — same on-brand gold-emphasis treatment as the inline field
   errors above, not the plugin's stock red. */
.diagnostico__form .ff-errors-in-stack:not(:empty) {
	margin-bottom: var(--space-sm);
	padding: var(--space-sm) var(--space-md);
	border: 1px solid var(--color-accent);
	border-radius: var(--radius);
	background: var(--color-accent-soft);
	color: var(--color-accent-dark);
	font-size: 0.9375rem;
}

.diagnostico__form .ff-errors-in-stack:not(:empty) ul {
	margin: 0;
	padding-left: 1.2rem;
}

.diagnostico__email-note {
	margin: var(--space-sm) 0 var(--space-xs);
	font-size: 0.9375rem;
	color: var(--color-ink-soft);
}

.diagnostico__email-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 44px;
	padding: 0 var(--space-md);
	background: transparent;
	color: var(--color-ink);
	border: 1px solid var(--color-line);
	border-radius: var(--radius-btn);
	font-family: var(--font-body);
	font-size: 0.9375rem;
	font-weight: 600;
	cursor: pointer;
	transition: border-color 0.15s ease, color 0.15s ease;
}

.diagnostico__email-btn:hover {
	border-color: var(--color-accent);
	color: var(--color-deep);
}

/* Revealed by main.js right after a successful submission (either path)
   so a lead can book a call immediately, without waiting on a reply —
   the whole point being that conversion doesn't depend on response time. */
.diagnostico__schedule {
	max-height: 0;
	opacity: 0;
	overflow: hidden;
	transition: max-height 0.4s var(--ease-out), opacity 0.3s ease, margin-top 0.4s var(--ease-out);
}

.diagnostico__schedule.is-visible {
	max-height: 220px;
	opacity: 1;
	margin-top: var(--space-lg);
	padding-top: var(--space-lg);
	border-top: 1px solid var(--color-deep-line);
}

.diagnostico__schedule-lead {
	margin: 0 0 var(--space-sm);
	font-size: 1.0625rem;
	color: var(--color-cream-on-deep);
}

.diagnostico__noscript-note {
	margin: var(--space-md) 0 var(--space-sm);
	font-size: 0.9375rem;
	color: #c3ddc9;
}

/* ==========================================================================
   Closing CTA
   ========================================================================== */
.cta-final {
	padding: var(--space-2xl) 0;
	background: var(--color-deep);
	color: var(--color-cream-on-deep);
	text-align: center;
}

.cta-final__inner {
	max-width: 68rem;
	margin: 0 auto;
	display: grid;
	gap: var(--space-xl);
	justify-items: center;
}

.cta-final__title {
	font-family: var(--font-display);
	font-weight: 300;
	font-size: clamp(2.25rem, 1.3rem + 5.5vw, 6.5rem);
	line-height: 1.08;
	letter-spacing: -0.01em;
	color: var(--color-cream-on-deep);
	margin: 0;
}

.cta-final .btn--primary {
	background: var(--color-cream-on-deep);
	color: var(--color-deep);
}

.cta-final .btn--primary:hover {
	background: var(--color-bg);
}

/* ==========================================================================
   Footer
   ========================================================================== */
/* Dark green, matching .cta-final directly above it — Base44 renders the
   final CTA and the footer as one continuous dark block (nav row + giant
   wordmark all inside it), not a dark CTA followed by a separate light
   footer. Same background as .cta-final so the seam between the two
   sections disappears. */
.site-footer {
	padding: var(--space-xl) 0 var(--space-lg);
	background: var(--color-deep);
	color: var(--color-cream-on-deep);
	overflow-x: clip;
}

.site-footer__inner {
	display: grid;
	gap: var(--space-md);
}

/* The real uploaded wordmark is dark-green-on-transparent, so it needs
   its own light backdrop to stay legible on this now-dark footer — same
   translucent pill language as .site-logo in the header, not a filter
   that would distort its actual brand colors. */
.site-footer__logo {
	display: block;
	height: 32px;
	width: auto;
	padding: 0.6rem 1rem;
	background: rgba(255, 254, 249, 0.9);
	border-radius: var(--radius-btn);
}

.site-footer__tagline {
	margin-top: var(--space-xs);
	color: #c3ddc9;
	max-width: 48ch;
	font-size: 0.95rem;
}

.site-footer__social {
	display: flex;
	gap: var(--space-sm);
	margin-top: var(--space-sm);
}

.site-footer__social a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	border: 1px solid var(--color-deep-line);
	color: var(--color-cream-on-deep);
	transition: color 0.2s ease, border-color 0.2s ease;
}

.site-footer__social a:hover,
.site-footer__social a:focus-visible {
	color: var(--color-accent-on-deep);
	border-color: var(--color-accent-on-deep);
}

.site-footer__social svg {
	width: 18px;
	height: 18px;
}

.site-footer__list {
	display: flex;
	gap: var(--space-md);
	flex-wrap: wrap;
}

.site-footer__list a {
	text-decoration: none;
	font-size: 0.9rem;
	color: #c3ddc9;
}

.site-footer__list a:hover {
	color: var(--color-cream-on-deep);
}

.site-footer__copy {
	font-size: 0.85rem;
	color: #a1bd9f;
}

/* Closing brand flourish — a giant version of the real wordmark, echoing
   Base44's oversized logo moment at the very bottom of the page. It's the
   actual uploaded PNG (774px wide natively), so it's a lower-fidelity
   asset to stretch this large — noticeably softer than vector type would
   be — but it's the real logo rather than a recreation, per the client's
   call. brightness(0) invert(1) turns its green+gold into a flat cream
   silhouette (green and gold both invert toward the same light value),
   since the two-tone original reads as too busy at this scale against a
   solid dark background — Base44's own reference does the same flattening
   for its equivalent giant-logo moment. */
.site-footer__mark {
	display: block;
	width: min(90%, 1400px);
	margin: var(--space-xl) auto 0;
	height: auto;
	filter: brightness(0) invert(1);
	opacity: 0.92;
}

/* ==========================================================================
   Link in Bio (standalone Instagram/social landing page)
   ========================================================================== */
/* This page's whole point is one focused set of tap targets — the sitewide
   fixed header (logo pill, full nav, hamburger) duplicates the page's own
   logo/tagline right below it and re-introduces the "browse the whole
   site" option this page exists to avoid. Hidden here, not removed from
   header.php, so every other page keeps it untouched. */
body.page-template-page-linkbio-php .site-header {
	display: none;
}

.linkbio {
	padding: var(--space-xl) 0;
}

.linkbio__inner {
	max-width: 480px;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-lg);
	text-align: center;
}

.linkbio__intro {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-xs);
}

.linkbio__logo {
	height: 36px;
	width: auto;
}

.linkbio__tagline {
	color: var(--color-ink-soft);
	max-width: 38ch;
	font-size: 0.95rem;
}

.linkbio__list {
	display: flex;
	flex-direction: column;
	gap: var(--space-sm);
	width: 100%;
}

.linkbio__link {
	display: flex;
	align-items: center;
	gap: var(--space-sm);
	padding: 0.9rem 1.25rem;
	border-radius: var(--radius);
	border: 1px solid var(--color-line);
	background: var(--color-surface);
	text-decoration: none;
	color: var(--color-ink);
	text-align: left;
	transition: border-color 0.2s ease, transform 0.2s ease, background-color 0.2s ease;
}

.linkbio__link:hover,
.linkbio__link:focus-visible {
	border-color: var(--color-accent);
	transform: translateY(-2px);
}

.linkbio__link--primary {
	background: var(--color-deep);
	border-color: var(--color-deep);
	color: var(--color-cream-on-deep);
}

.linkbio__link--primary:hover,
.linkbio__link--primary:focus-visible {
	background: var(--color-deep-ink);
	border-color: var(--color-deep-ink);
}

.linkbio__link-icon {
	flex: 0 0 auto;
	width: 42px;
	height: 42px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--color-bg-alt);
	color: var(--color-accent);
}

.linkbio__link--primary .linkbio__link-icon {
	background: rgba(255, 255, 255, 0.14);
	color: var(--color-cream-on-deep);
}

.linkbio__link-icon svg {
	width: 20px;
	height: 20px;
}

.linkbio__link-text {
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
}

.linkbio__link-text strong {
	font-family: var(--font-display);
	font-size: 1.0625rem;
	line-height: 1.2;
}

.linkbio__link-text small {
	font-size: 0.85rem;
	color: var(--color-ink-soft);
}

.linkbio__link--primary .linkbio__link-text small {
	color: var(--color-cream-on-deep);
	opacity: 0.85;
}

.linkbio__social {
	display: flex;
	gap: var(--space-sm);
}

.linkbio__social a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	border: 1px solid var(--color-line);
	color: var(--color-ink-soft);
	transition: color 0.2s ease, border-color 0.2s ease;
}

.linkbio__social a:hover,
.linkbio__social a:focus-visible {
	color: var(--color-accent);
	border-color: var(--color-accent);
}

.linkbio__social svg {
	width: 18px;
	height: 18px;
}

/* ==========================================================================
   Generic page/post fallback templates
   ========================================================================== */
.page-content {
	/* padding-block, no shorthand: this element already carries `.wrap`'s
	   side padding — a `padding: x 0` shorthand here would zero it out,
	   which is exactly what happened before this fix: on mobile, where
	   `.wrap`'s max-width no longer creates visible whitespace outside
	   the content, the missing side gutter meant blog card images and
	   text ran flush to the screen edges. */
	padding-block: var(--space-2xl);
	max-width: 760px;
}

.page-content--after-hero {
	padding-top: var(--space-lg);
}

.page-content__title {
	font-size: 2.25rem;
	margin-bottom: var(--space-lg);
}

.page-content__body {
	font-size: 1.0625rem;
	color: var(--color-ink-soft);
}

.post-summary {
	padding: var(--space-md) 0;
	border-bottom: 1px solid var(--color-line);
}

.post-summary__title a {
	text-decoration: none;
}

/* ==========================================================================
   Blog — hero, featured post, listing grid
   ========================================================================== */
.blog-hero {
	padding: calc(var(--space-2xl) + 2rem) 0 var(--space-lg);
}

.blog-hero__eyebrow {
	font-size: 0.8125rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.25em;
	color: var(--color-deep);
	margin: 0;
}

.blog-hero__title {
	margin: var(--space-sm) 0 0;
	font-family: var(--font-display);
	font-weight: 300;
	font-size: clamp(2.5rem, 1.3rem + 6vw, 6.5rem);
	line-height: 1;
	color: var(--color-ink);
}

.blog-hero__intro {
	margin-top: var(--space-md);
	font-size: 1.1875rem;
	color: var(--color-ink-soft);
	max-width: 58ch;
}

.blog-featured {
	display: grid;
	gap: var(--space-xl);
	margin-top: var(--space-xl);
	padding-top: var(--space-lg);
	border-top: 1px solid var(--color-line-soft);
}

@media (min-width: 900px) {
	.blog-featured {
		grid-template-columns: 1.3fr 1fr;
		align-items: center;
	}
}

.blog-featured__media {
	display: block;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	border-radius: var(--radius);
}

.blog-featured__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.blog-featured__meta {
	margin: 0;
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.15em;
	color: var(--color-accent);
}

.blog-featured__title {
	margin: var(--space-sm) 0 0;
	font-family: var(--font-display);
	font-weight: 600;
	font-size: clamp(1.5rem, 1rem + 2.2vw, 2.25rem);
	line-height: 1.15;
	color: var(--color-ink);
}

.blog-featured__title a {
	color: inherit;
	text-decoration: none;
}

.blog-featured__title a:hover {
	text-decoration: underline;
}

.blog-featured__excerpt {
	margin-top: var(--space-sm);
	color: var(--color-ink-soft);
	font-size: 1.0625rem;
}

.blog-featured__excerpt p {
	margin: 0;
}

.blog-featured__link {
	display: inline-block;
	margin-top: var(--space-md);
	font-weight: 600;
	color: var(--color-deep);
	text-decoration: none;
}

.blog-featured__link:hover {
	text-decoration: underline;
}

.blog-more__title {
	margin-top: var(--space-2xl);
	font-family: var(--font-display);
	font-weight: 300;
	font-size: clamp(1.75rem, 1.2rem + 2.5vw, 2.75rem);
	color: var(--color-ink);
}

.blog__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-lg);
	margin-top: var(--space-lg);
}

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

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

.post-card {
	display: flex;
	flex-direction: column;
	transition: transform 0.2s var(--ease-out);
}

.post-card:hover,
.post-card:focus-within {
	transform: translateY(-3px);
}

.post-card__thumb {
	display: block;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	border-radius: var(--radius);
	background: var(--color-bg-alt);
}

.post-card__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.post-card__body {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
	margin-top: var(--space-sm);
}

.post-card__meta {
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	color: var(--color-accent);
}

.post-card__title {
	font-family: var(--font-display);
	font-size: 1.1875rem;
	font-weight: 600;
	line-height: 1.25;
}

.post-card__title a {
	color: var(--color-ink);
	text-decoration: none;
}

.post-card__title a:hover {
	text-decoration: underline;
}

.post-card__excerpt {
	color: var(--color-ink-soft);
	font-size: 0.9375rem;
}

.post-card__more {
	font-size: 0.9375rem;
	font-weight: 600;
	color: var(--color-deep);
}

/* WordPress's default the_posts_pagination() markup (.navigation.pagination
   > .nav-links > .page-numbers) had no theme styling at all — it was
   rendering with the browser's bare blue-underline link default, sitting
   flush against the grid above it with no breathing room. */
.pagination {
	margin-top: var(--space-2xl);
	margin-bottom: var(--space-2xl);
	display: flex;
	justify-content: center;
}

.pagination .nav-links {
	display: flex;
	align-items: center;
	gap: var(--space-xs);
}

.pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding: 0 0.5rem;
	border-radius: var(--radius-btn);
	font-size: 0.9375rem;
	font-weight: 600;
	color: var(--color-ink-soft);
	text-decoration: none;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.pagination .page-numbers:hover {
	background: var(--color-bg-alt);
	color: var(--color-ink);
}

.pagination .page-numbers.current {
	background: var(--color-deep);
	color: var(--color-cream-on-deep);
}

.pagination .page-numbers.dots {
	color: var(--color-ink-soft);
}

/* ==========================================================================
   Blog — single post
   ========================================================================== */
.post-hero {
	padding-bottom: var(--space-md);
}

/* Real article headlines run long ("Por qué tu clínica no aparece en
   Google (y tu competencia sí)") — the huge clamp() .page-hero__title
   picked up sitewide (tuned for short marketing statements) would wrap a
   title like that across many lines and dominate the page. Capped back
   down to a size proportionate to reading a post, not landing on one. */
.post-hero__title {
	font-size: clamp(2rem, 1.3rem + 2.8vw, 3.25rem);
	max-width: 20ch;
}

.post-meta {
	margin-top: var(--space-md);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.4rem;
	font-size: 0.9375rem;
	color: var(--color-ink-soft);
}

.post-meta__category {
	font-weight: 600;
	color: var(--color-deep);
}

.post-meta__dot {
	color: var(--color-line);
}

.post-featured-image {
	max-width: 700px;
	margin: 0 auto;
	padding: 0 1.5rem;
}

.post-featured-image img {
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	display: block;
	border-radius: var(--radius);
	filter: url(#pm-duotone);
}

.post-layout {
	/* padding-block, no shorthand — see the identical fix + explanation
	   on .page-content above; this element also combines directly with
	   .wrap (<div class="wrap post-layout">), so a padding shorthand
	   here would zero out .wrap's side gutter the same way. */
	max-width: 700px;
	padding-block: var(--space-lg) var(--space-2xl);
}

/* Tipografía del cuerpo del artículo (the_content()) — measure y tamaño
   siguen la misma regla que .page-content (52–62ch, nunca bajo 17–18px),
   con jerarquía propia para no competir con el H1 de .post-hero__title. */
/* Direct-answer callout (AEO/AIO) — sits before .post-content, same box
   language as .post-cta (bg-alt fill, --radius) plus a left rule so it
   reads as a distinct "answer" rather than another body paragraph. */
.post-answer {
	margin-bottom: var(--space-md);
	padding: var(--space-md);
	background: var(--color-bg-alt);
	border-radius: var(--radius);
	border-left: 3px solid var(--color-accent);
}

.post-answer__label {
	font-size: 0.8125rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--color-accent-dark);
	margin-bottom: 0.4rem;
}

.post-answer__text {
	font-size: 1.0625rem;
	line-height: 1.6;
	color: var(--color-ink);
	max-width: 62ch;
}

.post-content {
	font-size: 1.0625rem;
	line-height: 1.7;
	color: var(--color-ink);
}

.post-content > * + * {
	margin-top: var(--space-md);
}

.post-content h2 {
	font-family: var(--font-display);
	font-size: 1.625rem;
	font-weight: 700;
	line-height: 1.25;
	margin-top: var(--space-lg);
}

.post-content h3 {
	font-family: var(--font-display);
	font-size: 1.25rem;
	font-weight: 700;
	line-height: 1.3;
	margin-top: var(--space-md);
}

.post-content p {
	max-width: 62ch;
}

.post-content ul,
.post-content ol {
	max-width: 62ch;
	padding-left: 1.4rem;
}

.post-content li + li {
	margin-top: 0.5rem;
}

.post-content li::marker {
	color: var(--color-accent-dark);
}

.post-content a {
	color: var(--color-deep);
	text-decoration-color: var(--color-line);
	text-underline-offset: 3px;
}

.post-content a:hover {
	text-decoration-color: var(--color-accent);
}

.post-content strong {
	color: var(--color-ink);
}

.post-content blockquote {
	max-width: 56ch;
	margin: var(--space-lg) 0;
	font-family: var(--font-display);
	font-style: italic;
	font-size: 1.375rem;
	line-height: 1.4;
	color: var(--color-deep);
}

/* Same 36px circle-icon-button language as .site-footer__social, reused
   here so the post's own share row reads as one system with the footer's
   social links rather than a one-off component. */
.post-share {
	margin-top: var(--space-lg);
	padding-top: var(--space-md);
	border-top: 1px solid var(--color-line);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-sm);
}

.post-share__label {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 0.9375rem;
	color: var(--color-ink);
}

.post-share__links {
	display: flex;
	gap: 0.5rem;
}

.post-share__link {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	border: 1px solid var(--color-line);
	color: var(--color-ink-soft);
	background: none;
	padding: 0;
	cursor: pointer;
	transition: color 0.2s ease, border-color 0.2s ease;
}

.post-share__link:hover,
.post-share__link:focus-visible {
	color: var(--color-accent);
	border-color: var(--color-accent);
}

.post-share__link svg {
	width: 18px;
	height: 18px;
}

.post-share__copy.is-copied {
	color: var(--color-deep);
	border-color: var(--color-deep);
}

/* The copy-style buttons (Instagram, "copy link") never navigate anywhere
   the way WhatsApp/Facebook/LinkedIn do, so the copy itself needs a
   visible confirmation, not just the aria-label swap in main.js — a
   sighted visitor clicking Instagram and seeing nothing happen reads as a
   broken button. */
.post-share__tooltip {
	position: absolute;
	bottom: calc(100% + 8px);
	left: 50%;
	transform: translateX(-50%) translateY(4px);
	white-space: nowrap;
	padding: 0.35rem 0.7rem;
	border-radius: var(--radius);
	background: var(--color-deep);
	color: var(--color-cream-on-deep);
	font-size: 0.8125rem;
	font-weight: 600;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.2s ease, transform 0.2s ease;
}

.post-share__copy.is-copied .post-share__tooltip {
	opacity: 1;
	transform: translateX(-50%) translateY(0);
}

.post-author {
	margin-top: var(--space-lg);
	padding-top: var(--space-md);
	border-top: 1px solid var(--color-line);
}

.post-author__name {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 1.0625rem;
}

.post-author__bio {
	margin-top: 0.35rem;
	color: var(--color-ink-soft);
	font-size: 0.9375rem;
	max-width: 60ch;
}

.post-cta {
	margin-top: var(--space-lg);
	padding: var(--space-md);
	background: var(--color-bg-alt);
	border-radius: var(--radius);
}

.post-cta__title {
	font-family: var(--font-display);
	font-size: 1.375rem;
}

.post-cta__body {
	margin-top: 0.5rem;
	color: var(--color-ink-soft);
	max-width: 52ch;
}

.post-cta .btn {
	margin-top: var(--space-sm);
}

.post-back {
	display: inline-block;
	margin-top: var(--space-lg);
	font-size: 0.9375rem;
	font-weight: 600;
	color: var(--color-ink-soft);
	text-decoration: none;
}

.post-back:hover {
	color: var(--color-deep);
}

/* ==========================================================================
   Page hero — encabezado reutilizable para páginas internas
   (Servicios, Blog, Recursos, Contacto).
   ========================================================================== */
.page-hero {
	padding: calc(var(--space-2xl) + 2rem) 0 var(--space-lg);
}

.page-hero__inner {
	max-width: 900px;
}

.page-hero__title {
	font-family: var(--font-display);
	font-weight: 300;
	font-size: clamp(2.5rem, 1.3rem + 6vw, 6.5rem);
	line-height: 1.02;
	letter-spacing: -0.02em;
	color: var(--color-ink);
}

.page-hero__lead {
	margin-top: var(--space-md);
	font-size: 1.25rem;
	color: var(--color-ink-soft);
	max-width: 58ch;
}

/* ==========================================================================
   Recursos — tarjetas de lead magnets
   ========================================================================== */
.resources {
	padding: var(--space-xl) 0 var(--space-2xl);
}

.resources__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--space-md);
	margin-top: var(--space-lg);
}

.resource-card {
	display: flex;
	flex-direction: column;
	gap: var(--space-sm);
	padding: var(--space-md);
	border: 1px solid var(--color-line);
	border-radius: var(--radius);
	background: var(--color-surface);
	transition: border-color 0.2s ease, transform 0.2s var(--ease-out);
}

.resource-card:hover,
.resource-card:focus-within {
	border-color: var(--color-accent);
	transform: translateY(-3px);
}

.resource-card__tag {
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--color-ink-soft);
}

.resource-card__title {
	font-family: var(--font-display);
	font-size: 1.375rem;
	font-weight: 700;
}

.resource-card__body {
	color: var(--color-ink-soft);
	font-size: 0.975rem;
	flex: 1;
}

/* La tarjeta empieza compacta (solo el botón); al abrirse, el formulario
   de Fluent Forms embebido se reestiliza contra sus propias clases, igual
   que en Diagnóstico — acá sobre tarjeta clara, no verde oscuro. */
.resource-card__form .ff-el-input--label {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
}

.resource-card__form input[type='email'] {
	width: 100%;
	padding: var(--space-sm) var(--space-md);
	border: 1px solid var(--color-line);
	border-radius: var(--radius);
	background: var(--color-bg);
	color: var(--color-ink);
	font-family: var(--font-body);
	font-size: 0.975rem;
	margin-bottom: var(--space-sm);
	transition: border-color 0.15s ease;
}

.resource-card__form input[type='email']:hover {
	border-color: var(--color-accent-dark);
}

.resource-card__form .ff-btn-submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 44px;
	padding: 0 var(--space-md);
	background: var(--color-deep) !important;
	color: var(--color-cream-on-deep) !important;
	border: none !important;
	border-radius: var(--radius-btn);
	font-family: var(--font-body);
	font-size: 0.9375rem;
	font-weight: 600;
	cursor: pointer;
	transition: transform 0.15s ease;
}

.resource-card__form .ff-btn-submit:hover {
	transform: translateY(-2px);
}

.resource-card__form .ff-el-is-error input[type='email'] {
	border-width: 2px;
	border-color: var(--color-accent-dark);
}

.resource-card__form .error {
	color: var(--color-ink);
	font-size: 0.8125rem;
	margin: -4px 0 var(--space-sm);
}

.resource-card__download-lead {
	font-weight: 600;
	color: var(--color-ink);
	margin: 0 0 var(--space-sm);
}

/* ==========================================================================
   Páginas de pilar y geo — bloques de contenido reutilizables
   ========================================================================== */
.pillar-section {
	padding: var(--space-xl) 0;
}

.pillar-section--alt {
	background: var(--color-bg-alt);
}

.pillar-section__title {
	max-width: 36ch;
}

.pillar-section__body {
	font-size: 1.125rem;
	color: var(--color-ink-soft);
	max-width: 60ch;
}

.pillar-section__body + .pillar-section__body {
	margin-top: var(--space-sm);
}

/* ==========================================================================
   Pillar page — Base44 architecture (photo hero, numbered "incluye" list,
   dark process section, cross-link list). New, page-scoped classes —
   .page-hero and .pillar-section above are shared across many other pages
   (FAQ, Contacto, Ontario, Florida, Sistema Integral, the blog index) and
   weren't touched, so this redesign stays contained to the 4 pillar pages
   that opt into these classes.
   ========================================================================== */
.pillar-hero {
	padding: calc(var(--space-2xl) + 2rem) 0 var(--space-xl);
}

/* Gives the 3 narrative .pillar-section blocks (problem / AI-search angle
   / Viseeon proof) a visible divider and, on the middle one, an
   alternating tint — without touching the bare .pillar-section rule,
   which FAQ/Contacto/Ontario/Florida/Sistema Integral also use and don't
   necessarily want this treatment on. */
.pillar-narrative {
	border-top: 1px solid var(--color-line-soft);
}

.pillar-hero__back {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	text-decoration: none;
	font-size: 0.875rem;
	color: var(--color-ink-soft);
	transition: color 0.2s ease;
}

.pillar-hero__back:hover {
	color: var(--color-deep);
}

.pillar-hero__back svg {
	width: 15px;
	height: 15px;
}

.pillar-hero__tag {
	margin-top: var(--space-lg);
	font-size: 0.8125rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.25em;
	color: var(--color-deep);
}

.pillar-hero__title {
	margin: var(--space-sm) 0 0;
	font-family: var(--font-display);
	font-weight: 300;
	font-size: clamp(2.5rem, 1.3rem + 6vw, 6.5rem);
	line-height: 1.02;
	letter-spacing: -0.01em;
	color: var(--color-ink);
	max-width: 18ch;
}

.pillar-hero__intro {
	margin-top: var(--space-md);
	font-size: 1.25rem;
	color: var(--color-ink-soft);
	max-width: 58ch;
}

.pillar-hero__media {
	margin-top: var(--space-xl);
	aspect-ratio: 16 / 9;
	overflow: hidden;
	border-radius: var(--radius);
}

.pillar-hero__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.pillar-includes {
	padding: var(--space-xl) 0;
	border-top: 1px solid var(--color-line-soft);
}

.pillar-includes__grid {
	display: grid;
	gap: var(--space-lg);
}

.pillar-includes__title {
	font-family: var(--font-display);
	font-weight: 300;
	font-size: clamp(1.75rem, 1.3rem + 2.2vw, 2.75rem);
	color: var(--color-ink);
	margin: 0;
}

.pillar-includes__text {
	font-size: 1.125rem;
	color: var(--color-ink);
	margin: 0;
}

@media (min-width: 900px) {
	.pillar-includes__grid {
		grid-template-columns: 1fr 1.6fr;
		align-items: start;
	}
}

/* Deliberately the same --color-ink as .case-study, not --color-deep like
   .cta-final/.site-footer/.site-menu-overlay — client's own call after
   comparing the two dark greens already in use on Home. */
.pillar-process {
	padding: var(--space-2xl) 0;
	background: var(--color-ink);
	color: var(--color-bg);
}

.pillar-process__eyebrow {
	font-size: 0.8125rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.25em;
	color: var(--color-sun);
	margin: 0;
}

.pillar-process__title {
	margin: var(--space-sm) 0 0;
	font-family: var(--font-display);
	font-weight: 300;
	font-size: clamp(2rem, 1.3rem + 3.5vw, 3.5rem);
	color: var(--color-bg);
}

.pillar-process__grid {
	margin-top: var(--space-2xl);
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--space-lg) var(--space-md);
}

.pillar-process__step {
	padding-top: var(--space-md);
}

.pillar-process__rule {
	display: block;
	height: 1px;
	background: rgba(255, 254, 249, 0.2);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.9s var(--ease-out);
}

.pillar-process__grid.is-visible .pillar-process__rule {
	transform: scaleX(1);
}

.pillar-process__grid.is-visible > *:nth-child(2) .pillar-process__rule { transition-delay: 80ms; }
.pillar-process__grid.is-visible > *:nth-child(3) .pillar-process__rule { transition-delay: 160ms; }
.pillar-process__grid.is-visible > *:nth-child(4) .pillar-process__rule { transition-delay: 240ms; }

.pillar-process__num {
	display: block;
	margin-top: var(--space-sm);
	font-family: var(--font-script);
	font-style: italic;
	font-size: 1.25rem;
	color: var(--color-accent-on-deep);
}

.pillar-process__step-title {
	margin: var(--space-sm) 0 0;
	font-family: var(--font-display);
	font-weight: 500;
	font-size: 1.1875rem;
	color: var(--color-bg);
}

.pillar-process__step-desc {
	margin-top: var(--space-xs);
	font-size: 1rem;
	color: #c3ddc9;
}

@media (max-width: 900px) {
	.pillar-process__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 560px) {
	.pillar-process__grid {
		grid-template-columns: 1fr;
	}
}

.pillar-other {
	padding: var(--space-2xl) 0;
}

.pillar-other__title {
	font-family: var(--font-display);
	font-weight: 300;
	font-size: clamp(2rem, 1.3rem + 3.5vw, 3.5rem);
	color: var(--color-ink);
	margin: 0;
}

.pillar-other__list {
	margin-top: var(--space-xl);
}

.pillar-other__cta {
	margin-top: var(--space-xl);
}

/* ==========================================================================
   Sistema Integral (landing) — tarjetas de fase y calificación de leads
   ========================================================================== */
.phases-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--space-md);
	margin: var(--space-lg) 0;
}

.phase-card {
	display: flex;
	flex-direction: column;
	gap: var(--space-xs);
	padding: var(--space-md);
	border: 1px solid var(--color-line);
	border-radius: var(--radius);
	background: var(--color-surface);
}

.phase-card__tag {
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--color-deep);
}

.phase-card__title {
	font-family: var(--font-display);
	font-size: 1.25rem;
	font-weight: 700;
}

.phase-card__body {
	font-size: 0.9375rem;
	color: var(--color-ink-soft);
}

.qualify-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--space-lg);
	margin-top: var(--space-lg);
}

.qualify-grid__title {
	font-size: 1.1875rem;
	margin-bottom: var(--space-md);
}

.qualify-grid__title--no {
	color: var(--color-ink-soft);
}

.qualify-grid .differentiators__list {
	margin-top: 0;
	display: grid;
	gap: var(--space-md);
}

.differentiators__icon--no {
	background: var(--color-bg);
	color: var(--color-ink-soft);
	border: 1px solid var(--color-line);
}

/* ==========================================================================
   Contacto
   ========================================================================== */
.contact-block {
	padding: var(--space-lg) 0 var(--space-2xl);
}

.contact-block__inner {
	max-width: 620px;
	display: grid;
	gap: var(--space-lg);
}

.contact-block__note {
	font-size: 1.0625rem;
	color: var(--color-ink-soft);
	max-width: 56ch;
}

.contact-block__list {
	display: grid;
	gap: var(--space-sm);
	font-size: 1rem;
	color: var(--color-ink-soft);
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 900px) {
	.resources__grid {
		grid-template-columns: repeat(2, 1fr);
	}

}

/* ==========================================================================
   CookieAdmin (banner de cookies) — recolor a la paleta de marca.
   El plugin trae sus propios azules/naranjas/rojos por defecto.
   ========================================================================== */
:root {
	--cookieadmin-primary-color: var(--color-deep);
	--cookieadmin-primary-hover-color: var(--color-deep-ink);
	--cookieadmin-secondary-color: var(--color-accent);
	--cookieadmin-secondary-hover-color: var(--color-accent-dark);
	--cookieadmin-txcolor: var(--color-ink);
	--cookieadmin-green-color: var(--color-deep);
	--cookieadmin-warning-color: var(--color-accent);
}

.cookieadmin_act {
	color: var(--color-deep);
}

button.cookieadmin_btn {
	background-color: transparent;
	border: 1px solid var(--color-line);
	color: var(--color-ink-soft);
	border-radius: var(--radius-btn);
	font-weight: 600;
}

button.cookieadmin_btn.cookieadmin_accept_btn,
button.cookieadmin_btn.cookieadmin_save_btn {
	background-color: var(--color-deep);
	border-color: var(--color-deep);
	color: var(--color-cream-on-deep);
}

button.cookieadmin_re_consent {
	background-color: var(--color-deep);
}

input:checked + .cookieadmin_slider {
	background-color: var(--color-deep);
}

/* ==========================================================================
   FAQ — acordeón nativo con <details>/<summary>, sin JS
   ========================================================================== */
.faq {
	padding: var(--space-xl) 0 var(--space-2xl);
}

.faq__inner {
	max-width: 760px;
}

.faq__group-title {
	font-family: var(--font-display);
	font-size: 1.375rem;
	font-weight: 700;
	margin: var(--space-lg) 0 var(--space-sm);
}

.faq__group-title:first-child {
	margin-top: 0;
}

.faq__list {
	display: grid;
	gap: var(--space-sm);
}

.faq__item {
	border: 1px solid var(--color-line);
	border-radius: var(--radius);
	padding: var(--space-sm) var(--space-md);
	background: var(--color-surface);
}

.faq__question {
	cursor: pointer;
	font-weight: 600;
	font-size: 1.0625rem;
	list-style: none;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-sm);
}

.faq__question::-webkit-details-marker {
	display: none;
}

.faq__question::after {
	content: '+';
	flex: none;
	font-family: var(--font-body);
	font-size: 1.25rem;
	color: var(--color-ink-soft);
	transition: transform 0.15s ease;
}

.faq__item[open] .faq__question::after {
	content: '\2212';
}

.faq__answer {
	margin: var(--space-sm) 0 0;
	color: var(--color-ink-soft);
	font-size: 0.975rem;
}

.faq__cta {
	margin-top: var(--space-xl);
	padding-top: var(--space-lg);
	border-top: 1px solid var(--color-line);
	text-align: center;
}

.faq__cta-lead {
	font-weight: 600;
	margin: 0 0 var(--space-sm);
}

@media (max-width: 720px) {
	:root {
		--space-2xl: 4rem;
		--space-xl: 3rem;
	}

	body {
		font-size: 17px;
	}

	.resources__grid,
	.phases-grid,
	.qualify-grid,
	.case-study__stats {
		grid-template-columns: 1fr;
	}
}

/* ==========================================================================
   Home FAQ + GEO Check page
   ========================================================================== */
.home-faq {
	padding: var(--space-xl) 0;
}

.home-faq__grid {
	display: grid;
	gap: var(--space-lg);
	align-items: start;
}

.home-faq__intro .section-title {
	margin-bottom: var(--space-md);
}

@media (min-width: 960px) {
	.home-faq__grid {
		grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
		gap: var(--space-xl);
	}

	.home-faq__intro {
		position: sticky;
		top: 120px;
	}
}

.geo-page__tool {
	padding: 0 0 var(--space-2xl);
}

/* Same 900px column as .page-hero__inner, so the tool's left edge lines up with the heading above it. */
.geo-page__tool .wrap {
	max-width: 900px;
}

.geo-page .geo-check {
	margin: 0;
}

.geo-page__note {
	max-width: 760px;
	margin: var(--space-md) 0 0;
	font-size: 0.9375rem;
	color: var(--color-ink-soft);
}

/* Featured tool card on Recursos: spans the whole grid, text left / button right. */
.resource-card--tool {
	grid-column: 1 / -1;
}

.resource-card__tool-text {
	display: flex;
	flex-direction: column;
	gap: var(--space-sm);
	max-width: 62ch;
}

.resource-card--tool .btn {
	align-self: flex-start;
}

@media (min-width: 901px) {
	.resource-card--tool {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		gap: var(--space-lg);
		padding: var(--space-lg);
	}

	.resource-card--tool .btn {
		flex: none;
		align-self: center;
	}
}

/* Secondary CTA (GEO Check) stacked above the main Diagnóstico CTA at the end of a post. */
.post-cta--geo {
	margin-bottom: var(--space-md);
}