/**
 * Verlu — estilos de componentes de la landing.
 *
 * Todo lo que sea color, tipografía, espaciado o sombra sale de theme.json
 * mediante variables --wp--preset--*. Aquí solo hay layout y comportamiento
 * que los bloques del core no cubren.
 *
 * Estos selectores son los mismos que se validaron con el cliente en el
 * prototipo (prototype/verlu-landing.html) — misma estructura, mismos
 * nombres de sección, ahora leyendo los tokens reales de theme.json en vez
 * de valores sueltos. El header/nav NO se maqueta aquí: lo resuelve el
 * Header Builder de Astra (ver docs/01 §1.1).
 */

/* ---------------------------------------------------------------
   1. Base
   --------------------------------------------------------------- */

:root {
	--verlu-measure: var(--wp--custom--measure, 66ch);
	--verlu-transition: var(--wp--custom--transition, 180ms cubic-bezier(.2, .7, .3, 1));
	--verlu-ease-in-out: cubic-bezier(.77, 0, .175, 1);
}

html {
	scroll-behavior: smooth;
	/* Compensa el header sticky de Astra al saltar a #what-is-verlu / #interest-list */
	scroll-padding-top: 6rem;
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: .01ms !important;
		transition-duration: .01ms !important;
	}
}

/* Foco visible en todo lo interactivo. Requisito AA, no decoración. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 3px solid var(--wp--preset--color--brand-gold-deep);
	outline-offset: 3px;
	border-radius: var(--wp--custom--radius--sm);
}

/* Sobre navy el gold-deep no contrasta: ahí el foco va en gold. */
.has-brand-navy-background-color :where(a, button, input, summary):focus-visible,
.has-brand-navy-deep-background-color :where(a, button, input, summary):focus-visible {
	outline-color: var(--wp--preset--color--brand-gold);
}

/*
 * Botón "outline" (is-style-outline): sin color explícito, Astra le mete
 * su azul de acento por defecto vía una regla de 5 clases de especificidad
 * (".wp-block-buttons .wp-block-button.is-style-outline .wp-block-button__link.wp-element-button").
 * Se iguala esa forma del selector para ganarle, y se fija a la marca —
 * navy sobre fondos claros, cream sobre las dos secciones oscuras.
 */
.wp-block-buttons .wp-block-button.is-style-outline > .wp-block-button__link.wp-element-button {
	color: var(--wp--preset--color--brand-navy);
	border-color: var(--wp--preset--color--brand-navy);
}

.verlu-standard .wp-block-buttons .wp-block-button.is-style-outline > .wp-block-button__link.wp-element-button,
.verlu-final-cta .wp-block-buttons .wp-block-button.is-style-outline > .wp-block-button__link.wp-element-button {
	color: var(--wp--preset--color--brand-cream);
	border-color: rgb(250 246 239 / .5);
}

.verlu-standard .wp-block-buttons .wp-block-button.is-style-outline > .wp-block-button__link.wp-element-button:hover,
.verlu-final-cta .wp-block-buttons .wp-block-button.is-style-outline > .wp-block-button__link.wp-element-button:hover {
	border-color: var(--wp--preset--color--brand-gold);
}

/*
 * Mismo problema con el botón sólido (relleno): theme.json define el
 * navy de fondo con :where() (especificidad cero a propósito, así lo hace
 * WordPress) y la regla de Astra ".wp-block-buttons .wp-block-button
 * .wp-block-button__link" (normal, sin :where) le gana. Se replica esa
 * forma para ganarle — pero solo cuando el bloque NO trae ya un color
 * explícito (:not(.has-background)), para no pisar botones como el gold
 * del CTA final que sí eligen su propio color a propósito.
 */
.wp-block-buttons .wp-block-button:not(.is-style-outline) > .wp-block-button__link.wp-element-button:not(.has-background) {
	background-color: var(--wp--preset--color--brand-navy);
}

.wp-block-buttons .wp-block-button:not(.is-style-outline) > .wp-block-button__link.wp-element-button:not(.has-text-color) {
	color: var(--wp--preset--color--brand-cream);
}

.wp-block-buttons .wp-block-button:not(.is-style-outline) > .wp-block-button__link.wp-element-button:not(.has-background):hover {
	background-color: var(--wp--preset--color--brand-navy-deep);
}

/* Medida de lectura editorial. */
.verlu-prose > p,
.verlu-prose > ul,
.verlu-prose > ol {
	max-width: var(--verlu-measure);
}

/* ---------------------------------------------------------------
   2. Eyebrow / kicker — uso puntual, NO en cada sección (ver docs/02)
   --------------------------------------------------------------- */

.verlu-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: .6em;
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--wp--preset--color--brand-gold-deep);
}

.verlu-eyebrow::before {
	content: "";
	inline-size: 2rem;
	block-size: 1px;
	background: currentColor;
}

.has-brand-navy-background-color .verlu-eyebrow,
.has-brand-navy-deep-background-color .verlu-eyebrow {
	color: var(--wp--preset--color--brand-gold);
}

/* Pastilla localizadora del hero — "Fort Myers, Florida" */
.verlu-locator {
	display: inline-flex;
	align-items: center;
	gap: .5em;
	padding: .4em .9em .4em .7em;
	border: 1px solid var(--wp--preset--color--brand-line);
	border-radius: var(--wp--custom--radius--pill);
	background: var(--wp--preset--color--brand-white);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	color: var(--wp--preset--color--brand-navy);
	margin-block-end: var(--wp--preset--spacing--20);
}

.verlu-locator svg {
	inline-size: .9rem;
	block-size: .9rem;
	color: var(--wp--preset--color--brand-gold-deep);
	flex: none;
}

/* ---------------------------------------------------------------
   3. Section head genérico — sin eyebrow repetido en cada sección
   --------------------------------------------------------------- */

.verlu-section-head {
	max-width: 640px;
	margin-block-end: var(--wp--preset--spacing--40);
}

.verlu-section-head p {
	margin-block-start: var(--wp--preset--spacing--10);
	color: var(--wp--preset--color--brand-muted);
}

.verlu-section-head--center {
	margin-inline: auto;
	text-align: center;
}

/* ---------------------------------------------------------------
   4. Hero
   --------------------------------------------------------------- */

.verlu-hero {
	position: relative;
	padding-block: var(--wp--preset--spacing--60) var(--wp--preset--spacing--50);
}

.verlu-hero h1 {
	max-width: 18ch;
}

.verlu-hero__sub {
	margin-block-start: var(--wp--preset--spacing--20);
	max-width: 46ch;
	font-size: var(--wp--preset--font-size--medium);
	color: var(--wp--preset--color--brand-muted);
}

.verlu-hero__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--wp--preset--spacing--20);
	margin-block-start: var(--wp--preset--spacing--30);
}

.verlu-hero__actions .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	gap: .5em;
}

.verlu-hero__support {
	display: inline-flex;
	align-items: center;
	gap: .6em;
	margin-block-start: var(--wp--preset--spacing--20);
	padding: .6em 1.1em;
	border: 1px solid var(--wp--preset--color--brand-line);
	border-radius: var(--wp--custom--radius--pill);
	background: var(--wp--preset--color--brand-cream-alt);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	color: var(--wp--preset--color--brand-gold-deep);
}

.verlu-hero__support .verlu-dot {
	inline-size: .5rem;
	block-size: .5rem;
	border-radius: 50%;
	background: var(--wp--preset--color--brand-gold-deep);
	flex: none;
	animation: verlu-pulse 2.4s var(--verlu-ease-in-out) infinite;
}

@keyframes verlu-pulse {
	0%, 100% { opacity: 1; }
	50% { opacity: .35; }
}

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

/*
 * Home hero — foto de fondo a todo el ancho (Opción B, decisión del cliente
 * 2026-08-14). La foto "Verlu home Hero.webp" trae un degradado a crema YA
 * incorporado en los píxeles del lado izquierdo — no es un overlay de CSS.
 * Por eso el contenedor usa aspect-ratio exacto a la imagen (sin recorte
 * horizontal posible) y el texto se posiciona sobre esa zona ya desvanecida.
 * En móvil se abandona el overlay: la franja de degradado se angosta tanto
 * al recortar que el texto encima dejaría de ser legible sin agregar un
 * scrim propio (que además pelearía con el degradado ya existente) — se
 * apila la foto arriba y el texto abajo, sobre crema sólido.
 */
/*
 * El grupo de WordPress usa layout "default" (no "constrained") a propósito:
 * "constrained" centra CADA HIJO por separado con su propio max-width, lo
 * que rompe el diseño foto+texto-superpuesto (el texto terminaba centrado
 * en una caja angosta aparte, fuera de la foto). Con "default" los hijos
 * fluyen normal y el centrado del conjunto se hace una sola vez, aquí.
 */
.verlu-hero--photo {
	position: relative;
	/*
	 * !important a propósito: Astra fuerza ".entry-content[data-ast-blocks-
	 * layout] .alignfull { max-width: none }" con 3 clases/atributos de
	 * especificidad — más que cualquier selector de una sola clase propio.
	 * Es el mismo patrón que ya apareció con headings y botones (ver más
	 * arriba); aquí, en vez de perseguir su especificidad exacta, se corta
	 * por lo sano. 1200px coincide con settings.layout.wideSize de theme.json.
	 */
	max-width: 1200px !important;
	margin-inline: auto;
	padding: 0;
}

.verlu-hero--photo .verlu-hero__photo {
	position: relative;
	margin: 0;
	aspect-ratio: 1717 / 916;
	overflow: hidden;
}

.verlu-hero--photo .verlu-hero__photo img {
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
	object-position: center;
}

.verlu-hero--photo .verlu-hero__content {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;
	padding-inline: clamp(1.5rem, 5vw, 4.5rem);
}

.verlu-hero--photo .verlu-hero__content > * {
	max-width: 25rem;
}

/*
 * Mobile — imagen completa, no recortada. Antes el contenedor forzaba
 * aspect-ratio 16/11 sobre la foto ancha del desktop (~1717/916): como
 * 16/11 es más angosto que la foto real, "cover" recortaba los costados y
 * se perdía gente del grupo. Ahora <picture> sirve una foto distinta en
 * mobile — la misma escena, pero SIN el degradado incorporado (ya no hace
 * falta: el texto se apila abajo, no se superpone) — y el contenedor usa
 * el aspect-ratio real de esa foto, así "cover" no tiene nada que
 * recortar. Ver docs/CONTEXTO-TRASPASO.md §6.2/§6.4.
 */
@media (max-width: 900px) {
	.verlu-hero--photo .verlu-hero__photo {
		aspect-ratio: 1717 / 916;
	}

	.verlu-hero--photo .verlu-hero__content {
		position: static;
		max-width: none;
		background: var(--wp--preset--color--brand-cream);
		padding-block: var(--wp--preset--spacing--40);
	}

	.verlu-hero--photo .verlu-hero__content > * {
		max-width: none;
	}
}

/*
 * Hero oscuro — Standard y Distinctions. Mismo mecanismo que
 * ".verlu-hero--photo" (foto de fondo con degradado ya incorporado en los
 * píxeles), pero el degradado de estas fotos va a NAVY, no a crema — ver
 * docs/CONTEXTO-TRASPASO.md §6.3. El texto pasa a cream/gold, y el eyebrow
 * ("The Verlu Standard™") se muestra como titular grande mientras el <h1>
 * ("The guiding vision behind Verlu.") pasa a subtítulo — invierte la
 * jerarquía visual habitual sin tocar qué tag es cuál, tal como quedó
 * aprobado en docs/Logotipo/Formato/Verlu Standard.png.
 */
.verlu-hero--dark .verlu-hero__content,
.verlu-hero--dark :where(h1, h2, h3, p) {
	color: var(--wp--preset--color--brand-cream);
}

.verlu-hero--dark .verlu-eyebrow {
	display: block;
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--xx-large);
	font-weight: 600;
	line-height: 1.12;
	letter-spacing: -0.015em;
	text-transform: none;
	color: var(--wp--preset--color--brand-cream);
	margin-block-end: var(--wp--preset--spacing--20);
}

.verlu-hero--dark .verlu-eyebrow::before {
	content: none;
}

.verlu-hero--dark .verlu-eyebrow::after {
	content: "";
	display: block;
	margin-block-start: .6em;
	inline-size: 2.5rem;
	block-size: 2px;
	background: var(--wp--preset--color--brand-gold);
}

.verlu-hero--dark h1 {
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 700;
	line-height: 1.5;
	letter-spacing: 0;
	max-width: none;
	color: var(--wp--preset--color--brand-gold);
}

.verlu-hero--dark .verlu-hero__sub {
	color: rgb(250 246 239 / .82);
}

@media (max-width: 900px) {
	.verlu-hero--dark .verlu-hero__content {
		background: var(--wp--preset--color--brand-navy);
	}
}

/*
 * Hero wordmark — Home. El mockup reemplaza la oración del H1 por el
 * wordmark "VERLU" grande + el kicker "Understand · Reflect · Navigate"
 * (el mismo lema de la señalética que aparece en las fotos de Standard y
 * Distinctions). Ver docs/Logotipo/Formato/What is Verlu.png y
 * docs/CONTEXTO-TRASPASO.md §6.3.
 */
.verlu-hero__content--wordmark {
	max-width: 30rem;
}

.verlu-hero__content--wordmark > * {
	max-width: none;
}

.verlu-hero__wordmark {
	margin: 0;
	font-size: clamp(2.75rem, 6vw, 4.5rem);
	line-height: 1;
	letter-spacing: .12em;
}

.verlu-hero__kicker {
	margin-block-start: .5em;
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--wp--preset--color--brand-gold-deep);
}

/* ---------------------------------------------------------------
   5. Why Verlu
   --------------------------------------------------------------- */

.verlu-why__lede {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--x-large);
	font-weight: 500;
	line-height: 1.45;
	max-width: 42ch;
	color: var(--wp--preset--color--brand-navy);
}

.verlu-why__questions {
	margin-block-start: var(--wp--preset--spacing--40);
	display: grid;
	gap: var(--wp--preset--spacing--30) var(--wp--preset--spacing--20);
	grid-template-columns: repeat(2, 1fr);
	text-align: center;
}

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

@media (min-width: 1024px) {
	.verlu-why__questions { grid-template-columns: repeat(5, 1fr); }
}

.verlu-why__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 3.75rem;
	block-size: 3.75rem;
	margin-block-end: var(--wp--preset--spacing--20);
	border-radius: 50%;
	border: 1px solid rgb(201 162 39 / .35);
	background: var(--wp--preset--color--brand-cream-alt);
	color: var(--wp--preset--color--brand-gold-deep);
}

.verlu-why__icon svg {
	inline-size: 1.6rem;
	block-size: 1.6rem;
}

.verlu-why__questions p {
	margin: 0;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	color: var(--wp--preset--color--brand-navy);
}

/* ---------------------------------------------------------------
   6/7. How It Works
   --------------------------------------------------------------- */

.verlu-how {
	background: rgb(20 36 63 / .05);
}

.verlu-how__grid {
	display: grid;
	gap: var(--wp--preset--spacing--40);
	grid-template-columns: 1fr;
}

@media (min-width: 900px) {
	.verlu-how__grid {
		grid-template-columns: minmax(200px, 240px) 1fr;
		align-items: start;
	}
}

.verlu-how__intro h3 {
	margin: 0 0 .5em;
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--large);
}

.verlu-how__intro p {
	margin: 0;
	color: var(--wp--preset--color--brand-muted);
	font-size: var(--wp--preset--font-size--small);
}

.verlu-how__pillars {
	display: grid;
	gap: var(--wp--preset--spacing--30);
	grid-template-columns: repeat(2, 1fr);
}

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

.verlu-how__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 3.25rem;
	block-size: 3.25rem;
	margin-block-end: var(--wp--preset--spacing--20);
	border-radius: 50%;
	background: rgb(20 36 63 / .1);
	color: var(--wp--preset--color--brand-navy);
}

.verlu-how__icon svg {
	inline-size: 1.5rem;
	block-size: 1.5rem;
}

.verlu-how__pillar h4 {
	margin: 0 0 .3em;
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--medium);
}

.verlu-how__pillar p {
	margin: 0;
	color: var(--wp--preset--color--brand-muted);
	font-size: var(--wp--preset--font-size--small);
}

.verlu-how__together {
	margin: var(--wp--preset--spacing--40) 0 0;
	text-align: center;
	color: var(--wp--preset--color--brand-navy);
}

.verlu-how__together a {
	color: var(--wp--preset--color--brand-gold-deep);
	font-weight: 600;
}

/* ---------------------------------------------------------------
   8. The Verlu Standard — teaser (Home)
   --------------------------------------------------------------- */

/*
 * Astra define globalmente "h1,h2,...{color:...}" como regla EXPLÍCITA
 * sobre el elemento. Eso le gana a la herencia del cream que baja desde
 * el <div> con has-brand-cream-color (un valor heredado pierde contra
 * cualquier regla explícita, sin importar la especificidad del padre).
 * Se fuerza el color aquí, con selector propio, para la sección oscura del
 * CTA final — si no, el texto queda navy sobre navy, ilegible.
 */
.verlu-final-cta :where(h1, h2, h3, h4, h5, h6, p) {
	color: var(--wp--preset--color--brand-cream);
}

/*
 * Rediseño 2026-08-15 sobre docs/Logotipo/Formato/What is Verlu.png: pasa
 * de sección oscura con lista de outcomes a una banda clara con copy corto
 * + botón + sello circular. El mockup trae una foto con textura de piedra
 * de fondo que no está disponible como asset — se aproxima con un
 * degradado cálido sobre los tokens existentes. Ver
 * docs/CONTEXTO-TRASPASO.md §6.3.
 */
.verlu-standard-teaser {
	background: radial-gradient(ellipse 70% 90% at 20% 30%, var(--wp--preset--color--brand-cream-alt), var(--wp--preset--color--brand-line) 140%);
}

.verlu-standard-teaser__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--wp--preset--spacing--40);
	align-items: center;
}

@media (min-width: 780px) {
	.verlu-standard-teaser__grid { grid-template-columns: 1.1fr .9fr; }
}

.verlu-standard-teaser__copy p {
	margin-block-start: var(--wp--preset--spacing--10);
	max-width: 34ch;
	color: var(--wp--preset--color--brand-muted);
}

.verlu-standard-teaser__copy .wp-block-buttons {
	margin-block-start: var(--wp--preset--spacing--30);
}

/*
 * Sello circular. El mockup lo lleva con el texto curvado sobre el anillo
 * ("THE VERLU STANDARD" / "A LIFELONG STANDARD") — se simplificó a
 * leyendas rectas arriba/abajo del anillo: sin poder verificar visualmente
 * el render en esta sesión (herramienta de captura caída), curvar texto a
 * mano vía SVG textPath/CSS transform es fácil de dejar mal orientado sin
 * ver el resultado. Si se quiere el texto curvado, hay que iterarlo con
 * capturas reales.
 */
.verlu-seal {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: .85rem;
	justify-self: center;
	text-align: center;
}

.verlu-seal__caption {
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--wp--preset--color--brand-gold-deep);
}

.verlu-seal__ring {
	position: relative;
	inline-size: 11rem;
	block-size: 11rem;
	border-radius: 50%;
	border: 1px solid rgb(122 92 18 / .4);
	display: grid;
	place-items: center;
}

.verlu-seal__ring::before {
	content: "";
	position: absolute;
	inset: 10px;
	border-radius: 50%;
	border: 1px dashed rgb(122 92 18 / .3);
}

.verlu-seal__mark {
	inline-size: auto;
	block-size: 7rem;
}

/* ---------------------------------------------------------------
   9. Founder
   --------------------------------------------------------------- */

.verlu-founder__grid {
	display: grid;
	grid-template-columns: .8fr 1.2fr;
	gap: var(--wp--preset--spacing--50);
	align-items: center;
}

@media (max-width: 820px) {
	.verlu-founder__grid { grid-template-columns: 1fr; }
	.verlu-founder__portrait { max-width: 280px; }
}

.verlu-founder__portrait {
	aspect-ratio: 4 / 5;
	border-radius: var(--wp--custom--radius--lg);
	background: linear-gradient(155deg, var(--wp--preset--color--brand-cream-alt), var(--wp--preset--color--brand-line));
	display: grid;
	place-items: center;
	color: var(--wp--preset--color--brand-muted);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	text-align: center;
	padding: var(--wp--preset--spacing--30);
}

.verlu-founder blockquote {
	margin: 0;
	padding: 0;
	border: 0;
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--x-large);
	font-weight: 500;
	font-style: italic;
	line-height: 1.5;
	color: var(--wp--preset--color--brand-navy);
}

.verlu-founder cite {
	display: block;
	margin-block-start: var(--wp--preset--spacing--20);
	font-style: normal;
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	color: var(--wp--preset--color--brand-muted);
}

/* ---------------------------------------------------------------
   10. CTA persistente en móvil (solo Home — inyectado por verlu-core)
   --------------------------------------------------------------- */

.verlu-sticky-cta {
	position: fixed;
	inset-block-end: 0;
	inset-inline: 0;
	z-index: 90;
	display: none;
	padding: .75rem var(--wp--preset--spacing--20);
	background: var(--wp--preset--color--brand-navy);
	box-shadow: 0 -8px 24px -12px rgb(20 36 63 / .45);
	transform: translateY(100%);
	transition: transform var(--verlu-transition);
}

.verlu-sticky-cta.is-visible {
	transform: translateY(0);
}

.verlu-sticky-cta a {
	display: block;
	inline-size: 100%;
	padding: .85em 1.5em;
	border-radius: var(--wp--custom--radius--pill);
	text-align: center;
	text-decoration: none;
	font-weight: 600;
	background: var(--wp--preset--color--brand-gold);
	color: var(--wp--preset--color--brand-navy-deep);
}

@media (max-width: 767px) {
	.verlu-sticky-cta { display: block; }
	body.has-sticky-cta { padding-block-end: 4.5rem; }
}

/* ---------------------------------------------------------------
   11. Formulario HubSpot
   --------------------------------------------------------------- */

.verlu-form-card {
	max-width: 640px;
	margin-inline: auto;
	padding: var(--wp--preset--spacing--40);
	border: 1px solid var(--wp--preset--color--brand-line);
	border-radius: var(--wp--custom--radius--lg);
	background: var(--wp--preset--color--brand-white);
	box-shadow: var(--wp--preset--shadow--card);
}

/*
 * HubSpot inyecta su propio markup y sus propios estilos.
 * Se reescriben los mínimos para que el formulario no parezca un injerto,
 * sin pelear con su hoja completa.
 */
.verlu-form-card .hs-form-field {
	margin-block-end: var(--wp--preset--spacing--20);
}

.verlu-form-card .hs-form-field > label {
	display: block;
	margin-block-end: .35em;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	color: var(--wp--preset--color--brand-navy);
}

.verlu-form-card .hs-input:not([type="checkbox"]):not([type="radio"]) {
	inline-size: 100%;
	padding: .75em .9em;
	border: 1px solid var(--wp--preset--color--brand-line);
	border-radius: var(--wp--custom--radius--md);
	background: var(--wp--preset--color--brand-cream);
	font-family: inherit;
	font-size: var(--wp--preset--font-size--medium);
	color: var(--wp--preset--color--brand-navy);
	transition: border-color var(--verlu-transition);
}

.verlu-form-card .hs-input:focus {
	border-color: var(--wp--preset--color--brand-gold-deep);
}

.verlu-form-card .hs-button {
	inline-size: 100%;
	padding: .95em 2em;
	border: 0;
	border-radius: var(--wp--custom--radius--pill);
	background: var(--wp--preset--color--brand-navy);
	font-family: inherit;
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 600;
	color: var(--wp--preset--color--brand-cream);
	cursor: pointer;
	transition: background var(--verlu-transition);
}

.verlu-form-card .hs-button:hover {
	background: var(--wp--preset--color--brand-navy-deep);
}

.verlu-form-card .hs-error-msg {
	margin-block-start: .35em;
	font-size: var(--wp--preset--font-size--small);
	color: #A32A1E; /* 5.4:1 sobre blanco — AA */
}

/* ---------------------------------------------------------------
   12. Standard — grilla "Looks Like" y cierre de dos tarjetas
   --------------------------------------------------------------- */

.verlu-outcome-grid {
	display: grid;
	grid-template-columns: 1fr;
	margin-block-start: var(--wp--preset--spacing--30);
	border-block-start: 1px solid var(--wp--preset--color--brand-line);
}

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

@media (min-width: 1024px) {
	.verlu-outcome-grid { grid-template-columns: repeat(4, 1fr); }
}

.verlu-outcome {
	padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--20);
	text-align: center;
	border-block-end: 1px solid var(--wp--preset--color--brand-line);
}

@media (min-width: 640px) {
	.verlu-outcome:nth-child(odd) {
		border-inline-end: 1px solid var(--wp--preset--color--brand-line);
	}
}

@media (min-width: 1024px) {
	.verlu-outcome:nth-child(odd) {
		border-inline-end: 0;
	}

	.verlu-outcome:not(:nth-child(4n)) {
		border-inline-end: 1px solid var(--wp--preset--color--brand-line);
	}
}

.verlu-outcome__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 3.5rem;
	block-size: 3.5rem;
	margin-block-end: var(--wp--preset--spacing--20);
	border-radius: 50%;
	background: var(--wp--preset--color--brand-navy);
	color: var(--wp--preset--color--brand-gold);
}

.verlu-outcome__icon svg {
	inline-size: 1.6rem;
	block-size: 1.6rem;
}

.verlu-outcome p {
	margin: 0;
	color: var(--wp--preset--color--brand-navy);
}

.verlu-outcome__title {
	display: block;
	margin-block-end: .15em;
	font-weight: 700;
}

.verlu-outcome__rule {
	display: block;
	inline-size: 1.5rem;
	block-size: 2px;
	margin: .75em auto 0;
	background: var(--wp--preset--color--brand-gold);
}

.verlu-close-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--wp--preset--spacing--20);
}

@media (min-width: 700px) {
	.verlu-close-grid { grid-template-columns: 1fr 1fr; }
}

.verlu-close-card {
	padding: var(--wp--preset--spacing--30);
	border-radius: var(--wp--custom--radius--lg);
}

.verlu-close-card--pursuit {
	background: var(--wp--preset--color--brand-cream-alt);
}

.verlu-close-card--distinctions {
	background: rgb(20 36 63 / .05);
}

.verlu-close-card__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 3rem;
	block-size: 3rem;
	margin-block-end: var(--wp--preset--spacing--20);
	border-radius: 50%;
}

.verlu-close-card__icon svg {
	inline-size: 1.4rem;
	block-size: 1.4rem;
}

.verlu-close-card--pursuit .verlu-close-card__icon {
	background: rgb(201 162 39 / .18);
	color: var(--wp--preset--color--brand-gold-deep);
}

.verlu-close-card--distinctions .verlu-close-card__icon {
	background: var(--wp--preset--color--brand-navy);
	color: var(--wp--preset--color--brand-gold);
}

.verlu-close-card h3 {
	margin: 0;
}

.verlu-close-card__rule {
	display: block;
	inline-size: 1.5rem;
	block-size: 2px;
	margin-block: .6em var(--wp--preset--spacing--10);
	background: var(--wp--preset--color--brand-gold);
}

.verlu-close-card p {
	margin: 0;
	color: var(--wp--preset--color--brand-muted);
}

.verlu-close-card .wp-block-buttons {
	margin-block-start: var(--wp--preset--spacing--20);
}

/* ---------------------------------------------------------------
   13. CTA final
   --------------------------------------------------------------- */

.verlu-final-cta {
	text-align: center;
}

.verlu-final-cta .verlu-hero__actions {
	justify-content: center;
}