/* ============================================================
carrossel com autoplay, barra de progresso, tilt 3D e cards menores
============================================================ */
.descubra {
	cursor: move;
}
.dc-ctrl {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 18px;
	margin: 26px 0 44px;
}
.dc-count {
	font-family: var( --e-global-typography-bc5a66b-font-family ), Sans-serif;
	font-weight: 600;
	font-size: 0.9rem;
	color: #131313;
	font-variant-numeric: tabular-nums;
}
.dc-bar {
	width: 150px;
	height: 3px;
	background: #e3edeb;
	border-radius: 2px;
	overflow: hidden;
}
.dc-bar i {
	display: block;
	height: 100%;
	width: 0;
	background: var( --e-global-color-secondary );
	border-radius: 2px;
	box-shadow: 0 0 10px rgba(0, 179, 178, 0.6);
}
.dc-cbtn {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	border: 1.5px solid #e3edeb;
	background: #fff;
	color: var( --e-global-color-secondary );
	cursor: pointer;
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: 0.22s;
}
.dc-cbtn:focus,
.dc-cbtn:active,
.dc-cbtn:hover {
	border-color: var( --e-global-color-secondary );
	background: var( --e-global-color-secondary );
	transform: translateY(-1px);
}
.dc-cbtn svg {
	width: 16px;
	height: 16px;
	fill: currentColor;
}
.dc-stage {
	position: relative;
	width: 100%;
	max-width: 1056px;
	height: 560px;
	margin: 10px auto 0;
}
.dc-inner-wrap {
	position: relative;
	width: 1056px;
	height: 560px;
	transform-origin: top left;
}
.dc-card {
	position: absolute;
	top: 0;
	left: 0;
	transition:
		transform 0.85s cubic-bezier(0.62, 0, 0.2, 1),
		width 0.85s cubic-bezier(0.62, 0, 0.2, 1),
		height 0.85s cubic-bezier(0.62, 0, 0.2, 1),
		opacity 0.55s ease;
	will-change: transform, width, height;
}
.dc-card .dc-in {
	position: relative;
	width: 100%;
	height: 100%;
	border-radius: 18px;
	overflow: hidden;
	background: #04403f;
	box-shadow: 0 42px 92px -46px rgba(4, 64, 63, 0.6);
	transition:
		transform 0.35s cubic-bezier(0.2, 0.75, 0.2, 1),
		border-radius 0.85s ease;
	transform-style: preserve-3d;
}
.dc-ph {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
}
.dc-scan {
	display: none;
	position: absolute;
	inset: 0;
	background: repeating-linear-gradient(
		135deg,
		rgba(255, 255, 255, 0.05) 0 2px,
		transparent 2px 12px
	);
	mix-blend-mode: soft-light;
	pointer-events: none;
}
.dc-shade {
	position: absolute;
	inset: 0;
	background: linear-gradient(
		180deg,
		transparent 40%,
		rgba(4, 64, 63, 0.74) 100%
	);
	pointer-events: none;
	opacity: 0;
	transition: opacity 0.5s ease;
}
.dc-num {
	position: absolute;
	top: 12px;
	left: 12px;
	z-index: 3;
	min-width: 26px;
	height: 26px;
	padding: 0 8px;
	border-radius: 999px;
	background: rgba(4, 64, 63, 0.5);
	backdrop-filter: blur(4px);
	color: #fff;
	font-family: ui-monospace, Menlo, monospace;
	font-size: 0.64rem;
	letter-spacing: 0.06em;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: opacity 0.4s ease;
}
.dc-cap {
	position: absolute;
	left: 44px;
	right: 44px;
	bottom: 40px;
	z-index: 3;
	opacity: 0;
	transition: opacity 0.5s ease 0.12s;
}
.dc-tag {
	display: inline-block;
	font-family: ui-monospace, Menlo, monospace;
	font-size: 0.68rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.82);
	background: rgba(4, 64, 63, 0.4);
	padding: 5px 11px;
	border-radius: 6px;
	backdrop-filter: blur(4px);
	margin-bottom: 14px;
}
.dc-title {
	font-family: var( --e-global-typography-bc5a66b-font-family ), Sans-serif;
	font-weight: 700;
	font-size: clamp(1.5rem, 2.6vw, 2.5rem);
	line-height: 1.12;
	letter-spacing: -0.02em;
	color: #fff;
	max-width: 520px;
	text-shadow: 0 2px 24px rgba(4, 64, 63, 0.5);
}
.dc-card.main .dc-shade,
.dc-card.main .dc-cap {
	opacity: 1;
}
.dc-card.main .dc-num {
	opacity: 0;
}
.dc-arrow {
	position: absolute;
	left: 24px;
	top: 44px;
	width: 62px;
	height: 62px;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 14px 30px -14px rgba(4, 64, 63, 0.45);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 9;
	cursor: pointer;
	transition: 0.25s;
}
.dc-arrow:hover {
	transform: translateX(4px) scale(1.07);
	background: var(--mist);
}
.dc-arrow svg {
	width: 22px;
	height: 22px;
	stroke: var( --e-global-color-secondary );
	fill: none;
	stroke-width: 2.2;
	stroke-linecap: round;
	stroke-linejoin: round;
}
.dc-dots {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	margin-top: 40px;
}
.dc-dots button {
	height: 9px;
	border-radius: 999px;
	border: none;
	padding: 0;
	cursor: pointer;
	transition:
		width 0.35s cubic-bezier(0.2, 0.75, 0.2, 1),
		background 0.35s ease;
	width: 9px;
	background: #cfe0de;
}
.dc-dots button.on {
	width: 30px;
	background: var( --e-global-color-secondary );
}
.dc-cta {
	text-align: center;
	margin-top: 52px;
}
@media (max-width: 560px) {
	.dc-cap {
		left: 22px;
		right: 22px;
		bottom: 24px;
	}
}
.discover .container {
	max-width: 1360px;
}
.disc-top {
	text-align: center;
	margin-bottom: 8px;
}
.disc-top h2 {
	font-size: clamp(1.9rem, 3.8vw, 2.9rem);
	margin-top: 12px;
}
/* controles */
.ctrl {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 18px;
	margin: 26px 0 44px;
}
.ctrl .count {
	font-family: var( --e-global-typography-bc5a66b-font-family ), Sans-serif;
	font-weight: 600;
	font-size: 0.9rem;
	color: var(--ink);
	font-variant-numeric: tabular-nums;
}
.ctrl .bar {
	width: 150px;
	height: 3px;
	background: var(--line);
	border-radius: 2px;
	overflow: hidden;
}
.ctrl .bar i {
	display: block;
	height: 100%;
	width: 0;
	background: var( --e-global-color-secondary );
	border-radius: 2px;
}
.ctrl .bar i.run {
	animation: prog 5s linear forwards;
}
@keyframes prog {
	from {
		width: 0;
	}
	to {
		width: 100%;
	}
}
.ctrl button {
	width: 38px;
	height: 38px;
	border-radius: 50%;
	border: 1.5px solid var(--line);
	background: #fff;
	color: var(--teal-deep);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: 0.2s;
}
.ctrl button:hover {
	border-color: var( --e-global-color-secondary );
	background: var(--mist);
}
.ctrl button svg {
	width: 16px;
	height: 16px;
	fill: currentColor;
}
/* palco */
@keyframes kb {
	from {
		transform: scale(1);
	}
	to {
		transform: scale(1.1);
	}
}
.stage {
	position: relative;
	height: 660px;
}
.slide-title {
	position: absolute;
	left: 0;
	top: 6px;
	max-width: 440px;
	font-family: var( --e-global-typography-bc5a66b-font-family ), Sans-serif;
	font-weight: 700;
	font-size: clamp(1.4rem, 2.4vw, 2rem);
	line-height: 1.18;
	letter-spacing: -0.02em;
	color: #131313;
	z-index: 5;
	transition:
		opacity 0.5s,
		transform 0.5s;
}
/* card principal */
.main-card {
	position: absolute;
	left: 70px;
	top: 150px;
	width: 760px;
	height: 490px;
	border-radius: 28px;
	overflow: hidden;
	box-shadow: 0 48px 90px -42px rgba(4, 64, 63, 0.55);
	z-index: 4;
}
.main-card .ph {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	transition: opacity 0.9s cubic-bezier(0.4, 0, 0.2, 1);
	animation: kb 8s ease-in-out infinite alternate;
}
.main-card .ph.b {
	opacity: 0;
}
/* setinha no recorte superior-esquerdo */
.arrow-btn {
	position: absolute;
	left: 32px;
	top: 195px;
	width: 70px;
	height: 70px;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 14px 30px -14px rgba(4, 64, 63, 0.4);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 6;
	cursor: pointer;
	transition: 0.25s;
}
.arrow-btn:hover {
	transform: translateX(4px);
	background: var( --e-global-color-secondary );
}
.arrow-btn svg {
	width: 22px;
	height: 22px;
	stroke: var( --e-global-color-secondary );
	fill: none;
	stroke-width: 2.2;
}
/* cards menores espiando */
.peek {
	position: absolute;
	border-radius: 18px;
	overflow: hidden;
	box-shadow: 0 30px 60px -34px rgba(4, 64, 63, 0.5);
	z-index: 2;
}
.peek .ph {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	transition: opacity 0.6s ease;
}
.peek.p1 {
	width: 400px;
	height: 260px;
	right: -20px;
	top: 20px;
}
.peek.p2 {
	width: 320px;
	height: 215px;
	right: 70px;
	bottom: 0;
}
.peek.p3 {
	width: 220px;
	height: 285px;
	left: -55px;
	top: 200px;
	opacity: 0.9;
}
.disc-cta {
	text-align: center;
	margin-top: 56px;
}
@media (max-width: 980px) {
	.stage {
		height: auto;
		display: flex;
		flex-direction: column;
		gap: 18px;
	}
	.slide-title {
		position: static;
		max-width: none;
		margin-bottom: 6px;
	}
	.main-card {
		position: static;
		left: 0;
		top: 0;
		width: 100%;
		height: 300px;
	}
	.arrow-btn {
		display: none;
	}
	.peek {
		position: static;
		width: 100% !important;
		height: 150px !important;
	}
	.peek.p3 {
		display: none;
	}
}