/* ==========================================================================
   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;

	--color-accent: #ffd230;
	--color-accent-dark: #f0c000;
	--color-accent-soft: #ffe98a;
	--color-accent-ink: #095138;

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

	--font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
	--font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-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);
}

/* ==========================================================================
   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;
}

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-accent);
	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);
}

.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);
}

/* ==========================================================================
   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;
}

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

.btn--primary:hover {
	background: var(--color-accent-dark);
}

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

.btn--large {
	padding: 0.95rem 2rem;
	font-size: 1.0625rem;
}

/* ==========================================================================
   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;
	gap: var(--space-sm);
	padding-top: 1.25rem;
	padding-bottom: 1.25rem;
}

.site-logo {
	text-decoration: none;
	margin-right: auto;
	display: inline-flex;
	align-items: center;
	background: rgba(255, 254, 249, 0.55);
	-webkit-backdrop-filter: saturate(180%) blur(14px);
	backdrop-filter: saturate(180%) blur(14px);
	border: 1px solid var(--color-line);
	border-radius: var(--radius-btn);
	padding: 0.6rem 1.25rem;
	transition: background-color 0.2s ease-in-out;
}

.site-logo__text {
	font-family: var(--font-display);
	font-size: 1.25rem;
	font-weight: 700;
	color: var(--color-ink);
}

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

.site-header__cta {
	white-space: nowrap;
}

.lang-switcher {
	display: flex;
	align-items: center;
	gap: 0.15rem;
	background: rgba(255, 254, 249, 0.55);
	-webkit-backdrop-filter: saturate(180%) blur(14px);
	backdrop-filter: saturate(180%) blur(14px);
	border: 1px solid var(--color-line);
	border-radius: var(--radius-btn);
	padding: 0.4rem;
	flex: none;
	transition: background-color 0.2s ease-in-out;
}

.lang-switcher__item {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	color: var(--color-ink);
	padding: 0.4rem 0.65rem;
	border-radius: var(--radius-btn);
	transition: background-color 0.15s ease, color 0.15s ease;
}

.lang-switcher__item:hover {
	background: var(--color-bg-alt);
	color: var(--color-ink);
}

.lang-switcher__item.is-active {
	background: var(--color-accent);
	color: var(--color-accent-ink);
}

/* Cápsula de navegación flotante, siempre visible — sin menú hamburguesa
   en desktop, al estilo Kolibri. */
.site-nav__list {
	display: flex;
	align-items: center;
	gap: 2px;
	height: 48px;
	background: rgba(255, 254, 249, 0.55);
	-webkit-backdrop-filter: saturate(180%) blur(14px);
	backdrop-filter: saturate(180%) blur(14px);
	border: 1px solid var(--color-line);
	border-radius: var(--radius-btn);
	padding: 3px;
	transition: background-color 0.2s ease-in-out;
}

.site-nav__list li {
	position: relative;
	height: 100%;
}

.site-nav__list a {
	display: inline-flex;
	align-items: center;
	height: 100%;
	text-decoration: none;
	font-size: 0.9375rem;
	font-weight: 500;
	color: var(--color-ink);
	padding: 0 14px;
	border-radius: var(--radius-btn);
	transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
	white-space: nowrap;
}

.site-nav__list a:hover {
	background: var(--color-bg-alt);
	color: var(--color-ink);
}

/* Píldora de página activa — mismo lenguaje que el botón/CTA del sistema,
   igual al tratamiento de "current page" de kolibri.is. */
.site-nav__list .current-menu-item > a,
.site-nav__list .current-menu-ancestor > a,
.site-nav__list .current_page_item > a,
.site-nav__list .current_page_parent > a {
	background: var(--color-bg-alt);
	color: var(--color-ink);
	font-weight: 600;
}

/* Indicador de submenu — un carácter real, no un borde rotado con transform.
   Un pseudo-elemento con transform al lado de texto en Fraunces a tamaños
   grandes parece corromper el shaping del texto en Safari/iOS (el borde +
   rotate se comía las primeras letras de "Servicios" en mobile). */
.site-nav__list .menu-item-has-children > a::after {
	content: '⌄';
	margin-left: 6px;
	font-family: var(--font-body);
	font-size: 0.75em;
	opacity: 0.55;
}

/* Submenu de Servicios — mismo lenguaje visual flotante/translúcido que la
   cápsula de nav, aparece al hover o foco de teclado. */
.site-nav__list .sub-menu {
	position: absolute;
	top: calc(100% + 10px);
	left: 0;
	z-index: 120;
	min-width: 280px;
	margin: 0;
	padding: 6px;
	list-style: none;
	background: rgba(255, 254, 249, 0.96);
	-webkit-backdrop-filter: saturate(180%) blur(14px);
	backdrop-filter: saturate(180%) blur(14px);
	border: 1px solid var(--color-line);
	border-radius: var(--radius);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-6px);
	transition: opacity 0.2s ease-in-out, transform 0.2s ease-in-out, visibility 0.2s ease-in-out;
}

.site-nav__list .menu-item-has-children:hover > .sub-menu,
.site-nav__list .menu-item-has-children:focus-within > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.site-nav__list .sub-menu li {
	height: auto;
}

.site-nav__list .sub-menu a {
	display: block;
	height: auto;
	padding: 10px 12px;
	border-radius: var(--radius-btn);
	font-size: 0.875rem;
	white-space: normal;
	line-height: 1.35;
}

.site-nav__toggle {
	display: none;
	position: relative;
	z-index: 160;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	width: 44px;
	height: 44px;
	flex: none;
	background: rgba(255, 254, 249, 0.55);
	-webkit-backdrop-filter: saturate(180%) blur(14px);
	backdrop-filter: saturate(180%) blur(14px);
	border: 1px solid var(--color-line);
	border-radius: var(--radius-btn);
	transition: background-color 0.2s ease-in-out;
}

.site-nav__toggle span {
	display: block;
	width: 18px;
	height: 2px;
	margin: 0 auto;
	background: var(--color-ink);
	transition: transform 0.2s ease, opacity 0.2s ease;
}

/* Con el overlay abierto, el fondo detrás del botón es un verde sólido sin
   textura — ahí el vidrio no tiene nada que revelar, así que conviene un
   fondo más presente para que el botón de cerrar se siga viendo con
   claridad, en vez de la transparencia del 18% pensada para el hero. */
.site-header.is-nav-open .site-nav__toggle {
	background: rgba(255, 254, 249, 0.3);
	border-color: var(--color-deep-line);
}

.site-header.is-nav-open .site-nav__toggle span {
	background: var(--color-cream-on-deep);
}

.site-header.is-nav-open .site-nav__toggle span:nth-child(1) {
	transform: translateY(7px) rotate(45deg);
}

.site-header.is-nav-open .site-nav__toggle span:nth-child(2) {
	opacity: 0;
}

.site-header.is-nav-open .site-nav__toggle span:nth-child(3) {
	transform: translateY(-7px) rotate(-45deg);
}

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

/* Formas planas de marca (dorado/verde, sin blur — consistente con la
   No-Shadow Rule) que entran una sola vez al cargar la página: escala +
   traslado + opacity, en cascada. Es un momento de entrada, no un fondo
   que respira todo el tiempo — así se diferencia de decoración ambiental. */
.hero__shapes {
	position: absolute;
	inset: 0;
	z-index: 0;
	overflow: hidden;
	pointer-events: none;
}

.hero__shape {
	position: absolute;
	border-radius: 50%;
	opacity: 0;
	transform: scale(0.85) translateY(28px);
	animation-duration: 900ms;
	animation-timing-function: var(--ease-out);
	animation-fill-mode: forwards;
}

.hero__shape--1 {
	top: -30px;
	left: -4%;
	width: clamp(200px, 24vw, 340px);
	height: clamp(200px, 24vw, 340px);
	background: var(--color-accent);
	animation-name: pm-shape-in-fill;
	animation-delay: 80ms;
}

.hero__shape--2 {
	bottom: -10%;
	right: -6%;
	width: clamp(160px, 20vw, 300px);
	height: clamp(160px, 20vw, 300px);
	background: transparent;
	border: 4px solid var(--color-deep);
	animation-name: pm-shape-in-outline;
	animation-delay: 220ms;
}

.hero__shape--3 {
	top: -30px;
	right: 18%;
	width: clamp(100px, 10vw, 160px);
	height: clamp(100px, 10vw, 160px);
	background: transparent;
	border: 3px solid var(--color-accent);
	animation-name: pm-shape-in-outline;
	animation-delay: 360ms;
}

@keyframes pm-shape-in-fill {
	to {
		opacity: 0.92;
		transform: scale(1) translateY(0);
	}
}

@keyframes pm-shape-in-outline {
	to {
		opacity: 1;
		transform: scale(1) translateY(0);
	}
}

/* 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);
	}
}

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

	.hero__shape--1,
	.hero__shape--2 {
		opacity: 0.92;
	}

	.diagnostico__reaffirm,
	.diagnostico__schedule {
		transition: none;
	}
}

.hero__inner {
	position: relative;
	z-index: 1;
	max-width: 900px;
}

.hero__title {
	font-size: clamp(3rem, 1.6rem + 6.5vw, 6.5rem);
	line-height: 1.02;
	letter-spacing: -0.02em;
	color: var(--color-ink);
}

.hero__title-accent {
	color: var(--color-deep);
}

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

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

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

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

.problem .section-title {
	max-width: none;
}

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

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

.problem__icon {
	display: inline-flex;
	width: 40px;
	height: 40px;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: var(--color-accent-soft);
	color: var(--color-deep);
	margin-bottom: var(--space-sm);
}

.problem__icon svg {
	width: 20px;
	height: 20px;
}

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

.problem__closing {
	margin-top: var(--space-lg);
	font-family: var(--font-display);
	font-size: 1.375rem;
	max-width: 42ch;
}

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

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

.case-study__body {
	font-size: 1.0625rem;
	color: var(--color-ink-soft);
	max-width: 52ch;
}

.case-study__name {
	margin-top: var(--space-md);
	font-weight: 600;
	font-size: 0.95rem;
}

.case-study__stats {
	display: grid;
	gap: var(--space-md);
}

.stat {
	background: var(--color-surface);
	border: 1px solid var(--color-line);
	border-radius: var(--radius);
	padding: var(--space-md);
	display: flex;
	align-items: baseline;
	gap: var(--space-sm);
}

.stat__value {
	font-family: var(--font-display);
	font-size: 2.25rem;
	font-weight: 700;
	color: var(--color-deep);
	line-height: 1;
}

.stat__label {
	color: var(--color-ink-soft);
	font-size: 0.95rem;
}

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

.system__intro {
	max-width: 62ch;
	font-size: 1.125rem;
	color: #c3ddc9;
}

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

.pillar {
	border-top: 1px solid var(--color-deep-line);
	padding-top: var(--space-md);
}

.pillar__num {
	display: block;
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 1.25rem;
	color: var(--color-accent);
	margin-bottom: var(--space-sm);
}

.pillar__title {
	font-size: 1.1875rem;
	color: var(--color-cream-on-deep);
}

.pillar__title a {
	text-decoration: none;
}

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

.pillar__sub {
	font-size: 0.85rem;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: #a1bd9f;
	margin-top: 0.25rem;
}

.pillar__body {
	margin-top: var(--space-sm);
	font-size: 0.975rem;
	color: #c3ddc9;
}

.system__phases {
	margin-top: var(--space-xl);
	padding-top: var(--space-lg);
	border-top: 1px solid var(--color-deep-line);
	max-width: 62ch;
	color: #c3ddc9;
}

.system > .wrap > .btn {
	margin-top: var(--space-lg);
}

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

.services__intro {
	max-width: 56ch;
	color: var(--color-ink-soft);
}

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

.service-card {
	padding: var(--space-md);
	border: 1px solid var(--color-line);
	border-radius: var(--radius);
}

.service-card__title {
	font-family: var(--font-body);
	font-weight: 600;
	font-size: 1rem;
	margin: 0 0 var(--space-xs);
}

.service-card__title a {
	text-decoration: none;
}

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

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

/* ==========================================================================
   Differentiators
   ========================================================================== */
.differentiators {
	padding: var(--space-xl) 0;
	background: var(--color-bg-alt);
}

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

.differentiators__item {
	display: flex;
	gap: var(--space-sm);
	align-items: flex-start;
	font-size: 1.0625rem;
}

.differentiators__icon {
	flex: none;
	display: inline-flex;
	width: 28px;
	height: 28px;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: var(--color-accent-soft);
	color: var(--color-deep);
	margin-top: 0.15rem;
}

.differentiators__icon svg {
	width: 15px;
	height: 15px;
}

/* ==========================================================================
   Diagnóstico
   ========================================================================== */
.diagnostico {
	padding: var(--space-2xl) 0;
	background: var(--color-deep-ink);
	color: var(--color-cream-on-deep);
}

.diagnostico__inner {
	max-width: 720px;
}

.diagnostico__lead {
	font-size: 1.125rem;
	color: #c3ddc9;
	max-width: 56ch;
}

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

/* Fluent Forms renders the checkbox group's own label + a screen-reader-
   only legend equivalent — the lead paragraph above already asks the
   question, so that first label is visually hidden, not removed. The
   email field further down keeps its own visible label — it isn't
   covered by any other copy on the page. */
.diagnostico__form .ff-el-group:first-of-type .ff-el-input--label {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
}

.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-cream-on-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-deep-line);
	border-radius: var(--radius);
	background: transparent;
	color: var(--color-cream-on-deep);
	font-family: var(--font-body);
	font-size: 1.0625rem;
	transition: border-color 0.15s ease;
}

.diagnostico__form input[type='email']::placeholder {
	color: #c3ddc9;
}

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

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

.diagnostico__form .ff-el-form-check {
	border: 1px solid var(--color-deep-line);
	border-radius: var(--radius);
	overflow: hidden;
	transition: border-color 0.15s ease, background-color 0.15s ease;
}

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

/* Reaffirming copy inserted per checkbox by main.js — collapsed until
   that option is checked, so marking a reto immediately validates the
   visitor's own pain with concrete, specific symptoms. */
.diagnostico__reaffirm {
	max-height: 0;
	opacity: 0;
	margin: 0;
	padding: 0 var(--space-md);
	font-size: 0.9375rem;
	line-height: 1.5;
	color: #c3ddc9;
	transition: max-height 0.3s var(--ease-out), opacity 0.25s ease, padding 0.3s var(--ease-out);
}

.diagnostico__form .ff-el-form-check.is-checked .diagnostico__reaffirm {
	max-height: 100px;
	opacity: 1;
	padding: 0 var(--space-md) var(--space-sm);
}

.diagnostico__form .ff-el-form-check-label {
	display: flex !important;
	align-items: center;
	gap: var(--space-sm);
	padding: var(--space-sm) var(--space-md);
	margin: 0 !important;
	cursor: pointer;
	font-size: 1.0625rem;
	color: var(--color-cream-on-deep);
}

.diagnostico__form .ff-el-form-check-input {
	accent-color: var(--color-accent);
	width: 18px;
	height: 18px;
	flex: none;
	margin: 0 !important;
}

.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-accent) !important;
	color: var(--color-ink) !important;
	border: none !important;
	border-radius: var(--radius-btn);
	font-family: var(--font-body);
	font-size: 1.0625rem;
	font-weight: 600;
	cursor: pointer;
	transition: transform 0.15s ease;
}

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

/* No red exists in the 3-color brand palette — the invalid state reuses
   Autoridad Dorada (the same token the recolored cookie-consent banner
   already uses for its own warning state) 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);
	font-size: 0.875rem;
	margin-top: var(--space-xs);
}

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

.diagnostico__email-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 44px;
	padding: 0 var(--space-md);
	background: transparent;
	color: var(--color-cream-on-deep);
	border: 1px solid var(--color-deep-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-accent);
}

/* 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;
	text-align: center;
}

.cta-final__inner {
	max-width: 620px;
	margin: 0 auto;
	display: grid;
	gap: var(--space-lg);
	justify-items: center;
}

.cta-final__title {
	font-size: clamp(2.25rem, 1.6rem + 3vw, 3.75rem);
	letter-spacing: -0.01em;
}

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer {
	padding: var(--space-xl) 0 var(--space-lg);
	border-top: 1px solid var(--color-line);
}

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

.site-footer__logo {
	display: block;
	height: 32px;
	width: auto;
}

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

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

.site-footer__list a {
	text-decoration: none;
	font-size: 0.9rem;
	color: var(--color-ink-soft);
}

.site-footer__copy {
	font-size: 0.85rem;
	color: var(--color-ink-soft);
}

/* ==========================================================================
   Generic page/post fallback templates
   ========================================================================== */
.page-content {
	padding: var(--space-2xl) 0;
	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;
}

/* ==========================================================================
   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: 780px;
}

.page-hero__title {
	font-size: clamp(2.5rem, 1.8rem + 4vw, 4.5rem);
	line-height: 1.05;
	letter-spacing: -0.02em;
	color: var(--color-ink);
}

.page-hero__lead {
	margin-top: var(--space-md);
	font-size: 1.1875rem;
	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);
}

.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-accent) !important;
	color: var(--color-ink) !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.0625rem;
	color: var(--color-ink-soft);
	max-width: 60ch;
}

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

/* ==========================================================================
   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) {
	.problem__grid,
	.system__grid,
	.services__grid,
	.resources__grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.case-study__inner {
		grid-template-columns: 1fr;
	}

	.differentiators__list {
		grid-template-columns: 1fr;
	}

	/* La cápsula de nav no entra en pantallas chicas — vuelve al menú
	   hamburguesa con overlay a pantalla completa. */
	.site-header__cta {
		display: none;
	}

	.site-nav__toggle {
		display: flex;
	}

	.site-nav {
		position: fixed;
		inset: 0;
		z-index: 150;
		display: none;
		align-items: center;
		justify-content: center;
		/* Deja espacio arriba para que el primer link nunca quede debajo
		   del botón de cerrar (X), que sigue flotando en la barra del
		   header con z-index más alto mientras el overlay está abierto. */
		padding: 110px 1.5rem 48px;
		background: var(--color-deep);
	}

	.site-header.is-nav-open .site-nav {
		display: flex;
	}

	.site-nav__list {
		flex-direction: column;
		align-items: center;
		gap: var(--space-md);
		height: auto;
		max-height: 82vh;
		overflow-y: auto;
		background: none;
		border: none;
		border-radius: 0;
		-webkit-backdrop-filter: none;
		backdrop-filter: none;
		padding: 0;
	}

	.site-nav__list li {
		height: auto;
	}

	.site-nav__list a {
		font-family: var(--font-display);
		font-size: clamp(2rem, 1.4rem + 3.5vw, 3.75rem);
		font-weight: 700;
		letter-spacing: -0.01em;
		color: var(--color-cream-on-deep);
		height: auto;
		padding: 0;
		border-radius: 0;
	}

	.site-nav__list a:hover {
		background: none;
		color: var(--color-accent);
	}

	.site-nav__list .current-menu-item > a,
	.site-nav__list .current-menu-ancestor > a,
	.site-nav__list .current_page_item > a,
	.site-nav__list .current_page_parent > a {
		background: none;
		color: var(--color-accent);
	}

	/* Simplificado a propósito: en mobile, "Servicios" es un link plano
	   igual que los demás — nada de flechita ni desplegable. Esa
	   combinación (pseudo-elemento + texto grande en Fraunces) daba un
	   glitch de render en Safari/iOS que no se pudo resolver ajustando el
	   CSS, así que se eliminó en vez de seguir parchándolo. El submenu
	   sigue en el HTML (WordPress lo genera solo) pero no se muestra acá;
	   /servicios/ ya lista los 4 pilares como links normales. */
	.site-nav__list .menu-item-has-children > a::after {
		content: none;
	}

	.site-nav__list .sub-menu {
		display: none;
	}
}

/* ==========================================================================
   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-accent);
	border-color: var(--color-accent);
	color: var(--color-accent-ink);
}

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;
	}

	.problem__grid,
	.system__grid,
	.services__grid,
	.resources__grid,
	.phases-grid,
	.qualify-grid {
		grid-template-columns: 1fr;
	}
}