/*
 * Layout de las secciones de página. Medidas: design/home.md (Home); las
 * páginas internas se suman en F7–F10.
 *
 * Cada sección lleva una clase .sy-s-<nombre> que fija su padding vertical y
 * la separación entre su encabezado y su contenido, con un valor a 1440
 * (--pt, --pb, --sy-gap) y otro a 390 (--pt-m, --pb-m, --sy-gap-m). La regla de abajo
 * interpola entre los dos con --sy-t, como la tipografía: el Figma usa
 * paddings muy distintos según la sección (p. ej. 0/120 en desktop y 60/60 en
 * mobile en Differentiation) y así coinciden exacto en los dos frames.
 */

.sy-section[class*="sy-s-"] {
	padding-top: clamp(calc(min(var(--pt), var(--pt-m)) * 1px), calc(var(--pt-m) * 1px + (var(--pt) - var(--pt-m)) * var(--sy-t)), calc(max(var(--pt), var(--pt-m)) * 1px));
	padding-bottom: clamp(calc(min(var(--pb), var(--pb-m)) * 1px), calc(var(--pb-m) * 1px + (var(--pb) - var(--pb-m)) * var(--sy-t)), calc(max(var(--pb), var(--pb-m)) * 1px));
}

.sy-section[class*="sy-s-"] > .sy-wrap {
	gap: clamp(calc(min(var(--sy-gap, 60), var(--sy-gap-m, 36)) * 1px), calc(var(--sy-gap-m, 36) * 1px + (var(--sy-gap, 60) - var(--sy-gap-m, 36)) * var(--sy-t)), calc(max(var(--sy-gap, 60), var(--sy-gap-m, 36)) * 1px));
}

/* Desktop T/B · mobile T/B · encabezado → contenido. El hero suma el header (85 / 73). */
.sy-s-hero         { --pt: 181; --pb: 48;  --pt-m: 121; --pb-m: 72; --sy-gap: 64; --sy-gap-m: 44; }
.sy-s-problem      { --pt: 120; --pb: 120; --pt-m: 72;  --pb-m: 72; --sy-gap: 60; --sy-gap-m: 36; }
.sy-s-diff         { --pt: 0;   --pb: 120; --pt-m: 60;  --pb-m: 60; --sy-gap: 56; --sy-gap-m: 36; }
.sy-s-how          { --pt: 60;  --pb: 60;  --pt-m: 60;  --pb-m: 72; --sy-gap: 52; --sy-gap-m: 36; }
.sy-s-preview      { --pt: 60;  --pb: 60;  --pt-m: 72;  --pb-m: 35; --sy-gap: 52; --sy-gap-m: 36; }
.sy-s-who          { --pt: 60;  --pb: 60;  --pt-m: 83;  --pb-m: 80; --sy-gap: 60; --sy-gap-m: 36; }
.sy-s-connected    { --pt: 120; --pb: 120; --pt-m: 72;  --pb-m: 0;  --sy-gap: 72; --sy-gap-m: 40; }
.sy-s-outcomes     { --pt: 0;   --pb: 120; --pt-m: 72;  --pb-m: 72; --sy-gap: 60; --sy-gap-m: 40; }
.sy-s-testimonial  { --pt: 128; --pb: 128; --pt-m: 80;  --pb-m: 80; --sy-gap: 17; --sy-gap-m: 18; }
.sy-s-trust        { --pt: 112; --pb: 112; --pt-m: 60;  --pb-m: 54; --sy-gap: 72; --sy-gap-m: 32; }
.sy-s-faq          { --pt: 112; --pb: 112; --pt-m: 60;  --pb-m: 72; --sy-gap: 72; --sy-gap-m: 32; }
.sy-s-demo         { --pt: 128; --pb: 128; --pt-m: 60;  --pb-m: 60; --sy-gap: 72; --sy-gap-m: 36; }

/* Platform (design/platform.md). How it works termina en 0 y Capabilities
   empieza en 144 en el Figma mobile: se normalizan a 72/72 (mismo total). */
.sy-s-p-hero         { --pt: 173; --pb: 0;   --pt-m: 117; --pb-m: 0;  --sy-gap: 0;  --sy-gap-m: 0; }
.sy-s-p-foundation   { --pt: 120; --pb: 120; --pt-m: 60;  --pb-m: 72; --sy-gap: 64; --sy-gap-m: 40; }
.sy-s-p-how          { --pt: 120; --pb: 120; --pt-m: 72;  --pb-m: 72; --sy-gap: 72; --sy-gap-m: 40; }
.sy-s-p-capabilities { --pt: 120; --pb: 120; --pt-m: 72;  --pb-m: 72; --sy-gap: 60; --sy-gap-m: 36; }
.sy-s-p-integrations { --pt: 128; --pb: 128; --pt-m: 80;  --pb-m: 80; --sy-gap: 72; --sy-gap-m: 36; }

/* Who It's For (design/who-its-for.md). Health Plans termina en 64 en el
   Figma mobile por un error del importador: los tres segmentos van a 72. */
.sy-s-w-hero         { --pt: 189; --pb: 104; --pt-m: 117; --pb-m: 64; --sy-gap: 0;  --sy-gap-m: 0; }
.sy-s-segment        { --pt: 120; --pb: 120; --pt-m: 72;  --pb-m: 72; }

/* About (design/about.md). */
.sy-s-a-hero         { --pt: 189; --pb: 112; --pt-m: 117; --pb-m: 64; --sy-gap: 0;  --sy-gap-m: 0; }
.sy-s-a-tech         { --pt: 120; --pb: 120; --pt-m: 72;  --pb-m: 72; --sy-gap: 80; --sy-gap-m: 36; }
.sy-s-a-medcloud     { --pt: 128; --pb: 128; --pt-m: 80;  --pb-m: 80; --sy-gap: 0;  --sy-gap-m: 0; }
.sy-s-a-demo         { --pt: 120; --pb: 120; --pt-m: 72;  --pb-m: 72; --sy-gap: 40; --sy-gap-m: 24; }

/* Banda CTA al pie de las páginas internas. La banda es el .sy-wrap: su gap
   (texto ↔ botón) sale de acá, 40 en fila y 28 en columna. */
.sy-s-band           { --pt: 112; --pb: 112; --pt-m: 72;  --pb-m: 72; --sy-gap: 40; --sy-gap-m: 28; }

/* Anclas (menú del footer, tarjetas de Who It's For): el header es sticky. */
.sy-section[id] {
	scroll-margin-top: clamp(73px, calc(73px + 12 * var(--sy-t)), 85px);
}

/* Eyebrow → título → bajada: 14–15 en mobile, 17–18 en desktop. */
.sy-head {
	gap: clamp(14px, calc(14px + 3 * var(--sy-t)), 17px);
}

@media (min-width: 1024px) {
	.sy-head--aside-536 { grid-template-columns: minmax(0, 1fr) minmax(0, 536px); }
}

.sy-head--center { max-width: 900px; margin-inline: auto; }
.sy-head--center .sy-lead { max-width: 760px; }
.sy-lead--m255 { --lh-m: 25.5; }
.sy-head--narrow { max-width: 820px; margin-inline: auto; }

/* Encabezado con un botón a la derecha (Who it's for). */
.sy-head-row {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 24px;
}

.sy-head-row > .sy-head { max-width: 700px; }

@media (min-width: 1024px) {
	.sy-head-row {
		--sy-dir: row;
		flex-direction: row;
		align-items: flex-end;
		justify-content: space-between;
	}
}

/* Botón suelto centrado bajo un bloque. */
.sy-actions--center { justify-content: center; }

@media (max-width: 767px) {
	.sy-actions--center,
	.sy-actions--auto {
		--sy-dir: row;
		flex-direction: row;
		justify-content: center;
	}

	.sy-actions--auto { justify-content: flex-start; }

	.sy-actions--center .elementor-button,
	.sy-actions--auto .elementor-button { width: auto; }
}

/* =============================================================================
   Hero
   ========================================================================== */

/* Mobile: velo vertical y la textura solo arriba (55.6% del alto). */
@media (max-width: 767px) {
	.sy-s-hero.sy-section--hero {
		--sy-overlay: linear-gradient(180deg, rgba(3, 6, 40, 0.55) 0%, rgba(3, 6, 40, 0.8) 45%, rgba(3, 6, 40, 0.95) 100%);
		background:
			var(--sy-overlay),
			url("../img/bg-waves.webp") center top / auto 55.6% no-repeat,
			var(--sy-night);
	}
}

.sy-hero {
	display: flex;
	flex-direction: column;
	gap: 44px;
}

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

/* badge → H1 → bajada → botones → insignia: 21/21/26/34 en mobile, 27/28/33/40 en desktop. */
.sy-hero__text > :nth-child(2) { margin-top: clamp(21px, calc(21px + 6 * var(--sy-t)), 27px); }
.sy-hero__text > :nth-child(3) { margin-top: clamp(21px, calc(21px + 7 * var(--sy-t)), 28px); }
.sy-hero__text > :nth-child(4) { margin-top: clamp(26px, calc(26px + 7 * var(--sy-t)), 33px); }
.sy-hero__text > :nth-child(5) { margin-top: clamp(34px, calc(34px + 6 * var(--sy-t)), 40px); }

@media (max-width: 767px) {
	.sy-hero .sy-badge {
		width: 100%;
		font-size: 10px;
		line-height: 14px;
		letter-spacing: 0.4px;
	}
}

@media (min-width: 1024px) {
	.sy-hero {
		--sy-dir: row;
		flex-direction: row;
		align-items: center;
		gap: 64px;
	}

	.sy-hero__text { flex: 0 0 600px; }
	.sy-hero__media { flex: 1; min-width: 0; }
}

/* Insignia (HITRUST): tile de vidrio chico + texto. */
.sy-trust-badge {
	--sy-dir: row;
	--sy-wrap-mode: nowrap;
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 12px;
}

.sy-trust-badge__label {
	color: var(--sy-white);
	font-size: 15px;
	font-weight: 600;
	line-height: normal;
}

/* =============================================================================
   Texto + medio en dos columnas (Connected, Trust, Book a demo)
   ========================================================================== */

.sy-split {
	display: flex;
	flex-direction: column;
	gap: 40px;
}

.sy-split__text {
	display: flex;
	flex-direction: column;
	gap: 15px;
}

.sy-split__text > .sy-callout,
.sy-split__text > .elementor-widget-sy-callout { margin-top: 9px; }

@media (min-width: 1024px) {
	.sy-split {
		--sy-dir: row;
		flex-direction: row;
		align-items: center;
		gap: 72px;
	}

	.sy-split__text { gap: 19px; }
	.sy-split__text > .elementor-widget-sy-callout { margin-top: 9px; }
	.sy-split__media { flex: 1; min-width: 0; }

	.sy-s-connected .sy-split__text { flex: 0 0 500px; }
	.sy-s-trust .sy-split__text { flex: 0 0 640px; }
	.sy-s-demo .sy-split__text { flex: 0 0 520px; }
}

.sy-s-trust .sy-split { gap: 32px; }

/* Caja del diagrama (Connected): textura a la derecha; en mobile, con velo. */
.sy-diagram {
	position: relative;
	display: grid;
	place-items: center;
	height: 404px;
	padding: 30px 20px;
	overflow: hidden;
	border-radius: var(--sy-r-card-lg);
	background:
		linear-gradient(144deg, rgba(10, 23, 145, 0.55), rgba(4, 8, 51, 0.9)),
		url("../img/bg-waves.webp") right center / cover no-repeat,
		var(--sy-deep);
}

.sy-diagram .sy-diagram__img {
	--sy-max-w: 344px;
	width: 344px;
}

@media (min-width: 1024px) {
	.sy-diagram {
		height: 540px;
		padding: 0;
		border-radius: var(--sy-r-quote);
		background:
			url("../img/bg-waves.webp") right center / cover no-repeat,
			var(--sy-deep);
	}

	/* El diagrama es más grande que la caja y queda recortado, como en el Figma. */
	.sy-diagram .sy-diagram__img {
		--sy-max-w: none;
		position: absolute;
		top: -47.4px;
		left: -6px;
		width: 634px;
	}
}

/* Tarjeta del sello (Trust). */
.sy-seal {
	display: grid;
	place-items: center;
	height: 236px;
	padding: 23px;
	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;
	box-shadow: 0 30px 60px -36px rgba(10, 23, 145, 0.6);
	overflow: hidden;
}

.sy-seal .sy-seal__img {
	--sy-max-w: 186px;
	width: 186px;
}

.sy-seal .sy-seal__img img { border-radius: 100px; }

@media (min-width: 1024px) {
	.sy-s-trust .sy-split { gap: 72px; }

	.sy-seal {
		height: 294px;
		padding: 35px;
		border-radius: 28px;
	}

	.sy-seal .sy-seal__img {
		--sy-max-w: 220px;
		width: 220px;
	}

	.sy-seal .sy-seal__img img { border-radius: 0; }
}

/* Book a demo: bloque de texto con intro + lista. */
.sy-s-demo .sy-split { gap: 36px; }

.sy-s-demo .sy-split__text > :nth-child(2) { margin-top: 1px; }
.sy-s-demo .sy-split__text > :nth-child(4) { margin-top: 7px; }

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

@media (min-width: 1024px) {
	.sy-s-demo .sy-split { gap: 72px; }
	.sy-s-demo .sy-split__text { gap: 21.5px; }
	.sy-s-demo .sy-split__text > :nth-child(4) { margin-top: 7px; }
}

/* =============================================================================
   FAQ y testimonio
   ========================================================================== */

.sy-faq-layout {
	display: flex;
	flex-direction: column;
	gap: 32px;
}

@media (min-width: 1024px) {
	.sy-faq-layout {
		--sy-dir: row;
		flex-direction: row;
		align-items: flex-start;
		gap: 72px;
	}

	.sy-faq-layout > .sy-head { flex: 0 0 380px; }
	.sy-faq-layout > :last-child { flex: 1; min-width: 0; }
}

.sy-s-testimonial .sy-quote-card { margin-top: 36px; }

/* Comillas sobre el borde superior de la tarjeta. */
.sy-quote-card .sy-quote-mark {
	position: absolute;
	top: -28px;
	left: 50%;
	display: grid;
	place-items: center;
	width: 56px;
	height: 56px;
	margin-left: -28px;
	border-radius: var(--sy-r-tile);
	background: var(--sy-lime);
	box-shadow: 0 0 40px -4px rgba(146, 239, 44, 0.8);
	color: var(--sy-deep);
	font-size: 26px;
	line-height: 0;
}

.sy-quote-by {
	--sy-dir: row;
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 16px;
	padding-top: 26px;
	border-top: 1px solid rgba(255, 255, 255, 0.14);
	text-align: left;
}

.sy-avatar {
	display: grid;
	place-items: center;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	overflow: hidden;
}

.sy-avatar--placeholder {
	border: 1px dashed rgba(146, 239, 44, 0.6);
	color: var(--sy-on-dark);
	font-size: 10px;
	font-weight: 600;
}

.sy-quote-by__name {
	color: var(--sy-white);
	font-size: 18px;
	font-weight: 600;
	line-height: normal;
}

.sy-quote-by__role {
	color: var(--sy-on-dark);
	font-size: 15px;
	line-height: normal;
}

@media (max-width: 767px) {
	.sy-quote-card {
		padding: 42px 21px 27px;
		border-radius: var(--sy-r-card-lg);
	}
}

/* Anchos de encabezado centrado según la sección (Figma). */
.sy-head--w780 { max-width: 780px; }
.sy-head--wide { max-width: none; }

/* Testimonial y Outcomes: 18 entre eyebrow y título también en mobile (Figma). */
@media (max-width: 767px) {
	.sy-s-testimonial .sy-head,
	.sy-s-outcomes .sy-head { gap: 18px; }
}

/* =============================================================================
   Platform (design/platform.md)
   ========================================================================== */

.sy-body--m2475 { --lh-m: 24.75; }
.sy-head--w720 { max-width: 720px; }

/* El H2 de Capabilities entra al límite en 720: con 680 corta siempre en 3 líneas. */
.sy-head--w720 > .sy-h2 { --sy-max-w: 680px; }

@media (min-width: 1024px) {
	/* 775 de texto en 780: en una sola línea, como el Figma. */
	.sy-h2--line { white-space: nowrap; }
}

@media (max-width: 767px) {
	.sy-s-p-foundation .sy-head,
	.sy-s-p-capabilities .sy-head { gap: 18px; }
}

/* --- Hero: texto centrado y el portátil recortado por la sección ------------- */

.sy-s-p-hero {
	overflow: hidden;
}

@media (max-width: 767px) {
	.sy-s-p-hero.sy-section--hero-page {
		--sy-overlay: linear-gradient(180deg, rgba(3, 6, 40, 0.55) 0%, rgba(3, 6, 40, 0.82) 55%, rgba(3, 6, 40, 0.95) 100%);
		background:
			var(--sy-overlay),
			url("../img/bg-waves.webp") center top / auto 80.2% no-repeat,
			var(--sy-night);
	}
}

/* Heroes centrados de las páginas internas (Platform, Who It's For, About). */
.sy-hero-c {
	align-items: center;
	text-align: center;
}

.sy-p-hero > .sy-display { --sy-max-w: 960px; }

/* La línea 2 mide 815 y la 1 con "workflows" daría 822: 818 corta igual que el Figma. */
.sy-p-hero > .sy-lead { --sy-max-w: 818px; }

/* eyebrow → H1 → bajada → botón: 20/19.6/26.7 en mobile, 25/26/33 en desktop. */
.sy-p-hero > :nth-child(2) { margin-top: clamp(20px, calc(20px + 5 * var(--sy-t)), 25px); }
.sy-p-hero > :nth-child(3) { margin-top: clamp(19.6px, calc(19.6px + 6.4 * var(--sy-t)), 26px); }
.sy-p-hero > :nth-child(4) { margin-top: clamp(26.7px, calc(26.7px + 6.3 * var(--sy-t)), 33px); }

.sy-p-hero > .sy-actions {
	position: relative;
	z-index: 1;
}

/* Mobile: 379 de ancho, más que el gutter (x=5 en el Figma). Lleva
   .elementor-widget para ganarle al margin-block-end: 0 de Elementor. */
.sy-p-hero > .elementor-widget.sy-p-hero__laptop {
	--sy-max-w: none;
	width: calc(100% + 29px);
	margin: 0 -14.5px -24px;
	pointer-events: none;
}

.sy-p-hero__laptop img {
	display: block;
	width: 100%;
	height: auto;
}

@media (min-width: 768px) {
	/* La caja empieza 52 por encima del pie del botón (zona transparente del
	   PNG) y la sección corta los 65 transparentes de abajo. Centrado: el
	   Figma lo corre 16 px a la derecha, sin motivo de diseño. */
	.sy-p-hero > .elementor-widget.sy-p-hero__laptop {
		width: min(950px, 100%);
		margin: -52px 0 -65px;
	}
}

/* --- Foundation: título a la izquierda, bajada y callout a la derecha ------- */

.sy-p-intro {
	display: flex;
	flex-direction: column;
	gap: 23px;
}

.sy-p-intro__side {
	display: flex;
	flex-direction: column;
	gap: 22px;
}

@media (min-width: 1024px) {
	.sy-p-intro {
		--sy-dir: row;
		flex-direction: row;
		align-items: flex-start;
		gap: 72px;
	}

	.sy-p-intro > .sy-head { flex: 0 0 500px; }
	.sy-p-intro__side { flex: 1; min-width: 0; }
}

/* --- Integrations: columna de 440 y la grilla de tiles ----------------------- */

.sy-p-integrations .sy-split__text { gap: 20px; }
.sy-p-integrations .sy-split__text > .elementor-widget-sy-callout { margin-top: 14px; }

@media (min-width: 1024px) {
	.sy-p-integrations .sy-split__text { flex: 0 0 440px; gap: 0; }
	.sy-p-integrations .sy-split__text > :nth-child(2) { margin-top: 18.9px; }
	.sy-p-integrations .sy-split__text > :nth-child(3) { margin-top: 21.1px; }
	.sy-p-integrations .sy-split__text > :nth-child(4) { margin-top: 34px; }
}

/* =============================================================================
   Who It's For (design/who-its-for.md)
   ========================================================================== */

@media (max-width: 767px) {
	.sy-s-w-hero { --sy-bg-pos: center; }
}

/* La línea 1 con "Managing" daría 990: con 950 corta como el Figma. */
.sy-w-hero > .sy-display { --sy-max-w: 950px; }
.sy-w-hero > .sy-lead { --sy-max-w: 820px; }

/* eyebrow → H1 → bajada → tarjetas: 19/20.5/38.5 en mobile, 26/25.5/57 en desktop. */
.sy-w-hero > :nth-child(2) { margin-top: clamp(19px, calc(19px + 7 * var(--sy-t)), 26px); }
.sy-w-hero > :nth-child(3) { margin-top: clamp(20.5px, calc(20.5px + 5 * var(--sy-t)), 25.5px); }
.sy-w-hero > :nth-child(4) { margin-top: clamp(38.5px, calc(38.5px + 18.5 * var(--sy-t)), 57px); }

.sy-w-hero > .elementor-widget.elementor-widget-sy-link-cards {
	--sy-max-w: 1000px;
	width: 100%;
}

/* =============================================================================
   About (design/about.md)
   ========================================================================== */

.sy-a-hero > .sy-display { --sy-max-w: 980px; }

/* La línea 1 mide 816 en la caja de 820 del Figma: con 840 no depende del navegador. */
.sy-a-hero > .sy-lead { --sy-max-w: 840px; }

/* eyebrow → H1 → bajada → cadena: 20/19.7/38.3 en mobile, 25/26/57 en desktop. */
.sy-a-hero > :nth-child(2) { margin-top: clamp(20px, calc(20px + 5 * var(--sy-t)), 25px); }
.sy-a-hero > :nth-child(3) { margin-top: clamp(19.7px, calc(19.7px + 6.3 * var(--sy-t)), 26px); }
.sy-a-hero > :nth-child(4) { margin-top: clamp(38.3px, calc(38.3px + 18.7 * var(--sy-t)), 57px); }

/* --- Technology: foto a la izquierda; en mobile, al final ---------------- */

.sy-a-tech {
	--sy-dir: column-reverse;
	flex-direction: column-reverse;
}

.sy-a-tech__media {
	align-self: center;
	width: 100%;
	max-width: 560px;
}

.sy-a-tech__text {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.sy-a-tech__media > .elementor-widget.sy-a-tech__img {
	--sy-max-w: none;
	width: 100%;
	aspect-ratio: 350 / 320;
	overflow: hidden;
	border-radius: 24px;
	box-shadow: 0 50px 90px -50px rgba(10, 23, 145, 0.95);
}

.sy-a-tech__img img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center top;
}

@media (max-width: 767px) {
	.sy-s-a-tech .sy-callout--light-strong { gap: 14px; }
}

@media (min-width: 1024px) {
	.sy-a-tech {
		--sy-dir: row;
		flex-direction: row;
		align-items: center;
	}

	.sy-a-tech__media { flex: 0 0 560px; }
	.sy-a-tech__text { flex: 1; min-width: 0; gap: 22px; }

	.sy-a-tech__media > .elementor-widget.sy-a-tech__img {
		aspect-ratio: auto;
		height: 520px;
		border-radius: 32px;
	}
}

/* --- MedCloud Depot: columna centrada ------------------------------------ */

.sy-a-medcloud {
	align-items: center;
	text-align: center;
}

.sy-h2--lh528 { --lh: 52.8; }
.sy-a-medcloud .sy-lead--band { --fs-m: 15; --lh-m: 24; }

/* píldora → H2 → bajada → cadena: 16/16/34.5 en mobile, 27.4/22/50.6 en desktop. */
.sy-a-medcloud > :nth-child(2) { margin-top: clamp(16px, calc(16px + 11.4 * var(--sy-t)), 27.4px); }
.sy-a-medcloud > :nth-child(3) { margin-top: clamp(16px, calc(16px + 6 * var(--sy-t)), 22px); --sy-max-w: 780px; }
.sy-a-medcloud > :nth-child(4) { margin-top: clamp(34.5px, calc(34.5px + 16.1 * var(--sy-t)), 50.6px); width: 100%; }

/* "Care." sube a la línea 4 si la caja llega a 356: con 346 no. */
@media (max-width: 767px) {
	.sy-a-medcloud > .sy-lead { --sy-max-w: 346px; }
}

/* Píldora de vidrio con el logo (MedCloud: logo pendiente, design/pendientes.md). */
.sy-a-medcloud > .elementor-widget.sy-logo-pill {
	--sy-max-w: none;
	display: inline-flex;
	padding: 12px 20px;
	border: 1px solid rgba(255, 255, 255, 0.16);
	border-radius: var(--sy-r-pill);
	background: var(--sy-gradient-glass);
	box-shadow: var(--sy-shadow-glass);
	-webkit-backdrop-filter: blur(9px);
	backdrop-filter: blur(9px);
}

.sy-logo-pill img {
	display: block;
	width: 125px;
	height: auto;
}