/* ==========================================================================
   Agência Titânio - Banner Home
   Desktop 1920 x 900 · Mobile 360 x 446
   Medidas em cqw (relativas à largura do banner).
   Variáveis --at-* são controladas pelo widget do Elementor.
   ========================================================================== */

.at-banner {
	--at-primary: #0047d8;
	--at-accent: #ff3d3d;
	--at-accent-hover: #e02f2f;
	--at-dark: #082b4f;
	--at-light: #fff;
	--at-dot: #e3e3e3;
	--at-font: 'Aktiv Grotesk';
	--at-ratio-w: 1920;
	--at-ratio-h: 900;
	--at-card-width: 36.71;
	--at-card-right: 15.21;
	--at-card-bottom: 1;
	--at-dots-left: 28.69;
	--at-dots-bottom: 3.21;
	--at-img-position: 0% 0%;
	--at-card-height-mobile: 405px;
	--at-transition: .7s;
	--at-ease: cubic-bezier(.76, 0, .24, 1);

	position: relative;
	width: 100%;
	aspect-ratio: var(--at-ratio-w) / var(--at-ratio-h);
	overflow: hidden;
	background: var(--at-primary);
	color: var(--at-light);
	font-family: var(--at-font), system-ui, Arial, sans-serif;
	container-type: inline-size;
}

.at-banner *,
.at-banner *::before {
	box-sizing: border-box;
}

/* Fotos ===================================================================== */

.at-banner__media {
	position: absolute;
	inset: 0;
}

/* aguardando: recortada à direita, entra revelando da esquerda */
.at-banner__slide {
	position: absolute;
	inset: 0;
	opacity: 0;
	clip-path: inset(0 100% 0 0);
}

.at-banner__slide.is-active,
.at-banner__slide.is-leaving {
	transition:
		opacity var(--at-transition) var(--at-ease),
		clip-path var(--at-transition) var(--at-ease);
}

.at-banner__slide.is-active {
	z-index: 2;
	opacity: 1;
	clip-path: inset(0);
}

/* saindo: recolhe para a direita */
.at-banner__slide.is-leaving {
	z-index: 1;
	opacity: 0;
	clip-path: inset(0 0 0 100%);
}

.at-banner__slide picture {
	display: block;
	height: 100%;
}

.at-banner .at-banner__img {
	display: block;
	width: 100%;
	max-width: none;
	height: 100%;
	object-fit: cover;
	object-position: var(--at-img-position);
}

/* Véu ======================================================================= */

.at-banner__veil {
	position: absolute;
	inset: 0;
	z-index: 3;
	pointer-events: none;
	background: linear-gradient(
		180deg,
		rgba(0, 40, 120, .32) 0%,
		rgba(0, 40, 120, 0) 35%,
		rgba(0, 40, 120, .62) 100%
	);
}

/* Card ====================================================================== */

.at-banner__card {
	position: absolute;
	z-index: 4;
	right: calc(var(--at-card-right) * 1cqw);
	bottom: calc(var(--at-card-bottom) * 1cqw);
	width: calc(var(--at-card-width) * 1cqw);
	display: flex;
	flex-direction: column;
	padding: 2cqw 2.92cqw;
	background: var(--at-primary);
	box-shadow: 0 1.35cqw 3.13cqw rgba(0, 0, 0, .35);
	text-align: right;
	opacity: 0;
	visibility: hidden;
	transition: opacity .5s ease, visibility .5s ease;
}

.at-banner__card.is-active {
	opacity: 1;
	visibility: visible;
}

.at-banner__card::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: .36cqw;
	background: var(--at-accent);
}

.at-banner__card--left {
	text-align: left;
}

.at-banner .at-banner__eyebrow {
	display: block;
	margin: 2cqw 0 1cqw;
	font-size: .73cqw;
	font-weight: 700;
	line-height: 1;
	letter-spacing: .26em;
	text-transform: uppercase;
}

.at-banner .at-banner__title {
	margin: 0;
	padding: 0;
	color: inherit;
	font-family: inherit;
	font-size: 2.0cqw;
	font-weight: 400;
	line-height: 1.5;
	letter-spacing: -.02em;
	text-transform: uppercase;
	text-wrap: pretty;
}

.at-banner .at-banner__card--md .at-banner__title {
	font-size: 2cqw;
}

.at-banner .at-banner__title em,
.at-banner .at-banner__title i {
	font-style: italic;
	font-weight: 700;
}

.at-banner .at-banner__text {
	margin: 0;
	padding: 1.3cqw 0 0;
	color: inherit;
	font-size: 1.09cqw;
	line-height: 1.4;
}

/* Botão ===================================================================== */

.at-banner .at-banner__cta {
	align-self: flex-end;
	display: inline-block;
	margin-top: 1cqw;
	padding: 1.15cqw 1.98cqw;
	border-radius: .8cqw;
	font-size: 1.5cqw;
	font-weight: 400;
	line-height: 1;
	text-decoration: none;
	text-transform: uppercase;
	white-space: nowrap;
	transition: background-color .2s ease, color .2s ease;
}

.at-banner .at-banner__card--left .at-banner__cta {
	align-self: flex-start;
}

.at-banner .at-banner__cta--red {
	margin-top: 2cqw;
	background: var(--at-accent);
	color: var(--at-light);
}

.at-banner .at-banner__cta--red:hover,
.at-banner .at-banner__cta--red:focus-visible {
	background: var(--at-accent-hover);
	color: var(--at-light);
}

.at-banner .at-banner__cta--white {
	background: var(--at-light);
	color: var(--at-dark);
}

.at-banner .at-banner__cta--white:hover,
.at-banner .at-banner__cta--white:focus-visible {
	background: var(--at-dark);
	color: var(--at-light);
}

/* Indicadores =============================================================== */

.at-banner__dots {
	position: absolute;
	z-index: 4;
	left: calc(var(--at-dots-left) * 1cqw);
	bottom: calc(var(--at-dots-bottom) * 1cqw);
	display: flex;
	align-items: center;
	gap: .52cqw;
}

.at-banner .at-banner__dot {
	width: 16px;
	height: 16px;
	min-height: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--at-dot);
	cursor: pointer;
	transition: background-color .3s ease;
}

.at-banner .at-banner__dot.is-active {
	background: var(--at-accent);
}

.at-banner .at-banner__dot:focus-visible {
	outline: 2px solid var(--at-light);
	outline-offset: 2px;
}

/* Texto por dispositivo ===================================================== */

.at-only-mobile {
	display: none;
}

/* Movimento reduzido ======================================================== */

@media (prefers-reduced-motion: reduce) {
	.at-banner__slide,
	.at-banner__card,
	.at-banner .at-banner__dot {
		transition: none !important;
	}
}

/* ==========================================================================
   Mobile (até 640px): foto em cima, card embaixo
   ========================================================================== */

@media (max-width: 640px) {
	.at-banner {
		display: grid;
		aspect-ratio: auto;
	}

	.at-banner__media {
		position: relative;
		display: grid;
	}

	.at-banner__slide {
		grid-area: 1 / 1;
		position: relative;
		inset: auto;
	}

	.at-banner .at-banner__img {
		height: auto;
		object-fit: initial;
	}

	.at-banner__veil {
		display: none;
	}

	/* cards na mesma célula; altura estável entre trocas */
	.at-banner__card {
		grid-area: 2 / 1;
		position: relative;
		inset: auto;
		width: auto;
		min-height: var(--at-card-height-mobile);
		justify-content: center;
		gap: 3.33cqw;
		padding: 8.56cqw;
		padding-bottom: calc(10cqw + 16px);
		box-shadow: none;
		text-align: left;
	}

	.at-banner__card::before {
		height: 1.11cqw;
	}

	.at-banner .at-banner__eyebrow {
		margin: 0 0 3.4cqw;
		font-size: 3.4cqw;
		letter-spacing: .22em;
	}

	.at-banner .at-banner__title,
	.at-banner .at-banner__card--md .at-banner__title {
		font-size: 7.11cqw;
		line-height: 1.2;
		letter-spacing: -.01em;
	}

	.at-banner .at-banner__text {
		padding: 0;
		font-size: 4.3cqw;
	}

	.at-banner .at-banner__cta,
	.at-banner .at-banner__cta--red,
	.at-banner .at-banner__card--left .at-banner__cta {
		align-self: stretch;
		margin-top: 1.11cqw;
		padding: 4.44cqw 3.33cqw;
		border-radius: 3.11cqw;
		font-size: 4.4cqw;
		white-space: normal;
		text-align: center;
	}

	.at-banner__dots {
		grid-area: 2 / 1;
		position: relative;
		left: auto;
		bottom: auto;
		align-self: end;
		justify-self: center;
		margin-bottom: 7.44cqw;
		gap: 2.22cqw;
	}

	.at-only-mobile {
		display: inline;
	}

	.at-only-desktop {
		display: none;
	}
}