/* ===========================================================================
   Cúpula em Saúde — Carrossel de Memórias
   Cena 3D inspirada no filme de memórias do CMO Summit: cartões grandes,
   perspectiva suave, bordas laterais parcialmente visíveis e loop infinito.
   Tudo fica contido no namespace .cupula-carrossel.
   ========================================================================== */

.cupula-carrossel {
	--car-bg: #000000;
	--car-eyebrow: #00a0cc;
	--car-titulo: #00a0cc;
	--car-sub: #ffffff;
	--car-legenda: #ffffff;
	--car-sombra-rgb: 0, 0, 0;
	--car-h: 660px;
	--car-h-m: 420px;
	--car-wa: 540px;
	--car-wi: 110px;
	--car-wa-m: 280px;
	--car-wi-m: 64px;
	--car-gap: 34px;
	--car-radius: 24px;
	--car-pt: 98px;
	--car-pb: 58px;

	position: relative;
	width: 100%;
	box-sizing: border-box;
	padding: var(--car-pt) 0 var(--car-pb);
	background: var(--car-bg);
	overflow: hidden;
	isolation: isolate;
}

.cupula-carrossel,
.cupula-carrossel * {
	box-sizing: border-box;
}

/* ---- Modos de fundo (painel): efeito / cor sólida / transparente ------- */
.cupula-carrossel--fundo-solido,
.cupula-carrossel--fundo-efeito {
	background: var(--car-bg);
}

.cupula-carrossel--fundo-transparente {
	background: transparent;
}

/* ---- Bloco de título ---------------------------------------------------- */
.cupula-carrossel__head {
	position: relative;
	z-index: 4;
	max-width: 920px;
	margin: 0 auto 48px;
	padding: 0 5%;
	text-align: center;
}

.cupula-carrossel__eyebrow {
	margin: 0 0 16px;
	color: var(--car-eyebrow);
	font-family: 'Geist Mono', ui-monospace, monospace;
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 0.32em;
	text-transform: uppercase;
}

.cupula-carrossel__title {
	margin: 0 0 18px;
	color: var(--car-titulo);
	font-family: 'Anton', 'Nunito Sans', Arial, sans-serif;
	font-size: clamp(34px, 5vw, 56px);
	font-weight: 400;
	letter-spacing: 0.01em;
	line-height: 1.08;
	text-transform: uppercase;
}

.cupula-carrossel__subtitle {
	max-width: 620px;
	margin: 0 auto;
	color: var(--car-sub);
	font-family: 'Geist', 'Nunito Sans', Arial, sans-serif;
	font-size: 16px;
	font-weight: 500;
	line-height: 1.55;
}

/* ---- Palco 3D ---------------------------------------------------------- */
.cupula-carrossel__viewport {
	position: relative;
	z-index: 2;
	width: 100%;
	height: calc(var(--car-h) + 48px);
	min-height: 300px;
	overflow: hidden;
	perspective: 1500px;
	perspective-origin: 50% 50%;
	touch-action: pan-y;
	cursor: grab;
	outline: none;
}

.cupula-carrossel__viewport:active {
	cursor: grabbing;
}

.cupula-carrossel__viewport:focus-visible {
	outline: 2px solid var(--car-eyebrow);
	outline-offset: -5px;
}

.cupula-carrossel__track {
	position: absolute;
	inset: 0;
	transform-style: preserve-3d;
	/* Paint containment/overflow/filter here flatten the 3D descendants. */
	overflow: visible;
}

/* ---- Cartões ----------------------------------------------------------- */
.cupula-carrossel__card {
	position: absolute;
	top: 50%;
	left: 50%;
	width: var(--car-card-width, var(--car-wa));
	height: var(--car-card-height, var(--car-h));
	margin: 0;
	overflow: hidden;
	border-radius: var(--car-radius);
	background: #090909;
	/* Apenas um anel interno sutil (não recorta). A sombra de "chão" fica
	   no container (.cupula-carrossel__floor), evitando o corte nas bordas. */
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
	transform: translate(-50%, -50%);
	backface-visibility: hidden;
	will-change: transform;
	cursor: pointer;
	/* Transforms are interpolated by requestAnimationFrame, never by steps. */
	transition: none;
}

.cupula-carrossel__card.is-active {
	filter: none;
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.10);
}

.cupula-carrossel .cupula-carrossel__card img.cupula-carrossel__img {
	/* Elementor/Astra may set height:auto/max-width on widget images. */
	position: absolute !important;
	inset: 0 !important;
	display: block;
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	max-height: none !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0;
	border-radius: 0;
	object-fit: cover !important;
	object-position: center;
	user-select: none;
	-webkit-user-drag: none;
	pointer-events: none;
}

.cupula-carrossel__shade {
	position: absolute;
	inset: 0;
	background: linear-gradient(
		180deg,
		rgba(var(--car-sombra-rgb), 0) 52%,
		rgba(var(--car-sombra-rgb), 0.86) 100%
	);
	opacity: 0;
	transition: opacity 500ms ease;
	pointer-events: none;
}

.cupula-carrossel__caption {
	position: absolute;
	right: 24px;
	bottom: 22px;
	left: 24px;
	z-index: 2;
	color: var(--car-legenda);
	font-family: 'Geist', 'Nunito Sans', Arial, sans-serif;
	font-size: 15px;
	font-weight: 600;
	letter-spacing: 0.01em;
	line-height: 1.3;
	opacity: 0;
	transform: translateY(10px);
	transition: opacity 450ms ease 180ms, transform 450ms ease 180ms;
	pointer-events: none;
}

.cupula-carrossel__card.is-active .cupula-carrossel__shade,
.cupula-carrossel__card.is-active .cupula-carrossel__caption {
	opacity: 1;
}

.cupula-carrossel__card.is-active .cupula-carrossel__caption {
	transform: translateY(0);
}

/* ---- Fundo com efeito animado (símbolo da Cúpula) ---------------------- */
.cupula-carrossel__fx {
	position: absolute;
	inset: 0;
	z-index: 0;
	overflow: hidden;
	pointer-events: none;
	opacity: var(--car-fx-op, 0.55);
}

/* Luzes suaves (aurora) nas cores da Cúpula — dão sensação de preenchimento. */
.cupula-carrossel__fx::before {
	content: '';
	position: absolute;
	inset: -15%;
	background:
		radial-gradient(38% 50% at 50% 16%, rgba(0, 160, 204, 0.20), transparent 70%),
		radial-gradient(42% 48% at 84% 88%, rgba(86, 166, 157, 0.16), transparent 72%),
		radial-gradient(40% 46% at 12% 82%, rgba(0, 160, 204, 0.12), transparent 70%);
	animation: cupula-car-aurora 26s ease-in-out infinite alternate;
}

/* Símbolos da Cúpula flutuando lentamente. */
.cupula-carrossel__sym {
	position: absolute;
	display: block;
	aspect-ratio: 1 / 1;
	background-image: var(--car-sym);
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	will-change: transform;
}

.cupula-carrossel__sym--1 {
	top: -4%;
	left: 3%;
	width: clamp(140px, 20vw, 300px);
	opacity: 0.12;
	animation: cupula-car-float-a 30s ease-in-out infinite;
}

.cupula-carrossel__sym--2 {
	right: 4%;
	bottom: -10%;
	width: clamp(200px, 30vw, 440px);
	opacity: 0.08;
	animation: cupula-car-float-b 38s ease-in-out infinite;
}

.cupula-carrossel__sym--3 {
	top: 26%;
	left: 58%;
	width: clamp(90px, 12vw, 170px);
	opacity: 0.07;
	animation: cupula-car-float-c 24s ease-in-out infinite;
}

@keyframes cupula-car-aurora {
	0%   { transform: translate3d(-2%, -1%, 0) scale(1); }
	100% { transform: translate3d(2%, 2%, 0) scale(1.08); }
}

@keyframes cupula-car-float-a {
	0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); }
	50%      { transform: translate3d(18px, 26px, 0) rotate(8deg); }
}

@keyframes cupula-car-float-b {
	0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); }
	50%      { transform: translate3d(-26px, -20px, 0) rotate(-10deg); }
}

@keyframes cupula-car-float-c {
	0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); }
	50%      { transform: translate3d(14px, -18px, 0) rotate(12deg); }
}

/* ---- Sombra do container (abaixo do carrossel, sem recorte) ------------ */
.cupula-carrossel__floor {
	position: absolute;
	left: 50%;
	bottom: calc(var(--car-pb, 58px) * 0.35);
	z-index: 1;
	width: min(78%, 1180px);
	height: 150px;
	transform: translateX(-50%);
	background: radial-gradient(
		ellipse at center,
		rgb(225 241 245) 0%,
		rgb(218 233 238) 38%,
		rgb(235 243 246) 72%
	);
	filter: blur(28px);
	pointer-events: none;
}

/* ---- Responsivo -------------------------------------------------------- */
@media (max-width: 768px) {
	.cupula-carrossel {
		padding-top: min(var(--car-pt), 56px);
		padding-bottom: min(var(--car-pb), 56px);
	}

	.cupula-carrossel__head {
		margin-bottom: 32px;
	}

	.cupula-carrossel__eyebrow {
		font-size: 12px;
		letter-spacing: 0.24em;
	}

	.cupula-carrossel__subtitle,
	.cupula-carrossel__caption {
		font-size: 14px;
	}

	.cupula-carrossel__viewport {
		height: calc(var(--car-h-m) + 32px);
		perspective: 1000px;
	}

}

@media (prefers-reduced-motion: reduce) {
	.cupula-carrossel__card,
	.cupula-carrossel__shade,
	.cupula-carrossel__caption {
		transition: none !important;
	}
	.cupula-carrossel__fx::before,
	.cupula-carrossel__sym {
		animation: none !important;
	}
}