/*
 * Process cards + modal galleries — v0.7
 */

.cielo-gallery {
	position: relative;
	overflow: hidden;
	isolation: isolate;
}

.cielo-gallery__slide {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	opacity: 0;
	transform: scale(1.025);
	filter: saturate(.96) contrast(.99);
	transition: opacity 1.5s cubic-bezier(.22,.61,.36,1), transform 6.4s cubic-bezier(.22,.61,.36,1), filter 1.5s ease;
}

.cielo-gallery__slide.is-active {
	opacity: 1;
	transform: scale(1);
	filter: saturate(1) contrast(1);
}

.cielo-gallery__nav {
	position: absolute;
	z-index: 3;
	top: 50%;
	display: grid;
	place-items: center;
	width: 2.5rem;
	height: 2.5rem;
	border: 0;
	border-radius: 50%;
	background: rgba(255,255,255,.88);
	box-shadow: 0 .45rem 1.25rem rgba(47,45,74,.14);
	color: var(--cielo-violet);
	font-size: 1rem;
	line-height: 1;
	transform: translateY(-50%);
	cursor: pointer;
}

.cielo-gallery__nav--prev { left: .8rem; }
.cielo-gallery__nav--next { right: .8rem; }

.cielo-gallery__dots {
	position: absolute;
	z-index: 3;
	left: 50%;
	bottom: .85rem;
	display: inline-flex;
	align-items: center;
	gap: .42rem;
	padding: .34rem .58rem;
	border-radius: 999px;
	background: rgba(255,255,255,.34);
	transform: translateX(-50%);
}

.cielo-gallery__dot {
	width: .52rem;
	height: .52rem;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(255,255,255,.56);
	cursor: pointer;
	transition: transform var(--cielo-motion-fast) var(--cielo-ease), background-color var(--cielo-motion-fast) var(--cielo-ease);
}

.cielo-gallery__dot.is-active {
	background: white;
	transform: scale(1.18);
}

/* Process cards */
.cielo-process-node {
	position: relative;
	display: grid;
	grid-template-columns: 1fr;
	gap: 1rem;
	align-content: start;
	min-height: 15rem;
	padding: 1.5rem 1.25rem 1.35rem;
	border: 1px solid rgba(255,255,255,.64);
	border-radius: 2.25rem;
	background: linear-gradient(180deg, rgba(255,255,255,.86), rgba(255,255,255,.68));
	box-shadow: 0 1rem 2.6rem rgba(47,45,74,.06), inset 0 1px 0 rgba(255,255,255,.84);
	cursor: pointer;
	outline: none;
	overflow: visible;
	text-align: center;
	transition: transform var(--cielo-motion-fast) var(--cielo-ease), box-shadow var(--cielo-motion-fast) var(--cielo-ease);
}

.cielo-process-node::before,
.cielo-process-node::after {
	content: "";
	position: absolute;
	left: 50%;
	background: linear-gradient(180deg, rgba(255,255,255,.94), rgba(255,255,255,.82));
	border: 1px solid rgba(255,255,255,.64);
	box-shadow: inset 0 1px 0 rgba(255,255,255,.85);
	pointer-events: none;
}

.cielo-process-node::before {
	top: -1rem;
	width: 6.8rem;
	height: 2.7rem;
	border-radius: 999px;
	transform: translateX(-50%);
}

.cielo-process-node::after {
	top: -.55rem;
	width: 9.2rem;
	height: 2.9rem;
	border-radius: 999px;
	transform: translateX(-50%);
	opacity: .98;
}

.cielo-process-node__visual {
	position: relative;
	z-index: 2;
	display: grid;
	place-items: center;
	min-height: 6.7rem;
	padding-top: .35rem;
}

.cielo-process-node__visual::before {
	content: "";
	position: absolute;
	width: 8.6rem;
	height: 5.3rem;
	border-radius: 50%;
	background: radial-gradient(ellipse, rgba(152,154,201,.14), transparent 68%);
	filter: blur(10px);
	transform: translateY(.55rem);
}

.cielo-process-node__visual::after {
	content: "";
	position: absolute;
	width: 8.9rem;
	height: 8.9rem;
	border: 1px dashed rgba(95,96,163,.16);
	border-radius: 50%;
	animation: cielo-process-orbit 18s linear infinite;
}

.cielo-process-node__icon {
	position: relative;
	z-index: 2;
	display: block;
	width: 6.2rem;
	height: 6.2rem;
	object-fit: contain;
	filter: drop-shadow(0 .8rem 1.4rem rgba(47,45,74,.10));
	transition: transform .7s var(--cielo-ease);
}

.cielo-process-node__content {
	position: relative;
	z-index: 2;
}

.cielo-process-node h3 {
	margin: 0 0 .35rem !important;
	font-size: clamp(1.5rem, 4.6vw, 2rem);
	line-height: 1;
}

.cielo-process-node p {
	max-width: 20rem;
	margin: 0 auto .8rem !important;
	font-size: .98rem !important;
	line-height: 1.54 !important;
	color: rgba(47,45,74,.70);
}

.cielo-process-more {
	display: inline-flex;
	align-items: center;
	gap: .42rem;
	color: var(--cielo-violet);
	font-size: .82rem;
	font-weight: 750;
}

.cielo-process-more::after {
	content: "↗";
}

.cielo-process-node:focus-visible {
	outline: 3px solid color-mix(in srgb, var(--cielo-focus) 68%, white);
	outline-offset: 5px;
}

@media (hover:hover) and (pointer:fine) {
	.cielo-process-node:hover {
		transform: translateY(-6px);
		box-shadow: 0 1.5rem 3rem rgba(47,45,74,.10), inset 0 1px 0 rgba(255,255,255,.86);
	}
	.cielo-process-node:hover .cielo-process-node__icon {
		transform: translateY(-4px) scale(1.03);
	}
}

/* Modal nube — v0.9 */
.cielo-modal {
	position: fixed;
	z-index: 99999;
	inset: 0;
	display: grid;
	align-items: end;
	justify-items: center;
	visibility: hidden;
	opacity: 0;
	pointer-events: none;
	transition: opacity .58s var(--cielo-ease), visibility 0s linear .72s;
}

.cielo-modal.is-open,
.cielo-modal.is-closing {
	visibility: visible;
	pointer-events: auto;
	transition-delay: 0s;
}

.cielo-modal.is-open { opacity: 1; }
.cielo-modal.is-closing { opacity: 0; }

.cielo-modal__backdrop {
	position: absolute;
	inset: 0;
	background:
		radial-gradient(circle at 50% 62%, rgba(255,255,255,.10), transparent 28rem),
		rgba(42,39,70,.28);
	opacity: 0;
	transition: opacity .62s var(--cielo-ease);
}

.cielo-modal.is-open .cielo-modal__backdrop { opacity: 1; }

.cielo-modal__panel {
	--cielo-cloud-url: none;
	position: relative;
	z-index: 2;
	width: min(97vw, 43rem);
	height: min(86svh, 47rem);
	margin: 0 auto max(.35rem, env(safe-area-inset-bottom));
	isolation: isolate;
	background: transparent;
	border: 0;
	box-shadow: none;
	overflow: visible;
	opacity: 0;
	filter: blur(10px);
	transform: translate3d(0, 18vh, 0) scale(.93);
	transform-origin: 50% 100%;
	transition:
		opacity .62s var(--cielo-ease),
		transform .82s cubic-bezier(.22,.78,.28,1),
		filter .72s var(--cielo-ease);
}

.cielo-modal.is-open .cielo-modal__panel {
	opacity: 1;
	filter: blur(0);
	transform: translate3d(0,0,0) scale(1);
}

.cielo-modal.is-closing .cielo-modal__panel {
	opacity: 0;
	filter: blur(7px);
	transform: translate3d(0, 7vh, 0) scale(.975);
	transition-duration: .5s;
}

/* The SVG is used twice: as the exact visible artwork and as an alpha mask
   for a warm luminous underlay. If the SVG itself is already filled white,
   the two layers simply reinforce the cloud's volume. */
.cielo-modal__panel::before {
	content: "";
	position: absolute;
	z-index: -2;
	inset: 0;
	background:
		radial-gradient(circle at 30% 16%, rgba(255,255,255,.98), rgba(255,255,255,.86) 38%, transparent 72%),
		linear-gradient(180deg, #fffdf8 0%, #faf4ea 74%, #f7efe5 100%);
	-webkit-mask-image: var(--cielo-cloud-url);
	mask-image: var(--cielo-cloud-url);
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: 100% 100%;
	mask-size: 100% 100%;
	filter: drop-shadow(0 1.15rem 2.6rem rgba(47,45,74,.18));
}

.cielo-modal__panel::after {
	content: "";
	position: absolute;
	z-index: -3;
	left: 7%;
	right: 7%;
	bottom: -1.2rem;
	height: 5.8rem;
	background:
		radial-gradient(ellipse at 18% 50%, rgba(255,255,255,.42), transparent 48%),
		radial-gradient(ellipse at 48% 44%, rgba(255,255,255,.60), transparent 44%),
		radial-gradient(ellipse at 78% 52%, rgba(255,255,255,.42), transparent 48%);
	filter: blur(18px);
	opacity: 0;
	transform: translateY(22px) scale(.92);
	transition: opacity .9s var(--cielo-ease) .05s, transform 1s var(--cielo-ease) .05s;
	pointer-events: none;
}

.cielo-modal.is-open .cielo-modal__panel::after {
	opacity: .78;
	transform: translateY(0) scale(1);
}

.cielo-modal__cloud-shape {
	position: absolute;
	z-index: -1;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: fill;
	pointer-events: none;
	user-select: none;
	filter: drop-shadow(0 .5rem 1.5rem rgba(47,45,74,.06));
	opacity: .94;
}

.cielo-modal__close {
	position: absolute;
	z-index: 12;
	top: clamp(1.55rem, 5vw, 2.35rem);
	right: clamp(1.45rem, 5vw, 2.25rem);
	display: grid;
	place-items: center;
	width: 2.85rem;
	aspect-ratio: 1;
	padding: 0;
	border: 1px solid rgba(255,255,255,.72);
	border-radius: 50%;
	background: rgba(61,91,148,.96);
	color: white;
	font: 500 1.18rem/1 var(--cielo-font-body);
	cursor: pointer;
	box-shadow: 0 .65rem 1.6rem rgba(47,45,74,.17), inset 0 1px 0 rgba(255,255,255,.18);
	transition: transform .3s var(--cielo-ease), background-color .3s var(--cielo-ease);
}

.cielo-modal__scroll {
	position: absolute;
	z-index: 4;
	top: clamp(4.8rem, 14vw, 6.2rem);
	right: clamp(1.55rem, 6vw, 3.1rem);
	bottom: clamp(2.8rem, 8vw, 4.1rem);
	left: clamp(1.55rem, 6vw, 3.1rem);
	overflow-y: auto;
	overflow-x: hidden;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	-ms-overflow-style: none;
	padding: .15rem .15rem 1.4rem;
	opacity: 0;
	transform: translateY(15px);
	transition: opacity .64s var(--cielo-ease) .22s, transform .72s var(--cielo-ease) .22s;
}

.cielo-modal__scroll::-webkit-scrollbar { display: none; width: 0; height: 0; }

.cielo-modal.is-open .cielo-modal__scroll {
	opacity: 1;
	transform: translateY(0);
}

.cielo-modal__gallery {
	height: clamp(13rem, 54vw, 19rem);
	margin: 0 0 1.35rem;
	border-radius: 1.55rem;
	background: #e9e6df;
	box-shadow: 0 .9rem 2.1rem rgba(47,45,74,.08);
}

.cielo-modal__body {
	padding: 0 .15rem .35rem;
}

.cielo-modal__body > * {
	opacity: 0;
	transform: translateY(10px);
	transition: opacity .58s var(--cielo-ease), transform .62s var(--cielo-ease);
}

.cielo-modal.is-open .cielo-modal__body > * {
	opacity: 1;
	transform: translateY(0);
}

.cielo-modal.is-open .cielo-modal__body > :nth-child(1) { transition-delay: .34s; }
.cielo-modal.is-open .cielo-modal__body > :nth-child(2) { transition-delay: .41s; }
.cielo-modal.is-open .cielo-modal__body > :nth-child(3) { transition-delay: .48s; }

.cielo-modal__panel .cielo-eyebrow {
	margin-bottom: .55rem !important;
}

.cielo-modal__panel h2 {
	margin: 0 0 .75rem !important;
	font-size: clamp(2.05rem, 8.5vw, 3rem);
	line-height: .98;
}

.cielo-modal__panel p,
.cielo-modal__panel li {
	color: rgba(47,45,74,.88);
}

.cielo-modal__panel ul {
	margin: .75rem 0 .2rem;
	padding-left: 1.2rem;
	display: grid;
	gap: .64rem;
}

/* Desktop-only custom scroll affordance. Native bars stay hidden. */
.cielo-modal__scroll-ui {
	position: absolute;
	z-index: 11;
	top: 50%;
	right: 1.12rem;
	display: none;
	align-items: center;
	gap: .5rem;
	color: rgba(47,45,74,.46);
	font-size: .66rem;
	letter-spacing: .09em;
	text-transform: uppercase;
	transform: translateY(-50%);
	pointer-events: none;
	opacity: 0;
	transition: opacity .3s var(--cielo-ease);
}

.cielo-modal.has-scroll .cielo-modal__scroll-ui { opacity: .78; }
.cielo-modal.is-scroll-end .cielo-modal__scroll-ui { opacity: .24; }

.cielo-modal__scroll-track {
	position: relative;
	display: block;
	width: 2px;
	height: 4.6rem;
	border-radius: 999px;
	background: rgba(95,96,163,.13);
	overflow: hidden;
}

.cielo-modal__scroll-progress {
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background: rgba(95,96,163,.58);
	transform: scaleY(var(--cielo-scroll-progress, .08));
	transform-origin: top;
	transition: transform .08s linear;
}

@media (hover:hover) and (pointer:fine) {
	.cielo-modal__close:hover { transform: scale(1.06); background: rgba(74,78,140,.98); }
}

@media (min-width: 48rem) {
	.cielo-modal {
		align-items: center;
		padding: 1.2rem;
	}

	.cielo-modal__panel {
		width: min(92vw, 52rem);
		height: min(88dvh, 46rem);
		margin: 0;
		transform: translate3d(0, 12vh, 0) scale(.94);
	}

	.cielo-modal__scroll {
		top: clamp(5.3rem, 8vw, 6.8rem);
		right: clamp(4.1rem, 7vw, 5.4rem);
		bottom: clamp(3.2rem, 5vw, 4.4rem);
		left: clamp(4.1rem, 7vw, 5.4rem);
		padding-right: .4rem;
	}

	.cielo-modal__gallery {
		height: clamp(18rem, 42vh, 23rem);
	}

	.cielo-modal__scroll-ui { display: flex; }
}

@media (prefers-reduced-motion: reduce) {
	.cielo-modal__panel,
	.cielo-modal__scroll,
	.cielo-modal__body > *,
	.cielo-modal__backdrop,
	.cielo-modal__panel::after {
		transition: none !important;
		animation: none !important;
	}
}

/* ======================================================================
   v0.10 — cloud modal refinement with real mask, frosted glow, safer scroll
   ====================================================================== */

.cielo-modal__panel {
	background: linear-gradient(180deg, rgba(255,252,248,.88), rgba(251,246,238,.82));
	border: 1px solid rgba(255,255,255,.42);
	box-shadow: 0 1.5rem 4rem rgba(36,33,64,.18), inset 0 1px 0 rgba(255,255,255,.62);
	backdrop-filter: blur(16px) saturate(1.04);
	-webkit-backdrop-filter: blur(16px) saturate(1.04);
	-webkit-mask-image: var(--cielo-cloud-url);
	mask-image: var(--cielo-cloud-url);
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: 100% 100%;
	mask-size: 100% 100%;
	overflow: hidden;
}

.cielo-modal__panel::before {
	z-index: -1;
	inset: 0;
	background:
		radial-gradient(circle at 25% 16%, rgba(255,255,255,.96), rgba(255,255,255,.14) 36%, transparent 62%),
		radial-gradient(circle at 78% 18%, rgba(230,164,196,.15), transparent 26%),
		radial-gradient(circle at 66% 74%, rgba(180,212,182,.12), transparent 28%);
	-webkit-mask-image: none;
	mask-image: none;
	filter: none;
}

.cielo-modal__panel::after {
	left: 10%;
	right: 10%;
	bottom: .45rem;
	height: 4.8rem;
	background:
		radial-gradient(ellipse at 16% 52%, rgba(255,255,255,.22), transparent 50%),
		radial-gradient(ellipse at 50% 40%, rgba(255,255,255,.58), transparent 42%),
		radial-gradient(ellipse at 84% 56%, rgba(255,255,255,.22), transparent 50%);
	filter: blur(18px);
}

.cielo-modal__cloud-shape {
	display: none;
}

.cielo-modal__scroll {
	top: clamp(4.7rem, 13vw, 5.8rem);
	right: clamp(1.15rem, 4.8vw, 2rem);
	bottom: clamp(2.25rem, 6vw, 3rem);
	left: clamp(1.15rem, 4.8vw, 2rem);
	padding: .35rem 0 1.25rem;
}

.cielo-modal__close {
	top: clamp(1.15rem, 4vw, 1.65rem);
	right: clamp(1.1rem, 4vw, 1.7rem);
	width: 2.65rem;
	background: linear-gradient(180deg, rgba(72,102,160,.96), rgba(53,78,126,.96));
	box-shadow: 0 .8rem 1.8rem rgba(36,33,64,.16), inset 0 1px 0 rgba(255,255,255,.24);
}

.cielo-modal__gallery {
	position: relative;
	height: clamp(13.4rem, 54vw, 18rem);
	margin: 0 .25rem 1.2rem;
	border-radius: 1.9rem;
	overflow: hidden;
	background: #ece6dd;
	box-shadow: 0 1rem 2.2rem rgba(47,45,74,.10);
}

.cielo-modal__gallery::after {
	content: "";
	position: absolute;
	inset: auto 0 0;
	height: 22%;
	background: linear-gradient(to top, rgba(38,35,68,.10), transparent);
	pointer-events: none;
}

.cielo-modal__body {
	padding: .2rem .6rem .6rem;
}

.cielo-modal__panel h2 {
	font-size: clamp(2rem, 8vw, 2.9rem);
	text-wrap: balance;
}

.cielo-modal__panel ul {
	padding-left: 1.25rem;
	gap: .58rem;
}

.cielo-modal__panel li,
.cielo-modal__panel p {
	font-size: clamp(.98rem, 2.8vw, 1.05rem);
	line-height: 1.66;
}

.cielo-gallery__nav {
	width: 2.7rem;
	height: 2.7rem;
	background: rgba(255,255,255,.9);
}

.cielo-gallery__dots {
	bottom: .8rem;
	padding: .32rem .54rem;
	background: rgba(248,243,232,.52);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
}

@media (min-width: 48rem) {
	.cielo-modal__panel {
		width: min(92vw, 54rem);
		height: min(90dvh, 48rem);
	}

	.cielo-modal__scroll {
		top: clamp(5rem, 7vw, 6rem);
		right: clamp(2.5rem, 5vw, 4rem);
		bottom: clamp(2.6rem, 4vw, 3.4rem);
		left: clamp(2.5rem, 5vw, 4rem);
		padding-bottom: 1rem;
	}

	.cielo-modal__gallery {
		height: clamp(18rem, 46vh, 24rem);
		margin-inline: .2rem;
	}

	.cielo-modal__body {
		padding-inline: .5rem 1rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.cielo-modal__panel {
		backdrop-filter: none;
		-webkit-backdrop-filter: none;
	}
}

/* ======================================================================
   v0.10.1 — desktop modal becomes a wide editorial panel.
   Mobile/tablet retain the custom cloud silhouette.
   ====================================================================== */
@media (min-width: 64rem) {
	.cielo-modal {
		align-items: center;
		padding: clamp(1.25rem, 3vw, 2.5rem);
	}

	.cielo-modal__panel {
		width: min(92vw, 68rem);
		height: min(82dvh, 47rem);
		margin: 0;
		border: 1px solid rgba(255,255,255,.58);
		border-radius: 2rem;
		background:
			radial-gradient(circle at 14% 12%, rgba(230,164,196,.10), transparent 24rem),
			radial-gradient(circle at 86% 18%, rgba(180,212,182,.09), transparent 22rem),
			linear-gradient(180deg, rgba(255,252,248,.94), rgba(248,242,234,.91));
		box-shadow:
			0 2rem 6rem rgba(36,33,64,.22),
			inset 0 1px 0 rgba(255,255,255,.86);
		backdrop-filter: blur(20px) saturate(1.05);
		-webkit-backdrop-filter: blur(20px) saturate(1.05);
		-webkit-mask-image: none;
		mask-image: none;
		overflow: hidden;
	}

	.cielo-modal__panel::before {
		content: "";
		position: absolute;
		inset: 0;
		z-index: -1;
		background:
			radial-gradient(circle at 20% 16%, rgba(255,255,255,.58), transparent 34%),
			radial-gradient(circle at 82% 82%, rgba(151,153,202,.08), transparent 32%);
	}

	.cielo-modal__panel::after {
		left: 12%;
		right: 12%;
		bottom: -.6rem;
		height: 4rem;
		opacity: .42;
		filter: blur(22px);
	}

	.cielo-modal__scroll {
		position: absolute;
		top: 2.25rem;
		right: 2.4rem;
		bottom: 2.25rem;
		left: 2.4rem;
		display: grid;
		grid-template-columns: minmax(0, 1.18fr) minmax(20rem, .82fr);
		gap: clamp(2rem, 4vw, 3.6rem);
		align-items: start;
		overflow-y: auto;
		overflow-x: hidden;
		padding: 0 .35rem .4rem 0;
	}

	.cielo-modal__gallery {
		position: sticky;
		top: 0;
		height: min(68vh, 37rem);
		margin: 0;
		border-radius: 1.55rem;
	}

	.cielo-modal__body {
		align-self: center;
		padding: 3.6rem .6rem 2rem 0;
	}

	.cielo-modal__panel h2 {
		font-size: clamp(2.55rem, 4.1vw, 4.1rem);
		line-height: .98;
	}

	.cielo-modal__panel li,
	.cielo-modal__panel p {
		font-size: 1.04rem;
		line-height: 1.72;
	}

	.cielo-modal__close {
		top: 1rem;
		right: 1rem;
		width: 2.8rem;
	}

	.cielo-modal__scroll-ui {
		right: .72rem;
	}
}

/* ======================================================================
   v0.10.2 — mobile close control must never be clipped by the cloud mask
   ====================================================================== */
@media (max-width: 63.999rem) {
	.cielo-modal__panel {
		/* The cloud artwork and ::before already define the silhouette.
		   Masking the entire panel also masks interactive children such as X. */
		-webkit-mask-image: none !important;
		mask-image: none !important;
		background: transparent !important;
		border: 0 !important;
		box-shadow: none !important;
		backdrop-filter: none !important;
		-webkit-backdrop-filter: none !important;
		overflow: visible !important;
	}

	.cielo-modal__panel::before {
		inset: 0;
		z-index: -2;
		background:
			radial-gradient(circle at 28% 15%, rgba(255,255,255,.92), rgba(255,255,255,.68) 38%, rgba(249,244,237,.62) 72%),
			linear-gradient(180deg, rgba(255,255,255,.78), rgba(248,241,233,.68));
		-webkit-mask-image: var(--cielo-cloud-url) !important;
		mask-image: var(--cielo-cloud-url) !important;
		-webkit-mask-repeat: no-repeat !important;
		mask-repeat: no-repeat !important;
		-webkit-mask-position: center !important;
		mask-position: center !important;
		-webkit-mask-size: 100% 100% !important;
		mask-size: 100% 100% !important;
		backdrop-filter: blur(18px) saturate(1.06);
		-webkit-backdrop-filter: blur(18px) saturate(1.06);
		filter: drop-shadow(0 1.1rem 2.8rem rgba(47,45,74,.18));
	}

	.cielo-modal__close {
		z-index: 40 !important;
		top: clamp(1.25rem, 4.2vw, 1.75rem) !important;
		right: clamp(1.15rem, 4vw, 1.65rem) !important;
		width: 3rem !important;
		height: 3rem !important;
		min-width: 44px;
		min-height: 44px;
		border: 1px solid rgba(255,255,255,.78) !important;
		background: linear-gradient(180deg, rgba(70,101,161,.99), rgba(52,76,127,.99)) !important;
		box-shadow:
			0 .85rem 1.9rem rgba(39,36,71,.22),
			0 0 0 5px rgba(255,255,255,.18),
			inset 0 1px 0 rgba(255,255,255,.26) !important;
		color: #fff !important;
		font-size: 1.2rem !important;
		line-height: 1 !important;
		visibility: visible !important;
		opacity: 1 !important;
		pointer-events: auto !important;
	}
}

/* Plugin v0.2 can intentionally remove every image from a stage. */
.cielo-modal.cielo-modal--no-gallery .cielo-modal__gallery {
	display: none !important;
}

@media (min-width: 64rem) {
	.cielo-modal.cielo-modal--no-gallery .cielo-modal__scroll {
		grid-template-columns: minmax(0, 1fr) !important;
		place-items: center;
	}
	.cielo-modal.cielo-modal--no-gallery .cielo-modal__body {
		width: min(100%, 44rem);
		padding: 4.5rem 2rem 2.5rem;
	}
}