/*
 * Componentes del sistema. Valores medidos en el Figma: design/components.md
 * (componentes) y plan §Sistema de diseño (tipografía y espaciado).
 *
 * Las clases van en el envoltorio de cada widget o container de Elementor (y
 * en el HTML de los widgets propios). Los colores que cambian entre claro y
 * oscuro son variables (--sy-heading, --sy-copy, --sy-eyebrow, --sy-focus):
 * una superficie oscura las redefine y todo lo que tiene adentro se adapta.
 */

/* =============================================================================
   Layout
   ========================================================================== */

.sy-section {
	position: relative;
	isolation: isolate;
	padding-block: var(--sy-section-y);
}

.sy-section--y-lg { padding-block: var(--sy-section-y-lg); }
.sy-section--y-sm { padding-block: var(--sy-section-y-sm); }
.sy-section--y-xs { padding-block: var(--sy-section-y-xs); }
.sy-section--flush-top { padding-top: 0; }

.sy-wrap {
	width: min(var(--sy-wrap), 100% - 2 * var(--sy-gutter));
	margin-inline: auto;
}

/* Fila flexible: en un container de Elementor la dirección va por --sy-dir. */
.sy-row {
	--sy-dir: row;
	--sy-wrap-mode: wrap;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
}

.sy-stack {
	display: flex;
	flex-direction: column;
}

.sy-actions {
	--sy-dir: row;
	--sy-wrap-mode: wrap;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	gap: 14px;
}

/* Mobile: botones apilados a todo el ancho (Figma 390). */
@media (max-width: 767px) {
	.sy-actions {
		--sy-dir: column;
		flex-direction: column;
		align-items: stretch;
		gap: 12px;
	}

	.sy-actions .elementor-button,
	.sy-actions > :is(a, button).sy-btn {
		width: 100%;
	}
}

.sy-grid {
	display: grid;
	grid-template-columns: repeat(var(--sy-cols, 1), minmax(0, 1fr));
	gap: 20px;
}

@media (min-width: 768px) {
	.sy-grid--2,
	.sy-grid--3,
	.sy-grid--4 { --sy-cols: 2; }
}

@media (min-width: 1024px) {
	.sy-grid--3 { --sy-cols: 3; }
	.sy-grid--4 { --sy-cols: 4; }
}

/* Encabezado de sección: eyebrow + título + bajada */
.sy-head {
	display: flex;
	flex-direction: column;
	gap: 18px;
}

.sy-head--center {
	align-items: center;
	text-align: center;
}

@media (min-width: 1024px) {
	/* Título a la izquierda y bajada abajo a la derecha (Problem, Outcomes…). */
	.sy-head--split {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 496px);
		column-gap: 64px;
		align-items: end;
	}
}

/* =============================================================================
   Header y footer (plantillas de Elementor, elementor/templates/)
   ========================================================================== */

:root { --sy-header-h: 73px; }

@media (min-width: 1024px) {
	:root { --sy-header-h: 85px; }
}

/*
 * Sticky y sólido por defecto. En las páginas de Elementor, que empiezan con un
 * hero oscuro, va encima del hero y transparente, como en el Figma; se vuelve
 * sólido al bajar (header.js agrega .is-scrolled).
 */
.sy-site-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: var(--sy-deep);
	transition: background-color var(--sy-fast) var(--sy-ease);
	--sy-focus: var(--sy-lime);
}

body.elementor-page .sy-site-header {
	margin-bottom: calc(-1 * var(--sy-header-h));
	background: transparent;
}

body .sy-site-header.is-scrolled {
	background: rgba(6, 11, 69, 0.92);
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
}

.sy-header-sentinel {
	position: absolute;
	top: 0;
	left: 0;
	width: 1px;
	height: 24px;
	pointer-events: none;
}

.sy-header {
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.sy-header__inner {
	--sy-dir: row;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	min-height: 72px;
}

.sy-header__logo {
	--sy-max-w: 106px;
	width: 106px;
}

.sy-header__cta {
	display: none;
}

@media (min-width: 1024px) {
	.sy-header__inner { min-height: 84px; }

	.sy-header__logo {
		--sy-max-w: 180px;
		width: 180px;
	}

	.sy-header__cta { display: block; }
}

.sy-footer {
	position: relative;
	padding: 56px 0 32px;
	background: var(--sy-night);
	color: var(--sy-periwinkle);
	--sy-focus: var(--sy-lime);
}

/* Línea lima difusa en el borde superior. */
.sy-footer::before {
	content: "";
	position: absolute;
	inset: 0 0 auto;
	height: 1px;
	background: linear-gradient(90deg, rgba(146, 239, 44, 0), rgba(146, 239, 44, 0.45) 30%, rgba(146, 239, 44, 0) 80%);
}

.sy-footer__top {
	display: grid;
	gap: 44px;
}

.sy-footer__brand {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 20px;
}

.sy-footer__logo {
	--sy-max-w: 165px;
	width: 165px;
}

/* 330px aunque la columna mida 315: en el Figma el texto se mete en el gap. */
.sy-footer__text {
	--sy-max-w: 330px;
	width: min(330px, 100%);
	color: var(--sy-periwinkle);
	font-size: 15px;
	line-height: 24.75px;
}

.sy-footer__bottom {
	--sy-dir: column;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 12px 24px;
	margin-top: 48px;
	padding-top: 24px;
	border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.sy-footer__credit {
	color: var(--sy-periwinkle);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.52px;
}

@media (min-width: 1024px) {
	.sy-footer { padding: 80px 0 36px; }

	.sy-footer__top {
		grid-template-columns: 315px minmax(0, 1fr);
		gap: 64px;
	}

	.sy-footer__text { width: 330px; }

	.sy-footer__logo {
		--sy-max-w: 200px;
		width: 200px;
	}

	.sy-footer__bottom {
		--sy-dir: row;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		margin-top: 64px;
	}
}

/* =============================================================================
   Superficies
   ========================================================================== */

.sy-section--light { background-color: var(--sy-white); }
.sy-section--mist { background-color: var(--sy-mist); }

/* Grilla de puntos: la importación del Figma la aplastó en una mancha lavanda. */
.sy-section--dots {
	background-image: radial-gradient(rgba(10, 23, 145, 0.09) 1px, transparent 1px);
	background-size: 24px 24px;
}

/* Contexto oscuro: lo comparten secciones, banda CTA y tarjeta destacada. */
.sy-section--dark,
.sy-cta-band,
.sy-card--featured,
.sy-dark {
	--sy-heading: var(--sy-white);
	--sy-copy: var(--sy-on-dark);
	--sy-eyebrow: var(--sy-lime);
	--sy-focus: var(--sy-lime);
	--sy-card-title: var(--sy-white);
	color: var(--sy-on-dark);
}

/* Fondo oscuro: base night + textura de ondas + velo (overlay). */
.sy-section--dark {
	--sy-overlay: linear-gradient(180deg, rgba(3, 6, 40, 0.55), rgba(3, 6, 40, 0.85));
	--sy-bg-pos: center;
	background:
		var(--sy-overlay),
		url("../img/bg-waves.webp") var(--sy-bg-pos) / cover no-repeat,
		var(--sy-night);
}

/* Heroes de Home y Resources: velo horizontal, el texto a la izquierda. */
.sy-section--hero {
	--sy-overlay: linear-gradient(90deg, rgba(3, 6, 40, 0.94) 0%, rgba(3, 6, 40, 0.72) 42%, rgba(3, 6, 40, 0.15) 100%);
}

/* Heroes de Platform, Who It's For y About. */
.sy-section--hero-page {
	--sy-overlay: linear-gradient(180deg, rgba(3, 6, 40, 0.55) 0%, rgba(3, 6, 40, 0.82) 60%, rgba(3, 6, 40, 0.95) 100%);
	--sy-bg-pos: center top;
}

/* Página Book a Demo. */
.sy-section--demo {
	--sy-overlay: linear-gradient(90deg, rgba(3, 6, 40, 0.95) 0%, rgba(3, 6, 40, 0.8) 45%, rgba(3, 6, 40, 0.35) 100%);
}

/* Testimonio: más oscuro arriba. */
.sy-section--quote {
	--sy-overlay: linear-gradient(0deg, rgba(3, 6, 40, 0.35), rgba(3, 6, 40, 0.8));
	--sy-bg-pos: left center;
}

/* Integrations, Start a conversation y MedCloud: textura más arriba. */
.sy-bg--high { --sy-bg-pos: center 30%; }

/* =============================================================================
   Tipografía
   ========================================================================== */

/*
 * Sin text-wrap: balance: el Figma parte las líneas a lo largo (llena cada
 * línea), y el criterio de QA es que los títulos corten en el mismo lugar.
 *
 * Escala fluida: cada clase declara su valor a 390 (-m) y a 1440, y esta regla
 * interpola entre los dos (ver --sy-t en tokens.css). Los modificadores --dNN y
 * --mNN cambian solo un extremo, porque el Figma combina tamaños distintos
 * según la página (p. ej. el hero de Who It's For: 60 en desktop y 32 en mobile).
 */
:where(.sy-display, .sy-h2, .sy-lead, .sy-body, .sy-quote) {
	font-size: clamp(calc(var(--fs-m) * 1px), calc(var(--fs-m) * 1px + (var(--fs) - var(--fs-m)) * var(--sy-t)), calc(var(--fs) * 1px));
	line-height: clamp(calc(var(--lh-m) * 1px), calc(var(--lh-m) * 1px + (var(--lh) - var(--lh-m)) * var(--sy-t)), calc(var(--lh) * 1px));
	letter-spacing: clamp(calc(min(var(--ls), var(--ls-m)) * 1px), calc(var(--ls-m) * 1px + (var(--ls) - var(--ls-m)) * var(--sy-t)), calc(max(var(--ls), var(--ls-m)) * 1px));
}

.sy-display {
	--fs: 62; --lh: 65; --ls: -2.17;
	--fs-m: 36; --lh-m: 39.6; --ls-m: -1.26;
	font-weight: 800;
	color: var(--sy-heading, var(--sy-ink));
}

.sy-display--d60 { --fs: 60; --lh: 63.6; --ls: -2.1; }
.sy-display--d54 { --fs: 54; --lh: 58.32; --ls: -1.89; }
.sy-display--m34 { --fs-m: 34; --lh-m: 38; --ls-m: -1.19; }
.sy-display--m32 { --fs-m: 32; --lh-m: 36.48; --ls-m: -1.12; }

.sy-h2 {
	--fs: 48; --lh: 51.84; --ls: -1.44;
	--fs-m: 28; --lh-m: 32.2; --ls-m: -0.84;
	font-weight: 700;
	color: var(--sy-heading, var(--sy-ultramarine));
}

.sy-h2--d46 { --fs: 46; --lh: 50.6; --ls: -1.38; }
.sy-h2--d44 { --fs: 44; --lh: 48.4; --ls: -1.32; }
.sy-h2--band {
	--fs: 42; --lh: 47; --ls: -1.26;
	--fs-m: 26; --lh-m: 31.2; --ls-m: -0.78;
}

/* Palabra destacada: degradé lima, no lima plano. */
.sy-accent {
	/* Si la palabra destacada ocupa dos líneas, cada una lleva su degradé (Figma). */
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
	background: var(--sy-gradient-accent);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	-webkit-text-fill-color: transparent;
}

.sy-lead {
	--fs: 17; --lh: 28.9; --ls: 0;
	--fs-m: 15; --lh-m: 24.75; --ls-m: 0;
	color: var(--sy-copy, var(--sy-text));
}

.sy-lead--hero { --fs: 19; --lh: 30.4; --fs-m: 16; --lh-m: 25.6; }
.sy-lead--band { --fs: 18; --lh: 28.8; --fs-m: 16; --lh-m: 25.6; }

.sy-body {
	--fs: 18; --lh: 30.6; --ls: 0;
	--fs-m: 15; --lh-m: 25.5; --ls-m: 0;
	color: var(--sy-copy, var(--sy-text));
}

.sy-quote {
	--fs: 25; --lh: 38.75; --ls: -0.25;
	--fs-m: 17; --lh-m: 27.2; --ls-m: -0.17;
	font-weight: 500;
	color: var(--sy-white);
}

.sy-eyebrow {
	--sy-dir: row;
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 10px;
	font-size: 12px;
	font-weight: 600;
	line-height: normal;
	letter-spacing: 1.44px;
	text-transform: uppercase;
	color: var(--sy-eyebrow, var(--sy-green-ink));
}

.sy-eyebrow::before {
	content: "";
	flex: none;
	width: 22px;
	height: 2px;
	border-radius: 2px;
	background: currentColor;
}

.sy-head--center .sy-eyebrow { justify-content: center; }

/* =============================================================================
   Botones
   ========================================================================== */

/*
 * La clase va en el envoltorio del widget de botón de Elementor (y su <a>
 * interno toma las variables) o directo en el <a> de un widget propio.
 * Hover: el glow existente sube de intensidad (plan, "Lo que el Figma no define").
 */
.sy-btn {
	--btn-h: 54px;
	--btn-px: 28px;
	--btn-fs: 16px;
	--btn-bg: var(--sy-lime);
	--btn-bg-hover: var(--btn-bg);
	--btn-fg: var(--sy-deep);
	--btn-border: transparent;
	--btn-border-hover: var(--btn-border);
	--btn-shadow: var(--sy-shadow-lime);
	--btn-shadow-hover: var(--sy-shadow-lime-hover);
}

:is(a, button).sy-btn,
.sy-btn .elementor-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: var(--btn-h);
	padding: 0 var(--btn-px);
	border: 1px solid var(--btn-border);
	border-radius: var(--sy-r-pill);
	background: var(--btn-bg);
	color: var(--btn-fg);
	box-shadow: var(--btn-shadow);
	font-family: var(--sy-font);
	font-size: var(--btn-fs);
	font-weight: 600;
	line-height: 1;
	text-decoration: none;
	white-space: nowrap;
	transition:
		box-shadow var(--sy-fast) var(--sy-ease),
		background-color var(--sy-fast) var(--sy-ease),
		border-color var(--sy-fast) var(--sy-ease);
}

:is(a, button).sy-btn:hover,
.sy-btn .elementor-button:hover {
	background: var(--btn-bg-hover);
	border-color: var(--btn-border-hover);
	box-shadow: var(--btn-shadow-hover);
	color: var(--btn-fg);
}

/* Flecha (u otro icono) después del texto, 18px. */
.sy-btn .elementor-button-icon,
.sy-btn__icon {
	order: 2;
	font-size: 18px;
	line-height: 0;
}

.sy-btn--sm { --btn-h: 46px; --btn-px: 22px; --btn-fs: 15px; }
.sy-btn--lg { --btn-h: 60px; --btn-px: 34px; --btn-fs: 17px; }

.sy-btn--ghost {
	--btn-bg: rgba(255, 255, 255, 0.08);
	--btn-bg-hover: rgba(255, 255, 255, 0.14);
	--btn-fg: var(--sy-white);
	--btn-border: rgba(255, 255, 255, 0.28);
	--btn-border-hover: rgba(255, 255, 255, 0.45);
	--btn-shadow: none;
	--btn-shadow-hover: none;
}

:is(a, button).sy-btn--ghost,
.sy-btn--ghost .elementor-button {
	-webkit-backdrop-filter: blur(5px);
	backdrop-filter: blur(5px);
}

/* Ghost: play en un círculo blanco, antes del texto. */
.sy-btn--ghost .elementor-button-icon,
.sy-btn--ghost .sy-btn__icon {
	order: 0;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: var(--sy-white);
	color: var(--sy-deep);
	font-size: 12px;
}

.sy-btn--navy {
	--btn-bg: var(--sy-ultramarine);
	--btn-fg: var(--sy-white);
	--btn-shadow: var(--sy-shadow-navy);
	--btn-shadow-hover: 0 14px 32px -12px rgba(10, 23, 145, 0.95);
}

.sy-btn--outline {
	--btn-bg: var(--sy-white);
	--btn-fg: var(--sy-ultramarine);
	--btn-border: var(--sy-line-strong);
	--btn-border-hover: var(--sy-ultramarine);
	--btn-shadow: none;
	--btn-shadow-hover: none;
}

/* =============================================================================
   Badge, chips
   ========================================================================== */

.sy-badge {
	--sy-dir: row;
	display: inline-flex;
	flex-direction: row;
	align-items: center;
	gap: 10px;
	width: fit-content;
	padding: 8px 16px 8px 14px;
	border: 1px solid rgba(146, 239, 44, 0.35);
	border-radius: var(--sy-r-pill);
	background: rgba(146, 239, 44, 0.08);
	color: var(--sy-lime-pale);
	font-size: 12px;
	font-weight: 600;
	line-height: normal;
	letter-spacing: 0.72px;
}

.sy-badge::before {
	content: "";
	flex: none;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--sy-lime);
	box-shadow: 0 0 0 4px rgba(146, 239, 44, 0.18);
}

.sy-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.sy-chip {
	display: inline-flex;
	align-items: center;
	padding: 7px 11px;
	border: 1px solid rgba(146, 239, 44, 0.25);
	border-radius: var(--sy-r-pill);
	background: rgba(146, 239, 44, 0.08);
	color: var(--sy-lime-soft);
	font-size: 12px;
	font-weight: 600;
	line-height: normal;
}

/* Clara, con punto lima (segmentos de Who It's For). */
.sy-chip--light {
	gap: 8px;
	padding: 8px 12px;
	border-color: #D5DBEC;
	background: var(--sy-white);
	box-shadow: 0 8px 18px -14px rgba(10, 23, 145, 0.6);
	color: var(--sy-ultramarine);
	font-size: 13px;
	line-height: 16px;
	white-space: nowrap;
}

.sy-chip--light::before {
	content: "";
	flex: none;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--sy-lime);
	box-shadow: 0 0 0 3px rgba(146, 239, 44, 0.25);
}

@media (min-width: 768px) {
	.sy-chip--light {
		padding: 9px 14px;
		font-size: 14px;
		line-height: 18px;
	}
}

/* =============================================================================
   Tiles de icono y números outline
   ========================================================================== */

.sy-tile {
	display: inline-grid;
	place-items: center;
	flex: none;
	width: 56px;
	height: 56px;
	border-radius: var(--sy-r-tile);
	background: var(--sy-gradient-tile);
	box-shadow: var(--sy-shadow-tile);
	color: var(--sy-lime);
	font-size: 26px;
	line-height: 0;
}

.sy-tile--lime {
	background: var(--sy-gradient-tile-lime);
	box-shadow: var(--sy-shadow-tile-lime);
	color: var(--sy-deep);
}

.sy-tile--glass {
	width: 52px;
	height: 52px;
	border: 1px solid rgba(146, 239, 44, 0.4);
	border-radius: 15px;
	background: rgba(146, 239, 44, 0.1);
	box-shadow: var(--sy-shadow-tile-glass);
	font-size: 24px;
}

.sy-tile--sm {
	width: 44px;
	height: 44px;
	border-radius: 13px;
	font-size: 22px;
}

/* El número se genera (01, 02…): trazo sin relleno. */
.sy-num {
	color: transparent;
	-webkit-text-stroke: 1.5px var(--sy-num-color, var(--sy-num-stroke));
	font-size: 46px;
	font-weight: 700;
	line-height: 41.4px;
	letter-spacing: -0.92px;
}

/* Segmentos de Who It's For: 40/36 en mobile, 52/46.8 en desktop. */
.sy-num--52 {
	font-size: clamp(40px, calc(40px + 12 * var(--sy-t)), 52px);
	line-height: clamp(36px, calc(36px + 10.8 * var(--sy-t)), 46.8px);
	letter-spacing: clamp(-1.04px, calc(-0.8px - 0.24 * var(--sy-t)), -0.8px);
}

.sy-num--40 {
	font-size: 40px;
	line-height: 36px;
	letter-spacing: -0.8px;
}

/* =============================================================================
   Tarjetas
   ========================================================================== */

/* Clara, con borde en degradé (Problem, Outcomes, Platform preview). */
.sy-card {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 18px;
	padding: 29px 27px;
	border: 1px solid transparent;
	border-radius: var(--sy-r-card);
	background:
		linear-gradient(var(--sy-white), var(--sy-white)) padding-box,
		var(--sy-gradient-card-border) border-box;
}

.sy-card--lg { border-radius: var(--sy-r-card-lg); padding: 33px; }

.sy-card__top {
	--sy-dir: row;
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	justify-content: space-between;
}

.sy-card__title {
	color: var(--sy-card-title, var(--sy-ink));
	font-size: 20px;
	font-weight: 600;
	line-height: 26px;
}

.sy-card__subtitle {
	color: var(--sy-green);
	font-size: 16px;
	font-weight: 600;
	line-height: normal;
}

.sy-card__text {
	color: var(--sy-copy, var(--sy-text));
	font-size: 15px;
	line-height: 24.75px;
}

/* Imagen arriba (Platform preview). */
.sy-card--media {
	gap: 18px;
	padding: 13px 13px 37px;
	border-radius: var(--sy-r-card-lg);
}

.sy-card--media img {
	width: 100%;
	aspect-ratio: 258 / 275;
	object-fit: cover;
	border-radius: var(--sy-r-image);
}

/* Destacada: navy con textura (Outcomes 05). */
.sy-card--featured {
	border: 0;
	padding: 34px;
	border-radius: var(--sy-r-card-lg);
	background:
		var(--sy-overlay-media),
		url("../img/bg-waves.webp") center / cover no-repeat,
		var(--sy-deep);
	box-shadow: var(--sy-shadow-featured);
	--sy-num-color: rgba(146, 239, 44, 0.8);
	--sy-copy: var(--sy-on-dark-strong);
}

.sy-card--featured .sy-card__subtitle { color: var(--sy-lime); }

/* Vidrio sobre oscuro (Who it's for, video del hero, testimonio). */
.sy-card--glass {
	gap: 16px;
	padding: 30px;
	border: 1px solid rgba(255, 255, 255, 0.16);
	border-radius: var(--sy-r-card);
	background: var(--sy-gradient-glass);
	box-shadow: var(--sy-shadow-glass);
	-webkit-backdrop-filter: blur(9px);
	backdrop-filter: blur(9px);
	--sy-card-title: var(--sy-white);
	--sy-copy: var(--sy-on-dark-strong);
}

.sy-card--glass .sy-card__title { font-size: 21px; line-height: normal; }
.sy-card--glass .sy-card__text { font-size: 16px; font-weight: 500; line-height: 24px; }
.sy-card--glass .sy-chips { margin-top: auto; }

@media (max-width: 767px) {
	.sy-card,
	.sy-card--lg,
	.sy-card--featured {
		border-radius: var(--sy-r-card-sm);
		padding: 26px 22px 28px;
	}
}

/* =============================================================================
   Banda CTA y tarjeta de cita
   ========================================================================== */

.sy-cta-band {
	--sy-dir: row;
	position: relative;
	overflow: hidden;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	gap: 40px;
	padding: 72px 80px;
	border-radius: var(--sy-r-band);
	background:
		var(--sy-overlay-media),
		url("../img/bg-waves.webp") center / cover no-repeat,
		var(--sy-night);
	box-shadow: var(--sy-shadow-band);
}

/* El único glow real del Figma: círculo lima arriba a la derecha. */
.sy-cta-band::before {
	content: "";
	position: absolute;
	top: -140px;
	right: -120px;
	width: 420px;
	height: 420px;
	border-radius: 50%;
	background: radial-gradient(rgba(146, 239, 44, 0.28) 0, rgba(146, 239, 44, 0) 65%);
	pointer-events: none;
}

.sy-cta-band > * {
	position: relative;
}

.sy-cta-band__text {
	display: flex;
	flex-direction: column;
	gap: clamp(14px, calc(14px + 4.5 * var(--sy-t)), 18.5px);
	max-width: 680px;
}

/* Mobile (Platform 5:1703): radio 26, 36 · 24 y el botón a lo ancho. */
@media (max-width: 1023px) {
	.sy-cta-band {
		--sy-dir: column;
		flex-direction: column;
		align-items: flex-start;
		gap: 28px;
		padding: 36px 24px;
		border-radius: var(--sy-r-card-lg);
	}

	.sy-cta-band .sy-lead--band { --fs-m: 15; --lh-m: 24; }
}

/* Angosta (About): tile y título en una fila, sin bajada y botón normal. */
.sy-cta-band__row {
	--sy-dir: row;
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 20px;
}

.sy-cta-band--slim .sy-h2 {
	--fs: 44; --lh: 48.4; --ls: -1.32;
	--fs-m: 26; --lh-m: 29.9; --ls-m: -0.78;
	white-space: nowrap;
}

@media (min-width: 1024px) {
	.sy-cta-band--slim { padding: 64px 80px; }

	/* "See SYNCRASY in" entra al límite en mobile: ahí corta con <br>. */
	.sy-br-m { display: none; }
}

@media (max-width: 767px) {
	.sy-cta-band--slim .sy-btn { --btn-h: 52px; }
	.sy-cta-band { align-items: stretch; }
	.sy-cta-band .sy-btn--lg { --btn-h: 54px; --btn-px: 24px; --btn-fs: 16px; }
	.sy-cta-band .elementor-button { width: 100%; }
}

.sy-quote-card {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 30px;
	max-width: 1000px;
	margin-inline: auto;
	padding: 56px 72px;
	border: 1px solid rgba(255, 255, 255, 0.16);
	border-radius: var(--sy-r-quote);
	background: var(--sy-gradient-glass);
	box-shadow: var(--sy-shadow-glass);
	-webkit-backdrop-filter: blur(9px);
	backdrop-filter: blur(9px);
	text-align: center;
}

@media (max-width: 767px) {
	.sy-quote-card {
		padding: 48px 24px 32px;
		border-radius: var(--sy-r-card);
	}
}