/*
 * MN Hero Slider — folha estática.
 *
 * Tudo que varia por instância chega como custom property emitida pelo motor de estilos do
 * Divi (--mn-*), ou como classe por breakpoint (mn-*--desktop/tablet/phone). Assim o mesmo
 * CSS serve o front-end e o canvas do Visual Builder.
 */

.mn-hero-slider {
	position: relative;
	overflow: hidden;
	width: 100%;
}

.mn-hero-slider__viewport {
	overflow: hidden;
	width: 100%;
}

.mn-hero-slider__track {
	display: flex;
	width: 100%;
	will-change: transform;
}

.mn-hero-slider[data-effect="fade"] .mn-hero-slider__track {
	display: block;
	position: relative;
}

/* Banner */

.mn-hero-banner {
	position: relative;
	flex: 0 0 100%;
	width: 100%;
	min-width: 100%;
	min-height: 480px;
	overflow: hidden;
	isolation: isolate;
}

.mn-hero-slider[data-effect="fade"] .mn-hero-banner {
	position: absolute;
	inset: 0;
	opacity: 0;
	transition: opacity var(--mn-hero-transition, 600ms) ease;
	pointer-events: none;
}

.mn-hero-slider[data-effect="fade"] .mn-hero-banner:first-child {
	position: relative;
}

.mn-hero-slider[data-effect="fade"] .mn-hero-banner.is-active {
	opacity: 1;
	pointer-events: auto;
	z-index: 1;
}

.mn-hero-banner__media,
.mn-hero-banner__overlay {
	position: absolute;
	inset: 0;
	z-index: 0;
}

.mn-hero-banner__media {
	overflow: hidden;
	background-color: #111;
}

.mn-hero-banner__overlay {
	z-index: 1;
	pointer-events: none;
}

.mn-hero-banner__picture {
	position: absolute;
	inset: 0;
	display: block;
	overflow: hidden;
}

.mn-hero-banner__media .mn-hero-banner__poster,
.mn-hero-banner__media .mn-hero-banner__video,
.mn-hero-banner__poster,
.mn-hero-banner__video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	max-height: none;
	object-fit: cover;
	object-position: center center;
	border: 0;
}

.mn-hero-banner__video,
.mn-hero-banner__frame {
	opacity: 0;
	transition: opacity 400ms ease;
}

.mn-hero-banner__video.is-ready,
.mn-hero-banner__frame.is-ready {
	opacity: 1;
}

/* O iframe do YouTube não recorta com object-fit, então é escalado por cima da área visível. */
.mn-hero-banner__frame {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 100vw;
	height: 56.25vw;
	min-height: 100%;
	min-width: 177.78vh;
	border: 0;
	transform: translate(-50%, -50%);
	pointer-events: none;
}

.mn-hero-banner__content {
	position: relative;
	z-index: 2;
	display: flex;
	width: 100%;
	min-height: inherit;
	height: 100%;
	padding: 40px 6%;
	box-sizing: border-box;
	justify-content: center;
	align-items: center;
}

.mn-hero-banner__inner {
	width: 100%;
	max-width: 1080px;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	row-gap: var(--vertical-gap, 0px);
}

/* Setas e pontos */

.mn-hero-slider__arrow {
	position: absolute;
	top: 50%;
	z-index: 5;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	margin: 0;
	border: 0;
	background: none;
	color: var(--mn-arrow-color, #fff);
	font-size: var(--mn-arrow-size, 32px);
	cursor: pointer;
	transform: translateY(-50%);
	transition: opacity 200ms ease;
	opacity: 0.85;
	-webkit-appearance: none;
	appearance: none;
}

.mn-hero-slider__arrow:hover,
.mn-hero-slider__arrow:focus-visible {
	opacity: 1;
}

.mn-hero-slider__arrow svg {
	width: 1em;
	height: 1em;
	display: block;
}

.mn-hero-slider__arrow--prev {
	left: var(--mn-arrow-offset, 24px);
}

.mn-hero-slider__arrow--next {
	right: var(--mn-arrow-offset, 24px);
}

.mn-hero-slider__dots {
	position: absolute;
	left: 0;
	right: 0;
	bottom: var(--mn-dot-offset, 28px);
	z-index: 5;
	display: flex;
	gap: 10px;
	justify-content: center;
	align-items: center;
}

.mn-hero-slider__dot {
	width: var(--mn-dot-size, 10px);
	height: var(--mn-dot-size, 10px);
	padding: 0;
	border: 0;
	border-radius: 50%;
	background-color: var(--mn-dot-color, rgba(255, 255, 255, 0.45));
	cursor: pointer;
	transition: transform 200ms ease, background-color 200ms ease;
	-webkit-appearance: none;
	appearance: none;
}

.mn-hero-slider__dot[aria-selected="true"] {
	background-color: var(--mn-dot-active, #fff);
	transform: scale(1.25);
}

/* Alinhamento do conteúdo — front-end (uma classe por breakpoint) */

@media (min-width: 981px) {
	.mn-hero-slider.mn-arrows-off--desktop .mn-hero-slider__arrow,
	.mn-hero-slider.mn-dots-off--desktop .mn-hero-slider__dots { display: none; }
	.mn-hero-banner.mn-full--desktop { min-height: 100vh; min-height: 100svh; }
	.mn-hero-banner.mn-ah-start--desktop > .mn-hero-banner__content { justify-content: flex-start; text-align: left; }
	.mn-hero-banner.mn-ah-center--desktop > .mn-hero-banner__content { justify-content: center; text-align: center; }
	.mn-hero-banner.mn-ah-end--desktop > .mn-hero-banner__content { justify-content: flex-end; text-align: right; }
	.mn-hero-banner.mn-ah-start--desktop .mn-hero-banner__inner { align-items: flex-start; }
	.mn-hero-banner.mn-ah-center--desktop .mn-hero-banner__inner { align-items: center; }
	.mn-hero-banner.mn-ah-end--desktop .mn-hero-banner__inner { align-items: flex-end; }
	.mn-hero-banner.mn-av-start--desktop > .mn-hero-banner__content { align-items: flex-start; }
	.mn-hero-banner.mn-av-center--desktop > .mn-hero-banner__content { align-items: center; }
	.mn-hero-banner.mn-av-end--desktop > .mn-hero-banner__content { align-items: flex-end; }
}

@media (min-width: 768px) and (max-width: 980px) {
	.mn-hero-slider.mn-arrows-off--tablet .mn-hero-slider__arrow,
	.mn-hero-slider.mn-dots-off--tablet .mn-hero-slider__dots { display: none; }
	.mn-hero-banner.mn-full--tablet { min-height: 100vh; min-height: 100svh; }
	.mn-hero-banner.mn-ah-start--tablet > .mn-hero-banner__content { justify-content: flex-start; text-align: left; }
	.mn-hero-banner.mn-ah-center--tablet > .mn-hero-banner__content { justify-content: center; text-align: center; }
	.mn-hero-banner.mn-ah-end--tablet > .mn-hero-banner__content { justify-content: flex-end; text-align: right; }
	.mn-hero-banner.mn-ah-start--tablet .mn-hero-banner__inner { align-items: flex-start; }
	.mn-hero-banner.mn-ah-center--tablet .mn-hero-banner__inner { align-items: center; }
	.mn-hero-banner.mn-ah-end--tablet .mn-hero-banner__inner { align-items: flex-end; }
	.mn-hero-banner.mn-av-start--tablet > .mn-hero-banner__content { align-items: flex-start; }
	.mn-hero-banner.mn-av-center--tablet > .mn-hero-banner__content { align-items: center; }
	.mn-hero-banner.mn-av-end--tablet > .mn-hero-banner__content { align-items: flex-end; }
}

@media (max-width: 767px) {
	.mn-hero-slider.mn-arrows-off--phone .mn-hero-slider__arrow,
	.mn-hero-slider.mn-dots-off--phone .mn-hero-slider__dots { display: none; }
	.mn-hero-banner.mn-full--phone { min-height: 100vh; min-height: 100svh; }
	.mn-hero-banner.mn-ah-start--phone > .mn-hero-banner__content { justify-content: flex-start; text-align: left; }
	.mn-hero-banner.mn-ah-center--phone > .mn-hero-banner__content { justify-content: center; text-align: center; }
	.mn-hero-banner.mn-ah-end--phone > .mn-hero-banner__content { justify-content: flex-end; text-align: right; }
	.mn-hero-banner.mn-ah-start--phone .mn-hero-banner__inner { align-items: flex-start; }
	.mn-hero-banner.mn-ah-center--phone .mn-hero-banner__inner { align-items: center; }
	.mn-hero-banner.mn-ah-end--phone .mn-hero-banner__inner { align-items: flex-end; }
	.mn-hero-banner.mn-av-start--phone > .mn-hero-banner__content { align-items: flex-start; }
	.mn-hero-banner.mn-av-center--phone > .mn-hero-banner__content { align-items: center; }
	.mn-hero-banner.mn-av-end--phone > .mn-hero-banner__content { align-items: flex-end; }
}

/* Visual Builder: banners empilhados para edição, e classes do breakpoint em edição */

.mn-hero-slider.mn-vb-slider .mn-hero-slider__viewport { overflow: visible; }
.mn-hero-slider.mn-vb-slider .mn-hero-slider__track { display: block; }
.mn-hero-slider.mn-vb-slider .mn-hero-banner {
	position: relative;
	inset: auto;
	width: 100%;
	min-width: 0;
	opacity: 1;
	pointer-events: auto;
}


.mn-hero-slider.mn-vb-arrows-off .mn-hero-slider__arrow,
.mn-hero-slider.mn-vb-dots-off .mn-hero-slider__dots { display: none; }
.mn-hero-banner.mn-vb-full { min-height: 100vh; min-height: 100svh; }
.mn-hero-banner.mn-vb-ah-start > .mn-hero-banner__content { justify-content: flex-start; text-align: left; }
.mn-hero-banner.mn-vb-ah-center > .mn-hero-banner__content { justify-content: center; text-align: center; }
.mn-hero-banner.mn-vb-ah-end > .mn-hero-banner__content { justify-content: flex-end; text-align: right; }
.mn-hero-banner.mn-vb-ah-start .mn-hero-banner__inner { align-items: flex-start; }
.mn-hero-banner.mn-vb-ah-center .mn-hero-banner__inner { align-items: center; }
.mn-hero-banner.mn-vb-ah-end .mn-hero-banner__inner { align-items: flex-end; }
.mn-hero-banner.mn-vb-av-start > .mn-hero-banner__content { align-items: flex-start; }
.mn-hero-banner.mn-vb-av-center > .mn-hero-banner__content { align-items: center; }
.mn-hero-banner.mn-vb-av-end > .mn-hero-banner__content { align-items: flex-end; }

@media (prefers-reduced-motion: reduce) {
	.mn-hero-slider__track,
	.mn-hero-banner {
		transition: none !important;
	}
}

/* Button-module class-name collision workaround.
   Divi 5 names each Button module's CSS class from a running index scoped
   to the current "layout area" (e.g. "et_pb_button_0_tb_body" - see
   includes/mobile-menu-overlay.php's own doc comment for the same class of
   bug). The mobile menu overlay (post 3104, "Fale conosco") is rendered a
   second time on every page via wp_footer and is made to claim that same
   "et_body_layout" area so its own modules get properly namespaced classes -
   but its content is parsed/styled in an earlier, separate pass (Divi's own
   CSS-generation pass over every referenced Library layout, which runs
   before this page's real Theme Builder body is even parsed), so its first
   button computes to the exact same class as this banner's first button.
   Divi ends up emitting only ONE consolidated CSS block for that shared
   class name, and a plain (non-!important) global default - the theme's
   accent color, applied via a lower-priority stylesheet - ends up winning
   the collision race for border-color/color on this instance, even though
   Divi's own per-module generated rules (still present in the page, just
   losing) correctly declare border-color/color as
   var(--gcid-9clq0vm3ou) !important, i.e. exactly the value below. Tried
   fixing this upstream (continuing this banner's own numbering into the
   overlay's pass, and suppressing Divi's off-canvas-render reset) - neither
   reaches far enough back, since the collision is fixed before either hook
   point runs. Resetting only the specific properties genuinely clobbered by
   the collision here, scoped to this module, using the SAME CSS custom
   property Divi itself already generated for this button (not a hardcoded
   color), so this still tracks whatever color the user picks in the Divi
   Visual Builder for this button - everything else (hover behaviour,
   spacing, font, etc.) still comes entirely from Divi's own generated
   styles.
*/
.mn-hero-banner .et_pb_button_module_wrapper .et_pb_button {
	background-color: transparent !important;
	border-width: 2px !important;
	border-color: var(--gcid-9clq0vm3ou) !important;
	color: var(--gcid-9clq0vm3ou) !important;
}